/* Settings pages (Personal preferences first) and the stand-in record pages. */
.settings-page { max-width: 720px; }
.settings-title { margin: 0 0 var(--sp-6); font-size: var(--fs-xl); line-height: 28px; font-weight: var(--fw-semibold); }
.settings-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.settings-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface);
  padding: var(--sp-6) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5);
}
.settings-card-title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.settings-field { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 400px; }
.settings-label { font-size: var(--fs-md); color: var(--text); }
.settings-email { display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); }
.settings-hint { font-size: var(--fs-sm); color: var(--text-2); }
.settings-actions { display: flex; gap: var(--sp-4); }
.settings-actions .btn .spinner { margin-right: var(--sp-2); }

/* Inline field errors (settings, invite card). */
.field-error { color: var(--red); font-size: var(--fs-sm); line-height: var(--lh-sm); min-height: 0; font-weight: var(--fw-regular); }
.field-error:empty { display: none; }
.input.is-invalid { border-color: var(--red); }

/* Invite card bits that the sign-in card does not have. */
.invite-who { display: flex; flex-direction: column; line-height: var(--lh-md); }
.invite-who span { color: var(--text-2); font-size: var(--fs-sm); }
.invite-hint, .invite-text { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
.invite-loading { align-items: center; }

/* Stand-in record pages */
.record-title { margin: 0 0 var(--sp-4); font-size: 28px; line-height: 36px; font-weight: var(--fw-semibold); }

/* ---- Settings left menu (B-071, components/settings-menu.js) ----
   #page gets `has-settings-menu` on #/settings/... routes: menu column left, the page right. */
#page.has-settings-menu { display: flex; align-items: stretch; min-height: 100%; }
#page.has-settings-menu > :not(.settings-menu) { flex: 1; min-width: 0; }
.settings-menu {
  flex: 0 0 240px; border-right: 1px solid var(--border); background: var(--bg-surface);
}
.settings-menu-inner { position: sticky; top: 0; padding: var(--sp-6) var(--sp-4) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); }
.settings-menu-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.settings-menu-head {
  padding: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-sm); line-height: 16px; font-weight: var(--fw-semibold);
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px;
}
.settings-menu-item {
  display: flex; align-items: center; gap: var(--sp-5); height: 42px; padding: 0 var(--sp-4); border-radius: var(--r-md);
  color: var(--text); text-decoration: none; font-size: 15px; line-height: 20px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.settings-menu-item:hover { background: var(--bg-hover); }
.settings-menu-item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.settings-menu-item.is-active { background: var(--bg-selected); color: var(--blue); font-weight: var(--fw-semibold); }
.settings-menu-ic { width: 24px; height: 24px; flex: none; color: var(--text-2); }
.settings-menu-ic svg { width: 24px; height: 24px; display: block; }
.settings-menu-item.is-active .settings-menu-ic { color: var(--blue); }
.settings-menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* LAUNCH-TEST r1 #11: under 860px the menu was hidden with nothing in its place, so most settings could only be
   reached by typing the address. It is now one row above the page that scrolls sideways (every item, active one
   highlighted), group names left out. */
@media (max-width: 860px) {
  #page.has-settings-menu { flex-direction: column; }
  .settings-menu { flex: none; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; }
  .settings-menu-inner { position: static; flex-direction: row; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4);
    overflow-x: auto; scrollbar-width: thin; }
  .settings-menu-group { flex-direction: row; gap: var(--sp-2); flex: none; }
  .settings-menu-head { display: none; }
  .settings-menu-item { height: 36px; gap: var(--sp-3); padding: 0 var(--sp-4); font-size: var(--fs-md); flex: none; }
  .settings-menu-ic, .settings-menu-ic svg { width: 18px; height: 18px; }
  .settings-menu-label { overflow: visible; }
}

/* Underlined tabs (Company settings, Labels). */
.set-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); margin: 0 0 var(--sp-6); overflow-x: auto; }
.set-tab {
  position: relative; height: 40px; padding: 0 var(--sp-4); border: 0; background: none; color: var(--text-2);
  font: inherit; font-size: var(--fs-md); display: inline-flex; align-items: center; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: color var(--t-fast) var(--ease);
}
.set-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 1px; background: transparent;
  transition: background var(--t-fast) var(--ease);
}
.set-tab:hover { color: var(--text); text-decoration: none; }
.set-tab:hover::after { background: var(--border-strong); }
.set-tab.is-active { color: var(--blue); }
.set-tab.is-active::after { background: var(--blue); }
.set-tab:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; border-radius: var(--r-sm); }

/* ---- Settings › Labels (B-065, pages/settings-labels.js) ---- */
.setl-page, .lr-page { max-width: 760px; }
/* UX-120: the shared settings title size (as on Data fields), only on this page. */
.setl-page { --setl-row-hover: #f7f7f8; }
.setl-page .settings-title { font-size: var(--fs-title); line-height: 32px; }
.setl-intro, .lr-intro { margin: 0 0 var(--sp-6); color: var(--text); line-height: 21px; max-width: 640px; }
.setl-toolbar { display: flex; margin-bottom: var(--sp-5); }
.setl-add, .lr-add { gap: var(--sp-3); }
.setl-add .ic svg, .lr-add .ic svg { width: 14px; height: 14px; display: block; }
.setl-new {
  display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5);
  border: 1px solid var(--border-focus); border-radius: var(--r-md); background: var(--bg-surface); box-shadow: var(--shadow-raised);
  animation: setl-in var(--t-med) var(--ease-enter);
}
@keyframes setl-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.setl-new-top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.setl-new-field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; min-width: 0; max-width: 320px; }
.setl-name-input.input { flex: 1; min-width: 0; max-width: 320px; }
.setl-new .setl-name-input.input, .setl-new .btn.btn-sm { box-sizing: border-box; height: 32px; flex: none; }
.setl-new .setl-name-input.input { width: 100%; }
.setl-name-input.input.is-invalid, .setl-name-input.input.is-invalid:focus { border-color: var(--red); }
.setl-new-error { margin: 0; color: var(--red); font-size: var(--fs-sm); line-height: 16px; }
.setl-new-error:empty { display: none; }
.setl-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.setl-list[data-loaded='0'] { padding: var(--sp-5); }
.setl-row {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); min-height: 48px;
  padding: var(--sp-3) var(--sp-5) var(--sp-3) 40px;
  border-top: 1px solid var(--border); transition: background var(--t-fast) var(--ease);
}
.setl-row:first-child { border-top: 0; }
.setl-row:hover { background: var(--setl-row-hover); }
/* The colour button: 16px, in the row's left padding (the pill is the only other colour on the row). */
.setl-color.label-dot {
  position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; flex: none; border: 0; cursor: pointer;
}
.setl-name { min-width: 0; display: flex; align-items: center; }
.label-pill.field-label-pill { max-width: 360px; }
.setl-spacer { flex: 1; }
.icon-btn.setl-act { width: 32px; height: 32px; color: var(--text-2); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.setl-act svg { width: 16px; height: 16px; }
.setl-row:hover .setl-act, .setl-act:focus-visible, .lr-row:hover .lr-act, .lr-act:focus-visible { opacity: 1; }
.setl-del:hover, .lr-del:hover { color: var(--red); }
.setl-row-error { flex-basis: 100%; }
.setl-row-error:empty { display: none; }
.setl-color-pop { padding: var(--sp-5); }
.setl-colors { grid-template-columns: repeat(5, 28px); gap: var(--sp-4); }
.setl-empty, .lr-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-9) var(--sp-6);
  text-align: center; color: var(--text-2);
}
.setl-empty-ic { width: 40px; height: 40px; color: var(--text-muted); }
.setl-empty-ic svg { width: 40px; height: 40px; display: block; }
.setl-empty-title, .lr-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }

/* ---- Settings › Lost reasons (B-065, pages/settings-lost-reasons.js) ---- */
.lr-readonly { margin-bottom: var(--sp-5); }
.lr-add { margin-bottom: var(--sp-6); }
.lr-form {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6); border: 1px solid var(--border-focus); border-radius: var(--r-md); box-shadow: var(--shadow-raised);
  animation: setl-in var(--t-med) var(--ease-enter);
}
.lr-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.lr-field-name { flex: 1; min-width: 220px; }
.lr-field .select-trigger { width: 200px; }
.lr-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.lr-form-actions { display: flex; gap: var(--sp-4); align-self: flex-end; padding-bottom: 1px; }
.lr-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.lr-group { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-surface); }
.lr-group-head {
  display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border); background: var(--bg-app); border-radius: var(--r-md) var(--r-md) 0 0;
}
.lr-group-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.lr-group-count { font-size: var(--fs-sm); color: var(--text-2); }
.lr-rows { display: flex; flex-direction: column; min-height: 8px; }
.lr-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); min-height: 44px; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border); background: var(--bg-surface); transition: background var(--t-fast) var(--ease);
}
.lr-row:first-child { border-top: 0; }
.lr-row:hover { background: var(--bg-hover); }
.lr-row.is-inactive .lr-name { color: var(--text-muted); }
.lr-row.is-dragging { opacity: 0.35; }
.lr-drag {
  width: 20px; height: 28px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: grab;
  display: grid; place-items: center; border-radius: var(--r-sm); touch-action: none;
}
.lr-drag svg { width: 16px; height: 16px; display: block; }
.lr-drag:hover { color: var(--text-2); background: rgba(0, 0, 0, 0.05); }
.lr-drag:focus-visible { outline: 2px solid var(--border-focus); }
.lr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-4); }
.lr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-off-tag {
  padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--bg-hover); color: var(--text-2);
  font-size: var(--fs-xs); line-height: 18px; font-weight: var(--fw-semibold); text-transform: uppercase;
}
.lr-act { width: 28px; height: 28px; color: var(--text-2); opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.lr-act svg { width: 16px; height: 16px; }
.lr-switch { min-width: 92px; }
.lr-switch-text { font-weight: var(--fw-regular); }
.lr-row-error { flex-basis: 100%; padding-left: 28px; }
.lr-edit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); flex: 1; min-width: 0; }
.lr-edit .lr-name-input { flex: 1; min-width: 160px; }
.lr-edit .select-trigger { width: 180px; }
.lr-ghost {
  position: fixed; z-index: 1000; pointer-events: none; box-shadow: var(--shadow-popover); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-surface); opacity: 0.95;
}
.lr-drop-line { height: 2px; margin: -1px var(--sp-5); background: var(--blue-bright); border-radius: 1px; position: relative; z-index: 1; }
.lr-empty-art { width: 120px; height: 96px; }
.lr-empty-art svg { width: 120px; height: 96px; display: block; }
.lr-empty-text { max-width: 320px; }
@media (prefers-reduced-motion: reduce) {
  .setl-new, .lr-form { animation: none; }
  .settings-menu-item, .set-tab, .set-tab::after, .setl-row, .lr-row { transition: none; }
}

/* ---- Settings › Personal preferences (UX-015, pages/settings-me.js) ----
   Flat sections (no card), 22px/400 headings, a 1px line between sections, 28px/400 page title. */
:root { --sme-divider: #e5e5e8; }
.sme-page .settings-title { margin: var(--sp-2) 0 var(--sp-7); font-size: 28px; line-height: 36px; font-weight: var(--fw-regular); }
.sme-page .settings-body { gap: 0; }
.sme-page .settings-card {
  border: 0; border-radius: 0; background: none; padding: var(--sp-7) 0; gap: var(--sp-5);
  border-top: 1px solid var(--sme-divider);
}
.sme-page .settings-card:first-child { border-top: 0; padding-top: 0; }
.sme-page .settings-card-title { font-size: 22px; line-height: 28px; font-weight: var(--fw-regular); margin-bottom: var(--sp-2); }
.sme-page .settings-email { flex-direction: row; gap: var(--sp-5); align-items: baseline; }
.sme-page .settings-email .settings-label { color: var(--text-2); min-width: 48px; }

/* Personal preferences: a popup switch the admin keeps on (BUG-134). Disabled look: faded, not-allowed. */
.switch-wrap.pref-locked { --pref-locked-opacity: .4; cursor: not-allowed; }
.pref-locked .switch, .pref-locked .switch:disabled { opacity: var(--pref-locked-opacity); cursor: not-allowed; }
.pref-locked > span { opacity: var(--pref-locked-opacity); cursor: not-allowed; }
.pref-locked-hint { margin-top: var(--sp-2); }

/* ---- Settings › Email templates + Retainer templates (UX-088 / UX-099; base tpl-* rules in mail.css) ----
   `tpl-wide`: full content width, list 320px + editor flex, no editor card, 56px list rows, merge chips. */
:root {
  --tpl-error-border: #d83c38;
  --tpl-chip-bg: #edeef0;
  --tpl-row-selected: #eaf2fd;
  --tpl-list-w: 320px;
}
.settings-page.tpl-page.tpl-wide { max-width: none; min-width: 0; }
.tpl-wide .tpl-layout { grid-template-columns: var(--tpl-list-w) minmax(0, 1fr); gap: var(--sp-8); }
.tpl-wide .tpl-new-btn.btn { height: var(--control-h); padding: 0 var(--sp-5); font-size: var(--fs-md); font-weight: var(--fw-semibold); gap: var(--sp-2); }
.tpl-wide .tpl-side { display: flex; flex-direction: column; min-width: 0; }
.tpl-wide .tpl-list { border: 0; border-top: 1px solid var(--border); border-radius: 0; overflow: visible; }
.tpl-wide .tpl-list[data-loaded='0'] { padding: var(--sp-5) 0; }
.tpl-wide .tpl-row {
  min-height: 56px; justify-content: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-6);
  border-bottom: 1px solid var(--border); border-radius: 0;
}
.tpl-wide .tpl-row:last-child { border-bottom: 1px solid var(--border); }
.tpl-wide .rtpl-list .tpl-row { height: 56px; }
.tpl-wide .tpl-row.is-active { background: var(--tpl-row-selected); }
.tpl-wide .tpl-row.is-active .tpl-row-name { color: var(--blue); }
.tpl-row-top { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.tpl-row-top .tpl-row-name { flex: 0 1 auto; min-width: 0; }
.tpl-pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-4); flex: none; border-radius: var(--r-pill);
  background: var(--tpl-chip-bg); color: var(--text-2); font-size: var(--fs-xs); line-height: 20px; font-weight: var(--fw-semibold);
}
.tpl-wide .tpl-empty { padding: var(--sp-7) var(--sp-6); }

/* Editor: no card, no heading; Save 32px on the right, '...' (Delete) far left. */
.tpl-wide .tpl-editor { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.tpl-wide .tpl-editor-loading { padding: var(--sp-5) 0; }
.tpl-wide .tpl-actions { align-items: center; padding-top: var(--sp-2); }
.tpl-wide .tpl-save-btn, .tpl-wide [data-testid=rtpl-save] { height: var(--control-h); }
.tpl-more-btn.btn { width: var(--control-h); height: var(--control-h); padding: 0; color: var(--text-2); }
.tpl-more-btn .ic, .tpl-more-btn svg { width: 16px; height: 16px; display: block; }
.tpl-more-btn[aria-expanded='true'] { background: var(--bg-hover); }
.tpl-more-menu { min-width: 160px; }
.tpl-more-menu .menu-item.tpl-menu-danger { color: var(--red); }

/* 'Insert field' (braces icon). */
.tpl-wide .tpl-body-foot .tpl-insert-btn.btn { height: 28px; gap: var(--sp-3); font-size: var(--fs-md); font-weight: var(--fw-regular); }
.tpl-wide .tpl-body-foot .tpl-insert-btn .ic, .tpl-wide .tpl-body-foot .tpl-insert-btn svg { width: 16px; height: 16px; }
.tpl-wide .tpl-body-foot .tpl-insert-btn .tpl-caret, .tpl-wide .tpl-body-foot .tpl-insert-btn .tpl-caret svg { width: 8px; height: 8px; }

/* Invalid name: red border, focused or not. */
.tpl-page .input.is-invalid, .tpl-page .input.is-invalid:focus { border-color: var(--tpl-error-border); }

/* Merge tokens as grey chips ([[field]] in email templates, {{field}} in retainer sections). */
.tpl-chip {
  display: inline-block; height: 20px; padding: 0 var(--sp-3); margin: 0 1px; border-radius: var(--r-sm);
  background: var(--tpl-chip-bg); color: var(--text); font-size: var(--fs-sm); line-height: 20px; vertical-align: baseline;
  white-space: nowrap; user-select: all;
}

/* Smart Bcc: a slim section under the template list, no card. */
.tpl-wide .settings-smart-bcc.tpl-sbcc {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3);
  margin: var(--sp-5) 0 0; padding: 0; border: 0; border-radius: 0; background: none;
}
.tpl-sbcc-title { margin: var(--sp-5) 0 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); }
.tpl-sbcc-hint { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.tpl-wide .tpl-sbcc .smart-bcc-row { flex: none; min-width: 0; }

@media (max-width: 960px) {
  .tpl-wide .tpl-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Settings › AI learning (pages/settings-ai.js) */
.ai-stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-5) 0; }
.ai-stat { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 180px; }
.ai-stat-label { color: var(--text-2); font-size: var(--fs-sm); }
.ai-stat-value { font-size: 22px; font-weight: var(--fw-semibold); }
.ai-stat-sub { color: var(--text-muted); font-size: var(--fs-xs); }
.ai-corr-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.ai-corr { padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); display: grid; gap: var(--sp-2); }
.ai-corr-top { display: flex; justify-content: space-between; gap: var(--sp-3); }
.ai-corr-who, .ai-corr-why { color: var(--text-2); font-size: var(--fs-sm); }
.ai-corr-actions { display: flex; gap: var(--sp-2); }
.ai-corr-actions .input { flex: 1; min-width: 0; }
/* Build B (suggestions-design.md B): a lesson with words shows 'Your words' and 'What goes in the knowledge base'
   side by side; stacked on a narrow screen. */
.ai-corr-who { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ai-corr-retired { color: var(--text-2); font-size: var(--fs-sm); }
.ai-rule-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-2); }
@media (max-width: 720px) { .ai-rule-cols { grid-template-columns: 1fr; } }
.ai-rule-col { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.ai-col-head { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.ai-words { background: var(--bg-app); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-md);
  color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-words[hidden] { display: none; }
.ai-rule.input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font: inherit; line-height: 1.45; }
.ai-rule-again { justify-self: start; font-size: var(--fs-sm); }
.ai-corr-actions.is-end { justify-content: flex-end; }
.ai-corr-hint { color: var(--text-2); font-size: var(--fs-sm); }
.ai-rule-learned { display: flex; align-items: flex-start; gap: var(--sp-4); }
.ai-rule-text { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--text); white-space: pre-wrap; }
.ai-words-toggle { justify-self: start; font-size: var(--fs-sm); }
/* Build 8 (prelaunch-design.md B2 / B3): how often a rule was used, under the rule; 'No reason given.' muted. */
.ai-rule-used { color: var(--text-2); font-size: var(--fs-sm); }
.ai-words.is-none { color: var(--text-muted); }