/* ============================================================================
   FISH'S MC TOOLS — phone layer (iOS portrait)
   Loaded last, over tokens / base / components / landing.

   On a phone there is no frame. The water runs past every edge of the screen
   — behind the Dynamic Island, behind the glass toolbar, out into the rounded
   corners — and the page sits on it. The desktop keeps the prismarine frame.
   ========================================================================= */

/* ---- Touch ---------------------------------------------------------------
   The lift on a tool card is a hover effect, so on a phone it latches on after
   a tap and stays until you tap something else. */
@media (hover: none) {
  a.tool:hover { transform: none; box-shadow: var(--bevel), 0 0 0 1px var(--line-soft), var(--sh-2); }
  a.tool:hover .tool-foot svg { transform: none; }
  a.tool:active {
    transform: scale(0.985);
    box-shadow: var(--bevel), 0 0 0 1px color-mix(in srgb, var(--accent) 34%, var(--line)), var(--sh-2);
  }
}
@media (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent; }
  .tool, .head h1 { -webkit-user-select: none; user-select: none; }
}

/* A phone, either way up: portrait is under 720px wide, landscape is under
   520px tall with a touch screen. Desktop windows of any size keep the frame. */
@media (max-width: 720px), (max-height: 520px) and (pointer: coarse) {
  /* ---- No frame ----------------------------------------------------------
     --reef is the frame's thickness and every inset on the page is measured
     from it, so zeroing it collapses those insets along with the frame. */
  :root { --reef: 0px; }
  #reef { display: none; }

  /* ---- Water to every edge -----------------------------------------------
     iOS draws the page behind the status bar and the toolbar, but a
     `position: fixed; inset: 0` layer stops at the layout viewport, which sits
     between them and resizes as the toolbar moves. The ocean runs --overscan
     past the top and bottom instead, sized in lvh so it holds still. The
     swimmers keep to the visible part, so none of them spend their lap hidden
     behind the clock. */
  #ocean {
    top: calc(-1 * var(--overscan));
    height: calc(100vh + 2 * var(--overscan));
  }
  @supports (height: 100lvh) {
    #ocean { height: calc(100lvh + 2 * var(--overscan)); }
  }
  #life { inset: var(--overscan) 0; }

  /* iOS 26 fills the strip behind the Dynamic Island and the strip behind the
     toolbar with one colour, taken from the page's body — not from the water
     that runs behind them, and not from theme-color. The desktop scrim darkens
     the water from top to bottom, so no single colour could match both ends.
     On a phone the scrim is flat instead: the water is the same colour at every
     edge, and that colour goes on the body, the root and the ocean layer, so
     whichever one iOS reads, it matches. The values are the measured water
     average under the flat scrim. */
  #scrim { background: color-mix(in srgb, var(--bg-void) 36%, transparent); }
  :root[data-theme="bone"] #scrim { background: color-mix(in srgb, var(--bg-base) 52%, transparent); }

  :root, body, #ocean { background-color: #203c71; }
  :root[data-theme="bone"], :root[data-theme="bone"] body,
  :root[data-theme="bone"] #ocean { background-color: #90a2c5; }

  /* Landscape puts the notch at a side, so the safe area goes on the sides. */
  body {
    padding-left: calc(var(--s-5) + env(safe-area-inset-left));
    padding-right: calc(var(--s-5) + env(safe-area-inset-right));
  }
}

@media (max-width: 720px) {
  body {
    padding-left: calc(var(--s-4) + env(safe-area-inset-left));
    padding-right: calc(var(--s-4) + env(safe-area-inset-right));
  }
  .page {
    min-height: 0;
    justify-content: flex-start;
    gap: var(--s-6);
    padding-top: calc(var(--s-6) + env(safe-area-inset-top));
    /* Room for the floating toolbar over the last card. */
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  /* ---- Hero --------------------------------------------------------------
     The model is built at a fixed six pixels per texel and stands 307px tall —
     on a phone that pushed the wordmark and every tool below the fold. Draw it
     at 80% (the `scale` property composes with the rig's own transform, which
     the look-at animation drives) and give the stage exactly that much room. */
  .head { gap: var(--s-3); }
  .mc-stage { max-width: 240px; aspect-ratio: 240 / 272; }
  .mc-rig { scale: 0.8; }
  .mc-stage::after { bottom: 4%; width: 150px; height: 30px; }
  .head h1 { font-size: clamp(40px, 12vw, 56px); line-height: 0.95; }

  /* ---- Tools ------------------------------------------------------------- */
  .tools { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .tool { padding: var(--s-4); border-radius: var(--r-lg); }
  .tool h2 { font-size: var(--t-18); }
  .tool ul.bullets { margin-top: var(--s-3); gap: 6px; }
  .tool ul.bullets li { font-size: var(--t-14); }
  .tool-foot { padding-top: var(--s-4); font-size: var(--t-13); min-height: 24px; }
  .legal { padding-inline: var(--s-2); line-height: 1.5; }
}

/* Small phones (iPhone SE / mini). */
@media (max-width: 380px) {
  .mc-stage { max-width: 210px; }
  .mc-rig { scale: 0.7; }
  .head h1 { font-size: 38px; }
}

/* ---- Landscape -----------------------------------------------------------
   ~390pt tall: put the character beside the wordmark and the tools in a row,
   and let the page scroll inside the window. */
@media (max-height: 520px) and (orientation: landscape) {
  .page { justify-content: flex-start; gap: var(--s-5); min-height: 0;
          padding-bottom: calc(var(--reef) + var(--s-6)); }
  .head { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); text-align: left; justify-items: stretch; }
  .head h1 { order: 0; }
  .mc-stage { justify-self: end; max-width: 200px; aspect-ratio: 200 / 230; }
  .mc-rig { scale: 0.7; }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}