/* ════════════════════════════════════════════════════════════════════════════
   mobile.css — the responsive layer.

   Every rule in this file lives inside a `max-width` media query (or a
   `hover: none` query), so the desktop rendering of main/home/auth/timeline.css
   is left completely untouched. Load it LAST, after every other stylesheet.

   Breakpoints
     ≤ 900px  → phones and small tablets: the editor chrome collapses into a
                drawer, the public nav collapses into a burger menu.
     ≤ 480px  → narrow phones: extra tightening.

   Reference device: iPhone 11 Pro Max (414 × 896 CSS px).
   ════════════════════════════════════════════════════════════════════════════ */

/* The only rule outside a media query, and it exists precisely to keep desktop
   untouched: js/mobile.js creates these controls on every page, so they are
   hidden by default and only switched on inside the breakpoint below. */
.nav-toggle,
.topbar-burger,
.topbar-quick,
.m-fabs { display: none; }


@media (max-width: 900px) {

  /* ─── Base ──────────────────────────────────────────────────────────────── */

  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* iOS Safari zooms the whole page when a focused field is under 16px.
     Inline `style="font-size:13px"` is all over the markup, hence !important. */
  input, textarea, select,
  .form-input, .hero-search-input, .topbar-title, .auth-form .form-input {
    font-size: 16px !important;
  }

  /* Anything absolutely centred with left:50% + translateX(-50%) is a common
     source of horizontal overflow on narrow screens — handled case by case. */


  /* ─── Public nav (index / history / tracking / dashboard) ───────────────── */
  /* The nav becomes a wrapping flex container: [logo] [burger] on the first
     row, and the links / actions drop below it as a panel when opened. */

  .nav {
    padding: 0 14px;
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    row-gap: 0;
    align-content: flex-start;
  }

  .nav.nav-open {
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(16px);
    border-color: var(--border);
    padding-bottom: 10px;
  }

  .nav-logo { order: 0; min-height: 56px; }

  .nav-toggle { order: 0; margin-left: auto; }

  .nav-links,
  .nav-actions { flex-basis: 100%; }

  .nav-links {
    position: static;
    transform: none;
    order: 1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .nav-actions {
    order: 2;
    display: none;
    gap: 10px;
    padding-top: 10px;
  }

  .nav.nav-open .nav-links { display: flex; }
  .nav.nav-open .nav-actions { display: flex; }

  .nav-link {
    padding: 13px 12px;
    font-size: 15px;
    min-height: 46px;
    display: flex;
    align-items: center;
  }

  .nav-actions > * {
    flex: 1 1 0;
    justify-content: center;
    min-height: 46px;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  /* The burger itself (injected by js/mobile.js). */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }
  .nav-toggle:active { background: var(--surface); }


  /* ─── Hero / landing ────────────────────────────────────────────────────── */

  .hero { padding: 92px 18px 56px; min-height: auto; }

  /* The blurred orbs are 300–600px wide and very expensive to composite on a
     phone GPU; shrink them and drop one. */
  .hero-orb { filter: blur(60px); }
  .hero-orb-1 { width: 320px; height: 320px; top: -40px; }
  .hero-orb-2 { width: 220px; height: 220px; left: -40px; }
  .hero-orb-3 { display: none; }

  .hero-badge {
    font-size: 12px;
    padding: 6px 12px;
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.4;
  }

  .hero-title { font-size: clamp(38px, 13vw, 56px); margin-bottom: 18px; }
  .hero-sub { font-size: 15px; margin-bottom: 32px; }

  .hero-cta { width: 100%; flex-direction: column; gap: 12px; }
  .hero-cta > * {
    width: 100%;
    justify-content: center;
    padding: 15px 24px !important;
    font-size: 15px !important;
  }

  .hero-search { margin-top: 32px; width: 100%; }
  .hero-search-wrap { max-width: 100%; }

  .hero-meta { margin-top: 40px; gap: 18px; font-size: 12px; }

  /* Landing preview mock-up: it is a decorative, fixed-width scene — let it
     scroll horizontally inside its own frame instead of blowing out the page. */
  .preview-section { padding: 0 14px 72px; }
  .preview-wrap { border-radius: 14px; }
  .preview-bar { padding: 10px 14px; }
  .preview-title { font-size: 11px; }
  .preview-canvas { height: 300px; overflow-x: auto; overflow-y: hidden; }
  .preview-events { gap: 40px; padding: 0 24px; animation: none; }
  .preview-event { width: 130px; }
  .preview-card { padding: 10px 12px; }


  /* ─── Sections ──────────────────────────────────────────────────────────── */

  .stats-section { padding: 40px 18px; }
  .stats-grid { gap: 32px; flex-wrap: wrap; }
  .stat-number { font-size: 36px; }
  .stat-label { font-size: 13px; }

  .features-section { padding: 56px 18px 72px; min-height: auto; }
  .section-header { margin-bottom: 36px; }
  .section-sub { font-size: 15px; }
  .features-grid { grid-template-columns: 1fr; gap: 12px; }

  .cta-section { padding: 40px 18px 72px; }
  .cta-box { padding: 48px 22px; border-radius: 18px; }
  .cta-sub { font-size: 15px; margin-bottom: 28px; }
  .cta-actions { flex-direction: column; gap: 12px; }
  .cta-actions > * { width: 100%; justify-content: center; }

  /* Footer: the copyright is absolutely centred on desktop; stack it instead. */
  footer {
    padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .footer-copy { position: static; transform: none; white-space: normal; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
  .footer-link { padding: 6px 2px; }
  /* The divider reads as a stray line once the links wrap and centre. */
  .footer-link-sibling { border-right: 0; padding-right: 2px; }


  /* ─── Content pages (history / tracking / dashboard) ────────────────────── */
  /* They carry an inline `padding: 100px 40px`; 40px of side padding eats a
     fifth of a 414px screen. */

  .page-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 84px !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom)) !important;
  }

  /* Dashboard header row: title + action buttons stack. */
  .page-head-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 14px;
  }
  .page-head-row > div { width: 100%; }
  .page-head-actions {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .page-head-actions > * {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Dashboard rows: title block on top, Open/Delete underneath. */
  .list-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 12px !important;
  }
  .list-row-actions { justify-content: flex-start !important; }
  .list-row-actions > * {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* Tracking rows: rank + title on the first line, meta wrapped underneath. */
  .track-row {
    grid-template-columns: 24px 1fr !important;
    row-gap: 2px !important;
    padding: 11px 10px !important;
  }
  .track-row > span:nth-child(2) { white-space: normal !important; }
  .track-row > span:nth-child(3) { grid-column: 2 / -1; white-space: normal !important; }

  #trackingPagination { flex-wrap: wrap; justify-content: center; }
  #trackingPagination button { min-height: 42px; padding: 8px 18px !important; }

  /* Sort buttons on tracking. */
  #sortRecent, #sortViews, #sortEvents {
    min-height: 40px;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }


  /* ─── Auth pages ────────────────────────────────────────────────────────── */

  /* auth.css hides `.auth-left` wholesale below 768px — but the brand link back
     to the home page is the only navigation on these pages and lives inside it,
     which left phone users stranded on sign in / sign up. Keep the panel as a
     slim header carrying just that link, and drop the decorative content. */
  .auth-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .auth-left {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }
  .auth-left-bg,
  .auth-left-content { display: none; }
  .auth-left-logo { font-size: 16px; min-height: 44px; }
  .auth-left-logo-icon { width: 28px; height: 28px; }

  .auth-right { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  .auth-card-title { font-size: 24px; }
  .auth-card-header { margin-bottom: 26px; }
  .auth-submit { min-height: 50px; }
  .auth-social-btn { min-height: 48px; }
  .password-toggle { width: 44px; height: 44px; right: 2px; }
  .forgot-link { padding: 8px 0; margin-top: -6px; }


  /* ─── Editor: layout ────────────────────────────────────────────────────── */

  /* 100dvh follows the collapsing Safari toolbar; 100vh does not, which is why
     the status bar sits under the browser chrome today. */
  .editor-layout { height: 100vh; height: 100dvh; }


  /* ─── Editor: top bar → burger drawer ───────────────────────────────────── */
  /* The bar keeps its 56px strip in the flow ([logo] [title] [＋] [☰]) and the
     two action groups wrap *out* of that strip, painting over the canvas as a
     drawer. `overflow: visible` + the bar's own z-index does the rest, so no
     element has to move in the DOM and every listener stays attached. */

  .editor-topbar {
    height: 56px;
    padding: 0 10px;
    gap: 8px;
    row-gap: 0;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: visible;
    position: relative;
    z-index: 500;
  }

  .topbar-logo { margin-right: 0; font-size: 0; gap: 0; }
  .topbar-logo-icon { width: 28px; height: 28px; }

  /* The first row must be exactly as tall as the bar, otherwise the wrapped
     drawer starts mid-bar and clips it. */
  .topbar-left { order: 0; gap: 8px; min-width: 0; min-height: 56px; }
  .topbar-title-wrap { flex: 1 1 auto; min-width: 0; }
  .topbar-title { width: 100%; padding: 8px 10px; }

  /* Explicit ordering: the strip is [logo+title] [🔍] [☰]; the two action
     groups always wrap *below* it, never between the buttons. */
  .topbar-quick  { order: 1; }
  .topbar-burger { order: 2; }
  .topbar-center { order: 3; }
  .topbar-right  { order: 4; }

  /* Collapsed by default; revealed together when the bar has .menu-open. */
  .topbar-center,
  .topbar-right {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 8px;
    background: var(--bg2);
    padding: 0 10px;
  }
  .topbar-center { padding-top: 10px; border-top: 1px solid var(--border); }
  .topbar-right {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .55);
  }

  .editor-topbar.menu-open .topbar-center,
  .editor-topbar.menu-open .topbar-right { display: flex; }

  /* Toasts live at z-index 9999 and would otherwise paint over the open drawer,
     swallowing its first row. The drawer is a deliberate, transient surface —
     it wins while it is open. */
  .editor-topbar.menu-open { z-index: 10000; }

  /* Two comfortable columns of 46px-tall controls. `#editorControls` is a
     `display: contents` wrapper, so its children are the real flex items. */
  .editor-topbar.menu-open .topbar-center > *,
  .editor-topbar.menu-open .topbar-right > *,
  .editor-topbar.menu-open .topbar-right #editorControls > * {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    min-height: 46px;
  }

  .editor-topbar.menu-open .topbar-center button,
  .editor-topbar.menu-open .topbar-right button,
  .editor-topbar.menu-open .topbar-right > a {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    font-size: 14px !important;
    padding: 0 12px !important;
  }

  /* The bar strips every button's border, so the overflow trigger needs a fill
     of its own to read as a control — and a word, since "⋯" alone says little. */
  .editor-topbar.menu-open .topbar-more { display: flex; }
  .editor-topbar.menu-open .topbar-more-btn {
    width: 100%;
    height: 46px;
    gap: 8px;
    font-size: 17px;
    background: var(--surface2);
    color: var(--text2);
  }
  .editor-topbar.menu-open .topbar-more-btn::after {
    content: 'More';
    font-size: 14px;
    font-weight: 600;
  }

  /* These four share a fixed 124px box on desktop. */
  #publishBtn, #addEventBtn, #presentBtn, #shareBtn, #viewerSaveBtn,
  #viewMenuBtn, #rangeFilterBtn {
    min-width: 0;
    height: auto;
  }

  .zoom-controls {
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    height: 46px;
    box-sizing: border-box;
  }
  .zoom-controls .tool-btn { width: 40px; height: 38px; font-size: 18px; }
  .zoom-display { font-size: 14px; }

  .recenter-topbar-btn,
  .btn-reset { font-size: 14px !important; }

  /* The overflow menus become full-width sheets under their trigger. */
  .topbar-more { position: relative; }
  .topbar-menu {
    left: 0;
    right: 0;
    min-width: 0;
    width: auto;
  }
  .topbar-menu-item { min-height: 48px; font-size: 14px; }

  /* Viewer CTA (Sign in / Sign up) takes a full row. */
  .editor-topbar.menu-open #viewerCta { flex-basis: 100%; gap: 8px !important; }
  .editor-topbar.menu-open #viewerCta > a { flex: 1 1 0; }
  .editor-topbar.menu-open .topbar-divider { display: none; }

  /* Account block: for a signed-in user the dropdown is shown inline instead of
     being a second tap. `--anon` means "not signed in", so it stays collapsed. */
  .editor-topbar.menu-open .topbar-user-wrap {
    flex: 0 0 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 2px;
  }
  .editor-topbar.menu-open .topbar-user { width: 40px; height: 40px; flex-shrink: 0; }
  /* js/mobile.js stamps the label ("Account" / "Sign up") so a lone avatar in
     the drawer is not left unexplained. */
  .editor-topbar.menu-open .topbar-user-wrap::after {
    content: attr(data-m-label);
    font-size: 14px;
    font-weight: 500;
    color: var(--text2);
    order: 1;
  }
  .editor-topbar.menu-open #topbarUserBtn:not(.topbar-user--anon) ~ .topbar-user-dropdown { order: 2; }
  /* When the viewer CTA is on screen it already offers Sign in / Sign up, so the
     signed-out avatar row would just repeat it (flagged by js/mobile.js). */
  .editor-topbar.menu-open .topbar-user-wrap.m-redundant { display: none; }
  .editor-topbar.menu-open #topbarUserBtn:not(.topbar-user--anon) ~ .topbar-user-dropdown {
    display: block;
    position: static;
    flex: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
  }
  .editor-topbar.menu-open .topbar-dropdown-item { min-height: 46px; display: flex; align-items: center; }

  /* Burger + inline primary actions (injected by js/mobile.js). */
  .topbar-burger,
  .topbar-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    padding: 0;
  }
  .topbar-burger:active,
  .topbar-quick:active { background: var(--surface2); }
  .editor-topbar.menu-open .topbar-burger {
    background: var(--accent);
    border-color: var(--accent) !important;
    color: #fff;
  }


  /* ─── Editor: canvas chrome ─────────────────────────────────────────────── */

  /* Keyboard-shortcut cheatsheet and the minimap are desktop affordances that
     cover a third of a phone canvas. */
  .help-panel { display: none; }
  .minimap { display: none; }

  .editor-canvas-wrap { touch-action: none; }

  .empty-state-icon { font-size: 34px; }
  .empty-state-text { font-size: 13px; text-align: center; padding: 0 24px; }
  .empty-state-hint { font-size: 12px; text-align: center; padding: 0 24px; }

  /* Colour legend: keep clear of the floating buttons on the right. */
  #legendToggle,
  #legendPanel {
    left: 12px !important;
    right: auto !important;
    bottom: calc(38px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 100px) !important;
  }
  #legendToggle { min-height: 44px; }

  /* Toasts span the width instead of hugging a 20px right margin. */
  #toastContainer {
    top: 64px !important;
    left: 10px !important;
    right: 10px !important;
    align-items: stretch !important;
  }
  #toastContainer > * { max-width: 100% !important; }

  /* Search bar: fixed 320px min-width overflows a 414px screen. */
  #searchBar {
    left: 10px !important;
    right: 10px !important;
    transform: none !important;
    min-width: 0 !important;
    bottom: calc(34px + env(safe-area-inset-bottom)) !important;
    flex-wrap: nowrap;
  }
  #searchInput { width: 100% !important; min-width: 0; flex: 1 1 auto; }
  #searchPrev, #searchNext {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
  }
  #searchClose { width: 32px; height: 34px; font-size: 20px !important; }
  #searchCount { min-width: 34px !important; }

  /* Status bar. */
  .editor-statusbar {
    height: auto;
    min-height: 28px;
    padding: 4px 10px calc(4px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  .statusbar-item { font-size: 10px; }
  #pubStatusBadge { font-size: 10px !important; }


  /* ─── Editor: floating touch controls (injected by js/mobile.js) ────────── */

  .m-fabs {
    position: fixed;
    right: 12px;
    bottom: calc(42px + env(safe-area-inset-bottom));
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
  }
  .m-fabs > * { pointer-events: auto; }

  .m-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border2);
    color: var(--text);
    font-size: 17px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  }
  .m-fab:active { background: var(--surface2); }

  .m-fab-primary {
    width: 58px;
    height: 58px;
    font-size: 26px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 26px rgba(124, 58, 237, .5);
  }
  .m-fab[hidden] { display: none; }


  /* ─── Modals → bottom sheets ────────────────────────────────────────────── */

  .modal-overlay {
    top: 0;
    inset: 0;
    align-items: flex-end;
    justify-content: stretch;
  }

  .modal {
    max-width: none !important;
    width: 100% !important;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(28px);
  }
  .modal-overlay.open .modal { transform: translateY(0); }

  /* Modals whose padding is set inline to 0 (they own an inner scroller). */
  .modal[style*="padding:0"] { padding: 0 !important; }
  .modal[style*="padding:0"] > *:last-child {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .modal-header { margin-bottom: 14px; }
  .modal-close { width: 40px; height: 40px; font-size: 22px; }

  .modal-footer {
    gap: 10px;
    margin-top: 18px;
    flex-direction: row;
  }
  .modal-footer > button,
  .modal-footer > .btn-primary,
  .modal-footer > .btn-secondary {
    flex: 1 1 0;
    justify-content: center;
    min-height: 48px;
  }

  .form-input { padding: 12px 12px; }
  textarea.form-input { min-height: 96px; }

  .publish-option { padding: 14px; gap: 12px; }
  .publish-option-icon { width: 38px; height: 38px; font-size: 18px; }
  .publish-option-title { font-size: 13px; }
  .publish-option-desc { font-size: 12px; }

  .color-picker { gap: 12px; }
  .color-opt { width: 34px; height: 34px; }

  /* Change-requests review sheet. */
  #changeRequestsModal .modal { width: 100% !important; }
  #changeRequestsList { max-height: 62dvh !important; }

  /* Attachments in the event modal. */
  .attach-btn { min-height: 46px; }
  .attach-item { width: 72px; height: 72px; }
  .attach-item .x { width: 26px; height: 26px; line-height: 26px; font-size: 14px; }

  /* Lightbox. */
  .tl-lightbox .lb-x { top: 10px; right: 12px; font-size: 30px; width: 44px; height: 44px; }
  .tl-lightbox .lb-nav { width: 48px; height: 64px; font-size: 30px; }
  .tl-lightbox img { max-width: 96vw; max-height: 74dvh; }


  /* ─── Presentation mode ─────────────────────────────────────────────────── */

  #presentationEvent { padding: 20px 18px !important; max-width: 100% !important; }
  #presentEventDate { font-size: 11px !important; margin-bottom: 14px !important; }
  #presentEventTitle { font-size: 26px !important; margin-bottom: 16px !important; }
  #presentEventDesc { font-size: 15px !important; }
  #presentEventImage { max-height: 34dvh !important; margin-bottom: 16px !important; }
  #presentTitle { font-size: 10px !important; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; }
  #exitPresentBtn { top: 10px !important; right: 10px !important; min-height: 40px; }
  #presentationOverlay > div:last-child {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    gap: 18px !important;
  }
  #presentPrevBtn, #presentNextBtn { width: 52px !important; height: 52px !important; }


  /* ─── Timeline cards ────────────────────────────────────────────────────── */

  .tl-card { width: 148px; padding: 9px 11px; }
  .tl-title { font-size: 12px; white-space: normal; }
  .tl-desc { font-size: 11px; }

  /* Private-timeline overlay sits under the (now 56px) bar. */
  #privateTimelineOverlay { top: 56px !important; padding: 0 24px; }
}


/* ─── Touch devices: hover-only affordances need a tap equivalent ─────────── */
/* On desktop the card actions appear on :hover. A touch screen has no hover,
   so they are bound to the card's selected state instead (a tap selects). */

@media (hover: none) {
  /* The canvas owns the gesture: without this the browser pans/zooms the page
     instead of letting the pinch handler run. */
  .editor-canvas-wrap { touch-action: none; }

  .tl-actions { opacity: 0; height: 0; }

  .tl-card.selected .tl-actions,
  .tl-card.search-focus .tl-actions {
    opacity: 1;
    height: 30px;
    margin-bottom: 8px;
  }

  .tl-action-btn {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  /* Nothing to "hover" a preview open with, so kill the lift/scale effects
     that otherwise stick after a tap. */
  .tl-card:hover { transform: none; }
  .tl-event:hover .tl-dot { transform: none; }
  .tl-card.selected { transform: none; }
  .feature-card:hover { transform: none; }
  .btn-primary:hover, .publish-option:hover, .btn-publish:hover { transform: none; }
}


/* ─── Very narrow phones ──────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hero-title { font-size: clamp(34px, 12.5vw, 46px); }
  .section-title { font-size: 26px; }

  .editor-statusbar .statusbar-item:nth-child(2) { display: none; } /* Zoom % */

  .stats-grid { gap: 20px; }
  .stat-number { font-size: 30px; }
}