/* Blockchain Snapshots on AWS: developer landing page. Builds on brand/aws-brand.css. */

:root {
  --wrap: 75rem;
  --page-x: 2.5rem;
  --section-y: 6.5rem;
  --nav-h: 4rem;

  --accent: var(--aws-mint-700);
  --accent-strong: var(--aws-mint-600);
  --surface-alt: var(--aws-gray-100);
  --code-bg: var(--aws-gray-900);
  --code-text: var(--aws-gray-150);
  --code-muted: var(--aws-gray-450);
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23006B48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}
.theme-dark { --accent: var(--aws-mint-400); --accent-strong: var(--aws-mint-400); }

html { scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-size: 1rem; background: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--page-x); }
.section { padding: var(--section-y) 0; }
.section__head { display: grid; gap: var(--space-4); max-width: 48rem; margin-bottom: var(--space-7); }
.section__head .lead { color: var(--text-muted); }
.small { font-size: var(--fs-small); }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: var(--aws-gray-150);
  white-space: nowrap;
}
.theme-dark code { background: rgb(255 255 255 / 0.08); }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: #fff; color: var(--aws-gray-850); }
.skip:focus { left: var(--space-4); top: var(--space-4); }

:focus-visible { outline: 2px solid var(--aws-blue-500); outline-offset: 2px; }

/* Top navigation */
.topbar { position: sticky; top: 0; z-index: 20; background: rgb(15 20 26 / 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--nav-h); }
.topbar__home { display: flex; align-items: center; gap: 2.5rem; color: #fff; text-decoration: none; }
.topbar__name { font-weight: 500; font-size: 1.0625rem; text-wrap: balance; }
.topbar__links { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: var(--space-6); font-size: 0.9375rem; }
.topbar__links a { color: var(--aws-gray-300); text-decoration: none; }
.topbar__links a:hover { color: #fff; }
.topbar__gh { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.35rem 0.75rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 0.5rem; }
.topbar__gh svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Hero */
.hero { background: var(--aws-mint-1000) url("assets/bg-pattern-code-dark-green.jpg") center / cover no-repeat; padding: 6rem 0 6.5rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--space-8); align-items: center; }
.hero__copy { display: grid; gap: var(--space-5); }
.hero h1 { font-size: 4.5rem; line-height: 1.04; letter-spacing: -0.025em; }
.hero__lead { font-size: 1.375rem; line-height: 1.38; color: var(--aws-gray-200); max-width: 32rem; }
.cta-row { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: 1.0625rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.facts dt { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.05em; text-transform: uppercase; color: var(--aws-gray-400); margin-bottom: 0.15rem; }
.facts dd { margin: 0; font-size: 0.9375rem; }
.facts dd span { white-space: nowrap; }

.terminal { margin: 0; border-radius: 0.875rem; overflow: hidden; background: var(--aws-gray-950); border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 30px 80px rgb(0 0 0 / 0.45); }
.terminal__bar { display: flex; align-items: center; gap: var(--space-4); padding: 0.7rem 1rem; background: rgb(255 255 255 / 0.04); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.terminal__dots { display: flex; gap: 0.4rem; }
.terminal__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--aws-gray-650); }
.terminal__title { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--aws-gray-400); }
.terminal__body { margin: 0; padding: 1.25rem 1.375rem 1.5rem; white-space: pre-wrap; overflow-wrap: break-word; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.75; color: var(--aws-gray-300); }
.terminal__body code { padding: 0; background: none; font-size: inherit; white-space: inherit; }
.t-prompt { color: var(--aws-mint-400); user-select: none; }
.t-cmd { color: #fff; }
.t-out { color: var(--aws-gray-350); white-space: pre; }
.t-cursor { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 0.15em; vertical-align: -0.2em; background: var(--aws-mint-400); }
@media (prefers-reduced-motion: no-preference) { .t-cursor { animation: blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
.terminal__caption { padding: 0.6rem 1.375rem 0.9rem; border-top: 1px solid rgb(255 255 255 / 0.08); color: var(--aws-gray-450); }

.band { margin: 0; background: var(--aws-blue-900); }
.band img { width: 100%; aspect-ratio: 5 / 1; object-fit: cover; }

/* Why */
.features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.feature { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 2px solid var(--accent-strong); }
.feature h3 { font-size: 1.375rem; }
.feature p { color: var(--text-muted); }

/* Get started */
.start { background: var(--surface-alt); }
.callout { max-width: 52rem; margin: 0 0 var(--space-7); padding: var(--space-5) var(--space-6); background: #fff; border-radius: var(--radius-sm); box-shadow: inset 3px 0 0 var(--accent-strong); }
.steps { list-style: none; padding: 0; margin: 0; }
.step { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7) 0; border-top: 1px solid var(--rule); }
.step__head { display: grid; align-content: start; gap: var(--space-2); }
.step__n { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; color: var(--accent); }
.step__head h3 { font-size: 1.5rem; }
.step__body { display: grid; gap: var(--space-4); max-width: 50rem; }
.note { font-size: var(--fs-small); color: var(--text-muted); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); font-size: var(--fs-small); }
.checks li { padding-left: 1.6em; background: var(--check-icon) 0 0.15em / 1.05em no-repeat; }

.code { border-radius: 0.625rem; overflow: hidden; background: var(--code-bg); color: var(--code-text); }
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 2.5rem; padding: 0.35rem 0.5rem 0.35rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.code__bar .caption { color: var(--code-muted); }
.code pre { margin: 0; padding: 1rem 1.125rem 1.125rem; white-space: pre-wrap; overflow-wrap: break-word; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.65; }
.code pre code { padding: 0; background: none; color: inherit; font-size: inherit; white-space: inherit; }
.copy { font: 500 0.8125rem/1 var(--font-display); color: var(--aws-gray-200); background: transparent; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 0.375rem; padding: 0.4rem 0.7rem; cursor: pointer; }
.copy:hover { color: #fff; border-color: rgb(255 255 255 / 0.45); }

.tabs__list { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-4); }
.tabs__list [role="tab"] { font: 500 0.9375rem/1.2 var(--font-display); color: var(--text-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.5rem 0; cursor: pointer; }
.tabs__list [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-strong); }
.tabs__panel { display: grid; gap: var(--space-3); }
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel + .tabs__panel { margin-top: var(--space-4); }
.js .tabs__panel[hidden] { display: none; }

.disclosure summary { cursor: pointer; font-weight: 500; color: var(--link); list-style: none; display: inline-flex; align-items: center; gap: 0.6em; }
.disclosure summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.disclosure summary::-webkit-details-marker { display: none; }
/* Chevron drawn with two borders, so it centers on the text whatever the font: right when closed, down when open. */
.disclosure summary::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-0.12em, 0) rotate(-45deg); transition: transform 0.15s ease; }
.disclosure[open] summary::before { transform: translate(0, -0.15em) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .disclosure summary::before { transition: none; } }
.disclosure[open] summary { margin-bottom: var(--space-4); }
.disclosure .muted { margin-top: var(--space-3); }

/* Live catalog */
.catalog__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-5); }
.catalog__head .section__head { margin-bottom: 0; }
.filters { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }
.segmented { display: inline-flex; padding: 0.25rem; gap: 0.25rem; background: var(--aws-gray-150); border-radius: 0.625rem; }
.segmented button { font: 500 0.875rem/1.15 var(--font-display); color: var(--text-muted); background: none; border: 0; border-radius: 0.45rem; padding: 0.5rem 0.85rem; cursor: pointer; text-align: left; }
.segmented button small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); }
.segmented button[aria-checked="true"] { background: var(--aws-gray-850); color: #fff; }
.segmented button[aria-checked="true"] small { color: var(--aws-gray-350); }
.select { display: grid; gap: 0.3rem; }
.select select { font: 400 0.9375rem var(--font-display); color: var(--text); padding: 0.6rem 2.2rem 0.6rem 0.8rem; border: 1px solid var(--aws-gray-350); border-radius: 0.5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161D26' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 0.7rem center / 0.9rem no-repeat; appearance: none; }
.status { margin: 0 0 var(--space-5); }
.refresh { margin-left: 0.5em; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.refresh:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
.snap:focus { outline: none; }
.results { display: grid; gap: var(--space-4); }
.empty { color: var(--text-muted); }

.snap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; padding: var(--space-5) var(--space-6); border: 1px solid var(--aws-gray-250); border-radius: 0.875rem; background: #fff; }
.snap__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.snap__id { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; padding: 0; background: none; overflow-wrap: anywhere; }
.pill { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 0.3rem; background: var(--aws-mint-50); color: var(--aws-mint-800); box-shadow: inset 0 0 0 1px var(--aws-mint-200); white-space: nowrap; }
.pill--stream { background: var(--aws-blue-50); color: var(--aws-blue-800); box-shadow: inset 0 0 0 1px var(--aws-blue-200); }
.pill--archive { background: var(--aws-violet-50); color: var(--aws-violet-800); box-shadow: inset 0 0 0 1px var(--aws-violet-200); }
.snap__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.snap__meta dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.snap__meta dd { margin: 0.1rem 0 0; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.snap__extra { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--text-muted); }
.snap__extra span { white-space: nowrap; }

/* How it works */
.how { background: var(--aws-gray-950); }
.how__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-8); }
.how__head .section__head { margin-bottom: 0; }
.how__head .section__head .lead { color: var(--aws-gray-300); }
.how__art { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--aws-violet-100); }
.how__art img { width: 100%; aspect-ratio: 9 / 4; object-fit: cover; }
.flow { list-style: none; padding: 0; margin: 0 0 var(--space-8); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
.flow__step { position: relative; display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.flow__step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--aws-mint-400); }
.flow__n { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.06em; color: var(--accent); }
.flow__step h3 { font-size: 1.25rem; }
.flow__step p { font-size: var(--fs-small); color: var(--aws-gray-300); }
.protocols__title { font-size: 1.5rem; margin-bottom: var(--space-4); }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable thead th { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aws-gray-400); text-align: left; padding: 0 var(--space-5) var(--space-3) 0; border-bottom: 1px solid rgb(255 255 255 / 0.5); }
.ptable tbody th, .ptable td { padding: var(--space-4) var(--space-5) var(--space-4) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.ptable tbody th { width: 22%; }
.ptable td { color: var(--aws-gray-250); }

/* CLI */
.cli__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-7); align-items: start; }
.cli__usage { display: grid; gap: var(--space-4); }
.cli__sub { font-size: 1.25rem; margin-top: var(--space-4); }
.code--plain .code__bar { min-height: 2.25rem; }
.cli__opts { display: grid; gap: var(--space-6); }
.otable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.otable caption { text-align: left; padding-bottom: var(--space-3); border-bottom: 1px solid var(--text); }
.otable th, .otable td { padding: 0.7rem var(--space-4) 0.7rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: 400; }
.otable th { width: 42%; }
.otable th code { display: inline-block; margin: 0 0.2em 0.2em 0; }
.otable td { color: var(--text-muted); padding-right: 0; }

/* Where it runs */
.run { background: var(--surface-alt); }
.run__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.run__card { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); background: #fff; border-radius: var(--radius); }
.run__card h3 { font-size: 1.375rem; }
.run__card p { color: var(--text-muted); }
.run__card .cta { margin-top: var(--space-2); }

/* Integrity */
.trust { background: var(--aws-mint-1000) url("assets/bg-pattern-code-dark-green.jpg") center / cover no-repeat; }
.trust__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; }
.trust__quote { margin-top: var(--space-4); font-size: 3rem; line-height: 1.1; max-width: 16ch; }
.trust__body { display: grid; gap: var(--space-4); justify-items: start; }
.trust__body .muted { font-size: var(--fs-small); }

/* Footer */
.footer { background: var(--aws-gray-1000); padding: var(--space-8) 0 var(--space-6); font-size: var(--fs-small); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--rule); }
.footer__brand { display: grid; gap: var(--space-5); align-content: start; max-width: 28rem; }
.footer__logo { width: 3.375rem; }
.footer h3 { margin-bottom: var(--space-3); color: var(--aws-gray-400); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer a { color: var(--aws-gray-200); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__legal { margin-top: var(--space-5); color: var(--aws-gray-450); }

/* Responsive */
@media (max-width: 1080px) {
  .hero__grid, .how__head, .cli__grid, .trust__grid { grid-template-columns: minmax(0, 1fr); }
  .features, .run__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-7); }
  .snap { grid-template-columns: minmax(0, 1fr); }
  .topbar__links li:not(:last-child) { display: none; }
}
@media (max-width: 720px) {
  :root { --page-x: 1.25rem; --section-y: 4.5rem; }
  .hero { padding: 3.5rem 0 4rem; }
  .hero h1 { font-size: 3rem; }
  .hero__lead { font-size: 1.1875rem; }
  .features, .run__grid, .flow, .checks, .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .snap { padding: var(--space-5); }
  .snap__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__quote { font-size: 2.25rem; }
  .topbar__home { gap: 1.75rem; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: auto; }
  .ptable tbody th { border-bottom: 0; padding-bottom: 0; }
  .otable, .otable tbody, .otable tr, .otable th, .otable td { display: block; width: auto; }
  .otable caption { display: block; }
  .otable th { border-bottom: 0; padding-bottom: 0.2rem; }
  .otable code { white-space: normal; overflow-wrap: anywhere; }
}

@media print {
  .topbar, .skip, .copy, .t-cursor { display: none; }
  .js .tabs__panel[hidden] { display: grid; }
}