/*
 * me-modules-card.css: the ONE Me Module shelf card, shared by two pages.
 *
 * Added by SHA-102, 27 Oct 2026, and it is a MOVE and not new work: every rule
 * below came out of me-modules-mockup.css, where the card was written for
 * SHA-85. It moved because templates/me-modules-browse.php wanted the same card
 * and the alternative was a second card renderer with a second stylesheet,
 * which is the drift this workstream keeps paying for.
 *
 * Loaded beside the page's own sheet by $cinema_cards in inc/enqueue.php, with
 * a dependency on sr-scene-kit so it always prints after it.
 *
 * THE .srma-host SCOPE IS LOAD BEARING, not decoration. scene-kit.css sets
 * `.srk-page .srk-scene p { margin: 0 }` and similar two-class-plus-tag rules,
 * so a rule here written as `.srma-card-body p` would lose on specificity and
 * the card would render with the scene kit's paragraph metrics. Both templates
 * put srma-host on <main> and every rule here is scoped under it, which matches
 * that specificity and wins on order.
 *
 * NOTHING HERE IS A NEW VISUAL LANGUAGE. The card is .srpk-htile, the icon
 * chip is .srpk-ic, the grid is .srpk-tiles; this adds only the shelf's own
 * geometry on top of the kit.
 */

/*
 * auto-fill, so the column count follows the width and adding modules changes
 * the length of the shelf and nothing else. One column under about 520px.
 * The gap comes from .srpk-tiles and is the same in both directions, which is
 * what standing rule S4 measures across the cards.
 */
.srma-host .srma-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/*
 * FIXED HEIGHT. The shelf's whole claim is that a hundred modules is a longer
 * scroll of this one card, so the card may not grow for a longer line.
 *
 * 298 since the leading mark went to 64 (see below). 250 was sized around a
 * 48px icon and three clamped lines, and the card has to hold the WORST case
 * and not the common one: "HUMAN ONLY: Country Wars" is the only name on the
 * shelf that takes two lines, and at 268 it pushed its own category chip
 * through the bottom edge at 1440 while every other card looked right. 298 is
 * that card's two line name, three clamped lines and the chip clearing the
 * card's own 22px bottom padding with nothing to spare.
 *
 * It is also what lets the shelf pass S4 in a single column: cards sharing a
 * left edge have their icon pitch measured centre to centre, and only equal
 * heights give an even one.
 */
.srma-host .srma-card {
  height: 298px;
}

.srma-host .srma-card-body {
  gap: 10px;
}

/*
 * A CARD THAT IS A LINK. The catalogue's shelf jumps into the page; the
 * mockup's shelf goes nowhere. Both draw the same card, so the link state is
 * additive and changes nothing about the box S4 measures.
 */
.srma-host a.srma-card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.srma-host a.srma-card--link:hover,
.srma-host a.srma-card--link:focus-visible {
  transform: translateY(-2px);
}

/*
 * THE LEADING MARK, and why two kinds of card still measure the same.
 *
 * Six cards on the mockup's shelf are live modules and draw that module's OWN
 * app icon, committed under assets/img/me-modules-apps/. The other six there
 * are concepts with no artwork to draw and keep a Lucide glyph. Standing rule
 * S4 measures the drawn mark across the siblings, so those two kinds have to
 * come out the same size in the same place or the shelf reads as two shelves
 * that happen to be adjacent.
 *
 * So the geometry is stated once and both kinds obey it: a 64px box holding a
 * 56px mark. The artwork is 56px of full bleed art; the glyph is a 56px line
 * drawing on the box's tint. S4 measures 56x56 for all of them and the same
 * gap to the title, because that is genuinely what is drawn, not because the
 * numbers were arranged to satisfy it.
 *
 * 64 rather than the kit's 48 because a marketplace shelf is the one beat
 * whose job is to look like a wall of apps. At 48 the mark read as a bullet
 * beside the title rather than as the thing the card is about.
 *
 * 56 is also under S6's ceiling with room to spare: the committed artwork is
 * 192px square, and S6 wants at least twice the displayed size.
 */
.srma-host .srma-card .srma-ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

/*
 * The glyph fills the mark rather than sitting as a dot in the middle of it.
 * Scaled up from the kit's 24, the stroke would land near 4.7px and shout, so
 * it is thinned to hold the same optical weight it has everywhere else.
 */
.srma-host .srma-card .srma-ic svg {
  width: 56px;
  height: 56px;
  stroke-width: 1.1;
}

/*
 * A LIVE MODULE'S OWN APP ICON. The artwork is a full bleed square with its
 * own ground, so the box's tint and border come off: they would sit a second
 * ground behind a ground. The 1px inset ring and the drop shadow are what
 * make it read as an app tile rather than as a pasted image, and both are
 * drawn with shadows so neither can change the box the row is held to.
 *
 * object-fit: cover against a square source is a no-op today and is here for
 * the day a module ships art that is not square.
 */
.srma-host .srma-card .srma-ic--art {
  background: none;
  border: 0;
}

.srma-host .srma-card .srma-art {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 6px 18px rgba(3, 4, 26, 0.45);
}

/*
 * A COMPANY ICON FROM THE BRAND FILES (SHA-236, 3 Nov 2026).
 *
 * Where ShareRing's brand files hold an official app icon, that is the icon.
 * The registry's brand_icon field says which file and how it is painted; this
 * is the how. Nothing above changes: same 56px box, same radius, same ring
 * and shadow, so S4 still measures one mark size across the shelf.
 *
 * THE TILE. Both brand files are transparent where the icon is not. The
 * ShareProtect PNGs round their own corners and are clear outside the arc, so
 * with no tile the card's dark ground shows through four crescents INSIDE the
 * mark's own radius, which is SHA-88's failure on a different asset. The Me
 * Modules mark is a bare transparent mark with no ground at all.
 *
 * White and not navy, on both. The site's ground is near black, and navy
 * (#0A1F44) clears it at about 1.3:1: the tile sinks into the card and the
 * icon reads as a floating shape rather than as an app tile. White stands off
 * it. The navy tile is the light surface variant and no page here is light.
 *
 * The radius is restated because the catalogue's MODULE HEADS draw the same
 * image outside .srma-card and so never got the card's own radius: a square
 * white box is not what those four crescents are fixed with.
 */
.srma-host .srma-card .srma-art--tile-white,
.srma-host .srma-card .srma-art--tile-navy,
.srmb-root .srmb-mod-head .srma-art--tile-white,
.srmb-root .srmb-mod-head .srma-art--tile-navy {
  border-radius: 16px;
}

.srma-host .srma-card .srma-art--tile-white,
.srmb-root .srmb-mod-head .srma-art--tile-white {
  background: #fff;
}

.srma-host .srma-card .srma-art--tile-navy,
.srmb-root .srmb-mod-head .srma-art--tile-navy {
  background: #0a1f44;
}

/*
 * A MARK ON A TILE, rather than a full bleed icon.
 *
 * me-modules-mark-navy-transparent.svg is the puzzle piece alone, so it has
 * to be set on the tile at the proportions the app icons use: ICON-RULES.md
 * puts the company icons' artwork at about 62% of the tile, which on a 56px
 * mark is 34.7px with 10.6px of air each side. object-fit goes to contain
 * because the mark is wider than it is tall (111.241 by 100) and cover would
 * crop its ends off, silently, exactly the way SHA-69 cropped a phone face.
 */
.srma-host .srma-card .srma-art--mark,
.srmb-root .srmb-mod-head .srma-art--mark {
  box-sizing: border-box;
  padding: 10.6px;
  object-fit: contain;
}

/*
 * The line is clamped, not allowed to push the foot out of the card. Three
 * lines fits the shortest and the longest entry the registry holds today.
 */
.srma-host .srma-card-body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: none;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--srh-ink);
}

/* The category and the status, on the card's last line whatever the line did. */
.srma-host .srma-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.srma-host .srma-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(77, 138, 255, 0.3);
  background: rgba(77, 138, 255, 0.1);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The "In maintenance" status, the style the product pages use for "Coming soon". */
.srma-host .srma-soon {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: var(--srh-pale);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}