/* Narrow screens.
 *
 * The exported stylesheet has no media queries at all, so the page was laid out for a desktop and
 * left to fend for itself everywhere else. This file is the whole of the phone and tablet
 * behaviour. It is kept separate so that re-exporting index.html from Claude Design costs one
 * <link> line to restore rather than a block of CSS to find and paste back.
 */

/* A page should never scroll sideways. This is a backstop, not the fix: the nav below is the fix.
 * Keeping both means a future section that overruns degrades into a clipped edge rather than into
 * a page the reader can drag around. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Registration marks sit slightly outside their box by design, which is fine in the middle of a
 * page and is an overflow at the right edge of one. */
.corner {
  pointer-events: none;
}

/* The hero stage declares touch-action: none so that dragging rotates the part rather than
 * scrolling the page. On a mouse that is right. On a phone it means a finger landing anywhere on
 * a 300px-tall block cannot scroll past it, and the reader is stuck on the first screen.
 *
 * pan-y gives the axes to whoever needs them: the browser scrolls on a vertical swipe, and a
 * horizontal drag still reaches the renderer and turns the part. Nothing to discover and no mode
 * to enter, which is what a tap-to-activate would have cost. !important because the inline style
 * outranks a stylesheet. */
#hero-stage {
  touch-action: pan-y !important;
}

@media (max-width: 860px) {
  /* The four section links do not fit beside the brand and the button, and wrapping them makes a
   * three-line bar out of a one-line one. On a single page in this order, scrolling is the
   * navigation; the button is what the bar is actually for. */
  .nav a[href="#verification"],
  .nav a[href="#products"],
  .nav a[href="#pricing"],
  .nav a[href="#download"]:not(.btn) {
    display: none;
  }

  .nav {
    gap: 12px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav .btn {
    margin-left: auto;
    white-space: nowrap;
  }

  /* 28px of side padding on a 390px screen spends a seventh of the width on nothing. */
  section > div,
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* The hero figure is square-ish by default, which is a lot of a phone screen for one drawing. */
  .blueprint[style*="aspect-ratio"] {
    min-height: 300px !important;
    aspect-ratio: 1.15 !important;
  }

  /* Long paths and headings should wrap rather than push the page wider. */
  h1, h2, h3, p, li, a {
    overflow-wrap: anywhere;
  }

  /* The sheet annotations around the hero drawing are laid out for a wide box. At this width the
   * part name collides with the mode switch and the bottom pair wraps over itself. The drawing is
   * the point; the captions describing it are not, and the mode switch still works. Everything
   * with an id is the renderer's own: the paper, the stage, the labels layer and the progress
   * bar. What is left over is the captions. */
  figure.blueprint > div:not([id]):not(.seg) {
    /* !important because these carry display:flex as an inline style, which a stylesheet cannot
     * otherwise outrank. The whole page is styled inline, so expect to need this again. */
    display: none !important;
  }

  .seg {
    top: 10px !important;
    right: 10px !important;
  }
}

@media (max-width: 560px) {
  /* Two stat columns rather than three: at this width three of them are one word each per line. */
  .nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .blueprint[style*="aspect-ratio"] {
    min-height: 260px !important;
    aspect-ratio: 1 !important;
  }
}