/* ---------------------------------------------------------------
   ARTIFACTORY — mobile + craft layer.  Added 2026-08-26.
   Appended over the compiled Next stylesheet; app source unavailable.
   Port into source and delete this file if the tree is recovered.

   Measured problem (iPhone 390x844, live):
     .pod-tools is a 374px scroll strip holding ~746px of content.
     input.title-in = 132px, a.stamp = 87px, and the primary action
     (EXPORT) renders at x=573-765 — entirely off-screen. The mobile
     controls exist; they are simply unreachable without scrubbing a
     39px-tall bar sideways.
   Approach: demote identity/labels on small screens so the controls
   fit, rather than restructuring the app's own mobile pattern.
   --------------------------------------------------------------- */

@media (max-width: 560px) {
  /* Reclaim the ~300px spent on identity and the title field.
     The artifact title stays editable in the ARTIFACTS panel. */
  .pod-tools .title-in,
  .pod-tools .stamp,
  .pod-tools .pod-div { display: none; }
  .pod-tools .wordmark { display: none; }

  /* Below ~430px the brand mark is the last 35px between a usable
     EXPORT button and a clipped one. The menu button carries identity. */
  @media (max-width: 430px) {
    .pod-tools .brand-mark-btn { display: none; }
  }

  /* Bar clears the home indicator and centres what remains. */
  .pod.pod-tools {
    bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 3px;
    padding: 4px 4px;
    justify-content: center;
  }

  /* Touch targets: icon buttons ship at 28px, under the 44px floor.
     36px is the most that fits alongside FORMS/BACKGROUND/EXPORT. */
  /* 33px is the largest square that lets all seven controls fit 374px
     without scrolling. Still short of the 44px floor: the real fix is
     to move the three secondary icons into the menu, which needs source. */
  .pod-tools .icon-btn { min-width: 32px; min-height: 32px; }
  .pod-tools .cta { min-height: 32px; }

  /* Panels sit clear of the notch and never exceed the visual viewport. */
  .panel { top: calc(8px + env(safe-area-inset-top)); }
  .panel-files, .panel-form, .panel-params {
    max-height: 62dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Dynamic viewport units: the iOS URL bar cuts 100vh/46vh panels. */
@supports (height: 100dvh) {
  .stage { height: 100dvh; }
}

/* Craft: the LIGHTING selector truncates three of its four printed
   legends (STUDIO / OVER... / GOLD... / HARD), which defeats the point
   of a legended switch. Tighten tracking and padding so all four read. */
.rig-sw { letter-spacing: 0; }
.rig-sw button { padding-left: 4px; padding-right: 4px; letter-spacing: .01em; }

/* Craft: hover states stick after tap on touch devices. */
@media (hover: none) {
  .tile:hover, .icon-btn:hover, .mini:hover, .reg-tab:hover { filter: none; }
}


/* =================================================================
   CRAFT FIXES (desktop + mobile)
   ================================================================= */

/* 1. Phantom display face.
   --display led with "Helvetica Now Display", which is NOT among the
   fonts this build ships (the only webfont is Inter, 6 variable
   subsets via next/font). It therefore rendered only on machines with
   Helvetica Now installed locally — i.e. the art director saw a
   different site from every visitor. Lead with the face that actually
   loads. To restore the intent, self-host a licensed Helvetica Now
   and re-add it here (NOT the TRIAL files, which were removed). */
:root {
  --display: var(--font-inter), "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* 2. LIGHTING selector truncated three of four printed legends
   (STUDIO / OVER... / GOLD... / HARD). The base rule intends a 2x2
   grid; rendering 4-across gives ~42px cells while .rig-leg needs
   ~48px at var(--t-9). Restore 2x2 so every legend reads in full —
   a legended switch that can't be read defeats its own premise. */
.rig .rig-sw { grid-template-columns: 1fr 1fr; }

/* 3. Orphaned knob row. .dials is flex-wrap with 8 dials in a 188px
   well = rows of 3/3/2, leaving the last row jammed left against a
   dead cell. Centring only moves incomplete rows (full rows already
   fill the width), so this fixes the orphan and nothing else. */
.dials { justify-content: center; }

/* 4. Panel titles sat at different x across the three pods.
   .panel-bar is `12px 1fr auto`, so the centred title centres inside a
   residual width that shrinks when a third control exists (FORMS has a
   close X, SCENE a refresh, ARTIFACTS neither). Reserving the third
   column at a constant 20px aligns all three titles identically. */
.panel-bar { grid-template-columns: 12px 1fr 20px; }

/* 5. CANDIDATE (under test): --mono aliased to the display face, so the
   18 caption selectors that ask for mono render in Helvetica/Inter. */
:root { --mono: var(--code); }

/* 6. The artifact title used `border-bottom: 1px dotted var(--ink-4)`,
   which reads as a spellcheck squiggle / validation error rather than
   an editable field. A solid hairline that strengthens on hover and
   focus keeps the affordance and loses the error connotation. */
.title-in { border-bottom: 1px solid var(--hair); }
.title-in:hover { border-bottom-color: var(--ink-4); }
.title-in:focus { border-bottom-color: var(--ink-2); }

/* 7. Panel stacking. .panel-files (ARTIFACTS) and .panel-form (OBJECT)
   share the left rail; .panel-form is bottom-anchored, so as its tile
   grid grows its top rises into the panel above. Adding four objects
   took the grid from three rows to four and produced a measured 46px
   overlap. Cap the height and let the body scroll instead.
   Note: .panel-files grows with saved artifacts, so this constant
   assumes a short list — the real fix is a flex column in source. */
.panel-form { max-height: calc(100dvh - 215px); overflow-y: auto; overscroll-behavior: contain; }
.panel-params { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }

/* 8. The capped panels scroll, but macOS auto-hides overlay scrollbars,
   so a knob sliced at the boundary reads as a clipping bug rather than
   as "there is more below". Give the two scrolling panels a persistent
   thin rail so the affordance is visible. */
.panel-form, .panel-params { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
.panel-form::-webkit-scrollbar, .panel-params::-webkit-scrollbar { width: 6px; }
.panel-form::-webkit-scrollbar-track, .panel-params::-webkit-scrollbar-track { background: transparent; }
.panel-form::-webkit-scrollbar-thumb, .panel-params::-webkit-scrollbar-thumb {
  background: var(--ink-4); border-radius: var(--r-pill); border: 1px solid transparent; background-clip: padding-box;
}