/* Rahmah identity, v2 overhaul: my-settings.html (every tab).
 * Presentation only. No logic, markup order or copy is changed.
 * Corners: 4px controls, square cards. 44px targets. Fig focus ring. Copper is never used for small text.
 *
 * SCOPE: this page only. Linked after the page's own <style> blocks so it wins by order and uses
 * !important only where the page sets inline style="" attributes (the attribute selectors below).
 * TO REVERT: delete the two <link> lines (bym/styles/rahmah.css and rahmah-settings.css) before </head>.
 * Tokens: bym/styles/rahmah.css (--bym-*).
 */
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "BYM Afacad"; src: url("/bym/fonts/AfacadFlux-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---- Tokens the page already draws from ---- */
:root {
  --bg: var(--bym-canvas); --surface: var(--bym-surface); --surface-2: var(--bym-surface-soft);
  --text: var(--bym-text); --text-body: var(--bym-text); --muted: var(--bym-text-muted); --muted-2: var(--bym-text-muted); --faint: var(--bym-text-muted);
  --line: var(--bym-rule); --line-soft: var(--bym-rule); --line-faint: var(--bym-rule);
  --accent: var(--bym-primary); --accent-2: var(--bym-human-text); --accent-glow: transparent;
  --success: var(--bym-success); --danger: var(--bym-error); --discuss: var(--bym-human-text);
  --border-neutral: var(--bym-border); --surface-hover: var(--bym-surface-soft);
  --r-sm: 4px; --r-md: 4px; --r-pill: 4px;
  --font-display: "BYM Afacad", "Afacad Flux", "Avenir Next", Arial, sans-serif;
  --font-body: var(--font-display); --font-ui: var(--font-display); --font-mono: var(--font-display);
}
html { font-size: 18px; }
body { background: var(--bym-canvas); color: var(--bym-text); font-family: var(--font-display); font-size: var(--bym-text-base); line-height: 1.55; }
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--bym-focus); outline-offset: 3px; }

/* ---- Headings and text ---- */
h1, h2 { color: var(--bym-primary); font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.15; }
.page-header h1 { font-size: var(--bym-text-title); }
.session-card h2 { font-size: var(--bym-text-lg); margin-bottom: 12px; }
.page-header .subtitle { color: var(--bym-text-muted); font-size: var(--bym-text-sm); font-weight: 400; }
.form-group label { color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; }
.status-msg { font-size: var(--bym-text-xs); color: var(--bym-text-muted); }
.leave-link { color: var(--bym-primary); font-size: var(--bym-text-xs); text-underline-offset: 3px; }

/* ---- Topbar ---- */
.mp-topbar-brand { color: var(--bym-primary); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; min-height: 44px; display: inline-flex; align-items: center; }
.mp-topbar-btn { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--bym-text-xs); font-weight: 600; color: var(--bym-primary); border: 1px solid var(--bym-border); border-radius: 4px; background: transparent; padding: 0 14px; }
.mp-topbar-btn:hover { background: var(--bym-surface-soft); border-color: var(--bym-primary); }
.floating-dashboard-btn { min-height: 44px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--bym-surface); border: 1px solid var(--bym-primary); color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; transition: none; }
.floating-dashboard-btn:hover { transform: none; background: var(--bym-surface-soft); }

/* ---- Cards ---- */
.session-card { background: var(--bym-surface); border: 1px solid var(--bym-rule); border-radius: 0; padding: 28px 24px; }
@media (max-width: 480px) { .session-card { padding: 20px 16px; } .container { padding-inline: 16px; } }

/* ---- Tabs ---- */
.settings-tab-btn { min-height: 44px; padding: 0 16px; border-radius: 4px; border: 1px solid var(--bym-border); background: var(--bym-surface); color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; transition: none; }
.settings-tab-btn:hover { background: var(--bym-surface-soft); border-color: var(--bym-primary); }
.settings-tab-btn.active { background: var(--bym-primary); color: var(--bym-on-primary); border-color: var(--bym-primary); }
.settings-tab-btn.danger { color: var(--bym-error); border-color: var(--bym-error); background: var(--bym-surface); }
.settings-tab-btn.danger.active { background: var(--bym-error); color: #fff; border-color: var(--bym-error); }

/* ---- Buttons and fields ---- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px !important; font-size: var(--bym-text-sm); font-weight: 600; letter-spacing: 0; background-image: none !important; transition: none; }
.btn-gold { background: var(--bym-primary); color: var(--bym-on-primary); border: 1px solid var(--bym-primary); }
.btn-gold:hover { background: #2f1f2e; }
.btn-outline { background: transparent; color: var(--bym-primary); border: 1px solid var(--bym-primary); }
.btn-outline:hover { background: var(--bym-surface-soft); }
.btn[disabled] { opacity: 1; background: #e4dadd; border-color: var(--bym-border); color: #70586b; }
.btn-small { padding: 0 14px; font-size: var(--bym-text-xs); }
.input, select.input, textarea.input { min-height: var(--bym-control-height); border: 1px solid var(--bym-border); border-radius: 4px; background: var(--bym-surface); color: var(--bym-text); font-size: var(--bym-text-sm); }
textarea.input { min-height: 96px; }
.input:focus, select.input:focus, textarea.input:focus { border-color: var(--bym-focus); outline: 3px solid var(--bym-focus); outline-offset: 2px; }
.input::placeholder { color: var(--bym-text-muted); opacity: 1; }

/* ---- Rows, toggles, checks, chips ---- */
.chapter-vis-row, .mp-item, .ref-row { border: 1px solid var(--bym-rule); border-radius: 0; background: var(--bym-surface); }
.chapter-vis-title, .mp-item-label, .ref-row-name, .essentials-q { color: var(--bym-text); font-size: var(--bym-text-sm); }
.chapter-vis-btn { min-height: 44px; padding: 0 14px; border-radius: 4px; border: 1px solid var(--bym-border); background: var(--bym-surface); color: var(--bym-primary); font-size: var(--bym-text-xs); font-weight: 600; transition: none; }
.chapter-vis-btn.selected-public { background: var(--bym-success); border-color: var(--bym-success); color: #fff; }
.chapter-vis-btn.selected-private { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); }
.essentials-chapter-title { color: var(--bym-primary); font-size: var(--bym-text-sm); }
.essentials-row { border-top-color: var(--bym-rule); padding: 12px 0; }
.essentials-check { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--bym-border); background: var(--bym-surface); }
.essentials-check.checked { background: var(--bym-primary); border-color: var(--bym-primary); color: var(--bym-on-primary); }
.essentials-check.suggested { background: var(--bym-surface); border: 1px dashed var(--bym-human); color: var(--bym-human-text); }
.essentials-answer, .mp-item-source, .ref-row-meta { color: var(--bym-text-muted); font-size: var(--bym-text-xs); }
.essentials-suggested-pill { font-size: var(--bym-text-xs); border-radius: 4px; background: var(--bym-surface-soft); color: var(--bym-primary); border-color: var(--bym-human); padding: 2px 8px; }
.mp-drag, .mp-rank { color: var(--bym-text-muted); }
.mp-rank { font-size: var(--bym-text-xs); }
.mp-remove, .ref-remove-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 4px; background: transparent; border: 1px solid var(--bym-border); color: var(--bym-primary); font-size: 1.125rem; }
.mp-remove:hover, .ref-remove-btn:hover { background: var(--bym-error-surface); color: var(--bym-error); border-color: var(--bym-error); }
.priority-suggestion-chip { min-height: 44px; border-radius: 4px; border: 1px dashed var(--bym-border); background: var(--bym-surface); color: var(--bym-primary); font-size: var(--bym-text-xs); padding: 0 14px; }
.priority-suggestion-chip:hover { border: 1px solid var(--bym-primary); background: var(--bym-surface-soft); }
.ref-status-pill { border-radius: 4px; font-size: var(--bym-text-xs); font-weight: 600; padding: 4px 10px; }
.ref-status-pill.pending { background: #f3e7d8; color: #6b4a1f; }
.ref-status-pill.confirmed { background: var(--bym-success-surface); color: var(--bym-success); }
.ref-status-pill.declined { background: #eee9e4; color: #5d4859; }

/* ---- Inline style="" attributes the markup (and its scripts) set directly ---- */
[style*="color:#978396"], [style*="color: #978396"], [style*="color:#7A6678"], [style*="color: #7A6678"] { color: var(--bym-text-muted) !important; }
[style*="color:#5a8a6a"], [style*="color: #5a8a6a"], [style*="color:#3e5f48"], [style*="color:#3e6a50"] { color: var(--bym-success) !important; }
[style*="color:#c47070"], [style*="color:#a84040"], [style*="color: #a84040"] { color: var(--bym-error) !important; }
[style*="color:#B88355"], [style*="color: #B88355"], [style*="color:#8a6020"] { color: var(--bym-primary) !important; }
[style*="color:#412B3F"] { color: var(--bym-primary) !important; }
[style*="font-size:9px"], [style*="font-size:10px"], [style*="font-size:11px"], [style*="font-size:11.5px"], [style*="font-size:12px"], [style*="font-size:12.5px"], [style*="font-size:13px"], [style*="font-size:13.5px"] { font-size: var(--bym-text-xs) !important; }
[style*="border-radius:10px"], [style*="border-radius:12px"], [style*="border-radius:14px"], [style*="border-radius:9px"] { border-radius: 4px !important; }
[style*="background:#fdf3e4"], [style*="background:#f6efe4"], [style*="background:#f2f7f2"] { background: var(--bym-surface-soft) !important; }
[style*="border:1px solid rgba(231,166,92,0.5)"], [style*="border:1px solid rgba(70,120,80,0.3)"], [style*="border:1px solid rgba(65,43,63,0.15)"] { border-color: var(--bym-rule) !important; }
.session-card[style*="border-color:rgba(168,64,64"] { border-color: var(--bym-error) !important; }
[style*="background:var(--danger)"] { background: var(--bym-error) !important; color: #fff !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bym-primary); }
input[type="range"] { accent-color: var(--bym-primary); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- "Report an issue" (report-issue.js), same treatment as the landing page ---- */
.bym-ri-btn { border-radius: 4px !important; box-shadow: none !important; min-height: var(--bym-target-min); padding: 0 16px !important; font-size: var(--bym-text-sm) !important; background: var(--bym-canvas) !important; color: var(--bym-primary) !important; border: 1px solid var(--bym-primary) !important; }
.bym-ri-btn:hover { background: var(--bym-surface-soft) !important; color: var(--bym-primary) !important; }
@media (max-width: 760px) { .bym-ri-btn { position: static !important; display: block; margin: 24px auto 96px; z-index: auto; } }
.bym-ri-box { border-radius: 4px !important; box-shadow: none !important; }
.bym-ri-box button, .bym-ri-box textarea, .bym-ri-box input[type=email] { border-radius: 4px !important; }

/* Same rule for inline styles written with a space after the colon. */
[style*="font-size: 9px"], [style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 11.5px"], [style*="font-size: 12px"], [style*="font-size: 12.5px"], [style*="font-size: 13px"], [style*="font-size: 13.5px"] { font-size: var(--bym-text-xs) !important; }