/* The customer portal and the sign-in pages (the front door and the palette's /auth/signin): the FireCAD brand on the shared
   components. Load order: tokens.css, brand.css, portal.css, then this file; the page wears the .fc theme (tokens.css).
   Colour roles and --fc-* tokens only: no literal brand colours here. Fonts are self-hosted (Montserrat headings, Source Sans 3
   body, Poppins buttons), so no page needs a third-party request and the palette page's strict CSP stays strict. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); }

/* ===== The customer layout: the light bar with the FireCAD logo under a thin dark top bar (the site header) ===== */
.cust-main { max-width: 66rem; }
.cust-context { color: var(--color-text-muted); font-size: var(--text-sm); }
.fc-header { background: var(--color-surface); border-top: 4px solid var(--fc-dark); border-bottom: 1px solid var(--fc-line); padding: 0.55rem var(--space-6); }
.fc-header .portal-brand img { display: block; height: 40px; width: auto; }
.fc-header .cust-context { color: var(--fc-muted); padding-left: var(--space-4); border-left: 1px solid var(--fc-line); }
.fc-header .portal-nav a { color: var(--fc-muted); font-weight: 600; }
.fc-header .portal-nav a.is-current { color: var(--fc-orange-text); text-decoration: none; box-shadow: inset 0 -3px 0 var(--fc-orange); padding-bottom: 0.35rem; }
.fc-header .portal-user { color: var(--fc-muted); }
.fc-header .cust-switch { color: var(--fc-ink); font-weight: 600; }
.fc .portal-main { margin-top: var(--space-6); }

/* The subscription switcher (account admins only) */
.cust-switcher { display: inline-flex; align-items: center; gap: var(--space-2); padding-left: var(--space-4); border-left: 1px solid var(--fc-line); }
.cust-switcher form { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; }
.fc-header .cust-switcher .cust-context { padding-left: 0; border-left: 0; }
.cust-switcher select { height: 2rem; padding: 0 var(--space-2); font: inherit; font-weight: 600; color: var(--fc-ink); border: 1px solid var(--fc-line); border-radius: var(--radius-field); background: var(--color-surface); }

/* ===== Sign-in: the structure of acme.inspectpoint.com/users/sign_in with the FireCAD skin ===== */
body.auth { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.auth-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.auth-left { position: relative; overflow: hidden; padding: var(--space-8) 2.5rem 2.5rem; display: flex; flex-direction: column; border-right: 1px solid var(--fc-line); margin: var(--space-3) 0; }
.auth-left::before { content: ""; position: absolute; inset: -0.75rem auto auto -10%; width: 70%; height: 60%; background: linear-gradient(135deg, color-mix(in srgb, var(--fc-orange) 7%, transparent), transparent); clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }
.auth-logo img { height: 46px; width: auto; display: block; }
.auth-visual { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 36rem; }
.auth-visual img { width: 13rem; height: auto; mix-blend-mode: multiply; margin: 0 0 var(--space-6) var(--space-8); }
.auth-eyebrow { font-family: var(--font-heading); color: var(--fc-orange-light); font-weight: 700; margin: 0 0 0.4rem; }
.auth-visual h2 { font-size: var(--text-xl); line-height: 1.25; margin: 0 0 0.6rem; text-transform: uppercase; }
.auth-visual h2::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: var(--space-3); background: var(--color-primary); }
.auth-visual p { max-width: 26rem; margin: 0 0 1.2rem; }
.auth-learn { align-self: flex-start; display: inline-flex; gap: var(--space-2); align-items: center; padding: 0.45rem var(--space-3); background: var(--fc-dark); color: var(--color-on-primary) !important; text-decoration: none; border-radius: var(--radius-button); font-family: var(--button-font); font-size: 0.9rem; }
.auth-right { position: relative; display: flex; flex-direction: column; padding: var(--space-6) var(--space-8) var(--space-4); }
.auth-topnav { display: flex; justify-content: flex-end; gap: var(--space-12); }
.auth-topnav a { color: var(--fc-muted) !important; text-decoration: none; font-size: 0.95rem; }
.auth-form { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 24rem; margin: 0 auto; }
.auth-form .ui-button { align-self: flex-start; }
.auth-caption { color: var(--fc-muted); margin: 0 0 0.15rem; font-size: 1.05rem; }
.auth-form h1 { font-size: var(--text-xl); margin: 0 0 1.75rem; }
.auth-sub { margin: -1.25rem 0 var(--space-6); color: var(--fc-muted); }
.auth-row { display: flex; justify-content: space-between; align-items: center; margin: -0.2rem 0 1.4rem; font-size: 0.9rem; color: var(--fc-muted); gap: var(--space-3); }
.auth-row a, .auth-row button { color: var(--fc-muted) !important; font-size: 0.85rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
.auth-row a:hover, .auth-row button:hover { text-decoration: underline; }
.auth-row--below { margin: var(--space-4) 0 0; }
.auth-hint { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-8) 0 0; color: var(--fc-muted); font-size: 0.95rem; }
.auth-hint .auth-bulb { color: var(--color-primary); font-weight: 700; }
.auth-hint[hidden] { display: none; }
.auth-terms { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.9rem; margin: 0 0 1.25rem; }
.auth-terms input { margin-top: 0.3rem; accent-color: var(--color-primary); }
.auth-terms label { font-weight: 400; margin: 0; }
.auth-form .ui-alert { margin: 0 0 1.25rem; }
.auth-bottom { display: flex; justify-content: flex-end; padding: var(--space-2) 0 var(--space-1); }
.auth-bottom a { color: var(--fc-muted) !important; font-size: 0.82rem; text-decoration: none; padding: var(--space-2); }
.auth-bottom a:hover { text-decoration: underline; }
.auth-footer { display: flex; align-items: center; gap: var(--space-5); height: 2rem; padding: 0 var(--space-3); background: var(--fc-dark); color: var(--color-border-strong); font-size: 0.78rem; position: relative; }
.auth-footer a { color: var(--color-on-primary) !important; text-decoration: none; }
.auth-footer .auth-corner { position: absolute; right: 0; top: 0; bottom: 0; width: 4rem; background: var(--fc-gradient); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); display: flex; align-items: center; justify-content: flex-end; padding-right: 0.45rem; }
.auth-footer .auth-corner img { width: 1.3rem; height: 1.3rem; filter: brightness(0) invert(1); }
.auth-small { font-size: 0.82rem; color: var(--fc-muted); margin: -0.6rem 0 var(--space-4); }
.auth-alert { margin: 0 0 var(--space-4); font-size: 0.95rem; }
.auth-alert[hidden] { display: none; }
.auth-sub .ui-button--link, .auth-row .ui-button--link { font-size: inherit; color: var(--fc-orange-text) !important; text-decoration: underline; }
.auth-form .ui-field--code input { font-family: ui-monospace, Menlo, Consolas, monospace; }
.auth-form form { margin: 0; }
@media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; } .auth-left { display: none; } .auth-right { padding: var(--space-4); } }

/* Text for screen readers only (the switcher's label) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }