/* Derived only from the client-neutral dashboard template; palette matched to Owner’s Overview. */

  :root{
    --bg:#142D3B; --panel:#1B3745; --panel2:#234451; --hair:#36515D; --hair2:#4B6670;
    --ink:#F7F5EF; --muted:#BDCDCE; --faint:#A2B8BD;
    --gold:#72BEAF; --gold-hi:#8CC9BC; --gold-dim:#36877D;
    --bad:#FFAEAA; --good:#8CC9BC; --warn:#E3A93B;
    --s1:#72BEAF; --s2:#7DA99B; --s3:#DFA06F; --s4:#80A9CE; --s5:#A5BC74; --s6:#CA91AE;
    --serif:Arial,Helvetica,sans-serif;
    --script:"Snell Roundhand","Savoye LET",cursive;
    --sans:Arial,Helvetica,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;
    -webkit-font-smoothing:antialiased}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(1100px 420px at 78% -8%, rgba(54,135,125,.14), transparent 62%),
      radial-gradient(900px 380px at 12% -12%, rgba(57,80,120,.10), transparent 60%);}
  .wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:28px 32px 64px}

  /* ── header ─────────────────────────────── */
  header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
    padding-bottom:20px;border-bottom:1px solid var(--hair)}
  /* FIXED background photo — stays put while the dashboard scrolls over it.
     Right-anchored rather than full-bleed: the source is 414px square, so covering
     the whole viewport would mean ~3.5x magnification. This holds it near 1.7x. */
  .photo-band{position:fixed;top:0;right:0;width:min(52vw,720px);height:100vh;
    z-index:0;pointer-events:none;overflow:hidden}
  .photo-band::before{content:"";position:absolute;inset:0;
    background-image:var(--photo);background-size:cover;background-position:52% 22%;
    filter:brightness(.86) saturate(1.05)}
  .photo-band::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,#142D3B 0%,rgba(16,15,13,.90) 13%,rgba(16,15,13,.34) 40%,rgba(16,15,13,.04) 70%,rgba(16,15,13,.24) 100%),
    linear-gradient(180deg,rgba(16,15,13,.70) 0%,rgba(16,15,13,.12) 18%,rgba(16,15,13,.18) 46%,rgba(20,45,59,.55) 74%,rgba(16,15,13,.80) 100%)}
  .photo-band .vig{position:absolute;inset:0;
    background:radial-gradient(115% 78% at 50% 34%, transparent 40%, rgba(16,15,13,.5) 100%)}
  @media (max-width:900px){.photo-band{width:100%;opacity:.35}}
  .hero-gap{height:44vh;display:flex;align-items:flex-end;padding-bottom:10px}
  .hero-copy{max-width:520px}
  .hero-copy .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-hi);
    margin:0 0 15px;text-shadow:0 2px 12px rgba(0,0,0,.95)}
  .hero-copy h2{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.08;margin:0 0 16px;
    text-shadow:0 2px 6px rgba(0,0,0,.85),0 6px 34px rgba(0,0,0,.95)}
  .hero-copy .d{font-size:14px;color:#BDCDCE;margin:0;line-height:1.62;
    text-shadow:0 2px 5px rgba(0,0,0,.9),0 4px 22px rgba(0,0,0,.95)}
  @media (max-width:900px){.hero-gap{height:34vh;padding-bottom:6px}.hero-copy h2{font-size:32px}}
  @media (max-width:620px){.hero-copy h2{font-size:28px}.hero-gap{height:34vh}}
  .wordmark{font-family:var(--sans);font-weight:700;font-size:20px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--ink);margin:0;white-space:nowrap;
    text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .hdr-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .badge-sample{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#142D3B;
    background:var(--gold-hi);border-radius:3px;padding:4px 10px;font-weight:700}
  .sync{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-shadow:0 1px 10px rgba(0,0,0,.85)}
  .sync b{color:var(--ink);font-weight:500}

  /* ── tabs ───────────────────────────────── */
  nav{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
  nav button{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:#CFDDD9;background:rgba(20,45,59,.55);border:1px solid var(--hair2);
    border-radius:999px;padding:9px 18px;cursor:pointer;display:flex;align-items:center;gap:8px;
    transition:color .15s,border-color .15s}
  nav button:hover{color:var(--ink);border-color:var(--faint)}
  nav button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
  nav button.on{color:#142D3B;background:var(--gold-hi);border-color:var(--gold-hi)}
  nav .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
  nav button.on .dot{background:#142D3B}
  nav .dot.pending{background:transparent;border:1.5px solid currentColor}

  /* ── household part switcher ────────────── */
  .subnav{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 18px}
  .subnav button{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--hair);
    border-radius:7px;padding:6px 14px;cursor:pointer;transition:color .15s,border-color .15s}
  .subnav button:hover{color:var(--ink);border-color:var(--faint)}
  .subnav button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
  .subnav button.on{color:var(--gold-hi);border-color:var(--gold-dim);background:#234B50}
  .subnav em{font-style:normal;color:var(--faint);letter-spacing:.04em;text-transform:none}

  /* ── hero ───────────────────────────────── */
  .eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
    text-shadow:0 1px 10px rgba(0,0,0,.85);display:flex;align-items:center;gap:14px;margin:0 0 18px}
  .eyebrow::after{content:"";height:1px;flex:1;background:var(--hair)}
  .hero{display:grid;grid-template-columns:minmax(300px,1.25fr) repeat(3,1fr);gap:14px;margin-bottom:14px}
  .tile{background:#1B3745;border:1px solid var(--hair);border-radius:10px;padding:20px 22px;
    display:flex;flex-direction:column;justify-content:space-between;min-height:148px}
  .tile .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .tile .big{font-family:var(--serif);font-size:56px;line-height:1.02;letter-spacing:.01em;
    margin:10px 0 6px;font-variant-numeric:tabular-nums}
  .tile .mid{font-family:var(--serif);font-size:36px;line-height:1.05;margin:12px 0 6px;
    font-variant-numeric:tabular-nums}
  .tile .sub{font-family:var(--mono);font-size:12px;color:var(--muted)}
  .tile .sub .neg{color:var(--bad)} .tile .sub .pos{color:var(--good)}
  .tile.feature{background:linear-gradient(145deg,#24534F 0%,var(--panel) 55%);border-color:var(--gold-dim)}
  .tile.feature .note{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.26em;
    text-transform:uppercase;color:var(--gold-hi);margin-top:8px}
  .target-rule{position:relative;height:6px;border-radius:3px;background:var(--hair);margin:14px 0 8px;overflow:visible}
  .target-rule .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--gold)}
  .target-rule .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.85}

  /* ── grid & cards ───────────────────────── */
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .card{background:#1B3745;border:1px solid var(--hair);border-radius:10px;padding:20px 22px 14px;position:relative}
  .card.full{grid-column:1/-1}
  .card h3{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);margin:0 0 2px}
  .card .cap{font-size:12.5px;color:var(--muted);margin:0 0 14px}
  .legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 4px;font-size:12.5px;color:var(--muted)}
  .legend span{display:inline-flex;align-items:center;gap:7px}
  .legend i{width:10px;height:10px;border-radius:3px;flex:none}
  .legend .lv{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
  svg{display:block;width:100%;height:auto}
  svg text{font-family:var(--mono);font-size:11px;fill:var(--muted)}
  svg text.mo{fill:#F7F5EF;font-weight:700;font-size:12px}
  svg .axis{stroke:var(--hair);stroke-width:1}
  svg .gridln{stroke:var(--hair);stroke-width:1;stroke-dasharray:1 5}
  svg .tgt{stroke:var(--gold-hi);stroke-width:1.4;stroke-dasharray:6 5}
  svg .tgtlbl{fill:var(--gold-hi);font-size:10.5px;letter-spacing:.08em}
  details.tbl{margin-top:8px;border-top:1px solid var(--hair)}
  details.tbl summary{font-size:11.5px;color:var(--faint);cursor:pointer;padding:8px 0;letter-spacing:.08em;
    text-transform:uppercase}
  details.tbl summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
  details.tbl table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin:4px 0 10px}
  details.tbl th{text-align:left;color:var(--muted);font-weight:500;padding:5px 8px;border-bottom:1px solid var(--hair)}
  details.tbl td{padding:5px 8px;border-bottom:1px solid var(--hair);color:var(--ink);
    font-variant-numeric:tabular-nums}
  details.tbl td+td,details.tbl th+th{text-align:right}

  /* entity strip */
  .entity-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
  .entity-head h2{font-family:var(--serif);font-size:34px;font-weight:400;margin:0}
  .chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;border-radius:999px;
    padding:5px 14px;display:inline-flex;align-items:center;gap:8px;border:1px solid}
  .chip.ok{color:var(--good);border-color:rgba(76,175,110,.4)}
  .chip.pend{color:var(--warn);border-color:rgba(227,169,59,.4)}
  .chip i{width:7px;height:7px;border-radius:50%;background:currentColor}

  /* tooltip */
  #tt{position:fixed;z-index:50;pointer-events:none;background:#0B0A08;border:1px solid var(--hair2);
    border-radius:7px;padding:9px 12px;font-family:var(--mono);font-size:12px;color:var(--ink);
    box-shadow:0 8px 28px rgba(0,0,0,.55);opacity:0;transition:opacity .1s;max-width:260px}
  #tt .t{color:var(--muted);font-size:11px;margin-bottom:3px;letter-spacing:.06em}
  #tt .v{font-variant-numeric:tabular-nums}

  footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--hair);
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    font-size:12px;color:var(--faint)}
  footer .mono{font-family:var(--mono);font-size:11.5px}

  @media (max-width:1000px){.hero{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}}
  @media (max-width:620px){.hero{grid-template-columns:1fr}.wrap{padding:20px 16px 48px}
    header{flex-direction:column;align-items:flex-start}.hdr-right{align-items:flex-start;text-align:left}}
  @media (prefers-reduced-motion:no-preference){
    .view{animation:rise .35s ease both}
    @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  }
  /* phones: the nowrap wordmark is ~460px wide and blows out a 390px viewport */
  html,body{max-width:100%;overflow-x:hidden}
  @media (max-width:560px){
    .wordmark{white-space:normal;font-size:15px;letter-spacing:.16em;line-height:1.35}
    .sync{font-size:10.5px;line-height:1.5}
    .badge-sample{font-size:9.5px;letter-spacing:.06em;white-space:normal}
    nav button{font-size:10.5px;letter-spacing:.08em;padding:8px 13px}
    .subnav button{font-size:10px;padding:5px 10px}
    .tile .big{font-size:44px}.tile .mid{font-size:30px}
    .entity-head h2{font-size:26px}
    .card{padding:16px 14px 12px}.tile{padding:16px 15px}
    details.tbl table{font-size:11px}details.tbl th,details.tbl td{padding:4px 5px}
    .legend{font-size:11.5px;gap:5px 12px}
  }