/* =========================================================
   Settings windows: account, appearance, users, landing text.
   One language: an icon tile in the header, a serif title, and
   label | control rows separated by hairlines.
   ========================================================= */

/* header */
.modal-head.has-icon{ align-items:center; gap:var(--s-4); padding:var(--s-5) var(--s-5) var(--s-5) var(--s-6); border-bottom:1px solid var(--line-soft); }
.modal-head.has-icon .modal-head-copy{ flex:1; gap:7px; }
.modal-head.has-icon .eyebrow{ color:var(--text-3); font-size:10.5px; line-height:1; letter-spacing:.16em; }
.modal-head.has-icon .eyebrow::before{ display:none; }
.modal-head.has-icon .icon-btn{ margin:0; }
.modal-head.has-icon .eyebrow{ display:inline-flex; align-items:center; gap:7px; }
.modal-head.has-icon .eyebrow .i{ width:12px; height:12px; flex:none; stroke-width:1.8; color:var(--accent-text); }
.modal-title{ font-family:var(--font-serif); font-size:1.85rem; font-weight:400; line-height:1; letter-spacing:-.005em; }
.modal-head-note{ color:var(--text-3); font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.theme-dirty-note{ display:inline-flex; align-items:center; gap:7px; color:var(--accent-text); }
.theme-dirty-note::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.theme-dirty-note[hidden]{ display:none; }
.settings-modal .modal-body{ padding:0 var(--s-6) var(--s-2); }

/* rows */
.set-rows{ display:grid; }
.set-row{ display:grid; grid-template-columns:190px minmax(0, 1fr); gap:var(--s-6); padding:var(--s-5) 0; border-bottom:1px solid var(--line-soft); }
.set-row:last-child{ border-bottom:0; }
.set-row-label strong{ display:block; font-size:var(--fs-sm); font-weight:600; }
.set-row-label span{ display:block; margin-top:3px; color:var(--text-3); font-size:var(--fs-xs); line-height:1.45; text-transform:none; }
.set-row-control{ display:grid; gap:var(--s-2); min-width:0; }
.set-inline{ display:flex; align-items:center; gap:var(--s-2); }
.set-inline > input{ flex:1; min-width:0; }
.set-readonly{ display:flex; align-items:center; gap:var(--s-3); height:var(--control-h); padding:0 var(--s-3); border:1px dashed var(--line); border-radius:var(--r-sm); color:var(--text-2); font-size:var(--fs-sm); }
.set-readonly .i{ width:15px; height:15px; color:var(--text-3); }
.set-readonly em{ margin-left:auto; color:var(--text-3); font-size:var(--fs-xs); font-style:normal; }
.set-key{ flex:1; display:flex; align-items:center; gap:var(--s-3); min-width:0; height:var(--control-h); padding:0 var(--s-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-sunken); color:var(--text-2); font-size:var(--fs-sm); }
.set-key .i{ width:15px; height:15px; color:var(--accent-text); }
.set-key em{ margin-left:auto; padding:2px 8px; border-radius:6px; background:var(--good-wash); color:var(--good); font-size:var(--fs-2xs); font-style:normal; font-weight:600; }
.set-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-2); }
.set-tiles div{ display:grid; gap:3px; padding:var(--s-3); border:1px solid var(--line-soft); border-radius:var(--r-sm); }
.set-tiles b{ color:var(--text-3); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }
.set-tiles span{ font-size:var(--fs-sm); font-weight:500; }

/* account identity */
/* wide layout: who you are on the left, the settings on the right */
.account-modal.modal-xl{ max-width:940px; }
.account-modal .modal-body{ padding:0; }
.acct-layout{ display:grid; grid-template-columns:290px minmax(0, 1fr); min-height:100%; }
.acct-side{ display:flex; flex-direction:column; gap:var(--s-6); padding:var(--s-6); border-right:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface-sunken) 55%, transparent); }
.acct-layout > .set-rows{ padding:var(--s-1) var(--s-6) var(--s-2); }
.account-modal .set-row{ grid-template-columns:170px minmax(0, 1fr); }
.acct-side-label{ display:block; margin-bottom:var(--s-2); color:var(--text-3); font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.acct-device{ margin-top:auto; padding-top:var(--s-5); border-top:1px solid var(--line-soft); }
.acct-device-row{ display:flex; justify-content:space-between; gap:var(--s-3); padding:7px 0; font-size:var(--fs-xs); }
.acct-device-row span{ color:var(--text-3); }
.acct-device-row b{ color:var(--text-2); font-weight:400; text-align:right; }
.acct-id{ display:grid; justify-items:start; gap:var(--s-4); }
.acct-photo .avatar{ box-shadow:0 0 0 4px var(--surface), 0 0 0 5px var(--line-strong); }
.acct-id-copy{ min-width:0; }
.acct-id-copy h4{ overflow:hidden; max-width:100%; font-family:var(--font-serif); font-size:1.85rem; font-weight:400; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.acct-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:6px; color:var(--text-3); font-size:var(--fs-xs); }
.acct-role{ display:inline-flex; align-items:center; gap:5px; padding-left:12px; border-left:1px solid var(--line); }
.acct-role .i{ width:13px; height:13px; }
.acct-role.is-admin{ color:var(--accent-text); }
.acct-photo-links{ display:flex; align-items:center; gap:14px; margin-top:var(--s-3); }
.acct-photo-links .link-btn{ font-size:var(--fs-xs); cursor:pointer; }
.acct-remove{ color:var(--text-3); }
.acct-remove:hover{ color:var(--bad); }
.account-modal .set-inline > .btn{ height:var(--control-h); }
.account-modal .set-readonly{ justify-content:space-between; border-style:solid; border-color:var(--line-soft); background:var(--surface-sunken); color:var(--text-2); }
.acct-password-closed{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); height:var(--control-h); padding:0 4px 0 var(--s-3); border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--surface-sunken); }
.acct-password-dots{ color:var(--text-3); letter-spacing:.18em; }
.acct-password-form{ display:none; }
.acct-password.is-open .acct-password-closed{ display:none; }
.acct-password.is-open .acct-password-form{ display:grid; animation:fade-up var(--dur-2) var(--ease-out); }
.acct-password-actions{ display:flex; justify-content:flex-end; gap:var(--s-2); }
.account-modal .modal-body{ scrollbar-width:thin; }
.account-modal .form-stack{ gap:var(--s-3); }

/* appearance */
.theme-modal .theme-layout{ grid-template-columns:minmax(0, 1fr); gap:0; margin:0 calc(var(--s-6) * -1); }
.theme-radio{ margin-left:auto; width:14px; height:14px; border:1px solid var(--line-strong); border-radius:50%; }
.theme-swatches{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* theme controls: ruled sections, one quiet list per group */
.theme-modal.modal-xl{ max-width:1000px; }
/* two columns so everything fits on screen without scrolling */
.theme-modal .theme-controls{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; gap:0; padding:0; }
.tc-col{ display:grid; align-content:start; padding:0 var(--s-6) var(--s-2); }
.tc-col + .tc-col{ align-self:stretch; border-left:1px solid var(--line-soft); }
.tc-section{ display:grid; gap:var(--s-3); padding:var(--s-5) 0; border-bottom:1px solid var(--line-soft); }
.tc-section:last-child{ border-bottom:0; }
.tc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.tc-label{ color:var(--text-2); font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.tc-hint{ color:var(--text-3); font-size:var(--fs-xs); text-align:right; }
.tc-value{ color:var(--text); font-size:var(--fs-sm); }
.tc-accent{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
/* the custom swatch is a hue ring around the current colour */
.tc-custom{ display:grid; place-items:center; background:conic-gradient(from 90deg, #F87171, #FBBF24, #4ADE80, #38BDF8, #A78BFA, #F472B6, #F87171) !important; box-shadow:none; }
.tc-custom::after{ content:""; width:18px; height:18px; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 2px var(--surface); }
.tc-custom.selected{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--line-strong); }
.tc-custom input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.tc-hex{ width:96px; height:32px; min-height:0; padding:0 10px; border:1px solid var(--line-soft); border-radius:var(--r-xs); background:var(--surface-sunken); color:var(--text-2); font-size:var(--fs-xs); text-transform:uppercase; }
.tc-hex:focus{ color:var(--text); }
.tc-list{ display:grid; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--surface-sunken); }
.tc-row{ display:flex; align-items:center; gap:var(--s-3); min-height:54px; padding:var(--s-2) var(--s-3); }
.tc-row + .tc-row{ border-top:1px solid var(--line-soft); }
.tc-chip{ position:relative; width:26px; height:26px; flex:none; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .24), 0 0 0 3px var(--surface-sunken), 0 0 0 4px var(--line-soft); cursor:pointer; }
.tc-chip input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.tc-row-copy{ display:grid; flex:1; min-width:0; }
.tc-row-copy b{ font-size:var(--fs-sm); font-weight:400; }
.tc-row-copy small{ color:var(--text-3); font-size:var(--fs-xs); }
.tc-row .tc-hex{ background:var(--surface); }
.tc-role{ width:64px; flex:none; color:var(--text-3); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.tc-font{ flex:1; min-width:0; height:34px; min-height:0; padding:0 10px; border:1px solid var(--line-soft); border-radius:var(--r-xs); background:var(--surface); font-size:var(--fs-sm); }
.tc-spec{ width:52px; flex:none; color:var(--text); font-size:1.6rem; line-height:1; text-align:right; }
.theme-swatch{ position:relative; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .15); cursor:pointer; transition:transform var(--dur-1); }
.theme-swatch:hover{ transform:scale(1.08); }
.theme-swatch.preset, .theme-swatch.preset.selected{ display:block; padding:0; border:0; background:var(--swatch); }
.theme-swatch.selected{ box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--swatch); }
.theme-range{ width:100%; accent-color:var(--accent); }
.theme-ticks{ display:flex; justify-content:space-between; color:var(--text-3); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; }

/* users */
/* the roster on the left, the selected person's file on the right (the Account window's layout) */
.users-modal.modal-xl{ max-width:980px; height:min(720px, calc(100dvh - 2 * var(--s-6))); }
.users-modal .modal-body{ display:flex; padding:0; overflow:hidden; }
.um{ display:grid; grid-template-columns:340px minmax(0, 1fr); flex:1; min-width:0; min-height:0; }

/* roster */
.um-roster{ display:flex; flex-direction:column; min-width:0; min-height:0; border-right:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface-sunken) 55%, transparent); }
.um-search{ flex:none; width:auto; margin:var(--s-4) var(--s-4) 0; }
.um-filters.gallery-tabs{ display:flex; flex:none; margin:var(--s-3) var(--s-4) var(--s-3); }
/* four filters share the narrow roster evenly; no icons so all of them fit */
.um-filters .gallery-tab{ flex:1 1 0; justify-content:center; gap:6px; padding:0 6px; }
.um-filters .gallery-tab .i{ display:none; }
.um-list{ display:grid; align-content:start; gap:2px; flex:1; min-height:0; padding:var(--s-2); overflow-y:auto; scrollbar-width:thin; }
.um-row{ position:relative; display:flex; align-items:center; gap:var(--s-3); width:100%; min-height:56px; padding:var(--s-2) var(--s-3); border:0; border-radius:var(--r-sm); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background-color var(--dur-1); }
.um-row:hover{ background:var(--hover); }
.um-row.is-selected{ background:var(--surface); box-shadow:0 0 0 1px var(--line); }
/* the same marker the sidebar uses for the page you are on */
.um-row.is-selected::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px; border-radius:2px; background:var(--accent); }
.um-row:focus-visible{ outline:none; box-shadow:var(--ring); }
.um-row-copy{ display:grid; flex:1; min-width:0; line-height:1.3; }
.um-row-copy strong{ overflow:hidden; font-size:var(--fs-sm); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.um-row-copy strong em{ margin-left:6px; color:var(--text-3); font-size:var(--fs-xs); font-style:normal; font-weight:400; }
.um-row-copy small{ overflow:hidden; margin-top:1px; color:var(--text-3); font-size:var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }
.um-row-marks{ display:flex; align-items:center; gap:10px; flex:none; }
.um-row-marks > span{ display:grid; }
.um-row-marks .i{ width:14px; height:14px; color:var(--accent-text); }
.um-dot{ display:block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-wash); }
.um-dot.is-off{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--text-3); }
.um-row.is-disabled .avatar, .um-row.is-disabled .um-row-copy{ opacity:.55; }
.um-empty{ display:grid; justify-items:center; gap:var(--s-2); padding:var(--s-8) var(--s-4); color:var(--text-3); font-size:var(--fs-sm); text-align:center; }

/* the person's file */
.um-file{ min-width:0; min-height:0; padding:var(--s-6) var(--s-6) var(--s-2); overflow-y:auto; scrollbar-width:thin; }
.um-back{ display:none; }
.um-id{ display:flex; align-items:center; gap:var(--s-5); padding-bottom:var(--s-5); border-bottom:1px solid var(--line-soft); }
.um-id .avatar{ box-shadow:0 0 0 4px var(--surface), 0 0 0 5px var(--line-strong); }
.um-id .avatar:has(img){ box-shadow:0 0 0 4px var(--surface), 0 0 0 5px var(--line-strong); }
.um-id-copy{ min-width:0; }
.um-id-copy h4{ overflow:hidden; font-family:var(--font-serif); font-size:1.85rem; font-weight:400; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }
.um-id-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px; color:var(--text-3); font-size:var(--fs-xs); }
.um-id-meta > span{ display:inline-flex; align-items:center; gap:6px; }
.um-id-meta .i{ width:13px; height:13px; }
.um-handle{ display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--text-2); font-family:var(--font-mono); font-size:var(--fs-2xs); cursor:pointer; transition:color var(--dur-1); }
.um-handle .i{ opacity:.45; transition:opacity var(--dur-1); }
.um-handle:hover{ color:var(--text); }
.um-handle:hover .i, .um-handle:focus-visible .i{ opacity:1; }
.um-id-role.is-admin{ color:var(--accent-text); }
.um-id-state .um-dot{ margin:0 2px; }
.um-id-you{ gap:7px; color:var(--text-2); }
.um-id-you::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.users-modal .set-row{ grid-template-columns:200px minmax(0, 1fr); align-items:center; padding:var(--s-4) 0; }
.users-modal .set-inline > .btn{ height:var(--control-h); }
.users-modal .set-readonly{ border-style:solid; border-color:var(--line-soft); background:var(--surface-sunken); }
.users-modal .form-error:empty{ display:none; }
.um-role{ justify-self:start; }
.um-toggle{ display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--control-h); color:var(--text-2); font-size:var(--fs-sm); cursor:pointer; }
.um-none{ display:grid; place-content:center; justify-items:center; gap:var(--s-3); height:100%; color:var(--text-3); font-size:var(--fs-sm); }
.um-none .i{ width:28px; height:28px; opacity:.5; }

/* landing page text */
.landing-text-modal{ max-width:1120px; }
.landing-text-modal .modal-body{ padding:0; }
.lt-layout{ display:grid; grid-template-columns:minmax(0, 470px) minmax(0, 1fr); }
.lt-form{ display:grid; align-content:start; padding:0 var(--s-6) var(--s-4); border-right:1px solid var(--line-soft); }
.lt-form .tc-section{ gap:var(--s-3); }
.lt-form .tc-hint code{ padding:1px 5px; border-radius:5px; background:var(--surface-2); color:var(--text-2); font-family:var(--font-mono); font-size:10.5px; }
.lt-field{ display:grid; gap:6px; }
.lt-field-top{ display:flex; align-items:center; gap:var(--s-2); }
.lt-field-top label{ color:var(--text-2); font-size:var(--fs-sm); font-weight:400; }
.lt-field textarea{ min-height:0; resize:none; line-height:1.45; }
.lt-changed{ width:6px; height:6px; flex:none; border-radius:50%; background:var(--accent); opacity:0; transition:opacity var(--dur-2); }
.lt-field.is-changed .lt-changed{ opacity:1; }
.lt-count{ margin-left:auto; color:var(--text-3); font-size:var(--fs-xs); font-variant-numeric:tabular-nums; }
.lt-reset{ display:grid; place-items:center; width:26px; height:26px; flex:none; padding:0; border:0; border-radius:var(--r-xs); background:none; color:var(--text-3); cursor:pointer; transition:color var(--dur-1), background-color var(--dur-1); }
.lt-reset:hover{ background:var(--hover); color:var(--text); }
.lt-reset .i{ width:13px; height:13px; }
/* section headings: a ruled list, numbered like the landing */
.lt-row{ display:grid; grid-template-columns:24px 92px minmax(0, 1fr) 26px; align-items:center; gap:var(--s-2); min-height:52px; padding:6px var(--s-2) 6px var(--s-3); }
.lt-row + .lt-row{ border-top:1px solid var(--line-soft); }
.lt-row-no{ color:var(--text-3); font-family:var(--font-serif); font-size:1.05rem; font-style:italic; }
.lt-row.is-changed .lt-row-no{ color:var(--accent-text); }
.lt-row-label{ display:flex; align-items:center; gap:6px; min-width:0; color:var(--text-3); font-size:var(--fs-xs); }
.lt-row input{ height:36px; min-height:0; background:var(--surface); }

/* preview: the landing page's own look (its fonts, silver highlights and buttons), whatever the app theme */
.lt-preview{ position:sticky; top:0; align-self:start; margin:var(--s-5); border:1px solid #26262B; border-radius:var(--r-md); background:#070708; overflow:hidden; }
.lt-preview-top{ display:flex; justify-content:space-between; padding:var(--s-3) var(--s-4); border-bottom:1px solid rgba(255, 255, 255, .08); color:#8E8E96; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
.lt-preview-top span:last-child{ color:var(--accent-text); }
.lt-stage{ --lt-serif:"Instrument Serif", Georgia, serif; --lt-sans:"Sniglet", ui-sans-serif, system-ui, sans-serif; padding:var(--s-8) var(--s-6) var(--s-6); background:radial-gradient(70% 55% at 50% 0%, rgba(209, 226, 236, .08), transparent 70%); color:#F3F2EE; font-family:var(--lt-sans); }
.lt-stage em{ background:linear-gradient(180deg, #F4F1EA 20%, #8E9AA3 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; padding-right:.04em; }
.lt-hero{ display:grid; justify-items:center; gap:var(--s-3); text-align:center; }
.lt-pill{ display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid rgba(255, 255, 255, .16); border-radius:999px; color:#BFC7CD; font-size:11.5px; }
.lt-pill b{ padding:2px 8px; border:1px solid rgba(255, 255, 255, .16); border-radius:999px; color:#F3F2EE; font-size:9.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; }
.lt-pill .i{ width:11px; height:11px; color:#8E8E96; }
.lt-kicker{ position:relative; }
.lt-title{ position:relative; max-width:520px; margin:0; font-family:var(--lt-serif); font-size:2.6rem; font-weight:400; line-height:1; letter-spacing:-.01em; }
.lt-lead{ position:relative; max-width:440px; margin:0; color:#BFC7CD; font-family:var(--lt-serif); font-size:1.1rem; font-style:italic; line-height:1.4; }
.lt-ctas{ display:flex; gap:var(--s-2); margin-top:var(--s-2); }
.lt-cta{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border:1px solid rgba(255, 255, 255, .22); border-radius:999px; color:#F3F2EE; font-size:11.5px; -webkit-text-stroke:.3px currentColor; }
.lt-cta .i{ width:11px; height:11px; }
.lt-cta.is-primary{ border-color:#ECEFF1; background:#ECEFF1; color:#0A0A0B; }
.lt-heads{ display:grid; margin-top:var(--s-8); border-top:1px solid rgba(255, 255, 255, .09); }
.lt-head-row{ display:grid; grid-template-columns:32px minmax(0, 1fr); align-items:baseline; padding:var(--s-3) 0; border-bottom:1px solid rgba(255, 255, 255, .09); }
.lt-head-row > em{ font-family:var(--lt-serif); font-size:1rem; }
.lt-head{ position:relative; font-family:var(--lt-serif); font-size:1.35rem; line-height:1.15; }
.is-editing{ outline:1.5px solid var(--accent); outline-offset:6px; border-radius:2px; }
.lt-editing-tag{ position:absolute; right:-7px; top:-30px; padding:2px 7px; border-radius:5px; background:var(--accent); color:var(--on-accent); font-family:var(--font-body); font-size:9.5px; font-style:normal; font-weight:400; letter-spacing:.14em; text-transform:uppercase; -webkit-text-fill-color:var(--on-accent); }

@media (max-width: 900px){
  .theme-modal .theme-layout, .lt-layout{ grid-template-columns:1fr; }
  .theme-modal .theme-controls{ grid-template-columns:1fr; }
  .tc-col + .tc-col{ border-left:0; border-top:1px solid var(--line-soft); }
  .theme-modal .theme-controls, .lt-form{ border-right:0; }
  .lt-preview{ position:static; }
}
@media (max-width: 640px){
  .lt-row{ grid-template-columns:24px minmax(0, 1fr) 26px; row-gap:6px; padding:var(--s-2) var(--s-2) var(--s-3) var(--s-3); }
  .lt-row input{ grid-column:1 / -1; grid-row:2; }
  .lt-field textarea{ min-height:5.4em; }
  .set-row{ grid-template-columns:1fr; gap:var(--s-3); }
  .acct-layout{ grid-template-columns:1fr; }
  .acct-side{ gap:var(--s-5); border-right:0; border-bottom:1px solid var(--line-soft); }
  .acct-id{ grid-template-columns:auto minmax(0, 1fr); align-items:center; }
  .acct-id-copy h4{ font-size:1.55rem; }
  .acct-device{ margin-top:0; padding-top:var(--s-4); }
  .account-modal .set-row{ grid-template-columns:1fr; }
  .tc-hint{ display:none; }
  .set-tiles{ grid-template-columns:1fr; }
  .modal-head-note{ display:none; }
}
.set-key > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-key em{ flex:none; }

/* users on a narrow screen: the roster first, then one person's file with a way back */
@media (max-width: 760px){
  .users-modal.modal-xl{ height:min(720px, 94dvh); }
  /* the small label gives way to the New user button instead of running under it */
  .users-modal .modal-head .eyebrow{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .um{ grid-template-columns:minmax(0, 1fr); }
  .um-roster{ border-right:0; }
  .um-file{ display:none; padding:var(--s-4) var(--s-4) var(--s-2); }
  .um.is-detail .um-roster{ display:none; }
  .um.is-detail .um-file{ display:block; }
  .um-back{ display:inline-flex; margin-bottom:var(--s-4); }
  .um-id{ gap:var(--s-4); }
  .um-id .avatar-xl{ width:56px; height:56px; font-size:1.75rem; }
  .um-id-copy h4{ font-size:1.55rem; }
  .users-modal .set-row{ grid-template-columns:1fr; gap:var(--s-3); }
}