:root{
  --bg:#1b1a2e; --bg2:#24213f; --panel:rgba(246,241,231,.045);
  --panel2:rgba(246,241,231,.07); --line:rgba(212,185,106,.24); --line2:rgba(212,185,106,.14);
  --gold:#b08d3f; --goldL:#d4b96a; --ink:#1b1a2e;
  --ivory:#f6f1e7; --ivoryD:#e9e1cd; --muted:rgba(246,241,231,.55);
  --sage:#4f7a6b; --good:#93c9a0; --bad:#e2a9a9;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(176,141,63,.14), transparent 60%),
    radial-gradient(700px 420px at -10% 20%, rgba(79,122,107,.12), transparent 60%),
    var(--bg);
  color:var(--ivory);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55; font-size:16px;
  min-height:100vh;
}
.stars{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(212,185,106,.85), transparent 55%),
    radial-gradient(1.2px 1.2px at 28% 32%, rgba(212,185,106,.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 18% 62%, rgba(212,185,106,.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 34% 84%, rgba(212,185,106,.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 68% 12%, rgba(212,185,106,.65), transparent 55%),
    radial-gradient(1.2px 1.2px at 82% 26%, rgba(212,185,106,.5), transparent 55%),
    radial-gradient(1.4px 1.4px at 90% 48%, rgba(212,185,106,.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 76% 72%, rgba(212,185,106,.45), transparent 55%),
    radial-gradient(1.4px 1.4px at 8% 44%, rgba(212,185,106,.5), transparent 55%),
    radial-gradient(1.2px 1.2px at 48% 6%, rgba(212,185,106,.4), transparent 55%),
    radial-gradient(1.4px 1.4px at 60% 94%, rgba(212,185,106,.55), transparent 55%),
    radial-gradient(1.2px 1.2px at 44% 40%, rgba(246,241,231,.14), transparent 55%),
    radial-gradient(1.4px 1.4px at 6% 82%, rgba(212,185,106,.45), transparent 55%);
}
.wrap{position:relative; z-index:1; max-width:640px; margin:0 auto; padding:0 16px 118px;}

/* ---- app bar ---- */
.appbar{position:relative; z-index:1; background:rgba(20,19,35,.6); border-bottom:1px solid var(--line2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.appbar-in{max-width:640px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:12px;}
.logo{width:44px; height:44px; border-radius:13px; flex:none;
  background:linear-gradient(135deg,var(--goldL),var(--gold));
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 3px 14px rgba(176,141,63,.4);}
.appname{font-family:var(--serif); font-size:18px; letter-spacing:.3px; color:var(--ivory);}
.apptag{font-size:11px; color:var(--muted); letter-spacing:.4px;}
.guide{margin-left:auto; background:none; border:1px solid var(--line); color:var(--goldL);
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer;}

/* ---- home head ---- */
.homehead{margin:26px 4px 18px;}
.homehead h1{margin:0; font-family:var(--serif); font-size:27px; font-weight:600; letter-spacing:.3px; color:var(--ivory);}
.homehead p{margin:8px 0 0; font-size:13.5px; color:var(--muted); max-width:540px;}

/* ---- hero tiles ---- */
.tiles3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
.tile{background:var(--panel); border:1px solid var(--line2); border-radius:16px; padding:16px 8px 14px;
  text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.25);}
.tile .tlab{font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--goldL); font-weight:700;}
.tile .tnum{font-family:var(--serif); font-size:42px; font-weight:700; color:var(--gold); margin:6px 0 2px; line-height:1;}
.tile .tsub{font-size:10.5px; color:var(--muted); min-height:13px;}

/* ---- cards / forms ---- */
.card{background:var(--panel); border:1px solid var(--line2); border-radius:18px;
  padding:18px 16px; margin-top:16px; box-shadow:0 4px 18px rgba(0,0,0,.22);}
.seclab{font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--gold);
  font-weight:700; margin-bottom:14px;}
.card h2{display:flex; align-items:center; gap:12px; margin:0 0 4px; font-size:18px;}
.card h2 .n{flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; font-family:var(--serif); font-size:19px; font-weight:700;
  background:linear-gradient(135deg,var(--goldL),var(--gold)); color:var(--ink);}
.card .sub{color:var(--muted); font-size:13px; margin-bottom:10px;}
.card h2 + .sub{margin-top:2px;}
.field{margin-top:12px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
label{display:block; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; color:var(--goldL);
  font-weight:700; margin-bottom:6px;}
input,select{
  width:100%; padding:12px 12px; font-size:16px; color:var(--ivory);
  background:rgba(246,241,231,.06); border:1px solid var(--line); border-radius:11px; outline:none;
}
input::placeholder{color:rgba(246,241,231,.35);}
input:focus,select:focus{border-color:var(--goldL); box-shadow:0 0 0 3px rgba(176,141,63,.18); background:rgba(246,241,231,.09);}
select{color-scheme:dark;}
select option{background-color:#24213f; color:#f6f1e7;}
body.theme-light select{color-scheme:light;}
body.theme-light select option{background-color:#ffffff; color:#1b1a2e;}
/* ---- planet hover tooltip (natal / sevenfold chart) ---- */
.planet-tip{position:relative; cursor:help; border-bottom:1px dotted var(--gold);}
.planet-tip .tipbox{display:none; position:absolute; z-index:60; left:50%; transform:translateX(-50%); bottom:135%; width:272px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:0 12px 34px rgba(0,0,0,.5); pointer-events:none;}
.planet-tip:hover .tipbox{display:block;}
.tipbox .tiprow{display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:2px 0;}
.tipbox .tiprow .k{color:var(--muted);}
.tipbox .tiprow .v{color:var(--ivory); text-align:right;}

.btn{display:block; width:100%; margin-top:14px; border:0; border-radius:12px; padding:14px;
  font-size:16px; font-weight:700; cursor:pointer;
  background:linear-gradient(135deg,var(--goldL),var(--gold)); color:var(--ink);
  box-shadow:0 5px 18px rgba(176,141,63,.35);}
.btn.ghost{background:rgba(246,241,231,.04); color:var(--goldL);
  border:1px solid var(--line); box-shadow:none; margin-top:10px;}
/* The ghost button's pale gold is tuned for the dark board and drops to ~1.8:1
   on white, so the light theme uses the dark gold instead. */
.theme-light .btn.ghost{background:rgba(27,26,46,.04); color:#7a5c22;
  border-color:rgba(176,141,63,.35);}

/* ---- explore grid ---- */
.explore{margin-top:22px;}
.xtile{display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line2);
  border-radius:16px; padding:14px; margin-top:10px; text-align:left; color:inherit;
  font:inherit; cursor:pointer; width:100%; box-shadow:0 3px 14px rgba(0,0,0,.2);}
.xtile .xi{width:44px; height:44px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--goldL),var(--gold)); font-size:22px;}
.xtile .xt{font-size:15px; font-weight:700; color:var(--ivory);}
.xtile .xd{font-size:12px; color:var(--muted); margin-top:2px;}

/* ---- report extras ---- */
details{margin-top:16px; background:var(--panel); border:1px solid var(--line2); border-radius:18px; overflow:hidden;}
details summary{padding:15px 16px; cursor:pointer; font-weight:700; font-size:16px; color:var(--ivory);
  list-style:none; background:rgba(20,19,35,.35);}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; float:right; color:var(--goldL); font-weight:800; font-size:18px;}
details[open] summary::after{content:"\2212";}
.dbody{padding:4px 16px 16px; border-top:1px dashed var(--line2);}

.chip{display:inline-block; background:rgba(176,141,63,.18); color:var(--goldL); border:1px solid var(--line);
  border-radius:999px; padding:3px 12px; font-size:13px; font-weight:700; margin:2px 4px 2px 0;}
.chip.gold{background:rgba(176,141,63,.28); color:#f0d490;}
.chip.good{background:rgba(79,122,107,.32); color:var(--sage); border-color:rgba(79,122,107,.5);}
.chip.bad{background:rgba(226,169,169,.16); color:var(--bad); border-color:rgba(226,169,169,.35);}
/* The summary badges set their gold inline, so a light-theme override needs
   !important to win against the inline style. The .chip light colours live in
   the body.theme-light block further down. */
.theme-light summary > span{color:#7a5c22 !important;}

.stat{display:flex; justify-content:space-between; align-items:baseline; padding:10px 2px;
  border-bottom:1px dashed var(--line2); font-size:15px; gap:12px;}
.stat:last-child{border-bottom:0;}
.stat .k{color:var(--muted);}
.stat .v{font-weight:700; color:var(--ivory); text-align:right;}

.tbl{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px;}
.tbl th,.tbl td{border:1px solid var(--line2); padding:7px 8px; text-align:left; vertical-align:top;}
.tbl th{background:rgba(176,141,63,.14); color:var(--goldL); font-size:11px; text-transform:uppercase; letter-spacing:.5px;}
.tbl .num{font-weight:800; color:var(--goldL); white-space:nowrap;}

.text{white-space:pre-wrap; font-size:14.5px; color:rgba(246,241,231,.82); margin-top:8px;}
.note{background:rgba(176,141,63,.10); border-left:4px solid var(--gold); border-radius:8px;
  padding:10px 12px; font-size:13.5px; color:var(--ivoryD); margin-top:10px;}
.foot{text-align:center; color:var(--muted); font-size:11.5px; margin-top:26px; line-height:1.6;}
.tool-num{max-width:90px;}

/* ---- Sevenfold sub-navigation (styled like the left-card action button) ---- */
.subnav{display:flex; gap:8px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--line2); flex-wrap:wrap;}
.subtab-btn{border:1px solid var(--line); background:rgba(246,241,231,.06); color:var(--ivory);
  padding:9px 16px; border-radius:11px; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;}
.subtab-btn:hover{border-color:var(--goldL);}
.subtab-btn.active{background:linear-gradient(135deg,var(--goldL),var(--gold)); color:var(--ink);
  border-color:var(--goldL); box-shadow:0 5px 18px rgba(176,141,63,.35);}
.subtab-btn:focus-visible{outline:2px solid var(--goldL); outline-offset:2px;}

/* ---- bottom nav ---- */
.bottomnav{position:fixed; left:0; right:0; bottom:0; z-index:5;
  display:flex; gap:4px; background:rgba(20,19,35,.92); border-top:1px solid var(--line);
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 -6px 24px rgba(0,0,0,.35);
  max-width:640px; margin:0 auto;}
.bnav{flex:1; min-width:0; background:none; border:0; color:var(--muted); font-size:11.5px; font-weight:600; cursor:pointer;
  padding:9px 4px; border-radius:12px; white-space:nowrap; transition:color .15s ease, background .15s ease;}
.bnav.on{background:linear-gradient(135deg,var(--goldL),var(--gold)); color:var(--ink);}
#out .card, #out details, section, .extile{scroll-margin-top:14px;}
/* ============ Section B: web additions ============ */

:root{
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --rail:238px;
  --content-wide:1000px;
}
body{font-family:var(--font-body);}
.appname,.tile .tnum,.card h2 .n,h1,h2,h3{font-family:var(--font-display);}
.apptag{letter-spacing:.6px;}

/* Desktop shell: sidebar rail + content */
.shell{position:relative; z-index:1; max-width:var(--content-wide); margin:0 auto;}
.sidebar{display:none;}
@media (min-width:768px){
  .wrap, .appbar-in{max-width:calc(var(--content-wide) - var(--rail) - 40px);}
  .bottomnav{display:none;}
  .wrap{padding-bottom:0;}
  .shell{display:grid; grid-template-columns:var(--rail) 1fr; gap:24px; padding:24px 16px 0;}
  .sidebar{display:block; position:sticky; top:86px; align-self:start;}
}

/* Footer inside the main column */
.main-col{min-width:0; padding-bottom:60px;}
.foot{margin-top:26px; text-align:center; color:var(--muted); font-size:11.5px; line-height:1.6;}

/* Focus visibility */
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--goldL); outline-offset:2px; border-radius:6px;}
.xtile:focus-visible, .guide:focus-visible{outline:2px solid var(--goldL); outline-offset:2px;}

/* Subtle reveal */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* Print */
@media print{
  .stars, .appbar, .sidebar, .bottomnav, .guide, .explore, #secInput{display:none !important;}
  body{background:#fff; color:#1b1a2e;}
  :root{--panel:rgba(27,26,46,.03); --panel2:rgba(27,26,46,.06); --ivory:#1b1a2e; --ivoryD:#333;
        --muted:#555; --line:#b08d3f; --line2:rgba(176,141,63,.35);}
  .shell{display:block; padding:0; max-width:100%;}
  .main-col{padding-bottom:0;}
  .wrap{max-width:100%; padding:0;}
  .card, details{break-inside:avoid; page-break-inside:avoid;}
  .tbl th{background:rgba(176,141,63,.14);}
}
@media print{ .text{color:#333} }

/* Light theme (white background mode) */
html.theme-light, body.theme-light {
  background: #ffffff !important;
  background-image: none !important;
  color: #1b1a2e !important;
  /* Flip the dark-theme surface/text tokens so every report component that
     references them stays readable on white. */
  --ivory: #1b1a2e;
  --ivoryD: #33303f;
  --muted: #55536b;
  --line: rgba(176, 141, 63, 0.45);
  --line2: rgba(176, 141, 63, 0.25);
  --panel: rgba(27, 26, 46, 0.03);
  --panel2: rgba(27, 26, 46, 0.07);
}
body.theme-light .site-header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: rgba(176, 141, 63, 0.2);
}
body.theme-light .product-tab:hover,
body.theme-light .product-tab.active,
body.theme-light .module-tabs,
body.theme-light .theme-switch {
  background-color: rgba(27, 26, 46, 0.04);
  color: #1b1a2e;
}
body.theme-light .product-tab.active { background: rgba(176, 141, 63, 0.12); border-color: rgba(176, 141, 63, 0.35); }
body.theme-light .module-tabs { border-color: rgba(176, 141, 63, 0.25); }
body.theme-light .theme-switch { border-color: rgba(176, 141, 63, 0.35); }
body.theme-light .card,
body.theme-light details,
body.theme-light .xtile {
  background: #fbf9f4 !important;
  border-color: rgba(176, 141, 63, 0.25) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06) !important;
  color: #1b1a2e !important;
}
body.theme-light input,
body.theme-light select {
  background: #ffffff !important;
  color: #1b1a2e !important;
  border-color: rgba(176, 141, 63, 0.3) !important;
}
body.theme-light .text,
body.theme-light .sub,
body.theme-light .header-status,
body.theme-light .page-heading p {
  color: #4a485c !important;
}
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light .appname,
body.theme-light label {
  color: #1b1a2e !important;
}

/* Light theme: report accents that use the light gold would be washed out */
body.theme-light .subtab-btn { background: rgba(27, 26, 46, 0.04); border-color: rgba(176, 141, 63, 0.3); color: #33303f; }
body.theme-light .subtab-btn.active,
body.theme-light .tab-btn.active { background: linear-gradient(135deg, var(--goldL), var(--gold)); color: #1b1a2e !important; border-color: var(--goldL); }
body.theme-light .chip { color: #7a5c22; border-color: rgba(176, 141, 63, 0.45); }
body.theme-light .chip.gold { color: #7a5c22; background: rgba(176, 141, 63, 0.2); }
/* The pale sage on the translucent green chip is only 4.0:1 on white. */
body.theme-light .chip.good { color: #1f4d3a; }
body.theme-light .chip.bad { color: #a13a2f; }
body.theme-light .tbl th { color: #7a5c22; background: rgba(176, 141, 63, 0.16); }
body.theme-light .tbl .num { color: #8a6a2f; }
body.theme-light .stat .v { color: #1b1a2e; }
body.theme-light .stat .k { color: #55536b; }
body.theme-light .text { color: #33303f; }
body.theme-light .note { color: #33303f; }
body.theme-light .foot { color: #6a676f; }
body.theme-light .bnav { color: #55536b; }
body.theme-light details summary { background: rgba(27, 26, 46, 0.04); }
body.theme-light .stars { display: none; }

/* ============ Section C: shared app shell (header, product tabs, workspace) ============ */

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(20,19,35,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line2); }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark span { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--goldL), var(--gold)); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(176,141,63,0.3); }
.brand-mark div { display: flex; flex-direction: column; }
.brand-mark b { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.3px; color: var(--ivory); line-height: 1.1; }
.brand-mark small { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.header-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); display: inline-block; box-shadow: 0 0 8px var(--sage); }

.product-tabs { display: flex; gap: 4px; align-items: center; margin-left: auto; margin-right: auto; }
.product-tab { background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.product-tab:hover { color: var(--ivory); background: rgba(246,241,231,.06); }
.product-tab.active { color: var(--ivory); background: rgba(212,185,106,.12); border-color: rgba(212,185,106,.35); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.product-tab:focus-visible { outline: 2px solid var(--goldL); outline-offset: 2px; }

.product-view[hidden] { display: none; }
.human-design-product { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }
#human-design-mount { min-height: 320px; }

.theme-switch { background: rgba(246,241,231,0.06); border: 1px solid var(--line); color: var(--ivory); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.theme-switch:hover { background: rgba(246,241,231,0.12); }

.module-tabs { display: flex; gap: 8px; background: rgba(20,19,35,0.4); padding: 4px; border-radius: 12px; border: 1px solid var(--line2); margin-bottom: 24px; width: fit-content; }
.module-tabs[hidden] { display: none; }
.tab-btn { background: none; border: 0; color: var(--muted); padding: 8px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.tab-btn.active { background: linear-gradient(135deg, var(--goldL), var(--gold)); color: var(--ink); box-shadow: 0 5px 18px rgba(176,141,63,.35); border: 1px solid var(--goldL); }

.workspace { max-width: 1200px; margin: 0 auto; padding: 30px 24px 80px; }
.page-heading { margin-bottom: 24px; }
.page-heading .eyebrow { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.page-heading h1 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0 0 8px; color: var(--ivory); }
.page-heading p { color: var(--muted); font-size: 14.5px; margin: 0; }

.workspace-grid { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }

.sticky-sidebar { position: sticky; top: 90px; }

/* Mobile: single column. */
@media(max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .sticky-sidebar { position: static; top: auto; }
}
@media(max-width: 760px) {
  .header-inner { flex-wrap: wrap; }
  .product-tabs { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; margin: 0; padding-bottom: 2px; scrollbar-width: none; }
  .product-tabs::-webkit-scrollbar { display: none; }
  .product-tab { white-space: nowrap; }
}