/*
 * layout.css · page skeleton and every responsive rule for it          (docs/09-VISUAL-SPEC.md §4)
 *
 *   ≥1024      one centred tool column (--col 768) · gutter 32 · H1 36/44
 *   768–1023   same column, gutter 24 · H1 30/38
 *   <768       full-width column, gutter 16 · H1 28/34 · composer bar stacks · drawer becomes a bottom sheet
 *
 * Layout ONLY: position, size, spacing, order. Colour, type and component internals live in components.css. A property
 * set here is never set again for the same element in components.css (lint rule `dup`), so source order between the two
 * files can never decide a layout (the WA round-2 M-2 defect).
 * All @media are top-level (lint rule `media`), never nested, never inside prefers-reduced-motion.
 */
@layer layout {

  /* site chrome wrappers: solid site background, NOT sticky on the tool pages (the nav scrolls away, so no fixed layer
     covers the prompt or the result on phones: 05 problem #6) */
  .pg-sitenav { position: relative; z-index: var(--z-sitenav); }
  .pg-sitefoot { position: relative; margin-top: var(--s-16); }

  .pg-app {
    padding: var(--s-8) var(--gutter) var(--s-12);
    min-height: 60vh;
  }
  .pg-col { width: 100%; max-width: var(--col); margin-inline: auto; }
  .pg-page--share { padding: 0; }
  .pg-self-start { justify-self: start; }
  .pg-drawer__note { padding: var(--s-3) var(--s-3) 0; }
  .pg-result__section--bar { padding-bottom: 0; }


  /* ---- head: switch + tools, H1, lede ---- */
  .pg-head { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "switch usage tools" "text text text"; align-items: center; row-gap: var(--s-4); column-gap: var(--s-4); margin-bottom: var(--s-6); }
  .pg-head__switch { grid-area: switch; justify-self: start; }
  .pg-head__usage { grid-area: usage; justify-self: end; min-width: 0; }
  .pg-head__tools { grid-area: tools; display: flex; align-items: center; gap: var(--s-2); }
  .pg-head__text { grid-area: text; display: grid; row-gap: var(--s-2); }

  /* ---- composer ---- */
  .pg-composer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); padding: var(--s-6); }
  .pg-composer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: calc(var(--s-1) * -1); }
  .pg-field { display: grid; row-gap: var(--s-2); }
  .pg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
  .pg-bar__end { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
  .pg-anchor { position: relative; }
  .pg-inputframe__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); }
  .pg-inputframe__bar .pg-count-chars { margin-left: auto; }

  /* ---- result ---- */
  .pg-result { margin-top: var(--s-6); position: relative; }
  .pg-result__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--s-4); row-gap: var(--s-2); padding: var(--s-3) var(--s-6); min-height: 64px; }
  .pg-result__title { display: grid; row-gap: 2px; min-width: 0; }
  /* nothing in the result body may anchor the page's scroll (Chrome picked the skeleton under the growing text and scrolled
     the page ~600px at 390: frontend r1 finding, folded in r3) */
  .pg-result__body, .pg-result__body * { overflow-anchor: none; }
  .pg-result__actions { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); flex-wrap: wrap; }
  .pg-result__actions > * { flex: none; }
  .pg-result__body { padding: var(--s-5) var(--s-6) var(--s-6); display: grid; row-gap: var(--s-5); }
  .pg-result__section { padding: var(--s-5) var(--s-6); display: grid; row-gap: var(--s-3); }
  /* a modifier of .pg-result__section: TWO classes so it always beats the base rule whatever the source order
     (round 1: `.pg-result__foot{display:flex}` lost to the later `.pg-result__section{display:grid}` → a 718px Share bar) */
  .pg-result__section.pg-result__foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-2); }
  .pg-result[data-state="streaming"] .pg-result__body,
  .pg-result[data-state="refining"] .pg-result__body { min-height: var(--reserve, var(--reserve-generate)); align-content: start; }
  .pg-page--improve .pg-result[data-state="streaming"] .pg-result__body { min-height: var(--reserve, var(--reserve-improve)); }

  .pg-sidebyside { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); row-gap: var(--s-4); }
  .pg-vars__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); row-gap: var(--s-3); }
  .pg-checks__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-6); row-gap: var(--s-3); }
  .pg-questions__list { display: grid; row-gap: var(--s-4); }

  .pg-offer { margin-top: var(--s-6); display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--s-4); row-gap: var(--s-3); padding: var(--s-4) var(--s-5); }
  .pg-offer__cta { grid-column: 3; display: flex; align-items: center; gap: var(--s-2); }

  /* ---- Expert builder (Pro/Basic) ---- */
  .pg-sections { display: grid; row-gap: var(--s-3); }
  .pg-section-card { display: grid; row-gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); }
  .pg-section-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }

  /* ---- Tune / Advanced ---- */
  .pg-tune__body { display: grid; row-gap: var(--s-4); padding: var(--s-4) 0 var(--s-1); }
  .pg-tune__row { display: grid; grid-template-columns: 136px 1fr; align-items: start; column-gap: var(--s-4); row-gap: var(--s-2); }

  /* ---- drawer (Library / Recent) + dialogs: <dialog> in the top layer ---- */
  .pg-drawer[open] { padding: 0; position: fixed; inset: 0 0 0 auto; width: min(var(--drawer-w), 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; margin: 0; display: grid; grid-template-rows: auto auto 1fr; }
  .pg-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5); }
  .pg-drawer__tabs { padding: 0 var(--s-5); }
  .pg-drawer__list { overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-3) var(--s-6); scroll-padding-block: var(--s-2); }
  .pg-modal[open] { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 2 * var(--s-4))); max-height: calc(100dvh - 2 * var(--s-4)); overflow-y: auto; display: grid; row-gap: var(--s-4); padding: var(--s-6); scroll-padding-block: var(--s-2); }
  .pg-modal__close { position: absolute; top: var(--s-3); right: var(--s-3); }
  .pg-modal__title { padding-right: var(--s-10); }
  .pg-modal__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); }

  /* ---- toasts: bottom-centre on ≥768 (clear of the Keeper launcher at the right); top-centre on phones ---- */
  .pg-toasts { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: var(--z-toast); display: grid; row-gap: var(--s-2); width: min(420px, calc(100vw - 2 * var(--s-4))); pointer-events: none; }
  .pg-toasts > * { pointer-events: auto; }

  /* ---- SEO body below the tool ---- */
  .pg-seo { max-width: var(--col-wide); margin: var(--s-16) auto 0; padding: 0 var(--gutter); display: grid; row-gap: var(--s-10); }
  .pg-seo__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

  /* ---- share page ---- */
  .pg-share__main { padding: var(--s-8) var(--gutter) var(--s-12); }
  .pg-share__col { max-width: 960px; margin-inline: auto; display: grid; row-gap: var(--s-6); }
}

@layer layout {
  @media (max-width: 1023.98px) {
    .pg-app { padding-top: var(--s-6); }
  }
  @media (max-width: 767.98px) {
    .pg-app { padding-top: var(--s-5); padding-bottom: var(--s-10); }
    .pg-head { grid-template-columns: 1fr auto; grid-template-areas: "switch tools" "text text" "usage usage"; margin-bottom: var(--s-5); row-gap: var(--s-3); }
    .pg-head__usage { justify-self: start; }
    .pg-composer { padding: var(--s-4); row-gap: 10px; }
    .pg-bar { row-gap: var(--s-3); }
    .pg-bar__end { width: 100%; }
    .pg-bar__end .pg-btn--lg { flex: 1; }
    .pg-result__head { padding: var(--s-3) var(--s-4); }
    .pg-result__actions { width: 100%; }
    .pg-result .pg-result__actions { flex-wrap: nowrap; }
    .pg-result .pg-result__actions > .pg-btn--primary { flex: 1 1 auto; }
    .pg-result__body { padding: var(--s-4); }
    .pg-result__section { padding: var(--s-4); }
    .pg-sidebyside, .pg-vars__grid, .pg-checks__grid { grid-template-columns: 1fr; }
    .pg-tune__row { grid-template-columns: 1fr; }
    .pg-offer { grid-template-columns: auto 1fr; }
    .pg-offer__cta { grid-column: 1 / -1; }
    .pg-drawer[open] { inset: auto 0 0 0; width: 100vw; height: 86dvh; max-height: 86dvh; }
    .pg-toasts { top: var(--s-4); bottom: auto; }
    .pg-seo__steps { grid-template-columns: 1fr; }
    .pg-share__main { padding-top: var(--s-5); }
  }
}

@layer layout {
  /* r3 MJ-1: the result head sticks ONLY where it is small relative to the screen (≥ 768 wide AND > 560 tall). There,
     --scroll-top (= the measured head height + 16px) keeps a focused control clear of it in both Tab directions.
     On phones, short viewports (keyboard open) and 200% zoom it scrolls with the card. */
  @media (min-width: 768px) and (min-height: 561px) {
    .pg-result__head { position: sticky; top: 0; z-index: var(--z-sticky); }
  }
  /* r3 MJ-3: reflow down to 320 CSS px (WCAG 1.4.10) */
  @media (max-width: 479.98px) {
    /* the meta line may wrap; its slot keeps two lines so the head never changes height between states (M5) */
    .pg-result__title { min-height: calc(var(--lh-16) + 2 * var(--lh-13) + 2px); align-content: start; }
  }
  @media (max-width: 379.98px) {
    .pg-result .pg-result__actions { flex-wrap: wrap; min-height: calc(2 * var(--control-h) + var(--s-2)); align-content: flex-start; }   /* two rows reserved in EVERY state, so Stop ↔ actions never changes the head height */
    .pg-result .pg-result__actions > .pg-btn--primary { flex: 1 1 100%; }
  }
}