/* ═══════════════════════════════════════════════════════════════════ js-bridge.css — CSP-Compliant JS↔CSS Bridge ─────────────────────────────────────────────────────────────────── PURPOSE Every class or custom property that JavaScript sets via classList.add() or element.style.setProperty() must have a corresponding CSS rule here. Without it the browser silently ignores the change — no error, just broken UI. LOAD ORDER Must be loaded AFTER variables.css (depends on its tokens) and BEFORE any page-specific stylesheet. SECTIONS 1. [hidden] enforcement 2. Visibility & display utilities 3. Login UI state classes (login.js) 4. Toast notifications (login.js · result.js) 5. CSSOM dynamic-property bridge (result.js · login.js) 6. Form validation feedback (login.js) 7. Password strength meter (login.js) 8. Input layout utilities (login.html) 9. Text & link utilities (login.html) 10. Result page bridge classes (result.js) ═══════════════════════════════════════════════════════════════════ */ /* ── 1. [hidden] ENFORCEMENT ──────────────────────────────────────── The HTML `hidden` attribute maps to `display: none` in browsers, but author stylesheets with display rules can accidentally override it. This rule ensures [hidden] always wins with the lowest- specificity !important needed to beat structural layout rules. */ [hidden] { display: none !important; } /* ── 2. VISIBILITY & DISPLAY UTILITIES ────────────────────────────── .hidden — used by app.js (classList.add('hidden')) .visible-block — used internally when JS needs to force block .js-hidden — used by login.js showView() / resetForgotFlow() (classList.add/remove('js-hidden')) .js-margin-auto-left — flex spacer, used in nav layouts */ .hidden { display: none !important; } .visible-block { display: block !important; } .js-hidden { display: none !important; } .js-margin-auto-left { margin-left: auto !important; } /* ── 3. LOGIN UI STATE CLASSES ─────────────────────────────────────── login.js adds/removes these on form buttons. .loading — shows spinner, hides btn text (spinner via CSS pseudo-element in login.css). .btn--unavailable — applied when Supabase fails to load; dims buttons to signal service is offline. .view-enter — fade-in animation triggered by showView(). */ .loading { pointer-events: none; opacity: 0.7; cursor: wait; } .btn--unavailable { opacity: 0.45; pointer-events: none; cursor: not-allowed; filter: grayscale(0.4); } .view-enter { animation: viewFadeIn var(--transition-normal, 0.25s ease) both; } @keyframes viewFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── 4. TOAST NOTIFICATIONS ───────────────────────────────────────── IMPORTANT: The base .toast layout and colour variants are defined exclusively in core-ui.css (which owns the #core-toast-container system). Defining .toast here would create a specificity conflict. js-bridge.css only needs to cover the toggle classes that core-ui.js adds/removes: login.js uses: .toast--visible (show/hide) .toast--success / .toast--error / .toast--info result.js uses: .show (on the simpler #toast element — not core-ui) The result.js standalone #toast (NOT core-ui) is defined below. */ /* result.js standalone toast — distinct from core-ui's toast system */ #toast { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; min-width: 220px; max-width: 380px; border-radius: var(--radius-md, 8px); border-left: 4px solid transparent; background: #1c1f26; color: #fff; font-size: 0.82rem; font-weight: 500; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.2)); z-index: var(--z-toast, 9999); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease; } #toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } /* login.js colour modifiers (applied on top of core-ui .toast base) */ .toast--success { border-left-color: var(--cui-toast-success, var(--green, #28a745)); } .toast--error { border-left-color: var(--cui-toast-error, var(--red, #dc3545)); } .toast--info { border-left-color: var(--cui-dark-blue, var(--navy, #1e2f5e)); } /* login.js show/hide toggle */ .toast--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ── 5. CSSOM DYNAMIC-PROPERTY BRIDGE ─────────────────────────────── result.js writes CSS custom properties via setProperty(). Each consumer class below reads that variable. The fallback value keeps the element visible if JS hasn't run yet. Writers → Consumer class */ /* --js-width → .js-pct-bar .js-topic-bar .js-time-bar .js-bench-* */ .js-pct-bar, .js-topic-bar, .js-time-bar, .js-bench-top, .js-bench-you, .js-bench-avg { width: var(--js-width, 0%); transition: width 0.6s ease; } /* --bar-fill (login.js strength bars) */ .strength-bar { background: var(--bar-fill, var(--grey-200, #e5e7eb)); } /* --strength-label-color (login.js strength label) */ .strength-text { color: var(--strength-label-color, var(--grey-500, #6b7280)); } /* --bar-color (result.js topic & time section bars) */ .topic-bar-fill { background: var(--bar-color, var(--grey-200, #e5e7eb)); } .tbc-bar-fill { background: var(--bar-color, var(--navy, #1a4a76)); width: var(--js-width, 0%); transition: width 0.6s ease; } /* --sec-color / --fill-color (result.js section cards) */ .sec-card { border-top-color: var(--sec-color, var(--navy, #1a4a76)); } .progress-fill { background: var(--fill-color, var(--navy, #1a4a76)); width: var(--js-width, 0%); transition: width 0.6s ease; } /* --badge-color (result.js topic section title badge) */ .topic-section-title::before { background: var(--badge-color, var(--navy, #1a4a76)); } /* --bench-empty-td-padding (result.js benchmark empty state) */ #bench-table-body td { padding: var(--bench-empty-td-padding, revert); } /* Generic dynamic-style holder (legacy / future use) */ .js-dynamic-style { background: var(--js-background, transparent); color: var(--js-color, inherit); opacity: var(--js-opacity, 1); width: var(--js-width, auto); height: var(--js-height, auto); margin-left: var(--js-marginLeft, 0); top: var(--js-top, auto); left: var(--js-left, auto); } /* ── 6. FORM VALIDATION FEEDBACK ──────────────────────────────────── login.js adds .error to inputs and .show to error messages. */ .form-input.error { border-color: var(--red, #c0392b) !important; background-color: var(--red-light, #fef2f2); outline-color: var(--red, #c0392b); } /* ── 7. PASSWORD STRENGTH METER ───────────────────────────────────── login.js sets --bar-fill and --strength-label-color (CSSOM bridge, see section 5). The .sb-level-* and .text-level-* classes below are a class-based fallback system if ever needed. */ .sb-level-1 { background: var(--strength-weak, #ef4444) !important; } .sb-level-2 { background: var(--strength-fair, #f59e0b) !important; } .sb-level-3 { background: var(--strength-good, #3b82f6) !important; } .sb-level-4 { background: var(--strength-strong, #16a34a) !important; } .text-level-1 { color: var(--strength-weak, #ef4444) !important; } .text-level-2 { color: var(--strength-fair, #f59e0b) !important; } .text-level-3 { color: var(--strength-good, #3b82f6) !important; } .text-level-4 { color: var(--strength-strong, #16a34a) !important; } /* ── 8. INPUT LAYOUT UTILITIES ─────────────────────────────────────── .pl-14 / .pl-44 — padding-left for inputs with icon prefixes .phone-prefix — "+91" label inside the phone input-wrap; needs position:absolute so left: works — the parent .input-wrap must be position:relative. */ .pl-14 { padding-left: 14px !important; } .pl-44 { padding-left: 44px !important; } .phone-prefix { position: absolute; /* BUG FIX: was missing position, so left:10px had no effect */ left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; font-weight: 700; color: var(--grey-600, #4b5563); pointer-events: none; user-select: none; } .select-clean { cursor: pointer; appearance: none; -webkit-appearance: none; /* Safari */ } /* ── 9. TEXT & LINK UTILITIES ──────────────────────────────────────── Spacing, colour, and button-as-link helpers used by login.html. */ .mt-1 { margin-top: 0.375rem; } .mb-0 { margin-bottom: 0 !important; } .text-md { font-size: 1.1rem; } .text-navy { color: var(--navy, #1a4a76); } .oauth-icon { font-size: 1rem; } .terms-link { color: var(--navy, #1a4a76); font-weight: 600; text-decoration: none; transition: text-decoration var(--transition-fast, 0.15s ease); } .terms-link:hover { text-decoration: underline; } .forgot-info-sub { font-size: 0.75rem; color: var(--grey-400, #9ca3af); } /* Inline text-button (e.g. "try again" inside forgot-password step 2) */ .btn-text-navy { background: none; border: none; padding: 0; cursor: pointer; color: var(--navy, #1a4a76); font-weight: 700; font-size: 0.75rem; font-family: var(--font-body, system-ui, sans-serif); transition: text-decoration var(--transition-fast, 0.15s ease); vertical-align: baseline; } .btn-text-navy:hover { text-decoration: underline; } .btn-text-navy:focus-visible { outline: 2px solid var(--navy, #1a4a76); outline-offset: 2px; border-radius: var(--radius-sm, 4px); } /* ── 10. RESULT PAGE BRIDGE CLASSES ───────────────────────────────── result.js classList toggles: .visible (auth-banner), .active (tab panels), .show (toast). .active is page-specific (result.css) — only .visible needed here. */ .auth-banner { display: none; } .auth-banner.visible { display: flex; } /* app.js nav-open — mobile nav drawer */ .nav-open { display: block !important; }