/*
 * app.css · APP-ONLY additions not yet in the mock (scripts/lift-css.sh never touches this file).
 * Round 3: EMPTY. The three round-1/2 rules were folded into the lifted mock r3 CSS and removed from here:
 *   .pg-usage a 24px            → components.css (DESIGN REQUEST 2 / D1)
 *   overflow-anchor: none       → layout.css (D2)
 *   mark.pg-seam padding        → components.css (D3)
 * The link stays in assets/php/page.php so a future app-only rule needs no template change; report any new rule as a
 * DESIGN REQUEST in the frontend report.
 */
@layer components {
  /* r3 DESIGN REQUEST D-r3-1: the 12px character count in --text-3 measured 4.43:1 from PIXELS (invariants.js ink,
     improve-first/free at 1440, “0 / 10,000”) against 4.5 needed: its computed colour passes, its thin 12px glyphs do not.
     --text-2 until the mock folds a fix into components.css (then delete this rule). */
  .pg-count-chars:not([data-over="true"]) { color: var(--text-2); }
}
@layer components {
  /* r3 DESIGN REQUEST D-r3-2: at 320 a member's head row (the Create/Improve switch 223px + the Library button with its
     count 70px + the 16px gap = 309px) was wider than the 288px column, so the layout viewport widened to 326px
     (checks.js overflow, streaming/pro at 320×568, fallback font). Below 380px the switch drops its two decorative icons
     (−44px; the words stay), so the lifted grid row fits with room to spare. (A first try that moved the button to the
     usage row overlapped the guest's "Sign up free for 2 a day" and grew the row at done: both found by the gate.) */
  @media (max-width: 379.98px) {
    .pg-switch__link > .pg-icon { display: none; }
  }
  /* r3 DESIGN REQUEST D-r3-3: a notice's icon column is `auto`; at 320 a long action ("Sign up to continue") squeezed the
     icon to 0×16 (checks.js icons, stopped/guest). The icon keeps its 16px. */
  .pg-notice > .pg-icon { min-width: 16px; }
}
@layer components {
  /* r3 DESIGN REQUEST D-r3-4: the share page's "Open the Prompt Optimizer" button is white-space:nowrap; at 320 its card's
     min-content (318px) exceeded the 288px column and widened the layout viewport to 334px (checks.js overflow,
     share-page/legacy/owner at 320×568, fallback font). Below 380px the label may wrap inside a taller button. */
  @media (max-width: 379.98px) {
    .pg-share .pg-step .pg-btn { white-space: normal; height: auto; min-height: var(--control-h); padding-block: var(--s-2); }
  }
}