/* Concentric Wealth: brand layer on top of the shared shell (portal.css). Keep shell geometry in portal.css; only brand, views and the rings live here. */
:root {
  --brand-mark: #4C6685;          /* tree mark (Figma) */
  --brand-navy: #12214A;
  --wordmark: #0D0D0D;
  --card-bg: #F6F6F3;              /* Figma placeholder cards */
  --rule-strong: rgba(0, 0, 0, .55);
  --rule-soft: rgba(0, 0, 0, .10);
  --menu-av: #12214A;
  --accent: #12214A; --accent-ink: #FFFFFF;
  --font-display: "Montserrat", -apple-system, ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Ring colours, outside in (Figma Web 1920 – 1) */
  --ring-1: #12214A; /* Family & Legacy */
  --ring-2: #476079; /* Protection & Risk Management */
  --ring-3: #BC8F3F; /* Investments & Wealth Protection */
  --ring-4: #758F55; /* Tax Strategy */
  --ring-5: #556B3E; /* Financial Independence & Retirement */
  --ring-6: #1E3B22; /* Cash Flow */
  --ring-core: #0F1F17; /* Values at the Core */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --brand-mark: #8FA6C2; --wordmark: #EDEDED; --card-bg: #111111; --rule-strong: rgba(255, 255, 255, .45); --rule-soft: rgba(255, 255, 255, .12); --accent: #EDEDED; --accent-ink: #000000; --menu-av: #476079; }
}
:root[data-theme="dark"] { --brand-mark: #8FA6C2; --wordmark: #EDEDED; --card-bg: #111111; --rule-strong: rgba(255, 255, 255, .45); --rule-soft: rgba(255, 255, 255, .12); --accent: #EDEDED; --accent-ink: #000000; --menu-av: #476079; }

/* ---------------------------------------------------------------- rail: 24px tree mark, Figma's dimmed inactive icons */
.rail-top .logo { left: 6px; top: 6px; width: 24px; height: 24px; color: var(--brand-mark); }
.rail-top .logo svg { width: 24px; height: 24px; }
.rail-btn { text-decoration: none; }
.rail-btn svg { display: block; width: 20px; height: 20px; opacity: .45; transition: opacity var(--dur-color) ease; }
.rail-btn:hover svg, .rail-btn[aria-current="page"] svg { opacity: 1; }
.avatar { background: var(--brand-navy); }

/* ---------------------------------------------------------------- expanded panel */
.brand-switch { text-decoration: none; gap: 8px; }
.brand-switch .brand-mark { width: 20px; height: 20px; color: var(--brand-mark); flex: none; }
.brand-switch .switcher-name { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }
a.row { text-decoration: none; }
.row .sec-ic { width: 20px; height: 20px; flex: none; }
#g-rings { padding-top: 20px; }
.row .score { font-size: 13px; line-height: 20px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; flex: none; }
.row .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-right: 2px; }
.sec-list .row { height: 40px; }

/* ---------------------------------------------------------------- top bar: household button (same centre line as the logo, y=26) */
.tb-family { position: relative; }
.tb-title { height: 36px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; color: var(--text-primary); background: var(--surface); transition: background-color var(--dur-color) ease; max-width: 60vw; }
.tb-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-title:hover, .tb-title[aria-expanded="true"] { background: var(--hover-bg); }
.tb-title .chev { width: 12px; height: 12px; flex: none; }
.family-menu { top: 42px; left: 0; bottom: auto; width: 280px; transform-origin: top left; }
.family-menu .mhead { padding: 8px 10px 4px; }
.fm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 14px; line-height: 20px; border-radius: 8px; }
.fm-row .r { font-size: 12px; color: var(--text-tertiary); }
.fm-sep { height: 1px; background: var(--rule-soft); margin: 6px 4px; }

/* ---------------------------------------------------------------- views */
body:not([data-current="core"]) .column { max-width: 1240px; }
.view[hidden] { display: none !important; }

/* The Core */
#view-core { align-items: center; padding-bottom: 48px; }
.wordmark { margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; font-family: var(--font-display); font-weight: 200; color: var(--wordmark); text-transform: uppercase; line-height: 1; }
.wordmark .wm-1 { font-size: clamp(34px, 5.6vw, 74px); letter-spacing: .3em; margin-right: -.3em; }
.wordmark .wm-2 { font-size: clamp(18px, 2.6vw, 38px); font-weight: 300; letter-spacing: .3em; margin-right: -.3em; margin-top: .9em; }
.rings-wrap { width: min(548px, 100%); margin: clamp(32px, 5vh, 56px) auto 0; }
.rings { display: block; width: 100%; height: auto; overflow: visible; }
.ring { cursor: pointer; outline: none; }
.ring circle { transition: filter var(--dur-color) ease; }
.ring:hover circle, .ring:focus-visible circle { filter: brightness(1.14) saturate(1.05); }
.ring:focus-visible circle { stroke: var(--text-primary); stroke-width: 2; }
.ring text { pointer-events: none; fill: #FFFFFF; font-family: -apple-system, ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; }
.ring .r-score { font-size: 25px; font-weight: 600; }
.ring .r-label { font-size: 13.5px; font-weight: 400; }
.core-dot { pointer-events: none; }
.core-dot text { fill: #C9A253; font-family: var(--font-display); font-size: 11px; letter-spacing: .18em; font-weight: 400; }
.ring-legend { display: none; list-style: none; margin: 24px 0 0; padding: 0; width: 100%; max-width: 420px; }
.ring-legend a { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 0.5px solid var(--border); text-decoration: none; color: var(--text-primary); font-size: 15px; line-height: 20px; }
.ring-legend li:first-child a { border-top: 0; }
.ring-legend .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ring-legend .n { flex: 1; min-width: 0; }
.ring-legend .s { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Phones: the ring labels get too small to read, so they move to a tappable list under the rings. */
@media (max-width: 600px) {
  .ring .r-label { display: none; }
  .ring .r-score { font-size: 30px; }
  .ring-legend { display: block; }
  .core-dot text { display: none; }
}

/* Section pages (Figma Web 1920 – 2) */
.sec-page { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 448px); gap: clamp(32px, 3vw, 56px); padding: 8px 0 64px; }
.sec-main { min-width: 0; }
.sec-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; font-size: 40px; line-height: 1.15; font-weight: 400; letter-spacing: -.01em; }
.sec-badge { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; line-height: 1; font-weight: 600; color: #FFFFFF; letter-spacing: .01em; }
.sec-summary { margin: 40px 0 56px; }
.sec-summary .k { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.sec-summary .v { margin-top: 10px; font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sec-aside { display: flex; flex-direction: column; gap: 40px; }
.ph-card { background: var(--card-bg); border-radius: 24px; min-height: 388px; }
.ph-card.tall { min-height: 518px; }
.ph-note { font-size: 14px; line-height: 22px; color: var(--text-tertiary); padding: 28px 0; }

/* Info tables */
.info { margin: 0 0 4px; }
.info h2 { margin: 0; padding: 0 0 6px; font-size: 19px; line-height: 26px; font-weight: 700; border-bottom: 1px solid var(--rule-strong); }
.info h3 { margin: 18px 0 0; padding: 0 0 4px; font-size: 15px; line-height: 20px; font-weight: 600; border-bottom: 2px solid var(--rule-soft); }
.info dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info .cell { padding: 7px 6px; border-bottom: 1px solid var(--rule-soft); font-size: 14px; line-height: 20px; min-width: 0; overflow-wrap: break-word; }
.info dt { display: inline; font-weight: 600; }
.info dd { display: inline; margin: 0; }
.info .gap { height: 8px; }

/* Simple pages (Profile, Settings, Help) */
.simple { padding: 8px 0 64px; max-width: 720px; }
.simple h1 { margin: 0 0 12px; font-size: 32px; line-height: 1.2; font-weight: 400; }
.simple p { color: var(--text-secondary); margin: 0 0 12px; }

@media (max-width: 1279px) {
  .sec-page { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sec-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ph-card, .ph-card.tall { min-height: 220px; }
}
@media (max-width: 767px) {
  .sec-title { font-size: 30px; }
  .sec-summary { margin: 24px 0 32px; }
  .info dl { grid-template-columns: minmax(0, 1fr); }
  .sec-aside { grid-template-columns: minmax(0, 1fr); }
  .ph-card, .ph-card.tall { min-height: 180px; border-radius: 20px; }
  .tb-title { font-size: 15px; padding: 0 8px; }
}