/* ==========================================================================
   Sealed Energy skeleton system
   Two jobs.
   1. .sk-boot is the static first paint. Every page is blank until the runtime
      resolves React from the CDN, so this stands in for the shell and is
      removed the moment #dc-root has content.
   2. .sk / .sk-* is the in-app vocabulary for anything that arrives late:
      map canvases, QR surfaces, geocoded results, list bodies.
   Dark is the default register. html.se-bright carries the paper values.
   ========================================================================== */

:root {
  --sk-page: #0a1210;
  --sk-block: #111614;
  --sk-line: rgba(255, 255, 255, .055);
  --sk-edge: rgba(255, 255, 255, .05);
  --sk-sheen: rgba(255, 255, 255, .07);
  --sk-radius: 18px;
  --sk-head: 104px;
}

html.se-bright {
  --sk-page: #eef1ee;
  --sk-block: #ffffff;
  --sk-line: rgba(11, 18, 16, .07);
  --sk-edge: rgba(11, 18, 16, .08);
  --sk-sheen: rgba(11, 18, 16, .05);
}

@media (max-width: 760px) {
  :root { --sk-head: 130px; }
}

/* Paint the document in the page register before any app stylesheet arrives,
   so the boot shell does not sit next to a white scrollbar gutter.
   Lowest specificity and earliest in the cascade, so every page sheet wins. */
html, body { background: var(--sk-page); }

/* --------------------------------------------------------------------------
   Shared shimmer
   -------------------------------------------------------------------------- */

.sk,
.sk-boot i,
.sk-boot span,
.sk-boot .sk-brand,
.sk-boot .sk-card,
.sk-boot .sk-row {
  position: relative;
  overflow: hidden;
  background: var(--sk-line);
  border-radius: 8px;
}

.sk::after,
.sk-boot i::after,
.sk-boot span::after,
.sk-boot .sk-brand::after,
.sk-boot .sk-card::after,
.sk-boot .sk-row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--sk-sheen) 50%, transparent 100%);
  animation: sk-sweep 1.5s ease-in-out infinite;
}

@keyframes sk-sweep {
  100% { transform: translateX(100%); }
}

/* Stagger so the surface reads as one material rather than a strobe. */
.sk-boot .sk-card:nth-child(2)::after,
.sk-boot .sk-row:nth-child(2)::after { animation-delay: .09s; }
.sk-boot .sk-card:nth-child(3)::after,
.sk-boot .sk-row:nth-child(3)::after { animation-delay: .18s; }
.sk-boot .sk-card:nth-child(4)::after,
.sk-boot .sk-row:nth-child(4)::after { animation-delay: .27s; }
.sk-boot .sk-card:nth-child(5)::after,
.sk-boot .sk-row:nth-child(5)::after { animation-delay: .36s; }
.sk-boot .sk-card:nth-child(6)::after,
.sk-boot .sk-row:nth-child(6)::after { animation-delay: .45s; }

/* After a long wait the sweep stops. A skeleton that shimmers forever
   claims progress that is not happening. */
.sk-boot.sk-stalled .sk-card::after,
.sk-boot.sk-stalled .sk-row::after,
.sk-boot.sk-stalled i::after,
.sk-boot.sk-stalled span::after,
.sk-boot.sk-stalled .sk-brand::after { animation: none; opacity: 0; }

.sk-boot .sk-stalled-note {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity .5s ease;
  font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, .38);
  background: none;
  border-radius: 0;
}
.sk-boot .sk-stalled-note::after { content: none; }
html.se-bright .sk-boot .sk-stalled-note { color: rgba(11, 18, 16, .42); }
.sk-boot.sk-stalled .sk-stalled-note { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sk::after,
  .sk-boot i::after,
  .sk-boot span::after,
  .sk-boot .sk-brand::after,
  .sk-boot .sk-card::after,
  .sk-boot .sk-row::after { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Boot shell
   -------------------------------------------------------------------------- */

.sk-boot {
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow: hidden;
  background: var(--sk-page);
  opacity: 1;
  transition: opacity .38s ease;
  pointer-events: none;
}

.sk-boot.sk-done {
  opacity: 0;
}

.sk-boot .sk-header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--sk-head);
  display: grid;
  grid-template-columns: minmax(180px, 232px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 clamp(12px, 1.4vw, 22px);
}

.sk-boot .sk-brand {
  height: 30px;
  width: 190px;
  border-radius: 6px;
}

.sk-boot .sk-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.08fr);
  gap: 10px;
  height: 80px;
}

.sk-boot .sk-nav i {
  display: block;
  height: 100%;
  border-radius: 14px;
  background: var(--sk-block);
  border: 1px solid var(--sk-edge);
}

.sk-boot .sk-main {
  position: absolute;
  inset: calc(var(--sk-head) + clamp(26px, 4vh, 50px)) 0 0 0;
  width: min(1400px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: clamp(18px, 2.2vw, 30px);
}

.sk-boot .sk-hero {
  display: grid;
  gap: 16px;
  align-content: start;
}

.sk-boot .sk-hero span { display: block; border-radius: 6px; }
.sk-boot .sk-eyebrow { width: 260px; height: 12px; }
.sk-boot .sk-title { width: min(640px, 62%); height: clamp(42px, 4.4vw, 70px); border-radius: 10px; }
.sk-boot .sk-title.is-short { width: min(430px, 42%); }
.sk-boot .sk-para { width: min(680px, 56%); height: 13px; }
.sk-boot .sk-para.is-short { width: min(520px, 42%); }

.sk-boot .sk-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--sk-cols, 4), minmax(0, 1fr));
}

.sk-boot .sk-card {
  height: var(--sk-card-h, 150px);
  border-radius: var(--sk-radius);
  background: var(--sk-block);
  border: 1px solid var(--sk-edge);
}

.sk-boot .sk-rows {
  display: grid;
  gap: 8px;
}

.sk-boot .sk-row {
  height: var(--sk-row-h, 118px);
  border-radius: var(--sk-radius);
  background: var(--sk-block);
  border: 1px solid var(--sk-edge);
}

/* --------------------------------------------------------------------------
   Per-page variants. One shell, nine shapes.
   -------------------------------------------------------------------------- */

.sk-boot[data-sk="home"] { --sk-cols: 3; --sk-card-h: clamp(420px, 34vw, 620px); }
.sk-boot[data-sk="home"] .sk-main { width: min(1224px, calc(100% - 64px)); }

.sk-boot[data-sk="start"] { --sk-cols: 2; --sk-card-h: clamp(220px, 26vh, 300px); }
.sk-boot[data-sk="start"] .sk-main { width: min(1224px, calc(100% - 56px)); }

.sk-boot[data-sk="journey"] { --sk-cols: 1; --sk-card-h: clamp(320px, 42vh, 520px); }
.sk-boot[data-sk="journey"] .sk-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.sk-boot[data-sk="journey"] .sk-main { width: min(1180px, calc(100% - 48px)); }

.sk-boot[data-sk="ledger"] { --sk-row-h: 94px; }
.sk-boot[data-sk="ledger"] .sk-main { width: min(1200px, calc(100% - 48px)); }

.sk-boot[data-sk="board"] { --sk-cols: 3; }
.sk-boot[data-sk="board"] .sk-grid { align-items: start; }
.sk-boot[data-sk="board"] .sk-card { height: clamp(300px, 44vh, 520px); }

.sk-boot[data-sk="detail"] { --sk-cols: 1; }
.sk-boot[data-sk="detail"] .sk-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.sk-boot[data-sk="detail"] .sk-card { height: clamp(280px, 34vw, 460px); }

.sk-boot[data-sk="networks"] { --sk-cols: 4; --sk-card-h: 132px; }

.sk-boot[data-sk="genesis"] { --sk-cols: 1; --sk-card-h: clamp(360px, 56vh, 640px); }
.sk-boot[data-sk="genesis"] .sk-main { width: min(1180px, calc(100% - 48px)); }

.sk-boot[data-sk="profile"] { --sk-cols: 3; --sk-card-h: 128px; }
.sk-boot[data-sk="profile"] .sk-main { width: min(1224px, calc(100% - 56px)); }

@media (max-width: 1100px) {
  .sk-boot[data-sk="home"],
  .sk-boot[data-sk="board"],
  .sk-boot[data-sk="networks"],
  .sk-boot[data-sk="profile"] { --sk-cols: 2; }
  .sk-boot[data-sk="journey"] .sk-grid,
  .sk-boot[data-sk="detail"] .sk-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .sk-boot .sk-header { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; padding: 10px 14px; }
  .sk-boot .sk-nav { grid-template-columns: repeat(4, minmax(150px, 1fr)); height: 60px; overflow: hidden; }
  .sk-boot .sk-main { width: calc(100% - 32px); inset: calc(var(--sk-head) + 20px) 0 0 0; gap: 14px; }
  .sk-boot .sk-title { width: 88%; }
  .sk-boot .sk-title.is-short { width: 64%; }
  .sk-boot .sk-para,
  .sk-boot .sk-para.is-short { width: 94%; }
  .sk-boot[data-sk] { --sk-cols: 1; }
  .sk-boot[data-sk] .sk-grid { grid-template-columns: minmax(0, 1fr); }
  .sk-boot[data-sk="home"] { --sk-card-h: 300px; }
  .sk-boot[data-sk="board"] .sk-card { height: 260px; }
}

/* --------------------------------------------------------------------------
   In-app skeletons for content that arrives after mount.
   Applied by skeleton.js to map hosts, QR surfaces and empty list bodies,
   and removable by hand with the same class.
   -------------------------------------------------------------------------- */

.sk-hold {
  position: relative;
}

.sk-hold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--sk-block);
  border: 1px solid var(--sk-edge);
  pointer-events: none;
}

.sk-hold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, var(--sk-sheen) 50%, transparent 100%);
  animation: sk-sweep 1.5s ease-in-out infinite;
  pointer-events: none;
}

.sk-hold.sk-released::before,
.sk-hold.sk-released::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .sk-hold::after { animation: none; opacity: 0; }
}

/* Inline text skeletons, for single values that resolve late. */
.sk-text {
  display: inline-block;
  min-width: 5ch;
  height: 1em;
  vertical-align: -.15em;
  border-radius: 4px;
  color: transparent !important;
}

/* Line and circle primitives, for anything hand-built later. */
.sk-line-1 { height: 10px; border-radius: 5px; }
.sk-line-2 { height: 13px; border-radius: 6px; }
.sk-circle { border-radius: 50%; aspect-ratio: 1; }