/* Personal appearance settings (My settings → Appearance) and the My settings page. Loaded last. Colours: tokens only. */

/* Text size: rem-based sizes follow the root; px sizes elsewhere are multiplied by --text-scale (tokens.css). */
html { font-size: calc(16px * var(--text-scale)); }

/* The ChilledAI logo is ice blue on transparent: on light surfaces it is deepened so it stays legible. */
.brand-logo, .app-footer img, .op-brand img { filter: var(--logo-filter); }
.profile-logo { background: var(--logo-plate); }
.profile-logo img { filter: none; }

/* Density: compact tightens padding and gaps, never hides anything. */
:root[data-density="compact"] .content { padding-top: 14px; padding-bottom: 40px; }
:root[data-density="compact"] .card { padding: 11px 12px; margin-bottom: 10px; }
:root[data-density="compact"] .grid, :root[data-density="compact"] .split, :root[data-density="compact"] .ov-grid { gap: 10px; }
:root[data-density="compact"] .table th { padding: 5px 8px; }
:root[data-density="compact"] .table td { padding: 5px 8px; }
:root[data-density="compact"] .ov-deals td { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .ov-stat { padding: 8px 10px; }
:root[data-density="compact"] .ov-item, :root[data-density="compact"] .ov-task { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .deal-card { padding: 6px 8px; margin-bottom: 6px; }
:root[data-density="compact"] .nav a { padding-top: 5px; padding-bottom: 5px; }
:root[data-density="compact"] .field { margin-bottom: 6px; }
:root[data-density="compact"] .page-head { margin-bottom: 10px; }
:root[data-density="compact"] .deal-head { padding: 12px 14px; }
:root[data-density="compact"] .req { padding: 3px 0; }
:root[data-density="compact"] .dr-doc, :root[data-density="compact"] .rs-finding { padding: 8px 10px; margin-bottom: 6px; }

/* Quick theme switch in the top bar and the account menu */
.theme-switch { display: inline-flex; margin: 0; }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: calc(15px * var(--text-scale)); line-height: 1; }
.theme-switch button:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-switch .ic-light, .theme-switch .ic-dark { display: none; }
/* the icon shows the theme a click switches TO */
:root[data-theme="dark"] .theme-switch .ic-light, :root[data-theme="auto"] .theme-switch .ic-light { display: inline; }
:root[data-theme="light"] .theme-switch .ic-dark { display: inline; }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .theme-switch .ic-light { display: none; }
  :root[data-theme="auto"] .theme-switch .ic-dark { display: inline; }
}
.topbar .user a.user-link { font-size: calc(12px * var(--text-scale)); }

/* My settings page */
.prefs { max-width: 900px; }
.prefs .card h2 { margin-bottom: 4px; }
.prefs .card > .sub { color: var(--muted); font-size: calc(13px * var(--text-scale)); margin-bottom: 12px; }
.prefs-section-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pref-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); align-items: start; }
.pref-row:first-of-type { border-top: 0; }
.pref-row > label, .pref-row > .pref-label { margin: 0; padding-top: 6px; color: var(--ink); font-size: calc(13.5px * var(--text-scale)); font-weight: 600; }
.pref-row .help { display: block; font-size: calc(12px * var(--text-scale)); color: var(--muted); margin-top: 4px; }
.pref-row select { min-width: 220px; max-width: 100%; }
.choice-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-card { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface-2); color: var(--ink); font-weight: 500; font-size: calc(13.5px * var(--text-scale)); cursor: pointer; }
.choice-card:hover { border-color: var(--accent); }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-card input { margin: 0; accent-color: var(--accent); }
.swatch { display: inline-block; width: 26px; height: 18px; border-radius: 5px; border: 1px solid var(--line-strong); flex: none; }
/* swatches preview the other theme, so they use that theme's ground deliberately (tokens, not literals) */
.swatch-dark { background: linear-gradient(135deg, var(--sw-dark-bg) 55%, var(--sw-accent) 55%); }
.swatch-light { background: linear-gradient(135deg, var(--sw-light-bg) 55%, var(--sw-accent-light) 55%); }
.swatch-auto { background: linear-gradient(135deg, var(--sw-dark-bg) 50%, var(--sw-light-bg) 50%); }
.prefs-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.prefs .kv { grid-template-columns: 170px minmax(0, 1fr); }
@media (max-width: 700px) {
  .pref-row { grid-template-columns: 1fr; }
  .pref-row > label, .pref-row > .pref-label { padding-top: 0; }
  .pref-row select { min-width: 0; width: 100%; }
  .prefs .kv { grid-template-columns: 1fr; }
}
.prefs .field .input { width: 100%; max-width: 440px; }

/* Coloured card edges (formerly inline styles in templates) */
.edge-ve { border-left: 4px solid var(--brand-ve); }
.edge-slack { border-left: 4px solid var(--purple); }
.edge-warn { border-left: 4px solid var(--warn); }
.row-conflict td { background: var(--danger-bg); }
/* the same switch as a menu entry (phones and small iPads, where the top bar hides the account links) */
.theme-switch.nav-theme { display: block; padding: 0 0 4px; }
.theme-switch.nav-theme button { width: auto; height: auto; padding: 5px 10px; border: 0; background: transparent; color: var(--faint);
  font: inherit; font-size: calc(13px * var(--text-scale)); border-radius: 8px; }
.theme-switch.nav-theme button:hover { background: var(--surface-2); color: var(--ink); }