/* ============================================================
   Directory, detail, verify — public/courses/index.php,
   view.php, verify.php, my.php. Unlike take.php's HUD or
   certificate.php's parchment document, these are ordinary
   browsing screens: fully theme-aware (light/dark via the site's
   own --surface/--border/--indigo). Deliberately plain and
   dense — no hover animation, no gradients — the only shared
   detail is a small monospace "chip" for stats (time limit,
   question count, pass score), the same numeric language take.php's
   timer and certificate.php's code chip already use.
   ============================================================ */

/* No padding/margin/max-width here on purpose — public/pages/index.php has
   no analogous wrapper at all and relies entirely on the theme's own
   .page-content spacing (see themes/*/style.css). Matching that means NOT
   adding a second layer of padding on top of it. .cert-page exists only
   as a semantic grouping hook for descendant selectors. */
.cert-page {
}

.cert-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.cert-page-header-text h1 {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 .1rem;
}

.cert-page-header-text h1 i {
    color: var(--indigo, #6366f1);
    font-size: .95rem;
}

.cert-page-header-text p {
    margin: 0;
    font-size: .8rem;
}

/* Filter tabs (All/Free/Paid/My) on index.php — same shape as
   music-subnav/dl-subnav/etc, so this reads as the same site-wide
   pattern rather than a one-off. Merges into .page-head-card above it
   via .page-head-group (see themes/*/style.css) — the merge-specific
   overrides live here rather than in the shared theme file since
   .cert-subnav is this module's own class. */
.cert-subnav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    margin-bottom: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.cert-subnav::-webkit-scrollbar {
    display: none;
}

.cert-subnav a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    text-align: center;
    padding: .5rem .7rem;
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: .78rem;
    position: relative;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    gap: .3rem;
}

.cert-subnav a.is-active {
    color: var(--indigo);
    border-bottom-color: var(--indigo);
    background: var(--indigo-soft, var(--paper));
}

.page-head-group .cert-subnav {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
}

.page-head-group:has(.cert-subnav) {
    background: var(--surface);
}

.cert-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.cert-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    font-weight: 500;
    color: var(--ink-soft, #6b7280);
    background: var(--indigo-soft, #eef2ff);
    padding: .18rem .45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.cert-chip i {
    color: var(--indigo, #6366f1);
    font-size: .64rem;
}

.cert-chip-price {
    background: color-mix(in srgb, #d97706 14%, transparent);
    color: #b45309;
}

.cert-chip-price i {
    color: #b45309;
}

.cert-chip-free {
    background: color-mix(in srgb, #16a34a 14%, transparent);
    color: #15803d;
}

.cert-chip-free i {
    color: #15803d;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
}

.cert-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .6rem .65rem;
    border-radius: 8px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    text-decoration: none;
    color: inherit;
    transition: border-color .1s ease;
}

.cert-card:hover {
    border-color: var(--indigo, #6366f1);
}

.cert-card-head {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.cert-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--indigo-soft, #eef2ff);
    color: var(--indigo, #6366f1);
    font-size: .82rem;
    flex-shrink: 0;
}

.cert-card h3 {
    margin: 0;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.2;
}

.cert-card-desc {
    font-size: .76rem;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-detail {
    padding: .85rem;
}

.cert-detail-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
}

.cert-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--indigo-soft, #eef2ff);
    color: var(--indigo, #6366f1);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.cert-detail-head h1 {
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0;
    line-height: 1.25;
}

.cert-detail-category {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--indigo, #6366f1);
    margin-bottom: .2rem;
}

.cert-detail-desc {
    font-size: .82rem;
    line-height: 1.45;
    margin: 0 0 .65rem;
}

.cert-attempts-note {
    font-size: .78rem;
    margin-bottom: .5rem;
}


/* ============================================================
   Exam mode — public/courses/take.php
   Signature: a sticky console-style status bar (title, live
   progress, mono countdown) that reads like a systems/monitoring
   HUD — grounded in this community's security-tooling audience
   rather than a generic quiz-app countdown. Everything below it
   stays deliberately dense: hairlines instead of boxed cards,
   tight vertical rhythm, two-column options on wider screens.
   ============================================================ */

.exam-page {
    padding: 0 1rem 2rem;
}

.exam-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .6rem .9rem;
    margin: 0 -1rem .9rem;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    backdrop-filter: saturate(1.4) blur(6px);
}

.exam-bar-identity {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 0 1 auto;
}

.exam-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--indigo-soft, #eef2ff);
    color: var(--indigo, #6366f1);
    font-size: .85rem;
    flex-shrink: 0;
}

.exam-bar-title {
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exam-bar-progress {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 90px;
}

.exam-progress-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--border, #e5e7eb);
    overflow: hidden;
}

.exam-progress-fill {
    height: 100%;
    background: var(--indigo, #6366f1);
    border-radius: 3px;
    transition: width .25s ease;
}

.exam-progress-label {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    font-weight: 500;
    color: var(--ink-soft, #6b7280);
    white-space: nowrap;
}

.exam-bar-timer {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    font-weight: 700;
    padding: .3rem .55rem;
    border-radius: 7px;
    color: var(--indigo, #6366f1);
    background: var(--indigo-soft, #eef2ff);
    flex-shrink: 0;
}

.exam-bar-timer.is-warning {
    color: #b45309;
    background: color-mix(in srgb, #d97706 16%, transparent);
}

.exam-bar-timer.is-critical {
    color: #dc2626;
    background: color-mix(in srgb, #dc2626 16%, transparent);
    animation: exam-pulse 1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .exam-bar-timer.is-critical { animation: none; }
}

@keyframes exam-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

.exam-instructions {
    font-size: .82rem;
    color: var(--ink-soft, #6b7280);
    margin: 0 0 1rem;
}

.exam-questions {
    border-top: 1px solid var(--border, #e5e7eb);
}

.exam-q {
    display: flex;
    gap: .7rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
    border-left: 2px solid transparent;
    padding-left: .7rem;
    margin-left: -.7rem;
    transition: border-color .15s ease;
}

.exam-q.is-answered {
    border-left-color: var(--indigo, #6366f1);
}

.exam-q-index {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-soft, #6b7280);
    background: var(--border, #e5e7eb);
    margin-top: .1rem;
}

.exam-q.is-answered .exam-q-index {
    color: #fff;
    background: var(--indigo, #6366f1);
}

.exam-q-body {
    flex: 1;
    min-width: 0;
}

.exam-q-text {
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.4;
    margin: 0 0 .55rem;
}

.exam-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .35rem .75rem;
}

.exam-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .38rem .5rem;
    border-radius: 7px;
    font-size: .86rem;
    cursor: pointer;
    transition: background .12s ease;
}

.exam-option:hover {
    background: var(--indigo-soft, #eef2ff);
}

.exam-option-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.exam-option-control {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border, #d1d5db);
    background: var(--surface, #fff);
}

.exam-option-input[type="radio"] + .exam-option-control {
    border-radius: 50%;
}

.exam-option-input[type="checkbox"] + .exam-option-control {
    border-radius: 4px;
}

.exam-option-input:checked + .exam-option-control {
    border-color: var(--indigo, #6366f1);
    background: var(--indigo, #6366f1);
    box-shadow: inset 0 0 0 3px var(--surface, #fff);
}

.exam-option-input:focus-visible + .exam-option-control {
    outline: 2px solid var(--indigo, #6366f1);
    outline-offset: 2px;
}

.exam-option-text {
    line-height: 1.3;
}

.exam-submit {
    margin-top: 1.25rem;
}

@media (max-width: 480px) {
    .exam-bar-title { max-width: 40vw; }
    .exam-bar-progress { min-width: 60px; }
}

.cert-result {
    text-align: center;
    padding: 2.5rem 1.5rem;
}

.cert-result-score {
    font-size: 3rem;
    font-weight: 700;
    margin: .5rem 0;
}

.cert-result-pass .cert-result-score { color: #16a34a; }
.cert-result-fail .cert-result-score { color: #dc2626; }

/* ============================================================
   The certificate document — public/courses/certificate.php
   Deliberately NOT theme-aware (no --surface/dark-mode variables):
   a certificate is a printable/shareable document, like a diploma,
   not a UI screen — it stays on its own parchment surface regardless
   of whether the visitor has the site in dark mode, same as a real
   diploma doesn't invert colors depending on the room's lighting.
   Two accents carry the whole thing: a warm gold for ornament/prestige,
   the site's own indigo for the parts that are functionally about
   verification (seal ring, code chip) — tying it back to the brand.
   ============================================================ */

/* The certificate is authored at a fixed 900px design width and then scaled
   as one rigid unit to fit whatever space is available (see the small
   script at the bottom of certificate.php) — the same principle as zooming
   an image, rather than reflowing text at every breakpoint. A fixed-ratio
   document with this much content genuinely cannot stay both landscape-
   shaped AND legible if every element tries to shrink independently at
   narrow widths; scaling the whole thing uniformly is what actually
   guarantees the 1.6:1 shape holds at every size without needing a long
   tail of per-element mobile overrides (and without any of them silently
   drifting out of sync with each other again). */
.cert-doc-scale-wrap {
    width: 100%;
    overflow: hidden;
}

.cert-doc {
    width: 900px;
    margin-top: 1rem;
    padding: 14px;
    background: #fdfbf5;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 12px 32px rgba(28, 25, 23, .1);
}

/* aspect-ratio gives a 1.6:1 landscape shape while still letting the box
   grow taller if content genuinely needs more room than that (normal-flow
   elements with aspect-ratio do this automatically — it's a sizing
   preference, not a hard clip). That matters here: a fixed-height box that
   couldn't grow was overflowing and overlapping the page content below it
   on narrow screens. Landscape at every size, on both themes, same as
   before — the download/PDF capture's accuracy is handled separately in
   certificate-download.js, which measures the actual rendered box rather
   than asking html2canvas to recompute this layout itself. */
.cert-doc-frame {
    position: relative;
    aspect-ratio: 1.6 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2.75rem;
    text-align: center;
    color: #1e2d3d;
    border: 1px solid #d9a441;
    outline: 1px solid #e4d9bd;
    outline-offset: -6px;
    background:
        radial-gradient(circle at 50% 0%, rgba(30, 45, 61, .04), transparent 55%),
        repeating-radial-gradient(circle at 50% 50%, rgba(217, 164, 65, .05) 0, rgba(217, 164, 65, .05) 1px, transparent 1px, transparent 34px);
}

/* Corner brackets — one SVG (top-left orientation), flipped via transform
   for the other three corners rather than repeating the markup 4 different ways. */
.cert-doc-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    color: #d9a441;
}

.cert-doc-corner svg { display: block; }

.cert-doc-corner-tl { top: 10px; left: 10px; }
.cert-doc-corner-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.cert-doc-corner-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.cert-doc-corner-br { bottom: 10px; right: 10px; transform: scale(-1, -1); }

.cert-doc-edge-ornament {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #d9a441;
    transform: translateX(-50%) rotate(45deg);
    left: 50%;
}

.cert-doc-edge-top { top: 6px; }
.cert-doc-edge-bottom { bottom: 6px; }

.cert-doc-seal-wrap {
    position: relative;
    width: 92px;
    height: 112px;
    margin-bottom: .5rem;
}

.cert-doc-seal-svg {
    display: block;
    margin: 0 auto;
}

.cert-doc-seal-icon {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fdfbf5;
}

.cert-doc-ribbon {
    position: absolute;
    top: 78px;
    width: 16px;
    height: 30px;
    background: #1e2d3d;
    z-index: -1;
}

/* The notch cut into the bottom of each ribbon tail is faked with a
   paper-colored triangle (classic border trick) rather than clip-path,
   which html2canvas silently drops — that was rendering these as plain
   squared-off rectangles in downloaded/printed copies. */
.cert-doc-ribbon::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 7px solid #fdfbf5;
}

.cert-doc-ribbon-l {
    left: 26px;
    transform: rotate(6deg);
}

.cert-doc-ribbon-r {
    right: 26px;
    transform: rotate(-6deg);
}

.cert-doc-brand {
    font-family: 'Lora', Georgia, serif;
    font-size: .92rem;
    color: #4a5a6a;
    margin-bottom: .9rem;
}

.cert-doc-doctype {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.9rem;
    color: #1e2d3d;
    margin: 0 0 .6rem;
    line-height: 1.15;
}

.cert-doc-eyebrow {
    font-family: 'Lora', Georgia, serif;
    font-size: .88rem;
    color: #4a5a6a;
    margin: 0;
}

.cert-doc-recipient {
    font-family: 'Alex Brush', cursive;
    font-weight: 400;
    font-size: 2.9rem;
    line-height: 1.15;
    color: #1e2d3d;
    margin: .3rem 0 .7rem;
}

.cert-doc-body-text {
    font-family: 'Lora', Georgia, serif;
    font-size: .84rem;
    line-height: 1.6;
    color: #3f4d5c;
    max-width: 620px;
    margin: 0 0 .5rem;
}

.cert-doc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .9rem auto .1rem;
    max-width: 200px;
    width: 100%;
}

.cert-doc-divider::before,
.cert-doc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d6c9a3;
}

.cert-doc-divider span {
    width: 6px;
    height: 6px;
    margin: 0 .6rem;
    background: #d9a441;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.cert-doc-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 1.5rem;
    width: 100%;
    max-width: 640px;
    margin-top: 1.1rem;
}

.cert-doc-sig-block {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cert-doc-sig-block.cert-doc-sig-right {
    align-items: flex-end;
}

.cert-doc-sig-line {
    width: 100%;
    height: 1px;
    background: #1e2d3d;
    margin-bottom: .35rem;
}

.cert-doc-sig-value {
    font-family: 'Lora', Georgia, serif;
    font-weight: 700;
    font-size: .82rem;
    color: #1e2d3d;
}

.cert-doc-sig-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a7e5f;
}

.cert-doc-verify-block {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cert-doc-qr-code {
    padding: 4px;
    background: #fdfbf5;
    border: 1px solid #e4d9bd;
    border-radius: 5px;
    line-height: 0;
}

.cert-doc-stamp {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.cert-doc-stamp svg {
    display: block;
}

.cert-doc-stamp i {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fdfbf5;
    font-size: 1rem;
}

.cert-doc-code-note {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .66rem;
    color: #8a7e5f;
    letter-spacing: .04em;
    margin: .7rem 0 0;
}

.cert-doc-code-note strong {
    color: #4338ca;
    letter-spacing: .1em;
}

.cert-certificate-actions {
    max-width: 760px;
    margin: 1.25rem auto 0;
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media print {
    .site-footer, .topbar, .web-sidebar, .sidebar, .app-bar, .bottom-tabs, .cert-certificate-actions {
        display: none !important;
    }
    .cert-doc { box-shadow: none; }
}

.cert-verify-form {
    display: flex;
    gap: .4rem;
    margin-bottom: .75rem;
}

.cert-verify-form input {
    flex: 1;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .82rem;
}

.cert-verify-result {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-align: left;
    padding: .65rem .8rem;
    border-radius: 8px;
    border-left: 3px solid var(--border, #e5e7eb);
}

.cert-verify-result.is-valid { border-left-color: #16a34a; }
.cert-verify-result.is-invalid { border-left-color: #d97706; }
.cert-verify-result.is-not-found { border-left-color: #dc2626; }

.cert-verify-result-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cert-verify-result.is-valid .cert-verify-result-icon { color: #16a34a; }
.cert-verify-result.is-invalid .cert-verify-result-icon { color: #d97706; }
.cert-verify-result.is-not-found .cert-verify-result-icon { color: #dc2626; }

.cert-verify-result-body h2 {
    font-size: .88rem;
    font-weight: 700;
    margin: 0 0 .1rem;
}

.cert-verify-result-body p {
    font-size: .78rem;
    margin: 0;
    color: var(--ink-soft, #6b7280);
}