/* Strongroom identity layer.
   Loaded after the mirrored runtime styles on every /strongroom/ page.
   Only tokens, chrome and typography change here; the studies' own
   rendering code is untouched. */

:root {
  --text-primary: #141414;
  --text-secondary: #5b5b57;
  --text-tertiary: #9a9a94;
  --text-muted: #85857f;
  --text-body: #262626;
  --border-subtle: #14141412;
  --border-ring: #1414142e;
  --border-line: #e2e2da;
  --bg-page: #f4f4f0;
  --bg-hover: #ebebe5;
  --bg-surface: #ffffff;
  --inline-highlight-color: #dcdbff;
  --highlight-text: #141414;
  --selection-bg: #d8d7ff;
  --selection-text: #141414;
  --scrollbar-thumb: #cfcfc7;
  --scrollbar-thumb-hover: #b0b0a7;
  --copy-ok: #2724d1;

  --sr-blue: #2724d1;
  --sr-blue-soft: #2724d11f;
  --sr-blue-tint: #eeeeff;
  --sr-ink: #141414;
  --sr-display: var(--font-mondwest, "PP Mondwest"), "PP Mondwest", ui-monospace, monospace;
  --sr-radius: 8px;
}

html {
  background: var(--bg-page);
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* ---------- header ---------- */

main h1 {
  font-family: var(--sr-display) !important;
  font-size: 44px !important;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--text-primary);
}

#strongroom-index-heading + noscript {
  display: none;
}

.sr-intro {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: -0.5rem;
}

.sr-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  margin: 0;
  font-family: var(--sr-display);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--text-tertiary);
}

.sr-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sr-blue);
  box-shadow: 0 0 0 3px var(--sr-blue-soft);
}

.sr-eyebrow b {
  font-weight: 400;
  color: var(--sr-blue);
}

.sr-intro p {
  margin: 0;
  max-width: 46ch;
  color: var(--text-secondary);
  word-spacing: normal;
}

.sr-intro p.sr-eyebrow {
  max-width: none;
  color: var(--text-tertiary);
  word-spacing: 0;
}

/* ---------- grid + cards ---------- */

/* deposits count down from the newest, so the oldest is always no.01 and
   a new deposit never renumbers the rest; strongroom.js sets the exact start */
main .grid {
  counter-reset: sr-item 62;
  row-gap: 2.75rem;
}

.vault-card {
  position: relative;
  counter-increment: sr-item -1;
}

.vault-card [class*="rounded-[12px]"],
.vault-card .sr-hero-frame {
  border-radius: var(--sr-radius);
  border-color: var(--border-line);
  box-shadow: 0 1px 2px #14141408;
  transition:
    border-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}

.vault-card:hover [class*="rounded-[12px]"],
.vault-card:hover .sr-hero-frame {
  border-color: var(--sr-blue);
  box-shadow:
    0 0 0 3px var(--sr-blue-soft),
    0 18px 40px -28px #2724d166;
}

/* catalogue chip in the top-left of every deposit */
.vault-card::before {
  content: "no." counter(sr-item, decimal-leading-zero) " \00b7 prompt";
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 20;
  padding: 3px 8px 2px;
  border: 1px solid var(--sr-blue-soft);
  border-radius: 999px;
  background: #ffffffe6;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--sr-blue);
  font-family: var(--sr-display);
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.25;
  word-spacing: 0;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 200ms var(--ease-out);
}

a.vault-card::before {
  content: "no." counter(sr-item, decimal-leading-zero) " \00b7 study";
}

/* the hero carries its own sketched stamp, so no chip there */
.vault-card.sr-hero::before {
  display: none;
}

.vault-card:hover::before {
  opacity: 1;
}

/* named-study rows */
a.vault-card .tabular-nums {
  font-family: var(--sr-display);
  font-size: 14px;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--text-tertiary);
}

a.vault-card .truncate {
  transition: color 160ms var(--ease-out);
}

a.vault-card:hover .truncate {
  color: var(--sr-blue);
}

/* copy-prompt control */
.vault-card button[type="button"] {
  border-color: transparent;
  border-radius: 999px;
  background: var(--sr-blue);
  color: #fff;
  font-family: var(--sr-display);
  font-size: 13px;
  letter-spacing: 0;
  word-spacing: 0;
  box-shadow: 0 1px 2px #2724d14d;
}

.vault-card button[type="button"]:hover {
  border-color: transparent;
  background: var(--sr-ink);
  color: #fff;
}

/* ---------- hero (newest deposit) ---------- */

.sr-hero {
  display: block;
  text-decoration: none;
  color: inherit;
}

.sr-hero-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1344 / 760;
  border: 1px solid var(--sr-blue-soft);
  background: #f7f7ff;
}

.sr-hero-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #f7f7ff;
  pointer-events: none;
}

.sr-hero-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  font-size: 14px;
}

@media (min-width: 640px) {
  .sr-hero-meta {
    font-size: 15px;
  }
}

.sr-hero-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  color: var(--text-primary);
  transition: color 160ms var(--ease-out);
}

.sr-hero:hover .sr-hero-title {
  color: var(--sr-blue);
}

.sr-tag {
  padding: 2px 8px 1px;
  border-radius: 999px;
  background: var(--sr-blue);
  color: #fff;
  font-family: var(--sr-display);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.3;
  word-spacing: 0;
}

.sr-hero-date {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-family: var(--sr-display);
  font-size: 14px;
  letter-spacing: 0;
  word-spacing: 0;
}

/* ---------- footer ---------- */

.sr-footer {
  font-family: var(--sr-display);
  font-size: 14px;
  letter-spacing: 0;
  word-spacing: 0;
  color: var(--text-tertiary);
}

.sr-footer a {
  color: var(--sr-blue);
  text-decoration-color: var(--sr-blue-soft);
  text-underline-offset: 3px;
}

.sr-footer a:hover {
  text-decoration-color: var(--sr-blue);
}

/* ---------- detail pages ---------- */

.sr-detail-eyebrow {
  margin: -2.25rem 0 0;
}

.vt-detail-body p[class*="text-[var(--text-primary)]"] {
  color: var(--text-body);
}

.vt-detail-body [class*="rounded-[12px]"] {
  border-radius: var(--sr-radius);
}

@media (prefers-reduced-motion: reduce) {
  .vault-card [class*="rounded-[12px]"],
  .vault-card .sr-hero-frame,
  .vault-card::before,
  a.vault-card .truncate,
  .sr-hero-title {
    transition: none;
  }
}