:root {
    --gnome-blue: #3584e4;
    --font-main: 'Space Grotesk', sans-serif;
    --font-header: 'Architects Daughter', cursive;
    --window-bg: #FFFFFF;
    --accent-lime: #85FFAB;
    --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;
}

/* 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. */
/* Themed cursors only on real pointing devices — never on touch, where they're
   dead weight and can suppress the native tap behavior. */
@media (hover: hover) and (pointer: fine) {
    body { cursor: url('assets/images/cursor.svg') 13 10, auto; }
    button, a, .cursor-pointer, .win-ctrl, .brutalist-button {
        cursor: url('assets/images/select.svg') 21 13, pointer !important;
    }
    /* Terminal shows a text (I-beam) cursor; hotspot centered on the beam. */
    .terminal-body, .terminal-body #term-input {
        cursor: url('assets/images/text-cursor.svg') 18 18, text !important;
    }
}

/* Visible keyboard focus on interactive elements. Overrides Tailwind's
   `outline-none` on the contact inputs; mouse clicks don't trigger it. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.jutsu-row:focus-visible, .jutsu-caret:focus-visible, .jutsu-switcher-btn:focus-visible, .jutsu-switcher-item:focus-visible {
    outline: 3px solid #5E4FE6 !important;
    outline-offset: 2px;
    border-radius: 6px;
}

/* The terminal input has its own blinking caret, so suppress the focus outline. */
#term-input:focus, #term-input:focus-visible {
    outline: none !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: 16px;
    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: 14px;
}

.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; }

/* ============================================================
   DESKTOP READABILITY
   Nudge the running body copy inside windows up a step for
   readability. Scoped to >=768px so the phone tier's own
   carefully-tuned compact scale (below) is left untouched.
   ============================================================ */
@media (min-width: 768px) {
    /* Unclassed paragraph text falls back to the 16px body size. */
    .window-inner { font-size: 1.125rem; }
    .window-inner .text-sm { font-size: 1rem; line-height: 1.5rem; }
    .window-inner .text-base { font-size: 1.1875rem; }
    .window-inner .text-lg { font-size: 1.25rem; }
}

/* ============================================================
   JUTSU (docs app)
   PostHog-style docs: a card landing grouped by domain, and an
   article view with a sidebar nav tree, content, and a TOC.
   Scoped under .jutsu so it never leaks into other app windows.
   ============================================================ */
.jutsu { height: 100%; width: 100%; color: #000; }
.jutsu .custom-scroll { scrollbar-width: thin; }

/* --- Landing --- */
.jutsu-landing { height: 100%; overflow-y: auto; padding: 2rem 2.25rem 3rem; }
.jutsu-hero { margin-bottom: 1.5rem; }
.jutsu-hero h2 { font-size: 2rem; line-height: 1.1; }
.jutsu-hero p { color: #475569; margin-top: 0.4rem; }

.jutsu-search {
    width: 100%;
    padding: 0.75rem 1rem;
    border: var(--border-black);
    border-radius: 10px;
    background: #fff;
    box-shadow: 3px 3px 0 #000;
    margin-bottom: 2rem;
    font-size: 1rem;
}
.jutsu-search:focus { outline: none; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }

.jutsu-domains { display: flex; flex-direction: column; gap: 2rem; }
.jutsu-domain-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.85rem; }
.jutsu-domain-head h3 { font-size: 1.15rem; }
.jutsu-domain-blurb { color: #64748b; font-size: 0.9rem; }

.jutsu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.jutsu-card {
    text-align: left;
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: var(--border-black);
    border-radius: 12px;
    box-shadow: 3px 3px 0 #000;
    border-top: 5px solid var(--jutsu-accent, var(--accent-lime));
    transition: transform 0.1s, box-shadow 0.1s;
}
.jutsu-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }
.jutsu-card:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.jutsu-card-title { font-size: 1rem; }
.jutsu-card-summary { color: #64748b; font-size: 0.85rem; line-height: 1.35; }
.jutsu-noresults { color: #64748b; margin-top: 1.5rem; text-align: center; }

/* Landing hub: one big button per domain */
.jutsu-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.jutsu-domain-btn {
    text-align: left;
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.4rem 1.4rem 1.2rem;
    background: #fff;
    border: var(--border-black);
    border-radius: 14px;
    box-shadow: 3px 3px 0 #000;
    border-top: 6px solid var(--jutsu-accent, var(--accent-lime));
    transition: transform 0.1s, box-shadow 0.1s;
}
.jutsu-domain-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.jutsu-domain-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.jutsu-domain-btn-title { font-size: 1.5rem; line-height: 1.1; }
.jutsu-domain-btn-blurb { color: #64748b; font-size: 0.9rem; line-height: 1.4; }
.jutsu-domain-btn-count {
    color: #94a3b8; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.05em; margin-top: 0.3rem;
}

/* --- Article view: sidebar | content | toc --- */
.jutsu-article-view { display: grid; grid-template-columns: 240px minmax(0, 1fr) 210px; height: 100%; position: relative; }
/* The mobile drawer toggle + backdrop only exist on phones (see mobile block). */
.jutsu-nav-toggle, .jutsu-backdrop { display: none; }
.jutsu-sidebar { border-right: var(--border-black); overflow-y: auto; padding: 1.5rem 1rem; background: #FBFAF7; }
.jutsu-content { overflow-y: auto; padding: 1.5rem 2.25rem 3rem; min-width: 0; }
.jutsu-toc { border-left: var(--border-black); overflow-y: auto; padding: 1.5rem 1rem; background: #FBFAF7; }
.jutsu-toc.empty { visibility: hidden; }

/* Domain switcher (PostHog-style master dropdown) */
.jutsu-switcher { position: relative; margin-bottom: 1.25rem; }
.jutsu-switcher-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; padding: 0.55rem 0.8rem; font-size: 0.95rem;
    background: #fff; border: var(--border-black); border-radius: 10px;
    box-shadow: 2px 2px 0 #000;
}
.jutsu-switcher-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.jutsu-switcher-caret { font-size: 0.7rem; }
.jutsu-switcher-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    list-style: none; margin: 0; padding: 0.3rem;
    background: #fff; border: var(--border-black); border-radius: 10px;
    box-shadow: 3px 3px 0 #000;
}
.jutsu-switcher-item {
    display: block; width: 100%; text-align: left;
    padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.9rem; color: #1e293b;
}
.jutsu-switcher-item:hover { background: rgba(0,0,0,0.06); }
.jutsu-switcher-item.active { font-weight: 700; }

/* Collapsible nav tree (nests to any depth via --jutsu-depth) */
.jutsu-tree-list { list-style: none; margin: 0; padding: 0; }
.jutsu-branch-row { display: flex; align-items: center; }
.jutsu-caret {
    flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-right: 0.15rem;
    display: flex; align-items: center; justify-content: center;
    color: #64748b; transition: transform 0.15s ease;
}
/* Chevron drawn in CSS so there's no icon dependency. */
.jutsu-caret::before { content: "›"; font-size: 1rem; line-height: 1; font-weight: 700; }
.jutsu-branch.open > .jutsu-branch-row > .jutsu-caret { transform: rotate(90deg); }
/* Collapsed branches hide their children. */
.jutsu-branch > .jutsu-tree-list { display: none; }
.jutsu-branch.open > .jutsu-tree-list { display: block; }

.jutsu-row {
    display: block; width: 100%; text-align: left;
    padding: 0.3rem 0.5rem; border-radius: 6px;
    color: #475569; font-size: 0.9rem; line-height: 1.3;
    border-left: 3px solid transparent;
    /* Indent grows one step per nesting level. */
    padding-left: calc(0.5rem + var(--jutsu-depth, 0) * 0.85rem);
}
.jutsu-branch-toggle { color: #1e293b; }
.jutsu-branch-row .jutsu-row { flex: 1; }
/* Leaves have no caret, so add its width back to keep text aligned with the
   branch labels above them. */
.jutsu-leaf > .jutsu-row { padding-left: calc(1.75rem + var(--jutsu-depth, 0) * 0.85rem); }
.jutsu-row:hover { background: rgba(0,0,0,0.05); color: #000; }
.jutsu-nav-link.active {
    background: var(--jutsu-accent, var(--accent-lime));
    color: #000; font-weight: 700;
    border-left-color: #000;
}

.jutsu-back {
    background: #fff; border: var(--border-black); border-radius: 8px;
    padding: 0.3rem 0.8rem; font-size: 0.85rem; margin-bottom: 1.25rem;
    box-shadow: 2px 2px 0 #000;
}
.jutsu-back:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }

.jutsu-toc-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.6rem; }
.jutsu-toc-list { list-style: none; margin: 0; padding: 0; }
.jutsu-toc-list a { display: block; color: #475569; font-size: 0.85rem; padding: 0.2rem 0; line-height: 1.3; }
.jutsu-toc-list a:hover { color: #000; }
.jutsu-toc-l3 a { padding-left: 0.85rem; font-size: 0.8rem; color: #64748b; }

.jutsu-loading, .jutsu-error { color: #64748b; }

/* --- Rendered markdown --- */
.jutsu-doc { font-size: 1rem; line-height: 1.65; color: #1e293b; max-width: 46rem; }
.jutsu-doc h1 { font-size: 1.85rem; font-weight: 700; line-height: 1.15; margin: 0 0 1rem; }
.jutsu-doc h2 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.75rem; padding-bottom: 0.3rem; border-bottom: 2px solid #00000018; }
.jutsu-doc h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.jutsu-doc p { margin: 0 0 1rem; }
.jutsu-doc ul, .jutsu-doc ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.jutsu-doc li { margin: 0.25rem 0; }
.jutsu-doc a { color: #2563eb; text-decoration: underline; }
.jutsu-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em; background: #f1f5f9; padding: 0.15em 0.4em;
    border-radius: 5px; border: 1px solid #00000012;
}
.jutsu-doc pre {
    background: #0f172a; border: var(--border-black); border-radius: 10px;
    padding: 1rem 1.1rem; overflow-x: auto; margin: 0 0 1.25rem;
    box-shadow: 3px 3px 0 #000;
}
.jutsu-doc pre code { background: none; border: none; padding: 0; font-size: 0.85rem; color: #e2e8f0; }
.jutsu-doc blockquote {
    margin: 0 0 1.25rem; padding: 0.6rem 1rem;
    border-left: 4px solid var(--accent-yellow);
    background: #fffbeb; border-radius: 0 8px 8px 0;
}
.jutsu-doc blockquote p { margin: 0; }
/* Tables sit in a scroll container so wide ones scroll instead of overflowing. */
.jutsu-table-wrap { overflow-x: auto; margin: 0 0 1.25rem; -webkit-overflow-scrolling: touch; }
.jutsu-doc table { border-collapse: collapse; width: 100%; margin: 0; font-size: 0.9rem; }
.jutsu-doc th, .jutsu-doc td { border: 1px solid #00000020; padding: 0.5rem 0.75rem; text-align: left; }
.jutsu-doc th { background: #f1f5f9; font-weight: 700; }
.jutsu-doc tr:nth-child(even) td { background: #fafafa; }
/* Images (jpeg / png / svg) — responsive block, on-brand framing. */
.jutsu-doc img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.25rem 0;
    border: var(--border-black);
    border-radius: 10px;
    box-shadow: 3px 3px 0 #000;
    background: #fff;
}

/* ============================================================
   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) {
    /* Push the wallpaper mascot down into the lower third so it clears the two
       icon rows. The background SVG is 16:9; on a tall phone `cover` maps the
       full image height to the viewport (mascot ends up mid-screen, colliding
       with row 2). Slightly over-scaling the height and pinning to the top
       moves the centered mascot downward without exposing any gap (the SVG's
       own cream fill matches the body background). */
    body { background-size: auto 124%; background-position: center top; }

    /* Safe-area insets: keep the dock, copyright, and window sheet clear of the
       notch and home indicator on modern phones (no-ops on the SE, where the
       insets are 0). Requires viewport-fit=cover on the viewport meta. */
    #dock-bar { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    #copyright { bottom: calc(0.2rem + env(safe-area-inset-bottom)); }

    /* Desktop icon column -> centered home-screen app grid. */
    #app-grid {
        /* Sits high so both icon rows stay above the (lowered) mascot. */
        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: calc(3rem + env(safe-area-inset-top)) !important;
        left: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        height: calc(100dvh - 3rem - 6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        border-radius: 16px !important;
        transform: none;
    }
    .window-inner { border-radius: 14px; }
    .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: calc(3rem + env(safe-area-inset-top)) !important;
        left: 0.5rem !important;
        width: calc(100vw - 1rem) !important;
        height: calc(100dvh - 3rem - 6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !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: calc(0.75rem + env(safe-area-inset-top)) !important;
        height: calc(100dvh - 0.75rem - 6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !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; }
}

/* ============================================================
   JUTSU — phones
   Placed last so it overrides the generic mobile .window-inner
   rules above (which center text and were tuned for the other,
   card-style apps). The Jutsu is text-heavy and needs left-aligned
   reading; the sidebar/TOC panes are dropped for a single column.
   ============================================================ */
@media (max-width: 767px) {
    .window-inner .jutsu,
    .window-inner .jutsu * { text-align: left; }
    .window-inner .jutsu .flex,
    .window-inner .jutsu .flex.flex-col { align-items: stretch; justify-content: flex-start; }

    .jutsu-landing { padding: 1.1rem 1.1rem 2rem; }
    .jutsu-hero h2 { font-size: 1.4rem !important; }
    .jutsu-cards { grid-template-columns: 1fr; }
    .jutsu-home { grid-template-columns: 1fr; }
    .jutsu-search { margin-bottom: 1.25rem; }
    /* Stack domain title over its blurb so titles don't wrap mid-phrase. */
    .jutsu-domain-head { flex-direction: column; align-items: flex-start; gap: 0.1rem; }

    /* Collapse the three-pane layout to a single content column. The TOC is
       dropped; the sidebar (switcher + tree) becomes an off-canvas drawer
       opened by the "☰ Sections" button. */
    .jutsu-article-view { display: block; }
    .jutsu-toc { display: none; }
    .jutsu-content { height: 100%; padding: 1.1rem 1.1rem 2rem; }
    .jutsu-doc { max-width: 100%; }
    .jutsu-doc h1 { font-size: 1.4rem !important; }
    .jutsu-doc h2 { font-size: 1.15rem !important; }
    .jutsu-doc h3 { font-size: 1.02rem !important; }

    /* Sections row: drawer toggle + back button, finger-sized. */
    .jutsu-content-top { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
    .jutsu-nav-toggle {
        display: inline-flex; align-items: center; min-height: 44px;
        padding: 0.4rem 0.9rem; background: var(--accent-lime);
        border: var(--border-black); border-radius: 8px; box-shadow: 2px 2px 0 #000;
    }
    .jutsu-content-top .jutsu-back { margin-bottom: 0; min-height: 44px; display: inline-flex; align-items: center; }

    /* Off-canvas drawer. */
    .jutsu-sidebar {
        display: block; position: absolute; top: 0; bottom: 0; left: 0;
        width: 84%; max-width: 300px; z-index: 30;
        transform: translateX(-100%); transition: transform 0.25s ease;
    }
    .jutsu-article-view.nav-open .jutsu-sidebar { transform: translateX(0); box-shadow: 6px 0 0 rgba(0,0,0,0.12); }
    .jutsu-article-view.nav-open .jutsu-backdrop {
        display: block; position: absolute; inset: 0; z-index: 25; background: rgba(0,0,0,0.35);
    }
    /* Bigger touch targets inside the drawer. */
    .jutsu-row { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .jutsu-switcher-item { padding: 0.6rem; }
}