:root {
    --gnome-blue: #3584e4;
    --font-main: 'Montserrat', sans-serif;
    --font-header: 'Architects Daughter', cursive;
    --window-bg: #FFFFFF;
    --accent-lime: #C3E939;
    --accent-lavender: #B497FF;
    --accent-yellow: #FFD54F;
    --accent-sage: #84A98C;
    --dock-offset: 7.5rem;
    --border-black: 2px solid #000;
}

body {
    font-family: var(--font-main);
    /* Fallback must match the SVG's cream fill: it flashes before the image
       paints, and iOS Safari samples it for the toolbar tint and overscroll. */
    background-color: #FFF2E8;
    background-image: url('assets/images/background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    user-select: none;
    color: #000;
    /* Custom themed pointer; hotspot aligned to the arrow tip. */
    cursor: url('assets/images/cursor.svg') 13 10, auto;
}

/* Interactive elements override the inherited custom arrow with the system
   finger pointer on hover. Non-interactive surfaces keep the themed arrow. */
/* Custom themed select cursor; hotspot at the fingertip, with the system
   pointer as fallback. !important is needed to override Tailwind's CDN-injected
   .cursor-pointer utility (same specificity, injected after this sheet) and the
   class-level .win-ctrl / .brutalist-button rules. */
button, a, .cursor-pointer, .win-ctrl, .brutalist-button {
    cursor: url('assets/images/select.svg') 21 13, pointer !important;
}

/* The body sets user-select: none, which inherits into form fields. On iOS an
   input/textarea with -webkit-user-select: none won't accept text or raise the
   keyboard, so explicitly re-enable selection on editable fields. */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Keep the dock app-open dot and hover tooltip hidden by default via static CSS
   (not the Tailwind runtime), so they don't flash visible before the CDN loads. */
.dock-dot, .dock-tooltip { opacity: 0; transition: opacity 0.15s ease; }
.group:hover .dock-tooltip { opacity: 1; }

/* Boot fade-in: show only the background briefly on load, then ease everything in. */
.boot-fade { transition: opacity 0.5s ease; }
body.booting .boot-fade { opacity: 0; }

.arch-font { font-family: var(--font-header); }
.ubuntu-reg { font-family: var(--font-main); font-weight: 400; }
.ubuntu-bold { font-family: var(--font-main); font-weight: 700; }

.window-frame {
    position: absolute;
    background-color: var(--window-bg);
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, opacity 0.2s;
    border: var(--border-black);
    box-shadow: 4px 4px 0px #000;
}

.window-frame.fs-anim {
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, box-shadow 0.25s ease, border 0.25s ease;
}


.window-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 48px;
}

.window-header {
    height: 3.5rem;
    background-color: var(--accent-lavender);
    border-bottom: var(--border-black);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.25rem;
    cursor: grab;
    flex-shrink: 0;
    /* Let pointer-based dragging work on touch devices (tablets) without the
       browser treating the drag as a scroll/pan gesture. */
    touch-action: none;
}

.win-ctrl {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    border: 2px solid #000;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    font-weight: 900;
    transition: all 0.1s;
}

.win-ctrl:active {
    transform: translate(1px, 1px);
}

.win-ctrl-close:hover { background: #ff4d4d; color: #fff; }
.win-ctrl-max:hover { background: var(--accent-lime); }
.win-ctrl-min:hover { background: var(--accent-yellow); }

.maximized {
    top: 16px !important;
    left: 16px !important;
    width: calc(100vw - 32px) !important;
    height: calc(100vh - var(--dock-offset) - 16px) !important;
    transform: none !important;
}

.maximized .resizer { display: none; }
.maximized .window-header { cursor: default !important; }

.minimized { opacity: 0; transform: translateY(100px) scale(0.8); pointer-events: none; }

.window-frame.snapping {
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease, border-radius 0.2s ease;
}

.snap-preview {
    position: fixed;
    background: rgba(113, 137, 254, 0.25);
    border: 2px dashed #000;
    border-radius: 16px;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease;
}

.snap-preview.visible { opacity: 1; }

.brutalist-card {
    background: #fff;
    border: var(--border-black);
    border-radius: 12px;
    transition: transform 0.1s;
}

.brutalist-card:hover {
    transform: translate(-2px, -2px);
}

.brutalist-button {
    background: var(--accent-lime);
    border: var(--border-black);
    border-radius: 8px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
    transition: all 0.1s;
    cursor: pointer;
}

.brutalist-button:hover {
    transform: translate(-1px, -1px);
}

.brutalist-button:active {
    transform: translate(2px, 2px);
}

.custom-scroll::-webkit-scrollbar { width: 12px; }
.custom-scroll::-webkit-scrollbar-track { background: #fff; border-left: var(--border-black); }
.custom-scroll::-webkit-scrollbar-thumb { background: #000; border: 3px solid #fff; }

.animate-pop { animation: brutalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes brutalPop { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.icon-label { font-size: 0.85rem; font-weight: 400; color: #000; }

/* Rubber-band selection drawn when dragging across the empty desktop. The box
   sits above the icons (z-0) but below windows (z-10), and never eats clicks. */
.marquee-box {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    border: 2px solid var(--gnome-blue);
    background: rgba(53, 132, 228, 0.18);
    border-radius: 4px;
}
/* Icons the marquee overlaps get a translucent highlight (background only, so
   it doesn't shift layout). */
#app-grid > div.marquee-selected {
    background: rgba(53, 132, 228, 0.25);
    border-radius: 12px;
}

.view-section { display: none; height: 100%; flex-direction: column; }
.view-section.active { display: flex; }

/* RESIZERS */
.resizer { position: absolute; z-index: 100; touch-action: none; }
.resizer-n { top: -4px; left: 10px; right: 10px; height: 10px; cursor: n-resize; }
.resizer-s { bottom: -4px; left: 10px; right: 10px; height: 10px; cursor: s-resize; }
.resizer-e { top: 10px; bottom: 10px; right: -4px; width: 10px; cursor: e-resize; }
.resizer-w { top: 10px; bottom: 10px; left: -4px; width: 10px; cursor: w-resize; }
.resizer-ne { top: -4px; right: -4px; width: 16px; height: 16px; cursor: ne-resize; z-index: 101; }
.resizer-nw { top: -4px; left: -4px; width: 16px; height: 16px; cursor: nw-resize; z-index: 101; }
.resizer-se { bottom: -4px; right: -4px; width: 16px; height: 16px; cursor: se-resize; z-index: 101; }
.resizer-sw { bottom: -4px; left: -4px; width: 16px; height: 16px; cursor: sw-resize; z-index: 101; }

/* ============================================================
   MOBILE OS LAYOUT (phones)
   Desktop (>=768px) is completely untouched. On phones we turn
   the desktop into a mobile home screen: a grid of app icons,
   a slimmed-down dock, and apps that open as full-screen sheets.
   ============================================================ */
@media (max-width: 767px) {
    /* Desktop icon column -> centered home-screen app grid. */
    #app-grid {
        /* Sits high so the second icon row clears the mascot painted into
           background.svg below it. */
        top: 0.75rem;
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 0.5rem;
        place-items: center;
        padding: 1.5rem 2.25rem;
    }
    #app-grid > div { width: 6rem; }

    /* Dock: shrink the pill + icons to fit a phone screen. */
    #dock { gap: 0.5rem; padding: 0.5rem 0.85rem; }
    #dock-apps { gap: 0.25rem; }
    /* No !important: the ID selector already outranks Tailwind's .w-12/.h-12,
       and !important would block the inline width animation used to smoothly
       grow/collapse dock items (otherwise the dock snaps shut on close). */
    #dock-apps button { width: 2.75rem; height: 2.75rem; }
    #dock-apps button img { width: 1.85rem; height: 1.85rem; }
    /* The active-app dot's default -bottom-2 (-0.5rem) lands on the dock pill's
       border once the dock padding shrinks; lift it up for clearance. */
    #dock-apps .dock-dot { bottom: -0.2rem; }
    /* Hover-only affordances aren't useful on touch. */
    #dock-apps .dock-tooltip { display: none; }

    /* Copyright: shrink and tuck into the corner beneath the dock's bottom edge
       (the centered dock pill would otherwise overlap the left-aligned text). */
    #copyright {
        bottom: 0.2rem;
        left: 0.4rem;
        font-size: 8px;
        letter-spacing: normal;
    }

    /* Apps open as full-screen sheets above the dock.
       !important overrides the per-window inline px sizing from JS. */
    .window-frame {
        top: 3rem !important;
        left: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        height: calc(100dvh - 3rem - 6rem) !important;
        border-radius: 28px !important;
        transform: none;
    }
    .window-inner { border-radius: 26px; }
    .window-header { height: 3rem; padding: 0 1.25rem; cursor: default; }

    /* App content was authored for ~850px windows. On phones we scale the type
       and spacing down and let inner cards run full-width, so everything fits
       on one screen without scrolling. */
    .window-inner * { overflow-wrap: break-word; }
    .window-inner .flex > div { min-width: 0; }

    /* Type scale — compact for phones */
    .window-inner :is(h1, h2, .text-4xl) { font-size: 1.1rem !important; line-height: 1.2; }
    .window-inner .text-3xl { font-size: 1.05rem !important; }
    .window-inner .text-2xl { font-size: 1rem !important; }
    .window-inner :is(.text-xl, .text-lg) { font-size: 0.95rem !important; }
    .window-inner .text-base { font-size: 0.85rem !important; }
    .window-inner .text-sm { font-size: 0.8rem !important; }
    .window-inner .text-xs { font-size: 0.7rem !important; }
    .window-inner .text-7xl { font-size: 2rem !important; }
    .window-inner img[alt="Cyber Dojo"] { height: 2rem !important; }

    /* Inner cards run full-width with tighter padding */
    .window-inner :is(.max-w-3xl, .max-w-lg, .max-w-sm) { max-width: 100% !important; }
    .window-inner .p-8 { padding: 1.25rem !important; }
    .window-inner .p-6 { padding: 1rem !important; }
    .window-inner .px-4 { padding-left: 0 !important; padding-right: 0 !important; }
    .window-inner .px-8 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

    /* Trim the large vertical rhythm; keep top padding equal to the p-8 bottom
       so the content's top/bottom padding stays symmetric. */
    .window-inner .pt-20 { padding-top: 1.25rem !important; }
    /* Vertically center top-aligned content (Home) so it isn't all pinned to
       the top with a big empty gap below. */
    .window-inner .justify-start { justify-content: center !important; }
    .window-inner .mt-16 { margin-top: 1rem !important; }
    .window-inner :is(.mb-8, .mb-6) { margin-bottom: 0.75rem !important; }
    .window-inner .h-24 { height: auto !important; }

    /* Files grid: tighten the icon spacing. */
    .window-inner .gap-6 { gap: 0.75rem; }
    /* Course cards (Home + Courses) stack vertically on phones — art on top,
       text and CTA centered below. Cap the art to a comfortable hero size. */
    .window-inner .w-44.h-44 { width: 9rem !important; height: 9rem !important; }

    /* Center everything within windows on mobile. */
    .window-inner { text-align: center; }
    .window-inner .flex.flex-col { align-items: center; }
    .window-inner .flex:not(.flex-col) { justify-content: center; }
    .window-inner :is(.items-start, .text-left) { align-items: center; text-align: center !important; }
    .window-inner :is(.self-end, .mx-auto, .ml-auto, .mr-auto) { align-self: center !important; }

    /* Dragging/resizing/min/max don't apply on a phone. */
    .window-frame .resizer { display: none; }
    .win-ctrl-min, .win-ctrl-max { display: none; }

    /* Maximize falls back to the same full-screen sheet bounds. */
    .maximized {
        top: 3rem !important;
        left: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        height: calc(100dvh - 3rem - 6rem) !important;
    }
}

/* ============================================================
   SHORT PHONES (iPhone SE class, <=700px tall). The regular
   phone scale above still overflows the ~475px sheet, so app
   content scrolled and clipped. Reclaim the sheet's top margin
   and shrink the few tall blocks (hero art, form fields, card
   padding) until every app fits its sheet without scrolling.
   Type sizes stay at the readable phone scale; buttons and
   inputs keep finger-sized hit areas.
   ============================================================ */
@media (max-width: 767px) and (max-height: 700px) {
    /* Taller sheet: reclaim the regular phone tier's 3rem top clearance. */
    .window-frame, .maximized {
        top: 0.75rem !important;
        height: calc(100dvh - 0.75rem - 6rem) !important;
    }

    /* Tighter outer padding and vertical rhythm. */
    .window-inner .p-8 { padding: 0.85rem !important; }
    .window-inner .pt-20 { padding-top: 0.85rem !important; }
    .window-inner .p-6 { padding: 0.75rem !important; }
    .window-inner .p-5 { padding: 0.75rem !important; }
    .window-inner .py-6 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .window-inner .mt-16 { margin-top: 0.6rem !important; }
    .window-inner :is(.mb-8, .mb-6, .mb-4) { margin-bottom: 0.5rem !important; }

    /* Hero/course art are the tallest blocks: cap them harder.
       (.text-left scopes to course cards so the Docs/Blog hero
       icons, which already fit, keep their size.) */
    .window-inner .w-44.h-44 { width: 5.5rem !important; height: 5.5rem !important; }
    .window-inner .text-left .w-28.h-28 { width: 5rem !important; height: 5rem !important; }

    /* Contact form: slimmer fields and a 3-line message box.
       ~10px input padding keeps a ~43px touch target. */
    .window-inner form .p-3 { padding: 0.625rem !important; }
    .window-inner form textarea { height: 5rem !important; }
}