/* 42AI Universal Font Picker — shared across all public + mobile pages */

/* ─── Font overrides (apply when html.font-* class is set) ─── */
/* Body fonts cascade to most elements (buttons/inputs use font-family:inherit).
   Syne headings and IBM Plex Mono labels keep their explicit declarations. */
html.font-inter body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
html.font-system body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
html.font-serif body{font-family:'Newsreader','Iowan Old Style',Georgia,Cambria,'Times New Roman',Times,serif}

/* Make sure form controls and buttons that have explicit IBM Plex Sans also flip */
html.font-inter input,html.font-inter button,html.font-inter textarea,html.font-inter select{font-family:inherit}
html.font-system input,html.font-system button,html.font-system textarea,html.font-system select{font-family:inherit}
html.font-serif input,html.font-serif button,html.font-serif textarea,html.font-serif select{font-family:inherit}

/* ─── Picker UI ─── */
.font-picker-wrap{position:relative;display:inline-flex;align-items:center;font-family:'IBM Plex Sans',-apple-system,sans-serif}
.font-picker-btn{height:32px;padding:0 10px 0 12px;border-radius:6px;background:none;border:1px solid var(--border,#e0e0e0);font-family:'IBM Plex Sans',-apple-system,sans-serif;font-size:12px;font-weight:500;color:var(--fg-muted,#555);cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1;transition:background 0.12s,color 0.12s,border-color 0.12s;flex-shrink:0;white-space:nowrap}
.font-picker-btn:hover{background:var(--border-light,#f0f0f0);color:var(--fg,#0a0a0a);border-color:var(--fg-muted,#555)}
.font-picker-btn-label{font-size:12px}
.font-picker-btn-caret{width:9px;height:9px;stroke:currentColor;stroke-width:2;fill:none;opacity:0.65;flex-shrink:0}
@media(max-width:480px){.font-picker-btn{padding:0 8px}.font-picker-btn-label{font-size:11px}}
.font-picker-btn:hover{background:var(--border-light,#f0f0f0);color:var(--fg,#0a0a0a);border-color:var(--fg-muted,#555)}
.font-picker-btn:focus{outline:none;border-color:var(--fg,#0a0a0a)}
.font-picker-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--border,#e0e0e0);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,0.10);padding:5px;display:none;flex-direction:column;min-width:160px;z-index:1000}
.font-picker-menu.open{display:flex}
.font-picker-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-light,#888);padding:8px 12px 6px}
.font-picker-divider{height:1px;background:var(--border-light,#f0f0f0);margin:2px 6px 4px}
.font-picker-opt{padding:9px 12px;font-size:13px;color:var(--fg-muted,#555);background:none;border:none;text-align:left;cursor:pointer;border-radius:5px;transition:background 0.12s,color 0.12s;display:flex;align-items:center;justify-content:space-between;gap:10px}
.font-picker-opt:hover{background:var(--border-light,#f0f0f0);color:var(--fg,#0a0a0a)}
.font-picker-opt.active{background:var(--fg,#0a0a0a);color:#fff}
.font-picker-opt-sample{font-family:'IBM Plex Sans',sans-serif;font-size:12px;color:inherit;opacity:0.7}
.font-picker-opt[data-font="inter"] .font-picker-opt-sample{font-family:'Inter',sans-serif}
.font-picker-opt[data-font="system"] .font-picker-opt-sample{font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.font-picker-opt[data-font="serif"] .font-picker-opt-sample{font-family:'Newsreader',Georgia,serif}