/* ------------------------------------------------------------------
   Article, node page, share tool
   ------------------------------------------------------------------ */

/* Article ------------------------------------------------------- */

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 2px;
  background: var(--signal);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .reading-progress { animation: progress linear both; animation-timeline: scroll(root); }
}

@keyframes progress { to { transform: scaleX(1); } }

.article__head {
  max-width: 62rem;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 7rem));
  text-align: center;
}

.article__head .eyebrow { justify-content: center; }

.back-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--ink-2); }
.back-link:hover { color: var(--ink); }

.article__title {
  margin-top: 2rem;
  font-size: var(--step-4);
  font-weight: 330;
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
  animation: rise-in 1s var(--ease-out) both;
}

.article__chapo {
  max-width: 40rem;
  margin: 2rem auto 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  font-weight: 330;
  line-height: 1.45;
  color: var(--ink-2);
  font-variation-settings: "SOFT" 100;
  animation: rise-in 1s 0.1s var(--ease-out) both;
}

.article__byline {
  margin-top: 2rem;
  color: var(--muted);
  animation: rise-in 1s 0.2s var(--ease-out) both;
}

.article__cover {
  width: min(100% - 2 * var(--gutter), 76rem);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: rise-in 1.2s 0.25s var(--ease-out) both;
}
.article__cover img { width: 100%; }

.prose {
  width: min(100% - 2 * var(--gutter), 40rem);
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.05rem + 0.3vw, 1.28rem);
  font-weight: 360;
  line-height: 1.68;
  letter-spacing: -0.003em;
  font-variation-settings: "SOFT" 30;
  font-optical-sizing: auto;
  color: var(--ink);
}

.prose > * + * { margin-top: 1.25em; }

.prose h2 {
  position: relative;
  margin-top: 2.6em;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.prose h3 { margin-top: 2em; font-size: var(--step-1); font-weight: 450; }

.prose .anchor {
  position: absolute;
  left: -1.4em;
  font-family: var(--font-sans);
  font-size: 0.7em;
  text-decoration: none;
  color: var(--signal);
  opacity: 0;
  transition: opacity 0.2s;
}
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }

.prose a { text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--moss); }
.prose strong { font-weight: 560; }
.prose em { font-variation-settings: "SOFT" 100, "WONK" 1; }

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.4em;
  border-left: 2px solid var(--signal);
  font-style: italic;
  color: var(--ink-2);
}

.prose hr {
  margin: 3em auto;
  border: 0;
  text-align: center;
  overflow: visible;
}
.prose hr::after { content: "·  ·  ·"; color: var(--signal); letter-spacing: 0.4em; font-size: 1.2rem; }

.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--signal); }

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--paper-2);
  font-size: 0.82em;
}

.prose pre {
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--panel-ink);
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; font-size: inherit; }

.prose img, .prose figure { border-radius: var(--radius); }
.prose figure { margin: 2.5em -8%; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose figcaption { margin-top: 0.7rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--muted); text-align: center; }

.prose table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.92rem; }
.prose th, .prose td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--rule); text-align: left; }

.prose > p:last-child em:only-child { color: var(--muted); font-size: 0.92em; }

.article__foot {
  max-width: 40rem;
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.article__share { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); }

.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }

.article__nav-link {
  display: grid;
  gap: 0.4rem;
  padding: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.3s, background-color 0.3s;
}
.article__nav-link:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.article__nav-link .mono { color: var(--muted); }
.article__nav-link--next { grid-column: 2; text-align: right; }
.article__nav-title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }

/* Node page ----------------------------------------------------- */

.node-title { font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; }
.page-head--node .pulse { margin-top: 2rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border-block: 1px solid var(--rule-strong);
}

.stat { padding: 1.6rem 1.5rem 1.8rem; background: var(--paper); }
.stat:first-child { padding-left: 0; }

.stat--hero { grid-column: span 2; grid-row: span 3; display: flex; flex-direction: column; justify-content: space-between; }
.stat--hero dd { font-size: clamp(3.6rem, 2rem + 8vw, 11rem); letter-spacing: -0.06em; color: var(--moss); }
.stat dd small { margin-left: 0.15em; font-size: 0.42em; letter-spacing: 0; color: var(--muted); }
.stat__date { font-style: italic; font-size: var(--step-2) !important; }
.stat__note { margin-top: 0.6rem; font-size: var(--step--1); color: var(--muted); }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat--hero { grid-column: 1 / -1; grid-row: auto; gap: 2rem; }
  .stat { padding: 1.3rem 1rem 1.4rem; }
  .stat:nth-child(even) { padding-left: 0; }
}

.node-map__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 980px) { .node-map__grid { grid-template-columns: 1fr; } }

.neighbors__table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.neighbors__table th, .neighbors__table td { padding: 0.75rem 0.4rem; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.neighbors__table thead th { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.neighbors__table .num { text-align: right; white-space: nowrap; }
.neighbors__table td { position: relative; }
.neighbors__name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.neighbors__role { font-size: var(--step--2); color: var(--muted); }
.snr--low { color: var(--signal); }

.bar {
  position: absolute;
  right: 0.4rem; bottom: 0.35rem;
  width: calc(var(--w) * 0.9);
  max-width: 90%;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--moss) 55%, transparent);
}

.activity { margin: 0; }
.activity svg { width: 100%; height: clamp(120px, 18vw, 200px); }
.activity__grid { stroke: var(--rule); stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.activity__area { fill: color-mix(in srgb, var(--moss) 13%, transparent); }
.activity__line {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .activity svg { animation: draw linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}

@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.activity__axis { display: flex; justify-content: space-between; margin-top: 0.6rem; color: var(--muted); text-transform: capitalize; }
.activity__axis span { flex: 1; }

.node-facts {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: 4rem;
}

@media (max-width: 900px) { .node-facts { grid-template-columns: 1fr; } }

.hops__list { display: grid; gap: 0.8rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.hops__list li { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: 1rem; align-items: center; }
.hops__bar { height: 8px; border-radius: 8px; background: var(--paper-2); overflow: hidden; }
.hops__bar span { display: block; height: 100%; width: var(--w); min-width: 2px; border-radius: inherit; background: var(--moss); }
.hops__list li:last-child .hops__bar span { background: var(--signal); }
.hops .num { text-align: right; }

.scopes__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1rem; }

.node-source { padding-top: 4rem; }
.node-source a { color: var(--ink); }
.node-source__key { margin-top: 0.5rem; overflow-wrap: anywhere; }
.node-source__key code { font-size: 0.95em; }

/* Share tool ---------------------------------------------------- */

.share-tool { display: grid; gap: 4rem; }

.share-form {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (max-width: 900px) { .share-form { grid-template-columns: 1fr; } }

.dropzone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(18rem, 42vw, 32rem);
  padding: 1.5rem;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 0%, transparent), transparent),
    var(--surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s, background-color 0.3s, transform 0.5s var(--ease-out);
}

.dropzone:hover { border-color: var(--moss); }
.dropzone:focus-within { border-color: var(--signal); }
.dropzone.is-over { border-color: var(--signal); border-style: solid; transform: scale(0.99); background: color-mix(in srgb, var(--signal) 7%, var(--surface)); }
.dropzone.has-error { border-color: var(--danger); }
.dropzone.has-file { border-style: solid; }

.dropzone__empty { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.dropzone__icon { color: var(--moss); }
.dropzone__icon .wave--1 { animation: wave 1.8s var(--ease-out) infinite; }
.dropzone__icon .wave--2 { animation: wave 1.8s 0.2s var(--ease-out) infinite; }
.dropzone__icon .wave--3 { animation: wave 1.8s 0.4s var(--ease-out) infinite; }
.dropzone__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 330; letter-spacing: -0.035em; }
.dropzone__hint { color: var(--muted); max-width: 26rem; }
.has-error .dropzone__hint { color: var(--danger); }

.dropzone__preview { display: grid; gap: 1rem; justify-items: center; width: 100%; }
.dropzone__preview img { max-height: 24rem; width: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.dropzone__file { color: var(--muted); }

.is-uploading .dropzone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--signal) 18%, transparent) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.share-form__fields { display: grid; gap: 1.75rem; }

.message-preview {
  display: grid;
  gap: 0.8rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.bubble--preview { justify-self: start; max-width: 100%; }
.message-preview__count { color: var(--muted); }

.my-shares__title { margin-bottom: 1.25rem; }
.my-shares__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.my-share {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.3s;
}
.my-share:hover { border-color: var(--rule-strong); }
.my-share__link { display: flex; gap: 0.8rem; align-items: center; text-decoration: none; }
.my-share__link img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 10px; background: var(--paper-2); }
.my-share__text { display: grid; min-width: 0; }
.my-share__text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-share__delete { justify-self: end; font-size: var(--step--2); color: var(--danger); }

/* Shared image page --------------------------------------------- */

.shared { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); }

.created {
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--panel-ink);
  animation: rise-in 0.9s var(--ease-out) both;
}

.created .eyebrow, .created .muted, .created .fineprint { color: var(--panel-muted); }
.created__eyebrow { gap: 0.6rem; }

.created__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; margin-top: 1.5rem; align-items: start; }

.created__url {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1rem + 4.2vw, 4.6rem);
  font-weight: 320;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.created__host { color: var(--panel-muted); }
.created__token { font-style: italic; color: var(--signal); font-variation-settings: "SOFT" 100, "WONK" 1; }

.created__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 1rem; }
.created .button--ghost { --fg: var(--panel-ink); border-color: color-mix(in srgb, var(--panel-ink) 30%, transparent); }
.created .button--ghost:hover { border-color: var(--panel-ink); }

.created__delete { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--panel-ink) 15%, transparent); display: grid; gap: 0.6rem; }
.created__delete-url { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; overflow-wrap: anywhere; }
.created__delete-url .link-button { color: var(--signal); }

.created__qr { display: grid; gap: 0.75rem; justify-items: center; }
.created__qr .qr { width: 11rem; height: 11rem; padding: 0.8rem; border-radius: var(--radius); background: var(--panel-ink); color: var(--panel); }

@media (max-width: 760px) {
  .created__grid { grid-template-columns: 1fr; }
  .created__qr { justify-items: start; }
}

.shared__figure { margin: 0; display: grid; gap: 1.25rem; justify-items: center; }

.shared__image {
  max-height: 80vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--paper-2);
  animation: rise-in 1s 0.1s var(--ease-out) both;
}

.shared__caption { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.shared__caption .link-arrow { margin-top: 0.5rem; }
.shared__text { font-family: var(--font-display); font-size: var(--step-2); font-style: italic; font-weight: 340; letter-spacing: -0.02em; }
.shared__foot { margin-top: 3rem; text-align: center; }
.shared__foot a { color: var(--ink); }

.confirm-thumb { width: 10rem; margin-top: 2rem; border-radius: var(--radius); }
.expired .button { margin-top: 2rem; }
.expired .lead { margin-top: 1.5rem; }
.auth .stack { margin-top: 2.5rem; }