/* Special Elite font for headers */
.font-detective {
    font-family: 'Special Elite', cursive;
}
/* Dark jungle background */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)),
                url('/shared/leavesback.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    /* Dinos standing beside the folder must never make the page scroll sideways */
    overflow-x: hidden;
}
/* Input focus glow */
input:focus {
    outline: none;
}
/* Smooth transitions, named so nothing else animates by accident */
a, button {
    transition: color var(--dur-base) var(--ease-standard), background-color var(--dur-base) var(--ease-standard),
                border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
                filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
/* Buttons: the same shape, size and lamp shadow as the tool pages (btn-green in common.css).
   Red is kept only for deleting a key, so the one destructive action looks different on purpose. */
button.btn-green,
a.btn-green,
button.btn-danger {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
button.btn-green,
a.btn-green {
    background: var(--green);
    color: var(--on-green);
    border: 1px solid var(--green);
    box-shadow: var(--shadow-sheet-dark);
}
/* Lying flat on the paper like everything else; hover lifts it, a click stamps it flat */
button.btn-green:hover,
a.btn-green:hover {
    box-shadow: var(--shadow-paper-lift);
}
button.btn-green:active,
a.btn-green:active {
    box-shadow: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    button.btn-green:hover,
    a.btn-green:hover {
        transform: translateY(-2px);
    }
    button.btn-green:active,
    a.btn-green:active {
        transform: translateY(1px) scale(0.98);
        transition-duration: 60ms;
    }
    /* Home cards: picked up off the paper */
    .paper-card:hover {
        transform: translateY(-3px);
    }
}
/* Section sheets: the tool pages' own pattern, so the settings page belongs to the same world.
   A named tab, and the sheet hanging below it, its bottom tucked behind the panel.
   (The same rules live in common.css for the tool pages; the two stylesheet worlds merge in 1.2.) */
.sub-folder-tab {
    position: absolute;
    top: -2em;
    left: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    height: calc(2em + 0.5rem);
    padding: 0 1.25em;
    font-family: 'Special Elite', cursive;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--ink-text);
    background-color: var(--sheet);
    background-image: var(--paper-grain);
    border: 1px solid var(--ink-a20);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sheet);
    cursor: default;
    user-select: none;
}

.sub-folder-panel {
    position: relative;
    z-index: 20;
    padding: 1.5rem;
    border: 1px solid var(--ink-a20);
    border-radius: var(--radius-lg);
    background-color: var(--sheet);
    background-image: var(--paper-grain);
    box-shadow: var(--shadow-sheet);
}

/* Cozy, not compact: on a full-size screen the sheets breathe like the tool pages' do */
@media (min-width: 769px) {
    .sub-folder-panel {
        padding: 1.75rem;
    }
}

/* Each sheet's status: the same paper, ink, corner and height as the small buttons. It keeps its
   words on one line, so a narrow screen never breaks "Not set" in half. */
.key-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    white-space: nowrap;
    padding: 0.375rem 0.75rem;
    min-height: 2rem;
    border-radius: var(--radius-md);
    background: var(--paper-cream);
    border: 1px solid rgba(69, 26, 3, 0.25);
    box-shadow: var(--shadow-sheet);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.25;
    color: var(--ink-text);
    cursor: default;
    user-select: none;
}

/* A sheet that is set up wears a dino colour, the way the tools' stickers report */
.key-status.is-set {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-green);
}

/* Cream buttons: thin paper, the same as the tool pages' btn-cream */
a.btn-cream,
button.btn-cream {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    padding: 0.5rem 1rem;
    min-height: 2.25rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    background: var(--paper-cream);
    color: var(--ink-text);
    border: 1px solid rgba(69, 26, 3, 0.25);
    box-shadow: var(--shadow-sheet);
}

a.btn-cream:hover,
button.btn-cream:hover {
    background: linear-gradient(var(--ink-a10), var(--ink-a10)), var(--paper-cream);
    border-color: var(--ink-a40);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a.btn-cream:hover,
    button.btn-cream:hover {
        transform: translateY(-1px) rotate(-0.6deg);
    }

    a.btn-cream:active,
    button.btn-cream:active {
        transform: none;
        transition-duration: 60ms;
    }
}

button.btn-danger {
    background: rgba(220, 38, 38, 0.2);
    color: var(--danger-ink);
    border: 1px solid rgba(239, 68, 68, 0.5);
}
button.btn-danger:hover {
    background: rgba(220, 38, 38, 0.4);
}
/* Hints: placeholder text in one quiet ink, matching the tool pages. The html prefix outranks
   Tailwind's own grey placeholder rule, which is added to the page after ours. */
html input::placeholder,
html textarea::placeholder {
    color: var(--ink-a60);
    opacity: 1;
}
/* Reduced motion: when someone asks their device for less movement, changes happen instantly */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Paper folders, matching the tool pages: one lamp light, a faint paper grain,
   and card stock edges on a layer that never takes clicks */
.paper-folder {
    background-color: var(--folder-amber) !important;
    background-image:
        var(--paper-grain),
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255, 250, 235, 0.55), rgba(255, 250, 235, 0) 70%),
        linear-gradient(var(--lamp-angle), var(--folder-amber) 0%, var(--folder-mid-bare) 55%, var(--folder-edge-bare) 100%) !important;
}
/* A long folder (Privacy, Terms): the same lamp, measured in screen distances rather than the
   folder's height. The glow lights only the top, above the first sheet, as a tool's glow lights
   its header; by the first sheet the paper has settled to the amber a tool folder has around its
   sheets, and it holds there, so every sheet lies a shade lighter than the folder under it */
.paper-folder.paper-folder-long {
    background-image:
        var(--paper-grain),
        radial-gradient(ellipse 80% 220px at 15% 0%, rgba(255, 250, 235, 0.55), rgba(255, 250, 235, 0) 70%),
        linear-gradient(var(--lamp-angle), var(--folder-amber) 0, var(--folder-mid-bare) 200px) !important;
}

/* The card stock edges and the lamp's falloff, on one layer over everything on the folder that
   never takes clicks (see --lamp-falloff) */
.paper-folder::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 25;   /* above the divider sheets (20), which lie on the folder */
    border-radius: inherit;
    background: var(--lamp-falloff);
    box-shadow: var(--edge-lit);
    pointer-events: none;
}

/* On a long folder the falloff settles above the first sheet too, at the shade a tool's sheets
   sit in, and holds, so every sheet and the paper around it read flat, as on the tool pages */
.paper-folder.paper-folder-long::after {
    background: linear-gradient(var(--lamp-angle), rgba(69, 26, 3, 0) 0, rgba(69, 26, 3, 0.04) 200px);
}
/* The folder stack lies on the desk: the back sheet casts the lamp shadow onto the jungle */
.folder-back {
    box-shadow: var(--shadow-desk);
}
/* ============================================================
   DINOS AROUND THE CASE FILE
   The dinos sit on top of the folder and may cover paper and boxes, never words.
   Every dino is drawn at one shared scale on every page, in proportion to its artwork,
   with one size set per screen tier: middle windows, wide windows, and phones.
   Home: pipe and pointer dinos flank the Notosaurus card, glass dino at the top right.
   Login: pipe and glass dinos lean on the folder's sides. Settings: the pointer dino.
   All positions live here.
   ============================================================ */
.dino-peek {
    position: absolute;
    z-index: 30;
    height: auto;
    pointer-events: none;
    /* Default spot: standing on the folder's top edge, feet 1.5rem onto its margin */
    bottom: calc(100% - 1.5rem);
}

/* Desktop windows, 769px and up: one shared scale per width step, each as large as the space
   beside the folder allows. Sizes follow the artwork, so every dino matches its friends. */
.dino-peek.dino-desktop.dino-pipe    { width: 94px; }
.dino-peek.dino-desktop.dino-pointer { width: 119px; }
.dino-peek.dino-desktop.dino-glass   { width: 168px; }

/* Home: pipe and pointer flank the Notosaurus card (292px wide, centered), overlapping only
   its padding; the glass dino stands on the folder's top edge at the right at every width,
   and the page leaves headroom above the folder to match its size (the artwork is 0.7 times
   as tall as it is wide, and its feet stand 1.5rem onto the folder) */
.dinos-home .dino-peek.dino-desktop.dino-pipe    { bottom: -0.5rem; left: calc(50% - 230px); }   /* the two lower dinos stand level, leaning out of the card between them */
.dinos-home .dino-peek.dino-desktop.dino-pointer { bottom: -0.5rem; left: calc(50% + 128px); }
.dinos-home .dino-peek.dino-desktop.dino-glass   { right: 3rem; bottom: calc(100% - 3rem); }   /* leaning on the folder rather than perched on its corner */
.dinos-home.dino-stage { margin-top: 6.5rem !important; }

/* Login: pipe and glass dinos lean on the folder's sides, overlapping 24px of its margin */
.dinos-login .dino-peek.dino-desktop.dino-pipe  { bottom: -0.5rem; left: -70px; }
/* The glass dino leans up into the pocket the tagline and the card leave open, and in toward the
   card as far as he can: only the empty corner of his picture reaches past the button end, never
   his drawing, and never any words. Check him against the button at every width before moving
   him further in. */
.dinos-login .dino-peek.dino-desktop.dino-glass { bottom: auto; top: -3.5rem; right: -128px; }

/* Settings: the pointer dino stands on the folder's top edge at the right at every width, with
   headroom above the folder to match its size (the artwork is 1.2 times as tall as it is wide) */
.dinos-settings .dino-peek.dino-desktop.dino-pointer { right: -0.5rem; bottom: calc(100% - 5.5rem); }   /* leaning on the folder's right edge, settled deep onto the paper */
.dinos-settings.dino-stage { margin-top: 8rem !important; }

/* 1100px and up: bigger dinos, same spots */
@media (min-width: 1100px) {
    .dino-peek.dino-desktop.dino-pipe    { width: 124px; }
    .dino-peek.dino-desktop.dino-pointer { width: 157px; }
    .dino-peek.dino-desktop.dino-glass   { width: 222px; }

    .dinos-home .dino-peek.dino-desktop.dino-pipe  { left: calc(50% - 260px); }
    .dinos-home.dino-stage { margin-top: 9rem !important; }
    .dinos-login .dino-peek.dino-desktop.dino-pipe  { left: -100px; }
    .dinos-login .dino-peek.dino-desktop.dino-glass { right: -180px; }
    .dinos-settings.dino-stage { margin-top: 11.25rem !important; }
}

/* 1280px and up: the biggest dinos, same spots. Home's pipe and pointer stop just below
   the top cards' words. */
@media (min-width: 1280px) {
    .dino-peek.dino-desktop.dino-pipe    { width: 138px; }
    .dino-peek.dino-desktop.dino-pointer { width: 176px; }
    .dino-peek.dino-desktop.dino-glass   { width: 248px; }

    .dinos-home .dino-peek.dino-desktop.dino-pipe  { left: calc(50% - 274px); }
    .dinos-home.dino-stage { margin-top: 10.25rem !important; }
    .dinos-login .dino-peek.dino-desktop.dino-pipe  { left: -114px; }
    .dinos-login .dino-peek.dino-desktop.dino-glass { right: -206px; }
    .dinos-settings.dino-stage { margin-top: 12.5rem !important; }
}

/* Phones: the phone artwork at one shared scale, standing together on the folder's top edge.
   On Home and Settings the page tabs sit at the top right, so the dinos gather on the left. */
@media (max-width: 768px) {
    .dino-stage { margin-top: 4.5rem !important; }
    .dino-peek.dino-mobile.dino-pipe    { width: 52px; left: 0.5rem; }
    .dino-peek.dino-mobile.dino-pointer { width: 63px; left: 0.75rem; }
    .dino-peek.dino-mobile.dino-glass   { width: 69px; right: 0.5rem; }
    /* Home: the three dinos spread evenly across the top edge left of the page tabs
       (152px of tab row and gap), centered at 1/6, 1/2 and 5/6 of that free space */
    .dinos-home .dino-peek.dino-mobile.dino-pipe    { left: calc((100% - 152px) / 6 - 26px); }
    .dinos-home .dino-peek.dino-mobile.dino-glass   { right: auto; left: calc((100% - 152px) / 2 - 34px); }
    .dinos-home .dino-peek.dino-mobile.dino-pointer { left: calc((100% - 152px) * 5 / 6 - 31px); }
}

/* Very narrow phones: the page tabs need the room, so Home's pointer dino sits this one out */
@media (max-width: 359px) {
    .dinos-home .dino-peek.dino-mobile.dino-pointer { display: none !important; }
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(52, 211, 153, 0.4);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(52, 211, 153, 0.6);
}

/* ============================================================
   DINO ASSET TOGGLE — Desktop vs Mobile
   Desktop versions shown by default, mobile versions hidden.
   At 768px breakpoint, swap visibility.
   ============================================================ */
.dino-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .dino-desktop {
        display: none !important;
    }
    .dino-mobile {
        display: block !important;
    }
}

/* ============================================================
   PAGE TABS — Home, Settings, Log out on the folder's right edge
   Same tabs as the tool pages. The current page's tab is cream
   like the active folder tab and is not a link. On phones they
   become a small row at the top right, level with the card's title tab.
   ============================================================ */
.sticky-tabs {
    position: absolute;
    right: -40px;   /* 8px of each tab lies over the back sheet's strip; 32px stands clear */
    top: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* On Settings the pointer dino leans on the same edge, so the tabs start just below its feet */
@media (min-width: 768px) {
    .dinos-settings .sticky-tabs {
        top: 9rem;
    }
}

.sticky-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    padding-left: 8px;   /* the icon sits centred in the part you can see, clear of the folder */
    height: 40px;   /* the phone tab turned on its side: 40 by 32 showing */
    text-decoration: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;   /* the button corner: page tabs are pressed like buttons */
    transition: width var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
    box-shadow: 1.5px 3px 6px rgba(0, 0, 0, 0.35);
}

.sticky-tab:hover {
    width: 50px;   /* pulled out 10px: the current page, or the tab under the pointer */
    opacity: 1;
    box-shadow: 2.5px 4px 10px rgba(0, 0, 0, 0.45);
}

.sticky-tab-glyph {
    font-size: 18px;
    line-height: 1;
    color: var(--on-green);
}

/* The one green, in the lamp's shade: the tabs stand at the folder's far edge, so they take the
   same few percent of falloff as a green button lying in that corner of the folder, and only a
   faint hairline edge, so they read as the same green as the buttons */
.sticky-tab-green {
    background: linear-gradient(var(--tab-shade), var(--tab-shade)), var(--green);
    border: 1px solid rgba(253, 246, 230, 0.15);
    border-left: none;
}

.sticky-tab-green:hover {
    background: linear-gradient(var(--tab-shade), var(--tab-shade)), var(--green);
}

.sticky-tab-current {
    width: 50px;   /* pulled out 10px: the current page, or the tab under the pointer */
    opacity: 1;
    background: linear-gradient(var(--tab-shade), var(--tab-shade)), var(--green);
    border: 1px solid rgba(253, 246, 230, 0.15);
    border-left: none;
    cursor: default;
}

.sticky-tab-current:hover {
    box-shadow: 1.5px 3px 6px rgba(0, 0, 0, 0.35);
}

/* The current tab is the same green as the others; only how far it stands out marks the page */

@media (max-width: 767px) {
    .sticky-tabs {
        top: auto;
        bottom: 100%;
        left: auto;
        right: 0.5rem;
        flex-direction: row;
        align-items: flex-end;
        gap: 8px;
    }

    .sticky-tab,
    .sticky-tab:hover {
        width: 40px;
        padding-left: 0;
        height: 32px;
        margin-left: 0;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
    }

    .sticky-tab-green {
        border-left: 1px solid rgba(253, 246, 230, 0.15);
        border-bottom: none;
    }

    .sticky-tab-current,
    .sticky-tab-current:hover {
        height: 36px;
        border-left: 1px solid rgba(253, 246, 230, 0.15);
        border-bottom: none;
    }

    .sticky-tab-glyph {
        font-size: 18px;
    }
}
/* Home tool cards: each card takes its tool's colour from the tokens, for the title and a
   soft border that firms up on hover */
.tool-card-diffasaurus { --tool: var(--tool-diffasaurus); }
.tool-card-analysaurus { --tool: var(--tool-analysaurus); }
.tool-card-notosaurus  { --tool: var(--tool-notosaurus); }

.tool-card {
    border-color: color-mix(in srgb, var(--tool) 30%, transparent);
}

.tool-card:hover {
    border-color: color-mix(in srgb, var(--tool) 60%, transparent);
}

.tool-card h3 {
    color: var(--tool);
}

/* ============================================================
   LIVING THINGS ON THE ACCOUNT PAGES
   Outline dinos are stickers; the plain dinos, the profile dino, the typed title and the
   Aurelia jelly are alive. Each motion is layered on top of the others (listed together), so
   a hover never replays the page-open hello. Hover motion needs a mouse, nothing moves with
   reduced motion, and the title is always complete for screen readers.
   - Dinos move from their feet, each on its own: they hop hello as the page opens, and a dino
     sways only when the mouse is over that dino.
   - The title is typewriter lettering: it types itself on, and jiggles like a typebar on hover.
   - The profile dino pops in, and looks around on hover.
   - The tagline comes into focus phrase by phrase, and each phrase snaps sharper on hover.
   - The Aurelia jelly swims: one pulse-and-glide as the page opens, and it keeps swimming while hovered.
   ============================================================ */
.dino-peek {
    transform-origin: 50% 100%;
}

.dino-peek.dino-pipe {
    --hello: dino-hop 0.7s var(--ease-standard) 0.3s both;
}

.dino-peek.dino-pointer {
    --hello: dino-hop 0.7s var(--ease-standard) 0.5s both;
}

.dino-peek.dino-glass {
    --hello: dino-hop 0.7s var(--ease-standard) 0.7s both;
}

/* The title is a centred block sized to its words (so typing reveals just the text) with no
   stray line space beneath it. Where the profile dino follows, the circle sits optically centred
   between the title and the tagline: the eye measures from the title's baseline, and the
   typewriter face leaves room for descenders below it, so the title's margin is pulled in. */
.site-title {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

h1.site-title:has(+ img.profile-dino) {
    margin-bottom: -0.25rem;
}

/* Desktop: measured from the letters, about 22px above the circle and 18px below it, a touch
   bottom-weighted so the circle reads as resting centred */
@media (min-width: 769px) {
    h1.site-title:has(+ img.profile-dino) {
        margin-bottom: -0.625rem;
    }

    img.profile-dino.dino-desktop {
        margin-bottom: 15px;
    }

    /* Home reads better with the tagline a little lower still */
    body:has(.dinos-home) img.profile-dino.dino-desktop {
        margin-bottom: 21px;
    }
}

@keyframes dino-hop {
    0%   { transform: translateY(0) scale(1, 1); }
    20%  { transform: translateY(0) scale(1.03, 0.95); }
    50%  { transform: translateY(-8px) scale(0.98, 1.03); }
    80%  { transform: translateY(0) scale(1.02, 0.97); }
    100% { transform: translateY(0) scale(1, 1); }
}

@keyframes dino-sway {
    0%   { transform: rotate(0deg); }
    25%  { transform: translateY(-4px) rotate(-4deg); }
    55%  { transform: translateY(0) rotate(3deg); }
    80%  { transform: rotate(-1.5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes type-on {
    from { clip-path: inset(-40px 100% -40px -40px); }
    to   { clip-path: inset(-40px -40px -40px -40px); }
}

@keyframes typebar-jiggle {
    0%   { transform: none; }
    25%  { transform: translate(0.5px, -1px) rotate(-0.6deg); }
    50%  { transform: translate(-0.5px, 0.5px) rotate(0.4deg); }
    75%  { transform: translateY(-0.5px); }
    100% { transform: none; }
}

@keyframes profile-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes profile-look {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(-8deg); }
    65%  { transform: rotate(6deg); }
    100% { transform: rotate(0deg); }
}

/* The Aurelia jelly glows softly like the title, and glows brighter as it swims */
.footer-jelly {
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45));
}

/* A jellyfish swims by pulsing: the bell squeezes in, pushes up with a soft glow, then drifts down */
@keyframes jelly-swim {
    0%   { transform: translateY(0) scale(1, 1);          filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45)); }
    18%  { transform: translateY(1px) scale(1.06, 0.92);  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4)); }
    40%  { transform: translateY(-8px) scale(0.95, 1.06); filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.8)); }
    65%  { transform: translateY(-6px) scale(1.01, 0.99); filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6)); }
    100% { transform: translateY(0) scale(1, 1);          filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45)); }
}

@keyframes jelly-swim-held {
    0%   { transform: translateY(0) scale(1, 1);          filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45)); }
    18%  { transform: translateY(1px) scale(1.06, 0.92);  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4)); }
    40%  { transform: translateY(-8px) scale(0.95, 1.06); filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.8)); }
    65%  { transform: translateY(-6px) scale(1.01, 0.99); filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.6)); }
    100% { transform: translateY(0) scale(1, 1);          filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.45)); }
}

/* The tagline: each phrase comes into focus, then snaps sharper under the mouse */
.tagline span {
    display: inline-block;
}

@keyframes phrase-focus {
    from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
    to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

@keyframes phrase-snap {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); text-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
    100% { transform: scale(1); }
}

.tagline span:nth-child(1) { --focus: phrase-focus 0.5s var(--ease-standard) 1.2s both; }
.tagline span:nth-child(2) { --focus: phrase-focus 0.5s var(--ease-standard) 1.4s both; }
.tagline span:nth-child(3) { --focus: phrase-focus 0.5s var(--ease-standard) 1.6s both; }
.tagline span:nth-child(4) { --focus: phrase-focus 0.5s var(--ease-standard) 1.8s both; }
.tagline span:nth-child(5) { --focus: phrase-focus 0.5s var(--ease-standard) 2.0s both; }

@media (prefers-reduced-motion: no-preference) {
    .dino-peek {
        animation: var(--hello);
    }

    .site-title {
        animation: type-on 1.1s steps(21, end) 0.1s both;
    }

    .profile-dino {
        animation: profile-pop 0.6s var(--ease-standard) 0.2s both;
    }

    .footer-jelly {
        transform-origin: 50% 40%;
        animation: jelly-swim 1.8s ease-in-out 2.4s 1;
    }

    .tagline span {
        animation: var(--focus);
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* Each dino is petted on its own: /shared/dino-pet.js marks only the dino under the mouse,
       and the dinos never take the mouse themselves, so clicks always reach the page beneath */
    .dino-peek.is-petted {
        animation: var(--hello), dino-sway 0.8s var(--ease-standard);
    }

    .site-title:hover {
        animation: type-on 1.1s steps(21, end) 0.1s both, typebar-jiggle 0.35s var(--ease-standard);
    }

    .profile-dino:hover {
        animation: profile-pop 0.6s var(--ease-standard) 0.2s both, profile-look 0.9s var(--ease-standard);
    }

    .footer-jelly:hover {
        animation: jelly-swim 1.8s ease-in-out 2.4s 1, jelly-swim-held 1.8s ease-in-out infinite;
    }

    .tagline span:hover {
        animation: var(--focus), phrase-snap 0.35s var(--ease-standard);
    }
}

/* ============================================================
   THE LOGIN BUTTON — a dino stamp that glows like the jelly
   It works like every green button (it rises as you reach for it and stamps down when
   clicked, casting the same lamp shadow), and on the dark jungle it glows like the Aurelia
   jelly: a soft emerald halo at rest that breathes while hovered and flashes as it stamps.
   With reduced motion the glow simply brightens on hover.
   ============================================================ */
.login-btn {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--on-green);
    background: var(--green);
    border: 1px solid var(--green);
    box-shadow: var(--shadow-sheet-dark), 0 0 18px rgba(16, 185, 129, 0.25);
    text-decoration: none;
}

.login-btn:hover {
    box-shadow: var(--shadow-paper-lift), 0 0 28px rgba(16, 185, 129, 0.5);
}

.login-btn:active {
    box-shadow: 0 0 36px rgba(16, 185, 129, 0.7);
}

/* While hovered, the lifted button pulses like the jelly's bell (a slight squeeze and release)
   in time with its breathing glow */
@keyframes login-glow-breathe {
    0%, 100% { transform: translateY(-2px) scale(1, 1);         box-shadow: var(--shadow-paper-lift), 0 0 22px rgba(16, 185, 129, 0.35); }
    50%      { transform: translateY(-3px) scale(0.992, 1.012); box-shadow: var(--shadow-paper-lift), 0 0 34px rgba(16, 185, 129, 0.65); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* The page-open motion stays first in each list, so hovering or pressing never replays it */
    .login-btn:hover {
        transform: translateY(-2px);
        animation: button-stamp 0.35s var(--ease-standard) 0.3s both,
                   login-glow-breathe 2.4s ease-in-out infinite;
    }

    .login-btn:active {
        transform: translateY(1px) scale(0.98);
        transition-duration: 60ms;
        animation: button-stamp 0.35s var(--ease-standard) 0.3s both;
    }
}

/* ============================================================
   COMPACT HEADER SPACING (desktop only; phones keep their own)
   A little less empty jungle between the tagline and the case file. Home and Settings keep
   their dino headroom, so no dino moves; Login's dinos stand beside the card and move with it.
   ============================================================ */
@media (min-width: 769px) {
    .page-header {
        margin-bottom: 0 !important;
    }

    .dinos-login.dino-stage {
        margin-top: 1.75rem !important;
    }

    /* Home and Settings: the folder comes up under the tagline; each dino keeps its spot on it */
    .dinos-home.dino-stage     { margin-top: 5.75rem !important; }
    .dinos-settings.dino-stage { margin-top: 7.25rem !important; }
}

@media (min-width: 1100px) {
    .dinos-home.dino-stage     { margin-top: 8.25rem !important; }
    .dinos-settings.dino-stage { margin-top: 10.5rem !important; }
}

@media (min-width: 1280px) {
    .dinos-home.dino-stage     { margin-top: 9.5rem !important; }
    .dinos-settings.dino-stage { margin-top: 11.75rem !important; }
}

/* Legal pages: a long sheet of reading on the folder. Section names in the Case Font; the words
   in the body font at a comfortable reading size and spacing, in the warm text ink. */
.legal-sheet {
    color: var(--ink-text);
    font-size: 15px;
    line-height: 1.7;
}

.legal-sheet .legal-updated {
    text-align: center;
    color: var(--ink-a70);
    font-size: 14px;
    margin-bottom: 2rem;
}

/* Section headings read in the body font, a step bolder: the typewriter names the sheets on
   their tabs, and is tiring to read heading after heading */
.legal-sheet h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* The sections are grouped on divider sheets, like the settings page's; the sheet's own edge
   gives the first heading its room */
.legal-sheet .sub-folder-panel > :first-child {
    margin-top: 0;
}

/* A sub-heading within a section: the body font, one step bolder, so the typewriter keeps
   naming only the sections */
.legal-sheet h4 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.legal-sheet strong {
    font-weight: 600;
}

.legal-sheet p + p,
.legal-sheet p + ul,
.legal-sheet ul + p {
    margin-top: 0.75rem;
}

.legal-sheet ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.legal-sheet li + li {
    margin-top: 0.25rem;
}

.legal-sheet .legal-link {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   DESK MOTION ON THE ACCOUNT PAGES
   The same motions the tool pages use, so a button, a tab or a sticker behaves the same
   wherever it sits: green buttons stamp, cream buttons slip like paper, tabs lift to peek,
   stickers stick on and wiggle. Mouse only, and never with reduced motion.
   ============================================================ */

@keyframes sticker-stick {
    0%   { transform: scale(0.9) rotate(-3deg); }
    60%  { transform: scale(1.06) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes sticker-wiggle {
    0%   { transform: translateY(0) rotate(0deg); }
    35%  { transform: translateY(-3px) rotate(-2deg); }
    70%  { transform: translateY(-3px) rotate(1.5deg); }
    100% { transform: translateY(-3px) rotate(0deg); }
}

.sub-folder-tab,
.key-status {
    transition: transform var(--dur-base) var(--ease-standard);
}

/* Your Account: who is signed in, shown as plain words (nothing here looks like a field to type
   in, because the details are changed at Tendril Terminal). The label is a quiet body-font label;
   the value is account data, in the terminal font. */
.account-details {
    display: grid;
    gap: var(--space-4);
    margin: 0;
}

/* A caption above each value */
.account-details > div {
    display: grid;
    gap: var(--space-2);
}

.account-details dt {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-a70);
}

/* Each value sits in a cream box exactly like the tools' writing boxes (paper cream, a thin ink
   edge, the 8px corner, flat, the terminal font at 14px), but for reading: the plain arrow, and
   no typing, since the details are changed at Tendril Terminal */
.account-details dd {
    margin: 0;
    padding: var(--space-3);
    background: var(--paper-cream);
    border: 1px solid var(--ink-a30);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-text);
    cursor: default;
    overflow-wrap: anywhere;   /* a long email wraps rather than running off the sheet */
}

.account-note {
    margin-top: var(--space-4);
    font-size: 13px;
    color: var(--ink-a70);
}

/* Bring your own key, coming soon: the sheets show how it will work, greyed and not yet usable.
   The status sticker and a Forget button (for a key saved on this device before) stay clear. */

/* Your Own Keys: one sheet built like Your Account. A short note, then each company under a quiet
   caption (the same as Your Account's), with room between them */
.own-keys-lede {
    margin-top: 0;
}

/* The key fields are the Account sheet's boxes, for typing: the same cream, edge, corner and
   terminal font, so the two sheets match */
.own-key-field {
    padding: var(--space-3);
    background: var(--paper-cream);
    border: 1px solid var(--ink-a30);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-text);
}

.own-key-block + .own-key-block,
.own-keys-lede + .own-key-block {
    margin-top: var(--space-6);
}

.own-key-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2rem;   /* the sticker's height, so the caption row never jumps when it appears */
    margin-bottom: var(--space-2);
}

.own-key-caption {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--ink-a70);
}

.own-keys-soon .sub-folder-panel input,
.own-keys-soon .sub-folder-panel label,
.own-keys-soon .button-pair {
    opacity: 0.55;
    pointer-events: none;
}

/* Buttons land the way the tool pages' do (common.css): cream paper is laid down, sliding in a
   little from the lamp's side; green is stamped, coming down, squashing a hair and settling.
   Scale, rotate and translate rather than transform, so hover and press still work on top. */
@keyframes paper-lay {
    0%   { translate: -6px -4px; rotate: -2deg; }
    100% { translate: 0 0;       rotate: 0deg; }
}

@keyframes button-stamp {
    0%   { scale: 1.1;       translate: 0 -3px; }
    50%  { scale: 1.03 0.93; translate: 0 0; }
    75%  { scale: 0.99 1.02; }
    100% { scale: 1;         translate: 0 0; }
}

/* The page opens: each sheet's status is slapped onto its paper, the cream trays and buttons are
   laid down (a tray as one piece), then the green buttons are stamped. Forget Key is laid down
   the same way when a key is saved. */
@media (prefers-reduced-motion: no-preference) {
    .key-status {
        animation: sticker-stick 0.35s var(--ease-standard) 0.15s both;
    }

    .btn-cream,
    .btn-danger,
    .button-pair {
        animation: paper-lay 0.35s var(--ease-standard) 0.2s both;
    }

    .btn-green,
    .login-btn {
        animation: button-stamp 0.35s var(--ease-standard) 0.3s both;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    /* A section tab lifts to peek, as it does on the desk */
    .sub-folder-tab:hover {
        transform: translateY(-2px);
    }

    /* A sticker wiggles when touched; the page-open motion stays first in the list, so
       hovering never replays it */
    .key-status:hover {
        transform: translateY(-3px);
        animation: sticker-stick 0.35s var(--ease-standard) 0.15s both,
                   sticker-wiggle 0.5s var(--ease-standard);
    }

    /* Forget Key presses like every other button */
    button.btn-danger:hover {
        transform: translateY(-2px);
    }

    button.btn-danger:active {
        transform: translateY(1px) scale(0.98);
        transition-duration: 60ms;
    }
}

/* ============================================================
   A PAIR OF BUTTONS IN ONE TRAY
   Save Key and Get Key belong to each other, so they sit in one cream tray the way a toggle
   does: the same height, the same corner, the same sheet shadow. They are two real buttons,
   not a switch — the green one acts, the cream one fetches — so neither ever looks "chosen".
   ============================================================ */

.button-pair {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;          /* never pushes its sheet wider than the folder */
    min-height: 2.25rem;
    gap: 2px;
    padding: 2px;
    background: var(--paper-cream);
    border: 1px solid rgba(69, 26, 3, 0.25);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sheet);
}

.button-pair > * {
    flex: 1;   /* even halves, so neither button crowds the other */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    min-height: 0;
}

/* The green piece: the pair's one action, lying in the tray like a toggle's chosen side */
.button-pair .pair-action {
    background: var(--green);
    color: var(--on-green);
    box-shadow: var(--shadow-sheet-dark);
}

.button-pair .pair-action:active {
    box-shadow: none;
}

/* The cream piece: the quiet errand, the same paper as the tray it sits in */
.button-pair .pair-aside {
    background: transparent;
    color: var(--ink-text);
}

/* A reading rather than a button: what is left to spend, sitting in the tray beside the action.
   Nothing to press, so the plain arrow and no hover of its own. */
.button-pair .pair-reading {
    background: transparent;
    color: var(--ink-text);
    cursor: default;
    user-select: none;
}

.button-pair .pair-aside:hover {
    background: var(--ink-a10);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .button-pair .pair-action:hover {
        box-shadow: var(--shadow-paper-lift);
        transform: translateY(-1px);
    }

    .button-pair .pair-action:active {
        transform: translateY(1px) scale(0.98);
        transition-duration: 60ms;
    }

    .button-pair .pair-aside:hover {
        transform: translateY(-1px);
    }
}