/* ==========================================================================
   assets/mobile.css — thumb comfort for small screens
   --------------------------------------------------------------------------
   The reference is a dense desktop design: 10–11px labels, 27px icon buttons,
   9px section links. At 1440px that reads as tidy and information-dense. At
   390px it reads as broken — a 27px target is a coin toss with a thumb, and
   11px input text makes iOS zoom the page the moment you focus it.

   Measured on the live site at 390px before this file existed:
     39 undersized targets on the dashboard, 98 on /notices/
     search input rendered at 11px  (below the 16px iOS zoom threshold)
     .prose body copy at 11px
     tap highlight was the old cold iOS blue on a warm clay palette
     no env(safe-area-inset-*) anywhere, so notched iPhones put the home
       indicator on top of the footer
     73px of every notice detail page was clipped off-screen (see section 1)

   Selectors are prefixed with `body` on purpose. scripts/build.mjs
   concatenates CSS in alphabetical order, which puts mobile.css *before*
   views.css, so a bare `.chip` would silently lose. The one-class prefix
   makes these overrides win regardless of file order.

   Everything here is inert above 720px, so the reference layout on desktop
   is byte-for-byte unchanged.
   ========================================================================== */

/* --------------------------------------------------------------- 1. grid --
   The real bug, and the worst of the six. views.css collapses .detail-grid
   to a single `1fr` column below 960px — but `1fr` is shorthand for
   `minmax(auto, 1fr)`, and that `auto` minimum resolves to the largest
   min-content contribution among the items. On the notice detail page the
   track resolved to 446.766px inside a 358px container, pushing 73px of
   every panel off the right edge of the screen. The page still reported
   "no horizontal overflow" because an ancestor clipped it, which is why
   the earlier overflow checks passed clean.

   `minmax(0, 1fr)` lets the track shrink below its content, and `min-width:
   0` lets the flex/grid children inside it do the same. This is the
   standard fix for grid blowout; without the 0 minimum the track can never
   be smaller than the widest thing it holds. */

@media (max-width: 960px) {
  body .detail-grid,
  body .saved-grid,
  body .lower-grid,
  body .category-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body .view-stack,
  body .detail-grid > *,
  body .saved-grid > *,
  body .panel,
  body .panel-body,
  body .panel-header,
  body .panel-foot {
    min-width: 0;
  }
}

/* The appearance row is markup that only makes sense on a phone, so it is
   removed outright rather than hidden — no dead node in the desktop DOM. */
@media (min-width: 721px) {
  .mobile-appearance {
    display: none;
  }
}

@media (max-width: 720px) {
  /* ------------------------------------------------------ 2. tap feel -- */

  /* The old iOS blue flash on every tap fought the clay palette. Warm tint
     instead, so the flash reads as part of the surface. */
  body {
    -webkit-tap-highlight-color: rgba(191, 108, 61, 0.16);
    /* Stops iOS inflating body text in landscape and WebKit's 300ms
       double-tap delay, which made the walls feel laggy to scroll. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body a,
  body button,
  body input,
  body select,
  body textarea,
  body [role="button"],
  body .chip,
  body .tile,
  body .wall-row,
  body .feed-tab,
  body .category-card {
    touch-action: manipulation;
  }

  /* --------------------------------------------------------- 3. notches -- */

  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  body .app-window {
    padding-top: env(safe-area-inset-top);
  }

  /* Keep the last thing on the page clear of the home indicator. */
  body .panel:last-child,
  body main > *:last-child,
  body footer,
  body .site-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }

  /* --------------------------------------------------- 4. touch targets --
     44px is the floor (WCAG 2.5.5 / Apple HIG). Anything already roomy is
     left alone. The two card overlay buttons keep their 27px visual size
     and grow a 44px invisible hit area via ::after, so the card layout
     doesn't shift under the thumb. */

  body .icon-button,
  body .notification-button,
  body .mobile-menu {
    width: 44px;
    height: 44px;
  }

  /* The brand is the way back to the dashboard from every page. */
  body .brand {
    min-height: 44px;
  }

  /* Appearance control, drawer only. Above 720px the window-bar button is
     the real one and this row is removed entirely. */
  body .mobile-appearance {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    margin-top: 8px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
  }

  body .mobile-appearance .user-copy {
    flex: 1;
    min-width: 0;
  }

  body .mobile-appearance .icon-button {
    flex: none;
  }

  body .nav-item {
    min-height: 46px;
    padding-block: 6px;
  }

  body .feed-tab {
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
  }

  /* Breadcrumb: 30x15 with 11px text is not a target, it is a typo. */
  body .listing-crumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
  }

  /* The wall heading is a link to the full list, so it needs a real target
     too — 14px tall was unusable. */
  body .wall-title {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
  }

  body .chip {
    min-height: 44px;
    padding: 0 15px;
    font-size: 12px;
  }

  body .section-link {
    min-height: 44px;
    padding: 0 4px;
    font-size: 12px;
  }

  body .wall-row {
    min-height: 48px;
    padding-block: 4px;
  }

  body .wall-more,
  body .retry-button,
  body .view-option {
    min-height: 44px;
  }

  body .btn.small {
    min-height: 44px;
    padding: 0 16px;
    font-size: 13px;
  }

  /* Visual stays 27px; the hit area becomes 44px. */
  body .save-btn,
  body .quick-btn {
    position: relative;
  }

  body .save-btn::after,
  body .quick-btn::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
  }

  /* --------------------------------------------------------- 5. type size --
     11px body copy is the difference between "clean" and "can't read this"
     on a 390px screen held at arm's length. Secondary chrome moves to 12px
     and prose to 15px with a taller leading. */

  body .prose,
  body .acc-body {
    font-size: 15px;
    line-height: 1.75;
  }

  body .state-card p,
  body .empty p,
  body .empty strong {
    font-size: 13px;
  }

  body .source-row span {
    font-size: 12px;
  }

  /* Below 16px iOS zooms the whole viewport on focus, which is jarring and
     leaves the user stranded mid-form.

     Needs the .app-window class, not just `body`: `body input` is two
     element selectors (0,0,2) and loses to clay.css's `.main-search input`
     at (0,1,1). `body .app-window input` is (0,1,2) and wins outright. */
  body .app-window input,
  body .app-window select,
  body .app-window textarea {
    font-size: 16px;
    /* The 44px wrapper already gives a 44px tap area, but the field itself
       was a 24px strip inside it. Fill it so the real target is the target. */
    min-height: 44px;
  }

  body .skip-link {
    min-height: 44px;
    font-size: 13px;
  }

  /* -------------------------------------------------- 6. comfortable flow -- */

  /* Long unbroken tokens (URLs in the official-links panel) are the other
     way a panel can outgrow its track. */
  body .prose,
  body .source-row,
  body .radar-item {
    overflow-wrap: anywhere;
  }

  /* Momentum scrolling for the horizontal chip and tile strips. */
  body .chip-bar,
  body .tile-strip,
  body .feed-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 14px;
  }
}