/* D:\Hurricane Creek Automotive Website\gettamutt.com\static\css\authentication_portal.css */
/*
  GettaMutt authentication portal styles
  - Uses ap-* namespaced classes so it layers cleanly on top of theme.css without collisions.
  - All user-visible text remains in authentication_portal.html so translations stay HTML-driven.
  - Dark/Light theme and accent colors are provided by theme.css/theme.js; this file only controls layout and visual structure.
  - When adding new interactive elements, reuse these classes or extend them instead of embedding text in CSS content.
*/

/* Page wrapper for portal layout; reusable base for other account-related pages. */
.ap-page { max-width:1100px; margin:4.5rem auto 3rem; padding:0 1.25rem 3rem; }

/* Hero section introducing the portal and what it is for. */
.ap-hero { margin-bottom:2rem; }

/* Hero inner container constraining line length for readability. */
.ap-hero-inner { max-width:40rem; }

/* Hero title styled as main H1 for the portal page. */
.ap-hero-title { font-size:clamp(1.8rem,3vw,2.4rem); line-height:1.2; margin-bottom:.4rem; }

/* Hero lead paragraph describing basic portal capabilities. */
.ap-hero-lead { font-size:1rem; color:var(--muted); margin-bottom:.3rem; }

/* Hero note text giving practical context about account creation and orders. */
.ap-hero-note { font-size:.9rem; color:var(--muted); }

/* Authentication grid splitting login/messages and feature overview. */
.ap-auth-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1.5rem; align-items:flex-start; }

/* Container for main auth column with login, register, forgot, and messages cards. */
.ap-auth-main { display:flex; flex-direction:column; gap:1rem; }

/* Side column container for portal features and security notes. */
.ap-auth-side { display:flex; flex-direction:column; gap:1rem; }

/* Generic card style reused by auth, message, feature, and security sections. */
.ap-card { background:var(--surface); border:1px solid var(--border); border-radius:.9rem; padding:1rem 1.1rem; }

/* Active card visual hint so the current flow feels focused. */
.ap-card.is-active { border-color:color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

/* Card title used across portal sections for consistent heading styling. */
.ap-card-title { font-size:1.1rem; font-weight:600; margin-bottom:.2rem; }

/* Card subtitle line for short explanatory text below titles. */
.ap-card-subtitle { font-size:.92rem; color:var(--muted); margin-bottom:.4rem; }

/* Text paragraph style for generic explanatory content inside cards. */
.ap-card-text { font-size:.9rem; color:var(--fg); margin-bottom:.4rem; }

/* Login card stylings; shares base card layout but can be targeted separately if needed. */
.ap-card-login { }

/* Registration card stylings; reused by JS when toggling the create-account flow. */
.ap-card-register { }

/* Forgot-password card stylings; reused by JS when toggling the reset flow. */
.ap-card-forgot { }

/* Messages card stylings; used to visually separate status messages from forms. */
.ap-card-messages { }

/* Features card stylings; groups capabilities list for the portal. */
.ap-card-features { }

/* Security card stylings; groups security-related notes and disclaimers. */
.ap-card-security { }

/* TOTP setup card stylings; used when showing QR and recovery codes after registration. */
.ap-card-setup { }

/* Reset-password card stylings; used when setting a new password after verification. */
.ap-card-reset { }

/* Authentication form layout with vertical spacing between fields and buttons. */
.ap-form { display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; }

/* Field wrapper for labels and inputs; reusable across account forms. */
.ap-field { display:flex; flex-direction:column; gap:.2rem; }

/* Field variant used for toggle-style controls like the secure-account checkbox. */
.ap-field-toggle { flex-direction:row; align-items:center; justify-content:space-between; }

/* Field label text used for username, password, and similar inputs. */
.ap-field-label { font-size:.88rem; font-weight:500; }

/* Field hint text used to explain password-strength rules and similar guidance. */
.ap-field-hint { font-size:.78rem; color:var(--muted); }

/* Submit button spacing, using global .btn and .is-accent from theme.css. */
.ap-submit { margin-top:.2rem; }

/* Links row under the main buttons for forgot-password and create-account actions. */
.ap-form-links { margin-top:.4rem; display:flex; flex-wrap:wrap; gap:.5rem; }

/* Link-styled button used instead of anchor tags so JS can hook into click events easily. */
.ap-link-button { padding:0; border:none; background:none; font-size:.85rem; text-decoration:underline; text-underline-offset:.1em; cursor:pointer; }

/* Message list container used to hold status or error messages from backend flows. */
.ap-message-list { margin-top:.35rem; display:flex; flex-direction:column; gap:.35rem; }

/* Generic message style used for individual portal messages. */
.ap-message { font-size:.86rem; }

/* Informational messages styled with a subtle accent tint. */
.ap-message--info { color:color-mix(in srgb, var(--accent) 70%, var(--fg)); }

/* Error messages styled with a stronger red-leaning tint. */
.ap-message--error { color:#b91c1c; }

/* Placeholder message shown when there are no portal messages yet. */
.ap-message-placeholder { color:var(--muted); }

/* Feature list wrapper describing what the portal allows customers to do. */
.ap-feature-list { list-style:disc; padding-left:1.2rem; margin:.4rem 0 0; }

/* Feature list item text for specific portal capabilities. */
.ap-feature-item { font-size:.9rem; margin-bottom:.15rem; }

/* Warning block around unsecure-account selection to visually highlight risk. */
.ap-unsecure-warning { margin-top:.5rem; padding:.6rem .7rem; border-radius:.6rem; border:1px solid #b91c1c; background:color-mix(in srgb, #b91c1c 10%, var(--surface)); color:#b91c1c; font-size:.82rem; }

/* Warning visibility helper toggled by JS when secure-account toggle is changed. */
.ap-unsecure-warning.is-visible { display:block; }

/* Warning title text giving a short, strong headline for the unsecure-account warning. */
.ap-unsecure-title { font-weight:600; margin-bottom:.2rem; }

/* Warning body text explaining in detail what unsecure accounts mean. */
.ap-unsecure-text { margin:.08rem 0; }

/* Modal overlay for confirming unsecure-account creation, covering the portal area. */
.ap-unsecure-modal { position:fixed; inset:0; display:grid; place-items:center; background:rgba(15,23,42,.75); z-index:40; }

/* Modal container providing a focused surface for warning copy and actions. */
.ap-unsecure-modal-inner { max-width:26rem; width:calc(100% - 2.5rem); background:var(--surface); border-radius:.9rem; border:1px solid #b91c1c; padding:1rem 1.1rem; }

/* Modal title styled to clearly indicate a critical decision. */
.ap-unsecure-modal-title { font-size:1rem; font-weight:600; margin-bottom:.3rem; color:#b91c1c; }

/* Modal text paragraphs describing the consequences of an unsecure account. */
.ap-unsecure-modal-text { font-size:.86rem; color:var(--fg); margin:.12rem 0; }

/* Modal actions row for confirm and cancel buttons. */
.ap-unsecure-modal-actions { margin-top:.7rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; }

/* Modal cancel button styled as a neutral primary action to keep the account secure. */
.ap-unsecure-cancel { }

/* Modal confirm button styled as a red destructive action for creating an unsecure account. */
.ap-unsecure-confirm { background:#ef4444; color:#fff; border-color:color-mix(in srgb, #ef4444 70%, var(--border)); }

/* Hidden state for modal when JS toggles visibility off. */
.ap-unsecure-modal[hidden] { display:none; }

/* Hidden phrases container; kept off-screen but available for JS to read translated strings. */
.ap-phrases { font-size:0; }

/* Individual phrase node referenced by JS via data-phrase; not shown to users directly. */
.ap-phrase { }

/* QR wrapper centers the authenticator QR code in the setup card. */
.ap-qr-wrapper { margin:.6rem 0; display:flex; justify-content:center; }

/* QR image sizing for TOTP enrollment so it stays crisp but not oversized. */
.ap-qr-image { max-width:160px; height:auto; image-rendering:pixelated; }

/* Responsive layout: stack auth grid columns on moderate screens. */
@media (max-width:900px){ .ap-auth-grid { grid-template-columns:minmax(0,1fr); } }

/* Responsive layout: add extra top margin to side content when stacked below main auth section. */
@media (max-width:900px){ .ap-auth-side { margin-top:.75rem; } }

/* Responsive layout: reduce page margins on very small screens to maximize usable width. */
@media (max-width:600px){ .ap-page { margin:4rem auto 2.5rem; padding:0 .85rem 2.5rem; } }