/* Rafa brand fonts — DM Serif Display (titles), DM Sans (body/UI), Playfair Display (wordmark).
   See docs/strategy/visual-identity.md. Must stay above all other rules (CSS @import ordering). */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

@import 'components/belt_picker.tailwind.css';
@import 'components/count_in_modal.tailwind.css';
@import 'components/onboarding.tailwind.css';
@import 'components/orientation_lock.tailwind.css';
@import 'components/school_search.tailwind.css';
@import 'pages/home.tailwind.css';
@import 'pages/professor_mode.tailwind.css';
@import 'pages/terms_and_conditions.tailwind.css';
@import 'pages/videos.tailwind.css';
@import 'pages/watch.tailwind.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Rafa design tokens as CSS custom properties — mirror of docs/strategy/rafa-tokens.js
   (cssVariables export). For raw CSS that can't use the `rafa-*` Tailwind utilities.
   Note: this exposes the tokens; it does NOT flip the global theme to dark. Converting
   surfaces to the dark/amber system is the per-screen / purple-sweep follow-up. */
:root {
    --rafa-bg:              #141618;
    --rafa-surface:         #1C1F24;
    --rafa-surface-raised:  #252A30;
    --rafa-border:          #2F3540;

    --rafa-text-primary:    #EAE6DF;
    --rafa-text-secondary:  #828996;
    --rafa-text-muted:      #4A5160;

    --rafa-accent:          #D4973A;
    --rafa-accent-muted:    #211608;
    --rafa-accent-text:     #141618;

    --rafa-success:         #4E9E7A;
    --rafa-success-muted:   #0E1F18;
    --rafa-error:           #C45A5A;
    --rafa-error-muted:     #201010;

    --rafa-font-display:    'DM Serif Display', serif;
    --rafa-font-sans:       'DM Sans', system-ui, sans-serif;
    --rafa-font-mark:       'Playfair Display', serif;

    --rafa-radius-sm:       6px;
    --rafa-radius-md:       10px;
    --rafa-radius-lg:       14px;
    --rafa-radius-xl:       18px;
}

@layer components {
    .show-skipped-session-link{
         @apply text-sm flex justify-center cursor-pointer relative bg-white px-2 text-slate-700;

        &:hover {
            @apply underline;
        }
    }

    .partition-header {
        @apply relative mb-8;

        display: flex;
        justify-content: center;

        &::before {
            @apply block bg-slate-400 absolute w-full top-1/2;

            height: 1px;
            content: '';
        }
    }
}

body {
    background: #f5f4f4;
}

body.confirmations, body.home {
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,20,1) 62%);
}

/* Screens converted to the dark/amber system. */
body.sessions,
body.students,
body.promotions {
    background: var(--rafa-bg);
    color: var(--rafa-text-primary);
}

.main-content {
    @apply container mx-auto md:mt-10 py-1 px-3 md:p-6;
}

body.promotions {
    .main-content {
        @apply p-0;
    }
}

/* Onboarding hides the global nav (see hide_global_navigation?), so add the
   top breathing room the nav used to provide. */
body.onboarding {
    .main-content {
        @apply pt-8;
    }
}


.results-header {
    @apply grid grid-cols-[auto,1fr] items-center pt-4 md:pt-2 pb-5 sticky md:static top-0 z-10;
    background: #f5f4f4;
}

.pagination {
    @apply flex justify-center my-2 py-2 mb-24;
}

.pagination span {
    @apply
        text-gray-700
        mx-2
        no-underline
        bg-white
        rounded-lg
        text-center
        flex
        items-center
        justify-center;

    min-width: 30px;
}

.pagination a, .pagination span.current {
    @apply px-3 py-2;
}

.pagination a {
    @apply block;
}

.pagination a:hover {
    @apply font-semibold text-white bg-black;
}

.highlighted {
    background: #C1E1C1;
}

.submit {
    @apply bg-black text-white py-3 px-4 rounded-lg cursor-pointer;

    &.--disabled {
        @apply opacity-50 cursor-not-allowed;
    }
}

.text-input {
    @apply text-black rounded-lg mt-2 w-full;
}

.pill-link {
    @apply rounded-3xl px-4 py-2 border-solid border-[1px] border-black text-black;

    &:hover {
      @apply underline;
    }

    &.selected {
        @apply bg-black border-black font-semibold border-2 text-white;

        &:hover P{
            @apply no-underline;
        }
    }
}

.modal-wrapper {
    background: #f5f4f4;
    bottom: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1;
}

.modal-background {
    @apply z-20;

    background-color: rgba(0,0,0,0.5);
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

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

.modal-close {
    @apply text-3xl;

    justify-self: flex-end;
    margin-top: 8px;
    margin-right: 15px;
}

.modal-content {
    overflow: scroll;
    padding: 10px 15px;
}

.five-second-test {
    .modal-content {
        padding: 0;
        text-align: left;

        h2 {
            margin-bottom: 40px;
        }

        p {
            margin-bottom: 20px;
        }
    }
}

.mobile-order-links {
    @apply text-sm;

    li {
        margin: 12px 0;
        text-align: center;
    }

    a {
        display: block;
    }
}

.video-filters {
    @apply w-full;
    z-index: 100;
}

.results {
    @apply grid md:grid-cols-3 gap-2;
}

.filter-count {
    @apply rounded-full bg-white text-black text-center text-[10px];
    padding: 1% 2.5%;
}

.filter-group-header {
    @apply mt-1 font-semibold cursor-pointer p-4 flex gap-2 items-center bg-black text-white rounded-lg;
}

.filter-group-filters {
    @apply p-4;
    background: #f5f4f4;
}

.filter-group-wrapper.--open {
    .filter-group-filters {
        display: block;
    }

    .filter-group-header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.filter-group-wrapper {
    .filter-group-filters {
        display: none;
    }
}

body.registrations, body.email_confirmation, body.onboarding, body.professor_mode {
    /* Rafa dark palette — see docs/strategy/visual-identity.md (dark-only). */
    background: var(--rafa-bg);
    color: var(--rafa-text-primary);

    select {
        color: #000;
    }

    .submit {
        @apply font-semibold text-lg;
        /* Amber CTA — the one accent per view. */
        background: var(--rafa-accent);
        color: var(--rafa-accent-text);

        &.--disabled {
            @apply opacity-40 cursor-not-allowed;
        }
    }
}

.onboarding-progress {
    @apply grid grid-cols-6 gap-2 mt-4;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

    .step {
        @apply rounded-xl;
        background: var(--rafa-border);
        height: 8px;
    }

    .step.--active {
        background: var(--rafa-accent);
    }
}

body.onboarding, body.professor_mode {
    #main_menu {
        @apply hidden;
    }
}

.flash {
    @apply py-2 px-3 bg-green-500 text-black font-medium rounded-lg absolute top-[13px] z-50 text-center;

    min-width: 400px;
}

.switch-field {
    @apply flex my-2 overflow-hidden;
}

.switch-field input {
    @apply absolute;

    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
    @apply text-black w-full text-center py-4 text-opacity-50;

    background-color: #e4e4e4;
    font-size: 14px;
    line-height: 1;
    margin-right: -1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
    @apply text-white text-opacity-100;

    background-color: #000;
    box-shadow: none;
}

.switch-field label:first-of-type {
    @apply rounded-l-lg;
}

.switch-field label:last-of-type {
    @apply rounded-r-lg;
}
/* Belt picker — dark/amber design system (see docs/strategy/visual-identity.md).
   Belt colours are belt-accurate *within* the dark theme: deep and muted, like a
   worn belt, never bright UI swatches. The purple belt is a real belt purple, not
   the banned UI purple. Shared by onboarding (belt selection) and the account
   page's belt history. */

/* Belt-accurate, theme-muted colours. */
:root {
    --belt-white:  #E6E1D8;
    --belt-blue:   #2A4C82;
    --belt-purple: #4E3A6E;
    --belt-brown:  #5A3D29;
    --belt-black:  #16181B;
    --belt-red:    #A33B33; /* black-belt bar + degree stripes */
    --belt-tab:    #141618; /* the dark tape that holds the stripes */
}

.belt-picker__belt-option {
    @apply
        border
        border-rafa-border
        border-solid
        cursor-pointer
        grid
        grid-cols-[1fr,96px,36px]
        items-center
        justify-items-start
        last:mb-0
        mb-2
        relative
        text-rafa-primary
        text-xs
        uppercase;

    border-radius: 8px;
    min-height: 52px;
    overflow: hidden;
}

.belt-picker__options-container {
    @apply pl-3 md:pl-4 mt-2;
}

.belt-picker__options-container {
    .belt-picker__belt-option {
        @apply opacity-90;
    }
}

/* Belt colours — the band that reads as the belt itself. */
.belt-picker__belt-option.--white  { background: var(--belt-white);  @apply text-rafa-bg; }
.belt-picker__belt-option.--blue   { background: var(--belt-blue); }
.belt-picker__belt-option.--purple { background: var(--belt-purple); }
.belt-picker__belt-option.--brown  { background: var(--belt-brown); }

.belt-picker__belt-option.--black {
    background: var(--belt-black);
    @apply border-rafa-border;

    .belt-picker__belt-bar {
        background: var(--belt-red);
    }

    .belt-picker__stripe {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* The student's current belt — the single amber accent on the page (active
   state, used sparingly per the restraint rule). */
.belt-picker__belt-option--current {
    border-color: var(--rafa-accent);
    box-shadow: 0 0 0 1px var(--rafa-accent), 0 0 24px rgba(212, 151, 58, 0.14);
}

.belt-picker__belt-bar {
    @apply right-[36px] border-l border-rafa-border border-solid;

    background: var(--belt-tab);
    height: 100%;
    width: 96px;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding-right: 10px;
}

/* Stripes span the full height of the tab, like a real belt. */
.belt-picker__stripe {
    background: rgba(255, 255, 255, 0.92);
    height: 100%;
    margin-right: 4px;
    width: 10px;
}

.belt-picker__radio-button {
    @apply absolute;
    left: -9999px;
}

/* Compact belt variant — the small belt shown beside the student's name. */
.belt-picker__belt-option--compact {
    @apply
        h-6
        cursor-default
        grid
        gap-0
        text-xs
        inline-grid;

    /* Reset the main option's min-height so the compact belt keeps its slim
       proportions (it shares the .belt-picker__belt-option base class). */
    min-height: 0;
    height: 24px;
    border-radius: 4px;
    width: 120px;
    grid-template-columns: 1fr 1fr 10px;
    transform: scale(0.85);
    transform-origin: left;
    overflow: hidden;
}

.belt-picker__belt-main {
    @apply flex items-center justify-center;
    height: 100%;
}

.belt-picker__belt-bar--compact {
    @apply
        border-l
        border-rafa-border
        flex
        items-center
        justify-end;

    background: var(--belt-tab);
    height: 100%;
    padding: 0 3px;
    gap: 1px;
    width: 100%;
}

.belt-picker__belt-option--compact .belt-picker__stripe {
    width: 5px;
    height: 100%;
    margin-right: 2px;
}

.belt-picker__belt-option--compact.--black .belt-picker__belt-bar--compact {
    background: var(--belt-red);
}

/* Inline date picker (add / edit a promotion). */
.promotion-date-select {
    @apply
        rounded-md
        bg-rafa-raised
        border
        border-rafa-border
        text-rafa-primary
        py-2
        px-3;

    font-size: 14px;
}

.promotion-date-select:focus {
    @apply outline-none border-rafa-accent;
}
/* app/assets/stylesheets/count_in_modal.css */

.modal-overlay {
    /* Near-black ground (not pure #000) per the dark-only palette. */
    @apply fixed top-0 left-0 w-screen h-screen flex z-[1000] opacity-0;
    background: var(--rafa-bg);
    transition: opacity 300ms ease-out;
}

.modal-overlay.transparent {
    @apply bg-transparent;
}

.modal-overlay.modal-visible {
    @apply opacity-100;
}

/* OUT - hands ease away after clapping */
.modal-half {
    @apply flex-1 flex items-center justify-center relative z-50;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* IN - hands accelerate toward each other and stop abruptly */
.modal-half.slide-in {
    transform: translateX(0) !important;
    transition: transform 0.2s cubic-bezier(0.55, 0.06, 0.9, 0.3);
}

.modal-half.slide-out-left {
    transform: translateX(-100%) !important;
}

.modal-half.slide-out-right {
    transform: translateX(100%) !important;
}

/* Warm off-white "hands" — textPrimary, not a clinical pure white. */
.modal-left {
    background: var(--rafa-text-primary);
    transform: translateX(-100%);
}

.modal-right {
    background: var(--rafa-text-primary);
    transform: translateX(100%);
}

.modal-content {
    @apply text-center max-w-2xl p-8 transition-opacity duration-300 w-11/12;
    color: var(--rafa-text-primary);
}

/* "You said" eyebrow above the reflected-back problem. */
.modal-eyebrow {
    @apply uppercase font-bold mb-3;
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--rafa-text-muted);
}

.modal-content-center {
    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40;
}

.modal-content.hidden {
    @apply opacity-0 pointer-events-none;
}

.modal-text h2 {
    /* Display serif — this is one of the "big moments". */
    @apply text-4xl mb-4 leading-tight;
    font-family: var(--rafa-font-display);
    color: var(--rafa-text-primary);
}

.modal-text p {
    @apply text-xl mb-8;
    color: var(--rafa-text-secondary);
}

.lets-go-btn {
    /* Amber CTA — the single accent on the view. */
    @apply border-0 px-8 py-4 text-lg font-semibold rounded-lg cursor-pointer transition-transform duration-200;
    background: var(--rafa-accent);
    color: var(--rafa-accent-text);
}

.lets-go-btn:hover {
    @apply -translate-y-0.5;
}

.lets-go-btn:active {
    @apply translate-y-0;
}

.countdown-display {
    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-300;
}

.countdown-display-center {
    @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-40;
}

.countdown-display.hidden {
    @apply opacity-0 pointer-events-none;
}

.countdown-number {
    @apply block font-black;
    font-size: 20rem;
    color: var(--rafa-text-primary);
    /* Each number lands like a strike: snaps to full size with a hard stop,
       no overshoot/bounce (spec: ritual gravity, never "animated"). */
    transform: scale(0.72);
    opacity: 0;
    transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.1s ease-out;
}

.countdown-number.number-animate {
    @apply scale-100;
    opacity: 1;
}

/* Split animations */
.slide-left {
    @apply -translate-x-full;
}

.slide-right {
    @apply translate-x-full;
}

/* Trigger button styling */
.open-modal-btn {
    @apply bg-green-500 text-white border-0 px-8 py-4 text-lg font-semibold rounded-lg cursor-pointer transition-all duration-300;
    box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
}

.open-modal-btn:hover {
    @apply bg-green-600 -translate-y-0.5;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Signup text sizing */
.signup-text-large {
    @apply text-4xl font-bold mt-4 mb-0;
}

.signup-text-medium {
    @apply text-3xl font-semibold mt-8 mb-0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-text h2 {
        @apply text-3xl;
    }

    .modal-text p {
        @apply text-lg;
    }

    .signup-text-large {
        @apply text-3xl;
    }

    .signup-text-medium {
        @apply text-2xl;
    }

    .countdown-number {
        font-size: 12rem;
    }

    .lets-go-btn {
        @apply px-6 py-3 text-lg;
    }
}
/* Onboarding — Rafa dark/amber styling.
   See docs/features/v1/onboarding.md and docs/strategy/visual-identity.md.
   Single amber accent per view; warm off-white text on near-black surfaces. */

/* Eyebrow / section label — DM Sans bold, tracked, uppercase. */
.onboarding-eyebrow {
    @apply uppercase font-bold;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rafa-text-muted);
}

/* The question itself — calm, conversational, not a form label. */
.onboarding-prompt {
    @apply text-lg font-light mt-2;
    color: var(--rafa-text-primary);
}

.onboarding-subprompt {
    @apply text-sm font-light mt-1;
    color: var(--rafa-text-secondary);
}

.onboarding-question + .onboarding-question {
    @apply mt-8;
}

/* Tap options (relative weight, gender, focus) — surface chips with a single
   amber selected state. The native radio is visually hidden (sr-only). */
.onboarding-options {
    @apply mt-4 flex flex-col gap-3;
}

.onboarding-option {
    @apply flex items-center gap-3 rounded-lg px-4 py-3 cursor-pointer transition-colors;
    background: var(--rafa-surface-raised);
    border: 1px solid var(--rafa-border);
    color: var(--rafa-text-primary);
}

.onboarding-option:hover {
    border-color: var(--rafa-text-secondary);
}

.onboarding-option.--selected {
    border-color: var(--rafa-accent);
    box-shadow: 0 0 40px rgb(212 151 58 / 0.18);
}

/* The native radio inside an option drives :has-based selection without JS as a
   progressive-enhancement fallback. */
.onboarding-option:has(input:checked) {
    border-color: var(--rafa-accent);
}

/* "What are you working on?" prompt chips — the moment-of-magic question.
   Larger tap targets, mat-language copy, single tap to advance. */
.onboarding-chips {
    @apply flex flex-col gap-3;
}

.onboarding-chip {
    @apply block rounded-lg px-4 py-4 cursor-pointer transition-colors text-base font-light;
    background: var(--rafa-surface);
    border: 1px solid var(--rafa-border);
    color: var(--rafa-text-primary);
}

.onboarding-chip:hover {
    border-color: var(--rafa-accent);
}

.onboarding-chip:has(input:checked) {
    border-color: var(--rafa-accent);
    box-shadow: 0 0 40px rgb(212 151 58 / 0.18);
}

/* Quiet skip — present but not encouraged (scope boundary v1). */
.onboarding-skip {
    @apply text-sm bg-transparent border-0 cursor-pointer underline-offset-4 hover:underline;
    color: var(--rafa-text-secondary);
}

/* Welcome — the first thing the user reads. Donal's voice, not a form.
   See tone-of-voice.md §6.1. */
.onboarding-welcome {
    @apply mb-8 font-light;
    color: var(--rafa-text-secondary);
    line-height: 1.65;
}

.onboarding-welcome p {
    @apply mb-3;
}

.onboarding-welcome strong {
    @apply font-semibold;
    color: var(--rafa-text-primary);
}

/* Greeting on the welcome interstitial — display serif, the one place a "big
   moment" treatment is warranted (visual-identity.md). A calm full stop, not
   an exclamation. */
.onboarding-welcome__greeting {
    @apply text-4xl mt-2 mb-6;
    font-family: var(--rafa-font-display);
    color: var(--rafa-text-primary);
    line-height: 1.15;
}

/* Dedicated welcome interstitial — its own screen before any question, so it
   reads as a moment rather than a header above a form. */
.onboarding-welcome--full {
    @apply text-lg mt-4;
    color: var(--rafa-text-primary);
}

.onboarding-welcome--full p {
    @apply mb-5;
}
/* Mobile orientation lock.

   Many pages are not usable in landscape on a phone, so rather than try to make
   every screen work sideways we block landscape on small touch devices and ask
   the user to rotate back to portrait. There is no reliable way for a web page
   to hard-lock orientation in a mobile browser (Screen Orientation API only
   works in fullscreen on Android and throws on iOS; a manifest `orientation`
   only applies to installed PWAs), so this overlay is the cross-browser way to
   achieve it.

   Targeting: landscape orientation + a short viewport (the short edge of a phone
   in landscape is well under tablet height) + a coarse pointer, so it catches
   phones in landscape without affecting tablets or a desktop window that just
   happens to be short and wide.

   Fullscreen video is unaffected: native/`:fullscreen` elements render in the
   browser top layer above this overlay, and the `:has(:fullscreen)` rule hides
   it as a belt-and-braces fallback — so a video can still be watched in
   landscape via fullscreen. */
@media screen and (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  body::before {
    content: "Please rotate your device\A to view this page in portrait";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    white-space: pre-line;
    text-align: center;
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--rafa-text-primary, #EAE6DF);
    background-color: var(--rafa-bg, #141618);
  }

  /* Don't cover content that is intentionally fullscreen (e.g. a video). */
  html:has(:fullscreen) body::before {
    display: none;
  }
}
.school-search__selection {
    @apply px-3 py-2 rounded-md grid items-center;
    grid-template-columns: 1fr auto;
}

.school-search__selection.hidden {
    display: none;
}

.school-search__selection {
    @apply bg-white text-gray-800;
}

.school-suggestion {
    @apply hover:bg-gray-200;
}

.school-results {
    @apply overflow-scroll bg-gray-100 text-gray-800 relative z-50;
}

.school-search {
    @apply transition-all;
}

/* Dark-theme school picker — used by onboarding and by the inline "Home gym"
   field on the account page (both run the dark/amber system). */
body.onboarding, body.students {
    .school-search {
        @apply bg-transparent;
    }

    .school-search__selection {
        background: var(--rafa-surface-raised);
        color: var(--rafa-text-primary);
        border: 1px solid var(--rafa-border);
    }

    .school-search__feedback {
        @apply text-rafa-secondary;
    }

    .school-results {
        background: var(--rafa-surface);
        color: var(--rafa-text-primary);
    }

    .school-suggestion {
        @apply hover:bg-rafa-raised;
    }
}

/* On the account page the gym search takes over the whole screen when focused —
   the same full-screen pattern onboarding uses — so on mobile the results can
   never end up hidden behind the keyboard (the previous inline dropdown did).
   Dark-themed and `fixed` to the viewport (the account page scrolls, so `top-0`
   absolute would land it off-screen). Desktop has no keyboard to dodge, so it
   reverts to the inline-in-card dropdown. */
body.students {
    .school-search--active {
        @apply fixed inset-0 z-50 flex flex-col p-4 bg-rafa-bg;
        @apply md:static md:z-auto md:block md:p-0 md:bg-transparent;
    }

    /* Searcher (close bar + input + hint) pinned at the top; the results fill the
       rest of the sheet and scroll within it, so the input stays above the
       keyboard. Reverts to a short dropdown on desktop. */
    .school-search--active > div {
        @apply flex-shrink-0;
    }

    .school-search--active .searcher--close {
        @apply block md:hidden;
    }

    .school-search--active .school-results {
        @apply flex-1 min-h-0 mt-2 rounded-md border border-rafa-border;
        @apply md:flex-none md:max-h-64;
    }

    input[type="search"].school-search__input {
        background: var(--rafa-surface-raised);
        color: var(--rafa-text-primary);
        border: 1px solid var(--rafa-border);
    }
}

.school-search--active {
    @apply absolute inset-x-0 top-0 bg-white p-2 h-screen;
    @apply md:static md:p-0;

    .searcher-inner {
        @apply p-2;
    }

    .searcher--close {
        @apply block;
        @apply md:hidden m-0;

        margin: -8px -8px 8px;
    }

    .school-search__feedback {
        @apply text-gray-700;
    }
}

.searcher--close {
    /* Full-bleed tap-to-close bar on mobile. Rafa chrome — surfaceRaised with a
       divider, not the amber accent (reserved for the primary action). A bigger
       tap target than the old ~20px strip. TODO: revisit the affordance (e.g.
       an explicit close icon) in the school-picker UX pass. */
    @apply text-xs leading-normal text-center hidden uppercase py-3 font-semibold tracking-widest;
    background: var(--rafa-surface-raised);
    color: var(--rafa-text-primary);
    border-bottom: 1px solid var(--rafa-border);
    @apply md:hidden m-0;
}

.school-search__feedback {
    @apply m-2 text-xs text-white;
}

input[type="search"].school-search__input {
    @apply text-black w-full rounded-md p-3 border-solid;
}
.home__hero {
    @apply py-14 md:py-32 px-6;

    background: rgb(0,0,0);
    /*background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,20,1) 62%);*/
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,20,1) 62%);
}




.devices-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -6%;
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 40px 20px;
}

/* Desktop Frame */
.desktop-frame {
    position: relative;
    width: 900px;
    height: 550px;
    background: #2a2a2a;
    border-radius: 12px;
    padding: 20px 20px 60px 20px;
    box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.desktop-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    /*padding: 8px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Browser Window */
.browser-window {
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

/* Browser Chrome */
.browser-chrome {
    background: #e8e8e8;
    border-bottom: 1px solid #d0d0d0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Window Controls */
.window-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.window-control {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

.window-control.close {
    background: #ff5f57;
}

.window-control.minimize {
    background: #ffbd2e;
}

.window-control.maximize {
    background: #28ca42;
}

/* Add hover effects for window controls */
.window-control.close:hover::after {
    content: '×';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #8b0000;
    font-weight: bold;
}

.window-control.minimize:hover::after {
    content: '−';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #8b6914;
    font-weight: bold;
}

.window-control.maximize:hover::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6px;
    color: #0f5132;
    font-weight: bold;
}

/* Address Bar */
.address-bar {
    flex: 1;
    display: flex;
    align-items: center;
}

.address-input {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 4px 8px;
    width: 100%;
    max-width: 300px;
    font-size: 10px;
    color: #333;
}

.url-text {
    color: #666;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Browser Content */
.browser-content {
    flex: 1;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.desktop-frame::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #555;
    border-radius: 50%;
}


/* iPhone Frame */
.iphone-frame {
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 515px;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 20px 12px;
    box-shadow:
            0 30px 100px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.15),
            inset 0 0 0 2px #333;
    z-index: 10;
}


.iphone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
}

/* Dynamic Island */
.iphone-frame::before {
    content: '';
    display: block;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 25px;
    background: #000;
    border-radius: 0 0 20px 20px;
    z-index: 20;
}

/* Home Indicator */
.iphone-frame::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #555;
    border-radius: 2px;
}

/* Screenshot Images */
.screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: top left;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.screenshot.active {
    opacity: 1;
}

/* App Screenshots */
.desktop-screenshot-1 { background-image: url(/images/desktop-screenshot-01.png); }
.desktop-screenshot-2 { background-image: url(/images/desktop-screenshot-02.png); }
.desktop-screenshot-3 { background-image: url(/images/desktop-screenshot-03.png); }
.desktop-screenshot-4 { background-image: url(/images/desktop-screenshot-04.png); }

.mobile-screenshot-1 { background-image: url(/images/mobile-screenshot-01.png); }
.mobile-screenshot-2 { background-image: url(/images/mobile-screenshot-02.png); }
.mobile-screenshot-3 { background-image: url(/images/mobile-screenshot-03.png); }
.mobile-screenshot-4 { background-image: url(/images/mobile-screenshot-04.png); }

/* Content overlays for demo */
.screenshot-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: white;
    text-align: center;
    padding: 20px;
}

.screenshot-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.screenshot-content p {
    opacity: 0.8;
    line-height: 1.4;
}

/* Navigation Dots */
.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 60px;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-dot.active {
    background: white;
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .desktop-frame {
        width: 750px;
        height: 470px;
    }
    
    .address-input {
        max-width: 250px;
    }

    .window-control {
        width: 9px;
        height: 9px;
    }

    .iphone-frame {
        width: 260px;
        height: 446px;
        right: -40px;
    }
}

@media (max-width: 1024px) {
    .desktop-frame {
        width: 650px;
        height: 400px;
    }
    
    .address-input {
        max-width: 200px;
        font-size: 9px;
    }

    .window-control {
        width: 8px;
        height: 8px;
    }

    .browser-chrome {
        padding: 6px 10px;
        gap: 10px;
    }

    .iphone-frame {
        width: 240px;
        height: 412px;
        right: -30px;
    }
}

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .devices-container {
        left: auto;
        margin: 0 auto;
        padding: 20px;
    }

    .desktop-frame {
        display: none;
    }

    .iphone-frame {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 320px;
        height: 549px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .iphone-frame {
        width: 280px;
        height: 480px;
    }
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section > * {
    animation: fadeInUp 0.8s ease-out forwards;
}

.devices-container {
    animation-delay: 0.3s;
}

.carousel-nav {
    animation-delay: 0.6s;
}
/* Professor Mode Landing Page Styles */

/* Import handwriting font */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

/* Override global select text color to white for landing page */
body.professor_mode select {
    color: #fff;
}

.professor-mode-hero {
    @apply py-14 md:py-24 px-6;
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,20,1) 62%);
}

/* Video Demo Section */
.video-demo-section {
    @apply py-20;
    background: radial-gradient(ellipse 120% 100% at top center, rgba(88, 44, 135, 0.4) 0%, rgba(88, 44, 135, 0.15) 40%, rgba(0, 0, 0, 1) 80%),
                linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(17, 24, 39, 1) 100%);
}

/* AI Badge */
.ai-badge {
    position: absolute;
    top: -0.25rem;
    right: -1.5rem;
    background: rgba(147, 51, 234, 0.85);
    color: white;
    font-size: 0.55rem;
    font-weight: 500;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    letter-spacing: 0.2em;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
}

@media (min-width: 768px) {
    .ai-badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
        right: -2.25rem;
        top: -0.5rem;
    }
}

@media (min-width: 1024px) {
    .ai-badge {
        font-size: 0.85rem;
        padding: 0.35rem 0.55rem;
        right: -2.25rem;
        top: -0.75rem;
    }
}

/* Handwritten Annotation */
.handwritten-annotation {
    position: relative;
    display: none; /* Hidden on mobile */
    margin: -2rem auto 0.5rem;
    max-width: 1200px;
    height: 140px;
}

@media (min-width: 768px) {
    .handwritten-annotation {
        display: block;
    }
}

.handwritten-text {
    position: absolute;
    right: 8%;
    top: 0;
    font-family: 'Caveat', cursive;
    font-size: 1.75rem;
    font-weight: 700;
    color: #a78bfa; /* purple-400 */
    transform: rotate(-8deg);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.handwritten-arrow {
    position: absolute;
    right: 11%;
    top: 35px;
    width: 85px;
    height: 105px;
    color: #a78bfa; /* purple-400 */
    opacity: 0.85;
    transform: rotate(-3deg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Responsive adjustments */
@media (min-width: 1024px) {
    .handwritten-text {
        font-size: 2rem;
        right: 10%;
    }

    .handwritten-arrow {
        right: 13%;
        width: 95px;
        height: 115px;
    }
}

@media (min-width: 1280px) {
    .handwritten-text {
        font-size: 2.25rem;
        right: 12%;
    }

    .handwritten-arrow {
        right: 15%;
        width: 100px;
        height: 120px;
    }
}

/* iPhone Frame for Video */
.iphone-video-frame {
    position: relative;
    width: 310px;
    height: 548px;
    margin: 40px auto;
    background: #1a1a1a;
    border-radius: 40px;
    padding: 20px 12px;
    box-shadow:
            0 30px 100px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.15),
            inset 0 0 0 2px #333;
}

.iphone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.iphone-screen video {
    cursor: pointer;
}

/* Video Overlay */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    transition: opacity 300ms ease;
    pointer-events: none;
    z-index: 5;
}

.video-overlay.hidden {
    opacity: 0;
}

/* Custom Video Play Button */
.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 20;
    border: none;
    background: transparent;
}

.video-play-button-icon {
    width: 56px;
    height: 56px;
    background: rgba(88, 28, 135, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.video-play-button:hover .video-play-button-icon {
    background: rgba(109, 40, 217, 0.9);
    transform: scale(1.1);
}

.video-play-button-icon svg {
    color: white;
    margin-left: 3px; /* Optical centering for play icon */
}

.video-play-button-text {
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
    .video-play-button-text {
        font-size: 24px;
    }
}

.video-play-button.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Responsive iPhone Scaling */
@media (min-width: 768px) {
    .iphone-video-frame {
        width: 320px;
        height: 566px;
    }
}

@media (min-width: 1024px) {
    .iphone-video-frame {
        width: 400px;
        height: 708px;
    }
}

/* Value Proposition Cards */
.value-prop-card {
    @apply bg-gray-800/50 border-l-4 border-purple-500 p-6 rounded-lg;
}

.value-prop-card h3 {
    @apply text-xl font-semibold mb-4 text-white;
}

.value-prop-card p {
    @apply text-gray-300 leading-relaxed;
}

/* How It Works - Vertical Zigzag Layout */
.how-it-works-container {
    @apply max-w-4xl mx-auto;
}

.how-it-works-step {
    @apply mb-8;
}

.how-it-works-step .step-content {
    @apply bg-gray-800/50 p-6 rounded-lg;
}

.how-it-works-step .step-number {
    @apply bg-purple-900 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold shadow-lg mb-4 flex-shrink-0 mx-auto;
}

.how-it-works-step .step-content h3 {
    @apply text-xl font-semibold mb-3 text-white text-center;
}

.how-it-works-step .step-content p {
    @apply text-gray-300 text-base leading-relaxed text-left;
}

/* Tablet and Desktop: Zigzag Layout */
@media (min-width: 768px) {
    .how-it-works-container {
        @apply relative;
        max-width: 1000px;
    }

    /* Vertical center line */
    .how-it-works-container::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom,
            rgba(124, 58, 237, 0.2) 0%,
            rgba(124, 58, 237, 0.6) 20%,
            rgba(124, 58, 237, 0.6) 80%,
            rgba(124, 58, 237, 0.2) 100%
        );
        transform: translateX(-50%);
        z-index: 1;
    }

    .how-it-works-step {
        @apply mb-12 relative flex items-center;
        min-height: 120px;
    }

    .how-it-works-step .step-number {
        @apply absolute w-16 h-16 text-2xl mb-0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 8px rgba(17, 24, 39, 1), 0 4px 20px rgba(0, 0, 0, 0.5);
        z-index: 20;
    }

    .how-it-works-step .step-content {
        @apply relative z-10;
        width: 42%;
    }

    .how-it-works-step .step-content h3 {
        @apply text-left text-xl;
    }

    .how-it-works-step .step-content p {
        @apply text-base;
    }

    /* Left side steps (1, 3, 5) */
    .step-left {
        justify-content: flex-start;
    }

    .step-left .step-content {
        margin-right: auto;
    }

    /* Right side steps (2, 4) */
    .step-right {
        justify-content: flex-end;
    }

    .step-right .step-content {
        margin-left: auto;
    }

    /* Connecting lines from center to cards */
    .step-left::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 42%;
        width: 8%;
        height: 2px;
        background: rgba(124, 58, 237, 0.4);
        z-index: 5;
    }

    .step-right::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 42%;
        width: 8%;
        height: 2px;
        background: rgba(124, 58, 237, 0.4);
        z-index: 5;
    }
}

/* Large Desktop: More spacing */
@media (min-width: 1024px) {
    .how-it-works-container {
        max-width: 1100px;
    }

    .how-it-works-step {
        @apply mb-16;
        min-height: 140px;
    }

    .how-it-works-step .step-content {
        @apply p-8;
        width: 40%;
    }

    .how-it-works-step .step-content h3 {
        @apply text-2xl;
    }

    .how-it-works-step .step-content p {
        @apply text-lg;
    }

    .how-it-works-step .step-number {
        @apply w-20 h-20 text-3xl;
        box-shadow: 0 0 0 10px rgba(17, 24, 39, 1), 0 4px 24px rgba(0, 0, 0, 0.6);
    }

    /* Adjust connector lines for larger cards */
    .step-left::after {
        left: 40%;
        width: 10%;
    }

    .step-right::after {
        right: 40%;
        width: 10%;
    }
}

/* Secondary Features Grid */
.secondary-features {
    @apply py-20 bg-gray-900;
}

.feature-item {
    @apply grid gap-3 items-center;
}

.feature-item img {
    @apply w-12 h-12;
}

.feature-item .feature-title {
    @apply font-medium text-white text-lg;
}

.feature-item .feature-description {
    @apply text-base opacity-70 leading-normal text-gray-300;
}

/* Waitlist Form Styling */
.waitlist-section {
    @apply py-20 bg-gradient-to-b from-gray-900 to-black;
}

/* CTA Buttons */
.cta-button {
    @apply bg-purple-900 hover:bg-purple-800 text-white font-bold py-4 px-8 rounded-lg text-xl transition-colors inline-block;
}

.cta-button-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg text-lg transition-colors inline-block;
}

/* Social Proof */
.social-proof-section {
    @apply py-16 bg-gray-900/50;
}

.testimonial {
    @apply bg-gray-800/50 p-6 rounded-xl border-l-4 border-purple-500;
}

.testimonial-text {
    @apply text-gray-300 italic text-lg leading-relaxed mb-4;
}

.testimonial-author {
    @apply text-white font-semibold;
}

.testimonial-belt {
    @apply text-purple-400 text-sm;
}

/* Footer CTA */
.footer-cta {
    @apply py-20 bg-black text-center;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}
.pages.terms_and_conditions #terms {
    @apply mx-auto mb-20;

    max-width: 1000px;

    h1 {
        @apply text-2xl font-bold my-4;
    }

    h2 {
        @apply text-lg font-bold my-4;
    }

    p {
        @apply my-2 leading-relaxed;
    }

    ul {
        @apply list-disc pl-6;
    }
}
/* Video results page.
   The card classes below carry a LIGHT default because `_video_index` is
   also rendered in the "More Like This" rail on the (light) watch page.
   The dark/amber treatment is scoped to `body.videos` at the bottom of this
   file so it only applies on the results page — see docs/strategy/visual-identity.md. */

.search-result {
    @apply grid bg-white p-3 rounded-xl content-start;
    /* Grid items default to min-width:auto; without this a long unbreakable
       token in a title (URL, hashtag) forces the card wider than its track
       and overflows the viewport. */
    min-width: 0;
}

.search-result__info {
    @apply pt-2 relative;
}

.search-result__thumbnail {
    aspect-ratio: 16 / 9; /* Set your desired aspect ratio (e.g., 16:9) */
    overflow: hidden; /* Ensures the image doesn't overflow the container */
    position: relative;
    width: 100%; /* Adjusts to the width of the parent container */
    border-radius: 10px;
}

.search-result__thumbnail-image {
    height: 100%;
    left: 50%;
    object-fit: cover; /* Ensures the image covers the container without distortion */
    object-position: center; /* Centers the image in the container */
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%); /* Centers the image absolutely */
    width: 100%;
}

.search-result__duration {
    @apply text-xs font-light absolute right-[10px] bottom-[10px] text-white bg-black/80 px-1.5 py-0.5 rounded-md;
}

/* The Rafa-derived descriptor leads the card; DM Sans (UI), never serif.
   break-words so a long unbreakable token can never force horizontal scroll. */
.search-result__descriptor {
    @apply text-base md:text-lg font-medium leading-snug md:pr-5 break-words;
}

/* The creator's original YouTube title, demoted to quiet attribution. */
.search-result__source-title {
    @apply text-xs text-gray-500 mt-1 leading-snug break-words;
}

.search-result__channel {
    @apply text-sm mt-1.5 break-words;
}

.search-result__date {
    @apply text-xs font-light text-gray-500 mt-0.5;
}

.search-result__meta {
    @apply flex items-center justify-between gap-3 mt-3;
}

.search-result__likes {
    @apply text-xs flex items-center gap-1.5 text-gray-500;
}

.search-result__bookmark {
    @apply justify-self-end;
}

/* Bookmark: labelled, generous tap target. Neutral by default — never the old
   UI purple, and never amber (one-amber-per-view across a 21-card grid). */
.search-result__bookmark-button {
    @apply flex items-center gap-1.5 rounded-full py-2 px-3 cursor-pointer text-xs font-semibold text-gray-600;
    border: solid 1px rgba(0, 0, 0, 0.12);
    min-height: 40px;
}

.search-result__bookmark-button svg {
    @apply w-[18px] h-[18px];
    fill: currentColor;
}

.search-result__bookmark-button:hover {
    border-color: rgba(0, 0, 0, 0.24);
}

/* ── Empty / zero-results state ──────────────────────────────────
   A filter-first page with stacking facets hits N=0 routinely. */
.search-empty {
    @apply max-w-md mx-auto text-center py-16 px-4;
}

/* ── YouTube source attribution (Dev Policies §III.F.2) ──────────── */
.results-attribution {
    @apply text-xs text-gray-500 mt-8 mb-4 text-center;
}

.results-attribution a {
    @apply underline underline-offset-2;
}

/* ============================================================
   Dark / amber theme — results page only (`body.videos`)
   Overrides the light defaults above + the global chrome classes
   in application.tailwind.css, without touching other surfaces.
   ============================================================ */

body.videos {
    background: var(--rafa-bg);
    color: var(--rafa-text-primary);
}

/* Sticky results header sits on the page background, not light grey. */
body.videos .results-header {
    background: var(--rafa-bg);
    color: var(--rafa-text-primary);
}

/* Card */
body.videos .search-result {
    background: var(--rafa-surface);
    border: 1px solid var(--rafa-border);
    color: var(--rafa-text-primary);
}

body.videos .search-result__descriptor a {
    color: var(--rafa-text-primary);
}

body.videos .search-result__source-title {
    color: var(--rafa-text-muted);
}

body.videos .search-result__channel {
    color: var(--rafa-text-secondary);
}

body.videos .search-result__date {
    color: var(--rafa-text-secondary);
}

body.videos .search-result__likes {
    color: var(--rafa-text-secondary);
}

body.videos .search-result__bookmark-button {
    color: var(--rafa-text-secondary);
    border-color: var(--rafa-border);
    background: transparent;
}

body.videos .search-result__bookmark-button:hover {
    border-color: var(--rafa-text-secondary);
    color: var(--rafa-text-primary);
}

/* Saved state reads as "done" via warm off-white + filled icon — not amber. */
body.videos .search-result__bookmark-button.--saved {
    color: var(--rafa-text-primary);
    border-color: var(--rafa-text-secondary);
}

/* Calmer, more generous grid. */
body.videos .results {
    @apply gap-4;
}

/* Sort pills — selected pill is the single active-state amber. */
body.videos .pill-link {
    border-color: var(--rafa-border);
    color: var(--rafa-text-secondary);
}

body.videos .pill-link.selected {
    background: var(--rafa-accent);
    border-color: var(--rafa-accent);
    color: var(--rafa-accent-text);
}

/* Filter accordions — surface bars, not solid black. */
body.videos .filter-group-header {
    background: var(--rafa-surface-raised);
    color: var(--rafa-text-primary);
}

body.videos .filter-group-filters {
    background: transparent;
    color: var(--rafa-text-primary);
}

body.videos .filter-count {
    background: var(--rafa-accent);
    color: var(--rafa-accent-text);
}

/* Filter checkboxes pick up the amber accent. */
body.videos input[type="checkbox"] {
    accent-color: var(--rafa-accent);
}

/* All Videos / Bookmarks segmented toggle. */
body.videos .switch-field label {
    background-color: var(--rafa-surface-raised);
    color: var(--rafa-text-secondary);
    border: 1px solid var(--rafa-border);
    box-shadow: none;
}

body.videos .switch-field input:checked + label {
    background-color: var(--rafa-accent);
    color: var(--rafa-accent-text);
}

/* Mobile filter + sort modals. */
body.videos .modal-wrapper {
    background: var(--rafa-bg);
    color: var(--rafa-text-primary);
}

body.videos .modal-content {
    color: var(--rafa-text-primary);
}

/* Pagination */
body.videos .pagination span {
    @apply text-rafa-secondary;
    background: var(--rafa-surface);
}

body.videos .pagination span.current {
    color: var(--rafa-text-primary);
}

body.videos .pagination a:hover {
    background: var(--rafa-accent);
    color: var(--rafa-accent-text);
}

body.videos .search-empty {
    color: var(--rafa-text-secondary);
}

body.videos .results-attribution {
    color: var(--rafa-text-muted);
}
.video-details {
    @apply md:px-0 px-4 pt-4 pb-2 text-sm md:text-base;
}

.video-metadata {
    @apply grid grid-cols-[1fr,auto,auto] gap-6 text-sm md:text-base font-extralight md:font-light items-center;
}

.video-metadata--channel {
    @apply text-base md:text-lg;
}


body.watch.anonymous {
    background-color: rgb(25, 25, 25);

    .video-details {
        color: rgb(207, 207, 207);
    }
}

.basic-link {
    @apply underline text-blue-600;
}

/* Mobile slide-up popover: the watch player (#video_player) is injected into a
   full-screen flex-column panel. Pin the video stage + control bar (and the
   YouTube attribution) and let the segment list take the remaining height and
   scroll, so a long list doesn't overflow the screen with no way to reach it.
   Scoped to .video-popover so the full watch page keeps normal document flow. */
.video-popover #video_player {
    @apply flex flex-col h-full min-h-0;
}

.video-popover #video_player > div {
    @apply flex-shrink-0;
}

.video-popover #video_player > ul {
    @apply flex-1 min-h-0 overflow-y-auto;
}

/* Modal animation states */
.modal-overlay.--open {
    @apply flex opacity-100;
}

.modal-overlay.--open .modal-content {
    @apply scale-100;
}
/**
 * tom-select.css (v2.0.0)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
.ts-wrapper.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}

.plugin-clear_button .ts-control {
  padding-right: calc(1em + (3 * 6px)) !important;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 8px;
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.single .clear-button {
  right: calc(8px - 6px + 2rem);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px 0;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-left: 1px solid #d0d0d0;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  font-smoothing: inherit;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc( 8px - 2px - 0) 8px calc( 8px - 2px - 3px - 0);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: #7d7d7d;
  background: white;
  border: 0 solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 200px;
  overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */