/* Footer status bar: one fixed-height line that must not wrap. As the
   window narrows, items are dropped in priority order so the line always
   fits - but the drop is driven live in JS (fitFooter in index.html), not
   by width breakpoints, because the bar's content differs by page (the
   doc-page "sdoc upgrade" chip is far shorter than the homepage curl
   command) and a fixed breakpoint drops items too early for the narrower
   variants. Below 768px the whole bar is hidden (see the mobile block
   below). Validated headlessly in test/footer-fit.spec.js. */

/* ═══════════════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Keep page scrolling on the document rather than an app-height shell. */
  body {
    overflow: visible;
    height: auto;
    background: var(--sdocs-document-bg, var(--bg-input, #fff));
  }
  #_sd_main { flex-direction: column; overflow: visible; }
  #_sd_left { overflow: visible; }
  #_sd_content-area { overflow: visible; }
  html { scroll-padding-top: 44px; }
  html:has(body.write-mode),
  html:has(body.comment-mode) { scroll-padding-top: 78px; }

  body.sdocs-reader-shell::after {
    content: '';
    position: fixed;
    inset: 44px 0 0;
    z-index: 99;
    background: rgba(28,25,23,.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  body.sdocs-reader-shell.sdocs-mobile-nav-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: none;
    transition-delay: 0s;
  }
  body.sdocs-reader-shell:is(.style-mode, .export-mode, .info-mode)::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    touch-action: none;
    transition-delay: 0s;
  }

  /* iOS Safari zooms the page when a focused text control is below 16px. */
  textarea,
  select,
  input:not([type]),
  input:is([type="text"], [type="email"], [type="password"], [type="search"],
    [type="tel"], [type="url"], [type="number"], [type="date"]) {
    font-size: 16px !important;
  }

  /* Site navigation opens over the document from the fixed menu control. */
  #_sd_sidebar {
    display: none;
    width: min(320px, calc(100vw - 32px));
    flex: none;
    padding: 18px 14px 16px;
    border: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 44px;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: var(--bg-input);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-101%);
    pointer-events: none;
    transition: transform .3s cubic-bezier(.4,0,.2,1),
                opacity .2s ease,
                visibility 0s linear .3s;
  }
  body.sdocs-mobile-nav-open #_sd_sidebar {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0s;
  }
  .sdocs-sidebar-main {
    width: 100%;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #_sd_sidebar .sdocs-sidebar-header { display: none; }
  .sdocs-sidebar-footer { display: flex; }
  .toolbar-brand-full { display: none; }
  .toolbar-brand-short { display: inline; font-size: 13px; font-weight: 600; }
  #_sd_sidebar .doc-site-nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
  }
  #_sd_sidebar .sdocs-sidebar-section-library { display: none; }
  #_sd_sidebar .doc-site-menu { width: 100%; }
  #_sd_sidebar .doc-site-menu-panel {
    position: static;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
  }

  /* Keep the reader header in document flow. Sticky positioning reserves its
     own height without a viewport-fixed layer or a separate spacer. */
  #_sd_mobile-header {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
  }
  #_sd_mobile-header-spacer {
    display: none;
  }
  body.sdocs-mobile-nav-open #_sd_write-toolbar,
  body.sdocs-mobile-nav-open #_sd_comment-toolbar {
    display: none;
  }
  #_sd_left-toolbar {
    display: flex;
    position: relative;
    top: auto;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 44px;
    padding: 0;
    transform: none;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
  }
  .sdocs-mobile-toolbar-scroll {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px 0 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .sdocs-mobile-toolbar-scroll::-webkit-scrollbar { display: none; }
  .sdocs-mobile-toolbar-brand {
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: var(--accent);
    font-family: var(--font-ui);
    text-decoration: none;
  }
  .sdocs-mobile-toolbar-scroll > .toggle-group { flex: 0 0 auto; }
  .sdocs-mobile-menu-button {
    order: -1;
    width: 44px;
    height: 43px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-input);
    color: var(--text-2);
    cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) {
    .sdocs-mobile-menu-button:hover { background: var(--bg-hover); color: var(--text); }
  }
  .sdocs-mobile-menu-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
  }
  .sdocs-mobile-menu-close { display: none; }
  .sdocs-mobile-menu-button[aria-expanded="true"] .sdocs-mobile-menu-icon { display: none; }
  .sdocs-mobile-menu-button[aria-expanded="true"] .sdocs-mobile-menu-close { display: block; }

  /* ── Stack layout instead of side-by-side ── */
  #_sd_divider { display: none; }

  /* ── Content: tighter padding for small screens ── */
  #_sd_rendered { padding: 24px 20px 40px; max-width: 100%; overflow-x: hidden; }
  #_sd_write { padding: 24px 20px 40px; max-width: 100%; }
  #_sd_raw { padding: 20px 16px; min-height: calc(100dvh - 36px); font-size: 16px; }

  /* ── File-info card: match rendered padding so values align with body ── */
  #_sd_sdocs-file-info {
    max-width: 100%;
    margin: 0;
    padding: 20px 20px 0;
  }
  /* ── Write toolbar: travels with the primary mobile header ── */
  body.write-mode #_sd_write-toolbar { position: relative; top: auto; z-index: 98; justify-content: flex-start; }

  /* ── Status bar: hidden on mobile ── */
  #_sd_statusbar { display: none; }

  /* ── Right panel: bottom sheet overlay ── */
  #_sd_right {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                transform .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  /* Style mode: open the complete bottom sheet immediately. */
  body.style-mode #_sd_right {
    display: flex;
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Hide "Save as default styles" on mobile ── */
  #_sd_right .panel-section:last-child { display: none; }

  /* ── Export panel: bottom sheet overlay ── */
  #_sd_export-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  body.export-mode #_sd_export-panel {
    display: flex;
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Info panel: bottom sheet overlay ── */
  #_sd_info-panel {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(28,25,23,.15), 0 -1px 4px rgba(28,25,23,.08);
    z-index: 100;
    transition: max-height .32s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    overflow: hidden;
  }
  body.info-mode #_sd_info-panel {
    display: flex;
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #_sd_right-header,
  #_sd_export-panel-header,
  #_sd_info-panel-header {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 10px 0 16px;
    color: var(--text);
    font-size: 15px;
    letter-spacing: -0.01em;
  }
  .sdocs-sheet-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
  }
  .sdocs-sheet-close:hover {
    background: var(--bg-hover);
    color: var(--text);
  }
  .sdocs-sheet-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}

/* ═══════════════════════════════════════════════════
   TOOLBAR SCROLL FADE HINT (< 560px / < 342px)
   Right-edge gradient that fades out when scrolled
═══════════════════════════════════════════════════ */
@media (max-width: 560px) {
  body.write-mode #_sd_write-toolbar.has-overflow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--bg) 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
  }
  body.write-mode #_sd_write-toolbar.scrolled-end::after {
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════
   NARROW MOBILE (< 366px)
═══════════════════════════════════════════════════ */
@media (max-width: 366px) {
  .toolbar-brand-short { display: none; }
  .toolbar-brand-tiny { display: inline; font-size: 13px; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════
   VERY NARROW (< 342px)
═══════════════════════════════════════════════════ */
@media (max-width: 342px) {
  .sdocs-mobile-toolbar-scroll.has-overflow::after {
    content: '';
    position: sticky;
    top: 0;
    right: -4px;
    flex: 0 0 32px;
    margin-left: -32px;
    width: 32px;
    height: 44px;
    background: linear-gradient(to right, transparent, var(--bg) 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .2s ease;
  }
  .sdocs-mobile-toolbar-scroll.scrolled-end::after {
    opacity: 0;
  }
}