/* Studio first-steps tour — scroll-driven spotlight over a live mock of the app. */

:root {
    --paper: #faf8f5;
    --ink: #2a2725;
    --muted: #8a8278;
    --line: #e8e2da;
    --coral: #e8623d;
    --coral-soft: #fff0eb;
    --sidebar: #f2ede6;
    --mock: #fffdfb;
    --shadow: 0 24px 60px rgba(42, 39, 37, 0.12);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --display: "Fraunces", "Times New Roman", serif;
    --ui: "Inter", system-ui, sans-serif;
}

html.dark {
    --paper: #1a1816;
    --ink: #ede8e3;
    --muted: #8a8278;
    --line: #3a3530;
    --coral: #ff7a4d;
    --coral-soft: rgba(255, 122, 77, 0.14);
    --sidebar: #232020;
    --mock: #1f1c1a;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html {
    scroll-behavior: smooth;
}

.stage-pin {
    --guide-steps: 10;
    height: calc(var(--guide-steps) * 100dvh);
}

body {
    margin: 0;
    font-family: var(--ui);
    background: var(--paper);
    color: var(--ink);
    overflow-x: clip;
}

.guide-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 80;
    background: var(--coral);
    transform-origin: left center;
    transform: scaleX(var(--progress, 0));
    pointer-events: none;
}

.guide-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}

.guide-header a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.guide-header a:hover {
    color: var(--coral);
}

.guide-header h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    display: none;
}

@media (min-width: 768px) {
    .guide-header h1 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* ── Hero ── */

.hero {
    min-height: calc(100dvh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 5rem;
    position: relative;
}

.hero-kicker {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--coral);
    margin-bottom: 1.25rem;
}

.hero h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.4rem, 7vw, 5.2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 1rem;
    font-optical-sizing: auto;
}

.hero p {
    max-width: 28rem;
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.55;
    margin: 0;
}

.scroll-hint {
    position: absolute;
    bottom: 1.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.scroll-hint .chevron {
    width: 22px;
    height: 22px;
    animation: bob 1.26s var(--ease) infinite;
}

@keyframes bob {
    0%, 100% { transform: translateY(0); opacity: 0.45; }
    50% { transform: translateY(8px); opacity: 1; }
}

.stage {
    position: sticky;
    top: 64px;
    height: calc(100dvh - 64px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Side by side once there is room across. A short landscape phone qualifies
   too: stacked, its mock gets barely 200px of height and the sidebar spills
   out of the frame. Keep this list in sync with DESKTOP_STAGE in guide.js. */
@media (min-width: 960px), (min-width: 700px) and (max-height: 560px) {
    .stage {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 2rem;
        padding: 0 2rem 1.25rem;
        align-items: stretch;
    }
}

@media (min-width: 1280px) {
    .stage {
        gap: 2.5rem;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

.stage-mock {
    position: relative;
    z-index: 10;
    flex: 0 0 42%;
    min-height: 168px;
    max-height: 46%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    pointer-events: none;
    background: var(--paper);
    padding: 0.2rem 0 0.45rem;
}

@media (min-width: 960px), (min-width: 700px) and (max-height: 560px) {
    .stage-mock {
        flex: none;
        height: 100%;
        max-height: none;
        min-height: 0;
        padding: 0;
    }
}

.mock-frame {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: var(--mock);
}

.mock-shell {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--mock);
    overflow: hidden;
    font-size: 12px;
}

.mock-sidebar {
    width: min(40%, 148px);
    flex-shrink: 0;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 8px 6px;
    gap: 2px;
}

@media (min-width: 700px) {
    .mock-sidebar {
        width: 148px;
        padding: 10px 8px;
    }
}

.chats-hotspot,
.places-hotspot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 12px;
}

.chats-hotspot.is-on,
.places-hotspot.is-on,
.mock-composer-right.is-on {
    background: color-mix(in srgb, var(--mock) 70%, transparent);
}

.mock-hist-grow {
    flex: 1;
    min-height: 6px;
}

.mock-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--paper);
}

.mock-top {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    color: var(--muted);
    gap: 8px;
}

.mock-launcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
}

.mock-launcher span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-top-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mock-credit {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--coral-soft);
    color: var(--coral);
    font-size: 10px;
    font-weight: 600;
}

.mock-credit .material-symbols-outlined {
    font-size: 12px;
}

.mock-greeting {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 28px 8px;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.stage[data-spot="compose"] .mock-greeting,
.stage[data-spot="attach"] .mock-greeting,
.stage[data-spot="tools"] .mock-greeting,
.stage[data-spot="model"] .mock-greeting,
.stage[data-spot="send"] .mock-greeting {
    opacity: 0.28;
}

.mock-hi {
    font-size: 13px;
    color: var(--coral);
    font-weight: 500;
}

.mock-ask {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-top: 2px;
}

.mock-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.mock-suggestions > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--mock);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink);
}

.mock-suggestions .material-symbols-outlined {
    font-size: 14px;
    color: var(--coral);
}

.mock-composer {
    margin: 0 16px 16px;
    padding: 10px 12px 8px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--mock);
    position: relative;
}

.mock-input-line {
    min-height: 28px;
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 0 2px;
}

.mock-caret {
    display: inline-block;
    width: 1.5px;
    height: 14px;
    margin-left: 2px;
    background: var(--coral);
    opacity: 0;
}

.stage[data-spot="compose"] .mock-caret {
    opacity: 1;
    animation: blink 1.05s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.mock-composer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.mock-composer-left,
.mock-composer-right {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.mock-composer-right {
    flex-shrink: 1;
}

.mock-icon-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mock-icon-btn .material-symbols-outlined {
    font-size: 18px;
}

.mock-model {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 6px 4px 8px;
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

.mock-model > span:not(.material-symbols-outlined) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-model .material-symbols-outlined {
    font-size: 14px;
    color: var(--muted);
    flex-shrink: 0;
}

.mock-send {
    color: var(--coral);
}

.mock-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    text-align: left;
    min-width: 0;
}

.mock-nav > span:not(.material-symbols-outlined):not(.callout) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mock-nav .material-symbols-outlined,
.mock-nav svg {
    width: 16px;
    height: 16px;
    font-size: 16px;
    flex-shrink: 0;
}

.mock-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mock-hist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 10px 8px 4px;
}

.mock-hist-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--muted);
    flex-shrink: 0;
}

.mock-hist-actions .material-symbols-outlined {
    font-size: 14px;
}

.mock-menu {
    margin-bottom: 4px;
    color: var(--muted);
}

.mock-hist {
    padding: 0 8px;
}

.mock-hist-item {
    height: 26px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    margin-bottom: 4px;
}

.mock-hist-item:nth-child(2) { width: 78%; }
.mock-hist-item:nth-child(3) { width: 62%; }

.mock-flyout.hotspot {
    position: absolute;
    left: 8px;
    bottom: 48px;
    width: 176px;
    max-height: min(240px, calc(100% + 120px), var(--flyout-max, 240px));
    overflow: hidden;
    background: var(--mock);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 4px 0;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
    z-index: 6;
}

.mock-flyout.is-tools { left: 40px; }
.mock-flyout.is-models { left: auto; right: 8px; width: 158px; transform-origin: bottom right; }
/* The model list is the tallest menu; max-height only caps it, so a roomier
   allowance lets it show every family on a desktop frame while a phone frame
   still renders it at its own (shorter) content height. */
.mock-flyout.is-models { max-height: min(260px, calc(100% + 160px), var(--flyout-max, 260px)); }
/* The composer is the positioning context, so this keeps a menu from hanging
   off the edge of the mock on a narrow phone. */
.mock-flyout.hotspot { max-width: calc(100% - 16px); }
.stage[data-spot="attach"] .mock-flyout.is-plus,
.stage[data-spot="tools"] .mock-flyout.is-tools,
.stage[data-spot="model"] .mock-flyout.is-models {
    opacity: 1; transform: translateY(0) scale(1); visibility: visible;
}
.mock-flyout:not(.is-on) { opacity: 0 !important; visibility: hidden; }
.mock-flyout-head { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 2px !important; }
.mock-flyout .is-checked { font-weight: 600; color: var(--coral); }
.mock-flyout .mock-family { justify-content: space-between; }
.mock-flyout.is-models div { padding: 4px 10px; }
.mock-flyout .mock-family .material-symbols-outlined { font-size: 14px; }

.mock-flyout div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 11px;
}

.mock-flyout .material-symbols-outlined {
    font-size: 16px;
    color: var(--muted);
}

/* Spotlight + overlay pointer */

.callout {
    display: none;
}

.hotspot {
    position: relative;
    z-index: 1;
    transition: background-color 0.35s, color 0.35s;
}

.stage.is-spotlit .hotspot:not(.is-on):not(.mock-flyout) {
    opacity: 0.42;
}

.hotspot.is-on,
.hotspot.is-on .hotspot:not(.mock-flyout) {
    z-index: 5;
    opacity: 1 !important;
}

.hotspot.is-on {
    background: var(--mock);
}

.guide-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    z-index: 20;
    border: 3px solid var(--coral);
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    transform-origin: top left;
    transform: translate3d(var(--rx, 0px), var(--ry, 0px), 0) scale(var(--rw, 1), var(--rh, 1));
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--coral) 28%, transparent),
        0 0 0 999px rgba(26, 24, 22, 0.42);
    transition: transform 0.45s var(--ease), opacity 0.2s;
    transition: transform var(--md-spring-soft), opacity 0.2s;
}

.guide-ring.is-on {
    opacity: 1;
    animation: ring-pulse 1.4s var(--ease) infinite;
}

@keyframes ring-pulse {
    0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 28%, transparent), 0 0 0 999px rgba(26, 24, 22, 0.42); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--coral) 12%, transparent), 0 0 0 999px rgba(26, 24, 22, 0.42); }
}

html.dark .guide-ring { box-shadow: 0 0 0 6px color-mix(in srgb, var(--coral) 35%, transparent), 0 0 0 999px rgba(0, 0, 0, 0.55); }

.guide-pointer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    max-width: min(240px, calc(100% - 16px));
    transform: translate(var(--gx, 0px), var(--gy, 0px));
    transition: transform 0.45s var(--ease), opacity 0.2s;
}

.guide-pointer.is-on {
    opacity: 1;
}

.guide-pointer.from-right,
.guide-pointer.from-left {
    flex-direction: row;
}

.guide-pointer.from-above,
.guide-pointer.from-below {
    flex-direction: column;
    align-items: center;
}

.pointer-card {
    margin: 0;
    padding: 8px 12px;
    background: var(--coral);
    color: #fff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(232, 98, 61, 0.35);
    overflow-wrap: break-word;
    white-space: normal;
}

.pointer-arrow {
    flex-shrink: 0;
    display: block;
}

.guide-pointer.from-right .pointer-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 20px 12px 0;
    border-color: transparent var(--coral) transparent transparent;
    animation: poke-x 0.75s var(--ease) infinite;
    order: -1;
}

.guide-pointer.from-left .pointer-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--coral);
    animation: poke-x-left 0.75s var(--ease) infinite;
    order: 2;
}

.guide-pointer.from-above .pointer-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 12px 0 12px;
    border-color: var(--coral) transparent transparent transparent;
    animation: poke-y 0.75s var(--ease) infinite;
    order: 2;
}

.guide-pointer.from-below .pointer-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 20px 12px;
    border-color: transparent transparent var(--coral) transparent;
    animation: poke-y-up 0.75s var(--ease) infinite;
    order: -1;
}

@keyframes poke-x { 0%, 100% { transform: translateX(6px); } 50% { transform: translateX(0); } }
@keyframes poke-x-left { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(0); } }
@keyframes poke-y { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(0); } }
@keyframes poke-y-up { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(0); } }

/* ── Chapters ── */

.chapters {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 0 0.15rem;
}

.chapter {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.35rem 0.15rem 0.75rem;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px);
    transition: opacity 0.4s var(--ease), transform 0.45s var(--ease), visibility 0.4s;
}

.chapter.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.chapter-num {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.75rem;
}

.chapter h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.45rem, 3.6vw, 2.6rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 0.9rem;
}

.chapter p {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 36ch;
}

.cta-block {
    text-align: left;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform 0.15s var(--ease), background 0.2s;
}

.btn-primary {
    background: var(--coral);
    color: #fff;
}

.btn-primary:hover {
    filter: brightness(1.05);
}

.btn-primary:active,
.btn-ghost:active {
    transform: scale(0.97);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn-ghost:hover {
    background: var(--sidebar);
}

.paper-grain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

html.dark .paper-grain {
    mix-blend-mode: overlay;
    opacity: 0.07;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scroll-hint .chevron,
    .mock-caret,
    .hotspot.is-on,
    .chapter {
        animation: none !important;
    }
    .mock-flyout,
    .hotspot,
    .mock-greeting,
    .guide-ring,
    .guide-pointer {
        transition: none !important;
    }
    .guide-ring.is-on,
    .guide-pointer.from-right .pointer-arrow,
    .guide-pointer.from-left .pointer-arrow,
    .guide-pointer.from-above .pointer-arrow,
    .guide-pointer.from-below .pointer-arrow {
        animation: none !important;
    }
}

/* ── Responsive overrides ──
   These MUST stay at the end of the file: every rule below has the same
   specificity as the base rule it overrides, so it only wins on source order.
   Adding a mock rule above and a media override here keeps that contract. */

@media (min-width: 700px) and (max-width: 959px) and (min-height: 561px) {
    .stage-mock {
        flex-basis: 48%;
        max-height: 52%;
        min-height: 220px;
    }

    .mock-ask {
        font-size: 18px;
    }
}

/* Percentage-only sizing collapses the mock on a short phone: the sidebar stops
   fitting, its buttons squash, and the bottom rows fall outside the frame. Give
   it a pixel floor wherever the page is tall enough to spare the room. */
@media (max-width: 959px) and (min-height: 560px) {
    .stage-mock {
        min-height: 256px;
    }
}

@media (max-width: 699px) {
    .mock-suggestions,
    .mock-credit,
    .mock-launcher span:last-child {
        display: none;
    }

    .mock-ask {
        font-size: 15px;
    }

    .mock-hi {
        font-size: 11px;
    }

    .mock-top {
        height: 34px;
        padding: 0 8px;
    }

    .mock-greeting {
        padding: 0 12px 4px;
    }

    .mock-composer {
        margin: 0 8px 8px;
        padding: 8px 8px 6px;
    }

    .mock-hist-head {
        padding: 6px 6px 2px;
    }

    .mock-sidebar {
        padding: 5px 4px;
    }

    .mock-hist-grow {
        min-height: 2px;
    }

    .mock-hist-item {
        height: 18px;
        margin-bottom: 3px;
    }

    .mock-menu {
        margin-bottom: 2px;
    }

    /* Sits closer to the composer on a phone, which buys the menu the rows it
       would otherwise lose to --flyout-max. */
    .mock-flyout.hotspot {
        bottom: 40px;
    }

    .mock-flyout div {
        padding: 3px 8px;
        font-size: 10px;
        gap: 6px;
    }

    /* The model list is the longest one; it has to clear --flyout-max even on
       a 320px-wide phone, where the frame is only ~244px tall. */
    .mock-flyout.is-models div {
        padding: 2px 8px;
        font-size: 10px;
        gap: 6px;
    }

    .pointer-card {
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 10px;
    }

    .chapter h3 {
        font-size: clamp(1.25rem, 6vw, 1.85rem);
    }

    .chapter p {
        font-size: 0.95rem;
    }
}

@media (max-width: 420px) {
    .mock-nav {
        height: 28px;
        padding: 0 6px;
        gap: 4px;
        font-size: 10px;
    }

    .mock-icon-btn {
        width: 22px;
        height: 22px;
    }

    .mock-icon-btn .material-symbols-outlined {
        font-size: 16px;
    }

    .mock-composer-left,
    .mock-composer-right {
        gap: 0;
    }

    /* space-between alone lets the two groups meet when the row is full; a gap
       makes the model chip give way instead. */
    .mock-composer-row {
        gap: 8px;
    }

    /* At this width the composer's two button groups meet in the middle and the
       "Skills" label runs into the model chip. The icon carries the meaning,
       and chapter 06 opens the menu anyway. */
    .mock-composer-left [data-i18n="guide:mock.tools"] {
        display: none;
    }

    .mock-model {
        font-size: 9px;
        padding: 2px 4px;
        max-width: 4.4rem;
    }

    .mock-model .material-symbols-outlined {
        display: none;
    }

    /* .hotspot / .is-models carry two classes, so the override needs to match it. */
    .mock-flyout.hotspot {
        width: 140px;
        max-width: calc(100% - 30px);
    }

    .mock-flyout.is-tools {
        left: 22px;
    }

    .mock-flyout.is-models {
        width: 132px;
    }

    .mock-flyout .material-symbols-outlined {
        font-size: 14px;
    }
}