/*
 * me-modules-browse.css: the Me Modules catalogue at /me-modules/browse/.
 *
 * SHA-102, 27 Oct 2026. Loads only on templates/me-modules-browse.php, through
 * the $cinema_pages map in inc/enqueue.php, and sits on top of house-style.css,
 * scene-kit.css, product-kit.css and me-modules-card.css.
 *
 * THE SHELF CARD IS NOT HERE. It is me-modules-card.css, shared with the
 * marketplace mockup, because the two pages draw the same card and a second
 * copy of it is the drift this workstream keeps paying for. What is here is
 * only what a MODULE SCENE needs that nothing else in the theme draws: the
 * module's head, its four parts, its actions, and the three steps at the end.
 *
 * NOTHING HERE IS A NEW VISUAL LANGUAGE. The icon chip is .srpk-ic, the
 * buttons are .srk-btn, the type and the ground come from the scene kit.
 */

/* ---------------------------------------------------------------- The scenes */

/*
 * Not a flow page (see the template's head note), so a scene is sized by its
 * content and the page scrolls like a document. The scene kit's own padding
 * already separates them; this only keeps the last one off the footer.
 */
.srmb-root .srmb-scene:last-of-type {
  padding-bottom: calc(var(--srk-scene-gap) * 1.4);
}

/*
 * The scene ahead of the selector, because scene-kit.css sets
 * `.srk-page .srk-scene p { margin: 0 }` and that is two classes and a tag.
 * Without it this margin is dropped on specificity and the note sits against
 * whatever is above it.
 */
.srmb-root .srk-scene .srmb-note {
  margin-top: 1.4em;
  color: var(--srh-ink);
  opacity: 0.78;
  font-size: clamp(14px, 1vw, 16px);
}

/*
 * A MODULE SCENE is a target of a jump link from the shelf, so it needs scroll
 * margin or the sticky-free cinema header still lands the heading under the
 * top edge on the first press.
 */
.srmb-root .srmb-mod {
  scroll-margin-top: 24px;
}

/* ------------------------------------------------------- The module's head */

/*
 * The app's own mark beside its name, at the same 64/56 geometry the shelf card
 * uses, so the card a reader tapped and the scene they land on carry the same
 * mark at the same size. Two children only, so standing rule S4 never groups
 * this: a group is three or more siblings.
 */
.srmb-root .srmb-mod-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0.4em;
}

.srmb-root .srmb-mod-head .srmb-mod-ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  flex: 0 0 auto;
}

.srmb-root .srmb-mod-head .srmb-mod-ic svg {
  width: 56px;
  height: 56px;
  stroke-width: 1.1;
}

/*
 * Every module icon in a head gets the store card's 16px radius, not only the
 * ones on a white or navy tile. The full bleed icons (all five module tiles,
 * ShareProtect's included since v2) were square here and rounded on the store.
 */
.srmb-root .srmb-mod-head .srma-art {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.srmb-root .srmb-mod-title h2 {
  margin: 0;
}

.srmb-root .srmb-mod-tags {
  margin-top: 8px;
}

/*
 * THE UNAPPROVED COPY FLAG. Loud on purpose: unapproved copy that looks like
 * the rest of the page is how unapproved copy gets published. Amber rather than
 * the page's accent, because the accent reads as emphasis and this is a
 * warning. It goes when the copy is approved, and so does the row's
 * copy_approved false in data/me-modules-apps.json.
 */
.srmb-root .srk-scene .srmb-unapproved {
  margin: 1.1em 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 183, 77, 0.45);
  background: rgba(255, 183, 77, 0.1);
  color: #ffd79a;
  font-size: clamp(13px, 0.9vw, 15px);
  max-width: 62ch;
}

/* ------------------------------------------------------- The four parts */

/*
 * memodules.com's own four questions, in its own order. A grid rather than a
 * run of headings, so the four read as one block of four answers and not as
 * four sections of the page.
 *
 * ONE `gap` IN BOTH DIRECTIONS, which is what standing rule S4 measures across
 * the four siblings. They carry no leading icon, so the icon half of S4 has
 * nothing to measure here and the gaps are the whole of it.
 */
.srmb-root .srmb-parts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 1.6em;
}

@media (min-width: 900px) {
  .srmb-root .srmb-parts {
    grid-template-columns: 1fr 1fr;
  }
}

.srmb-root .srmb-part {
  border-left: 2px solid rgba(127, 178, 255, 0.28);
  padding-left: 16px;
}

.srmb-root .srmb-part h3 {
  margin: 0 0 0.35em;
  font-size: clamp(15px, 1.05vw, 17px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--srk-accent-live, var(--srh-accent));
}

.srmb-root .srk-scene .srmb-part p {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--srh-ink);
}

/* ---------------------------------------------------------- The actions */

.srmb-root .srmb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 1.8em;
}

/*
 * The host line sits on its own row under the buttons at narrow widths and
 * beside them once there is room. `flex-basis: 100%` below the breakpoint
 * rather than a separate block, so the flex gap is the only spacing in play.
 */
.srmb-root .srk-scene .srmb-host {
  flex: 1 0 100%;
  margin: 0;
  font-size: clamp(13px, 0.9vw, 14px);
  color: var(--srh-pale);
}

@media (min-width: 700px) {
  .srmb-root .srk-scene .srmb-host {
    flex: 0 1 auto;
    margin-left: 6px;
  }
}

.srmb-root .srmb-host code {
  font-size: 0.95em;
  color: var(--srh-ink);
}

/* ------------------------------------------------- The deep link's square */

/*
 * DESKTOP ONLY, and not as a nicety. The QR carries the same deep link as the
 * button beside it, and the reader who needs a square is the one at a desktop
 * whose phone is the thing that can open the module. A phone cannot scan its
 * own screen, so below 900px the square is not drawn at all rather than shown
 * smaller: at 390 it would push the host line and the next module down for no
 * reader who could use it.
 *
 * display: none and not visibility, so nothing reserves its box; and the
 * <figure> is still in the markup, because the alt text names the address the
 * code encodes and that is worth having at any width.
 */
.srmb-root .srmb-qr {
  display: none;
}

@media (min-width: 900px) {
  .srmb-root .srmb-qr {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
  }

  .srmb-root .srmb-qr-img {
    display: block;
    width: 150px;
    height: 150px;
    /* The quiet zone is white and painted by the SVG itself: no padding here. */
    border-radius: 10px;
    background: #fff;
  }

  .srmb-root .srk-scene .srmb-qr figcaption {
    margin: 0.6em auto 0;
    max-width: 18ch;
    font-size: 13px;
    line-height: 1.35;
    color: var(--srh-pale);
  }
}

/* ------------------------------------------------------- The three steps */

.srmb-root .srmb-steps {
  list-style: none;
  margin: 1.8em 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}

@media (min-width: 1000px) {
  .srmb-root .srmb-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * A numeral, not an icon. Three siblings with a leading ICON would have to hold
 * an even icon pitch and an even icon to text gap under standing rule S4, and
 * rows whose text wraps to different depths cannot; a drawn numeral is not an
 * svg or an img, so S4 measures the gaps alone, which one grid gap settles.
 * The mockup's outcome rows carry the same note for the same reason.
 */
.srmb-root .srmb-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.srmb-root .srmb-num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(44, 229, 167, 0.4);
  background: rgba(44, 229, 167, 0.1);
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 700;
  font-size: 15px;
}

.srmb-root .srmb-step-body h3 {
  margin: 0 0 0.3em;
  font-size: clamp(16px, 1.1vw, 18px);
}

.srmb-root .srk-scene .srmb-step-body p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--srh-ink);
}