/* mobile.css -- WS-Mobile responsive overrides for ACMS 1-to-10
 *
 * Cascade contract: loaded AFTER doc-style.css, annotation-rail.css and
 * signoff-bar.css. Selectors mirror existing depth so we win on order, not on
 * `!important`. Targets the legacy class names that ship in the current view
 * layer; once views migrate to the WS-Tokens ui/* primitives those primitives
 * already carry their own responsive rules.
 *
 * Tokens are read from tokens.css (loaded earlier). No raw colour or size
 * literals here except touch-target minima (44px) and viewport thresholds,
 * which are spec constants.
 *
 * Breakpoints (per design system spec section 5.2):
 *   max-width: 1024px -- TOC collapses
 *   max-width: 768px  -- comment drawer becomes bottom-sheet,
 *                        sign-off bar collapses to a single FAB
 *   max-width: 480px  -- single-column, tighter padding,
 *                        touch-target minima enforced
 */

/* ============================================================
 * 1. Tablet and below: 1024px
 * Override existing @media (max-width: 980px) so the TOC collapses
 * one breakpoint earlier and reads as a top-of-page block on iPad.
 * ============================================================ */
@media (max-width: 1024px) {
  .doc {
    grid-template-columns: 1fr;
  }

  aside.toc {
    position: static;
    height: auto;
    max-height: none;
    overflow-y: visible;
    padding: var(--space-7) var(--space-8);
    border-right: 0;
    border-bottom: 1px solid var(--rail-border, var(--border-default));
    background: var(--bg-elevated);
    font-size: var(--font-size-sm);
  }

  aside.toc > ol > li {
    margin-bottom: var(--space-1);
  }

  /* Hide the right-edge annotation pin column once the doc no longer has a
   * right-side gutter; pins ship to the comment drawer trigger instead. */
  .annotation-rail {
    right: var(--space-4);
    top: var(--space-3);
  }

  .cover {
    padding: var(--space-10) var(--space-8) var(--space-9);
  }

  .cover-template-executive {
    grid-template-columns: minmax(0, 1fr);
    background: var(--bg-elevated);
  }

  .cover-template-executive .cover-header-image,
  .cover-template-executive .stamp,
  .cover-template-executive h1,
  .cover-template-executive .lede,
  .cover-template-executive .cover-meta {
    grid-column: 1;
    grid-row: auto;
  }

  .cover h1 {
    font-size: var(--font-size-3xl);
  }

  .cover-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
  }

  .content {
    padding: var(--space-9) var(--space-8) var(--space-12);
  }

  /* Index (workspace landing) condensed shell. */
  .index-wrap {
    padding: var(--space-10) var(--space-8) var(--space-12);
  }

  .index-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
 * 2. Mobile: 768px
 * Comment drawer becomes a bottom sheet.
 * Sign-off bar collapses to a single FAB.
 * Type scale steps down one notch.
 * ============================================================ */
@media (max-width: 768px) {
  /* --- annotation-drawer => bottom sheet --- */
  .annotation-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 1px solid var(--rail-border, var(--border-default));
    box-shadow: var(--shadow-3);
    transform: translateY(100%);
    transition: transform var(--duration-normal) var(--ease-out-quint);
  }
  .annotation-drawer.open {
    transform: translateY(0);
  }

  /* Drag-handle pseudo-element so the sheet reads as draggable. The
   * downward-swipe behaviour is wired in mobile.js (loaded by orchestrator
   * via layout.ts). */
  .annotation-drawer::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: var(--space-3) auto var(--space-1);
    background: var(--border-strong);
    border-radius: var(--radius-full);
    touch-action: none;
    flex-shrink: 0;
  }

  /* Annotation pins (right-margin badges) compress to 44px touch targets
   * and tuck closer to the body column. */
  .annotation-rail {
    right: var(--space-3);
    width: 44px;
    gap: var(--space-2);
  }
  .annotation-pin {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-sm);
  }

  /* --- signoff-bar => single FAB --- */
  .signoff-bar {
    background: transparent;
    border-top: 0;
    padding: 0;
    pointer-events: none;
  }
  .signoff-bar-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    pointer-events: none;
    background: transparent;
  }
  .signoff-bar-left,
  .signoff-bar-approvers,
  .signoff-bar-close {
    display: none;
  }
  .signoff-bar-actions {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    margin-left: 0;
    pointer-events: auto;
    z-index: var(--z-drawer);
  }
  /* The first action button becomes the FAB. Sibling buttons hide; the
   * single-button-only collapse is per plan section 9 WS-Mobile. */
  .signoff-bar-actions > .signoff-btn {
    min-width: 56px;
    min-height: 56px;
    padding: 0 var(--space-7);
    border-radius: var(--radius-full);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-3);
  }
  .signoff-bar-actions > .signoff-btn ~ .signoff-btn,
  .signoff-bar-actions > .signoff-withdraw {
    display: none;
  }

  /* Cover and body type step down one notch. */
  .cover {
    padding: var(--space-9) var(--space-7) var(--space-8);
  }
  .cover h1 {
    font-size: var(--font-size-2xl);
    max-width: none;
  }
  .cover .lede {
    font-size: var(--font-size-md);
    margin-bottom: var(--space-8);
  }
  .cover .stamp {
    margin-bottom: var(--space-8);
  }
  .cover-header-image img {
    max-height: 140px;
  }
  .cover-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) 0;
    padding-top: var(--space-7);
    margin-top: var(--space-7);
  }

  .content {
    padding: var(--space-8) var(--space-7) var(--space-12);
  }
  .content h2 {
    font-size: var(--font-size-xl);
    margin: var(--space-12) 0 var(--space-7);
  }
  .content h3 {
    font-size: var(--font-size-lg);
    margin: var(--space-10) 0 var(--space-5);
  }
  .content h4 {
    font-size: var(--font-size-base);
  }
  .content pre {
    padding: var(--space-5) var(--space-6);
    font-size: var(--font-size-xs);
  }
  .content table {
    font-size: var(--font-size-sm);
    /* Wide tables in the rendered markdown were pushing the page width
       beyond the viewport (scrollW 666 on a 375 viewport). Render the
       table as a block scroll container; the thead/tbody/tr/td inside
       keep their default table-* display so column alignment is intact. */
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Touch-friendly TOC links (>=44px row). */
  aside.toc a {
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-9);
    min-height: 44px;
  }
  aside.toc ol ol a {
    padding: var(--space-3) var(--space-5);
    min-height: 40px;
  }
  .toc-back {
    min-height: 44px;
    padding: var(--space-4) 0;
    margin-bottom: var(--space-5);
  }
}

/* ============================================================
 * 3. Small mobile: 480px
 * Single-column everything, tighter padding, all interactive
 * elements >= 44px square per WCAG 2.1 AA target size (AAA).
 * ============================================================ */
@media (max-width: 480px) {
  .cover {
    padding: var(--space-8) var(--space-6) var(--space-7);
  }
  .cover h1 {
    font-size: var(--font-size-xl);
  }
  .cover .lede {
    font-size: var(--font-size-base);
  }

  .content {
    padding: var(--space-7) var(--space-6) var(--space-12);
  }
  .content h2 {
    font-size: var(--font-size-lg);
    margin: var(--space-10) 0 var(--space-6);
  }
  .content h2::before {
    top: calc(var(--space-8) * -1);
    width: var(--space-9);
  }
  .content h3 {
    font-size: var(--font-size-md);
    margin: var(--space-9) 0 var(--space-4);
  }

  /* Allow long code blocks to scroll horizontally inside the column rather
   * than break body layout. */
  .content pre,
  .content table {
    margin-left: calc(var(--space-6) * -1);
    margin-right: calc(var(--space-6) * -1);
    border-radius: 0;
  }

  /* Index doc-cards collapse: hide the numeric column and arrow chevron to
   * give the title and description full width. */
  .index-wrap {
    padding: var(--space-8) var(--space-6) var(--space-11);
  }
  .index-wrap h1 {
    font-size: var(--font-size-2xl);
  }
  .index-wrap .lede {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-9);
  }
  .index-meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) 0;
    padding: var(--space-6) 0;
    margin-bottom: var(--space-9);
  }
  .doc-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2) 0;
    padding: var(--space-6) 0;
  }
  .doc-num,
  .doc-arrow {
    display: none;
  }
  .doc-title {
    font-size: var(--font-size-lg);
  }
  .doc-desc {
    font-size: var(--font-size-base);
  }

  /* Annotation drawer body padding tightens. */
  .annotation-drawer-header {
    padding: var(--space-5) var(--space-5) var(--space-4);
  }
  .annotation-drawer-body {
    padding: var(--space-4) var(--space-5);
  }
  .annotation-compose {
    padding: var(--space-4) var(--space-5);
  }

  /* Touch-target minima: 44px square on all interactive controls inside the
   * comment drawer and the doc chrome. Matches the existing selectors so we
   * win on cascade order without raising specificity. */
  .annotation-thread-btn,
  .annotation-compose-post,
  .annotation-drawer-close,
  .signoff-bar-close,
  .signoff-withdraw {
    min-height: 44px;
    min-width: 44px;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Cover meta values read as a single column at this width. */
  .cover-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
 * 4. Reduced-motion override
 * Honoured per cross-cutting standards and design-system spec section 8.
 * Any transitions added above collapse to instant.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .annotation-drawer {
    transition: none;
  }
}