/* ==========================================================================
   Home (index.html) — page-specific styles
   Shared tokens/components come from ../assets/design-system.css.
   ========================================================================== */

:root { --page-max: 44rem; }
/* Index accent is blue; the apps keep the shared green signal color.
   Must cover body too: it re-declares --brand and, being nearer than
   :root, wins inheritance for all page content. */
:root, :root[data-theme="dark"] { --brand: #7aa8f5; --brand-ink: #09090b; }
:root[data-theme="light"] { --brand: #1d4ed8; --brand-ink: #ffffff; }
body.dark-theme { --brand: #7aa8f5; --brand-ink: #09090b; }
body.light-theme { --brand: #1d4ed8; --brand-ink: #ffffff; }

/* Sticky footer: body is a column, main grows, footer sits at bottom. */
html, body { height: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
header.top, .foot { flex: none; width: 100%; }

main { flex: 1 0 auto; padding-top: 24px; padding-bottom: 48px; }

/* Home brand: plain logo, no button chrome. Caret is a bottom underline
   sitting right next to the text. */
.top .brand {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  height: auto;
  min-height: 38px;
  gap: 5px;
  align-items: center;
  font-size: 19px;
}
.top .brand:hover { background: transparent; color: var(--foreground); }
.top .brand #brandText { line-height: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* Underline block cursor: same width as a block, but a thick strip riding
   the baseline (translate keeps it clear of container centering). */
.top .brand .caret {
  width: 0.55em;
  height: 0.14em;
  margin-bottom: 0;
  flex: none;
  align-self: center;
  transform: translateY(0.43em);
}

/* Apps heading: bigger + bold, muted. */
.ledger-head {
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.02em;
  color: var(--muted-foreground);
  margin: 6px 0 18px 2px;
}

/* Apps directory tree: one stem from "Apps" fanning into each row,
   elbows rounded. */
/* App cards */
.rows {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#apps > li { position: relative; }
#apps > li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: -10px;
  width: 20px;
  height: calc(50% + 10px);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: 10px;
  pointer-events: none;
}
#apps > li:first-child::before {
  top: -20px;
  height: calc(50% + 20px);
}
#apps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -20px;
  top: calc(50% + 1px);
  bottom: -10px;
  border-left: 1px solid var(--border);
  pointer-events: none;
}

.row-link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 12px;
  align-items: center;
  text-decoration: none;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--card-foreground);
  box-shadow: var(--shadow-sm);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease;
}
.row-link:hover { background: var(--accent); }
.row-link:hover .rname { color: var(--brand); }

.glyph {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-grid;
  place-items: center;
}
.glyph svg { display: block; }
.glyph .atom-logo { width: 28px; height: 28px; }

/* Home atom logo: nucleus follows the theme (white on dark, black on
   light), cool pastel orbits + electrons. */
.atom-logo .lg-nuc { fill: var(--foreground); }
.atom-logo .lg-orb.lg-orb-frost { stroke: #8fb6f2; }
.atom-logo .lg-orb.lg-orb-glacier { stroke: #7ccfd6; }
.atom-logo .lg-orb.lg-orb-iris { stroke: #a6adf0; }
.atom-logo .lg-el.lg-el-frost { fill: #8fb6f2; }
.atom-logo .lg-el.lg-el-glacier { fill: #7ccfd6; }
.atom-logo .lg-el.lg-el-iris { fill: #a6adf0; }

/* Spinning globe thumbnail (NASA Blue Marble, public domain) */
.globe {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--muted);
  flex: none;
}
.tilt { position: absolute; inset: -24%; transform: rotate(-23.5deg); }
.strip { display: flex; height: 100%; width: max-content; animation: home-spin 9s linear infinite; }
.strip img { display: block; height: 100%; width: auto; pointer-events: none; }
.shade {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    inset -5px -6px 10px rgba(0, 0, 0, 0.38),
    inset 3px 4px 8px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
@keyframes home-spin { to { transform: translateX(-50%); } }

.rbody { min-width: 0; }
.rname {
  display: block;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.rsub { display: block; font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.row-link:hover .rsub { color: var(--accent-foreground); opacity: 0.75; }

/* Drag-fling state (see home.js): only the card (.row-link) moves,
   the directory lines live on the static <li> and stay put. */
.row-link { will-change: transform; }
.row-link.held { z-index: 5; }
/* Rearrangeable rows: siblings glide aside for the dragged row, which
   rides above them (tree lines move along, they live on the <li>). */
#apps > li { transition: transform 0.18s ease; }
#apps > li.src { transition: none; position: relative; z-index: 5; }

/* Footer: matrix canvas fills the whole footer as a background,
   text sits above it. */
.foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 14px 0 20px;
  color: var(--muted-foreground);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.foot-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  flex-wrap: wrap;
}
.foot-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 700px) {
  main { padding-top: 16px; }
  .row-link { padding: 10px 12px; }
}

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