/* family.css — the standalone read-only family page. */
:root {
  --bg: #f6f7fb; --card: #ffffff; --tile: #eef1f6; --line: #e3e7ee;
  --ink: #141b26; --dim: #5b6675; --faint: #8e98a7;
  --up: #12a37a; --down: #df5530; --accent: #5b58e0;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c111b; --card: #141b28; --tile: #1b2433; --line: #253044;
    --ink: #eef3fa; --dim: #9aa7ba; --faint: #6f7b8e;
    --up: #2ecf9f; --down: #f0714d; --accent: #8b88ff;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.fam { max-width: 860px; margin: 0 auto; padding: max(1.4rem, env(safe-area-inset-top)) 16px 2.5rem; }
.fam-loading, .fam-empty p { color: var(--dim); }
.fam-empty h1, .fam-head h1 { margin: 0; font: 800 1.6rem/1.15 "Schibsted Grotesk", Inter, sans-serif; letter-spacing: -0.01em; }
.fam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.fam-asof { margin: 0; font-size: 0.82rem; color: var(--faint); }

.fam-hero { display: grid; gap: 0.15rem; padding: 1.2rem 1.25rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.fam-k { font: 600 0.78rem/1.3 Inter, sans-serif; color: var(--dim); }
.fam-total { font: 800 clamp(2rem, 7vw, 2.8rem)/1.05 "Schibsted Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
.fam-split { font-size: 0.85rem; color: var(--dim); }

.fam-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 1.2rem; }
@media (max-width: 620px) { .fam-stats { grid-template-columns: repeat(2, 1fr); } }
.fam-stat { display: grid; gap: 0.1rem; padding: 0.85rem 0.95rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.fam-v { font: 800 1.45rem/1.15 "Schibsted Grotesk", Inter, sans-serif; }
.fam-sub { font-size: 0.8rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--dim); }

.fam-card { margin: 0 0 1.2rem; padding: 1rem 1rem 0.9rem; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.fam-card h2 { margin: 0 0 0.75rem; font: 800 1.05rem/1.2 "Schibsted Grotesk", Inter, sans-serif; }
.fam-note { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--faint); }

.fg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fg { display: grid; grid-template-columns: 2.6rem repeat(12, minmax(2.8rem, 1fr)) 3.5rem; gap: 4px; min-width: 43rem; align-items: center; }
.fg-h { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--dim); }
.fg-y { font: 700 0.76rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
.fg-cell { display: grid; place-items: center; height: 2.1rem; border-radius: 6px; font: 700 0.74rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--ink); }
.fg-cell.strong { color: #fff; }
.fg-empty { background: var(--tile); opacity: 0.6; }
.fg-year { text-align: right; font: 700 0.78rem/1 "JetBrains Mono", ui-monospace, monospace; }

.fa { list-style: none; margin: 0; padding: 0; }
.fa-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: start; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.fa-row:first-child { border-top: 0; padding-top: 0.1rem; }
.fa-pill { padding: 0.12rem 0.5rem; border-radius: 999px; font: 700 0.72rem/1.4 Inter, sans-serif; }
.fa-pill.buy { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.fa-pill.sell { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.fa-main { min-width: 0; overflow-wrap: anywhere; }
.fa-main b { font-weight: 700; }
.fa-name { color: var(--dim); font-size: 0.86rem; }
.fa-det { display: block; font-size: 0.8rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.fa-side { display: grid; justify-items: end; gap: 0.1rem; text-align: right; }
.fa-date { font-size: 0.78rem; color: var(--faint); white-space: nowrap; }
.fa-res { font: 700 0.84rem/1.3 Inter, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }

.fam-foot { margin-top: 1.5rem; text-align: center; font-size: 0.76rem; color: var(--faint); }

/* public holdings list */
.fh-head { display: grid; grid-template-columns: 1fr 6.5rem 7.5rem; gap: 0.7rem; padding: 0 0 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--faint); }
.fh-head span:not(:first-child) { text-align: right; }
.fh { list-style: none; margin: 0; padding: 0; }
.fh-row { display: grid; grid-template-columns: 1fr 6.5rem 7.5rem; gap: 0.7rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.fh-main { min-width: 0; overflow-wrap: anywhere; }
.fh-bar { display: block; height: 4px; margin-top: 0.35rem; border-radius: 2px; background: var(--tile); overflow: hidden; }
.fh-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.fh-w, .fh-g { text-align: right; font: 700 0.9rem/1.25 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.fh-w small, .fh-g small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--faint); }
.fh-g small.up { color: var(--up); } .fh-g small.down { color: var(--down); }
.fh-rest .fh-main { color: var(--dim); }
.fh-gp { font-weight: 600; font-size: 0.8rem; }

/* ================= public page ================= */
:root { --cash: #b8c0cc; --other: #d9d2c3; --shadow: 0 1px 2px rgba(20, 27, 38, 0.04), 0 8px 24px rgba(20, 27, 38, 0.05); }
@media (prefers-color-scheme: dark) { :root { --cash: #5d6878; --other: #7a7160; --shadow: none; } }

.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0.4rem 0 1.25rem; }
.pp-head h1 { margin: 0; font: 800 clamp(1.8rem, 6vw, 2.3rem)/1.05 "Schibsted Grotesk", Inter, sans-serif; letter-spacing: -0.02em; }
.pp-since { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.86rem; color: var(--dim); }
.pp-since b { font: 800 1.25rem/1 "Schibsted Grotesk", Inter, sans-serif; }

.pp-card { margin: 0 0 1rem; padding: 1.1rem 1.1rem 1rem; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pp-card h2 { margin: 0; font: 800 1.05rem/1.2 "Schibsted Grotesk", Inter, sans-serif; }
.pp-card > h2 { margin-bottom: 0.9rem; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }

.pp-years { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tile); }
.pp-year { border: 0; background: none; color: var(--dim); font: 700 0.78rem/1 "JetBrains Mono", ui-monospace, monospace; padding: 0.4rem 0.6rem; border-radius: 7px; cursor: pointer; }
.pp-year.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.pp-year:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 12 month tiles — 6 × 2 on phones, one row on wide screens */
.pm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (min-width: 700px) { .pm-grid { grid-template-columns: repeat(12, 1fr); } }
.pm-tile { display: grid; gap: 0.3rem; justify-items: center; padding: 0.6rem 0.2rem 0.65rem; border-radius: 10px; background: var(--tint, var(--tile)); }
.pm-tile span { font-size: 0.7rem; font-weight: 600; color: var(--dim); }
.pm-tile b { font: 700 0.86rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: -0.02em; }
.pm-tile.is-empty { background: var(--tile); } .pm-tile.is-empty b { color: var(--faint); font-weight: 500; }
.pm-tile.is-future { background: transparent; border: 1px dashed var(--line); }
.pm-tile.is-now { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent); }
.pp-year-total { margin: 0.8rem 0 0; text-align: right; font-size: 0.82rem; color: var(--dim); }
.pp-year-total b { margin-left: 0.35rem; font: 800 1rem/1 "Schibsted Grotesk", Inter, sans-serif; }

/* donut + detail + legend */
.pd { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 1.4rem; align-items: center; }
@media (max-width: 620px) { .pd { grid-template-columns: 1fr; justify-items: center; gap: 1rem; } }
.pd-chart { width: 100%; max-width: 300px; }
.pd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pd-slice { cursor: pointer; transition: opacity 0.15s ease; stroke: var(--card); stroke-width: 1.5; }
.pd-svg:hover .pd-slice:not(.is-on):not(:hover) { opacity: 0.55; }
.pd-slice:focus { outline: none; } .pd-slice:focus-visible { stroke: var(--ink); stroke-width: 2.5; }
.pd-c1 { font: 800 20px "Schibsted Grotesk", Inter, sans-serif; fill: var(--ink); }
.pd-c2 { font: 700 15px "JetBrains Mono", ui-monospace, monospace; fill: var(--dim); }
.pd-side { width: 100%; min-width: 0; display: grid; gap: 0.9rem; }

.pd-detail { padding: 0.85rem 0.95rem; border-radius: 14px; background: color-mix(in srgb, var(--dot) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--dot) 30%, var(--line)); }
.pd-name { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.pd-name i { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); align-self: center; }
.pd-name b { font: 800 1.15rem/1.1 "Schibsted Grotesk", Inter, sans-serif; }
.pd-name span { color: var(--dim); font-size: 0.86rem; }
.pd-stats { display: flex; gap: 1.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.pd-stat { display: grid; gap: 0.05rem; }
.pd-stat span { font-size: 0.72rem; font-weight: 600; color: var(--dim); }
.pd-stat b { font: 800 1.5rem/1.1 "Schibsted Grotesk", Inter, sans-serif; letter-spacing: -0.01em; }
.pd-stat small { font-size: 0.72rem; color: var(--faint); }

.pd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 21rem; overflow: auto; }
.pd-item { width: 100%; display: grid; grid-template-columns: 12px 1fr auto 4.5rem; gap: 0.6rem; align-items: center; padding: 0.5rem 0.55rem; border: 0; border-radius: 9px; background: none; color: var(--ink); font: 500 0.88rem/1.2 Inter, sans-serif; text-align: left; cursor: pointer; }
.pd-item i { width: 10px; height: 10px; border-radius: 3px; background: var(--dot); }
.pd-item:hover { background: var(--tile); }
.pd-item.is-on { background: color-mix(in srgb, var(--dot) 12%, transparent); }
.pd-item:focus-visible { outline: 2px solid var(--accent); }
.pd-l { font-weight: 700; }
.pd-w { font: 600 0.82rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--dim); }
.pd-r { text-align: right; font: 700 0.82rem/1 "JetBrains Mono", ui-monospace, monospace; }
@media (prefers-reduced-motion: reduce) { .pd-slice { transition: none; } }
.pm-tile small { font-size: 0.62rem; color: var(--faint); margin-top: -0.15rem; }
.pp-refresh { margin: -0.6rem 0 1rem; font-size: 0.78rem; color: var(--faint); }

/* public: benchmarks beside the portfolio (S&P 500, Nasdaq-100) */
.pp-total { text-align: right; }
.pp-bench { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--faint); }
.pp-bench b { font-weight: 700; }
button.pm-tile { border: 0; cursor: pointer; font: inherit; color: inherit; }
.pm-tile.is-sel { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 45%, transparent); }
button.pm-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-top: 0.85rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--tile); font-size: 0.84rem; color: var(--dim); }
.pv-when { font-weight: 700; color: var(--ink); margin-right: 0.2rem; }
.pv-item b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-me { color: var(--ink); }
.pp-yb { margin-left: 0.7rem; color: var(--faint); font-size: 0.78rem; }

/* public holdings: sort */
.pd-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--tile); justify-self: start; }
.pd-sort-btn { border: 0; background: none; color: var(--dim); font: 600 0.76rem/1 Inter, sans-serif; padding: 0.38rem 0.65rem; border-radius: 7px; cursor: pointer; }
.pd-sort-btn.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.pd-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* public: next-update countdown */
.pp-timer { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--tile); color: var(--dim); white-space: nowrap; }
.pp-timer i { font-style: normal; color: var(--accent); }
.pp-timer b { font: 700 0.78rem/1 "JetBrains Mono", ui-monospace, monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pp-timer i { animation: none; } }