/* ============================================================
   Sort.IT — Main Homepage Stylesheet
   Layout: Three full-width panel sections positioned side-by-side
   Nav: Circular icon at top-centre (menu) + bottom-centre (home)
   Avoid content in the top-centre ~80px and bottom-centre ~80px zones
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* ── Reset & Base ─────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Palette */
    --blue-deep:    #003049;
    --blue-mid:     #1a5276;
    --blue-dull:    #1e3a52;
    --blue-light:   #a7c7e7;
    --blue-pale:    #e8f4fd;
    --navy:         #1b365d;
    --accent:       #569cd6;
    --accent-bright:#2196f3;

    /* Neutrals */
    --white:        #ffffff;
    --off-white:    #f4f8fc;
    --surface:      #ffffff;
    --border:       rgba(0, 48, 73, 0.12);
    --shadow:       rgba(0, 48, 73, 0.10);

    /* Text */
    --text-primary: #111827;
    --text-secondary:#4b5563;
    --text-muted:   #9ca3af;
    --text-on-dark: #e2eaf2;

    /* Typography */
    --font-display: 'Space Mono', monospace;
    --font-logo: Arial, Helvetica, sans-serif;
    --font-body:    'DM Sans', sans-serif;

    /* Circular nav icon size — used for safe-zone padding */
    --nav-icon-size: 56px;
    --nav-top-clearance: 90px;    /* top icon + breathing room */
    --nav-bottom-clearance: 90px; /* bottom icon + breathing room */

    /* Icon color */
    --icon-color: #111;
    --editor-text: #000000;

    /* Logo */
    --loader-1: #003049;
    --loader-2: #007B83;
    --user-1: #016B77;
    --user-2: #004D5F;
    --user-3: #017B83;

    /* bakcground */
    --bg-primary: #f7fbff;
    --bg-surface: #eef6fc;
    --bg-card: #e3f0f9;

    --warn:       #b86b1f;
    --warn-soft:  #fbeee0;
    --scrim:      rgba(0, 48, 73, 0.55);
}

@media (prefers-color-scheme: dark) {
    :root {
        --blue-deep:    #a8c8e8;
        --blue-mid:     #7aafd4;
        --blue-dull:    #c2dced;
        --blue-light:   #2a4a6a;
        --blue-pale:    #0d1f2d;
        --navy:         #b0c8e0;
        --accent:       #569cd6;
        --accent-bright:#4db6ff;

        --white:        #0f1923;
        --off-white:    #141e28;
        --surface:      #1a2535;
        --border:       rgba(168, 200, 232, 0.12);
        --shadow:       rgba(0, 0, 0, 0.35);

        --text-primary: #e8f1f8;
        --text-secondary:#94afc8;
        --text-muted:   #4a6278;
        --text-on-dark: #c5daf0;

        --icon-color: #eee;
        --editor-text: #ffffff;

        --loader-1: #AAB7C4;
        --loader-2: #B3F4FF;
        --user-1: #B3EEF9;
        --user-2: #B3EEF9;
        --user-3: #AFD4E0;

        --bg-primary: #0d1b2a;
        --bg-surface: #111f30;
        --bg-card: #152638;

        --warn:       #e2a45c;
        --warn-soft:  rgba(226, 164, 92, 0.18);
        --scrim:      rgba(0, 0, 0, 0.55);
    }
}

/* ── Body & Page ──────────────────────────────────────────── */

html {
    height: 100%;
}

body,
.body-main-page {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: var(--font-body);
    background-color: var(--off-white);
    color: var(--text-primary);
}

/* ── Background ───────────────────────────────────────────── */

.mainpagebackground {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: var(--off-white);

    /* Subtle dot grid texture */
    background-image: radial-gradient(
        circle,
        var(--border) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
}

/* ── Three-section Panel Layout ───────────────────────────── */

.sections-container {
    position: relative;
    width: 100vw;
}

.home-section {
    display: none;
    width: 100vw;
    min-height: 100vh;
    padding-top: 60px;
}

/* ── Gradient Overlays ────────────────────────────────────── */

.gradients {
    position: relative; /* or just static */
    width: 100vw;
    display: flex;
    flex-direction: row;
    margin-top: calc(27vh - 50px);
    height: 28vh;
}

.gradient {
    opacity: 0.75;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.gradient.select {
    opacity: 1;
}

.gradient-wrapper {
    flex: 1;
    position: relative;
    align-content: center;
}

.gradient, .gradient_cover {
    position: absolute;
    inset: 0;
}

.left_gradient_cover   { left: 0;                  }
.middle_gradient_cover { left: calc(100vw / 3);    }
.right_gradient_cover  { right: 0;                 }

.left_gradient {
    background: linear-gradient(to top, var(--blue-light), transparent);
}
.middle_gradient {
    background: linear-gradient(to top, var(--accent), transparent);
}
.right_gradient {
    background: linear-gradient(to top, var(--navy), transparent);
}

.left_gradient.select   { background: linear-gradient(to top, var(--blue-light), transparent); }
.middle_gradient.select { background: linear-gradient(to top, var(--accent), transparent); }
.right_gradient.select  { background: linear-gradient(to top, var(--navy), transparent); }

/* ── Scroller Labels ──────────────────────────────────────── */

.scroller {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.6vw, 22px);
    font-weight: 500;
    bottom: 11vh;
    width: calc(100vw / 3);
    text-align: center;
    z-index: 11;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    /* Scrollers ARE clickable — JS uses them to trigger the scroll-down */
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    height: 0;
    /* They sit at the bottom of the viewport, above content below the fold */
}

.left_scroller   { left: 0; }
.middle_scroller { left: calc(100vw / 3); }
.right_scroller  { right: 0; }

.scroller.unselected_scroller { opacity: 0; }

/* ── Donation Card ────────────────────────────────────────── */

.donation-card {
    max-width: 420px;
    margin: 10vh auto;
    padding: 28px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 24px var(--shadow);
    font-family: var(--font-body);
    color: var(--text-primary);
}

.donation-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--blue-deep);
}

.donation-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 20px;
}

/* ── Preset amount buttons ───────────────────────────────── */

.preset-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.amount-btn {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.amount-btn:hover {
    border-color: var(--accent);
}

.amount-btn.selected {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.amount-btn--custom {
    background-color: transparent;
    border-style: dashed;
}

/* ── Custom amount input ─────────────────────────────────── */

.custom-amount-wrapper {
    margin-bottom: 16px;
}

.custom-amount-wrapper label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.input-prefix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-surface);
    padding: 0 12px;
}

.input-prefix span {
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.input-prefix input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--editor-text);
    outline: none;
}

/* ── Fee note ─────────────────────────────────────────────── */

.fee-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 4px 0 18px;
    min-height: 1em;
}

.fee-note.below-minimum {
    color: var(--warn);
}

/* ── Payment Element container ───────────────────────────── */

.payment-element {
    margin-bottom: 18px;
}

/* ── Submit button ────────────────────────────────────────── */

.donate-submit {
    width: 100%;
    padding: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--accent-bright);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.donate-submit:hover:not(:disabled) {
    opacity: 0.92;
}

.donate-submit:active:not(:disabled) {
    transform: scale(0.98);
}

.donate-submit:disabled {
    background-color: var(--text-muted);
    cursor: not-allowed;
}

.donation-error {
    color: #c0392b;
    font-size: 0.85rem;
    margin-top: 10px;
    min-height: 1em;
}

@media (prefers-color-scheme: dark) {
    .donation-error {
        color: #ff8a80;
    }
}

/* ── Email field (guest donors) ──────────────────────────── */

.email-wrapper {
    margin-bottom: 16px;
    animation: donation-field-in 0.2s ease;
}

.email-wrapper label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.email-wrapper input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-color: var(--bg-surface);
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--editor-text);
    outline: none;
    transition: border-color 0.15s ease;
}

.email-wrapper input:focus {
    border-color: var(--accent);
}

.email-wrapper input.invalid {
    border-color: var(--warn);
}

@keyframes donation-field-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Login divider + button (guest donors) ─────────────────── */

.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.login-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--editor-text);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.login-btn:hover {
    border-color: var(--accent);
    opacity: 0.92;
}

.login-btn:active {
    transform: scale(0.98);
}

/* ── "What this supports" breakdown list ────────────────────── */

.donation-breakdown {
    margin: 4px 0 16px;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.donation-breakdown li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
}

.donation-breakdown li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--accent);
    opacity: 0.7;
}

/* Sticky variant if your JS applies it */
.scroller.sticky {
    position: fixed;
    top: 0;
    bottom: auto;
    background: var(--surface);
    padding: 10px 0;
    width: 100vw;
    text-align: center;
    z-index: 900;
    box-shadow: 0 1px 0 var(--border);
    font-size: clamp(16px, 1.8vw, 22px);
    transition: all 0.4s ease;
}

/* Swooping left scroller animation */
.left_scroller.swooping {
    z-index: 25;
    color: var(--text-primary);
    text-shadow: none;
    bottom: 0;
    width: auto;
    padding: 10px 20px;
    position: fixed;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50px;
}

@media (prefers-color-scheme: dark) {
    .left_scroller.swooping {
        background: rgba(26, 37, 53, 0.92);
    }
}

/* ── Top: Blue Band (Menu / Logo) ─────────────────────────── */

.blue_band {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    pointer-events: none;
}

.blue_band .blue-strip,
.blue_band .main-title,
.blue_band .main-logo,
.blue_band .main-logo-container {
    pointer-events: auto;
}

.blue-strip {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 17px;
    left: calc(50% - 28px);
    background-color: var(--surface);
    height: 56px;
    width: 56px;
    border-radius: 100px;
    box-shadow: 0 2px 12px var(--shadow), 0 0 0 1px var(--border);
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 50;
    cursor: pointer;
}

.blue_band:hover .blue-strip {
    top: 15px;
    left: calc(50% - 100px);
    height: 82px;
    width: 200px;
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--shadow), 0 0 0 1px var(--border);
}

/* Glow strip (dark mode only) */
.glow-band {
    display: none;
    position: fixed;
    height: 1px;
    width: 1px;
    border-radius: 50px;
    top: 45px;
    left: calc(50vw - 0.5px);
    background-color: rgba(86, 156, 214, 0.8);
    box-shadow:
        0px 0px 16px 8px rgba(86, 156, 214, 0.35),
        0px 0px 30px 20px rgba(86, 156, 214, 0.15);
    transition: all 0.45s ease;
    z-index: 49;
    pointer-events: none;
}

.blue_band:hover .glow-band {
    height: 40px;
    width: 180px;
    top: 38px;
    left: calc(50% - 90px);
}

@media (prefers-color-scheme: dark) {
    .glow-band { display: block; }

    .blue-strip {
        background-color: rgba(26, 37, 53, 0.95);
        border: 1px solid rgba(86, 156, 214, 0.2);
        box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
}

/* ── Logo & Title inside the band ────────────────────────── */

/* Logo container — collapsed: centred on the pill icon
                  — expanded: slides to where the "o" sits in "Sort.IT" */
.main-logo-container {
    position: fixed;
    /* Collapsed: sit in the centre of the 56px pill */
    top: 17px;
    left: calc(50% - 28px);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 51;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

/* Expanded: the title reads "S rt.IT" and the logo drops into the "o" gap.
   The pill is 270px wide, centred at 50%.
   Pill left edge = 50% - 135px.
   "Sort" in Space Mono at 56px ≈ first 3 chars "S r" occupy ~56px,
   so the "o" sits roughly 56–88px from the left edge of the pill.
   We position the logo at the left edge + ~56px. */
.blue_band:hover .main-logo-container {
    top: calc(22.5px + (82px - 36px) / 2); /* vertically centred in 82px pill */
    left: calc(50% - 46px);      /* left edge of pill + offset to "o" position */
    width: 36px;
    height: 36px;
}

.main-logo {
    width: 36px;
    height: 36px;
    transition: all 0.45s ease;
    pointer-events: auto;
    cursor: pointer;
}

.blue_band:hover .main-logo {
    width: 28px;
    height: 28px;
}

/* Title: "S rt.IT" — the gap where the logo sits replaces the "o".
   Use transparent-o on the "o" character in your HTML to hide it. */
.main-title {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-family: var(--font-logo);
    font-weight: 700;
    letter-spacing: -0.04em;
    visibility: hidden;
    margin: 0;
    cursor: pointer;
    z-index: 51;
    opacity: 0;
    /* Use translateX(-50%) to centre relative to left:50% */
    transform: translateX(-50%) scale(0.9);
    color: var(--blue-deep);
    top: 17px;
    left: 50%;
    width: 270px;
    height: 82px;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.blue_band:hover .main-title {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* The "o" in the title is invisible — the logo icon sits in its place */
.transparent-o {
    opacity: 0;
    /* Keep the character's width so spacing is preserved */
    display: inline-block;
}

/* ── Search Bar ───────────────────────────────────────────── */

.searchcontainer {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.search_form {
    margin-top: 45vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    width: min(60vw);
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search_form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.12);
}

.searchbar {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
}

.searchbutton {
    background-color: var(--blue-deep);
    color: var(--white);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    padding: 0 20px;
    height: 36px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.searchbutton:hover {
    background-color: var(--blue-mid);
}

@media (max-width: 900px) {
    .search_form {
        width: min(90vw);
    }
}

/* ── Black Gradient / Overlay ─────────────────────────────── */

.black-gradient {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to top, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
    z-index: 5;
}

.overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.scroll-hint {
  position: fixed;
  bottom: 30vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 40;
  pointer-events: none; /* never blocks the hover-scroll interaction underneath */
  opacity: 0;
  animation:
    hintFadeIn 1s ease forwards 1.2s,
    hintPulse 2.8s ease-in-out infinite 2.2s;
}

.scroll-hint.is-hidden {
  animation: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scroll-hint-segments {
  display: flex;
  gap: 30vw;
}

.scroll-hint-arrow {
  width: 3rem;
  height: 3rem;
  color: var(--blue-dull);
  animation: arrowBob 1.6s ease-in-out infinite;
  display: block;
}

.scroll-hint-left .scroll-hint-arrow   { animation-delay: 0s; }
.scroll-hint-middle .scroll-hint-arrow { animation-delay: 0.2s; }
.scroll-hint-right .scroll-hint-arrow  { animation-delay: 0.4s; }

@keyframes arrowBob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

.scroll-hint-text {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
}

@keyframes hintFadeIn {
  to { opacity: 1; }
}

@keyframes hintPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.05); }
}

/* ── Left Section — "Welcome / About" ─────────────────────── */

.left_section {
    background: linear-gradient(160deg, var(--blue-light) 0%, #a7c7e7 100%);
    padding-bottom: 10vh;
}

@media (prefers-color-scheme: dark) {
    .left_section {
        background: linear-gradient(180deg, var(--blue-light) 0%, #122033 100%);
    }
}

main {
    position: relative;
    z-index: 2;
}

.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem;
}

.hero-content {
    max-width: 920px;
    width: 100%;
    text-align: center;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s forwards;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent);
}

.badge span {
    font-size: 0.95rem;
    color: #d4d4d8;
}

.hero h1 {
    font-size: clamp(3.2rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
    font-weight: 750;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s 0.15s forwards;
}

.gradient-text1 {
    background: linear-gradient(#75a1d1, rgb(182, 212, 223));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text2 {
    background: linear-gradient(rgb(182, 212, 223) 25.21%, #a9efff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 760px;
    margin: 0 auto;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.8;
    color: var(--secondary);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s 0.3s forwards;
}

.scroll-indicator {
    margin-top: 5rem;
    opacity: 0;
    animation: fadeIn 1s 1s forwards;
}

.scroll-line {
    width: 1px;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: white;
    animation: scrollPulse 2.2s infinite;
}

@keyframes scrollPulse {
    to {
        transform: translateY(120px);
    }
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 32px;
    padding: 2.4rem;
    backdrop-filter: blur(var(--blur));
    transition: transform 0.5s ease, border-color 0.5s ease, background 0.5s ease;
    opacity: 0;
    transform: translateY(50px);
}

.card.visible {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
}

.card h2 {
    font-size: 1.7rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.04em;
}

.card p {
    color: var(--secondary);
    line-height: 1.9;
    font-size: 1.02rem;
}

.card ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.2rem;
}

.card li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.card li::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    opacity: 0.8;
}

.large-card {
    margin-top: 2rem;
}

.quote {
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.15;
    letter-spacing: -0.05em;
    max-width: 850px;
    margin-bottom: 2rem;
}

.quote-sub {
    max-width: 720px;
    color: var(--secondary);
    line-height: 1.9;
    font-size: 1.08rem;
}

footer {
    padding: 5rem 1.5rem;
    text-align: center;
    color: #71717a;
    font-size: 0.95rem;
}

.fade-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
    margin: 0 auto;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.logo-wordmark {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.05s forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.logo-text-left {
    background: #ABB6C2;
}
.logo-text-right {
    background: #C1F2FD;
}

.logo-text-left,
.logo-text-right {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-mark img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: translateY(1px);
    filter: drop-shadow(0 0 14px rgba(179,244,255,0.55));
}

.logo-mark img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: translateY(1px);
    -webkit-text-fill-color: initial;
    background: none;
    filter: drop-shadow(0 0 14px rgba(179,244,255,0.55));
}

.logo-mark img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(179,244,255,0.45);
    transform: translateY(1.5px) translateX(-6.5px);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    display: none
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: none;
}


@media (max-width: 900px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 2rem;
        border-radius: 24px;
    }
}

/* ==========================================================================
   MIDDLE SECTION — SCROLL SHOWCASE
   ========================================================================== */

.middle_section {
    width: 100%;
}

.showcase {
    width: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, #122033 100%)
}

.showcase-header {
    padding: 28px 24px 8px;
    position: relative;
    z-index: 2;
}

.showcase-label {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: white;
    margin: 0 0 4px;
}

.showcase-eyebrow {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Each panel is taller than the viewport so its inner content has room
   to stay pinned (sticky) while the next panel scrolls up underneath it. */
.showcase-panel {
    position: relative;
    min-height: 170vh;
    display: flex;
    justify-content: center;
}

.showcase-panel-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 40px 24px;
    box-sizing: border-box;

    opacity: 0;
    transform: translateY(40px) scale(0.92);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.showcase-panel.is-active .showcase-panel-inner {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Alternate image/text order for visual rhythm */
.showcase-panel--reverse .showcase-panel-inner {
    flex-direction: column-reverse;
}

.showcase-visual {
    width: 100%;
    will-change: transform;
    justify-content: center;
    display: flex;
}

.showcase-image-frame {
    width: 50%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px var(--shadow);
    border: 1px solid var(--border);
}

.showcase-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showcase-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    background: repeating-linear-gradient(
        45deg,
        var(--off-white),
        var(--off-white) 10px,
        var(--bg-card) 10px,
        var(--bg-card) 20px
    );
}

.showcase-image-placeholder span {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.showcase-copy {
    max-width: 340px;
    text-align: center;
}

.showcase-tag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.showcase-tag--search    { background: var(--blue-pale); color: var(--blue-mid); }
.showcase-tag--verified  { background: var(--accent); color: var(--white); }
.showcase-tag--editor    { background: var(--off-white); color: var(--text-secondary); border: 1px solid var(--border); }
.showcase-tag--business  { background: var(--blue-deep); color: var(--white); }
.showcase-tag--vision    { background: var(--warn-soft); color: var(--warn); }

.showcase-copy h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.showcase-copy p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-on-dark);
    margin: 0;
}

/* Finale panel — no image, just a centered closing statement + CTA */
.showcase-panel--finale .showcase-panel-inner {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.showcase-panel-inner--finale {
    max-width: 360px;
}

.showcase-cta {
    display: inline-block;
    margin-top: 20px;
    padding: 1rem 1.4rem;
    border-radius: 14px;
    background: #B3F4FF;
    color: #050505;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.showcase-cta:hover {
    transform: translateY(-2px);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .showcase-panel-inner {
        transition: none;
        transform: none;
        opacity: 1;
    }
    .showcase-visual {
        transform: none !important;
    }
}

/* ── Right Section — Dark / Community ─────────────────────── */

.right_section {
    background: linear-gradient(var(--navy) 0%, #04101d 100%);
}

.biz-section {
    padding: 4rem 0;
}

.biz-inner {
    max-width: 70vw;
    margin: 0 auto;
    padding: 0 2rem;
}

.biz-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 2.5rem;
}

.biz-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.25rem;
}

.biz-eyebrow {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 0.75rem;
}

.biz-headline {
    font-size: 4rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 1rem;
    line-height: 1.3;
}

.biz-sub {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.75;
    max-width: 540px;
    margin: 0 0 2.5rem;
}

.biz-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2.5rem;
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.biz-feature {
    background: #0a0a0a;
    padding: 1.75rem 1.5rem;
    transition: background 0.2s ease;
}

.biz-feature:hover {
    background: #111111;
}

.biz-feature-icon {
    margin-bottom: 0.85rem;
    opacity: 0.6;
    height: 40px;
    width: auto;
}

.biz-feature-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.biz-feature-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.65;
    margin: 0;
}

.biz-bottom {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.biz-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 1.5rem;
    background: #ffffff;
    color: #050505;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.biz-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.biz-cta:active {
    transform: translateY(0);
    opacity: 1;
}

.biz-note {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
}

@media (max-width: 600px) {
    .biz-inner {
        max-width: 85vw;
    }

    .biz-headline {
        font-size: 1.5rem;
    }

    .biz-features {
        grid-template-columns: 1fr;
    }

    .biz-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ── Walkthrough overlay ───────────────────────────────────── */

.walkthrough {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}

/* ── Eyedropper cursor ────────────────────────────────────── */

.dropper-active,
.dropper-active * {
    cursor: url("/images/create-page-logos/eyedropper-cursor.svg") 16 16, crosshair !important;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .left_section_box {
        padding: 32px 22px;
    }

    .left_section_box h1 {
        font-size: 26px;
    }

    .features {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .scroller {
        font-size: 14px;
    }

    .chat-input-container {
        flex-direction: column;
    }

    .send-chat-button {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .features {
        grid-template-columns: 1fr;
    }
}
  
/* about me */

.about-me-body {
    height: 100%;
}

.falling-layer{
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    perspective: 900px;
    transform-style: preserve-3d;
}

.cube{
    position: absolute;
    top: -320px;
    width: var(--s);
    height: var(--s);
    transform-style: preserve-3d;

    /* give it a starting 3D pose */
    transform:
        translate3d(0, -160px, var(--z))
        rotateX(var(--rx))
        rotateY(var(--ry))
        rotateZ(var(--rz));

    animation: cubeFall var(--dur) linear forwards;
}

.cube .face{
    position: absolute;
    inset: 0;
    border-radius: 2px;
    opacity: var(--o);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    border: 1px solid rgba(255,255,255,0.14);
    will-change: transform;
}

/* Slightly different tints per face helps the 3D read */
.cube .face.front  { background: rgba(40, 110, 220, 1); }
.cube .face.back   { background: rgba(20, 60, 160, 1); }
.cube .face.right  { background: rgba(20, 80, 180, 1); }
.cube .face.left   { background: rgba(20, 70, 160, 1); }
.cube .face.top    { background: rgb(124, 174, 255); }
.cube .face.bottom { background: rgba(10, 30, 90, 1); }

/* Position faces: depth = half size */
.cube .face.front  { transform: translateZ(calc(var(--h) + 0.1px)); }
.cube .face.back   { transform: rotateY(180deg) translateZ(calc(var(--h) + 0.1px)); }
.cube .face.right  { transform: rotateY( 90deg) translateZ(calc(var(--h) + 0.1px)); }
.cube .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--h) + 0.1px)); }
.cube .face.top    { transform: rotateX( 90deg) translateZ(calc(var(--h) + 0.1px)); }
.cube .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) + 0.1px)); }

@keyframes cubeFall{
    to{
        transform:
        translate3d(
            var(--drift),
            calc(100vh + 620px),
            var(--z)
        )
        rotateX(var(--rx))
        rotateY(var(--ry))
        rotateZ(calc(var(--rz) + 40deg));
    }
}

.falling-block{
    position: absolute;
    top: -120px;
    width: var(--size);
    height: var(--size);
    border-radius: 14px;

    /* faux-3D face */
    background: linear-gradient(145deg,
        rgba(255,255,255,0.45),
        rgba(20,60,160,0.55)
    );

    opacity: var(--opacity);
    box-shadow:
        0 22px 60px rgba(20,60,160,0.20),
        inset 0 0 0 1px rgba(255,255,255,0.28);

    transform-style: preserve-3d;

    /* rotation + depth */
    transform:
        translate3d(0,0,var(--z))
        rotateX(var(--rx))
        rotateY(var(--ry))
        rotateZ(var(--rot));

    animation: fall3d var(--dur) linear forwards;
    filter: blur(0.6px);
}

@keyframes fall3d{
    to{
        transform:
        translate3d(var(--drift), calc(100vh + 180px), var(--z))
        rotateX(var(--rx))
        rotateY(var(--ry))
        rotateZ(calc(var(--rot) + 35deg));
    }
}

.about-me-image-float{
    float: right;                 /* or left */
    width: min(260px, 40%);
    height: auto;

    margin: 0.2rem 0 1rem 1.5rem; /* top right bottom left */
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

.about-me-section{
    position: relative;
    z-index: 2;
    max-width: 60vw;
    margin: 6rem auto;
    padding: 2.2rem;
    font-family: Arial, Helvetica, sans-serif;

    background: rgba(255,255,255,0.35);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
    backdrop-filter: blur(10px) saturate(1.25);

    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 14px 40px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.35);
}

.about-me-section::after{
    content: "";
    display: block;
    clear: both;
}

.about-me-section p{
    margin: 0;
    line-height: 1.65;
}

.about-me-section p + .about-me-divider{
    margin: 1.25rem 0;
}

.about-me-divider{
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.10), transparent);
}

.cursor-glow{
    position: fixed;
    top: 0; left: 0;

    width: 100px;            /* smaller radius */
    height: 100px;

    background: radial-gradient(circle,
        rgba(20, 60, 160, 0.35) 0%,
        rgba(20, 60, 160, 0.18) 35%,
        rgba(20, 60, 160, 0.06) 60%,
        transparent 72%
    );

    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 1;              /* behind the glass section */
    filter: blur(10px);
}

.about-me-title {
    font-size: 3rem;
    letter-spacing: -0.02em;
    text-align: center;
}

.about-me-image {
    display: block;
    margin: 0 auto 1.5rem 10px;
}

.about-me-divider {
    max-width: 800px;
    margin: 1.25rem auto;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
    overflow: hidden;
}

.about-me-para::after { content: none; }

.about-me-para1::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #8EC9FF;
    border-radius: 2px;
    margin-top: 0.8rem;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* mobile: disable wrapping */
@media (max-width: 720px){
    .about-me-image-float{
        float: none;
        display: block;
        width: 100%;
        max-width: 360px;
        margin: 0 auto 1.2rem;
    }

    .about-me-section {
        max-width: 90vw;
    }
}

.about-me-para {
    transition: transform 180ms ease, box-shadow 180ms ease;
}

/* help page */
  
.help-window {
    display: none;
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.help-window.open {
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.help-window.open .overlay {
    opacity: 1;
    visibility: visible;
}

.help-content {
    position: absolute;
    z-index: 20;
    top: 25vh;
    left: 25vw;
    background-color: #fff;
    width: 50vw;
    height: 50vh;
    padding: 20px;
}

.closeHelpBtn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
  
/* walkthrough */
  
.walkthrough-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: transform 0.5s;
    z-index: 1;
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: rgb(255, 210, 29);
}

/* survey page */

.surveybackground {
    height: 100vw;
    position: fixed;
    z-index: -1;
}

.surveytext {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 40px;
    position: relative; /* Make the container relative for positioning */
    width: 100vw; /* Full width */
    text-align: center;
}
    
.surveymaintitle {
    position: relative;
    font-size: 100px;
}

.surveyexplanation {
    margin-top: 50px; /* Move the paragraph below the title by adding some margin (adjust the value as needed) */
    margin-left: 10%; /* Align the paragraph to the left edge of the container */
    width: 80%; /* Make the paragraph span the full width of the container */
    text-align: left;
    font-size: 25px;
}

.surveyconclusion {
    margin-top: 50px; /* Move the paragraph below the title by adding some margin (adjust the value as needed) */
    margin-left: 10%; /* Align the paragraph to the left edge of the container */
    width: 80%; /* Make the paragraph span the full width of the container */
    text-align: left;
    font-size: 25px;
}

.surveyintroduction {
    margin-top: 50px; /* Move the paragraph below the title by adding some margin (adjust the value as needed) */
    margin-left: 10%; /* Align the paragraph to the left edge of the container */
    width: 80%; /* Make the paragraph span the full width of the container */
    text-align: left;
    font-size: 25px;
}

.surveybox {
    height: 3800px;
    width: 80vw;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 10vw;
    background-color: white;
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);   
    padding-top: 1px;
}

.survey_response_text {
    width: 90%;
    margin-left: 5%;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    position: relative;
    margin-top: 10px;
}

.survey_section {
    margin-top: 50px;
}

.survey_question {
    text-align: left;
    font-size: 25px; 
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 80%;
    margin-left: 5%;
}

.survey_response {
    margin-left: 7%; 
}
    
.survey_response_label {
    margin-top: 50px; /* Move the paragraph below the title by adding some margin (adjust the value as needed) */
    width: 80%; /* Make the paragraph span the full width of the container */
    text-align: left;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.survey_submit {
    background-color: rgb(128, 128, 128);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 25px;
    margin-left: 50%;
    transform: translate(-50%);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 25px;
}

@media (max-width: 500px) {
    .surveymaintitle {
        font-size: 70px; 
    }
    
    .surveybox {
        width: 350px;
        margin-left: calc(50vw - 175px);
    }
}
    
/* thanks page */
    
.thanks {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 40px;
    position: relative; /* Make the container relative for positioning */
    width: 100vw; /* Full width */
    text-align: center;
    position: absolute;
    left: 50%;
    font-size: 50px;
    transform: translate(-50%);
}

.return_welcome {
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;    
    text-decoration: none;
    color: black;  
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 120px;
}

/* ── Search page ── */

.search-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.search-loader-mark {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.search-loader--fading {
    opacity: 0;
}

.search-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.search-loader-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.search-loader-dots {
    display: flex;
    gap: 6px;
}

.search-loader-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--accent);
    animation: dotPulse 1.2s ease-in-out infinite;
}

.search-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.search-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
    40%            { opacity: 1;   transform: scale(1); }
}

.search_page_backdrop {
    background-color: var(--off-white);
    width: 100vw;
    position: absolute;
    z-index: 0;
    top: 0;
}

.searchcontainer-search {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.search_form-search {
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 6px 6px 20px;
    width: min(60vw);
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search_form-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.12);
}

.searchbar-search {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
}

.searchbar-search::placeholder {
    color: var(--text-muted);
}

.searchbutton-search {
    background-color: var(--blue-deep);
    color: var(--white);
    border: none;
    border-radius: 40px;
    cursor: pointer;
    padding: 0 20px;
    height: 36px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.15s;
}

.searchbutton-search:hover {
    background-color: var(--blue-mid);
}

/* ── Filter bar ── */

.filter_options {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
    width: min(60vw);
    margin-left: auto;
    margin-right: auto;
}

.filter_options label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.OSFilter,
.DeviceFilter, 
.SoftwareFilter,
.HardwareFilter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 130px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s;
}

.OSFilter:focus,
.DeviceFilter:focus, 
.SoftwareFilter:focus,
.HardwareFilter:focus {
    outline: none;
    border-color: var(--accent);
}

.clear-filters-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.clear-filters-btn:hover {
    background-color: var(--blue-pale);
    color: var(--text-primary);
}

/* ── Results list ── */

.searchresultscontainer {
    position: relative;
    z-index: 5;
    width: min(60vw);
    min-height: 300px;
    margin: 0 auto;
    margin-top: 8px;
}

.search-results-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 50px;
}

.search-list-element {
    padding: 1.1rem 1.25rem;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid rgba(0, 48, 73, 0.08);
    box-shadow: 0 2px 8px rgba(0, 48, 73, 0.07), 0 1px 2px rgba(0, 48, 73, 0.05);
    cursor: pointer;
    font-family: var(--font-body);
    transition: box-shadow 0.2s, transform 0.2s;

    /* animation initial state */
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.search-list-element:hover {
    box-shadow: 0 6px 20px rgba(0, 48, 73, 0.12), 0 2px 6px rgba(0, 48, 73, 0.07);
    transform: translateY(-2px);
}

.result-title-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
}

.result-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-link {
    font-weight: 500;
    font-size: 24px;
    color: var(--blue-mid);
    text-decoration: none;
}

.search-link:hover {
    text-decoration: underline;
}

.verify-icon--meta {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
    color: var(--icon-color);
}

.content-snippet {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 6px 0;
    max-width: 620px;
}

.upload-date {
    font-size: 11.5px;
    color: var(--text-muted);
}

.search_result {
    color: var(--text-primary);
    font-family: var(--font-body);
}

.results-status-message {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2rem 0;
    text-align: center;
}

.results-status-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text); /* or whatever your main text var is */
}

.results-status-sub {
    font-size: 0.875rem;
    color: var(--secondary-text); /* muted */
}

@media (max-width: 768px) {
    .search_form-search {
        width: calc(100vw - 32px);
        margin-top: 120px;
        padding: 6px 6px 6px 16px;
    }

    .filter_options {
        width: calc(100vw - 32px);
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter_options label {
        margin-left: 0 !important;
        margin-bottom: 2px;
    }

    .OSFilter,
    .DeviceFilter,
    .SoftwareFilter {
        width: 100%;
        min-width: unset;
    }

    .clear-filters-btn {
        width: 100%;
        text-align: center;
        margin-top: 4px;
    }

    .searchresultscontainer {
        width: calc(100vw - 32px);
        margin-bottom: 50px;
    }

    .search-link {
        font-size: 18px;
    }

    .content-snippet {
        max-width: 100%;
    }

    .search_page_backdrop {
        position: fixed;
    }
}

/* ── Page layout ── */

.page_result_backdrop {
    background-color: var(--off-white);
    min-height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
}

.results-page {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: 15vw 60vw 15vw;
    grid-template-rows: auto;
    column-gap: 32px;
    justify-content: center;
    padding-top: 100px;
    box-sizing: border-box;
}

.page_result_backdrop {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.quick-info {
    display: none;
}

.outline-container {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.page-container {
    grid-column: 2;
    grid-row: 1;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow), 0 1px 3px rgba(0, 48, 73, 0.04);
    padding: 48px 52px;
    width: 60vw;
    margin: 0;
    box-sizing: border-box;
    z-index: 5;
}

.creator-details {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (max-width: 768px) {
    .results-page {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 16px;
        padding-top: 100px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .outline-container {
        grid-column: 1;
        grid-row: 1;
        position: static;
        max-height: none;
    }

    .page-container {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        padding: 24px 20px;
    }

    .creator-details {
        grid-column: 1;
        grid-row: 3;
        position: static;
    }
}

.login-required-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 20px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1f1f1f;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}
.login-required-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.login-required-toast-link {
    color: #6db8ff;
    font-weight: 600;
    text-decoration: underline;
}
.login-required-toast-close {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 4px;
}

/* ── Donation nudge banner ───────────────────────────────── */

.donation-banner {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1000;
    width: 300px;
    max-width: calc(100vw - 32px);
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.donation-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.donation-banner-progress {
    height: 4px;
    background-color: var(--accent-bright);
    width: 100%;
    transform: scaleX(1);
    transform-origin: left;
}

.donation-banner.is-visible .donation-banner-progress {
    animation: donation-banner-countdown 10s linear forwards;
}

.donation-banner-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
}

.donation-banner-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--editor-text);
    flex: 1;
}

.donation-banner-text a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
}

.donation-banner-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    cursor: pointer;
    /* keep the close button above the click-through so it stays its own target */
    position: relative;
    z-index: 1;
}

.donation-banner-close:hover {
    color: var(--editor-text);
}

@keyframes donation-banner-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

@media (max-width: 480px) {
    .donation-banner {
        left: 8px;
        top: 8px;
    }
}

/*
 * page-result-mobile-fix.css
 *
 * Fixes oversized-looking photos on the read-only page display
 * (.page_result) on phones. Merge into the existing
 * `@media (max-width: 768px) { ... }` block in this stylesheet (the one
 * that already resizes .results-page / .outline-container / .page-container
 * / .creator-details), or drop this in as its own block — either is fine.
 *
 * ROOT CAUSE: left/right-aligned images are floated and sized in the
 * editor as a fraction of the *editor's own width* (see .setAlign in
 * create.js — roughly 42% of the editing screen), and that exact pixel
 * value is what gets saved as an inline `style="width:...px"` on the
 * image. This stylesheet never un-floats those on mobile, so a photo that
 * was a modest inset alongside text on an ~800px-wide desktop editor ends
 * up close to the *entire* width of a ~320-360px phone screen — same
 * pixel count, very different proportion of the screen. Because it's
 * still floating, there's no room left to actually wrap text next to it
 * either, so it reads as one big photo shoved against a paragraph rather
 * than a neat inset.
 *
 * FIX: below the same breakpoint you already use elsewhere, un-float
 * these images so they stack as normal centered blocks — same treatment
 * center-aligned images already get, and which never had this problem.
 */

@media (max-width: 768px) {

    /*
     * ---------------------------------------------------------------------
     * THE MAIN FIX — everything (not just photos) reading too wide on
     * phone: .page-container, .outline-container, and .creator-details are
     * all CSS Grid items (children of .results-page, which is
     * display:grid). Grid items get an invisible default `min-width:auto`,
     * which resolves to whatever their content's own minimum width is —
     * and that silently wins over a smaller explicit `width`, including
     * `width:100%` below. If anything inside (a wide fixed-size element, an
     * unbroken long word/URL, etc.) wants more room than the phone screen
     * has, the grid COLUMN itself gets stretched to fit that content
     * first — so `width:100%` ends up meaning "100% of an already-too-wide
     * column," and the whole thing overflows the viewport.
     *
     * This is why removing `width:100%` seemed to "fix" it: it changed
     * the sizing path enough to stop the overflow, but at the cost of no
     * longer actually filling the column. `min-width:0` removes that
     * invisible content-based floor so `width:100%` can keep meaning 100%
     * of the actual screen, while anything overflowing inside gets handled
     * by its own max-width/wrapping rules instead of dragging the whole
     * column wider. This is the standard fix for this exact Grid/Flexbox
     * behavior — should let you keep width:100% on .page-container below
     * and have it actually fit.
     * ---------------------------------------------------------------------
     */
    .page-container,
    .outline-container,
    .creator-details {
        min-width: 0;
    }

    .page_result .block.image[data-align="left"],
    .page_result .block.image[data-align="right"] {
        float: none;
        margin: 4px 0 1.1rem;
    }

}

/*
 * ---------------------------------------------------------------------
 * Separate, proactive fix while we're in here: this stylesheet predates
 * the multi-image "grid" feature added to the editor, so it has no rule
 * at all for `.img-grid` (the flex container that holds 2+ photos placed
 * together in one spot). Without this, a grid block would render its
 * cells as plain stacked/inline elements with no wrapping row layout —
 * on any screen size, not just phones, but worth including here since
 * it's the same "photos looking wrong" family of bug. Safe to add
 * regardless of whether you've used grid mode on this page yet.
 * ---------------------------------------------------------------------
 */

.page_result .img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.page_result .block.image[data-align="left"] .img-grid   { justify-content: flex-start; }
.page_result .block.image[data-align="center"] .img-grid { justify-content: center; }
.page_result .block.image[data-align="right"] .img-grid  { justify-content: flex-end; }

/*
 * ---------------------------------------------------------------------
 * THE ACTUAL FIX for the grid photos looking huge on phone: on its own,
 * `display:flex` above isn't enough. Each `.img-wrap` cell carries an
 * inline `style="width:...px"` saved from the editor (e.g. two photos at
 * ~337px each, meant to sit side by side in an ~800px-wide desktop
 * editor). Flexbox decides whether items fit a line using THAT saved
 * width, capped only by max-width:100% of the whole mobile column — not
 * divided between siblings. Two 300-ish-px-capped images can't both fit
 * a ~300px-wide phone screen, so they wrap onto separate lines instead of
 * sharing one — meaning "two photos side by side" renders as two large
 * photos stacked on top of each other, each nearly filling the screen.
 *
 * Below the breakpoint, this makes every cell in a grid ignore its saved
 * pixel width and instead take an equal share of the row (flex-basis:0
 * + flex-grow:1 on every cell = N cells divide the row evenly, same as a
 * real grid). `width: auto !important` is required specifically to beat
 * the inline style — normal stylesheet rules can't override an inline
 * `style="width:...”` attribute on the same property without it.
 * ---------------------------------------------------------------------
 */
@media (max-width: 768px) {
    .page_result .img-grid {
        gap: 6px;
    }

    .page_result .img-grid .img-wrap {
        width: auto !important;
        flex: 1 1 0;
        min-width: 0; /* flex items default to min-width:auto, which blocks shrinking below their content size — this lets them actually divide the row */
    }
}

/* Belt-and-braces alongside the drag-handle/align-toolbar/resize-handle/
   block-delete rule already in this stylesheet — the crop button is
   already stripped out at save time in create.js, so this shouldn't
   normally be needed, but costs nothing to also hide defensively here in
   case any page was saved before that cleanup existed. */
.page_result .crop-btn,
.page_result .crop-overlay {
    display: none !important;
}

/* ── Outline ── */

.outline-header {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.outline-item {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
}

.outline-item:hover {
    background-color: var(--blue-pale);
    color: var(--blue-mid);
}

.outline-item.active {
    background-color: var(--blue-pale);
    color: var(--blue-deep);
    font-weight: 500;
}

.outline-item[data-level="1"] { font-weight: 500; }
.outline-item[data-level="2"] { padding-left: 18px; opacity: 0.95; }
.outline-item[data-level="3"] { padding-left: 30px; opacity: 0.85; font-size: 12px; }

/* ── Article content ── */

.page_result {
    font-family: var(--font-body);
    color: var(--editor-text);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.page_result .block {
    scroll-margin-top: 90px;
}

.page_result img {
  pointer-events: none; 
}

.page_result h1 {
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.page_result h2 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 2rem 0 0.75rem;
    scroll-margin-top: 90px;
}

.page_result h3 {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.5rem;
    scroll-margin-top: 90px;
}

.page_result p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
}

.page_result ol,
.page_result ul {
    padding-left: 20px;
    margin-bottom: 1rem;
}

.page_result li {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.page_result code {
    background-color: var(--blue-pale);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 13.5px;
    color: var(--blue-deep);
    font-family: var(--font-display);
}

/* ── Image blocks (saved from the create editor) ── */
.page_result .drag-handle,
.page_result .align-toolbar,
.page_result .resize-handle,
.page_result .block-delete {
    display: none !important;
}

.page_result .block.image {
    padding: 8px 0;
    text-align: center;
    margin-bottom: 1.1rem;
}

.page_result .block.image[data-align="left"],
.page_result .block.image[data-align="right"] {
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative;
    z-index: 1;
}

.page_result .block.image[data-align="left"] {
    float: left;
    margin: 4px 20px 10px 0;
}

.page_result .block.image[data-align="right"] {
    float: right;
    margin: 4px 0 10px 20px;
}

.page_result::after {
    content: "";
    display: table;
    clear: both;
}

.page_result .img-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.page_result .img-wrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.page_result .caption {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted, #888);
    text-align: center;
}

.page_result .caption:empty {
    display: none;
}

.page-compat-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 60vw;         /* match .page-container's width if it differs */
    margin: 0 auto 20px;
    padding: 14px 18px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0dc);
    border-radius: 12px;
    box-shadow: 0 2px 12px var(--shadow), 0 1px 3px rgba(0, 48, 73, 0.04);
}

.compat-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.compat-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #999);
    margin-right: 2px;
}

/* read-only pill — no remove button, so padding is symmetric unlike .tag's default */
.tag.static-tag {
    padding: 3px 10px;
    cursor: default;
}

@media (max-width: 768px) {
    .page-compat-tags {
        max-width: 100%;
        margin-left: 12px;
        margin-right: 12px;
        padding: 12px 14px;
    }
}

/* ── Right sidebar cards ── */

.user-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px var(--shadow);
    font-family: var(--font-body);
}

.user-section p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.creator-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

#likeBtn,
#dislikeBtn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: 6px;
    transition: background-color 0.15s, color 0.15s;
}

#likeBtn:hover,
#dislikeBtn:hover {
    background-color: var(--blue-pale);
    color: var(--text-primary);
}

.reaction-active {
    color: var(--accent-bright, #2563eb);
    font-weight: 600;
}

.question-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px var(--shadow);
    font-family: var(--font-body);
}

.question-box h3 {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.question-box textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--off-white);
    resize: none;
    outline: none;
    margin-bottom: 8px;
    line-height: 1.5;
    transition: border-color 0.15s, background-color 0.15s;
    box-sizing: border-box;
}

.question-box textarea:focus {
    border-color: var(--accent);
    background-color: var(--surface);
}

#sendQuestionBtn {
    width: 100%;
    background-color: var(--blue-deep);
    color: var(--text-on-dark);
    border: none;
    border-radius: 8px;
    padding: 9px;
    font-size: 13px;
    font-family: var(--font-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

#sendQuestionBtn:hover {
    background-color: var(--blue-mid);
}

.footer-info {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px var(--shadow);
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.footer-info p {
    margin-bottom: 6px;
}

.footer-info p:last-child {
    margin-bottom: 0;
}

.verification-logo {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
}

/* ── Report button ── */

#reportBtn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-muted);
    cursor: pointer;
    margin-right: 6px;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

#reportBtn:hover {
    background-color: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.3);
    color: #dc2626;
}

/* ── Report modal overlay ── */

.report-window {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 48, 73, 0.55);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.report-window.active {
    display: flex;
}

.report-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow);
}

/* ── Accent bar ── */

.report-content .fb-accent-bar {
    background: linear-gradient(90deg, #dc2626, rgba(220, 38, 38, 0.3) 60%, transparent);
}

/* ── Header ── */

.report-content .fb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.report-content .fb-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #dc2626;
    margin: 0;
}

.closeReportBtn {
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s;
}

.closeReportBtn:hover {
    color: var(--text-primary);
}

/* ── Form body ── */

.report-content .fb-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-content input.fb-select {
    height: 40px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 12px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.report-content input.fb-select:focus {
    border-color: var(--accent);
}

/* ── Footer ── */

.report-content .fb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

.report-content .fb-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
}

.report-content .fb-submit {
    background: #dc2626;
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.report-content .fb-submit:hover {
    background: #b91c1c;
}

.report-content .fb-submit:active {
    transform: scale(0.98);
}

/* ── Success state ── */

.report-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 22px;
    text-align: center;
}

.report-success .ti-circle-check {
    font-size: 40px;
    color: #dc2626;
}

.report-success .feedback-success-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #dc2626;
    margin: 0;
}

.report-success .feedback-success-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================================
   LOGIN + SIGNUP PAGES — Sort IT
   Drop-in replacement for the old login/signup CSS blocks in sort.it.css.
   All colours, fonts, and spacing come from the :root token set.
   ========================================================================== */

/* ==========================================================================
   SHARED — background and page shell
   ========================================================================== */

.body-login,
.body-signup {
  min-height: 100vh;
  margin: 0;
  background: var(--bg-primary);
  font-family: var(--font-body);
  color: var(--text-primary);
}

.loginbackground,
.signupbackground {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-primary);
}

/* Shared input style — every text/email/password field on both pages */
.usernamebox,
.passwordbox,
.newnamebox,
.newsurnamebox,
.newusernamebox,
.newemailbox,
.newpasswordbox,
.confirmnewpasswordbox {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  transition: border-color 0.15s ease;
}

.usernamebox:focus,
.passwordbox:focus,
.newnamebox:focus,
.newsurnamebox:focus,
.newusernamebox:focus,
.newemailbox:focus,
.newpasswordbox:focus,
.confirmnewpasswordbox:focus {
  outline: none;
  border-color: var(--accent);
}

/* Shared primary button */
.loginbutton,
.signupbutton {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 20px;
}

.loginbutton:hover,
.signupbutton:hover {
  background: var(--accent-bright);
}

/* Shared error text */
.error-message10,
.error-message11,
.error-message12,
.error-message13,
.error-message2,
.error-message4 {
  font-family: var(--font-body);
  font-size: 13px;
  color: #c0392b;
  display: none;
  margin: 4px 0;
}

.error-message11 a,
.error-message12 a,
.error-message4 a {
  color: #c0392b;
  text-decoration: underline;
}

.reset-link4 {
  font-family: var(--font-body);
  color: var(--accent);
  text-decoration: none;
}

/* Empty-field highlight */
.empty {
  border: 1.5px solid #c0392b !important;
  background: #fdf2f2;
}

@media (prefers-color-scheme: dark) {
  .empty {
    border: 1.5px solid #e57373 !important;
    background: rgba(192, 57, 43, 0.18);
  }
}

/* ==========================================================================
   LOGIN PAGE
   Two-column layout: brand/tagline on the left, card on the right.
   Breakpoints:
     ≥ 1024px  — side-by-side, wide gutters
     768–1023px — side-by-side, tighter gutters (tablet landscape)
     < 768px   — single column, card centred
   ========================================================================== */

/* ── Page shell ────────────────────────────────────────────────────────── */

.body-login {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
    background: var(--bg-primary);
}

.login-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    padding: 60px clamp(24px, 15vw, 15vw);
    gap: clamp(32px, 4vw, 80px);
}

/* ── Left column — brand stamp ─────────────────────────────────────────── */

.main-title-container {
    flex: 1 1 0;
    min-width: 0;                /* prevent flex blowout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

/* The large wordmark */
.loginmaintitle {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 700;
    color: var(--blue-deep);
    cursor: pointer;
    line-height: 1;
    margin: 0;
}

/* Hollow O effect — letter itself is transparent, border supplied by stroke */
.transparent-o {
    color: transparent;
    -webkit-text-stroke: 2px var(--blue-deep);
}

@media (prefers-color-scheme: dark) {
    .transparent-o {
        -webkit-text-stroke-color: var(--blue-deep);
    }
}

/*
 * Logo sitting over the hollow O.
 * Use relative units derived from the title font-size so it scales correctly.
 * The exact offset still depends on your markup — adjust --logo-offset-* as needed.
 */
.logo-wordmark-wrapper {
    position: relative;
    display: inline-block;  /* wraps tightly around the title text */
    line-height: 1;
}

.login-page-logo {
    position: relative;
    height: 50px;
    width: 50px;          
    cursor: pointer;
    z-index: 10;
    /* Position relative to the O in your specific wordmark.
       Tune these two custom props per your layout — they're the only
       values you should need to touch. */
    bottom: 129px;
    left: 64px;
}

.welcome-text-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Tagline / sub-copy beneath the logo */
.welcome-login-text {
    font-family: 'Pacifico', cursive;
    font-size: clamp(20px, 80vw, 100px);
    color: var(--blue-deep);
    margin: 0;
    pointer-events: none;
    position: relative;
}

.text2 {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--text-secondary);
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}

/* ── Right column — login card ─────────────────────────────────────────── */

.right-panel {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginbox {
    position: relative;
    width: clamp(300px, 30vw, 440px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--shadow);
    border: 1px solid var(--border);
}

/* Leftover from old design — hidden */
.glow-box { display: none; }

.logintitle {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 24px;
    align-self: flex-start;
    width: 100%;
}

/* Username input */
.loginbox .usernamebox {
    width: 100%;
    margin-bottom: 12px;
}

/* Password row */
.login-password-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 6px;
}

.login-password-wrapper .passwordbox {
    width: 100%;
    padding-right: 48px;
    box-sizing: border-box;
}

.login-password-wrapper span:last-child {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.viewlogo-login {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    cursor: pointer;
    display: block;
}

/* Error messages — hidden by default, shown by JS */
.error-message10,
.error-message11,
.error-message12 {
    display: none;
    width: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    border-radius: 6px;
    padding: 8px 12px;
    box-sizing: border-box;
    margin-top: 4px;
}

/* Generic "wrong credentials" */
.error-message10 {
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error-text);
}

/* Reset-password prompt */
.error-message11 {
    background: var(--warn-soft);
    border: 1px solid rgba(184, 107, 31, 0.25);
    color: var(--warn);
}

.error-message11 .reset-link4 {
    color: var(--warn);
    font-weight: 600;
    text-decoration: underline;
}

/* Verify-email prompt */
.error-message12 {
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error-text);
}

.error-message12 .reset-link5 {
    color: var(--status-error-text);
    font-weight: 600;
    text-decoration: underline;
}

/* Remember me */
.remember-me-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    align-self: flex-start;
}

.remember-me {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
}

/* Sign-up link */
.signuprbutton {
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    width: 100%;
    padding: 20px;
}

.signuprbutton a {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.terms-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0;
    font-size: 0.85rem;
}

.terms-wrapper input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.terms-label a {
    color: inherit;
    text-decoration: underline;
}

#error-message-terms {
    display: none;
}

/* ── Tablet landscape: 768–1023px ──────────────────────────────────────── */

@media (max-width: 1023px) {
    .login-layout {
        padding: 40px clamp(20px, 4vw, 48px);
        gap: clamp(24px, 3vw, 40px);
    }

    .loginbox {
        width: clamp(280px, 42vw, 400px);
    }

    .text2 {
        max-width: 320px;
    }
}

/* ── Mobile: < 768px — single column ──────────────────────────────────── */

@media (max-width: 767px) {
    .body-login {
        align-items: center;
        flex-direction: column;
    }

    .login-layout {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: unset;
        padding: 5vh 20px 60px;
        gap: 28px;
    }

    /* Collapse the left panel to a compact centred header */
    .main-title-container {
        flex: none;
        align-items: center;
        text-align: center;
        gap: 10px;
        width: 100%;
    }

    .login-page-logo {
        position: relative;
        height: 25px;
        width: 25px;
        top: -73px;
        left: -58px;
    }

    .loginmaintitle {
        font-size: clamp(40px, 12vw, 64px);
    }

    .welcome-login-text {
        font-size: clamp(16px, 80vw, 50px);
        margin-top: 15px;
        position: relative;
    }

    .text2 {
        font-size: 14px;
        text-align: center;
        max-width: 100%;
    }

    /* Card goes full width up to a comfortable max */
    .right-panel {
        width: 100%;
        justify-content: center;
    }

    .loginbox {
        width: 100%;
        max-width: 420px;
        padding: 32px 24px;
    }

    .logintitle {
        font-size: 22px;
        align-self: center;
        text-align: center;
        margin-bottom: 20px;
    }

    .remember-me-container {
        align-self: center;
    }


    .welcome-text-box {
        position: relative;
    }
}

/* ==========================================================================
   SIGNUP PAGE
   Centered card with tighter vertical rhythm.
   ========================================================================== */

.signup-layout {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    min-height: 100vh;
    padding: 60px clamp(24px, 15vw, 15vw);
    gap: clamp(32px, 4vw, 80px);
}

.signupbox-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.signupbox {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px var(--shadow);
  padding: 48px 52px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.glow-box-signup {
  display: none; /* replaced by box-shadow */
}

.signupmaintitle {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 700;
    color: var(--blue-deep);
    cursor: pointer;
    line-height: 1;
    margin: 0;
}

.signup-page-logo {
    position: relative;
    height: 50px;
    width: 50px;          
    cursor: pointer;
    z-index: 10;
    /* Position relative to the O in your specific wordmark.
       Tune these two custom props per your layout — they're the only
       values you should need to touch. */
    bottom: 129px;
    left: 64px;
}

/* All signup inputs share the common style above;
   these just override width inside the card */
.newnamebox,
.newsurnamebox,
.newusernamebox,
.newemailbox {
  width: 100%;
  max-width: 420px;
  text-align: left;
}

.newusernamebox,
.newemailbox {
  text-transform: lowercase;
}

.newusernamebox::placeholder,
.newemailbox::placeholder {
  text-transform: none;
}

.newnamebox,
.newsurnamebox {
  text-transform: capitalize;
}

/* Password + confirm wrappers */
.password-wrapper,
.confirm-password-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.confirm-password-wrapper {
  margin-top: 4px;
}

.newpasswordbox,
.confirmnewpasswordbox {
  padding-right: 48px;
}

.viewpasswordlogo,
.confirmviewlogo {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Password strength */
.password-strength-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.password-strength-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.password-strength-indicator {
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: var(--border);
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease, background-color 0.3s ease;
  width: 0;
}

.strength-bar.password-weak         { width: 33%; background: #e74c3c; }
.strength-bar.password-intermediate { width: 67%; background: var(--warn); }
.strength-bar.password-strong       { width: 100%; background: #27ae60; }

.password-requirements {
  width: 100%;
  max-width: 420px;
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  text-align: left;
}

.password-requirements li {
  font-family: var(--font-body);
  font-size: 13px;
  color: #c0392b;
  margin-bottom: 3px;
}

.loginrbutton {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  padding: 20px;
}

.loginrbutton a {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 680px) {
  .signupbox {
    padding: 36px 20px 32px;
    gap: 8px;
  }

  .signuptitle {
    font-size: 24px;
  }

  .signup-layout {
    flex-direction: column;
  }

  .signup-page-logo {
    position: relative;
    height: 25px;
    width: 25px;
    bottom: 95px;
    left: -58px;
  }
}

/* ==========================================================================
   ADMIN LOGIN  (minimal — just fixes the title font)
   ========================================================================== */

.admin-login-text {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 700;
  color: var(--blue-deep);
  text-align: center;
  margin: 0 0 32px;
}

.admin-login-page-logo {
    position: relative;
    height: 50px;
    width: 50px;          
    cursor: pointer;
    z-index: 10;
    /* Position relative to the O in your specific wordmark.
       Tune these two custom props per your layout — they're the only
       values you should need to touch. */
    bottom: 129px;
    left: 64px;
}

.admin-login-title {
    position: absolute;
    justify-content: center;
    display: flex;
    width: 100%;
}

@media (max-width: 680px) {
    .admin-login-title {
        position: relative;
        justify-content: center;
        display: flex;
        width: 100%;
    }

    .admin-login-text {
        font-family: var(--font-display);
        font-size: clamp(36px, 5vw, 70px);
        font-weight: 700;
        color: var(--blue-deep);
        text-align: center;
        margin-top: 32px;
    }

    .admin-login-page-logo {
        position: relative;
        height: 25px;
        width: 25px;          
        cursor: pointer;
        z-index: 10;
        /* Position relative to the O in your specific wordmark.
        Tune these two custom props per your layout — they're the only
        values you should need to touch. */
        bottom: 73px;
        left: -59px;
    }
}

/* ==========================================================================
   RESET PASSWORD helper
   ========================================================================== */

.display-message2 {
  display: none;
  font-family: var(--font-body);
  color: var(--text-primary);
}

/* ----------------------------------------------------------------
    Reset password page styles — scoped to .body-reset / .reset-*
    Relies on the :root tokens already loaded from sort.it.css.
---------------------------------------------------------------- */

.body-reset {
    min-height: 100vh;
    margin: 0;
    background: var(--bg-primary);
    font-family: var(--font-body);
    color: var(--text-primary);
    display: flex;
}

.loginmaintitle-reset-password {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  color: #9ca3af;
  cursor: pointer;
  line-height: 1;
  margin: 0; 
}

.main-title-container-reset-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.login-page-logo-reset-password {
  position: relative;
  /* sits over the hollow O in the title; keep as-is or tune per actual layout */
  height: 50px;
  width: auto;
  cursor: pointer;
  z-index: 10;
  left: -117px;
  top: -113px;
}

.reset-page-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.text3 {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--text-on-light);
  max-width: 420px;
  line-height: 1.6;
  margin: 0;
}

.text4 {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 18px);
  color: #9ca3af;
  max-width: 420px;
  line-height: 1.6;
  margin: 0;
}

/* Left — brand strip */
.reset-brand-panel {
    flex: 1 1 0;
    background: var(--blue-deep);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 60px 15vw;
}

.reset-logo-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.reset-logo {
    width: 48px;
    height: 48px;
    filter: brightness(0) invert(1);
}

.reset-logo-wordmark {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-on-dark);
    letter-spacing: -0.01em;
}

.reset-brand-tagline {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.6vw, 20px);
    color: var(--blue-light);
    line-height: 1.6;
    margin: 0;
    max-width: 340px;
}

/* Right — card column */
.reset-card-panel {
    flex: 0 0 auto;
    width: clamp(340px, 40vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--bg-surface);
}

.reset-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Lock icon */
.reset-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent);
}

.reset-icon-wrap svg {
    width: 26px;
    height: 26px;
}

.reset-heading {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.25;
}

.reset-subheading {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* Form */
.reset-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reset-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reset-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.reset-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reset-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(86, 156, 214, 0.15);
}

/* Submit button */
.reset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    margin-top: 4px;
}

.reset-btn:hover {
    background: var(--accent-bright);
}

.reset-btn:active {
    transform: scale(0.98);
}

.reset-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reset-btn-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.reset-btn:hover .reset-btn-arrow {
    transform: translateX(3px);
}

/* Status message */
.reset-message {
    margin-top: 16px;
    font-size: 14px;
    min-height: 20px;
    border-radius: 8px;
    padding: 0;
    transition: all 0.2s ease;
}

.reset-message.success {
    background: rgba(39, 174, 96, 0.10);
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: #1e7e44;
    padding: 12px 16px;
}

.reset-message.error {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.25);
    color: #c0392b;
    padding: 12px 16px;
}

/* Back link */
.reset-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.reset-back-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.reset-back-link:hover {
    color: var(--accent);
}

/* Responsive */
@media (max-width: 700px) {
    .reset-page-wrapper {
        flex-direction: column;
    }

    .reset-brand-panel {
        flex: none;
        gap: 12px;
    }

    .reset-brand-tagline {
        display: none;
    }

    .reset-card-panel {
        flex: 1;
        width: 100%;
        padding: 40px 20px;
        background: var(--bg-primary);
    }

    .login-page-logo-reset-password {
        height: 25px;
        left: -59px;
        top: -99px;
    }
}

@media (prefers-color-scheme: dark) {
    .reset-brand-panel {
        background: var(--blue-pale);
    }

    .reset-logo-wordmark {
        color: var(--text-on-dark);
    }

    .reset-brand-tagline {
        color: var(--blue-mid);
    }
}

/* ==========================================================================
   PROFILE PAGE
   ========================================================================== */

.profile-background-image {
  width: 100%;
  height: 30vh;
  object-fit: cover;
  display: block;
}

.profile-header-overlay {
  position: absolute;
  top: 30vh;
  transform: translateY(-50%);
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-picture-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  box-shadow: 0 6px 20px var(--shadow);
  flex-shrink: 0;
}

#profilePicture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pfp-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.profile-picture-settings h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    color: var(--text-primary);
}

.pfpUploadBtn,
.pfpDeleteBtn {
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

.pfpUploadBtn {
    background: var(--accent);
    color: var(--white);
}

.pfpUploadBtn:hover {
    background: var(--accent-bright);
}

.pfpDeleteBtn {
    background: #d9534f;
    color: white;
}

.pfpDeleteBtn:hover {
    background: #c64541;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding-bottom: 8px;
  background-color: var(--bg-primary);
  border-radius: 18px;
  padding: 10px 19px;
}

.nameElement {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-on-light);
  letter-spacing: -0.01em;
}

.surnameElement {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--text-on-light);
}

.usernameElement {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-on-light);
  opacity: 0.85;
}

/* ── Donator tag (inline badge) ──────────────────────────────
   unchanged from before, kept here for reference */
.donator-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--accent-bright);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 10px 3px 8px;
    border-radius: 100px;
    vertical-align: middle;
    margin-left: 8px;
}

/* Brief highlight pulse on the inline badge once the celebration ends */
.donator-tag-settle {
    animation: donator-tag-settle-pulse 1.4s ease;
}

@keyframes donator-tag-settle-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.5); }
    60%  { box-shadow: 0 0 0 10px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

/* ── Full-screen celebration ──────────────────────────────── */

.donator-celebration {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--scrim);
    backdrop-filter: blur(6px);
    animation: donator-celebration-fade-in 0.3s ease;
}

/* Forces the hidden attribute to actually win the specificity fight
   above, so overlay.hidden = true in JS reliably hides it. */
.donator-celebration[hidden] {
    display: none !important;
}

.donator-celebration.closing {
    animation: donator-celebration-fade-out 0.35s ease forwards;
}

@keyframes donator-celebration-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes donator-celebration-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.donator-confetti-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.donator-celebration-card {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: calc(100% - 48px);
    padding: 40px 32px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: var(--font-body);
    animation: donator-card-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes donator-card-in {
    0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.donator-celebration-badge {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: var(--white);
    box-shadow: 0 0 0 8px rgba(33, 150, 243, 0.15);
    animation: donator-badge-glow 1.8s ease-in-out infinite;
}

@keyframes donator-badge-glow {
    0%, 100% { box-shadow: 0 0 0 8px rgba(33, 150, 243, 0.15); }
    50%      { box-shadow: 0 0 0 16px rgba(33, 150, 243, 0.05); }
}

.donator-celebration-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--blue-deep);
    margin: 0 0 12px;
}

.donator-celebration-sub {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 28px;
}

.donator-celebration-close {
    padding: 12px 36px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--accent-bright);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.donator-celebration-close:hover { opacity: 0.92; }
.donator-celebration-close:active { transform: scale(0.97); }

/* Respect reduced-motion preferences — celebration still shows, just
   without the moving parts (fireworks skipped entirely in JS, card
   fades rather than bounces) */
@media (prefers-reduced-motion: reduce) {
    .donator-celebration-card { animation: donator-celebration-fade-in 0.3s ease both; }
    .donator-celebration-badge { animation: none; }
    .donator-tag-settle { animation: none; }
}

/* Tabs — a sibling of .profile-header-overlay (see HTML), positioned
   independently so they sit mostly on the content panel below, with only
   a small lip rising over the banner seam, rather than being vertically
   centered with the avatar. */
.profile-tabs {
  position: absolute;
  top: calc(30vh - 30px);
  transform: translateY(-14px);
  right: 24px;
  display: flex;
  gap: 4px;
  height: 44px;
  z-index: 2;
}

.tab-button {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: none;
  padding: 12px 26px;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-on-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-button:hover {
  background: var(--blue-deep);
}

.tab-button.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.tab-button.active:hover {
  background: var(--bg-primary);
}

.tab-button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* Small unread/count bubble, e.g. <span class="tab-badge">3</span>
   inside the Notifications tab button */
.tab-badge {
  background: var(--warn);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
}

.tab-button.active .tab-badge {
  background: var(--accent);
}

/* ==========================================================================
   TAB CONTENT
   Top padding clears the overlapping avatar+tabs; bottom padding clears
   any fixed circular nav using --nav-bottom-clearance (skip this if your
   global body styles already account for it elsewhere in sort.it.css).
   ========================================================================== */

.profile-tab-content {
  width: 100%;
  box-sizing: border-box;
  /* Top padding clears the avatar's overlap into the content (tabs only
     dip about 30px in, the avatar is the bigger of the two). */
  padding: 5vw;
  padding-bottom: calc(48px + var(--nav-bottom-clearance, 90px));
  min-height: 70vh;
}

.tab-panel {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}

.tab-panel.active {
  display: block;
}

.tab-panel h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ==========================================================================
   PAGES TAB
   ========================================================================== */

.pages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.profile-pages-search {
  font-family: var(--font-body);
  padding: 10px 16px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  background: var(--off-white);
  color: var(--text-primary);
}

.profile-pages-search:focus {
  outline: none;
  border-color: var(--accent);
}

.pages-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.page-card {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px var(--shadow);
  padding: 24px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.page-card:hover {
  background-color: var(--blue-pale);
  cursor: pointer;
  transform: translateY(-2px);
}

/* ==========================================================================
   DETAILS TAB
   ========================================================================== */

.details-form {
  display: flex;
  flex-direction: column;
  max-width: 480px;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.detail-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-value {
  flex: 1;
  font-size: 15px;
  color: var(--text-primary);
}

.form-group.editing .detail-value {
  outline: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
}

.edit-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.edit-svg {
  width: 18px;
  height: 18px;
  fill: var(--icon-color);
  transition: fill 0.2s;
}

.edit-button:hover .edit-svg {
  fill: var(--accent-bright);
}

.form-group.editing .edit-svg {
  display: none;
}

.edit-tick {
  display: none;
  color: var(--accent);
  font-weight: 700;
}

.form-group.editing .edit-tick {
  display: inline;
}

.account-details-section {
  margin-top: 32px;
}

.account-details-section h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.account-details-section p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

#sendResetEmail {
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 11px 18px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#sendResetEmail:hover {
  background: var(--accent-bright);
}

#passwordMessage {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.deleteAccountPassword {
  font-family: var(--font-body);
  padding: 10px 16px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  background: var(--off-white);
  color: var(--text-primary);
  margin: 15px 0 20px 0;
}

.deleteAccountPassword:focus {
  outline: none;
  border-color: var(--accent);
}

.field-input {
  font-family: var(--font-body);
  padding: 10px 16px;
  border-radius: 10px;
  box-sizing: border-box;
  border: 1.5px solid var(--border);
  background: var(--off-white);
  color: var(--text-primary);
}

.field-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ==========================================================================
   STATS TAB
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ==========================================================================
   NOTIFICATIONS TAB
   Why a page was verified or had verification revoked.
   ========================================================================== */

.notifications-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notification-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notification-filter-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.notification-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.notification-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.notifications-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notification-item {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.notification-item.unread {
  border-left: 3px solid var(--accent);
  background: var(--blue-pale);
}

.notification-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.notification-icon.verified {
  background: var(--accent);
}

.notification-icon.verified::before {
  content: "\2713";
}

.notification-icon.unverified {
  background: var(--warn);
}

.notification-icon.unverified::before {
  content: "\2715";
}

.notification-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notification-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.delete-all-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #dc2626;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.delete-all-btn:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: var(--white);
}

.notification-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notification-page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.notification-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.notification-status-badge.verified {
  background: var(--blue-pale);
  color: var(--blue-mid);
}

.notification-status-badge.unverified {
  background: var(--warn-soft);
  color: var(--warn);
}

.notification-reason {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.notification-time {
  font-size: 12px;
  color: var(--text-muted);
}

.notifications-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ==========================================================================
   PROFILE PICTURE CROPPER
   ========================================================================== */

.pfp-modal {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: none;
  place-items: center;
  z-index: 9999;
}

.pfp-modal.open {
  display: grid;
}

.pfp-card {
  width: 420px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px var(--shadow);
}

.pfp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
}

.pfp-header button {
  border: 0;
  background: transparent;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}

.pfp-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px auto;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
}

#pfpCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;      /* stops the browser from panning/zooming on touch here */
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

#pfpCanvas:active {
  cursor: grabbing;
}

.pfp-circle-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 180px at 50% 50%,
    rgba(0,0,0,0) 180px,
    var(--scrim) 140px);
    pointer-events: none;   /* let all touches/clicks pass through to the canvas underneath */
    touch-action: none;
}

.pfp-actions button {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
}

#pfpSaveCrop {
  background: var(--accent);
  color: var(--white);
}

#pfpCancelCrop {
  background: var(--off-white);
  color: var(--text-primary);
}

/* ==========================================================================
   RESPONSIVE — vertical tab stack on phones
   The overlay stays absolutely positioned (it has to, given the DOM order
   of banner → tab-content → overlay) but drops the -50% translate and
   stacks its children vertically, sitting as a card below the banner.
   .profile-tab-content gets enough top padding to clear it.
   ========================================================================== */

@media (max-width: 640px) {
  .profile-header-overlay {
    top: 23vh;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    left: 16px;
    right: 16px;
  }

  .profile-tabs {
    position: absolute;
    top: calc(30vh + 210px); /* clears the stacked avatar + name block above */
    left: 16px;
    right: 16px;
    transform: none;
    flex-direction: column;
    height: auto;
    gap: 6px;
  }

  .tab-button {
    width: 100%;
    justify-content: space-between;
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 0 var(--border);
    padding: 14px 18px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tab-button.active {
    background: var(--blue-pale);
    color: var(--blue-mid);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .nameElement,
  .surnameElement,
  .usernameElement {
    color: var(--text-primary);
    text-align: center;
  }

  /* Approximate clearance for the stacked avatar+name block (~210px) plus
     the 4 stacked tabs below it (~210px). Check this visually after
     adding/removing tabs — it's a fixed value, not measured, since both
     blocks are position:absolute. */
  .profile-tab-content {
    padding-top: 460px;
  }

  .pages-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .pages-list {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .details-form {
    max-width: 100%;
  }

  .notification-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* =====================================================================
   EDIT TOOLBAR (FAB + popout menus)
   Restyled to use the same tokens as the rest of the app (--surface,
   --border, --shadow, --blue-mid/--blue-pale/--blue-deep, --text-*)
   instead of hardcoded greys, and to merge the five near-identical
   popout menus into shared rules.
   ===================================================================== */

.edit-options {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 50px;
    height: 50px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    z-index: 52;
    border-radius: 50px;
    box-shadow: 0 2px 12px var(--shadow), 0 1px 3px rgba(0, 48, 73, 0.04);
    transition: height 1s ease-in-out, border-radius 0.3s ease;
    overflow: visible;
}

.edit-options.open {
    height: 503px; /* was 463px — +40px for the new list-icon slot */
    border-radius: 50px;
}

.edit-logo {
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: 25px;
    transform: translateY(50%);
    cursor: pointer;
    z-index: 5;
    right: 7.5px;
    fill: var(--icon-color);
}

.edit-png {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 1;
    transition: transform 1s, opacity 1s;
}

.edit-options.open .edit-png {
    transform: rotate(-360deg);
    opacity: 0;
}

.edit-line {
    position: absolute;
    width: 35px;
    height: 6px;
    border-radius: 100px;
    background-color: var(--icon-color);
    transition: transform 1s, opacity 1s;
    transform-origin: center;
    bottom: 15px;
}

.edit-line-1,
.edit-line-2 {
    transform: rotate(-45deg);
    opacity: 0;
}

.edit-options.open .edit-line-1 {
    transform: rotate(-135deg);
    opacity: 1;
}

.edit-options.open .edit-line-2 {
    transform: rotate(-405deg);
    opacity: 1;
}

/* --- individual toolbar buttons --- */

.edit_button {
    position: absolute;
    right: 7.5px;
    bottom: 7.5px;
    width: 32px;
    height: 35px;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(0);
    transition: transform 1.1s ease-in-out, opacity 1s ease, background-color 0.15s ease;
}

.edit-options.open .edit_button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.edit-options.open .edit_button:hover {
    background-color: var(--blue-pale);
}

/* Buttons pulled in from a 50px slot to 40px so the toolbar reads as a
   tighter, more cohesive stack. The last gap (into font-colour-icon) is
   kept wider than the rest -- that button has the colour band sitting
   underneath its icon, so it needs a bit more breathing room than a
   plain single-icon slot or it looks cramped against strikethrough. */
.edit-options.open .edit_button:nth-child(2)  { transform: translateY(-448px); } /* add-media */
.edit-options.open .edit_button:nth-child(3)  { transform: translateY(-408px); } /* align-toggle */
.edit-options.open .edit_button:nth-child(4)  { transform: translateY(-368px); } /* choose-font */
.edit-options.open .edit_button:nth-child(5)  { transform: translateY(-328px); } /* font-size */
.edit-options.open .edit_button:nth-child(6)  { transform: translateY(-288px); } /* title-icon */
.edit-options.open .edit_button:nth-child(7)  { transform: translateY(-248px); } /* list-icon */
.edit-options.open .edit_button:nth-child(8)  { transform: translateY(-208px); } /* bold-icon */
.edit-options.open .edit_button:nth-child(9)  { transform: translateY(-168px); } /* italics-icon */
.edit-options.open .edit_button:nth-child(10) { transform: translateY(-128px); } /* underline-icon */
.edit-options.open .edit_button:nth-child(11) { transform: translateY(-88px);  } /* strikethrough-icon */
.edit-options.open .edit_button:nth-child(12) { transform: translateY(-40px);  } /* font-colour-icon */

.logo-image {
    width: 27px;
    height: 27px;
    cursor: pointer;
    fill: var(--icon-color);
}

/* Each icon was exported with its own arbitrary viewBox padding, so
   forcing every one into an identical 35x35 square scales the glyph
   very differently per icon. These size each one individually so the
   visible ink reads as a consistent glyph size across the toolbar. */
#choose-font-image {
    width: 19px;
    height: 35px;
}

#font-size-image {
    width: 34px;
    height: 22px;
}

#title-icon-image {
    width: 20px;
    height: 24px;
}

#bold-icon-image {
    width: 19px;
    height: 25px;
}

#italics-icon-image {
    width: 19px;
    height: 24px;
}

#underline-icon-image {
    width: 18px;
    height: 25px;
}

#strikethrough-icon-image {
    width: 24px;
    height: 24px;
}

/* Active-state highlight behind bold/italic/underline/strikethrough.
   NOTE: this previously looked for .format-active, but the JS toggles a
   class called .active — they never matched, so the highlight never
   actually showed up. */
.highlight-bg {
    background-color: var(--blue-pale);
    border: 1px solid var(--blue-mid);
    border-radius: 8px;
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    z-index: -1;
}

.edit_button.active .highlight-bg {
    display: block;
}

.edit_button.active .logo-image {
    fill: var(--blue-deep);
}

/* --- popout menus: font size / choose font / font colour / title / align ---
   These five were near-identical, differing only in `top`. Merged into one
   shared rule set; each keeps its own tiny position override below. */

.font-size-menu,
.choose-font-menu,
.font-colour-menu,
.title-menu,
.align-text-menu {
    position: absolute;
    right: 100%;
    width: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 10;
    font-size: 5px;
    transform: scaleX(0);
    transform-origin: right center;
    transition:
        opacity 0.3s ease,
        font-size 0.3s ease,
        transform 0.3s ease;
}

.choose-font-menu   { top: 0; }
.font-size-menu      { top: 50px; }
.title-menu           { top: 100px; }
.align-text-menu      { top: 100px; }
.font-colour-menu    { top: 56px; }

.font-size-menu.open,
.choose-font-menu.open,
.font-colour-menu.open,
.title-menu.open,
.align-text-menu.open {
    width: 160px;
    opacity: 1;
    padding: 12px;
    transform: scaleX(1);
    overflow: visible;
    font-size: 16px;
    box-shadow: 0 8px 24px var(--shadow), 0 2px 8px rgba(0, 48, 73, 0.08);
}

.font-colour-menu.open {
    width: auto; /* colour wheel needs a little more room */
}

/* --- shared dropdown toggle / options / item styling --- */

.choose-font-dropdown-toggle,
.font-size-dropdown-toggle,
.title-dropdown-toggle {
    background: var(--off-white);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: border-radius 0.3s ease, background 0.15s ease;
}

.choose-font-dropdown-options,
.font-size-dropdown-options,
.title-dropdown-options {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
}

/* Options become visible as soon as their parent panel is open —
   no separate open/closed state of their own anymore */
.choose-font-menu.open .choose-font-dropdown-options,
.title-menu.open .title-dropdown-options {
    max-height: 250px;
    opacity: 1;
    overflow-y: auto;
}

.font-size-menu.open .font-size-dropdown-options {
    max-height: 250px;
    opacity: 1;
    overflow: visible; /* only the inner scroll list scrolls, not this wrapper */
}

.font-size-scroll-list {
    overflow-y: auto;
    max-height: 200px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.font-size-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 6px;
}

.choose-font-menu.menu-open .choose-font-dropdown-toggle,
.font-size-menu.menu-open .font-size-dropdown-toggle,
.title-menu.menu-open .title-dropdown-toggle {
    border-radius: 10px 10px 0 0;
}

.choose-font-dropdown-item,
.font-size-dropdown-item,
.title-dropdown-item {
    padding: 6px 10px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}

.choose-font-dropdown-item:hover,
.font-size-dropdown-item:hover,
.title-dropdown-item:hover {
    background: var(--blue-pale);
    color: var(--blue-deep);
}

/* --- custom font size input ---
   Now lives in .font-size-footer, swapped in for the "Custom" label via JS
   (display:none / display:flex toggle), not appended after the list. */

.custom-font-size-group {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.customFontSize {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--off-white);
    color: var(--text-primary);
    text-align: center;
}

.applyCustomFontSizeBtn {
    background-color: var(--blue-mid);
    color: #fff;
    border: none;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.applyCustomFontSizeBtn:hover {
    background-color: var(--blue-deep);
}

/* --- title/heading type icon badges --- */

.title-icon-image,
.subtitle-icon-image,
.heading1-icon-image,
.heading2-icon-image {
    height: 30px;
}

.subtitle-label,
.heading1-label,
.heading2-label {
    font-size: 8px;
    font-weight: bold;
    color: var(--text-primary);
    position: absolute;
    bottom: -2px;
    right: 2px;
    background: var(--surface);
    padding: 1px 2px;
    border-radius: 2px;
    border: 1px solid var(--border);
}

.font-colour-icon-image {
    width: 17px;
    height: 18px;
    margin-bottom: 4px;
}

.font-colour-band {
    width: 15px;
    height: 5px;
    border-radius: 100px;
    background-color: #000; /* live-updated by JS to the selected colour */
    transform-origin: center;
    bottom: 15px;
}

/* --- text alignment indicator --- */

.align-indicator {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    width: 24px;
    color: var(--icon-color);
}

.align-bar {
    height: 3px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s ease;
}

.align-bar.long  { width: 24px; }
.align-bar.short { width: 14px; }

.align-indicator.left .align-bar {
    transform: translateX(0px);
}

.align-indicator.center .align-bar.short {
    transform: translateX(5px);
}
.align-indicator.center .align-bar.long {
    transform: translateX(0px);
}

.align-indicator.right .align-bar.short {
    transform: translateX(10px);
}
.align-indicator.right .align-bar.long {
    transform: translateX(0px);
}

/* --- colour wheel popout --- */

#colorWheelContainer {
    position: relative;
    width: 200px;
}

#colorWheel {
    display: block;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--border);
}

.color-picker {
    margin-top: 10px;
}

#colorPointer {
    display: none;
}

#currentColor {
    border: 1px solid var(--border) !important;
}

.hexColorInput {
    text-transform: uppercase;
    background: var(--off-white);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 8px;
}

#dropperBtn {
    background: var(--off-white);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

#dropperBtn:hover {
    background: var(--blue-pale);
    color: var(--blue-deep);
    border-color: var(--blue-mid);
}
  
/* create a page */

.create-edit-window {
    background-color: var(--off-white);
    z-index: 0;
    top: 0;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.create-edit-page {
    position: relative;
    width: 100vw;
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: 220px 60vw 240px;
    grid-template-rows: auto;
    column-gap: 32px;
    justify-content: center;
    padding-top: 100px;
    box-sizing: border-box;
}

.doc-outline{
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 24px;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
}

.doc-outline-header{
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.doc-outline-item{
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--text-secondary);
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
}

.doc-outline-item:hover {
    background-color: var(--blue-pale);
    color: var(--blue-mid);
}

.doc-outline-item.active {
    background-color: var(--blue-pale);
    color: var(--blue-deep);
    font-weight: 500;
}

.doc-outline-item[data-level="1"] { font-weight: 500; }
.doc-outline-item[data-level="2"] { padding-left: 18px; opacity: 0.95; }
.doc-outline-item[data-level="3"] { padding-left: 30px; opacity: 0.85; font-size: 12px; }

.create-page-editor {
    grid-column: 2;
    grid-row: 1;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px var(--shadow), 0 1px 3px rgba(0, 48, 73, 0.04);
    padding: 48px 52px;
    width: 60vw;
    margin: 0;
    box-sizing: border-box;
    z-index: 5;
    min-height: 500px;
}

.create-page-editor[data-has-content="false"]::before {
    display: block;
}

.block {
    display: block;
    min-height: 1.2em;
    padding: 2px 4px 2px 26px;   /* was "2px 4px" — reserve space for the drag handle on every block type */
    line-height: 1.4;
    outline: none;
    margin-bottom: 0.2em;
    word-break: break-word;
    font-family: Helvetica, Arial, sans-serif;
}

.block:focus {
    outline: 2px solid #4D90FE; /* or your “blue highlight” */
    outline-offset: 2px;         /* prevent outline from being cut off */
}

.block.paragraph:empty:before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}

.text-container {
    width: 100%;
    height: auto; 
    background-color: white;
    border: 2px grey;
}
  
.image-text {
    color: grey;
}
  
.textarea {
    background: none;
    font-family: Arial, Helvetica, sans-serif;
}

.error-message15 {
    display: none;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* --- editor surface --- */
.create-page-editor {
    overflow-x: hidden;
    padding: 24px;
    min-height: 300px;
    outline: none;
    line-height: 1.6;
    font-size: 16px;
}
.create-page-editor .block.text {
    margin: 0 0 4px 0;
    /* no padding override here — inherits the 26px-left reservation from .block */
    position: relative;
    border-radius: 4px;
}
.create-page-editor .block.text:empty:before {
content: attr(data-placeholder);
color: #aaa;
pointer-events: none;
}
.create-page-editor .block:hover { background: var(--bg-hover); }

.block.list {
    margin: 0;
    padding-left: calc(2.2em + 26px);
}
.block.list li > ul,
.block.list li > ol {
    margin: 0.2em 0;
    padding-left: 24px;
}

/* drag handle shown on hover, for every block */
.block { position: relative; }
.drag-handle {
    position: absolute;
    left: 2px; top: 2px;
    width: 20px; height: 24px;
    display: none;
    align-items: center; justify-content: center;
    cursor: grab;
    color: #999;
    font-size: 14px;
    border-radius: 4px;
}
.block:hover .drag-handle { display: flex; }
.drag-handle:hover {
    opacity: 1;
}
.drag-handle:hover { background: #e3e8f5; color: var(--accent); }
.block.dragging { opacity: .4; }
.block.drag-over-top { box-shadow: inset 0 2px 0 var(--accent); }
.block.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--accent); }

.drag-handle,
.resize-handle {
    touch-action: none;
}

@media (pointer: coarse) {
    .drag-handle {
        width: 30px;
        height: 34px;
    }
    .resize-handle {
        width: 22px;
        height: 22px;
    }
}

/* --- image block --- */
.block.image {
    padding: 8px 4px 8px 26px;
    text-align: center;
}
.block.image[data-align="left"],
.block.image[data-align="right"] {
    position: relative;
    z-index: 2; /* keeps the wrapped paragraph's own box from sitting on top of this one */
}
.block.image[data-align="left"]  { float: left;  margin: 4px 20px 10px 0; }
.block.image[data-align="right"] { float: right; margin: 4px 0 10px 20px; }

/*
 * image-features.css
 *
 * New styles needed for the crop / grid / snap-resize image features.
 * Merge these into sort.it.css near your existing .img-wrap / .align-toolbar
 * / .resize-handle / .block-delete rules — colors/sizes below are neutral
 * placeholders, adjust to match those existing controls' look.
 *
 * Nothing here should conflict with or require changing your existing
 * single-image styles: .img-wrap keeps exactly the same markup/behavior it
 * always had when a block only has one image.
 */

/* ---------- crop button (sits alongside the existing resize handle /
   delete button on each image cell) ---------- */

.img-wrap .crop-btn {
    position: absolute;
    top: 8px;
    right: 40px; /* to the left of .block-delete, adjust to match your spacing */
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: none; /* shown on hover/selected, same pattern as .block-delete presumably uses */
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.img-wrap:hover .crop-btn,
.img-wrap.selected .crop-btn {
    display: flex;
}

/* ---------- "add image" button (grows a block into a grid) ---------- */

.align-toolbar .add-image-btn {
    font-weight: 600;
}

/* ---------- grid mode ---------- */

.img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.img-grid .img-wrap {
    flex: 0 0 auto; /* each cell keeps whatever width it was resized to */
}

.block.image.grid[data-align="left"] .img-grid { justify-content: flex-start; }
.block.image.grid[data-align="center"] .img-grid { justify-content: center; }
.block.image.grid[data-align="right"] .img-grid { justify-content: flex-end; }

/* ---------- snap-resize indicator ---------- */

.img-wrap.snap-active {
    outline: 2px solid #4a90e2; /* swap for your accent color */
    outline-offset: 2px;
}

/* ---------- crop overlay ---------- */

.crop-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: crosshair;
    /* No background here on purpose — the dimmed mask comes entirely from
       .crop-rect's box-shadow below. If this also had its own background,
       it would sit *on top of* the crop selection too (since the overlay
       covers the whole image and the rect has no background of its own),
       leaving the "selected" area dimmed rather than fully clear. */
}

.crop-rect {
    position: absolute;
    border: 2px dashed #fff;
    /* A huge spread with no blur paints solid dark everywhere OUTSIDE this
       box and leaves the inside completely untouched — that's what makes
       the crop selection read at full brightness against a dimmed rest of
       the image. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
    cursor: move;
    touch-action: none;
}

.crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #4a90e2; /* swap for your accent color */
    border-radius: 50%;
    touch-action: none;
}

.crop-handle-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.crop-handle-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.crop-handle-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.crop-handle-se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.crop-actions {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 11;
}

.crop-actions button {
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
}

.crop-confirm {
    background: #4a90e2; /* swap for your accent color */
    color: #fff;
}

.crop-cancel {
    background: rgba(255, 255, 255, 0.85);
    color: #222;
}

.crop-actions button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* clearfix so a run of floated images doesn't collapse the editor's height */
.create-page-editor::after { content: ""; display: table; clear: both; }

.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
width: 420px; /* default; changed by resize handle, saved per-image */
}
.img-wrap img {
    width: 100%;
    max-width: 100%;   /* belt-and-braces alongside the wrapper's own max-width */
    height: auto;
    display: block;
    border-radius: 4px;
    pointer-events: none;
}
.img-wrap.selected { outline: 2px solid var(--accent); outline-offset: 2px; }

.align-toolbar {
position: absolute;
top: -34px; left: 50%;
transform: translateX(-50%);
display: none;
gap: 2px;
background: #222;
padding: 3px;
border-radius: 6px;
white-space: nowrap;
z-index: 5;
}
.img-wrap.selected .align-toolbar { display: flex; }
.align-toolbar button {
border: none;
background: transparent;
color: #ccc;
width: 26px; height: 26px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.align-toolbar button:hover { background: #444; color: #fff; }
.align-toolbar button.active { background: var(--accent); color: #fff; }

.resize-handle {
position: absolute;
width: 14px; height: 14px;
background: var(--accent);
border: 2px solid #fff;
border-radius: 50%;
right: -7px; bottom: -7px;
cursor: nwse-resize;
display: none;
}
.img-wrap.selected .resize-handle { display: block; }

.block-delete {
position: absolute;
top: 4px; right: 4px;
width: 22px; height: 22px;
border: none;
background: rgba(0,0,0,.55);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
display: none;
}
.img-wrap:hover .block-delete { display: block; }

.caption {
display: none;
margin-top: 4px;
font-size: 12px;
color: #888;
text-align: center;
outline: none;
}
.caption:not(:empty) { display: block; }
.img-wrap.selected ~ .caption,
.block.image:focus-within .caption { display: block; }
.caption:empty:before { content: "Add a caption (optional)\2026"; color: #bbb; }

.drop-indicator {
font-size: 12px;
color: #888;
text-align: center;
padding: 10px;
border: 2px dashed transparent;
}
.create-page-editor.drag-over { border: 2px dashed var(--accent); }

.page_upload,
.page_save,
.page_delete,
.verifyPageBtn, 
.skipVerifyBtn, 
.blockPageBtn {
    border: none;
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    border-radius: 8px;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    white-space: nowrap;
    margin-bottom: 10px;
    margin-right: 10px;
}

.page_upload,
.page_save,
.page_delete,
.verifyPageBtn {
    opacity: 0.92;
}

.page_upload:hover,
.page_save:hover,
.page_delete:hover,
.verifyPageBtn:hover, 
.skipVerifyBtn:hover, 
.blockPageBtn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.page_upload:active,
.page_save:active,
.page_delete:active,
.verifyPageBtn:active, 
.skipVerifyBtn:active,
.blockPageBtn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.page_upload {
    background-color: #1a9e4a;
}

.page_save {
    background-color: var(--blue-mid);
}

.page_delete {
    background-color: #c0392b;
}

.verifyPageBtn {
    background-color: var(--blue-deep);
}

.verifyPageBtn.danger {
    background-color: #7f1d1d;
}

.skipVerifyBtn {
    background-color: #5a4a7a;   /* was #7c3aed — muted slate purple */
}

.blockPageBtn {
    background-color: #7a5a30;   /* was #b45309 — muted warm brown */
}

/* ── Reason modals ── */
.reason-modal {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0dc);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reason-modal-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #999);
}

.reason-textarea {
    width: 100%;
    min-height: 72px;
    padding: 8px 10px;
    border: 1px solid var(--border, #e0e0dc);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary, #111);
    background: var(--off-white, #f7f7f5);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
    outline: none;
}

.reason-textarea:focus {
    border-color: var(--blue-mid, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    background: var(--surface, #fff);
}

.submitReasonBtn {
    align-self: flex-end;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    color: #fff;
    background: #5a4a7a;
}

.submitReasonBtn:hover  { background: #695394; transform: translateY(-1px); }
.submitReasonBtn:active { transform: translateY(0); }

.submitBlockReasonBtn         { background: #7a5a30; }
.submitBlockReasonBtn:hover   { background: #92400e; }

/* ── Modal layout ── */
.upload-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-content {
    background: var(--surface, #fff);
    padding: 24px;
    border-radius: 14px;
    width: min(520px, 92vw);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    position: relative;
    overflow-y: auto;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.closeModalBtn {
    position: absolute;
    top: 14px;
    right: 18px;
    cursor: pointer;
    font-size: 22px;
    color: #888;
    line-height: 1;
    transition: color 0.15s;
}

.closeModalBtn:hover { color: #333; }

#modalTitle {
    margin: 0 0 12px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary, #111);
}

/* ── Document title strip ── */
.title-display {
    background: var(--off-white, #f7f7f5);
    border: 1px solid var(--border, #e5e5e0);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.title-display label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #999);
    white-space: nowrap;
}

.extracted-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary, #111);
    word-break: break-word;
}

/* ── Input groups ── */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.input-group > label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #999);
}

/* ── Multi-input container ── */
.multi-input {
    border: 1px solid var(--border, #e0e0dc);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    background: var(--surface, #fff);
    max-height: 108px;
    overflow-y: auto;
    transition: border-color 0.15s;
    position: relative;
}

.multi-input:focus-within {
    border-color: var(--blue-mid, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.multi-input-field {
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    flex: 1;
    min-width: 100px;
    color: var(--text-primary, #111);
    padding: 2px 4px;
}

.multi-input-field::placeholder {
    color: var(--text-muted, #bbb);
}

/* ── Tags ── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--blue-pale, #e8f0fe);
    color: var(--blue-deep, #1a4fbb);
    border: 1px solid var(--blue-mid, #93b4f5);
    border-radius: 20px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
}

.remove-tag {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--blue-mid, #3b82f6);
    opacity: 0.7;
    transition: opacity 0.12s;
    padding: 0 1px;
}

.remove-tag:hover { opacity: 1; }

/* ── Suggestion list ── */
.suggestion-list {
    display: none;
    position: fixed;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e0e0dc);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    z-index: 999;
    max-height: 160px;
    overflow-y: auto;
    padding: 4px 0;
    list-style: none;
    margin: 0;
}
 
.suggestion-list li {
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary, #111);
    transition: background 0.1s;
}
 
.suggestion-list li:hover {
    background: var(--blue-pale, #e8f0fe);
    color: var(--blue-deep, #1a4fbb);
}

/* ── Category quick-add buttons ── */
.category-quick-add {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
}

.category-btn {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid var(--border, #ddd);
    background: var(--off-white, #f5f5f3);
    color: var(--text-secondary, #555);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.category-btn:hover {
    background: var(--blue-pale, #e8f0fe);
    border-color: var(--blue-mid, #93b4f5);
    color: var(--blue-deep, #1a4fbb);
}

.category-btn-active {
    background: var(--blue-pale, #dbeafe);
    border-color: var(--blue-mid, #4a9edd);
    color: var(--blue-deep, #1a5f8f);
}

.category-btn-clear {
    background: #fff5f5;
    border-color: #fca5a5;
    color: #b91c1c;
    margin-left: auto;
}

.category-btn-clear:hover {
    background: #fee2e2;
    border-color: #f87171;
    color: #991b1b;
}

/* ── Publish checkbox ── */
#publishCheckboxWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-primary, #111);
    padding: 10px 0 2px;
    cursor: pointer;
    user-select: none;
}

#publishCheckboxWrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue-mid, #3b82f6);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Error messages ── */
.error-message15 {
    display: none;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 9px 13px;
    font-size: 13px;
    margin-top: 4px;
}

/* ── Confirm button ── */
#confirmModalBtn {
    margin-top: 12px;
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 8px;
    background: var(--blue-mid, #2563eb);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

#confirmModalBtn:hover  { background: var(--blue-deep, #1d4ed8); transform: translateY(-1px); }
#confirmModalBtn:active { transform: translateY(0); }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
    .upload-content {
        background: #1e1e1e;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }

    #modalTitle { color: #f0f0f0; }

    .closeModalBtn { color: #777; }
    .closeModalBtn:hover { color: #ddd; }

    .title-display {
        background: #2a2a2a;
        border-color: #3a3a3a;
    }

    .title-display label { color: #777; }
    .extracted-title { color: #e8e8e8; }

    .input-group > label { color: #666; }

    .multi-input {
        background: #252525;
        border-color: #3a3a3a;
    }

    .multi-input:focus-within {
        border-color: #4a8cf7;
        box-shadow: 0 0 0 3px rgba(74,140,247,0.15);
    }

    .multi-input-field { color: #e8e8e8; }
    .multi-input-field::placeholder { color: #555; }

    .tag {
        background: #1a2e4a;
        color: #7eb3f7;
        border-color: #2a4a7a;
    }

    .remove-tag { color: #5a90d4; }

    .suggestion-list {
        background: #252525;
        border-color: #3a3a3a;
        box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }

    .suggestion-list li { color: #e0e0e0; }

    .suggestion-list li:hover {
        background: #1a2e4a;
        color: #7eb3f7;
    }

    .category-btn {
        background: #2a2a2a;
        border-color: #3a3a3a;
        color: #aaa;
    }

    .category-btn:hover {
        background: #1a2e4a;
        border-color: #2a4a7a;
        color: #7eb3f7;
    }

    .category-btn-active {
        background: #1a2e4a;
        border-color: #2a4a7a;
        color: #7eb3f7;
    }

    .category-btn-clear {
        background: #2a1515;
        border-color: #5a2a2a;
        color: #f87171;
    }

    .category-btn-clear:hover {
        background: #3a1a1a;
        border-color: #7a3a3a;
    }

    #publishCheckboxWrapper { color: #e0e0e0; }

    .error-message15 {
        background: #2d1515;
        color: #f87171;
        border-color: #5a2020;
    }

    #confirmModalBtn { background: #1d4ed8; }
    #confirmModalBtn:hover { background: #1e40af; }

    .modal-success-screen h3 { color: var(--text-primary); }
    .modal-success-screen p  { color: var(--blue-deep); }

    #modalSuccessDoneBtn {
        background: #f0f0f0;
        color: #111;
    }

    #modalSuccessDoneBtn:hover { background: #d0d0d0; }

    .skipVerifyBtn  { background-color: #6d28d9; }
    .blockPageBtn   { background-color: #92400e; }

    .reason-modal {
        background: #252525;
        border-color: #3a3a3a;
    }

    .reason-textarea {
        background: #1e1e1e;
        border-color: #3a3a3a;
        color: #e8e8e8;
    }

    .reason-textarea::placeholder { color: #555; }

    .reason-textarea:focus {
        border-color: #4a8cf7;
        background: #252525;
        box-shadow: 0 0 0 3px rgba(74,140,247,0.15);
    }
}

/* ── Success screen (inside modal) ── */
.modal-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    gap: 12px;
}

.modal-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 32px;
    line-height: 64px;
    animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.modal-success-screen h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #111;
}

.modal-success-screen p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}

#modalSuccessDoneBtn {
    margin-top: 8px;
    padding: 10px 32px;
    border: none;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s;
}

#modalSuccessDoneBtn:hover { background: #333; }

/* ── Toast ── */
.action-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #111;
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.action-toast.toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.action-toast.toast-success::before { content: "✓  "; color: #22c55e; }
.action-toast.toast-info::before    { content: "•  "; color: #60a5fa; }

@media (prefers-color-scheme: dark) {
    .block.paragraph:empty:before {
        content: attr(data-placeholder);
        color: #000000;
        pointer-events: none;
    }

    .create-edit-page {
        background-color: #1E1E1E;
    }

    .create-edit-window {
        background: linear-gradient(to top, #001a3b, black);
    }

    .page_upload {
        background-color: rgb(7, 77, 7);
    }

    .page_save {
        background-color: rgb(7, 74, 77);
    }

    .edit-options {
        background-color: rgb(63, 63, 63);
    }
}


@media (max-width: 768px) {
    .create-edit-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding-top: 16px;
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 100px;
    }

    .doc-outline {
        grid-column: 1;
        grid-row: 1;
        position: static;
        max-height: 200px;
        margin-bottom: 16px;
    }

    .create-page-editor {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        padding: 24px 20px;
        border-radius: 12px;
    }

    .page_upload {
        font-size: 15px;
        padding: 10px;
        bottom: 80px;
    }

    .page_save {
        font-size: 15px;
        padding: 10px;
    }

    .page_delete {
        bottom: 136px;
        font-size: 15px;
        padding: 10px;
    }

    .verifyPageBtn {
        bottom: 192px;
        font-size: 15px;
        padding: 10px;
    }
}

/* tech tree */

.row1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 300px;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: auto;
    justify-content: space-between;
    flex: 1;
}

.row2 {
    display: flex;
    position: absolute;
    justify-content: center;
    margin: auto;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
}

.main {
    background-color: rgb(255, 242, 0);
}

.phone {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

.tablet {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

.laptop {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

.PC {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

.console {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

.other1 {
    flex-grow: 1;
    margin: 0 2.5vw;
    background-color: rgb(128, 128, 128);
}

 /* site in construction */

.animation-container {
    height: 210px;
    width: 100px;
    top: 270px;
    left: calc(50vw - 540px);
    position: fixed;
}

.construction-worker {
    height: 200px;
    top: 10px;
}
  
.Hammer {
    position: absolute;
    top: 45px;
    left: 35px;
    width: 55px;
    height: 70px;
    transform-origin: 20px 60px;
}

.site-title {
    position: fixed;
    font-size: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    left: calc(50vw - 125px);
    top: 200px;
}

.under-construction-title {
    position: fixed;
    font-size: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    left: calc(50vw - 450px);
    top: 300px;
    width: 950px;
}

.eye {
    visibility: hidden;
    position: absolute;
    left: 50px;
    height: 20px;
    top: 40px;
}

.blink {
    visibility: hidden;
    position: absolute;
    left: 50px;
    height: 20px;
    top: 40px;
}

.eye.short {
    visibility: visible;
}

.blink.fast {
    visibility: visible;
}

.sorry-text {
    position: fixed;
    width: 300px;
    left: calc(50vw - 120px);
    font-size: 60px;
    top: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
  
.return-text {
    position: fixed;
    width: 750px;
    left: calc(50vw - 375px);
    font-size: 50px;
    top: 550px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.soon-text {
    position: fixed;
    width: 600px;
    left: calc(50vw - 300px);
    font-size: 50px;
    top: 450px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.workerswing {
    position: absolute;
    height: 500px;
    width: 210px;
}

.animation-container-2 {
    position: fixed;
    right: 210px;
    top: -500px;
    transition: top 3s, right 3s;
}

.animation-container-2.open {
    right: 210px;
    top: -150px;
    transition: top 3s, right 3s;
}

.mouthImage {
    left: 67px;
    top: 320px;
    position: absolute;
    display: none;
}

.mouthImage.open {
    display: block;
}

.animation-container-3 {
    position: fixed;  
    right: 100px;
    top: -140px;  
    transition: top 3s, right 3s;
}

.animation-container-3.open {
    top: 230px;
    right: 100px;
    transition: top 3s, right 3s;
}

.waveImage {
    left: -100px;
    top: -50px;
    position: absolute;
    display: none;
}

.waveImage.open {
    display: block;
}

.crane-container {
    height: 1000px;
    position: fixed;
    width: 100px;
}

.Crane {
    scale: 1;
    position: absolute;
    height: 900px;
    top: -100px;
    left: 10px;
    transition: scale 2s;
}

.Crane.open {
    scale: 6;
    transition: scale 2s;
}

.Hook-holder {
    position: absolute;
    left: 10px;
    top: -100px;
    height: 900px;
}

.Hook-holder.open {
    scale: 6;
    transition: scale 2s;
}

.Hook {
    position: absolute;
    left: 10px;
    top: -200px;
    height: 900px;
    transition: left 3s, scale 2s, top 3s;
}

.Hook.open {
    scale: 6;
    transition: scale 2s;
}

.Hook.move {
    left: 130px;
    top: -150px;
    transition: left 3s, top 3s;
}

.i-letter-bottom {
    background-color: black;
    width: 7px;
    height: 26px;
    left: 662.5px;
    top: 462px;
    position: absolute; 
}

.i-letter {
    background-color: black;
    width: 7px;
    height: 7px;
    left: 545px;
    top: -350px;
    position: fixed;
}

.i-letter.reset {
    left: 545px;
    top: -5000px;
    position: fixed;
    opacity: 1; 
    transition: scale 2s, opacity 5s;
}

.i-letter.open {
    scale: 1;
    left: 550px;
    top: 400px;
    transition: scale 2s, opacity 5s;
}

.i-letter.move {
    left: 670px;
    top: 460px;
    opacity: 1;
    transition: left 3s, top 3s, opacity 0.1s;
}

/* Coming soon page */

.cs-body { 
    overflow: hidden;
}

.cs-page {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--blue-pale);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 100vh;
}
 
/* Subtle radial glow at the top */
.cs-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(110, 198, 240, 0.12) 0%, transparent 65%);
    pointer-events: none;
}
 
/* --- Logo & Badge --- */
 
.cs-loader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.5rem;
}
 
.cs-logo-svg {
    width: 90px;
    height: 90px;
    display: block;
}
 
.cs-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-light);
    background: rgba(110, 198, 240, 0.12);
    border: 0.5px solid rgba(110, 198, 240, 0.3);
    border-radius: 999px;
    padding: 5px 14px;
    margin-top: 1.25rem;
}
 
.cs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
    animation: cs-pulse 1.8s ease-in-out infinite;
}
 
@keyframes cs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.65); }
}
 
/* --- Copy --- */
 
.cs-headline {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}
 
.cs-sub {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 360px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* legal pages */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    min-height: 100vh;
}

/* ── Header ── */
.site-header {
    border-bottom: 1px solid var(--blue-deep);
    padding: 30px 0;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 100;
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--baby-blue);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.header-sep {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.header-breadcrumb {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

/* ── Layout ── */
.page-layout {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
}

@media (max-width: 720px) {
    .page-layout { grid-template-columns: 1fr; padding: 32px 20px 60px; }
    .sidebar { display: none; }
}

/* ── Sidebar TOC ── */
.sidebar {
    position: sticky;
    top: 76px;
}

.toc-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toc-list a {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 5px 10px;
    border-left: 2px solid var(--blue-light);
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.toc-list a:hover,
.toc-list a.active {
    color: var(--blue-mid);
    border-left-color: var(--blue-mid);
}

/* ── Doc header ── */
.doc-header {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--blue-light);
}

.doc-type-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--baby-blue);
    margin-bottom: 12px;
    display: block;
}

.doc-title {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.doc-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.doc-meta-item {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.doc-meta-item span { color: var(--text-secondary); }

/* ── Sections ── */
.doc-section {
    margin-bottom: 44px;
    scroll-margin-top: 90px;
}

.section-heading {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--baby-blue);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--blue-light);
}

.section-title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.section-body p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.8;
}

.section-body p:last-child { margin-bottom: 0; }

.section {
    width: 100%;
}

/* ── Subsections ── */
.subsection {
    background: var(--bg-card);
    border: 1px solid var(--blue-mid);
    border-radius: 6px;
    padding: 18px 20px;
    margin-bottom: 12px;
}

.subsection-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.subsection p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.75;
}

.subsection p:last-child { margin-bottom: 0; }

/* ── Lists ── */
.doc-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.doc-list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
    line-height: 1.65;
}

.doc-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    top: 2px;
}

.list-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
}

@media (max-width: 500px) { .list-cols { grid-template-columns: 1fr; } }

/* ── Callouts ── */
.callout {
    border-left: 3px solid var(--blue-dull);
    background: var(--bg-card);
    padding: 14px 18px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}

.callout p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.75;
}

.callout-warn {
    border-left-color: #c0784a;
    background: rgba(192, 120, 74, 0.08);
}

.callout-warn p { color: #b89070; }

@media (prefers-color-scheme: light) {
    .callout-warn { background: rgba(180, 90, 40, 0.07); }
    .callout-warn p { color: #8a5030; }
}

/* ── Do / Don't split card ── */
.do-dont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0;
}

@media (max-width: 540px) { .do-dont { grid-template-columns: 1fr; } }

.do-card, .dont-card {
    border-radius: 6px;
    padding: 16px 18px;
    border: 1px solid var(--border-blue);
}

.do-card {
    background: rgba(93, 173, 226, 0.06);
    border-left: 3px solid var(--blue-deep);
}

.dont-card {
    background: rgba(192, 120, 74, 0.07);
    border-left: 3px solid #c0784a;
}

@media (prefers-color-scheme: light) {
    .do-card   { background: rgba(26, 111, 168, 0.05); }
    .dont-card { background: rgba(180, 90, 40, 0.06); }
}

.card-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.do-card .card-label   { color: var(--blue-deep); }
.dont-card .card-label { color: #c0784a; }

@media (prefers-color-scheme: light) {
    .dont-card .card-label { color: #a0582a; }
}

.do-card .doc-list li::before   { color: var(--blue-deep); content: '+'; font-size: 0.9rem; top: 0; }
.dont-card .doc-list li::before { color: #c0784a; content: '×'; font-size: 0.9rem; top: 0; }

@media (prefers-color-scheme: light) {
    .dont-card .doc-list li::before { color: #a0582a; }
}

/* ── Enforcement tiers ── */
.enforcement-tiers {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 14px 0;
}

.tier {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
    background: var(--bg-card);
    border: 1px solid var(--blue-deep);
    border-bottom: none;
}

.tier:first-child { border-radius: 6px 6px 0 0; }
.tier:last-child  { border-bottom: 1px solid var(--blue-deep); border-radius: 0 0 6px 6px; }

.tier-severity {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; }

/* ── Escalation steps ── */
.escalation {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 14px 0;
}

.escalation-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-bottom: none;
    position: relative;
}

.escalation-step:first-child { border-radius: 6px 6px 0 0; }
.escalation-step:last-child  { border-bottom: 1px solid var(--blue-dull); border-radius: 0 0 6px 6px; }

.step-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--blue-dull);
    border-radius: 3px;
    padding: 2px 7px;
    flex-shrink: 0;
    margin-top: 1px;
    letter-spacing: 0.05em;
}

.step-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ── Two-col action groups ── */
.action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 540px) { .action-group { grid-template-columns: 1fr; } }

.action-card {
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-radius: 6px;
    padding: 16px 18px;
}

.action-card-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Process steps (horizontal flow) ── */
.process-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 16px 0;
}

@media (max-width: 600px) {
    .process-flow { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
    .process-flow { grid-template-columns: 1fr; }
}

.process-step {
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-right: none;
    padding: 16px 14px;
    position: relative;
}

.process-step:last-child { border-right: 1px solid var(--blue-dull); }
.process-step:first-child { border-radius: 6px 0 0 6px; }
.process-step:last-child  { border-radius: 0 6px 6px 0; }

@media (max-width: 600px) {
    .process-step { border-right: 1px solid var(--blue-dull); border-bottom: none; border-radius: 0; }
    .process-step:first-child { border-radius: 6px 6px 0 0; }
    .process-step:last-child  { border-bottom: 1px solid var(--blue-dull); border-radius: 0 0 6px 6px; }
}

.process-num {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--blue-deep);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.process-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ── Checklist (for required info items) ── */
.checklist {
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-radius: 6px;
    padding: 18px 20px;
    margin: 14px 0;
}

.checklist-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.checklist-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.checklist-list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 22px;
    position: relative;
    line-height: 1.55;
}

.checklist-list li::before {
    content: '□';
    position: absolute;
    left: 0;
    color: var(--blue-light);
    font-size: 0.8rem;
    top: 1px;
}


/* ── Escalation steps ── */
.escalation {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 14px 0;
}

.escalation-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-bottom: none;
    position: relative;
}

.escalation-step:first-child { border-radius: 6px 6px 0 0; }
.escalation-step:last-child  { border-bottom: 1px solid var(--blue-dull); border-radius: 0 0 6px 6px; }

.step-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--blue-dull);
    border-radius: 3px;
    padding: 2px 7px;
    flex-shrink: 0;
    margin-top: 1px;
    letter-spacing: 0.05em;
}

.step-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* ── Two-col action groups ── */
.action-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 540px) { .action-group { grid-template-columns: 1fr; } }

.action-card {
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-radius: 6px;
    padding: 16px 18px;
}

.action-card-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Contact block ── */
.contact-block {
    background: var(--bg-card);
    border: 1px solid var(--blue-dull);
    border-radius: 6px;
    padding: 20px 22px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
}

.contact-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.contact-email {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--baby-blue);
    text-decoration: none;
}

.contact-email:hover { text-decoration: underline; }

.doc-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--blue-dull); }
.doc-footer p { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); }

.doc-nav {
    border-bottom: 1px solid var(--blue-dull);
    background: var(--bg-primary);
    overflow-x: auto;
    scrollbar-width: none;
}

.doc-nav::-webkit-scrollbar { display: none; }

.doc-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 0;
}

.doc-nav a {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    padding: 12px 16px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.doc-nav a:hover {
    color: var(--text-secondary);
}

.doc-nav a[aria-current="page"] {
    color: var(--baby-blue);
    border-bottom-color: var(--baby-blue);
}

/* global footer */

/* ── Site footer ── */
.site-footer {
  border-top: 1px solid var(--border-blue);
  padding: 48px 0 32px;
  background: var(--bg-surface);
}

.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Disclaimer */
.footer-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border-blue);
}

.footer-disclaimer-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-disclaimer p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Links grid */
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 680px) {
  .footer-links { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .footer-links { grid-template-columns: 1fr; }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-col-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.footer-col a {
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}

.footer-col a:hover { color: var(--baby-blue); }

/* Base bar */
.footer-base {
  padding-top: 28px;
  border-top: 1px solid var(--border-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-logo {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--baby-blue);
  letter-spacing: -0.02em;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}