/* fonts, matching the Phishing Club app and guide */
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/TitilliumWeb-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/static/TitilliumWeb-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/static/TitilliumWeb-Bold.ttf") format("truetype");
}

/* flat dark theme. solid surfaces, crisp borders, one accent, no gradients or
   glows. colors are tuned for a strong contrast ratio against the background. */
:root {
    --bg: #0b0e14;
    --sheet: #11151d;
    --surface: #1a212c;
    --surface-2: #232b39;
    --border: #27303f;
    --border-strong: #3a4557;
    --text: #edeff4;
    --text-2: #b7c0cf;
    --text-3: #7f8a9b;
    --accent: #6f9bff;
    --accent-hover: #97b6ff;
    --accent-soft: rgba(111, 155, 255, 0.14);
    --link: #fcaa3e;
    --link-hover: #ffc061;
    --button: #3159d6;
    --button-hover: #2848b4;
    --good: #4ade80;
    --good-bg: rgba(74, 222, 128, 0.12);
    --bad: #ff7a7a;
    --bad-bg: rgba(255, 122, 122, 0.12);
    --code-bg: #0c1016;
    --radius: 10px;
    --radius-sm: 8px;
    --radius-lg: 14px;
    --header-h: 61px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: "Titillium Web", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}
/* content titles use the text face so mixed case and acronyms like AiTM, TOTP
   and MFA keep their casing. the caps only display font stays on the hero. */
.level-head h1,
.page-head h1 {
    font-family: "Titillium Web", sans-serif;
    letter-spacing: -0.3px;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* links inside the reading text use the guide's golden accent so the lessons
   match the documentation on the marketing site. chrome links (nav, sidebar,
   back, footer, buttons) keep their own colors set above and below. the .back
   paragraph is excluded so the Levels link stays a quiet gray. */
.page p:not(.back) a,
.page li a,
.page dd a {
    color: var(--link);
}
.page p:not(.back) a:hover,
.page li a:hover,
.page dd a:hover {
    color: var(--link-hover);
}

main {
    flex: 1;
    width: 100%;
}

/* buttons */
.btn {
    display: inline-block;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--button);
    color: #fff;
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.btn:hover {
    background: var(--button-hover);
    color: #fff;
    text-decoration: none;
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.btn-sm {
    padding: 8px 14px;
    font-size: 14px;
}
.btn-lg {
    padding: 13px 26px;
    font-size: 16px;
}
.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: #fff;
}

/* header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 32px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
}
.logo {
    display: flex;
    align-items: center;
    gap: 11px;
}
.logo:hover {
    text-decoration: none;
}
.logo img {
    height: 18px;
    display: block;
}
.logo .tag {
    font-family: "Titillium Web", sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text);
    letter-spacing: 0.6px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 2px 9px;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
.site-nav form {
    display: inline;
    margin: 0;
}
.site-nav a {
    color: var(--text-2);
    font-weight: 600;
}
.site-nav a:hover {
    color: #fff;
    text-decoration: none;
}
.site-nav a.btn {
    color: #fff;
}
.site-nav a.btn:hover {
    color: #fff;
}
.nav-btn {
    background: none;
    border: none;
    color: var(--text-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.nav-btn:hover {
    color: #fff;
}

/* hero */
.hero {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-h) - 86px);
    padding: 40px 24px;
}
.hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.hero-title {
    font-size: clamp(36px, 6vw, 58px);
    letter-spacing: -0.5px;
}
.hero-sub {
    font-size: 19px;
    color: var(--text-2);
    max-width: 56ch;
    margin: 22px auto 0;
    text-wrap: balance;
}
.hero-note {
    font-size: 14px;
    color: var(--text-2);
    max-width: 56ch;
    margin: 14px auto 0;
}
.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}

/* page container: the reading content sits directly on the background as a
   plain document. the side space is used by the sticky section nav, not a box. */
.page {
    max-width: 740px;
    margin: 0 auto;
    padding: 64px 24px 112px;
}
.page-narrow {
    max-width: 720px;
}
.page-head {
    margin-bottom: 28px;
}
.page-head h1 {
    font-size: clamp(30px, 4vw, 40px);
}
/* body copy stays bright, only genuinely secondary text is dimmed */
.page p {
    color: var(--text);
    margin: 0 0 18px;
}
.lead {
    color: var(--text);
    max-width: 66ch;
    margin: 14px 0 0;
    font-size: 19px;
    line-height: 1.6;
}
.back {
    margin: 0 0 22px;
}
.back a {
    color: var(--text-2);
    font-weight: 600;
}

/* section headings use the mixed case text face, not the all caps display font,
   so long headings stay scannable. a hairline above each one separates the
   sections of a long lesson. */
.page h2 {
    font-family: "Titillium Web", sans-serif;
    font-size: 23px;
    color: #fff;
    margin: 40px 0 14px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 88px;
}
.page-head + .lead + .page h2:first-of-type,
.page > h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 20px;
}
.page h3 {
    font-family: "Titillium Web", sans-serif;
    font-size: 18px;
    color: #fff;
    margin: 26px 0 10px;
}

/* cards */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 26px;
    margin-bottom: 18px;
}
.panel p:first-child {
    margin-top: 0;
}
.panel p:last-child {
    margin-bottom: 0;
}

/* rows of a term and its value, used instead of nested boxes */
.facts {
    margin: 8px 0 0;
}
.fact {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 6px 24px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
}
.fact:last-child {
    border-bottom: none;
}
.fact dt {
    color: var(--text-2);
    font-size: 14px;
    margin: 0;
}
.fact dd {
    margin: 0;
    min-width: 0;
}
@media (max-width: 620px) {
    .fact {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
.logout-form {
    margin-top: 28px;
}

.cred {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 14px;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 11px;
    color: #fff;
    overflow-wrap: anywhere;
}
.cred.copy {
    cursor: pointer;
}
.cred.copy::after {
    content: " \29C9";
    color: var(--text-3);
}
.cred.copy:hover {
    border-color: var(--accent);
}
.cred.copied {
    color: var(--good);
    border-color: var(--good);
}
.cred.copied::after {
    content: "";
}

/* live TOTP code with a countdown bar that depletes over the 30 second window */
.totp-code {
    letter-spacing: 2px;
}
.totp-timer {
    display: inline-block;
    width: 72px;
    height: 4px;
    margin-left: 12px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}
.totp-timer-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.25s linear;
}

/* forms */
label {
    display: block;
    margin: 18px 0 7px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
}
input::placeholder {
    color: var(--text-3);
}
input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-hint {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--text-3);
}

/* auth cards */
.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-h) - 86px);
    padding: 32px 24px;
}
.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 38px 36px;
}
.auth-card h1 {
    font-size: 26px;
}
.auth-sub {
    color: var(--text-2);
    margin: 8px 0 22px;
}
.auth-card .btn-block {
    margin-top: 26px;
}
.auth-alt {
    margin: 22px 0 0;
    text-align: center;
    color: var(--text-2);
    font-size: 14px;
}
.cf-turnstile {
    margin-top: 20px;
}

/* levels */
.levels {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--border);
}
.levels li {
    border-bottom: 1px solid var(--border);
}
.level-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 14px;
    border-radius: var(--radius);
    color: inherit;
    transition: background-color 0.15s ease;
}
a.level-row:hover {
    background: var(--surface);
    text-decoration: none;
    color: inherit;
}
.level-row--soon {
    opacity: 0.6;
}
.level-row .num {
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent-hover);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    min-width: 58px;
    height: 40px;
    padding: 0 10px;
    display: grid;
    place-items: center;
    flex: none;
}
.level-row .body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.level-row .title {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}
.level-row .skill {
    color: var(--text-2);
    font-size: 14px;
}
.level-row .chev {
    color: var(--text-2);
    font-size: 20px;
}

.badge {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    white-space: nowrap;
    color: var(--text-2);
}
.badge.done {
    color: var(--good);
    border-color: transparent;
    background: var(--good-bg);
}
.badge.soon {
    color: var(--text-2);
    background: var(--surface-2);
    border-color: transparent;
}

.error {
    color: var(--bad);
    background: var(--bad-bg);
    padding: 12px 14px;
    border-radius: var(--radius);
    margin: 10px 0;
}
.ok {
    color: var(--good);
    background: var(--good-bg);
    padding: 12px 14px;
    border-radius: var(--radius);
    margin: 10px 0;
}
.hint {
    color: var(--text-2);
    font-size: 14px;
}
.status-done {
    display: inline-block;
    color: var(--good);
    background: var(--good-bg);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* level page header: a small kicker label above the title, then the title with
   an optional completion badge beside it */
.level-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 6px;
}
.level-code {
    grid-column: 1 / -1;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
}
.level-head h1 {
    grid-column: 1;
    font-size: clamp(30px, 4vw, 40px);
}
.level-head .status-done {
    grid-column: 2;
    align-self: center;
}

/* app shell. authenticated pages get a persistent levels sidebar on the left and
   the reading column centered beside it. lesson pages add an on this page nav on
   the right, giving a three column layout that uses the width instead of leaving
   the sides empty. public pages (home, login) keep .layout as a plain block. */
.layout {
    flex: 1;
}
.layout-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    align-items: start;
}

.sidebar {
    position: sticky;
    top: var(--header-h);
    align-self: start;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 30px 14px 30px 28px;
    border-right: 1px solid var(--border);
}
.sidebar-title {
    margin: 0 0 12px;
    padding-left: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-3);
}
.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-nav li {
    margin: 2px 0;
}
.sidebar-nav a,
.sidebar-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}
.sidebar-nav a:hover {
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}
.sidebar-nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.sidebar-code {
    flex: none;
    min-width: 34px;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--text-3);
}
.sidebar-nav a.active .sidebar-code {
    color: var(--accent);
}
.sidebar-name {
    flex: 1;
}
.sidebar-check {
    flex: none;
    color: var(--good);
    font-size: 12px;
}
.sidebar-item--soon {
    opacity: 0.45;
}

/* on this page section nav, built from the lesson headings by a small script on
   the level page. it occupies the right column of the shell on wide screens. */
.toc {
    display: none;
}
@media (min-width: 1240px) {
    .layout-shell.layout-toc {
        grid-template-columns: 252px minmax(0, 1fr) 232px;
    }
    .toc {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 40px);
        align-self: start;
        max-height: calc(100vh - var(--header-h) - 60px);
        overflow-y: auto;
        padding: 44px 28px 0 0;
    }
    .toc-title {
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--text-3);
    }
    .toc ul {
        list-style: none;
        margin: 0;
        padding: 0;
        border-left: 1px solid var(--border);
    }
    .toc a {
        display: block;
        padding: 6px 0 6px 16px;
        margin-left: -1px;
        border-left: 2px solid transparent;
        color: var(--text-3);
        font-size: 14px;
        line-height: 1.45;
        font-weight: 600;
    }
    .toc a:hover {
        color: var(--text);
        text-decoration: none;
    }
    .toc a.active {
        color: var(--accent);
        border-left-color: var(--accent);
    }
}

/* below the shell breakpoint the sidebar folds away and the content is full
   width, so small screens read as a single column */
@media (max-width: 940px) {
    .layout-shell {
        grid-template-columns: 1fr;
    }
    .sidebar {
        display: none;
    }
}

/* lesson lists: objective, tips and walkthrough steps share one style so they
   line up the same way regardless of which class or element they use */
.page-narrow ul,
.page-narrow ol {
    padding-left: 20px;
    margin: 12px 0;
}
.page-narrow li {
    margin-bottom: 12px;
    color: var(--text);
}
.level-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.level-actions form {
    margin: 0;
}
/* push the next level link to the end so it reads as the continue step */
.level-actions a.btn-ghost {
    margin-left: auto;
}

code {
    font-family: ui-monospace, monospace;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.9em;
    color: #fff;
}
code.copy-url {
    cursor: pointer;
    white-space: nowrap;
}
code.copy-url::after {
    content: " \29C9";
    color: var(--text-3);
}
code.copy-url:hover {
    border-color: var(--accent);
}
code.copy-url.copied {
    color: var(--good);
    border-color: var(--good);
}
code.copy-url.copied::after {
    content: "";
}
pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    overflow: auto;
}
pre code {
    background: none;
    border: none;
    padding: 0;
}

/* copy button injected into solution code blocks, pinned to the top right so it
   stays put while the code scrolls inside the pre */
.code-block {
    position: relative;
}
.code-block pre {
    padding-right: 76px;
}
.code-block .copy-code {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: inherit;
    font-size: 12px;
    padding: 4px 10px;
    color: var(--text-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.code-block .copy-code:hover {
    color: #fff;
    border-color: var(--accent);
}
.code-block .copy-code.copied {
    color: var(--good);
    border-color: var(--good);
}

details.walkthrough {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2px 22px;
    background: var(--surface);
    margin: 18px 0;
}
details.walkthrough > summary {
    cursor: pointer;
    font-weight: 700;
    padding: 16px 0;
    color: var(--accent);
    list-style: none;
}
details.walkthrough > summary::-webkit-details-marker {
    display: none;
}
details.walkthrough > summary::before {
    content: "\25B8\00a0\00a0";
}
details.walkthrough[open] > summary::before {
    content: "\25BE\00a0\00a0";
}

/* confirm modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
}
.modal-overlay[hidden] {
    display: none;
}
.modal {
    width: 100%;
    max-width: 420px;
    padding: 24px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.modal-message {
    margin: 0 0 20px;
    color: var(--text);
    white-space: pre-line;
}
.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* footer */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 28px 32px;
    text-align: center;
}
.footer-links {
    display: flex;
    gap: 26px;
    justify-content: center;
    margin-bottom: 10px;
}
.footer-links a {
    color: var(--text-2);
    font-weight: 600;
}
.footer-links a:hover {
    color: #fff;
}
.footer-note {
    margin: 0;
    font-size: 13px;
    color: var(--text-3);
}

@media (max-width: 620px) {
    .site-header {
        padding: 13px 18px;
    }
    .site-nav {
        gap: 16px;
    }
    .hero {
        padding: 72px 20px 60px;
    }
    .page {
        margin: 20px 14px 40px;
        padding: 28px 22px 36px;
        border-radius: 14px;
    }
}