/* Eleutheromania — public face. Layers on app.css tokens (Lamplight Ledger). */

.section-label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-deep); margin-bottom: 1.2rem;
}

/* performance strip — percentages & counts only, never dollars */
.perf {
  max-width: 760px; margin: 4vh auto 2vh; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.2rem;
}
.perf-stat {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem 1.3rem; text-align: center;
}
.perf-stat .pn {
  font-family: var(--serif-display); font-weight: 600; font-size: 2.3rem; line-height: 1;
  color: var(--brass-lit); font-variation-settings: "opsz" 90;
}
.perf-stat .pn.gain { color: var(--gain); }
.perf-stat .pn.loss { color: var(--loss); }
.perf-stat .pl {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--parch-faint); margin-top: .6rem;
}

/* holdings — ticker + % chips */
.holdings-wrap { max-width: 760px; margin: 3vh auto; padding: 0 24px; }
.holdings { display: flex; flex-wrap: wrap; gap: .7rem; }
.holding {
  display: flex; align-items: baseline; gap: .6rem;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 999px; padding: .5rem 1rem;
}
.holding .h-tk { font-family: var(--serif-display); font-weight: 600; font-size: 1rem; color: var(--parch); }
.holding .h-opt { font-family: var(--mono); font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); vertical-align: middle; }
.holding .h-pct { font-family: var(--mono); font-size: .82rem; color: var(--parch-dim); }
.holding.gain { border-color: rgba(134,163,108,.35); }
.holding.gain .h-pct { color: var(--gain); }
.holding.loss { border-color: rgba(192,121,92,.32); }
.holding.loss .h-pct { color: var(--loss); }

@media (max-width: 600px) {
  .perf-stat .pn { font-size: 1.9rem; }
}

/* ---------- top nav (multi-page) ---------- */
.topnav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .6rem 1rem; max-width: 880px; margin: 0 auto; padding: 1.4rem 24px .9rem;
  border-bottom: 1px solid var(--line);
}
.brandmark {
  font-family: var(--serif-display); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em;
  color: var(--brass-lit); text-decoration: none; font-variation-settings: "opsz" 70;
}
.navlinks { display: flex; flex-wrap: wrap; gap: .3rem; }
.navlinks a {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--parch-faint); text-decoration: none; padding: .4rem .7rem; border-radius: 7px;
  transition: color .18s, background .18s;
}
.navlinks a:hover { color: var(--parch); }
.navlinks a.on { color: var(--brass-lit); background: var(--ink-2); }

/* ---------- page header (non-home pages) ---------- */
.pagehead { max-width: 760px; margin: 6vh auto 3vh; padding: 0 24px; text-align: center; }
.pagehead .section-label { margin-bottom: .5rem; }
.pagetitle {
  font-family: var(--serif-display); font-weight: 600; font-size: clamp(2rem, 6vw, 3.1rem);
  color: var(--parch); line-height: 1.05; font-variation-settings: "opsz" 120;
}

/* ---------- allocation by theme (public, %-only) ---------- */
.talloc { max-width: 760px; margin: 2vh auto 4vh; padding: 0 24px; }
.talloc-bar {
  display: flex; height: 34px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink); margin-bottom: 1.6rem;
}
.talloc-seg { height: 100%; min-width: 2px; transition: filter .15s; }
.talloc-seg:hover { filter: brightness(1.18); }
.seg-unc { background: repeating-linear-gradient(45deg, var(--line-2) 0 6px, var(--ink-3) 6px 12px); }
.seg-cash { background: var(--ink-3); }

.theme-rows { display: flex; flex-direction: column; gap: .2rem; }
.theme-row {
  display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center;
  gap: .9rem; padding: .8rem .4rem; border-bottom: 1px solid var(--line);
}
.theme-row:last-child { border-bottom: 0; }
.tr-sw { width: 12px; height: 12px; border-radius: 4px; }
.tr-name { font-family: var(--serif-display); font-size: 1.12rem; font-weight: 600; color: var(--parch); }
.tr-tk { font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; color: var(--parch-faint); grid-column: 2; justify-self: start; }
.theme-row { grid-template-areas: "sw name alloc pnl" "sw tk alloc pnl"; }
.tr-sw { grid-area: sw; } .tr-name { grid-area: name; } .tr-tk { grid-area: tk; }
.tr-alloc { grid-area: alloc; font-family: var(--serif-display); font-size: 1.5rem; font-weight: 600; color: var(--brass-lit); justify-self: end; }
.tr-pnl { grid-area: pnl; font-family: var(--mono); font-size: .8rem; justify-self: end; min-width: 4rem; text-align: right; }
.tr-pnl.gain { color: var(--gain); } .tr-pnl.loss { color: var(--loss); }
.muted-row .tr-name { color: var(--parch-faint); font-style: italic; }

/* ---------- contact form ---------- */
.contact { max-width: 560px; margin: 1vh auto 5vh; padding: 0 24px; display: flex; flex-direction: column; gap: .9rem; }
.cf-input {
  width: 100%; background: var(--ink); color: var(--parch);
  border: 1px solid var(--line-2); border-radius: 10px; padding: .8rem 1rem;
  font-family: var(--serif-body); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
.cf-input:focus { outline: none; border-color: var(--brass-deep); box-shadow: 0 0 0 3px rgba(199,154,75,.14); }
textarea.cf-input { resize: vertical; line-height: 1.55; }
.cf-send {
  align-self: flex-end; cursor: pointer; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 10px; padding: .7rem 1.5rem;
  border: 1px solid var(--brass-deep); color: #1c1306; font-weight: 600;
  background: linear-gradient(180deg, var(--brass), var(--brass-deep));
}
.cf-send:hover { filter: brightness(1.07); }
.cf-fineprint { font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--parch-faint); margin-top: -.2rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-note { display: none; max-width: 560px; margin: 0 auto 1.4rem; padding: .9rem 1.2rem;
  text-align: center; border-radius: 10px; background: rgba(134,163,108,.12);
  border: 1px solid rgba(134,163,108,.4); color: var(--gain); font-family: var(--serif-body); }
.contact-note.show { display: block; }