/* ==========================================================
   The Trading Paper — enhancement layer
   Additive polish on top of style.css. Safe to remove: just
   delete the <link> to this file and the page reverts fully.
   Keeps the newspaper identity; adds depth, motion & finish.
   ========================================================== */

/* ---- base refinements ---- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--red); color: #fff; }

/* Faint warm paper gradient instead of a flat fill — adds depth */
html, body {
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(185,28,28,0.04), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---- soft depth on the major blocks ---- */
.total-hero,
.alloc-mountain,
.widget,
.hcard,
.tp-card,
.acc,
.rules-box,
.stat-banner,
.awaiting-row {
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 14px 30px -22px rgba(26,26,26,0.35);
}

/* ---- hover micro-interactions ---- */
.hcard, .tp-card, .widget {
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.hcard:hover, .widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(26,26,26,0.06), 0 22px 44px -20px rgba(26,26,26,0.45);
  border-top-color: var(--red);
}
.tp-card:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 22px 44px -22px rgba(185,28,28,0.5);
}
.tp-card a { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.tp-card a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.tp-card a.dl:hover { background: var(--red); border-color: var(--red); }

/* Accordion: smoother open feel + chevron */
.acc > summary { transition: background .15s ease, color .15s ease; }
.acc:hover { border-top-color: var(--red); }

/* ---- the live heartbeat ---- */
@keyframes ttp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
#total-live-stamp,
[id$="-live-stamp"],
#galt-stamp,
.live-stamp > span { animation: ttp-pulse 2.4s ease-in-out infinite; }

/* ---- total-portfolio hero: give the ring & photo life ---- */
.th-ring { filter: drop-shadow(0 12px 26px rgba(26,26,26,0.14)); }
.th-photo { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.th-ring:hover .th-photo { transform: translate(-50%,-50%) scale(1.05); }
.th-stats .c { transition: background .15s ease; }
.th-stats .c:hover { background: rgba(185,28,28,0.03); }

/* Numbers feel intentional when they update */
.stat-val, .th-stats .v, .hcard-tbl td.num, .awaiting-box .stat-val {
  transition: color .3s ease;
}

/* ---- buttons everywhere ---- */
button { transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
button:active { transform: translateY(1px); }
#tp-pager .tp-pg:hover:not(:disabled):not(.on) { box-shadow: 0 4px 12px -6px rgba(185,28,28,.6); }

/* ---- password gate: a touch more premium ---- */
#tp-gate { backdrop-filter: blur(3px); }
#tp-gate input { transition: border-color .15s ease, box-shadow .15s ease; }
#tp-gate input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(185,28,28,.18); }
#tp-gate button { transition: background .15s ease, transform .12s ease; }
#tp-gate button:hover { background: var(--red); }

/* ---- custom scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: #c9c2b4 transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #cfc8ba; border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b3a997; }

/* ==========================================================
   Scroll-reveal — driven by enhance.js (initReveal there).
   Content is visible by default; JS adds .ttp-pre only to
   below-fold sections, so nothing can ever be stuck hidden.
   (Replaced animation-timeline:view(), which left sections
   at opacity:0 on some Chrome builds.)
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ttp-pre { opacity: 0; transform: translateY(24px); }
  .ttp-in  { opacity: 1; transform: none;
             transition: opacity .55s ease-out, transform .55s ease-out; }
}

/* ---- respect reduced-motion globally ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- small mobile finish ---- */
@media (max-width: 640px) {
  .masthead h1 { font-size: 40px; }
  .container { padding: 24px 18px; }
}

/* Theme toggle button now lives in the masthead top bar (js/masthead.js). */

/* ==========================================================
   STICKY MINI-HEADER
   ========================================================== */
#tp-mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 70px 10px 22px;
  background: rgba(255,253,247,0.88);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px -18px rgba(26,26,26,0.6);
  transform: translateY(-105%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
  font-family: 'Noto Sans Georgian', sans-serif;
}
#tp-mini.show { transform: translateY(0); }
.tp-mini-brand { font-family: 'Noto Serif Georgian', serif; font-weight: 900; font-size: 15px; letter-spacing: -0.3px; }
.tp-mini-spacer { flex: 1; }
.tp-mini-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.tp-mini-val { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 16px; letter-spacing: -0.5px; }
.tp-mini-pl { font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 6px; }
.tp-mini-pl.pos { color: var(--green); background: rgba(22,101,52,0.10); }
.tp-mini-pl.neg { color: var(--red);   background: rgba(185,28,28,0.10); }
@media (max-width: 520px) {
  #tp-mini { gap: 9px; padding: 8px 64px 8px 16px; }
  .tp-mini-brand { font-size: 13px; }
  .tp-mini-label { display: none; }
}

/* ==========================================================
   DARK THEME — component-specific overrides only.
   The design-token block + body background now live at the END of
   css/style.css so every page (not just the 5 that load enhance.css)
   gets dark support. Keep only the component fixes here.
   ========================================================== */
/* surfaces that hard-code light colours */
html[data-theme="dark"] .tp-card.latest { background: rgba(239,68,68,0.10); }
html[data-theme="dark"] #tp-arch-search {
  background: #1d1b16 !important; border-color: #36322a !important; color: #ece7db !important;
}
html[data-theme="dark"] #tp-arch-search::placeholder { color: #7d7666; }
html[data-theme="dark"] #tp-pager .tp-pg { background: #1d1b16; color: #ece7db; border-color: #36322a; }
html[data-theme="dark"] #tp-pager .tp-pg.on { background: var(--red); color: #fff; border-color: var(--red); }
html[data-theme="dark"] #tp-mini { background: rgba(29,27,22,0.9); }
/* password gate */
html[data-theme="dark"] #tp-gate { background: #14130f !important; }
html[data-theme="dark"] #tp-gate > div > div:first-child { color: #ece7db !important; }
html[data-theme="dark"] #tp-gate input {
  background: #1d1b16 !important; color: #ece7db !important; border-color: #36322a !important;
}
/* keep dashed hairlines visible on dark */
html[data-theme="dark"] .hcard-tbl td { border-bottom-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .alloc-legend td,
html[data-theme="dark"] .th-legend td { border-bottom-color: rgba(255,255,255,0.06); }