/* ─────────────────────────────────────────────────────────────────────────
   Mobile refinements.

   Linked AFTER each page's inline <style> block, so at equal specificity
   these rules win. Desktop (>820px) is deliberately untouched — every
   rule below lives inside a max-width media query, except the .om-burger
   default that keeps the hamburger hidden on desktop.

   Hooks are real class names (.om-*) rather than the [style*="…"]
   substring matching used in the page-level styles: those depend on how
   the runtime serializes inline styles, which is brittle to edit.
   ───────────────────────────────────────────────────────────────────────── */

/* Hamburger is mobile-only chrome. */
.om-burger { display: none; }

@media (max-width: 820px) {

  /* ── 1 · Announcement banner: compact ──────────────────────────────── */
  .om-banner      { gap: 4px 10px !important; padding: 7px 14px !important; }
  .om-banner-text { font-size: 13px !important; line-height: 18px !important; }
  .om-banner-pill { font-size: 9px !important; line-height: 13px !important;
                    padding: 2px 9px !important; letter-spacing: .7px !important; }

  /* ── 5 · Header: compact, links move into the hamburger ────────────── */
  .om-nav        { padding: 6px 8px 6px 12px !important; gap: 8px !important;
                   justify-content: flex-start !important; }
  .om-nav-links  { display: none !important; }
  .om-nav-logo img { width: 26px !important; height: 26px !important; }

  /* Pushes the nav CTA + burger to the right, logo stays left. */
  .om-nav [style*="var(--radius-pill)"] { margin-left: auto !important;
                                          white-space: nowrap !important; }

  .om-burger { display: block !important; position: relative; flex-shrink: 0; }
  .om-burger > summary {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; box-sizing: border-box;
    border: 1px solid var(--border-subtle); border-radius: 8px;
    background: var(--surface-card); color: var(--text-primary);
    cursor: pointer; list-style: none;
  }
  /* Hide the native disclosure triangle in every engine. */
  .om-burger > summary::-webkit-details-marker { display: none; }
  .om-burger > summary::marker { content: ""; }
  .om-burger[open] > summary { background: var(--surface-sunken); }

  /* An absolutely positioned child escapes the UA's default collapse of
     non-summary <details> content, so the closed state is set explicitly
     here rather than inherited — otherwise the panel sits permanently open. */
  .om-burger-panel { display: none; }
  .om-burger[open] .om-burger-panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 208px; padding: 8px; box-sizing: border-box;
    border: 1px solid var(--border-subtle); border-radius: 10px;
    background: var(--surface-popover); box-shadow: var(--shadow-float);
  }
  .om-burger-panel a {
    padding: 11px 12px; border-radius: 6px;
    font-family: var(--font-display); font-weight: 600;
    font-size: 15px; line-height: 21px; color: var(--text-primary);
  }
  .om-burger-panel a:active { background: var(--surface-sunken); }

  /* ── 2 · Buttons: smaller everywhere, and side by side in CTA rows ─── */
  /* The DS Button is a flex COLUMN with no justify-content, so it defaults to
     flex-start: any button taller than its own text (a stretched row sibling,
     or min-height below) renders that text pinned to the top instead of
     centred. Centre it on both axes so one- and two-line labels sit alike. */
  [style*="var(--radius-pill)"] {
    font-size: 14px !important; line-height: 18px !important;
    padding: 11px 16px !important;
    justify-content: center !important; align-items: center !important;
  }

  .om-cta-row {
    flex-wrap: nowrap !important; gap: 10px !important;
    align-items: stretch !important; width: 100% !important;
  }
  /* The x-import wrapper is display:contents, so the button element itself
     is the flex item — size it, not the wrapper. */
  .om-cta-row [style*="var(--radius-pill)"] {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    max-width: none !important;
    font-size: 13px !important; line-height: 17px !important;
    padding: 11px 12px !important; min-height: 48px !important;
    white-space: normal !important; text-align: center !important;
  }

  /* ── 3 · Curriculum: one card per row ──────────────────────────────── */
  .om-modules { grid-template-columns: 1fr !important; }
  /* Card 13 carries grid-column:span 2. In a collapsed 1-column grid that
     spawns an implicit second column, doubling the grid's width and pushing
     it off-screen — this is what cut the cards off horizontally. */
  .om-modules > * { grid-column: auto !important; }

  /* ── 6 · Report generator card: fit inside one phone screen ────────── */
  /* Selectors are tag-qualified (div.om-quiz) so they outrank the page-level
     [style*="padding: 45px"] rule, which has equal class specificity and
     would otherwise win or lose on stylesheet order. */
  div.om-quiz            { gap: 16px !important; padding: 22px 16px 16px !important; }
  div.om-quiz-head       { gap: 8px !important; }
  /* Two headings stack here: the card title, then the step title. Keep them
     distinct rather than collapsing both to one size. */
  div.om-quiz-head h3:first-of-type { font-size: 20px !important; line-height: 25px !important; }
  div.om-quiz-head h3:last-of-type  { font-size: 16px !important; line-height: 21px !important;
                                      margin-top: 0 !important; }
  div.om-quiz-head p     { font-size: 14px !important; line-height: 19px !important; }
  div.om-quiz-qs         { gap: 14px !important; }
  /* Multi-select questions carry grid-column:span 2; in the collapsed
     single-column grid that would spawn an implicit second column (the same
     trap as curriculum card 13). */
  div.om-quiz-qs > div   { gap: 6px !important; grid-column: auto !important; }
  div.om-quiz-qs > div > span { font-size: 15px !important; line-height: 20px !important; }
  /* Dropdown triggers: tighter, but held at a 44px tap target. */
  div.om-quiz-qs button[style*="space-between"] {
    padding: 10px 13px !important; min-height: 44px !important;
  }
  /* Multi-select chips: the List and Tracking steps stack 8 of these each.
     Narrower chips let two share a row instead of one per row, which is where
     the height on those steps goes. Only the FONT and HORIZONTAL padding
     shrink — the row-packing win is horizontal, so vertical padding stays and
     the chip keeps a ~39px tap target (6px of it was costing 16 chips their
     tappability for no height benefit). */
  div.om-quiz-qs button[style*="border-radius: 999px"] {
    padding: 10px 11px !important; font-size: 12.5px !important; line-height: 17px !important;
  }
  div.om-quiz-qs > div > div[style*="flex-wrap"] { gap: 6px !important; }

  /* Optional "last 30 days" numbers block on the Tracking step: the page rule
     collapses this 3-up grid to a single column, stacking six inputs ~420px
     tall. Two-up instead — the fields are short numbers, they fit. */
  div.om-quiz div[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  }
  /* Scoped to padding:28px, which is unique to that block — keying on
     var(--surface-sunken) also matched the 4px progress-bar track and padded
     it out by 32px, making every step taller instead of shorter. */
  div.om-quiz div[style*="padding: 28px"] { padding: 16px !important; }
  div.om-quiz input[type="number"] { padding: 9px 11px !important; font-size: 14px !important; }
  /* Three opener textareas on the Message step. */
  div.om-quiz textarea { min-height: 84px !important; padding: 11px 13px !important; }

  /* ── 4 · Proof walls: real masonry, no row-boundary dead space ──────── */
  /* The wall is a grid whose children are 3–4 tall column-stacks. Collapsed
     to 2 grid columns those stacks land 2x2, and because sibling stacks
     differ in height each grid row leaves a block of dead space under the
     shorter one — the gaps in the chat/payment screenshots. Switching to
     multi-column and lifting the cards out of their stacks (display:contents)
     lets the cards themselves balance across 2 masonry columns instead. */
  .om-proof         { display: block !important; columns: 2 !important;
                      column-gap: 8px !important; }
  .om-proof > *     { display: contents !important; }
  .om-proof > * > div { break-inside: avoid; margin: 0 0 8px !important; }
}

@media (max-width: 480px) {
  .om-banner-text { font-size: 12px !important; line-height: 17px !important; }
  .om-cta-row     { gap: 8px !important; }
  .om-cta-row [style*="var(--radius-pill)"] {
    font-size: 12px !important; line-height: 16px !important;
    padding: 10px 9px !important;
  }
  .om-burger[open] .om-burger-panel { min-width: 190px; }
}