/* BMIChart.app white standard: white page, the neon slate cards stay dark grey.
   Loaded after neon.css; only active with <body class="tema-app neon white">. */
body.tema-app.neon.white {
  /* page (outside the cards) */
  --page-bg: #ffffff;
  --page-bg-2: #f7f8fa;
  --page-ink: #141a26;           /* 16:1 on white */
  --page-ink-soft: #4a5468;      /* 7.2:1 */
  --page-line: rgba(20, 26, 38, .12);
  /* deeper neon tints for text on white (all >= 5:1 on #fff) */
  --deep-cyan: #007385;
  --deep-lime: #447000;
  --deep-pink: #a8208d;
  --deep-orange: #a64d00;
  --deep-yellow: #806200;
  /* the cards: solid slate so they read as grey boxes on white */
  --card-bg: linear-gradient(180deg, #313a4e 0%, #283043 100%);
  --card-line: rgba(255, 255, 255, .08);
  --card-shadow: 0 18px 40px rgba(20, 26, 38, .16), 0 2px 6px rgba(20, 26, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .08);
  --bg-deep: #ffffff;
  --bg-grad: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f7f8fa 100%);
  /* page-level roles: dark ink, deep tints */
  --ink: var(--page-ink);
  --ink-soft: var(--page-ink-soft);
  --line: var(--page-line);
  --link: var(--deep-cyan);
  --link-hover: var(--deep-pink);
}

/* inside every card the dark-theme values come back: light text, neon links, soft glows */
.white .card,.white .table-wrap{
  --ink: #f4f7fb; --ink-soft: #b9c2d3; --line: rgba(255, 255, 255, .12);
  --link: var(--neon-cyan); --link-hover: var(--neon-lime);
  color: var(--ink);
  background: var(--card-bg); border-color: var(--card-line); box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.white .card a:not(.btn),.white .table-wrap a{color:var(--link)}
/* result card keeps its category-coloured edge + soft glow (number colour/glow unchanged from neon.css) */
.white .result{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 0 26px color-mix(in srgb,var(--c) 22%,transparent),var(--card-shadow);border-color:transparent}

/* page chrome on white */
html:has(body.white){background:#ffffff}
.white header.top{background:rgba(255,255,255,.92);border-bottom-color:var(--page-line)}
.white .brand,.white header.top nav a{color:var(--page-ink)}
.white .brand .tld{color:var(--deep-lime)}
.white header.top nav a[aria-current="page"],.white header.top nav a:hover{color:var(--deep-cyan);text-shadow:none}
.white h1,.white h2,.white h3{color:var(--ink)}
.white .eyebrow{background:#283043;color:var(--neon-lime);box-shadow:0 4px 14px rgba(20,26,38,.14)}
.white .crumbs,.white .crumbs a{color:var(--page-ink-soft)}
.white :focus-visible{outline-color:var(--deep-cyan)}
.white .btn{box-shadow:0 6px 18px rgba(98,140,0,.28)}
.white .btn:hover{box-shadow:0 8px 24px rgba(98,140,0,.42)}
/* legend outside a card (chart page): swatches get a thin dark edge so lime/yellow show on white */
.white .legend .sw{box-shadow:0 0 0 1px rgba(20,26,38,.22)}
.white .card .legend .sw-underweight{box-shadow:0 0 10px var(--cat-under)}
.white .card .legend .sw-healthy{box-shadow:0 0 10px var(--cat-healthy)}
.white .card .legend .sw-overweight{box-shadow:0 0 10px var(--cat-over)}
.white .card .legend .sw-obesity{box-shadow:0 0 10px var(--cat-obese)}
/* jump links become small grey boxes like the cards */
.white .jump a{background:#283043;border-color:rgba(255,255,255,.1);color:#f4f7fb}
.white .jump a:hover{border-color:var(--neon-cyan);box-shadow:0 0 16px rgba(34,230,255,.35);color:#f4f7fb}
.white footer.site{border-top-color:var(--page-line);color:var(--page-ink-soft)}
.white footer.site a,.white .f-brand b{color:var(--page-ink)}
.white .faq summary{color:var(--page-ink)}