/* ================================================================= Quiz Platform — shared stylesheet Modern, mobile-first, animated design system built around the Captain 37 brand palette — deep ink-navy (trust) + a warm amber/gold accent thread (the same navy/gold pairing the certificates and printable reports already use, now carried through the whole site instead of living only on those two document types). ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { /* Brand — variable names kept as-is (--brand-blue/--brand-orange) for compatibility with every rule below that already references them; only the values moved to the new ink-navy + amber-gold palette. */ --brand-blue: #14335c; --brand-blue-dark: #0d2445; --brand-blue-darker: #081729; --brand-orange: #bd7b2e; --brand-orange-dark: #93601f; --brand-gold: #c9a227; --brand-gold-soft: rgba(201, 162, 39, .16); /* Semantic */ --primary: var(--brand-blue); --primary-dark: var(--brand-blue-dark); --accent: var(--brand-orange); --accent-dark: var(--brand-orange-dark); --success: #15803d; --success-bg: #e1f3e6; --danger: #dc2626; --danger-bg: #fee2e2; --warning: #d97706; --warning-bg: #fef3c7; --info: #0284c7; --info-bg: #dbeafe; /* Neutrals — warm ivory/sand instead of the old cool blue-grey wash, so the whole canvas reads warm rather than corporate-cold. */ --bg: #faf7f1; --card-bg: #ffffff; --border: #e7e1d3; --text: #171f2e; --muted: #6b7280; --tint: #f6f1e4; /* System — a more generous, "squircle" radius scale and softer, farther-thrown shadows read as premium rather than boxy; the two new tokens (--shadow-accent, --ease-spring) are additive, used by hero/CTA moments and hover micro-interactions further down. */ --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --shadow-sm: 0 1px 2px rgba(16, 26, 48, .06), 0 1px 1px rgba(16, 26, 48, .05); --shadow: 0 20px 44px -18px rgba(16, 26, 48, .20); --shadow-lg: 0 32px 74px -24px rgba(16, 26, 48, .28); --shadow-accent: 0 18px 40px -14px rgba(189, 123, 46, .38); --ease: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --font-head: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --maxw: 1180px; } * { box-sizing: border-box; } /* Belt-and-braces backstop: the admin/superuser overflow causes we found (align-items on a column flex container, an un-collapsed grid span, form controls without min-width:0) are fixed at the source further down, but a page-level horizontal scrollbar is jarring enough that it's worth a hard backstop too — nothing on this site is meant to scroll sideways at the page level. This goes on only (not ) — setting overflow-x here without overflow-y makes the UA treat overflow-y as auto per spec, and doing that on as well would turn it into a SECOND independent scroll container nested inside 's, which is exactly the kind of thing that quietly breaks `position: sticky` (.topbar, .qp-overall-timer, etc. all rely on the viewport being their scrolling ancestor). One scroll container (html) is enough to stop horizontal scroll without that risk. Elements that DO need their own horizontal scroll (.table-wrap, .report-table-wrap, .code-block) declare overflow-x:auto on an inner wrapper, which is unaffected by this and keeps working. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 600; /* Fraunces is a variable font with an optical-size axis — letting the browser interpolate it means a small h4 renders with tighter, text-optimised proportions while a big hero h1 leans into the fuller display cut, instead of one fixed cut stretched to every size. */ font-optical-sizing: auto; } p { margin: 0 0 12px; } a { color: var(--primary); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: var(--brand-orange-dark); } img { max-width: 100%; } /* Reference/transaction codes are shown all over (payment references, certificate codes, application reference numbers) and are exactly the kind of long unbroken string that forces horizontal scroll on a phone if it can't wrap — this makes every

 wrap safely by default. */
code { word-break: break-word; overflow-wrap: anywhere; }
.page-title { margin: 6px 0 22px; font-size: 1.7em; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-center { text-align: center; }
.float-right { float: right; }
::selection { background: var(--brand-orange); color: #fff; }

/* ---------- Icon system ----------
   Inline SVGs from includes/icons.php — replaces the emoji-as-icon
   pattern that used to cover the nav, both sidebars, quiz cards, and
   dashboards. One stroke weight and size across every surface instead
   of a different emoji font per OS/browser. */
.icon {
    width: 1em; height: 1em; flex-shrink: 0;
    vertical-align: -0.15em;
    stroke: currentColor;
}
.icon-lg { width: 1.3em; height: 1.3em; }
.icon-sm { width: .85em; height: .85em; }

/* Consistent keyboard-focus ring for every interactive element that
   doesn't already define its own :focus-visible treatment (inputs and
   the live-search box set their own above) — an outline:none with no
   replacement is an accessibility bug, not a style choice. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible { outline-offset: 3px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1.in-view { transition-delay: .08s; }
.reveal-delay-2.in-view { transition-delay: .16s; }
.reveal-delay-3.in-view { transition-delay: .24s; }
.reveal-delay-4.in-view { transition-delay: .32s; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(189,123,46,.45); } 100% { box-shadow: 0 0 0 14px rgba(189,123,46,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color: #fff;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .003em;
    /* A faint inner top highlight + a matching faint bottom shade reads
       as a gently machined, slightly convex pill rather than a flat
       color swatch — subtle enough to disappear on small buttons but
       still register on the larger CTAs. */
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.08);
    transition: transform .3s var(--ease-spring), box-shadow .25s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.2); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark)); }
.btn-accent, .btn-orange { background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)); }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--border); box-shadow: none; }
.btn-outline:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn-sm { padding: 6px 14px; font-size: 0.83em; }
.btn-lg { padding: 15px 30px; font-size: 1.05em; }
.btn-block { width: 100%; }
.btn-link { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; text-decoration: underline; box-shadow: none; font-weight: 500; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---------- Top bar (logged-in portals) ---------- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: rgba(255,252,246,.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.topbar-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.1em; color: var(--text); }
.topbar-brand img { height: 34px; width: 34px; }
.topbar-user { display: flex; align-items: center; gap: 12px; }
.topbar-role {
    text-transform: uppercase;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f5ecd6;
    color: var(--primary);
}

/* ---------- Notifications bell ---------- */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
    position: relative; background: none; border: none; cursor: pointer;
    font-size: 1.25em; line-height: 1; padding: 6px; border-radius: 10px;
    transition: background .15s var(--ease);
}
.notif-bell-btn:hover { background: #faf7f1; }
.notif-bell-badge {
    position: absolute; top: -2px; right: -2px; background: var(--danger); color: #fff;
    font-size: 0.62em; font-weight: 800; border-radius: 20px; padding: 2px 5px; line-height: 1;
    min-width: 16px; text-align: center;
}
.notif-bell-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 8px; z-index: 60;
}
.notif-bell-item {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 0.9em;
}
.notif-bell-item:hover { background: #faf7f1; text-decoration: none; }
.notif-bell-empty { padding: 16px 12px; text-align: center; color: var(--muted); font-size: 0.88em; }

/* ---------- Activity trend bars ---------- */
.trend-bars { display: flex; align-items: flex-end; gap: 18px; padding: 10px 4px 0; min-height: 160px; }
.trend-bar-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.trend-bar { width: 100%; max-width: 44px; background: linear-gradient(180deg, var(--brand-blue), var(--brand-blue-dark)); border-radius: 8px 8px 0 0; transition: height .4s var(--ease); }
.trend-bar-num { font-weight: 700; font-size: 0.85em; color: var(--brand-blue-dark); }
.trend-bar-label { font-size: 0.72em; color: var(--muted); text-align: center; }

/* ---------- Revenue share bars ---------- */
.revenue-bar-track { display: inline-block; width: 90px; height: 8px; background: #f4efe0; border-radius: 20px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.revenue-bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-orange), var(--brand-orange-dark)); border-radius: 20px; }
.sidebar-toggle {
    display: none;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    width: 38px; height: 38px;
    cursor: pointer;
    font-size: 1.1em;
}

.impersonation-banner {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: #fff3cd; color: #664d03; border-bottom: 1px solid #ffe69c;
    padding: 10px 16px; font-size: 0.92em; text-align: center;
}
.app-shell { display: flex; min-height: calc(100vh - 62px); }
.sidebar {
    width: 240px;
    background: linear-gradient(180deg, #ffffff, #f8f5ec);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    flex-shrink: 0;
    transition: transform .25s var(--ease);
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 22px;
    color: var(--text);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.sidebar nav a .sidebar-icon { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.sidebar nav a:hover .sidebar-icon, .sidebar nav a.active .sidebar-icon { color: currentColor; }
.sidebar nav a:hover { background: #f5ecd6; color: var(--primary); text-decoration: none; }
.sidebar nav a.active {
    background: linear-gradient(90deg, #f5ecd6, transparent);
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    border-left-color: var(--brand-orange);
}
.sidebar-org { padding: 8px 22px 18px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.sidebar-org-name { font-weight: 700; font-family: var(--font-head); }
.sidebar-org-status { font-size: 0.8em; color: var(--muted); }
.main-content { flex: 1; padding: 28px 34px; max-width: 1160px; animation: fadeIn .4s var(--ease); }

/* ---------- Public site nav ---------- */
.public-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 5vw;
    /* Warm frosted glass rather than the old neutral-white blur — the
       same material language as the hero's gold glow, just translucent
       enough to still read as "glass over whatever's beneath it". */
    background: rgba(255,252,244,.78);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 30px -22px rgba(16,26,48,.35);
    position: sticky;
    top: 0;
    z-index: 50;
}
.public-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 1.25em; color: var(--text); letter-spacing: -0.01em; }
.public-brand img { height: 40px; width: 40px; transition: transform .3s var(--ease); }
.public-brand:hover img { transform: rotate(-8deg) scale(1.08); }
.public-brand:hover { color: var(--text); }
.public-nav-links { display: flex; gap: 18px; align-items: center; }
.public-nav-links a:not(.btn) { color: var(--text); font-weight: 500; position: relative; }
.public-nav-links a:not(.btn)::after {
    content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px;
    background: var(--brand-orange); transition: width .2s var(--ease);
}
.public-nav-links a:not(.btn):hover::after { width: 100%; }
.public-nav-links a:not(.btn):hover { text-decoration: none; color: var(--brand-blue-dark); }
.public-nav-links .btn { color: #fff; }

/* Certificates dropdown — hover/focus-within reveal on desktop, tap to
   expand/collapse on mobile (see the 768px block below). The toggle is a
   plain