/* BodyType.app design test "vit": 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);
}
/* shape colour, deep version for text on white */
.white [data-shape=hourglass],.white .shape-page:has(.shape-hero [data-shape=hourglass]),.white .others a[href$="/hourglass/"]{--cd:var(--deep-pink)}
.white [data-shape=pear],.white .shape-page:has(.shape-hero [data-shape=pear]),.white .others a[href$="/pear/"]{--cd:var(--deep-lime)}
.white [data-shape=apple],.white .shape-page:has(.shape-hero [data-shape=apple]),.white .others a[href$="/apple/"]{--cd:var(--deep-orange)}
.white [data-shape=rectangle],.white .shape-page:has(.shape-hero [data-shape=rectangle]),.white .others a[href$="/rectangle/"]{--cd:var(--deep-cyan)}
.white [data-shape=inverted-triangle],.white .shape-page:has(.shape-hero [data-shape=inverted-triangle]),.white .others a[href$="/inverted-triangle/"]{--cd:var(--deep-yellow)}

/* 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){color:var(--link)}
/* result and shape-hero cards keep their coloured edge + soft glow, on top of the white-page shadow */
.white .shape-card{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)}
.white .shape-hero{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 0 26px color-mix(in srgb,var(--c) 16%,transparent),var(--card-shadow)}
.white .shape-tile:hover{box-shadow:0 0 0 1px var(--c),0 0 22px color-mix(in srgb,var(--c) 28%,transparent),var(--card-shadow)}

/* 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 .hero .eyebrow,.white .prose>.eyebrow,.white .hero.nf .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)}

/* coloured text that sits on white uses the deep tint */
.white .more a{color:var(--cd)}
.white .advice .h-adv{color:var(--page-ink)}
.white .rule{background:color-mix(in srgb,var(--c) 12%,#fff);border-color:color-mix(in srgb,var(--cd) 35%,transparent);color:var(--page-ink)}
.white .rule a{color:var(--deep-cyan)}
/* "other shapes" chips become small grey boxes like the cards, with the neon text */
.white .others a{background:#283043;border-color:color-mix(in srgb,var(--c) 45%,transparent);color:color-mix(in srgb,var(--c) 75%,#fff)}
.white .others a:hover{color:color-mix(in srgb,var(--c) 75%,#fff)}
.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)}
.white .shape-card .shape-link a{color:color-mix(in srgb,var(--c) 75%,#fff)}