/* Mobile document presentation (#170).
 *
 * Reader is the constrained-width default. A4 remains exact and opt-in under
 * View; Read/Edit/Review remains a separate workflow control. Desktop rules
 * above this file are unchanged.
 */

.mobile-doc-context,
.mobile-modes,
.mobile-activity-toggle,
.mobile-presentation,
.mobile-compare-switch {
  display: none;
}

.mobile-activity-panel[hidden],
.mobile-activity-count[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  :root { --topbar-h: 52px; }

  .document-screen .topbar {
    min-width: 0;
    gap: 6px;
    padding: 0 8px;
  }

  .document-screen .topbar > .spacer,
  .document-screen .topbar > .modes,
  .document-screen .topbar > .search,
  .document-screen .topbar > .live,
  .document-screen #crumb {
    display: none !important;
  }

  .document-screen .brand {
    flex: none;
    width: 40px;
    height: 44px;
    margin: 0;
    justify-content: center;
  }

  .document-screen .brand > span:last-child { display: none; }
  .document-screen .brand-mark { width: 15px; height: 15px; }

  .mobile-doc-context {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
  }

  /* The places strip is one menu here (.mobile-modes). The edit dropdown's
     caret has no place in it and stays, as an icon (#693). */
  .document-screen .topbar > .modes:has(.version-picker) {
    display: flex !important;
    margin: 0;
    gap: 0;
  }
  .document-screen .topbar > .modes > .mode-tab,
  .document-screen .branch-tab > .mode-tab { display: none; }
  .document-screen .modes .branch-tab { background: none; box-shadow: none; }
  .document-screen .modes .branch-tab > .version-picker > summary svg { color: var(--ink-3); }
  .document-screen .modes .version-picker > summary {
    min-width: 36px;
    height: 44px;
    justify-content: center;
  }

  /* The version menu belongs to the viewport, not the breadcrumb's narrow
     flex cell. Keep every row tappable and every edge on screen. */
  body:has(.version-picker) .version-picker .menu-item { display: flex; }
  body:has(.version-picker) .version-picker-pop {
    position: fixed;
    top: calc(var(--topbar-h) - 8px);
    right: 8px;
    left: 8px;
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - var(--topbar-h));
    overflow-y: auto;
  }

  .mobile-doc-name,
  .mobile-doc-ref {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-doc-name {
    color: var(--ink);
    font-size: var(--t-md);
    font-weight: 650;
  }

  .mobile-doc-ref {
    color: var(--ink-3);
    font: 10px/1.25 var(--mono);
  }

  .mobile-modes {
    display: block;
    flex: none;
  }

  .mobile-modes > summary {
    min-width: 60px;
    height: 44px;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 22px;
    font-size: var(--t-sm);
    font-weight: 650;
  }

  .mobile-modes > summary:hover,
  .mobile-modes[open] > summary {
    border-color: var(--line);
    background: var(--sunken);
  }

  .mobile-modes .menu-pop {
    right: 0;
    left: auto;
    width: 184px;
    min-width: 184px;
  }

  .mobile-modes .menu-item {
    min-height: 44px;
    align-items: center;
    font-size: var(--t-md);
  }

  .mobile-modes .menu-item[aria-current="page"] {
    background: var(--sunken);
    color: var(--ink);
    font-weight: 650;
  }

  .mobile-activity-toggle,
  .mobile-activity-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
  }

  .mobile-activity-toggle {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgb(0 0 0 / .12);
    transition: transform .15s, opacity .15s;
  }

  .mobile-activity-toggle[data-scroll-hidden]:not(:focus-visible) {
    transform: translateY(72px);
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-activity-toggle { transition: none; }
  }

  .mobile-activity-toggle:hover,
  .mobile-activity-close:hover {
    background: var(--sunken);
    color: var(--ink);
    text-decoration: none;
  }

  .mobile-activity-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border: 2px solid var(--surface);
    border-radius: 8px;
    background: var(--focus);
    color: white;
    font: 650 8px/11px var(--ui);
    text-align: center;
  }

  .document-screen .account > summary {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
  }

  .document-screen .account > summary .avatar {
    width: 44px;
    height: 44px;
    font-size: var(--t-sm);
  }

  .document-screen .account .menu-pop {
    right: -2px;
    max-width: calc(100vw - 16px);
  }

  .document-screen .mobile-presentation { display: block; }
  .document-screen .account [data-notes-toggle] { display: none; }

  /* History never occupies document flow at a constrained width. */
  .document-screen .desk {
    display: block;
    --desk-top: 0px;
    padding: var(--ribbon-on) 0 0;
  }

  .document-screen .rail { display: none !important; }
  .document-screen .paper,
  .document-screen[data-density] .paper,
  .document-screen .paper.has-notes {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
  }

  /* Reader reflows only the manuscript. The A4 page remains available by
     setting data-page-layout=page on body. */
  .document-screen:not([data-page-layout="page"]) .desk {
    overflow-x: hidden;
    background-image: none;
  }

  .document-screen:not([data-page-layout="page"]) .sheet {
    display: block;
    width: 100%;
    min-height: calc(100dvh - var(--topbar-h));
    margin: 0;
    padding: 30px clamp(20px, 6vw, 28px) 72px;
    zoom: 1;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    cursor: text;
  }

  .document-screen:not([data-page-layout="page"]) .editing[data-mode="edit"] .sheet {
    min-height: calc(100dvh - var(--topbar-h) - var(--ribbon-h));
  }

  .document-screen:not([data-page-layout="page"]) .sheet.is-paged {
    display: block;
    row-gap: 0;
  }

  .document-screen:not([data-page-layout="page"]) .sheet.is-paged > .page {
    display: contents;
  }

  .document-screen:not([data-page-layout="page"]) .sheet > h1,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > h1,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > h1 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 38px;
  }

  .document-screen:not([data-page-layout="page"]) .sheet > h2,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > h2,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > h2 {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 34px;
  }

  .document-screen:not([data-page-layout="page"]) .sheet > p,
  .document-screen:not([data-page-layout="page"]) .sheet > ul,
  .document-screen:not([data-page-layout="page"]) .sheet > ol,
  .document-screen:not([data-page-layout="page"]) .sheet > blockquote,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > p,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > ul,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > ol,
  .document-screen:not([data-page-layout="page"]) .sheet > .page > blockquote,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > p,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > ul,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > ol,
  .document-screen:not([data-page-layout="page"]) .sheet .semgit-editor-content > blockquote {
    font-size: 17px;
    line-height: 1.62;
    margin-bottom: 15px;
  }

  .document-screen:not([data-page-layout="page"]) .pagefoot,
  .document-screen .margin,
  .document-screen .channel {
    display: none !important;
  }

  .document-screen[data-page-layout="page"] .paper {
    width: max-content;
    min-width: 100%;
  }

  .document-screen[data-page-layout="page"] .desk {
    overflow: auto;
    padding-top: calc(var(--s4) + var(--ribbon-on));
  }

  .document-screen .presence {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .document-screen .mode .edit-preview .ep-ribbon {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  /* Reader layout reserves Submit space inside the white sheet. Only A4
     layout needs extra desk space below its last page. */
  .document-screen[data-page-layout="page"] .paper:has(.editing[data-mode="edit"]) {
    padding-bottom: 72px !important;
  }

  .document-screen .edit-preview .ep-submit-dock {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: auto;
    width: 132px;
  }

  .document-screen .edit-preview .ep-submit-dock .ep-top-actions {
    display: flex;
  }

  /* Review shows one version at a time. Change cards live in Activity. */
  .document-screen .paper:has(.compare) { display: block; }
  .document-screen .submissions { display: none !important; }
  .document-screen .compare {
    display: block;
    width: 100%;
  }

  .document-screen .compare .sheet { display: none; }
  .document-screen:not([data-mobile-compare="current"]) .compare #document,
  .document-screen[data-mobile-compare="current"] .compare .sheet.base {
    display: block;
  }

  .document-screen .compare-foot { display: none; }
  /* One phone, one document: side by side is a desktop layout, and the cards
     are in Activity, so the sheet keeps no column for them (#787). */
  .document-screen .view-switch { display: none; }
  .document-screen .compare.one-paper { padding-right: 0; }

  .mobile-compare-switch {
    position: sticky;
    top: 8px;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 32px);
    max-width: 360px;
    margin: 8px auto;
    padding: 3px;
    border-radius: 12px;
    background: var(--sunken);
    box-shadow: var(--e1);
  }

  .mobile-compare-switch button,
  .mobile-activity-tabs button {
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-3);
    font: 600 12px/1 var(--ui);
    cursor: pointer;
  }

  .mobile-compare-switch button[aria-selected="true"],
  .mobile-activity-tabs button[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--e1);
  }

  body[data-mobile-activity="open"] .desk { overflow: hidden; }

  .mobile-activity {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - var(--topbar-h));
    margin: auto 0 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--ink);
  }

  .mobile-activity::backdrop {
    background: color-mix(in srgb, var(--ink) 24%, transparent);
  }

  .mobile-activity-sheet {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, auto) auto;
    max-height: min(70dvh, 620px);
    padding: 7px 14px max(14px, env(safe-area-inset-bottom));
    overflow: hidden;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background: var(--surface);
    box-shadow: 0 -12px 40px rgba(20, 19, 15, .18);
  }

  .mobile-grab {
    justify-self: center;
    width: 38px;
    height: 4px;
    margin-bottom: 8px;
    border-radius: 2px;
    background: var(--line);
  }

  .mobile-activity-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }

  .mobile-activity-head > span {
    display: grid;
    gap: 1px;
  }

  .mobile-activity-context {
    color: var(--ink-3);
    font: 10px/1.2 var(--mono);
  }

  .mobile-activity-head strong {
    color: var(--ink);
    font-size: 17px;
    font-weight: 650;
    line-height: 1.2;
  }

  .mobile-activity-close {
    margin-left: auto;
    font-size: 24px;
    font-weight: 300;
  }

  .mobile-activity-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin: 7px 0 10px;
    padding: 3px;
    border-radius: 12px;
    background: var(--sunken);
  }

  .mobile-activity-panel {
    min-height: 0;
    max-height: calc(70dvh - 190px);
    padding: 1px 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-activity-panel .history { overflow: visible; }
  .mobile-activity-panel .commit { min-height: 52px; padding: 9px 8px 9px 4px; }
  .mobile-activity-panel .commit-title { font-size: var(--t-xs); }
  .mobile-activity-panel .commit-meta { font-size: var(--t-sm); }

  .mobile-activity-panel .note {
    position: static !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    min-height: 0;
    margin: 0 0 8px;
    padding: 11px 12px;
    transform: none !important;
    opacity: 1 !important;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
  }

  .mobile-activity-empty {
    padding: 28px 10px;
    color: var(--ink-3);
    font-size: var(--t-sm);
    text-align: center;
  }

  .mobile-activity-foot {
    padding-top: 8px;
    border-top: 1px solid var(--line-2);
  }

  .mobile-activity-foot a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    color: var(--ink-2);
    font-size: var(--t-sm);
    font-weight: 600;
  }

  /* Commenting on a passage, on a phone (#428).
   *
   * A toolbar pinned above the selection and a composer hung under it are a
   * desktop shape: the phone's own selection handles and its copy/paste
   * callout are already there, and a popover pinned to a few words has no room
   * to be a form. So the toolbar keeps its place — it is one word wide and it
   * is what the reader taps — and the composer becomes a sheet at the foot of
   * the screen, like the activity sheet above it, with the keyboard under it.
   *
   * `position: fixed` and not `absolute`, so the paper can scroll under it and
   * the composer stays where the thumbs are. The custom properties the script
   * writes are simply not read here, which is why they are custom properties
   * and not an inline `left` (notes.css). */
  .selbar button { min-height: 44px; }

  .discuss {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    width: 100%;
    max-height: 80dvh;
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    overflow-y: auto;
    transform: none;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(20, 19, 15, .18);
  }

  /* 16px, because anything smaller makes iOS zoom the page on focus. */
  .discuss-body { min-height: 88px; font-size: 16px; }
  /* No keyboard hint to hold the row open, so the two buttons take the width
     between them and are a thumb's width tall. */
  .discuss-actions .btn { flex: 1; min-height: 44px; }
  .discuss-hint { display: none; }
}

/* Screens that are not the manuscript should not be A4 (#170).
 *
 * `.sheet` is 210mm wide -- 794px -- and `base.html` puts every screen's
 * content on one. That is right for a document and wrong for everything else:
 * sheet.css says in its own first comment that the sheet "carries the document
 * and only the document (SPEC A.3)", and Settings and Rules are Writ chrome,
 * not paper. On a 375px phone they were 794px wide and cut their own headings
 * in half:
 *
 *     /r/<repo>/rules      MAIN.sheet.is-paged  w=794  14..808   5 text blocks cut off
 *     /r/<repo>/settings   MAIN.sheet.is-paged  w=794  14..808   4 text blocks cut off
 *     /r/<repo>/issues     MAIN.sheet.is-paged  w=794  14..808   0 (overflowed, but no text past 375)
 *
 * The mobile reader work above is deliberately scoped to `.document-screen`,
 * which `base.html` sets only when a document `mode` is defined -- so these
 * screens were never in its blast radius and kept the raw A4 width.
 *
 * This is NOT the open question in #170. That issue asks what a *manuscript*
 * should do on a phone -- scale, reflow, pan, or refuse -- and that is a design
 * decision about the product's central metaphor, still the owner's to make.
 * Nothing here touches a document surface. This is only the part that was never
 * a decision: a settings form has no page metaphor to protect.
 */
@media (max-width: 700px) {
  body:not(.document-screen) .sheet {
    width: auto;
    max-width: 100%;
    /* The A4 measure -- (210mm - 576px) / 2 -- is meaningless once the paper is
       gone, and at 375px it would eat 109px a side. */
    --page-x: clamp(16px, 5vw, 28px);
    --page-pad: 28px var(--page-x) 40px;
    border-radius: 0;
    box-shadow: none;
  }

  /* pages.js paginates at runtime by adding `.is-paged` and wrapping content in
     fixed 297mm-tall `.page` elements. Paper height is meaningless here too --
     a settings form is one continuous scroll, so the page boxes dissolve.
     `display: block` rather than leaving the grid: as a grid, the single
     implicit column sizes to its content's min-content width, so the sheet
     narrowed to 347px while the column stayed at 449.7px and the pages inside
     it overflowed anyway. The print stylesheet drops the same grid for the
     same reason (sheet.css). `min-width: 0` because a grid or flex child
     defaults to `min-width: auto` and will not shrink past its content. */
  body:not(.document-screen) .sheet.is-paged {
    display: block;
  }

  body:not(.document-screen) .sheet.is-paged > .page {
    height: auto;
    min-width: 0;
    overflow: visible;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Submission comparison is a review surface, not a printable page. On a
   phone its prose reflows, sentence evidence stacks, and findings enter the
   normal scroll beneath the submitted manuscript. */
@media (max-width: 700px) {
  body:has(.wm-surface) .topbar {
    min-width: 0;
    gap: 6px;
    padding-inline: 8px;
  }

  body:has(.wm-surface) .topbar #crumb,
  body:has(.wm-surface) .topbar > .btn.ghost {
    display: none;
  }

  /* The desktop mode strip disappears on a submission at this width. The
     version picker is therefore its direct route to another submission. */
  body:has(.wm-surface):has(.version-picker) .topbar #crumb {
    display: contents;
  }
  body:has(.wm-surface):has(.version-picker) .topbar .crumb {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  body:has(.wm-surface):has(.version-picker) .crumb > a,
  body:has(.wm-surface):has(.version-picker) .crumb > .crumb-sep {
    display: none;
  }
  body:has(.wm-surface):has(.version-picker) .version-picker {
    min-width: 0;
  }
  body:has(.wm-surface):has(.version-picker) .version-picker > summary span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .wm-surface {
    height: auto;
    min-height: 100%;
  }

  .wm-surface .wm-statebar {
    gap: 7px;
    padding: 12px 14px;
  }

  .wm-surface .wm-state-copy h1 { font-size: 18px; }
  .wm-surface .wm-summary { font-size: var(--t-sm); }

  .wm-surface .wm-checks-wrap {
    width: 100%;
    justify-self: stretch;
  }

  .wm-surface .wm-checks {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: -14px;
    padding-inline: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .wm-surface .wm-finish-note {
    right: auto;
    left: 0;
  }

  .wm-surface .wm-state-actions :is(button, a) { min-height: 40px; }

  .wm-surface .ep-workspace {
    display: block;
    overflow: visible;
  }

  .wm-surface .ep-history-rail { display: none; }

  .wm-surface .ep-desk {
    width: 100%;
    padding: 0;
    overflow: visible;
    background: var(--surface);
  }

  .wm-surface .wm-document-meta {
    width: auto;
    margin: 12px 14px;
  }

  .wm-surface .ep-paper-wrap,
  .wm-surface .ep-paper-wrap.has-notes {
    width: 100%;
    padding-right: 0 !important;
  }

  .wm-surface .ep-sheet {
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 28px clamp(20px, 6vw, 28px) 42px;
    border: 0;
    box-shadow: none;
    -webkit-user-select: text;
    user-select: text;
  }

  .wm-surface .ep-document-head {
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .wm-surface .ep-document-head h2 { font-size: 22px; }

  .wm-surface .ep-document-body {
    font-size: 17px;
    line-height: 1.62;
  }

  .wm-surface .wm-unit-section {
    width: auto;
    padding: 0 10px 10px;
    margin: 14px;
    border-radius: 6px;
  }

  .wm-surface .wm-unit { padding: 11px; }
  .wm-surface .wm-unit-head { flex-wrap: wrap; }

  .wm-surface .margin {
    position: static !important;
    display: grid !important;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    margin: 0 14px 24px;
    pointer-events: auto;
  }

  .wm-surface .margin .note {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    width: auto !important;
    min-height: 0;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }

  .wm-surface .ep-pagefoot {
    width: auto;
    margin: 0;
    padding: 0 20px 24px;
    background: var(--surface);
  }

  .wm-surface :is(.flag-dispute, .wm-disposition)[open] { width: 100%; }

  .wm-surface :is(.flag-dispute > form, .flag-dispute > .ep-decision-options,
                   .wm-disposition form) {
    position: static;
    width: 100%;
    margin-top: 6px;
  }
}
@media (max-width: 360px) {
  .document-screen .topbar { gap: 3px; padding-inline: 5px; }
  .document-screen .brand { width: 36px; }
  .mobile-modes > summary { min-width: 54px; padding-inline: 7px; }
  .document-screen:not(:has(.avatar)) .account > summary {
    width: 44px;
    overflow: hidden;
    font-size: 0;
  }
}

@media print {
  .mobile-doc-context,
  .mobile-modes,
  .mobile-activity-toggle,
  .mobile-presentation,
  .mobile-compare-switch,
  .mobile-activity {
    display: none !important;
  }

  .document-screen .desk {
    display: block;
    overflow: visible;
    padding: 0;
    background: none;
  }

  .document-screen .paper,
  .document-screen .paper.has-notes {
    width: auto;
    min-width: 0;
    padding: 0 !important;
  }

  .document-screen:not([data-page-layout="page"]) .sheet {
    width: var(--sheet-w);
    min-height: 297mm;
    margin: 0;
    padding: var(--page-pad);
    background: var(--surface);
  }
}