/* ==========================================================================
   plugin-responsive.css — Phase 5 of docs/RESPONSIVE_APP_UI_PLAN.md
   Responsive coverage for the five custom plugins.

   Kept in the theme rather than edited into each plugin, for three reasons:
   the plugins are separately versioned and an update would discard the work;
   the fixes need the theme's tokens and app-shell metrics; and keeping them
   together means one place to look when a surface misbehaves.

   Plugin CSS that is already correct is left alone. This file only covers
   what the audit found missing:

     excelman-qa          1 media query across 5 shortcode surfaces
     excelman-helper-bot  2 media queries
     excel-man-ai         13 - mostly fine, phone sheet behaviour added
     excelman-certificates 11 - fine; only the print/share row needed work
     excelman-ads         no stylesheet at all
   ========================================================================== */

/* ==========================================================================
   1. excelman-qa
   The largest gap: 5 shortcode surfaces (list, ask, categories, my-questions,
   search) with a single 640px media query between them.
   ========================================================================== */

/* --- Toolbar: search + tabs ------------------------------------------- */
@media (max-width: 767px) {
  .em-qa-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  /* flex-basis:320px plus the button overflows a 360px phone. */
  .em-qa-searchbox {
    flex: 1 1 auto;
    min-width: 0;
  }

  .em-qa-searchbox input[type="search"] {
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Tabs scroll horizontally rather than wrapping into stacked rows, which
     is how native segmented controls behave when they overflow. */
  .em-qa-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-1);
  }

  .em-qa-tabs::-webkit-scrollbar {
    display: none;
  }

  .em-qa-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }
}

/* --- Question rows ----------------------------------------------------- */
/* The plugin's own 640px rule already stacks these. Extend the treatment to
   the full phone range so 640-767px is not left with the desktop layout. */
@media (min-width: 641px) and (max-width: 767px) {
  .em-qa-item,
  .em-qa-question,
  .em-qa-answer {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .em-qa-stats {
    flex-direction: row;
    flex: 0 0 auto;
  }

  .em-qa-stat {
    flex: 1;
  }

  .em-qa-votecol {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
  }

  .em-qa-vote {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
  }

  .em-qa-accept {
    margin-top: 0;
  }
}

/* Long titles, URLs and pasted formulas must not widen the row. */
.em-qa-title,
.em-qa-body,
.em-qa-comment-body,
.em-qa-byline {
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-width: 0;
}

.em-qa-body pre,
.em-qa-body code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* --- Category grid ----------------------------------------------------- */
@media (max-width: 479px) {
  /* minmax(230px,1fr) leaves an awkward gutter at 360px. */
  .em-qa-catgrid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

/* --- Ask / answer forms ------------------------------------------------ */
@media (max-width: 767px) {
  .em-qa-form,
  .em-qa-answerform {
    gap: var(--sp-4);
  }

  .em-qa-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--sp-3);
  }

  /* The primary action goes full width and sits last in the DOM order but
     first visually, which is the phone convention. */
  .em-qa-form-actions .em-qa-btn--primary {
    width: 100%;
    justify-content: center;
  }

  .em-qa-comment-form {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .em-qa-comment-form .em-qa-btn {
    align-self: flex-end;
  }
}

/* --- Chips and badges -------------------------------------------------- */
@media (max-width: 767px) {
  .em-qa-chips,
  .em-qa-answer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .em-qa-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ==========================================================================
   2. excelman-helper-bot
   Only 2 media queries. The panel is the main gap: a floating desktop widget
   over a phone layout reads as a web page, not an app.
   ========================================================================== */
@media (max-width: 767px) {
  /* Full-screen sheet rather than a floating card. */
  .emhb-root[data-open="true"] .emhb-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 88dvh;
    max-height: 88dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding-bottom: var(--safe-bottom);
    z-index: var(--z-sheet);
  }

  /* With the panel open the launcher would float over the sheet. */
  .emhb-root[data-open="true"] .emhb-launcher {
    display: none;
  }

  /* The greeting bubble competes with the tab bar for the same corner. */
  .emhb-greet {
    max-width: min(210px, calc(100vw - 96px));
  }
}

/* The launcher clears the tab bar; see app-shell.css for the offset. The
   panel, being a sheet pinned to the bottom edge, must NOT be offset - it
   covers the tab bar deliberately while open. */
@media (max-width: 767px) {
  .emhb-root[data-open="true"] {
    bottom: 0;
  }
}

/* ==========================================================================
   3. excel-man-ai — chatbot and Test Your Knowledge
   13 media queries; mostly sound. What was missing is phone sheet behaviour
   for the chat surface and safe-area clearance for its fixed composer.
   ========================================================================== */
@media (max-width: 767px) {
  /* A chat composer pinned to the bottom must clear both the tab bar and the
     home indicator, or the send button sits under them. */
  .em-chat-composer,
  .em-ai-composer,
  .excel-ai-composer {
    padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  }

  /* The chat log should fill the screen between bar and composer rather than
     scrolling the whole page. */
  .em-chat-log,
  .em-ai-log {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Test Your Knowledge: answer options are the primary control. */
  .em-tyk-option,
  .em-tyk-answer,
  .em-tyk-choice {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
  }

  .em-tyk-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .em-tyk-actions > * {
    width: 100%;
  }

  /* Option grids go single-column: two columns of answer text at 360px
     truncate mid-word. */
  .em-tyk-options,
  .em-tyk-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet: the quiz reads better as a centred column than full-bleed. */
@media (min-width: 768px) and (max-width: 1199px) {
  .em-tyk-card,
  .em-tyk-quiz {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   4. excelman-certificates
   11 media queries and broadly fine. The certificate itself is a fixed-ratio
   document, so it is scaled rather than reflowed.
   ========================================================================== */
@media (max-width: 767px) {
  /* A certificate is a landscape document; on a phone it scrolls inside its
     own box rather than widening the page. */
  .em-cert-preview,
  .em-cert-canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .em-cert-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }

  .em-cert-actions > * {
    width: 100%;
    min-height: var(--tap-min);
    justify-content: center;
  }
}

/* ==========================================================================
   5. excelman-ads
   No stylesheet of its own, so slots inherit theme CSS. Two requirements:
   reserve space so inserting an ad does not shift the layout, and never
   overlap the tab bar.
   ========================================================================== */
.excelman-ad,
.em-ad-slot,
.adsbygoogle {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 767px) {
  /* Reserving a minimum height keeps CLS down: without it the page reflows
     when the ad arrives. */
  .em-ad-slot {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* An anchored/sticky ad unit must sit above the tab bar, never over it. */
  .em-ad-slot--sticky,
  .em-ad-anchor {
    position: fixed;
    bottom: var(--tabbar-total);
    left: 0;
    right: 0;
    z-index: calc(var(--z-tabbar) - 1);
  }
}