/* ===== GREY CARDS standard ("gra", approved by Cloud 2026-10-04) =====
   Loaded after neon.css + white.css; active with <body class="tema-app neon white gra">.
   White page stays. ALL cards become medium grey (#5a6475 -> #4f5868); inner tiles/inputs #444c5b;
   text #f4f7fb / #e3e8ef; accent text uses softened tints; big numbers/names get only a 4px glow at 25%.
   Buttons and toggles keep solid neon fills with dark text.
   Contrast on the lightest card stop #5a6475: #f4f7fb 5.6, #e3e8ef 4.9, #d6f6fb 5.3, #9ff3ff 4.8, #d6f59c 5.0,
   #ffdcbf 4.6, #ffd6f5 4.6, #ffe896 4.9, #ffe0e5 4.9; on #444c5b all >= 6.7. ===== */
body.tema-app.neon.white.gra {
  --card-bg: linear-gradient(180deg, #5a6475 0%, #4f5868 100%);
  --card-solid: #4f5868;
  --card-line: rgba(255, 255, 255, .12);
  --card-rule: rgba(255, 255, 255, .16);
  --card-shadow: 0 18px 40px rgba(20, 26, 38, .18), 0 2px 6px rgba(20, 26, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  --card-ink: #f4f7fb;
  --card-ink-soft: #e3e8ef;
  --tile: #444c5b;
  --field-bg: #444c5b;
  --field-line: rgba(255, 255, 255, .16);
  --err: #ffe0e5;
  /* softened text tints for use inside grey cards */
  --t-cyan: #d6f6fb;   /* big numbers / neutral */
  --t-link: #9ff3ff;
  --t-lime: #d6f59c;
  --t-yellow: #ffe896;
  --t-orange: #ffdcbf;
  --t-pink: #ffd6f5;
  --soft-glow: 4px;
  --surface: #4f5868;
  --surface-2: #444c5b;
}
.gra .card,.gra .table-wrap{
  --ink: var(--card-ink); --ink-soft: var(--card-ink-soft); --line: var(--card-rule);
  --link: var(--t-link); --link-hover: var(--t-lime); --ct: var(--t-cyan);
  background: var(--card-bg); border-color: var(--card-line); box-shadow: var(--card-shadow);
}
.gra .card a:not(.btn),.gra .table-wrap a{color:var(--link)}
.gra .card a:not(.btn):hover{color:var(--link-hover)}
/* inputs and toggles on the darker inner grey */
.gra .inp input{background:var(--field-bg);border-color:var(--field-line)}
.gra .inp input::placeholder{color:#bcc3cf}
.gra .inp input:focus{border-color:var(--t-link);box-shadow:0 0 0 1px var(--t-link)}
.gra .seg{background:var(--field-bg);border-color:var(--field-line)}
.gra .seg input:checked+span{box-shadow:0 2px 10px rgba(20,26,38,.25)}
.gra .seg label:hover span{color:var(--t-link)}
.gra .err{color:var(--err)}
/* buttons: solid lime, soft shadow instead of glow */
.gra .btn{box-shadow:0 2px 10px rgba(20,26,38,.25)}
.gra .btn:hover{box-shadow:0 0 0 1px #d4ff70,0 4px 14px rgba(20,26,38,.3)}
/* badge on white: grey pill, lime text (6.1:1) */
.gra .eyebrow{background:var(--card-solid);color:var(--neon-lime);box-shadow:0 4px 14px rgba(20,26,38,.14)}
/* tables */
.gra thead th{background:var(--tile);color:var(--ink)}
.gra .k,.gra .k small{color:var(--ink-soft)}

/* ---- BMIChart.app: BMI number in its category colour, softened tints for text ---- */
.gra .result{--ct:var(--t-cyan);box-shadow:0 0 0 1px color-mix(in srgb,var(--ct) 40%,transparent),var(--card-shadow)}
.gra .result[data-cat=underweight]{--ct:var(--t-link)}
.gra .result[data-cat=healthy]{--ct:var(--t-lime)}
.gra .result[data-cat=overweight]{--ct:var(--t-orange)}
.gra .result[data-cat=obesity]{--ct:var(--t-pink)}
.gra .result .big,.gra .result:not([data-cat=none]) .big{color:var(--ct);text-shadow:0 0 var(--soft-glow) color-mix(in srgb,var(--ct) 25%,transparent)}
.gra .result[data-cat=none] .big{color:var(--t-cyan)}
.gra .cat,.gra .result[data-cat=none] .cat{color:var(--ct);text-shadow:none}
.gra .result.empty .cat{color:var(--ink-soft)}
/* band stays solid neon; marker white with a small dark shadow, label in the tint */
.gra #marker{filter:drop-shadow(0 1px 3px rgba(20,26,38,.45))}
.gra .band .mk{fill:var(--ct)}
.gra .band g[clip-path]{filter:none}
.gra .sw-underweight,.gra .sw-healthy,.gra .sw-overweight,.gra .sw-obesity{box-shadow:0 0 0 1px rgba(20,26,38,.25)!important}
.gra .result:not([data-cat=none]) .legend li:has(.sw-underweight),.gra .result:not([data-cat=none]) .legend li:has(.sw-healthy),.gra .result:not([data-cat=none]) .legend li:has(.sw-overweight),.gra .result:not([data-cat=none]) .legend li:has(.sw-obesity){background:transparent}
.gra .result[data-cat=underweight] .legend li:has(.sw-underweight),.gra .result[data-cat=healthy] .legend li:has(.sw-healthy),.gra .result[data-cat=overweight] .legend li:has(.sw-overweight),.gra .result[data-cat=obesity] .legend li:has(.sw-obesity){background:var(--tile);border-color:color-mix(in srgb,var(--ct) 60%,transparent)}
.gra .child{background:var(--tile);border-color:color-mix(in srgb,var(--t-pink) 50%,transparent)}
/* tables: sticky cells in the grey, category cells stay solid with dark text */
.gra .bmigrid tbody th{background:var(--card-solid)}
.gra .bmigrid thead th:first-child{background:var(--tile)}
.gra .bmigrid th,.gra .bmigrid td{border-color:rgba(255,255,255,.1)}
/* jump links: grey pills */
.gra .jump a{background:var(--card-solid);border-color:rgba(255,255,255,.12);color:#f4f7fb}
.gra .jump a:hover{border-color:var(--t-link);box-shadow:0 4px 14px rgba(20,26,38,.2);color:#f4f7fb}