/* ============================================================
   home.css — main site layout
   Hero, Now, What I do / Why, ACCA ledger, Quick stats,
   sticky Projects board, hidden admin panel.
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: clamp(8px, 2vw, 20px) 0 clamp(20px, 4vw, 38px);
}
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.55fr 0.95fr; align-items: center; }
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 540;
  margin: 0 0 14px;
}
.hero h1 .ln { display: block; }
.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 40;
}

.hero-sub {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--fg-soft);
  max-width: 46ch;
  margin: 0 0 22px;
  line-height: 1.55;
}
.hero-sub strong { color: var(--fg); font-weight: 600; }

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.hero-links .social-icon {
  width: 17px; height: 17px;
  vertical-align: -3px;
  margin-right: 7px;
}

/* Avatar panel — framed portrait with ledger frame */
.hero-portrait {
  position: relative;
  justify-self: center;
  width: min(320px, 80vw);
  aspect-ratio: 1;
}
.hero-portrait .frame {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  padding: 1.5px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  background: var(--card);
}
.hero-portrait .tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-portrait .tag .led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 8px var(--good);
}

/* ---------- Two-column page (content + sticky sidebar) ---------- */
.page {
  display: grid;
  gap: clamp(18px, 3vw, 30px);
  grid-template-areas: "board" "main";
  align-items: start;
}
@media (min-width: 1000px) {
  .page {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "main board";
  }
}
.page > main { grid-area: main; min-width: 0; }
.sidebar { grid-area: board; }
@media (min-width: 1000px) {
  .sidebar { position: sticky; top: 84px; align-self: start; }
}

/* Stack of section cards */
.stack { display: grid; gap: clamp(16px, 2.5vw, 22px); }

/* Section headers inside cards */
.card > .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 10px; }
.card h2:first-child { margin-top: 0; }

/* ---------- "Now" timeline ---------- */
.now-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.now-list li {
  position: relative;
  padding-left: 24px;
  color: var(--fg-soft);
}
.now-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 10px var(--glow);
}
.now-list li b { color: var(--fg); font-weight: 600; }
.now-list .num { color: var(--accent); font-size: 0.92em; }

/* ---------- Two-up grid (What I do / Why) ---------- */
.duo { display: grid; gap: clamp(16px, 2.5vw, 22px); }
@media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; } }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.feature-list li {
  position: relative;
  padding-left: 26px;
  color: var(--fg-soft);
}
.feature-list li::before {
  content: "→";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
}

.why-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--fg);
}
.why-quote em { font-style: italic; color: var(--accent); }

/* ---------- ACCA LEDGER (centerpiece) ---------- */
.ledger {
  position: relative;
  overflow: hidden;
}
.ledger .card-head .pill { font-size: 10.5px; }

.ledger-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card-2);
}
.ledger-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row .code {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.ledger-row .paper {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.3;
}
.ledger-row .paper .pname { color: var(--fg-soft); display: block; font-weight: 500; }
.ledger-row .state {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}

/* status flavours */
.ledger-row.passed { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 8%, transparent), transparent 40%); }
.ledger-row.passed .code { color: var(--good); }
.ledger-row .tick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--good);
  font-weight: 600;
}
.ledger-row .tick::after {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--good) 22%, transparent);
  color: var(--good);
  font-size: 11px;
}
.ledger-row.pending .state { color: var(--accent); }
.ledger-row.booked .state { color: var(--muted); }
.ledger-row .when { color: var(--muted); }

.ledger-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.ledger-foot .count { color: var(--fg-soft); }
.ledger-foot .count b { color: var(--good); }

/* faint watermark grid lines in ledger */
.ledger::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 47px, var(--grid-line) 47px 48px);
  pointer-events: none;
  opacity: 0.6;
}
.ledger > * { position: relative; z-index: 1; }

/* ---------- Quick stats ---------- */
.stat-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 15px;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.stat p { margin: 0; font-size: 14px; color: var(--fg-soft); line-height: 1.45; }
.stat p + p { margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ---------- PROJECTS BOARD (sidebar) ---------- */
.board-card { padding: clamp(16px, 2vw, 22px); }
.board-card + .board-card { margin-top: clamp(16px, 2.5vw, 22px); }

.board-card h2 {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
}
.board-card .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}

/* Completed list */
.completed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.completed-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.completed-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); box-shadow: 0 18px 36px -24px var(--glow); }

.completed-item .primary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 11px;
  text-decoration: none;
  color: inherit;
}
.completed-item .mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border));
}
.completed-item .body { min-width: 0; flex: 1; }
.completed-item .name {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.completed-item .name .ext { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.completed-item:hover .name .ext { color: var(--good); }
.completed-item .desc {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.completed-item .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 12px;
}
.completed-item .notes-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.completed-item .notes-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* In-progress cards (now plain links to notes) */
.inprogress-list { display: grid; gap: 12px; }

.wip-card {
  display: block;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-2);
  padding: 14px 15px 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.wip-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 20px 40px -26px var(--glow);
}
.wip-card .wip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.wip-card .wip-name {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 16px;
  margin: 0;
}
.wip-card .wip-desc {
  margin: 0 0 11px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.wip-card .chips { margin-bottom: 13px; }
.wip-card .meter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
}
.wip-card .meter-row .progress { flex: 1; }
.wip-card .meter-row .pct { color: var(--accent); font-weight: 600; min-width: 38px; text-align: right; }
.wip-card .go {
  position: absolute;
  top: 14px; right: 15px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
  transition: transform 0.18s ease, color 0.18s ease;
}
.wip-card:hover .go { transform: translateX(3px); color: var(--accent); }

.empty-note { color: var(--muted); font-size: 14px; font-family: var(--font-mono); }

/* ---------- Hidden admin panel ---------- */
.admin-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow: auto;
  z-index: 80;
}
.admin-backdrop[aria-hidden="false"] { display: flex; }

.admin-panel-box {
  width: min(940px, 100%);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-lift);
}
.admin-panel-box h3 { margin: 0 0 6px; }
.admin-panel-box > .muted { margin: 0 0 16px; font-size: 14px; }

.admin-list { display: grid; gap: 12px; margin-bottom: 16px; }
.admin-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--card-2);
}
.admin-row {
  display: grid;
  gap: 8px;
  grid-template-columns: 1.2fr 1fr 0.7fr 1fr;
  margin-bottom: 8px;
}
.admin-row.wide { grid-template-columns: 1fr 1fr; }
.admin-item input[type="text"],
.admin-item input[type="number"],
.admin-item select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.admin-item .admin-actions { justify-content: flex-start; margin-top: 2px; }

.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.admin-actions .btn { padding: 8px 13px; font-size: 12px; }

.admin-small { font-size: 12px; color: var(--muted); margin: 14px 0 0; font-family: var(--font-mono); }
.admin-small code {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

.admin-fab {
  position: fixed;
  right: 18px; bottom: 18px;
  border: 1px solid var(--border-strong);
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  padding: 11px 16px;
  cursor: pointer;
  z-index: 70;
  display: none;
  font-family: var(--font-mono);
  font-size: 13px;
  box-shadow: var(--shadow-card);
}
body[data-admin="1"] .admin-fab { display: inline-flex; }

#adminBanner { position: fixed; left: 16px; bottom: 16px; z-index: 71; display: none; align-items: center; gap: 8px; }