/* why: client pages use the website button + type scale from site_chrome;
   dark maps website tokens onto portal tokens
   ref: site_chrome/css/site-chrome-base.css (.mfam-chrome tokens, .btn), load first */
:root { --p-bg: var(--bg); --p-panel: var(--panel); --p-accent: var(--accent); --p-accent-hover: var(--accent-hover); }
/* trap: .mfam-chrome redefines --bg --accent --accent-hover --panel (a 200ms duration);
   aliases resolve at :root, wrapper restores them */
.cs.mfam-chrome { --bg: var(--p-bg); --panel: var(--p-panel); --accent: var(--p-accent); --accent-hover: var(--p-accent-hover); font-family: var(--sans); font-weight: 400; color: var(--ink); }
:root[data-theme="dark"] .cs.mfam-chrome { --ink: var(--text); --ink-2: var(--mute); --ink-3: var(--mute); --line: var(--border); --line-strong: var(--border); --line-control: var(--mute); --tint: var(--panel2); --field: var(--p-bg); --on-accent: var(--p-bg); --neg: var(--red); }
.cs h1, .cs h2, .cs h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; font-kerning: none; color: var(--ink); text-wrap: balance; }
.cs h1 { font-size: var(--t-28); margin: 0 0 var(--s-24); }
.cs h2 { font-size: var(--t-20); }
.cs h3 { font-size: var(--t-18); }
/* why: visual stays the website's 40px; the pseudo-element pads the hit box to 44px */
.cs .btn { position: relative; }
.cs .btn::after { content: ""; position: absolute; inset: -2px 0; }
.cs .btn:disabled { opacity: .45; cursor: not-allowed; }
.cs .btn:focus-visible, .cs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs input:not([type=checkbox]):not([type=file]) { font: 400 var(--t-16)/1.4 var(--sans); color: var(--ink); background: var(--field); border: 1px solid var(--line-control); border-radius: var(--r-control); min-height: 44px; padding: 9px var(--s-12); box-sizing: border-box; }
.cs input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cs input[type=checkbox] { accent-color: var(--accent); }
.cs .auth-title { font-size: var(--t-20); margin: 0 0 var(--s-4); }
.cs .auth-card { background: var(--panel); }