/*
 * ShareLedger: the page's own layer.
 *
 * The scene kit supplies scenes, reveals, cards, buttons and the journey.
 * house-style.css supplies the ground. This file adds only the chain and the
 * two-sided split, which are the parts that belong to this page and no other.
 *
 * Selectors are scoped under .srk-page for the same reason ShareRing Me's are:
 * Elementor's Global Kit prints .elementor-kit-5 h1 and .elementor-kit-5 a
 * AFTER the theme's stylesheets, so anything at equal specificity loses the tie.
 */

.srl-root {
  max-width: none;
  padding: 0;
}

.srl-hero {
  padding-top: clamp(56px, 9vh, 130px);
}

.srk-page .srl-never h2,
.srk-page .srl-closer h2 {
  font-size: var(--srk-display-m);
}

/* ---------------------------------------------------------------------------
   The chain
   ------------------------------------------------------------------------ */

/*
 * ShareRing Me's device is a phone, because it is an app you can hold. This
 * page has no screen to show, so its device is the ledger itself: blocks
 * carrying a height, a hash and a receipt count, and nothing else. That absence
 * IS the argument, which is why the block has no room for a name or a document.
 */
.srl-chain {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

.srl-block {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "height meta"
    "hash   hash";
  gap: 6px 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 7%, rgba(3, 10, 26, 0.72));
  border: 1px solid color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 26%, transparent);
  backdrop-filter: blur(4px);
  /* Each block arrives a beat after the one above it, so the chain reads as
     something being appended rather than a static list. */
  animation: srl-block-in 620ms var(--srk-ease) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

/*
 * The link between blocks. Drawn on the pseudo-element rather than as a border
 * so it sits in the gap and does not affect layout.
 */
.srl-block + .srl-block::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 1px;
  height: 12px;
  background: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 42%, transparent);
}

.srl-block-h {
  grid-area: height;
  font-size: 13px;
  font-weight: 600;
  color: var(--srk-accent-live, var(--srh-accent));
  font-variant-numeric: tabular-nums;
}

.srl-block-meta {
  grid-area: meta;
  justify-self: end;
  font-size: 12px;
  color: var(--srh-ink-fade);
}

.srl-block-hash {
  grid-area: hash;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--srh-ink-soft);
  word-break: break-all;
}

@keyframes srl-block-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   What stays vs what goes on chain
   ------------------------------------------------------------------------ */

/*
 * The page's central claim, drawn rather than asserted. The two sides are
 * deliberately unequal: the vault side is long and the ledger side is two
 * items, because that asymmetry is the point.
 */
.srl-split {
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(32px, 5vh, 56px);
}

@media (min-width: 760px) {
  .srl-split { grid-template-columns: 1fr 1fr; align-items: start; }
}

.srl-side {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 18px;
  border: 1px solid rgba(77, 138, 255, 0.22);
  background: rgba(10, 36, 114, 0.32);
}

.srl-side-chain {
  border-color: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 34%, transparent);
  background: color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 8%, rgba(4, 26, 28, 0.6));
}

.srk-page .srl-side-label {
  display: block;
  font-size: var(--srk-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--srh-ink-soft);
  margin-bottom: 1em;
}

.srk-page .srl-side-chain .srl-side-label {
  color: var(--srk-accent-live, var(--srh-accent));
}

.srk-page .srl-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.srk-page .srl-side-list li {
  font-size: var(--srk-body);
  color: var(--srh-ink);
}

.srk-page .srl-side-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
  color: var(--srk-accent-live, var(--srh-accent));
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   Standards
   ------------------------------------------------------------------------ */

.srk-page .srl-standards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(28px, 4vh, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.srk-page .srl-standards li {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: var(--srk-body);
  font-weight: 600;
  color: var(--srh-pale);
  border: 1px solid color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 30%, transparent);
  background: rgba(10, 36, 114, 0.3);
}

/* ---------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------ */

.srl-narrow { max-width: 820px; }
.srl-centre { text-align: center; }
.srk-page .srl-centre p { margin-inline: auto; }
.srl-centre-actions { justify-content: center; }
.srl-closer { padding-bottom: clamp(110px, 16vh, 220px); }

@media (prefers-reduced-motion: reduce) {
  .srl-block { animation: none; }
}

/* ---------------------------------------------------------------------------
   Product suite cross-links
   ------------------------------------------------------------------------ */

/*
 * These were injected by WPCode snippet 991035 with their own light-canvas CSS
 * (#f8fafc cards, #0a1530 text) that assumed a white page. On a dark ground
 * that was unreadable, which is part of why the template owns them now.
 */
.srk-page .srl-suite {
  display: block;
  text-decoration: none;
  transition: border-color 260ms var(--srk-ease), transform 260ms var(--srk-ease);
}

.srk-page .srl-suite:hover {
  border-color: var(--srk-accent-live, var(--srh-accent));
  transform: translateY(-3px);
}

.srk-page .srl-suite h3 {
  font-size: var(--srk-body-l);
  color: var(--srh-pale);
}

@media (prefers-reduced-motion: reduce) {
  .srk-page .srl-suite { transition: none; }
  .srk-page .srl-suite:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   The explorer
   ---------------------------------------------------------------------------
   Three screen grabs from explorer.shareri.ng, side by side, each one a link to
   the explorer itself. They are evidence rather than decoration: the page spent
   eleven scenes saying the chain exists and never showed it running.

   CROPPED, deliberately, and this is the one place on the site where cropping a
   screenshot is right. These are 1390x868 dashboards; shown whole at a third of
   the width the text in them is illegible anyway, so the crop keeps the top of
   each view - the headline numbers and the first rows of the table - which is
   the part that reads at this size and the part worth recognising. The link
   goes to the live thing for anyone who wants to read it properly.
   ------------------------------------------------------------------------ */

.srl-explorer-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin: clamp(22px, 3vh, 34px) 0 0;
}

@media (min-width: 860px) {
  .srl-explorer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.srl-explorer-shot { margin: 0; }

.srl-explorer-shot a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  transition: border-color 240ms var(--srh-ease), transform 240ms var(--srh-ease);
}

.srl-explorer-shot a:hover,
.srl-explorer-shot a:focus-visible {
  border-color: var(--srk-accent-live, var(--srh-accent));
  transform: translateY(-3px);
}

.srl-explorer-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top center;
}

.srk-page .srl-explorer-shot figcaption {
  margin-top: clamp(8px, 1.2vh, 12px);
  color: var(--srh-ink-soft);
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.45;
}

/* Dated on purpose. Every number in these images moves; saying when they were
   taken is the difference between a screenshot and a claim.

   THREE CLASSES. scene-kit resets `.srk-page .srk-scene p { margin: 0 }`, two
   classes and an element, which beats a two-class rule - so written as
   `.srk-page .srl-explorer-note` this margin computed to 0 and the note sat
   welded to the caption above it, reading as a fourth line of that caption.
   Third time this trap has been paid for today: the same fault hit the
   partnerships company names and every industry lede. */
.srk-page .srk-scene .srl-explorer-note {
  margin-top: clamp(14px, 2vh, 20px);
  color: var(--srh-ink-fade);
  font-size: clamp(12px, 0.9vw, 14px);
}

/* The module names are literals from the chain, so they are set as code. */
.srk-page .srl-module {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: -0.01em;
  color: var(--srk-accent-live, var(--srh-accent));
}

@media (prefers-reduced-motion: reduce) {
  .srl-explorer-shot a,
  .srl-explorer-shot a:hover { transition: none; transform: none; }
}

/*
 * SIX CARDS IN TWO ROWS runs the scene 52px past the viewport at 1440, and on a
 * page whose chevron moves one screen at a time the overflow is exactly the part
 * the chevron skips. These cards carry a one-word heading and one sentence, so
 * they do not need the padding a three-up feature card needs; the same trade is
 * made for the eight-card grid in industry.css.
 */
@media (min-width: 860px) {
  .srk-page #c-onchain .srk-card {
    padding: clamp(16px, 1.5vw, 22px);
  }

  .srk-page #c-onchain .srk-card h3 {
    margin-bottom: 0.35em;
  }

  .srk-page #c-onchain .srk-card p {
    font-size: clamp(14px, 0.95vw, 15px);
  }
}

/*
 * The product suite row carries logotypes now, not type. sr_product_hero_logotype
 * emits the header's .srk-eyebrow--logo, which is sized for a hero, so it is
 * brought down to card scale here and its default eyebrow spacing removed.
 * --sr-hero-logo-k is the multiplier that block already uses; overriding it is
 * the supported way to rescale, because --sr-logo-h is computed and frozen at
 * :root and rebinding the cap in a scope does nothing.
 */
.srk-page .srl-suite__mark {
  display: block;
  margin-bottom: var(--space-2, 8px);
}

.srk-page .srl-suite .srk-eyebrow--logo {
  --sr-hero-logo-k: var(--srk-tile-logo-k, 1.15);
  margin: 0;
}

.srk-page .srl-suite p {
  margin: 0;
}

/*
 * The hero device is the explorer itself now, not the drawn chain. Framed like
 * the shots in "See it running" so the hero and the proof below read as the
 * same artefact, and linked, because a screenshot of something auditable should
 * let you go and audit it.
 */
.srl-hero-shot { margin: 0; }

.srl-hero-shot a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: border-color 240ms var(--srh-ease), transform 240ms var(--srh-ease);
}

.srl-hero-shot a:hover,
.srl-hero-shot a:focus-visible {
  border-color: var(--srk-accent-live, var(--srh-accent));
  transform: translateY(-3px);
}

.srl-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * The hero split was balanced for a PORTRAIT device: 762px of copy against a
 * 346px stage, which is right for a phone and wrong for a landscape dashboard.
 * At 346px the explorer was a dark rectangle with some coloured bars, which
 * proves nothing. The columns even up here, on the hero only, so the block
 * heights, the validator names and the transaction hashes are legible, because
 * being legible is the entire reason this screenshot is on the page.
 */
@media (min-width: 900px) {
  .srl-hero .srk-scene-split {
    /* 1.1fr keeps the CTAs above the fold at 1440x900: an even split cost the
       copy a line of lede and pushed them 22px under. */
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

/*
 * The copy column is narrower than it was, so the h1 and the lede take more
 * lines and the hero grew past the viewport, putting the CTAs 22px under the
 * fold at 1440x900. The hero's own top padding comes in rather than the type
 * coming down: the headline is the page's voice and the explorer is its proof,
 * and neither should shrink to make room for whitespace.
 */
@media (min-width: 900px) {
  .srl-hero { padding-top: clamp(28px, 3.5vh, 64px); }
}

/*
 * CORRECTION to the two blocks above, kept rather than folded in so the reason
 * survives. Narrowing the copy to 1fr made the explorer big but pushed the CTAs
 * to the very bottom of the viewport, where they sat INSIDE the fold and still
 * never appeared: .srk-reveal needs an element meaningfully in view before it
 * fires, so at 27px of clearance they stayed at opacity 0. A hero whose buttons
 * are invisible is worse than a smaller screenshot.
 *
 * 1.35fr gives the copy enough width to lose a line, which lifts the CTAs clear
 * of the reveal threshold, and still leaves the explorer far larger than the
 * 346px it had when it was a drawn chain.
 */
@media (min-width: 900px) {
  .srl-hero .srk-scene-split { grid-template-columns: 1.35fr 1fr; }
  .srl-hero { padding-top: clamp(40px, 6vh, 96px); }
}

/*
 * The evidence scenes (params, governance, contracts). Same framing as the hero
 * shot, because they are the same artefact: a capture of the explorer, linked
 * back to it. Split evenly rather than 1.35fr, because these scenes carry a
 * short lede instead of a display headline, so the copy needs less room and the
 * dense explorer tables need more.
 */
.srl-evidence-shot { margin: 0; }

.srl-evidence-shot a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  transition: border-color 240ms var(--srh-ease), transform 240ms var(--srh-ease);
}

.srl-evidence-shot a:hover,
.srl-evidence-shot a:focus-visible {
  border-color: var(--srk-accent-live, var(--srh-accent));
  transform: translateY(-3px);
}

.srl-evidence-shot img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .srl-evidence .srk-scene-split { grid-template-columns: 1fr 1.1fr; align-items: center; }
}

/*
 * Rohan, 2026-09-01: "Hero page of Shareledger main title text is too big. Make
 * it the same as the other pages."
 *
 * The font-size was ALREADY the same: 74.88px at 1440, --srk-display-l, exactly
 * what ShareRing Me, Me Modules and Prove render. What differs is the measure.
 * Those pages stand a portrait phone beside the copy and leave it 714px; this
 * one stands a landscape dashboard there, so the copy has 570px. The same type
 * in a column 80% as wide breaks to four lines instead of two, and four lines of
 * display type reads as much bigger even though it is not.
 *
 * So the fix is the size, because the column cannot go back without shrinking
 * the explorer to the point it stops being legible, which is the whole reason
 * the hero is a screenshot rather than a drawing. --srk-display-m is 62px here,
 * and 570 / 714 * 74.88 = 59.8, so it lands within 2px of matching the other
 * pages CHARACTER FOR CHARACTER PER LINE, which is what "the same" means to a
 * reader.
 */
.srk-page .srl-hero h1 {
  font-size: var(--srk-display-m);
}