/*
* styles.css — MiNutriQ Clinical Nutrition Decision Support Tool
* ─────────────────────────────────────────────────────────────────
* Extracted from index.html to modularise the codebase.
* Load order: styles.css → foodData.js → main app script
*
* Sections:
* 1. Splash screen + safe-area baseline (originally inline in )
* 2. Main design system — NutriCalc Clinical UI
*
* Note: The offline-page CSS and print-report CSS remain inline in
* index.html because they are embedded inside JS template literals
* and cannot be loaded via .
*
* Author : Edison Taimu
* Version: see index.html APP_VERSION
* ─────────────────────────────────────────────────────────────────
*/
/* ═══════════════════════════════════════════════════════════════
SECTION 1 — SPLASH SCREEN + SAFE-AREA BASELINE
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root { --sat: env(safe-area-inset-top,0px); --sab: env(safe-area-inset-bottom,0px); --bottom-nav-h: 60px; }
body { padding-bottom: max(calc(var(--bottom-nav-h) + 8px), calc(var(--bottom-nav-h) + 8px + var(--sab))); }
/* ═══════════════════════════════════════════════════════════════
SPLASH SCREEN — MiNutriQ (Redesigned)
Shown immediately from CSS — no JS needed to display it.
JS adds .splash-out to fade it away once the app is ready.
═══════════════════════════════════════════════════════════════ */
/* Colour tokens */
#nt-splash {
--nts-teal: #00f5e4;
--nts-blue: #3b82f6;
--nts-violet: #818cf8;
--nts-text: #ffffff;
--nts-muted: rgba(220,238,255,0.97);
--nts-dim: rgba(200,225,248,0.92);
}
#nt-splash {
position: fixed;
inset: 0;
z-index: 999999;
background: #020617;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
pointer-events: all;
transition: opacity .45s cubic-bezier(.4,0,.2,1), visibility .45s;
opacity: 1;
visibility: visible;
}
#nt-splash.splash-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Standalone splash suppression is handled by JS (MIN_SHOW_MS = 0),
not CSS, so the fade-out transition works correctly in all contexts. */
/* Ambient background glows */
#nt-splash::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 50% at 50% -10%, rgba(0,245,228,0.06) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 80% 90%, rgba(59,130,246,0.07) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 15% 60%, rgba(129,140,248,0.04) 0%, transparent 50%);
pointer-events: none;
}
/* Subtle grid overlay */
#nt-splash::after {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(29,233,212,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(29,233,212,0.025) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
/* ── 1. App name ── */
.nts-name {
font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(26px, 7.5vw, 34px);
letter-spacing: 4px;
color: var(--nts-text);
text-align: center;
text-transform: none;
margin-bottom: 34px;
position: relative;
animation: nts-reveal .9s cubic-bezier(.16,1,.3,1) both;
}
.nts-name .nts-nutri { color: var(--nts-teal); }
/* ── 2. Logo ring wrap ── */
.nts-ring-wrap {
position: relative; width: 210px; height: 210px;
margin-bottom: 36px;
animation: nts-reveal .9s cubic-bezier(.16,1,.3,1) .08s both;
}
.nts-halo {
position: absolute; inset: -14px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,245,228,0.05) 30%, transparent 70%);
animation: nts-halo 3.2s ease-in-out infinite;
}
.nts-ring-static {
position: absolute; inset: -6px; border-radius: 50%;
border: 1px dotted rgba(0,245,228,0.12);
}
.nts-ring-outer {
position: absolute; inset: 0; border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: var(--nts-teal);
border-left-color: rgba(0,245,228,0.35);
animation: nts-cw 1.9s linear infinite;
filter: drop-shadow(0 0 7px rgba(0,245,228,0.5));
}
.nts-ring-mid {
position: absolute; inset: 6px; border-radius: 50%;
border: 2px solid transparent;
border-bottom-color: var(--nts-blue);
border-right-color: rgba(59,130,246,0.35);
animation: nts-ccw 2.6s linear infinite;
filter: drop-shadow(0 0 6px rgba(59,130,246,0.45));
}
.nts-ring-inner {
position: absolute; inset: 20px; border-radius: 50%;
border: 1.5px solid transparent;
border-top-color: rgba(129,140,248,0.5);
border-left-color: rgba(129,140,248,0.2);
animation: nts-cw 4s linear infinite;
}
.nts-logo-circle {
position: absolute; inset: 8px; border-radius: 50%;
background: radial-gradient(circle at 50% 48%, rgba(10,28,52,0.98) 0%, rgba(2,6,23,0.98) 100%);
border: 1px solid rgba(0,245,228,0.12);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.nts-logo-circle img {
width: 92%; height: 92%; object-fit: contain;
display: block;
margin-bottom: 8px; /* nudges logo up to optical centre */
}
/* ── 3. Loading dots ── */
.nts-dots {
display: flex; align-items: center; gap: 9px;
margin-bottom: 36px;
animation: nts-reveal .9s cubic-bezier(.16,1,.3,1) .18s both;
}
.nts-dot {
width: 8px; height: 8px; border-radius: 2px;
background: rgba(0,245,228,0.15);
border: 1px solid rgba(0,245,228,0.3);
animation: nts-dot 1.6s ease-in-out infinite;
}
.nts-dot:nth-child(1){animation-delay:0s}
.nts-dot:nth-child(2){animation-delay:.22s}
.nts-dot:nth-child(3){animation-delay:.44s}
.nts-dot:nth-child(4){animation-delay:.66s}
.nts-dot:nth-child(5){animation-delay:.88s}
.nts-dot:nth-child(6){animation-delay:1.1s}
/* ── 4. Subtitle ── */
.nts-sub {
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
font-size: clamp(10px, 2.5vw, 12px);
letter-spacing: 2px; text-transform: uppercase;
color: var(--nts-muted); text-align: center;
margin-bottom: 18px; padding: 0 20px; line-height: 1.8;
animation: nts-reveal .9s cubic-bezier(.16,1,.3,1) .26s both;
}
/* ── 5. WELCOME — animated pure text, no frame ── */
.nts-welcome {
font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
font-weight: 700;
font-size: clamp(16px, 4.5vw, 21px);
letter-spacing: 8px;
text-transform: uppercase;
text-align: center;
color: transparent;
margin-bottom: 10px;
position: relative;
display: flex;
gap: 0;
align-items: center;
justify-content: center;
/* no border, no background, no box-shadow */
}
/* Each letter is a — animated individually */
.nts-welcome span {
display: inline-block;
background: linear-gradient(135deg, var(--nts-teal) 0%, #ffffff 50%, var(--nts-blue) 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation:
nts-letter-drop 0.7s cubic-bezier(.16,1,.3,1) both,
nts-letter-shine 3.5s ease-in-out infinite;
}
.nts-welcome span:nth-child(1){ animation-delay: 0.30s, 1.1s }
.nts-welcome span:nth-child(2){ animation-delay: 0.38s, 1.2s }
.nts-welcome span:nth-child(3){ animation-delay: 0.46s, 1.3s }
.nts-welcome span:nth-child(4){ animation-delay: 0.54s, 1.4s }
.nts-welcome span:nth-child(5){ animation-delay: 0.62s, 1.5s }
.nts-welcome span:nth-child(6){ animation-delay: 0.70s, 1.6s }
.nts-welcome span:nth-child(7){ animation-delay: 0.78s, 1.7s }
/* ── 6. Attribution ── */
.nts-by {
font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
font-size: 10px; letter-spacing: 1.5px;
color: rgba(190,215,245,0.72); text-transform: uppercase;
text-align: center; margin-bottom: 28px;
animation: nts-reveal .9s cubic-bezier(.16,1,.3,1) .42s both;
}
/* ── 7. Glow line ── */
.nts-line {
width: min(280px, 68vw); height: 4px; border-radius: 99px;
background: linear-gradient(90deg,
transparent 0%, rgba(0,245,228,0.4) 20%,
var(--nts-teal) 40%, var(--nts-blue) 60%,
rgba(59,130,246,0.4) 80%, transparent 100%);
box-shadow:
0 0 14px rgba(0,245,228,0.55),
0 0 32px rgba(0,245,228,0.20),
0 0 6px rgba(59,130,246,0.40);
animation: nts-line 2.8s ease-in-out infinite,
nts-reveal .9s cubic-bezier(.16,1,.3,1) .40s both;
}
/* ── Keyframes ── */
@keyframes nts-cw { to { transform: rotate(360deg); } }
@keyframes nts-ccw { to { transform: rotate(-360deg); } }
@keyframes nts-halo {
0%,100% { transform: scale(1); opacity: .6; }
50% { transform: scale(1.06); opacity: 1; }
}
@keyframes nts-dot {
0%,100% { opacity:.15; transform:scale(.8);
background:rgba(0,245,228,.12);
box-shadow:0 0 3px rgba(0,245,228,.2); }
50% { opacity:1; transform:scale(1.15);
background:var(--nts-teal);
box-shadow:0 0 12px rgba(0,245,228,.9), 0 0 24px rgba(0,245,228,.35); }
}
@keyframes nts-line {
0%,100% { opacity: .55; }
50% { opacity: 1; box-shadow:0 0 22px rgba(0,245,228,.75),0 0 50px rgba(0,245,228,.25); }
}
@keyframes nts-reveal {
from { opacity:0; transform:translateY(16px); filter:blur(4px); }
to { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes nts-welcome-in {
from { opacity:0; transform:translateY(10px) scaleX(0.85); filter:blur(6px); letter-spacing:12px; }
to { opacity:1; transform:translateY(0) scaleX(1); filter:blur(0); letter-spacing:6px; }
}
@keyframes nts-welcome-pulse {
0%,100% { text-shadow: 0 0 12px rgba(0,245,228,0.7), 0 0 28px rgba(0,245,228,0.35);
box-shadow: 0 0 14px rgba(0,245,228,0.12), inset 0 0 10px rgba(0,245,228,0.04); }
50% { text-shadow: 0 0 20px rgba(0,245,228,1), 0 0 48px rgba(0,245,228,0.55);
box-shadow: 0 0 24px rgba(0,245,228,0.28), inset 0 0 16px rgba(0,245,228,0.08); }
}
@keyframes nts-letter-drop {
from { opacity:0; transform:translateY(-18px) scale(0.8); filter:blur(5px); }
to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes nts-letter-shine {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Standalone / home-screen launch: show full HTML splash ──
The OS system splash (Android 12+) transitions seamlessly into
our HTML splash because both share #020617 as background.
We now show all splash elements regardless of display-mode so
the branded loading screen appears whether launched from a link
or from the installed home-screen icon.
──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
PEDI RESULTS — Responsive Layout System
═══════════════════════════════════════════════════════════════ */
/* Responsive metric grid — auto 2-col on mobile, 3-col on desktop */
.pedi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
/* Dense sections (Fenton, Z-scores) — max 2-col */
.pedi-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
/* Single-column forcing for narrow contexts */
.pedi-grid-1 {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 14px;
}
/* Pedi metric card */
.pedi-mc {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 13px 14px;
min-width: 0;
word-break: break-word;
white-space: normal;
overflow: hidden;
}
.pedi-mc-label {
font-family: var(--mono);
font-size: 8px;
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 6px;
line-height: 1.4;
white-space: normal;
word-break: break-word;
}
.pedi-mc-value {
font-family: var(--mono);
font-size: 22px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 4px;
word-break: break-word;
white-space: normal;
}
.pedi-mc-sub {
font-family: var(--mono);
font-size: 9.5px;
color: var(--text-dim);
line-height: 1.5;
word-break: break-word;
white-space: normal;
margin-top: 3px;
}
/* Pedi row — label + value, responsive */
.pedi-row {
display: grid;
grid-template-columns: minmax(130px, 38%) 1fr;
gap: 8px;
align-items: baseline;
padding: 7px 0;
border-bottom: 1px solid rgba(56,100,168,0.1);
word-break: break-word;
}
.pedi-row-label {
font-family: var(--mono);
font-size: 10px;
color: var(--text-dim);
line-height: 1.5;
word-break: break-word;
white-space: normal;
}
.pedi-row-value {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--text-bright);
line-height: 1.5;
word-break: break-word;
white-space: normal;
}
.pedi-row-note {
grid-column: 1 / -1;
font-family: var(--mono);
font-size: 9px;
color: var(--text-dim);
line-height: 1.5;
margin-top: -2px;
padding-bottom: 2px;
}
/* Z-score structured card (Fenton / WHO) */
.pedi-z-card {
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 10px;
min-width: 0;
word-break: break-word;
}
.pedi-z-title {
font-family: var(--mono);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 10px;
}
.pedi-z-score {
font-family: var(--mono);
font-size: 24px;
font-weight: 800;
line-height: 1;
margin-bottom: 8px;
}
.pedi-z-badge {
display: inline-block;
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
padding: 3px 9px;
border-radius: 5px;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.pedi-z-detail {
display: grid;
grid-template-columns: auto 1fr;
gap: 3px 10px;
font-family: var(--mono);
font-size: 9.5px;
line-height: 1.7;
}
.pedi-z-detail-label { color: var(--text-dim); white-space: nowrap; }
.pedi-z-detail-val { color: var(--text-bright); font-weight: 600; word-break: break-word; }
/* Notes block */
.pedi-note {
font-family: var(--mono);
font-size: 9px;
color: var(--text-dim);
line-height: 1.7;
margin-top: 10px;
word-break: break-word;
white-space: normal;
}
@media (max-width: 480px) {
.pedi-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pedi-grid-2 { grid-template-columns: 1fr !important; }
.pedi-mc-value { font-size: 18px !important; }
.pedi-row { grid-template-columns: 1fr; gap: 2px; }
.pedi-row-note { grid-column: 1; }
}
/* ══════════════════ HOME PAGE ══════════════════ */
#tab-home {
padding: 0;
min-height: 100vh;
background: var(--bg);
}
/* Hero */
.hp-hero {
position: relative;
padding: 48px 24px 36px;
text-align: center;
overflow: hidden;
}
.hp-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 30%, rgba(0,212,184,0.09) 0%, transparent 55%),
radial-gradient(ellipse at 75% 70%, rgba(96,165,250,0.07) 0%, transparent 50%);
pointer-events: none;
}
.hp-tagline {
font-family: var(--cond);
font-size: clamp(26px, 6vw, 38px);
font-weight: 800;
letter-spacing: 1px;
color: var(--text-bright);
line-height: 1.15;
margin-bottom: 10px;
}
.hp-tagline em {
font-style: normal;
background: linear-gradient(90deg, var(--teal), #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hp-sub {
font-family: var(--mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 28px;
}
.hp-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--teal);
color: #020617;
font-family: var(--mono);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
padding: 13px 28px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: opacity .15s, transform .15s;
text-transform: uppercase;
}
.hp-cta:hover { opacity: .88; transform: translateY(-1px); }
.hp-cta:active { transform: translateY(0); }
/* Stats row */
.hp-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0 0 28px;
}
.hp-stat {
background: var(--surface);
padding: 18px 12px;
text-align: center;
}
.hp-stat-val {
font-family: var(--mono);
font-size: 22px;
font-weight: 800;
color: var(--teal);
line-height: 1;
margin-bottom: 4px;
}
.hp-stat-lbl {
font-family: var(--mono);
font-size: 8.5px;
color: var(--text-dim);
letter-spacing: 1px;
text-transform: uppercase;
}
/* Section titles */
.hp-section-title {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 12px;
padding: 0 20px;
}
/* Tool grid */
/* Recent activity */
.hp-recent {
padding: 0 16px 24px;
}
.hp-recent-empty {
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 12px;
padding: 24px;
text-align: center;
font-family: var(--mono);
font-size: 10px;
color: var(--text-dim);
}
.hp-recent-list { display: flex; flex-direction: column; gap: 6px; }
.hp-recent-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: border-color .15s;
}
.hp-recent-item:hover { border-color: rgba(29,233,212,0.35); }
.hp-recent-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
background: var(--teal);
}
.hp-recent-main { flex: 1; min-width: 0; }
.hp-recent-diag {
font-family: var(--mono);
font-size: 11px;
font-weight: 700;
color: var(--text-bright);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hp-recent-meta {
font-family: var(--mono);
font-size: 9px;
color: var(--text-dim);
margin-top: 2px;
}
.hp-recent-time {
font-family: var(--mono);
font-size: 8.5px;
color: var(--text-muted);
flex-shrink: 0;
}
/* Reference cards */
.hp-refs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 0 16px;
}
.hp-ref-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 13px;
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
transition: border-color .15s;
}
.hp-ref-card:hover { border-color: rgba(29,233,212,0.35); }
.hp-ref-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.hp-ref-name {
font-family: var(--mono);
font-size: 9.5px;
font-weight: 700;
color: var(--text-bright);
margin-bottom: 2px;
}
.hp-ref-desc {
font-family: var(--mono);
font-size: 8px;
color: var(--text-dim);
line-height: 1.5;
}
/* Footer */
.hp-footer {
padding: 24px 20px 40px;
text-align: center;
font-family: var(--mono);
font-size: 9px;
color: var(--text-muted);
line-height: 2;
}
.hp-footer a { color: var(--teal); text-decoration: none; }
/* ── PWA Install Banner ───────────────────────────────────── */
#pwa-install-banner {
display: none;
margin: 0 16px 20px;
background: linear-gradient(135deg, rgba(29,233,212,0.07) 0%, rgba(96,165,250,0.05) 100%);
border: 1px solid rgba(29,233,212,0.28);
border-radius: 14px;
padding: 14px 16px;
align-items: center;
gap: 12px;
animation: pwa-slide-down .4s cubic-bezier(.22,1,.36,1);
position: relative;
}
#pwa-install-banner.visible { display: flex; }
@keyframes pwa-slide-down {
from { transform: translateY(-10px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.pwa-banner-icon {
width: 40px; height: 40px; flex-shrink: 0;
background: rgba(29,233,212,0.1);
border: 1px solid rgba(29,233,212,0.2);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-title {
font-family: var(--cond); font-size: 13px; font-weight: 700;
color: var(--text-bright); letter-spacing: 0.5px; margin-bottom: 2px;
}
.pwa-banner-sub {
font-family: var(--mono); font-size: 9px; color: var(--text-dim); line-height: 1.5;
}
.pwa-banner-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.pwa-banner-install {
font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .8px;
color: #020617; background: var(--teal); border: none; border-radius: 8px;
padding: 7px 14px; cursor: pointer; white-space: nowrap;
transition: opacity .15s, transform .15s;
}
.pwa-banner-install:hover { opacity: .88; transform: translateY(-1px); }
.pwa-banner-dismiss {
background: none; border: none; color: var(--text-muted); font-size: 16px;
cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1;
transition: color .15s;
}
.pwa-banner-dismiss:hover { color: var(--text-dim); }
@media (max-width: 400px) {
#pwa-install-banner { flex-wrap: wrap; }
.pwa-banner-actions { width: 100%; justify-content: flex-end; }
}
/* ── SW Update Banner ──────────────────────────────────────── */
/* Shown when a new SW version is installed and waiting. Fixed */
/* at top of viewport so it doesn't displace page content. */
#sw-update-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 99999;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
background: linear-gradient(90deg, rgba(15,23,42,0.97) 0%, rgba(10,22,40,0.97) 100%);
border-bottom: 1px solid rgba(29,233,212,0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 16px rgba(0,0,0,0.5);
animation: sw-bar-slide-in .35s cubic-bezier(.22,1,.36,1);
font-family: var(--mono);
}
@keyframes sw-bar-slide-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: none; opacity: 1; }
}
.sw-update-icon {
font-size: 16px; flex-shrink: 0; line-height: 1;
}
.sw-update-text {
flex: 1; min-width: 0;
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.5px;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sw-update-text strong {
color: var(--teal);
font-weight: 700;
font-size: 11px;
}
.sw-update-reload {
font-family: var(--mono);
font-size: 10px; font-weight: 700;
letter-spacing: 1px;
color: #020617;
background: var(--teal);
border: none;
border-radius: 7px;
padding: 6px 14px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: opacity .15s, transform .15s;
}
.sw-update-reload:hover { opacity: .88; transform: translateY(-1px); }
.sw-update-reload:active { transform: none; }
.sw-update-dismiss {
background: none; border: none;
color: var(--text-muted); font-size: 15px;
cursor: pointer; padding: 4px 2px;
border-radius: 6px; line-height: 1; flex-shrink: 0;
transition: color .15s;
}
.sw-update-dismiss:hover { color: var(--text-dim); }
@media (max-width: 380px) {
.sw-update-text { display: none; }
}
/* ─────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
.hp-refs { grid-template-columns: 1fr; }
.hp-stats { grid-template-columns: repeat(3, 1fr); }
}
/* ══════════════════════════════════════════════ */
/* ── Universal Tab Top-Bar ────────────────────────────────────── */
.tab-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
margin-bottom: 0;
border-bottom: 1px solid var(--border);
background: var(--surface);
position: sticky;
top: 0;
z-index: 10;
min-height: 46px;
box-sizing: border-box;
}
.tab-topbar-back {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-dim);
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
padding: 6px 12px;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.tab-topbar-back:hover {
color: var(--teal);
border-color: rgba(29,233,212,0.4);
background: rgba(29,233,212,0.05);
}
.tab-topbar-label {
font-family: var(--cond);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--text-bright);
text-transform: uppercase;
flex: 1;
text-align: center;
}
.tab-topbar-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-dim);
font-size: 15px;
cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
flex-shrink: 0;
}
.tab-topbar-close:hover {
color: var(--red);
border-color: rgba(251,113,133,0.4);
background: rgba(251,113,133,0.07);
}
@media (max-width: 480px) {
.tab-topbar-label { font-size: 11px; }
.tab-topbar-back { font-size: 10px; padding: 5px 10px; }
}
/* ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
MINUTRIQ — UNIFIED DESIGN SYSTEM v2
Themes: dark-clinical (default) · light · high-contrast · amoled
Accents: cyan · green · blue · purple
Intensity: soft · normal · strong
═══════════════════════════════════════════════════════════════ */
/* ── THEME: Dark Clinical (default, already in :root) ────────── */
/* ── THEME: Light ────────────────────────────────────────────── */
/* ── THEME: AMOLED (pure black) ──────────────────────────────── */
body.theme-amoled {
--bg: #000000;
--surface: #0a0a0a;
--surface2: #111111;
--surface3: #1a1a1a;
--border: #222222;
--border-base:#222222;
--input-bg: #050505;
--shadow-card: 0 2px 12px rgba(0,0,0,0.9);
--text: #f0f4f8;
--text-dim: #c8d6e5;
--text-bright: #ffffff;
--text-muted: #94a3b8;
}
body.theme-amoled .card { background: #0a0a0a; }
body.theme-amoled .tabs { background: #000; }
body.theme-amoled header { background: #000; }
body.theme-amoled .sdr-header,
body.theme-amoled .sdr-footer,
body.theme-amoled .sdr-item { background: #0a0a0a; }
body.theme-amoled ::-webkit-scrollbar-track { background: #000; }
/* ── THEME: High Contrast ─────────────────────────────────────── */
body.theme-hc {
--bg: #000000;
--surface: #0a0f1a;
--surface2: #101828;
--surface3: #162035;
--border: #4a6fa5;
--border-base: #4a6fa5;
--text: #ffffff;
--text-dim: #d4dae4;
--text-bright: #ffffff;
--text-muted: #a8b4c4;
--input-bg: #000;
--input-border: #4a6fa5;
}
body.theme-hc .card-title { font-weight: 800; letter-spacing: 0.5px; }
body.theme-hc .m-lbl, body.theme-hc .sdr-item-sub { color: #c0ccd8 !important; }
body.theme-hc input, body.theme-hc select { border-color: #4a6fa5 !important; color: #fff !important; }
/* ── ACCENT PALETTES ─────────────────────────────────────────── */
/* cyan (default — var(--teal) stays as-is) */
body.accent-cyan { --accent: #1de9d4; --accent-dim: #0ec4b0; --accent-glow: rgba(29,233,212,0.12); }
body.accent-green { --accent: #34d399; --accent-dim: #10b981; --accent-glow: rgba(52,211,153,0.12);
--teal: #34d399; --teal-dim: #10b981; --teal-glow: rgba(52,211,153,0.08);
--tab-active: #34d399; }
body.accent-blue { --accent: #60a5fa; --accent-dim: #3b82f6; --accent-glow: rgba(96,165,250,0.12);
--teal: #60a5fa; --teal-dim: #3b82f6; --teal-glow: rgba(96,165,250,0.08);
--tab-active: #60a5fa; }
body.accent-purple{ --accent: #a78bfa; --accent-dim: #7c3aed; --accent-glow: rgba(167,139,250,0.12);
--teal: #a78bfa; --teal-dim: #7c3aed; --teal-glow: rgba(167,139,250,0.08);
--tab-active: #a78bfa; }
body.accent-rose { --accent: #fb7185; --accent-dim: #e11d48; --accent-glow: rgba(251,113,133,0.12);
--teal: #fb7185; --teal-dim: #e11d48; --teal-glow: rgba(251,113,133,0.08);
--tab-active: #fb7185; }
body.accent-orange{ --accent: #fb923c; --accent-dim: #ea580c; --accent-glow: rgba(251,146,60,0.12);
--teal: #fb923c; --teal-dim: #ea580c; --teal-glow: rgba(251,146,60,0.08);
--tab-active: #fb923c; }
body.accent-gold { --accent: #f0b429; --accent-dim: #b45309; --accent-glow: rgba(240,180,41,0.12);
--teal: #f0b429; --teal-dim: #b45309; --teal-glow: rgba(240,180,41,0.08);
--tab-active: #f0b429; }
/* propagate --accent everywhere --teal was used */
.sdr-chip.active, .sdr-chip:hover { border-color: var(--accent, var(--teal)) !important; color: var(--accent, var(--teal)) !important; background: var(--accent-glow, var(--teal-glow)) !important; }
.tab-topbar-back:hover { color: var(--accent, var(--teal)) !important; border-color: var(--accent-glow, rgba(29,233,212,0.4)) !important; }
.sdr-save { background: var(--accent, var(--teal)) !important; }
.hp-cta { background: var(--accent, var(--teal)) !important; }
.hp-stat-val { color: var(--accent, var(--teal)) !important; }
/* ── TEXT INTENSITY ──────────────────────────────────────────── */
body.intensity-soft {
--text: #c8d6e5;
--text-dim: #98afc4;
--text-bright: #e8f0f8;
--text-muted: #6e8099;
}
/* normal = :root defaults (no class needed) */
body.intensity-strong {
--text: #ffffff;
--text-dim: #dde8f4;
--text-bright: #ffffff;
--text-muted: #a0b4c8;
}
/* ── DESIGN SYSTEM TYPOGRAPHY HIERARCHY ─────────────────────── */
/* T1 — Primary heading */
.ds-t1 {
font-family: var(--cond);
font-size: clamp(18px, 4vw, 24px);
font-weight: 800;
color: var(--text-bright);
letter-spacing: 0.5px;
line-height: 1.2;
}
/* T2 — Secondary heading */
.ds-t2 {
font-family: var(--cond);
font-size: clamp(13px, 3vw, 16px);
font-weight: 700;
color: var(--text-bright);
letter-spacing: 1px;
}
/* T3 — Label / muted */
.ds-t3 {
font-family: var(--mono);
font-size: clamp(9px, 2vw, 11px);
color: var(--text-dim);
letter-spacing: 0.5px;
line-height: 1.6;
}
/* T4 — Accent value */
.ds-t4 {
font-family: var(--mono);
font-size: clamp(18px, 4vw, 26px);
font-weight: 800;
color: var(--accent, var(--teal));
line-height: 1;
}
/* T5 — Caption / meta */
.ds-t5 {
font-family: var(--mono);
font-size: clamp(8px, 1.8vw, 9.5px);
color: var(--text-muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* ── SETTINGS DS ROWS ────────────────────────────────────────── */
.ds-accent-row {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.ds-accent-swatch {
width: 32px; height: 32px; border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform .15s, border-color .15s;
flex-shrink: 0;
}
.ds-accent-swatch:hover { transform: scale(1.15); }
.ds-accent-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--border); }
.ds-intensity-row { display: flex; gap: 6px; }
.ds-intensity-btn {
font-family: var(--mono); font-size: 10px;
padding: 5px 12px; border-radius: 6px; cursor: pointer; letter-spacing: 0.5px;
background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
transition: all .15s;
}
.ds-intensity-btn.active,
.ds-intensity-btn:hover { background: var(--accent-glow, var(--teal-glow)); border-color: var(--accent, var(--teal)); color: var(--accent, var(--teal)); }
/* ══════════════════════════════════════════════════════════════
ABOUT TAB — MODULE CARDS (redesigned v25)
══════════════════════════════════════════════════════════════ */
.mod-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 8px;
padding: 14px;
}
@media (max-width: 520px) { .mod-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 340px) { .mod-grid { grid-template-columns: 1fr; } }
.mod-card {
position: relative;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 15px 12px 13px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
}
.mod-card::before {
content: '';
position: absolute;
top: 0; left: 12px; right: 12px;
height: 2px;
border-radius: 0 0 3px 3px;
background: var(--mod-accent, var(--teal));
opacity: 0;
transition: opacity .18s;
}
.mod-card:hover {
border-color: var(--mod-accent-border, rgba(29,233,212,0.38));
background: var(--surface3);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(0,0,0,0.35), 0 0 0 0.5px var(--mod-accent-border, rgba(29,233,212,0.18));
}
.mod-card:hover::before { opacity: 1; }
.mod-card:active { transform: translateY(0); }
.mod-icon-wrap {
width: 36px; height: 36px;
border-radius: 9px;
background: var(--mod-icon-bg, var(--teal-glow));
border: 1px solid var(--mod-icon-border, rgba(29,233,212,0.2));
display: flex; align-items: center; justify-content: center;
margin-bottom: 10px;
flex-shrink: 0;
transition: box-shadow .18s;
}
.mod-card:hover .mod-icon-wrap {
box-shadow: 0 0 14px var(--mod-icon-glow, rgba(29,233,212,0.18));
}
.mod-icon-wrap svg {
width: 17px; height: 17px;
stroke: var(--mod-accent, var(--teal));
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mod-title {
font-family: var(--cond);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-bright);
line-height: 1.25;
margin-bottom: 4px;
}
.mod-desc {
font-family: var(--mono);
font-size: 8px;
color: var(--text-dim);
line-height: 1.5;
letter-spacing: 0.2px;
}
.mod-open-badge {
position: absolute;
bottom: 8px; right: 9px;
font-family: var(--mono);
font-size: 7px;
letter-spacing: 0.8px;
color: var(--mod-accent, var(--teal));
opacity: 0;
transition: opacity .18s;
text-transform: uppercase;
}
.mod-card:hover .mod-open-badge { opacity: 0.65; }
.mod-card-footer {
padding: 9px 14px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}
.mod-card-footer-text {
font-family: var(--mono);
font-size: 8px;
color: var(--text-muted);
letter-spacing: 0.4px;
}
.mod-card-footer-badge {
margin-left: auto;
font-family: var(--mono);
font-size: 7.5px;
letter-spacing: 1.2px;
color: var(--teal);
text-transform: uppercase;
background: var(--teal-glow);
border: 1px solid rgba(29,233,212,0.2);
border-radius: 5px;
padding: 2px 7px;
}
/* ─────────────────────────────────────────────────────────────── */
/* ── FAB (always-visible Support button) ─────────────────────── */
@media (max-width: 480px) {}
/* ═══════════════════════════════════════════════════════════════
USER IDENTITY SYSTEM
═══════════════════════════════════════════════════════════════ */
/* ── Onboarding overlay (full-screen gate) ───────────────────── */
#ob-overlay {
position: fixed; inset: 0; z-index: 9990;
background: rgba(2,6,23,0.97);
display: flex; align-items: center; justify-content: center;
padding: 20px; box-sizing: border-box;
animation: ob-fade-in .4s ease;
}
@keyframes ob-fade-in { from { opacity: 0 } to { opacity: 1 } }
#ob-overlay.hidden { display: none; }
/* Keep body scroll locked while overlay is visible */
body:has(#ob-overlay:not(.hidden)) { overflow: hidden; }
/* Hide all app chrome until user is authenticated — prevents flash of UI before sign-in */
body:not(.ob-authed) header,
body:not(.ob-authed) .bottom-nav,
body:not(.ob-authed) .top-nav,
body:not(.ob-authed) #status-bar,
body:not(.ob-authed) .hp-profile-card,
body:not(.ob-authed) main,
body:not(.ob-authed) .tab-content {
display: none !important;
}
.ob-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px 28px;
width: 100%; max-width: 440px;
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
position: relative; overflow: hidden;
}
.ob-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--accent, var(--teal)), #60a5fa, var(--accent, var(--teal)));
background-size: 200% 100%;
animation: ob-shimmer 2.5s linear infinite;
}
@keyframes ob-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.ob-logo-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px;
}
.ob-logo-icon { font-size: 28px; }
.ob-logo-text-main {
font-family: var(--cond); font-size: 20px; font-weight: 800;
letter-spacing: 1px; color: var(--text-bright);
}
.ob-logo-text-sub {
font-family: var(--mono); font-size: 9px; color: var(--text-dim);
letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px;
}
.ob-heading {
font-family: var(--cond); font-size: 15px; font-weight: 700;
color: var(--text-bright); margin-bottom: 4px; letter-spacing: 0.5px;
}
.ob-sub {
font-family: var(--mono); font-size: 9.5px; color: var(--text-dim);
margin-bottom: 24px; line-height: 1.6;
}
.ob-field { margin-bottom: 16px; }
.ob-label {
display: block;
font-family: var(--mono); font-size: 9px; font-weight: 700;
color: var(--text-dim); letter-spacing: 1.5px; text-transform: uppercase;
margin-bottom: 6px;
}
.ob-label span { color: var(--accent, var(--teal)); }
.ob-input {
width: 100%; box-sizing: border-box;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 10px; color: var(--text-bright);
font-family: var(--mono); font-size: 13px;
padding: 11px 14px; outline: none;
transition: border-color .2s, box-shadow .2s;
}
.ob-input:focus {
border-color: var(--accent, var(--teal));
box-shadow: 0 0 0 3px var(--accent-glow, rgba(29,233,212,0.12));
}
.ob-input.error { border-color: var(--red); }
.ob-role-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ob-role-btn {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px;
font-family: var(--mono); font-size: 10px; color: var(--text-dim);
cursor: pointer; text-align: center; transition: all .15s;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ob-role-btn:hover { border-color: rgba(29,233,212,0.4); color: var(--teal); }
.ob-role-btn.selected {
border-color: var(--accent, var(--teal));
background: var(--accent-glow, rgba(29,233,212,0.08));
color: var(--accent, var(--teal));
}
.ob-role-icon { font-size: 20px; }
.ob-submit {
width: 100%; margin-top: 24px;
background: var(--accent, var(--teal));
border: none; border-radius: 10px;
color: #020617; font-family: var(--mono); font-size: 12px;
font-weight: 800; letter-spacing: 1.5px; padding: 14px;
cursor: pointer; transition: opacity .15s, transform .15s;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ob-submit:hover { opacity: .88; transform: translateY(-1px); }
.ob-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-spinner {
width: 14px; height: 14px;
border: 2px solid rgba(2,6,23,0.25);
border-top-color: #020617;
border-radius: 50%;
animation: ob-spin .7s linear infinite;
flex-shrink: 0;
}
.ob-error-msg {
font-family: var(--mono); font-size: 10px; color: var(--red);
margin-top: 8px; display: none;
}
/* ── Home profile card ───────────────────────────────────────── */
.hp-profile-card {
margin: 16px 16px 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px 18px;
display: flex; align-items: center; gap: 14px;
position: relative; overflow: hidden;
}
.hp-profile-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent, var(--teal));
}
.hp-profile-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: var(--accent-glow, rgba(29,233,212,0.1));
border: 2px solid var(--accent, var(--teal));
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.hp-profile-info { flex: 1; min-width: 0; }
.hp-profile-name {
font-family: var(--cond); font-size: 17px; font-weight: 800;
color: var(--text-bright); letter-spacing: 0.3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-profile-inst {
font-family: var(--mono); font-size: 10px; color: var(--text-dim);
margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-profile-id {
font-family: var(--mono); font-size: 9px; color: var(--text-muted);
margin-top: 2px;
}
.hp-profile-role {
flex-shrink: 0;
font-family: var(--mono); font-size: 9px; font-weight: 700;
letter-spacing: 1px; padding: 4px 10px; border-radius: 20px;
border: 1px solid var(--accent, var(--teal));
color: var(--accent, var(--teal));
background: var(--accent-glow, rgba(29,233,212,0.08));
text-transform: uppercase;
}
.hp-profile-edit {
position: absolute; top: 10px; right: 12px;
background: none; border: none; cursor: pointer;
font-size: 13px; color: var(--text-muted);
transition: color .15s;
}
.hp-profile-edit:hover { color: var(--accent, var(--teal)); }
@media (max-width: 420px) {
.hp-profile-card { flex-wrap: wrap; }
.hp-profile-role { width: 100%; text-align: center; }
}
/* ── Pedi results overflow fixes ─────────────────────────────── */
.pedi-grid,
.pedi-grid-2,
.pedi-grid-1 {
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
/* Card header wrap fix — title/badge go vertical only when space runs out */
.card-header {
flex-wrap: wrap;
gap: 4px;
}
.card-title {
word-break: break-word;
white-space: normal;
min-width: 0;
}
.card-badge {
white-space: normal;
word-break: break-word;
flex-shrink: 0;
}
/* Pedi result section containers */
#pt-results, #nn-results, #ie-results, #il-results,
#c25-results, #c10-results, #ad-results, #ad17-results,
#uc-results {
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
/* ─────────────────────────────────────────────────────────────── */
/* ── Enteral result section overflow fixes ───────────────────── */
#en-results, #lr-results-section, #blend-results-section,
#en-commercial-section, #en-lowres-section, #en-blend-section {
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
/* prescription cards must not overflow */
#lr-prescription, #blend-prescription, #en-prescription {
overflow-x: hidden;
word-break: break-word;
}
/* Composition grids inside results */
#lr-results-section .pedi-grid,
#blend-results-section .pedi-grid,
#lr-results-section > div,
#blend-results-section > div {
min-width: 0;
box-sizing: border-box;
}
/* Section headers inside prescription: no overflow */
#lr-results-section [style*="letter-spacing"],
#blend-results-section [style*="letter-spacing"] {
word-break: break-word;
white-space: normal;
}
/* ─────────────────────────────────────────────────────────────── */
/* ── Multi-condition selector ─────────────────────────────────── */
#diag-search {
width: 100%; box-sizing: border-box;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 8px; color: var(--text-bright);
font-family: var(--mono); font-size: 12px;
padding: 8px 12px; outline: none; margin-bottom: 8px;
transition: border-color .2s;
}
#diag-search:focus { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(29,233,212,0.12); }
#diag-search::placeholder { color: var(--text-muted); }
/* ── Device Orientation Lock ──────────────────────────────────── */
#orient-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: #020617;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 18px;
text-align: center;
padding: 32px;
}
#orient-overlay.show { display: flex; }
.orient-icon {
font-size: 52px;
animation: orient-spin 1.8s ease-in-out infinite;
}
@keyframes orient-spin {
0% { transform: rotate(0deg); }
40% { transform: rotate(-90deg); }
60% { transform: rotate(-90deg); }
100% { transform: rotate(0deg); }
}
.orient-title {
font-family: var(--cond, 'Barlow Condensed', sans-serif);
font-size: 20px; font-weight: 800; letter-spacing: 2px;
color: #1DE9D4; text-transform: uppercase;
}
.orient-sub {
font-family: var(--mono, 'Courier New', monospace);
font-size: 11px; color: rgba(255,255,255,0.5);
letter-spacing: 0.5px; line-height: 1.6;
}
.orient-dismiss {
margin-top: 8px;
font-family: var(--mono, monospace);
font-size: 10px; letter-spacing: 1px;
color: rgba(255,255,255,0.35);
background: none; border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px; padding: 6px 20px;
cursor: pointer; transition: all .2s;
}
.orient-dismiss:hover { color: #1DE9D4; border-color: rgba(29,233,212,0.4); }
/* Only show on small screens (phones) in landscape */
@media screen and (orientation: landscape) and (max-height: 500px) {
/* Overlay is shown via JS — this is the trigger zone */
}
/* ─────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
NT-ICON SYSTEM — SVG inline icons replacing emoji
════════════════════════════════════════════════════════════ */
.nt-icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
transition: filter 0.2s ease;
}
/* Tab nav icons */
.tab-icon .nt-icon,
.tab .nt-icon {
width: 14px; height: 14px;
color: currentColor;
}
/* Sidebar nav icons */
.nav-icon .nt-icon {
width: 15px; height: 15px;
}
/* Admin home nav card icons */
.home-nav-icon .nt-icon {
width: 26px; height: 26px;
color: var(--nav-accent, var(--teal));
filter: drop-shadow(0 0 3px var(--nav-accent, rgba(29,233,212,0.35)));
}
/* Card section icons */
.card-icon .nt-icon {
width: 14px; height: 14px;
color: currentColor;
}
/* Onboarding logo */
.ob-logo-icon .nt-icon {
width: 32px; height: 32px;
color: var(--teal);
filter: drop-shadow(0 0 6px rgba(29,233,212,0.5));
}
/* Active/hover glow states */
.tab.active .tab-icon .nt-icon,
.nav-item.active .nav-icon .nt-icon {
filter: drop-shadow(0 0 4px rgba(29,233,212,0.7));
}
/* ─────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
SECTION 2 — MAIN DESIGN SYSTEM (NutriCalc Clinical UI)
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
NUTRICAL CLINICAL — CLEAN DESIGN SYSTEM
Refactored UI: minimal, readable, clinical-grade
All JS hooks, IDs, and functionality preserved.
═══════════════════════════════════════════════════════ */
:root {
/* ── Core palette ── */
--bg: #020617;
--surface: #0f172a;
--surface2: #131d35;
--surface3: #172040;
--surface-solid: #0f172a;
--border-base: #1e293b;
--border: #1e293b;
/* ── Semantic colours ── */
--teal: #1de9d4;
--teal-dim: #0ec4b0;
--teal-glow: rgba(29,233,212,0.08);
--teal-glow2: rgba(29,233,212,0.04);
--amber: #f0b429;
--amber-dim: #c99010;
--red: #fb7185;
--green: #34d399;
--blue: #60a5fa;
--purple: #a78bfa;
/* ── Text hierarchy (ENHANCED — brighter throughout) ── */
--text: #f0f4f8; /* body text */
--text-dim: #c8d6e5; /* secondary / labels */
--text-bright: #ffffff; /* headings / values */
--text-muted: #94a3b8; /* placeholders */
/* ── Semantic aliases ── */
--text-primary: var(--text-bright);
--text-secondary: var(--text);
--text-label: var(--text-dim);
--text-placeholder:var(--text-muted);
--accent: var(--teal);
--accent-hover: var(--teal-dim);
--card-bg: var(--surface);
--input-bg: rgba(2,6,23,0.8);
--input-text: var(--text-bright);
--input-border: #1e293b;
--input-focus: rgba(29,233,212,0.45);
--tab-inactive: var(--text-dim);
--tab-active: var(--teal);
--btn-secondary-bg: rgba(15,23,42,0.8);
--btn-secondary-text: var(--text-dim);
--btn-secondary-border:#1e293b;
/* ── Typography ── */
--mono:'JetBrains Mono',monospace;
--sans:'Outfit',sans-serif;
--cond:'Syne',sans-serif;
/* ── Spacing / Radii ── */
--r-sm:6px; --r-md:10px; --r-lg:14px;
/* ── Shadows (no glow) ── */
--shadow-card: 0 2px 8px rgba(0,0,0,0.4);
--shadow-glow: none;
--glow-teal: none;
}
/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 60px;
}
/* ════════════════════════════════════════════════════════
GLOBAL TEXT BRIGHTNESS ENHANCEMENT
Lifts all faint inline text colors to readable levels.
Uses high-specificity selectors so inline styles are
overridden where they use the common dim color values.
════════════════════════════════════════════════════════ */
/* Every element whose color resolves to the old dim shades
gets a forced lift via the CSS custom property cascade.
Direct inline style="color:..." overrides are handled
by the !important rules below on common patterns. */
/* Inline style color overrides — dim greys → bright */
[style*="color:var(--text-dim)"],
[style*="color: var(--text-dim)"] {
color: var(--text-dim) !important;
}
[style*="color:var(--text-muted)"],
[style*="color: var(--text-muted)"] {
color: var(--text-muted) !important;
}
[style*="color:var(--text)"],
[style*="color: var(--text)"] {
color: var(--text) !important;
}
/* Boost common hardcoded faint colors used throughout the app */
/* rgba(160,180,200,...) family — typically faint label text */
/* We cannot override all inline rgba, but we can boost the
CSS class-based ones and the var() ones via the root shift. */
/* Card body text — ensure nothing is too dim */
.card-body, .card-body * {
color: inherit;
}
/* Input labels & form text */
.inp, select.inp {
color: var(--text-bright) !important;
}
/* Result divs that use inline color styles */
.m-val { color: var(--text-bright) !important; }
.m-lbl { color: var(--text-dim) !important; }
/* Section dividers and reference text */
.card-header .card-title { color: var(--text-bright) !important; }
/* Tab labels */
.tab-label { color: var(--text-dim); }
.tab-label.active, [data-tab].active .tab-label { color: var(--tab-active) !important; }
/* Recent activity meta */
.hp-recent-meta { color: var(--text-dim) !important; }
.hp-recent-diag { color: var(--text-bright) !important; }
/* Stat labels on home */
.hp-stat-lbl { color: var(--text-dim) !important; }
/* Section titles */
.hp-section-title { color: var(--text-dim) !important; }
/* Footer */
.hp-footer { color: var(--text-muted) !important; }
/* Ref card descriptions */
.hp-ref-name { color: var(--text-bright) !important; }
.hp-ref-desc { color: var(--text-dim) !important; }
/* Pedi metric labels */
.pedi-mc-label { color: var(--text-dim) !important; }
.pedi-mc-sub { color: var(--text-dim) !important; }
.pedi-row-label{ color: var(--text-dim) !important; }
.pedi-z-detail-label { color: var(--text-dim) !important; }
/* Tab topbar */
.tab-topbar-label { color: var(--text-bright) !important; }
.tab-topbar-back { color: var(--text-dim) !important; }
/* SW update bar */
.sw-update-text { color: var(--text-dim) !important; }
/* PWA banner */
.pwa-banner-sub { color: var(--text-dim) !important; }
/* Home hero sub */
.hp-sub { color: var(--text-dim) !important; }
/* Home tagline */
.hp-tagline { color: var(--text-bright) !important; }
/* ── Extra brightness: boost body default so all unclassed text is bright ── */
body { color: var(--text) !important; }
/* Boost the unit tags and small inline formula text */
.unit-tag { color: var(--text-dim) !important; }
/* Card section headers (bold labels inside cards) */
.card-header { color: var(--text-bright) !important; }
/* Any small-text note/hint lines — use text-dim (already boosted) not muted */
.pedi-note { color: var(--text-dim) !important; }
.pedi-row-note { color: var(--text-dim) !important; }
/* Reference card body lines */
.hp-ref-card div { color: var(--text-dim) !important; }
.hp-ref-card .hp-ref-name { color: var(--text-bright) !important; }
/* SDR (saved data records) items */
.sdr-item-title { color: var(--text-bright) !important; }
.sdr-item-sub { color: var(--text-dim) !important; }
/* ── Global scrollbars — always visible, high contrast ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0f1e; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 2px solid #0a0f1e; }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }
* { scrollbar-width: thin; scrollbar-color: #334155 #0a0f1e; }
/* ═══════════════════════════════════════════════════════
RESPONSIVE GRID — replaces hscroll for preset strips
.hscroll-wrap and .hscroll preserved for JS compat,
but now wrap naturally without forced horizontal scroll.
Only wide data tables retain hscroll-table overflow.
═══════════════════════════════════════════════════════ */
.hscroll-wrap { position: relative; width: 100%; }
/* ── Step 3+6: hscroll tracks — horizontal scroll with always-visible scrollbar ── */
.hscroll {
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding: 4px 0 10px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
/* Always-visible scrollbar */
scrollbar-width: thin;
scrollbar-color: #334155 #0a0f1e;
}
.hscroll::-webkit-scrollbar { height: 8px; }
.hscroll::-webkit-scrollbar-track { background: #0a0f1e; border-radius: 4px; }
.hscroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 2px solid #0a0f1e; }
.hscroll::-webkit-scrollbar-thumb:hover { background: var(--teal); }
/* Items size naturally */
.hscroll-item { flex: 0 0 auto; }
.hscroll-item.highlight-card { width: 260px; min-width: 240px; max-width: 300px; }
.hscroll-item.stat-card { min-width: 130px; flex: 0 0 150px; }
.hscroll-item.preset-pill { flex: 0 0 auto; }
/* Table-specific: always scrollable with visible bar */
.hscroll-table {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: #334155 #0a0f1e;
}
.hscroll-table::-webkit-scrollbar { height: 8px; }
.hscroll-table::-webkit-scrollbar-track { background: #0a0f1e; border-radius: 4px; }
.hscroll-table::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 2px solid #0a0f1e; }
.hscroll-table::-webkit-scrollbar-thumb:hover { background: var(--teal); }
/* Arrow buttons hidden */
.hscroll-btn, .hscroll-btn-l, .hscroll-btn-r { display: none; }
.hscroll-wrap::before, .hscroll-wrap::after { display: none; }
/* Mobile: keep nowrap so scroll stays intuitive */
@media (max-width: 480px) {
.hscroll { gap: 6px; }
}
/* ═══════════════════════════════════════════════════════
CLINICAL CONDITIONS MULTI-SELECT PANEL
═══════════════════════════════════════════════════════ */
.cond-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.cond-panel-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: rgba(29,233,212,0.05);
border-bottom: 1px solid rgba(29,233,212,0.15);
cursor: pointer;
user-select: none;
}
.cond-panel-title {
font-family: var(--cond);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--teal);
text-transform: uppercase;
}
.cond-panel-badge {
margin-left: auto;
font-family: var(--mono);
font-size: 9px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(29,233,212,0.12);
border: 1px solid rgba(29,233,212,0.3);
color: var(--teal);
}
.cond-search-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid rgba(56,100,168,0.15);
background: rgba(8,18,36,0.5);
}
.cond-search-bar input {
flex: 1;
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 6px;
padding: 7px 12px;
font-family: var(--mono);
font-size: 11px;
color: var(--input-text);
outline: none;
min-width: 0;
}
.cond-search-bar input:focus {
border-color: var(--input-focus);
box-shadow: 0 0 0 2px rgba(29,233,212,0.08);
}
.cond-active-strip {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 8px 16px;
background: rgba(29,233,212,0.03);
border-bottom: 1px solid rgba(56,100,168,0.12);
min-height: 36px;
align-items: center;
}
.cond-active-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 12px;
font-family: var(--mono);
font-size: 9px;
cursor: pointer;
border: 1px solid;
transition: opacity .15s;
}
.cond-active-pill:hover { opacity: 0.75; }
.cond-body {
padding: 14px 16px;
}
.cond-category {
margin-bottom: 14px;
}
.cond-cat-label {
font-family: var(--cond);
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
padding: 4px 0 8px;
border-bottom: 1px solid rgba(56,100,168,0.15);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 6px;
}
.cond-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cond-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid rgba(56,100,168,0.28);
background: rgba(8,18,36,0.6);
font-family: var(--mono);
font-size: 10px;
color: var(--text-dim);
cursor: pointer;
transition: all .18s;
user-select: none;
white-space: nowrap;
position: relative;
}
.cond-chip:hover {
border-color: rgba(29,233,212,0.4);
color: var(--text);
background: rgba(29,233,212,0.06);
}
.cond-chip.active {
border-color: rgba(29,233,212,0.6);
background: rgba(29,233,212,0.12);
color: var(--teal);
font-weight: 600;
}
.cond-chip.priority-high.active {
border-color: rgba(251,113,133,0.6);
background: rgba(251,113,133,0.10);
color: var(--red);
}
.cond-chip.priority-mod.active {
border-color: rgba(240,180,41,0.6);
background: rgba(240,180,41,0.10);
color: var(--amber);
}
.cond-chip .cond-info-icon {
font-size: 9px;
opacity: 0.5;
margin-left: 2px;
}
/* Tooltip */
.cond-chip .cond-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: rgba(5,12,24,0.97);
border: 1px solid rgba(29,233,212,0.3);
border-radius: 6px;
padding: 8px 10px;
width: 220px;
font-family: var(--mono);
font-size: 9px;
color: var(--text);
line-height: 1.6;
z-index: 1000;
pointer-events: none;
white-space: normal;
text-align: left;
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.cond-chip:hover .cond-tooltip { display: block; }
.cond-impact-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 10px;
padding: 10px 16px;
background: rgba(8,18,36,0.5);
border-top: 1px solid rgba(56,100,168,0.12);
font-family: var(--mono);
font-size: 10px;
}
.cond-impact-cell { text-align: center; }
.cond-impact-val { font-size: 13px; font-weight: 700; color: var(--teal); }
.cond-impact-lbl { font-size: 8px; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
/* Light mode overrides */
header {
background: #070c1a;
border-bottom: 1px solid #1e293b;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0;
padding: 0 24px;
min-height: 64px;
height: auto;
width: 100%;
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 200;
}
/* ── Logo ── */
.logo {
display: flex;
align-items: center;
gap: 13px;
flex-shrink: 0;
min-width: 0;
padding: 10px 0;
}
/* Icon badge — new MiNutriQ SVG logo */
.logo-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
}
.logo-icon::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: radial-gradient(circle, rgba(29,233,212,0.18) 0%, transparent 70%);
pointer-events: none;
animation: logo-glow-pulse 3s ease-in-out infinite;
}
@keyframes logo-glow-pulse {
0%,100% { opacity: 0.6; }
50% { opacity: 1; }
}
.logo-icon svg {
width: 46px; height: 46px;
fill: none;
stroke: none;
position: relative;
z-index: 1;
filter: none;
}
/* Logo SVG keyframes */
@keyframes logo-spin-ring {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes logo-spin-counter {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes logo-seg-1 { 0%,100%{opacity:1}40%{opacity:0.55} }
@keyframes logo-seg-2 { 0%,100%{opacity:0.75}60%{opacity:1} }
@keyframes logo-seg-3 { 0%,50%,100%{opacity:0.6}25%{opacity:1} }
@keyframes logo-seg-4 { 0%,100%{opacity:0.8}70%{opacity:0.45} }
@keyframes logo-ecg {
from { stroke-dashoffset: 200; opacity:0; }
10% { opacity:1; }
60% { stroke-dashoffset:0; opacity:1; }
80% { stroke-dashoffset:0; opacity:1; }
100% { stroke-dashoffset:-200; opacity:0; }
}
@keyframes logo-dot-pulse {
0%,100% { r:2.5px; opacity:0.8; }
50% { r:3.5px; opacity:1; }
}
@keyframes logo-bar-rise {
from { transform:scaleY(0); }
to { transform:scaleY(1); }
}
@keyframes logo-edge-glow {
0%,100% { stroke-opacity:0.25; }
50% { stroke-opacity:0.8; }
}
.logo-ring-outer { transform-origin:23px 23px; animation:logo-spin-ring 28s linear infinite; }
.logo-seg-1 { animation:logo-seg-1 4.2s ease-in-out infinite; }
.logo-seg-2 { animation:logo-seg-2 3.8s ease-in-out infinite 0.6s; }
.logo-seg-3 { animation:logo-seg-3 5.1s ease-in-out infinite 1.2s; }
.logo-seg-4 { animation:logo-seg-4 4.6s ease-in-out infinite 1.8s; }
.logo-ecg-path { stroke-dasharray:200; animation:logo-ecg 4s ease-in-out infinite 1s; }
.logo-center-dot { animation:logo-dot-pulse 2.5s ease-in-out infinite; }
.logo-edge-ring { animation:logo-edge-glow 3s ease-in-out infinite; }
.logo-bar-1 { animation:logo-bar-rise 1s ease-out forwards 0.3s; transform-origin:0 100%; transform:scaleY(0); }
.logo-bar-2 { animation:logo-bar-rise 1s ease-out forwards 0.5s; transform-origin:0 100%; transform:scaleY(0); }
.logo-bar-3 { animation:logo-bar-rise 1s ease-out forwards 0.7s; transform-origin:0 100%; transform:scaleY(0); }
.logo-bar-4 { animation:logo-bar-rise 1s ease-out forwards 0.9s; transform-origin:0 100%; transform:scaleY(0); }
/* ECG line draw animation */
/* ── Wordmark container ── */
.logo-wordmark {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
/* Main name — split colour treatment */
.logo-name {
font-family: var(--cond);
font-size: 18px;
font-weight: 800;
letter-spacing: 3px;
text-transform: none;
white-space: nowrap;
line-height: 1;
display: flex;
align-items: baseline;
gap: 0;
}
.logo-name-nutri {
color: var(--text-bright);
}
.logo-name-track {
color: var(--teal);
text-shadow: 0 0 20px rgba(29,233,212,0.45);
}
.logo-name-pro {
font-size: 10px;
font-family: var(--mono);
font-weight: 700;
letter-spacing: 2px;
color: var(--amber);
background: rgba(240,180,41,0.12);
border: 1px solid rgba(240,180,41,0.35);
border-radius: 3px;
padding: 1px 5px;
margin-left: 6px;
vertical-align: middle;
line-height: 1.6;
align-self: center;
}
/* Tagline row with clinical symbols */
.logo-sub {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 8.5px;
color: var(--text-dim);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-top: 3px;
white-space: nowrap;
}
.logo-sub-symbol {
color: var(--teal);
opacity: 0.7;
font-size: 10px;
}
.logo-sub-dot {
width: 2px; height: 2px;
border-radius: 50%;
background: rgba(29,233,212,0.4);
display: inline-block;
flex-shrink: 0;
}
/* Light mode overrides */
.header-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
flex-shrink: 1;
min-width: 0;
}
.status-pill {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
padding: 5px 10px;
border-radius: 20px;
border: 1px solid var(--border);
transition: all .3s;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
}
.status-pill.online {color:var(--green); border-color:rgba(52,211,153,0.2); background:rgba(52,211,153,0.05)}
.status-pill.offline {color:var(--text-dim); border-color:var(--border); background:transparent}
.status-pill.connecting {color:var(--amber); border-color:rgba(240,180,41,0.2); background:rgba(240,180,41,0.05)}
.dot {width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot.green {background:var(--green);animation:blink 1.8s infinite}
.dot.red {background:var(--red)}
.dot.amber {background:var(--amber);animation:blink 1s infinite}
@keyframes blink {0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes clock-colon-blink {0%,49%{opacity:1}50%,100%{opacity:0}}
.settings-btn {
font-family: var(--mono);
font-size: 11px;
color: var(--text-dim);
border: 1px solid var(--border);
background: transparent;
padding: 6px 12px;
border-radius: var(--r-sm);
cursor: pointer;
letter-spacing: 0.8px;
transition: all .2s;
white-space: nowrap;
flex-shrink: 0;
}
.settings-btn:hover {
color: var(--teal);
border-color: rgba(29,233,212,0.3);
background: rgba(29,233,212,0.05);
}
/* Medium */
@media (max-width: 820px) {
header { padding: 0 18px; }
.logo-name { font-size: 15px; letter-spacing: 2px; }
.logo-name-pro { font-size: 9px; }
.status-pill { font-size: 9.5px; padding: 5px 10px; }
.settings-btn { font-size: 10px; padding: 6px 11px; }
}
/* Small — logo row 1, controls row 2 */
@media (max-width: 600px) {
header { padding: 8px 14px; row-gap: 6px; }
.logo { flex: 1 0 100%; padding: 6px 0 2px; }
.header-right { flex: 1 0 100%; justify-content: space-between; gap: 5px; }
.logo-name { font-size: 14px; letter-spacing: 2px; }
.logo-sub { display: flex; }
.status-pill { font-size: 9px; padding: 5px 8px; flex-shrink: 1; }
.settings-btn { font-size: 9.5px; padding: 6px 10px; }
}
/* Extra-small */
@media (max-width: 400px) {
header { padding: 8px 10px; }
.logo-name { font-size: 13px; letter-spacing: 1.5px; }
.logo-sub { display: none; }
}
/* ════════════════════════════════════════════════════════
NAVIGATION TABS — Grouped, ordered by clinical workflow
Group 1: Clinical Tools (teal accent)
Group 2: Assessment & Planning (blue accent)
Group 3: Support (slate accent)
════════════════════════════════════════════════════════ */
/* ── TOP NAVIGATION BAR (4 primary tabs) ── */
.tabs {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
background: #060b18;
border-bottom: 1px solid var(--border);
padding: 0;
position: sticky;
top: var(--header-h, 64px);
z-index: 190;
}
/* Group label + sep — hidden (no longer used) */
.tab-group-label { display: none; }
.tab-group-sep { display: none; }
.tab {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 11px 8px 12px;
cursor: pointer;
color: var(--tab-inactive);
border-bottom: 2px solid transparent;
border-radius: 0;
transition: color .15s, border-color .15s, background .15s;
white-space: nowrap;
flex: 1;
margin-bottom: -1px;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.tab .tab-icon { font-size: 13px; flex-shrink: 0; line-height: 1; display: inline-flex; align-items: center; }
.tab .tab-label { letter-spacing: 0.7px; }
/* Active accent colours */
.tab-clinical.active { color: var(--teal); border-bottom-color: var(--teal); background: rgba(29,233,212,0.05); }
.tab-assess.active { color: var(--blue); border-bottom-color: var(--blue); background: rgba(96,165,250,0.05); }
.tab-support.active { color: var(--teal); border-bottom-color: var(--teal); background: rgba(29,233,212,0.05); }
.tab:hover:not(.active) {
color: var(--text);
background: rgba(255,255,255,0.025);
}
/* Light mode */
/* Responsive */
@media (max-width: 480px) {
.tab { font-size: 9px; padding: 10px 4px 11px; gap: 4px; }
.tab .tab-icon { font-size: 12px; }
}
/* ── BOTTOM NAVIGATION BAR (4 secondary tabs) ── */
.bottom-nav {
display: flex;
align-items: stretch;
background: #060b18;
border-top: 1px solid var(--border);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 195;
height: calc(var(--bottom-nav-h) + var(--sab));
padding-bottom: var(--sab);
}
.bottom-nav .tab {
flex-direction: column;
gap: 3px;
padding: 8px 4px 6px;
font-size: 9px;
border-bottom: none;
border-top: 2px solid transparent;
margin-bottom: 0;
margin-top: -2px;
}
.bottom-nav .tab .tab-icon { font-size: 16px; }
.bottom-nav .tab .tab-label { font-size: 8.5px; letter-spacing: 0.5px; }
/* Bottom nav active states — border flips to top */
.bottom-nav .tab-clinical.active {
color: var(--teal);
border-top-color: var(--teal);
border-bottom-color: transparent;
background: rgba(29,233,212,0.05);
}
.bottom-nav .tab-assess.active {
color: var(--blue);
border-top-color: var(--blue);
border-bottom-color: transparent;
background: rgba(96,165,250,0.05);
}
/* Light mode bottom nav */
/* AMOLED theme */
body.theme-amoled .bottom-nav { background: #000; }
/* ── Layout: full-width, minimal wasted space ── */
.main {
width: 100%;
max-width: 100%;
margin: 0;
padding: 16px 16px 16px 16px;
display: none;
box-sizing: border-box;
overflow-x: hidden;
}
.main.active { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ── Cards: edge-to-edge, minimal spacing ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
margin-bottom: 10px;
box-shadow: var(--shadow-card);
width: 100%;
box-sizing: border-box;
}
.card:last-child { margin-bottom: 0; }
/* ── Step 3+6: Card body overflow — horizontal scroll when content overflows ── */
.card-header {
background: var(--surface2);
padding: 10px 14px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
}
.card-icon { font-size: 13px; }
.card-title {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--teal);
}
.card-badge {
margin-left: auto;
font-family: var(--mono);
font-size: 8px;
color: var(--text-dim);
background: rgba(30,41,59,0.8);
padding: 2px 7px;
border-radius: 3px;
border: 1px solid var(--border);
letter-spacing: 0.5px;
white-space: nowrap;
}
.card-body {
padding: 12px 14px;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
/* ════════════════════════════════════════════════════════
FIELD GRID RULES
• Max 3 fields per row (form-row, inline grids, outputs)
• Min field width = ~3 characters (3ch + padding ≈ 48px)
• Applies to entry, output, metric, and result cards
════════════════════════════════════════════════════════ */
/* ── Base form grid — max 3 cols, wraps below min width ── */
.form-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(80px, 30%), 1fr));
gap: 10px;
margin-bottom: 10px;
}
/* Explicit column overrides (1 and 3 only — 2 uses auto) */
.form-row.c1 { grid-template-columns: 1fr; }
.form-row.c3 { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
/* ── form-group: never shrinks below 3 chars wide ── */
.form-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: max(80px, 3ch);
flex: 1;
}
/* ── All inputs and selects ── */
.inp, .sel {
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--r-sm);
padding: 8px 10px;
color: var(--input-text);
font-family: var(--mono);
font-size: 13px;
transition: border-color .15s, box-shadow .15s;
width: 100%;
min-width: max(48px, calc(3ch + 20px)); /* ≥ 3 characters + padding */
box-sizing: border-box;
}
.inp:focus, .sel:focus {
outline: none;
border-color: var(--input-focus);
box-shadow: 0 0 0 2px rgba(29,233,212,0.1);
background: rgba(2,6,23,0.95);
}
.inp::placeholder { color: var(--text-muted); font-size: 11px; }
.sel option { background: var(--surface); color: var(--input-text); }
/* ── Number inputs — monospace, 3-decimal-visible minimum ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }
input[type=number] { -moz-appearance:textfield; appearance:textfield }
input[type=number].inp {
font-size: 15px;
min-height: 40px;
min-width: max(64px, calc(3ch + 24px));
letter-spacing: .3px;
}
.unit-wrap input[type=number].inp { padding-right: 52px; }
/* ── Metric output cards (mc) — responsive ── */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(80px, 28%), 1fr));
gap: 8px;
margin-bottom: 12px;
}
.mc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px 12px 9px;
position: relative;
overflow: hidden;
min-width: max(80px, 3ch);
}
/* ── Inline style grids: global override — max 3 cols ── */
/* Any inline grid with 4+ cols gets capped at 3 */
[style*="grid-template-columns:1fr 1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
[style*="repeat(4"],
[style*="repeat(5"],
[style*="repeat(6"] {
grid-template-columns: repeat(auto-fill, minmax(max(80px, 28%), 1fr)) !important;
}
/* ── Fix max-width:1000px+ inner wrappers on small screens ── */
[style*="max-width:1000px"],
[style*="max-width: 1000px"],
[style*="max-width:1100px"],
[style*="max-width: 1100px"],
[style*="max-width:1200px"],
[style*="max-width: 1200px"],
[style*="max-width:920px"],
[style*="max-width:960px"] {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
/* ── Prevent any child from overflowing the main panel ── */
.main {
overflow-x: hidden;
}
.main * {
max-width: 100%;
min-width: 0;
}
.main input, .main select, .main textarea {
max-width: 100%;
box-sizing: border-box;
}
/* Ensure all inline-flex and flex children can shrink */
.main [style*="display:flex"] > *,
.main [style*="display: flex"] > * {
min-width: 0;
flex-shrink: 1;
}
/* ── Cap auto-fit grids that use small minmax ── */
[style*="repeat(auto-fit,minmax(120"],
[style*="repeat(auto-fit, minmax(120"],
[style*="repeat(auto-fit,minmax(140"],
[style*="repeat(auto-fit, minmax(140"],
[style*="repeat(auto-fit,minmax(155"],
[style*="repeat(auto-fit, minmax(155"] {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)) !important;
}
/* Cap wider auto-fit grids */
[style*="repeat(auto-fit,minmax(180"],
[style*="repeat(auto-fit, minmax(180"],
[style*="repeat(auto-fit,minmax(200"],
[style*="repeat(auto-fit, minmax(200"],
[style*="repeat(auto-fit,minmax(240"],
[style*="repeat(auto-fit, minmax(240"] {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)) !important;
}
/* Mobile: collapse all grids to 2-col, then 1-col */
@media (max-width: 600px) {
[style*="grid-template-columns"],
.form-row, .metrics-grid, .grid-2, .grid-3, .plan-grid, .totals-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.main { padding: 12px 10px; }
}
@media (max-width: 380px) {
[style*="grid-template-columns"],
.form-row, .metrics-grid, .grid-2, .grid-3, .plan-grid, .totals-grid {
grid-template-columns: 1fr !important;
}
}
/* ── plan-grid (output): 2 cols on wider, 1 on mobile ── */
.plan-grid {
display: grid;
grid-template-columns: repeat(2, minmax(max(80px, 30%), 1fr));
gap: 12px;
margin-top: 12px;
}
/* ── grid-2: 2-col layout with min-width guard ── */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(max(160px, 40%), 1fr));
gap: 12px;
}
/* ── Totals grid (recall): max 3 ── */
.totals-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(80px, 28%), 1fr));
gap: 10px;
margin-top: 14px;
}
/* ── lbl: ellipsis on narrow fields ── */
.lbl {
font-family: var(--mono);
font-size: 9px;
color: var(--text-dim);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.req { color: var(--red); }
.unit-wrap {position:relative}
.unit-wrap .inp {padding-right:50px}
.unit-tag {
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-family:var(--mono);font-size:10px;color:var(--teal-dim);
pointer-events:none;font-weight:600;letter-spacing:0.5px;
}
.anthro-inp {font-size:20px!important;padding:16px 58px 16px 16px!important;height:58px!important;letter-spacing:1px}
.anthro-inp-sm {font-size:16px!important;padding:13px 58px 13px 16px!important;height:48px!important}
.anthro-unit {font-size:12px!important;right:14px!important;color:var(--teal)!important;font-weight:700!important}
.radio-group {display:flex;gap:7px;flex-wrap:wrap}
.rbtn {flex:1;min-width:70px;position:relative}
.rbtn input {position:absolute;opacity:0;width:0;height:0}
.rbtn label {
display:block;text-align:center;padding:8px 10px;
font-family:var(--mono);font-size:10px;
color:var(--text-label); /* was --text-dim */
background:rgba(8,18,36,0.7);
border:1px solid rgba(56,100,168,0.25);
border-radius:var(--r-sm);
cursor:pointer;transition:all .2s;letter-spacing:0.5px;
}
.rbtn input:checked+label {
background: rgba(29,233,212,0.1);
border-color: rgba(29,233,212,0.45);
color:var(--teal);
box-shadow: 0 0 16px rgba(29,233,212,0.1);
}
.rbtn label:hover {border-color:rgba(29,233,212,0.3);color:var(--text-bright)}
.cbox-item {display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12px;color:var(--text)}
.cbox-item input {width:15px;height:15px;accent-color:var(--teal);cursor:pointer}
.auto-badge{display:none;font-size:8.5px;font-family:var(--mono);font-weight:700;letter-spacing:.5px;padding:2px 6px;border-radius:10px;background:rgba(29,233,212,0.15);color:#1de9d4;border:1px solid rgba(29,233,212,0.35);white-space:nowrap;animation:pulse-badge .6s ease}
@keyframes pulse-badge{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
.auto-badge.visible{display:inline-flex;align-items:center;gap:2px}
.calc-btn-wrap {
display: flex;
justify-content: center;
align-items: stretch;
gap: 8px;
width: 100%;
margin-top: 8px;
flex-wrap: wrap;
}
.calc-btn {
width: 100%;
max-width: 560px;
padding: 15px;
background: #007a68;
border: none;
border-radius: var(--r-md);
color: #fff;
font-family: var(--mono);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: background .2s, transform .15s;
}
.calc-btn:hover {
background: #00a088;
transform: translateY(-1px);
}
.calc-btn:active {transform:translateY(0)}
.print-btn {
font-family:var(--mono);font-size:10px;padding:8px 16px;
background:rgba(8,18,36,0.7);border:1px solid rgba(56,100,168,0.25);
border-radius:var(--r-sm);color:var(--text-dim);cursor:pointer;
transition:all .2s;letter-spacing:1px;
}
.print-btn:hover {border-color:rgba(29,233,212,0.3);color:var(--teal)}
#results-section {
margin-top: 10px;
display: none;
width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
#results-section .card,
#results-section .metrics-grid,
#results-section .plan-grid,
#results-section .grid-2 {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Results card-body: always scrollable on overflow */
#results-section .card-body {
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
/* ── RESULTS SECTION — use semantic colour vars (no forced white) ── */
#results-section { color: var(--text); }
/* Accent colour helpers — still needed */
#results-section .c-t { color: var(--teal) !important; }
#results-section .c-a { color: var(--amber) !important; }
#results-section .c-b { color: var(--blue) !important; }
#results-section .c-g { color: var(--green) !important; }
#results-section .c-r { color: var(--red) !important; }
/* Alert colours */
#results-section .alert.danger { color: #fda4af; }
#results-section .alert.warning { color: #fcd34d; }
#results-section .alert.info { color: var(--teal); }
#results-section .alert.success { color: #6ee7b7; }
/* Table */
#results-section .dtbl th { color: var(--text-dim); }
#results-section .dtbl td { color: var(--text); }
/* Results title */
.results-title {
font-family:var(--cond);font-size:16px;font-weight:800;
letter-spacing:2px;text-transform:uppercase;
color: var(--text-bright);
}
/* ── Metrics grid ── */
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.mc {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px 12px 9px;
position: relative;
overflow: hidden;
min-width: 0;
}
.mc::before {
content:'';
position:absolute;
top:0; left:0; right:0; height:2px;
border-radius:var(--r-md) var(--r-md) 0 0;
}
.mc-t::before {background:var(--teal)}
.mc-a::before {background:var(--amber)}
.mc-b::before {background:var(--blue)}
.mc-g::before {background:var(--green)}
.m-lbl {
font-family:var(--mono);
font-size:8px;
color:var(--text-dim);
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:7px;
font-weight:600;
}
.m-val {
font-family:var(--mono);
font-size:24px;
line-height:1;
margin-bottom:4px;
font-weight:700;
color:var(--text-bright);
}
.c-t {color:var(--teal) !important}
.c-a {color:var(--amber) !important}
.c-b {color:var(--blue) !important}
.c-g {color:var(--green) !important}
.c-r {color:var(--red) !important}
.m-unit {font-family:var(--mono);font-size:9px;color:var(--text-dim);margin-top:2px}
.m-range {margin-top:6px;font-size:9px;color:var(--text-dim);font-family:var(--mono);line-height:1.6;white-space:normal;word-break:break-word}
/* Mobile */
@media (max-width: 600px) {
.m-val { font-size: 20px !important; }
.m-lbl { font-size: 7.5px !important; }
.mc { padding: 12px 12px 10px !important; }
}
/* Responsive metrics grid — always max 3 columns */
#results-section .metrics-grid {
grid-template-columns: repeat(3, minmax(max(80px, 30%), 1fr)) !important;
}
@media (max-width: 700px) {
#results-section .metrics-grid { grid-template-columns: repeat(2, minmax(80px, 1fr)) !important; }
#results-section .grid-2 { grid-template-columns: 1fr !important; }
#results-section .plan-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
#results-section .metrics-grid {
display: flex !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
grid-template-columns: unset !important;
gap: 8px;
padding-bottom: 8px;
}
#results-section .metrics-grid .mc {
flex: 0 0 auto;
min-width: max(90px, 3ch);
}
}
.alert {
border-radius:var(--r-sm);padding:12px 16px;margin-bottom:12px;
display:flex;gap:10px;align-items:flex-start;
font-size:12px;line-height:1.7;border:1px solid;
font-family:var(--sans);
}
.ai {font-size:15px;flex-shrink:0;margin-top:1px}
.alert.danger {background:rgba(251,113,133,0.06);border-color:rgba(251,113,133,0.25);color:#fda4af}
.alert.warning {background:rgba(240,180,41,0.06);border-color:rgba(240,180,41,0.22);color:#fcd34d}
.alert.info {background:rgba(29,233,212,0.05);border-color:rgba(29,233,212,0.2);color:var(--teal)}
.alert.success {background:rgba(52,211,153,0.05);border-color:rgba(52,211,153,0.22);color:#6ee7b7}
.dtbl {width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
/* Result section table cells — use semantic vars */
#r-breakdown td, #r-recs td, #r-protein-table td, #r-labs td {
padding:8px 12px;
border-bottom:1px solid rgba(30,41,59,0.6);
color:var(--text);
font-family:var(--mono);
font-size:11px;
vertical-align:top;
line-height:1.6;
background:transparent;
}
#r-breakdown tr:hover td, #r-recs tr:hover td, #r-protein-table tr:hover td, #r-labs tr:hover td {
background:rgba(29,233,212,0.03);
}
.dtbl th {
text-align:left;padding:10px 14px;
background:var(--surface2);
color:var(--text-dim);font-size:8px;
letter-spacing:1.5px;text-transform:uppercase;
border-bottom:1px solid var(--border);
font-weight:600;
}
.dtbl td {
padding:10px 14px;
border-bottom:1px solid var(--border);
color:var(--text);vertical-align:top;
line-height:1.6;
}
.dtbl tr:last-child td {border-bottom:none}
.dtbl tr:hover td { background:rgba(29,233,212,0.02); }
.info-note {
font-family:var(--mono);font-size:10px;color:var(--text-dim);
background:var(--surface2);
border:1px solid var(--border);border-radius:var(--r-sm);
padding:10px 14px;margin-top:10px;line-height:1.8;
}
.divider-lbl {
font-family:var(--mono);font-size:8px;color:var(--text-dim);
letter-spacing:2px;text-transform:uppercase;
padding:14px 0 8px;
border-top:1px solid var(--border);
margin-top:14px;
}
.plan-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.plan-block {
background:var(--surface2);
border:1px solid var(--border);
border-radius:var(--r-md);padding:14px;
}
.plan-block-title {
font-family:var(--mono);font-size:9px;font-weight:700;
letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;
margin-bottom:10px;padding-bottom:8px;
border-bottom:1px solid var(--border);
}
.pi {
display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
padding:6px 0;border-bottom:1px dotted var(--border);
font-family:var(--mono);font-size:10px;line-height:1.5;
}
.pi:last-child {border-bottom:none}
.pi .k {color:var(--text-dim);flex:1;min-width:0}
.pi .v {color:var(--text-bright);font-weight:600;text-align:right;flex-shrink:0;max-width:60%;word-break:break-word}
.hist-item {
background:rgba(10,20,38,0.7);
border:1px solid rgba(56,100,168,0.2);
border-radius:var(--r-md);padding:14px 18px;margin-bottom:10px;
display:flex;align-items:center;gap:14px;
cursor:pointer;transition:all .25s;
}
.hist-item:hover {
border-color:rgba(29,233,212,0.3);
background:rgba(12,24,46,0.9);
transform:translateX(4px);
}
.hist-badge {
font-family:var(--mono);font-size:9px;padding:3px 10px;
border-radius:5px;background:rgba(29,233,212,0.08);
border:1px solid rgba(29,233,212,0.25);color:var(--teal);letter-spacing:0.5px;
}
.hist-meta {font-family:var(--mono);font-size:10px;color:var(--text-dim);margin-top:3px;letter-spacing:0.3px}
.hist-vals {margin-left:auto;text-align:right;font-family:var(--mono);font-size:11px}
.hist-del {
font-size:14px;color:var(--text-dim);background:none;
border:none;cursor:pointer;padding:4px 8px;border-radius:5px;
transition:all .2s;flex-shrink:0;
}
.hist-del:hover {color:var(--red);background:rgba(251,113,133,0.1)}
#settings-overlay {
display:none;position:fixed;inset:0;z-index:900;
background:rgba(0,0,0,0.55);
}
#settings-overlay.open {display:block}
#settings-drawer {
position:fixed;top:0;right:-440px;width:400px;height:100vh;
background:var(--bg);
border-left:1px solid var(--border);
z-index:901;display:flex;flex-direction:column;
transition:right .28s cubic-bezier(.4,0,.2,1);
box-shadow:-12px 0 40px rgba(0,0,0,0.55);
}
#settings-drawer.open {right:0}
.sdr-header {
padding:16px 20px;
border-bottom:1px solid var(--border);
display:flex;align-items:center;justify-content:space-between;
flex-shrink:0;background:var(--surface);
}
.sdr-title {
font-family:var(--cond);font-size:15px;font-weight:700;
letter-spacing:1px;color:var(--text-bright);
}
.sdr-close {
font-size:16px;color:var(--text-dim);
background:none;border:none;cursor:pointer;
width:28px;height:28px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;
}
.sdr-close:hover {background:rgba(251,113,133,0.12);color:var(--red)}
.sdr-body {flex:1;overflow-y:auto;padding:16px}
/* Group */
.sdr-group {margin-bottom:24px}
.sdr-group-label {
font-family:var(--mono);font-size:9px;font-weight:700;
letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;
margin-bottom:8px;
}
/* Item row */
.sdr-item {
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:11px 14px;
background:var(--surface);
border:1px solid var(--border);
border-radius:10px;
margin-bottom:4px;
min-height:44px;
}
.sdr-item-col {flex-direction:column;align-items:stretch}
.sdr-item-lbl {
font-family:var(--sans);font-size:13px;color:var(--text-bright);
font-weight:500;flex:1;display:flex;flex-direction:column;gap:2px;
}
.sdr-item-sub {
font-family:var(--mono);font-size:9px;color:var(--text-muted);
font-weight:400;letter-spacing:0;
}
/* Chip button */
.sdr-chip {
font-family:var(--mono);font-size:10px;
padding:5px 12px;border-radius:6px;cursor:pointer;letter-spacing:0.5px;
background:var(--surface2);border:1px solid var(--border);color:var(--text-dim);
transition:all .15s;white-space:nowrap;
}
.sdr-chip.active,.sdr-chip:hover {
background:rgba(29,233,212,0.08);border-color:rgba(29,233,212,0.4);color:var(--teal);
}
/* Wallpaper swatch grid */
.sdr-wp-row {
display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
}
.wp-swatch {
display:flex;flex-direction:column;align-items:center;gap:4px;
background:none;border:none;cursor:pointer;padding:0;
}
.wp-inner {
width:100%;aspect-ratio:1/0.7;border-radius:7px;
border:2px solid var(--border);display:block;
transition:border-color .15s;
}
.wp-swatch.active .wp-inner, .wp-swatch:hover .wp-inner {border-color:var(--teal)}
.wp-lbl {font-family:var(--mono);font-size:7.5px;color:var(--text-muted);letter-spacing:0.3px}
/* Legacy compat */
.sdr-row {display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
.sdr-row:last-child{border-bottom:none}
.sdr-lbl{font-family:var(--sans);font-size:13px;color:var(--text-bright);font-weight:500}
.sdr-sub{font-family:var(--mono);font-size:9px;color:var(--text-dim);margin-top:2px}
.sdr-section{margin-bottom:22px}
.sdr-section-title{font-family:var(--mono);font-size:8px;letter-spacing:2px;color:var(--amber);text-transform:uppercase;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.toggle {position:relative;width:42px;height:22px;flex-shrink:0}
.toggle input {opacity:0;width:0;height:0;position:absolute}
.toggle-track {
position:absolute;inset:0;
background:var(--surface3);
border:1px solid var(--border);
border-radius:22px;cursor:pointer;transition:all .25s;
}
.toggle input:checked+.toggle-track {background:rgba(29,233,212,0.2);border-color:var(--teal)}
.toggle-track::after {
content:'';position:absolute;
width:16px;height:16px;background:#94a3b8;
border-radius:50%;top:2px;left:2px;
transition:left .25s, background .25s;
}
.toggle input:checked+.toggle-track::after {left:20px;background:var(--teal)}
/* Setting select dropdowns */
.sdr-sel {
font-family:var(--mono);font-size:11px;
background:var(--input-bg);border:1px solid var(--border);
border-radius:var(--r-sm);color:var(--text);
padding:5px 10px;cursor:pointer;
}
.sdr-sel:focus {outline:none;border-color:var(--input-focus);}
/* Mode toggle */
.mode-toggle-wrap {display:flex;gap:8px}
.mode-btn {
flex:1;padding:10px;border-radius:var(--r-sm);
border:1px solid var(--border);background:var(--surface2);
cursor:pointer;text-align:center;transition:border-color .15s;
}
.mode-btn.active {border-color:var(--teal);}
.mode-btn:hover:not(.active) {border-color:rgba(29,233,212,0.3);}
.mode-check {display:none;color:var(--teal);font-size:11px}
.mode-btn.active .mode-check {display:inline;}
.mode-icon {font-size:18px;margin-bottom:4px}
.mode-label {font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
.mode-preview {height:28px;border-radius:4px;margin-bottom:6px;padding:4px 6px;display:flex;flex-direction:column;gap:3px}
.mp-bar {height:4px;border-radius:2px}
.mode-preview-dark {background:#07111c}
.mode-preview-light {background:#e8f0fb}
.size-btns {display:flex;gap:6px}
.size-btn {
font-family:var(--mono);font-size:11px;padding:5px 14px;
background:transparent;border:1px solid var(--border);
border-radius:var(--r-sm);color:var(--text-dim);cursor:pointer;transition:all .15s;
}
.size-btn.active,.size-btn:hover {
border-color:rgba(29,233,212,0.35);color:var(--teal);
background:rgba(29,233,212,0.05);
}
.sdr-footer {
border-top:1px solid var(--border);
padding:12px 16px;display:flex;gap:8px;flex-shrink:0;
background:var(--surface);
}
.sdr-reset {
padding:10px 16px;background:transparent;
border:1px solid var(--border);border-radius:8px;
color:var(--text-dim);font-family:var(--mono);font-size:10px;
cursor:pointer;letter-spacing:0.5px;transition:all .15s;white-space:nowrap;
}
.sdr-reset:hover {border-color:rgba(251,113,133,0.4);color:var(--red)}
.sdr-save {
flex:1;padding:10px 16px;
background:var(--teal);
border:none;border-radius:8px;color:#020617;
font-family:var(--mono);font-size:11px;font-weight:800;
cursor:pointer;letter-spacing:1px;transition:opacity .15s;
}
.sdr-save:hover {opacity:0.88}
.assess-section {
background:linear-gradient(160deg,rgba(12,22,42,0.9),rgba(8,16,32,0.95));
border:1px solid rgba(56,100,168,0.2);border-radius:var(--r-lg);
margin-bottom:18px;overflow:hidden;
box-shadow:var(--shadow-card);
position:relative;
}
.assess-section::before {
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent 5%,rgba(29,233,212,0.25) 35%,rgba(167,139,250,0.15) 65%,transparent 95%);
}
.assess-hdr {
background:linear-gradient(135deg,rgba(15,30,58,0.8),rgba(10,22,44,0.6));
padding:14px 20px;display:flex;align-items:center;gap:10px;
border-bottom:1px solid rgba(56,100,168,0.15);
}
.assess-hdr-title {
font-family:var(--cond);font-size:11px;font-weight:700;
letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);
}
.assess-body {padding:20px}
.field-group {display:flex;flex-direction:column;gap:6px}
.field-lbl {
font-family:var(--mono);font-size:8px;
color:rgba(100,160,220,0.7);letter-spacing:2.5px;text-transform:uppercase;
display:flex;align-items:center;gap:5px;
}
.field-inp {
background:rgba(8,18,40,0.85);
border:1px solid rgba(56,100,168,0.28);
border-radius:8px;
color:var(--text-bright);
font-family:var(--mono);
font-size:11.5px;
padding:9px 12px;
box-sizing:border-box;
width:100%;
transition:border-color .18s,box-shadow .18s,background .18s;
outline:none;
-webkit-appearance:none;
}
.field-inp::placeholder {color:rgba(100,140,200,0.38);font-size:10.5px}
.field-inp:focus {
border-color:rgba(29,233,212,0.55);
background:rgba(10,22,48,0.95);
box-shadow:0 0 0 3px rgba(29,233,212,0.08),0 2px 12px rgba(0,0,0,0.35);
}
.field-inp:hover:not(:focus) {border-color:rgba(56,100,168,0.5)}
select.field-inp {cursor:pointer}
.check-item:hover {border-color:rgba(29,233,212,0.3)}
.check-item input {accent-color:var(--teal);width:14px;height:14px;flex-shrink:0;cursor:pointer}
.check-item input:checked ~ span {color:var(--teal)}
.recall-exchange-card {
background:linear-gradient(160deg,rgba(10,20,38,0.85),rgba(8,16,32,0.9));
border:1px solid rgba(56,100,168,0.2);
border-radius:var(--r-lg);padding:18px;margin-bottom:14px;
position:relative;overflow:hidden;
}
.recall-exchange-card::before {
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(240,180,41,0.2),transparent);
}
.meal-header {display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.meal-title {
font-family:var(--cond);font-size:13px;font-weight:700;
letter-spacing:2.5px;color:var(--amber);text-transform:uppercase;
}
.recall-add-row {
display:grid;
grid-template-columns:2fr 1fr 2fr 0.8fr auto;
gap:12px;
align-items:end;
margin-bottom:12px;
padding:16px 18px;
background:rgba(6,14,32,0.7);
border:1px solid rgba(56,100,168,0.22);
border-radius:12px;
position:relative;
}
.recall-add-row::before {
content:'';position:absolute;top:0;left:18px;right:18px;height:1px;
background:linear-gradient(90deg,transparent,rgba(29,233,212,0.18),transparent);
}
@media (max-width:700px) {
.recall-add-row {
grid-template-columns:1fr 1fr;
padding:14px;
}
.recall-add-row > :last-child {
grid-column: 1 / -1;
}
}
.recall-item-row {
display:flex;align-items:center;gap:10px;
padding:9px 14px;
background:rgba(8,18,36,0.7);
border:1px solid rgba(56,100,168,0.18);border-radius:var(--r-sm);
margin-bottom:6px;font-family:var(--mono);font-size:11px;
transition:all .2s;
}
.recall-item-row:hover {border-color:rgba(29,233,212,0.2)}
.recall-del {
background:none;border:none;color:var(--text-dim);
cursor:pointer;font-size:14px;padding:2px 6px;
border-radius:4px;transition:all .2s;
}
.recall-del:hover {color:var(--red);background:rgba(251,113,133,0.1)}
.recall-totals {
background:rgba(8,18,36,0.8);border:1px solid rgba(56,100,168,0.2);
border-radius:var(--r-lg);padding:20px;margin-top:18px;
}
.totals-grid {display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.total-card {
background:rgba(10,20,40,0.8);
border:1px solid rgba(56,100,168,0.18);
border-radius:var(--r-md);padding:14px;text-align:center;
transition:all .25s;
}
.total-card:hover {border-color:rgba(29,233,212,0.25);transform:translateY(-2px)}
.total-val {
font-family:var(--mono);font-size:22px;font-weight:600;
line-height:1;margin-bottom:5px;
}
.total-lbl {font-family:var(--mono);font-size:8.5px;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase}
.adequacy-bar {height:4px;border-radius:2px;background:rgba(56,100,168,0.2);margin-top:8px;overflow:hidden}
.adequacy-fill {height:100%;border-radius:2px;transition:width .7s cubic-bezier(.2,.8,.3,1)}
.adequacy-pct {font-family:var(--mono);font-size:9px;color:var(--text-dim);margin-top:4px}
.dev-footer {
text-align:center;padding:16px;
font-family:var(--mono);font-size:10px;color:var(--text-dim);
border-top:1px solid rgba(56,100,168,0.12);
margin-top:6px;letter-spacing:0.5px;
}
.dev-footer a {color:var(--teal);text-decoration:none}
.dev-footer a:hover {text-decoration:underline;text-shadow:0 0 8px rgba(29,233,212,0.4)}
/* Disclaimer banner */
#disclaimer-banner {
background:rgba(240,180,41,0.08);
border-bottom:1px solid rgba(240,180,41,0.3);
padding:9px 24px;display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:11px;color:#fcd34d;
letter-spacing:0.3px;line-height:1.6;
position:sticky;top:60px;z-index:188;
}
#disclaimer-banner .disc-icon {font-size:14px;flex-shrink:0}
#disclaimer-banner .disc-close {
margin-left:auto;background:none;border:none;
color:rgba(252,211,77,0.4);cursor:pointer;
font-size:14px;padding:0 4px;flex-shrink:0;transition:color .15s;
}
#disclaimer-banner .disc-close:hover {color:#fcd34d}
/* Sticky calc button */
/* Validation */
.inp.invalid, .sel.invalid {
border-color:rgba(251,113,133,0.6)!important;
box-shadow:0 0 0 3px rgba(251,113,133,0.12)!important;
}
/* Guideline panels */
@media print {
.main{display:block!important;padding:16px!important}
.assess-section{border:1px solid #ccc;break-inside:avoid}
body{background:#fff;color:#000;font-size:11px}
.assess-hdr{background:#f0f0f0!important;-webkit-print-color-adjust:exact}
.field-inp,
body{padding:0}
header,.tabs,.bottom-nav,#status-bar,.print-btn,.calc-btn{display:none!important}
.main{display:block!important;padding:0!important;max-width:100%!important}
#tab-calculator,.grid-2{display:block!important}
.card{border:1px solid #ccc;break-inside:avoid;margin-bottom:12px}
.card-header{background:#f0f0f0!important;-webkit-print-color-adjust:exact}
.mc{border:1px solid #ccc;background:#f9f9f9!important}
.m-val{color:#000!important;font-size:20px!important}
.c-t,.c-a,.c-b,.c-g{color:#000!important}
#results-section{display:block!important}
.metrics-grid{grid-template-columns:repeat(4,1fr)!important}
.grid-2{grid-template-columns:1fr 1fr!important}
}
@media(max-width:900px){
.grid-2 { grid-template-columns: 1fr; }
.metrics-grid{ grid-template-columns: repeat(3, minmax(72px, 1fr)); }
.plan-grid { grid-template-columns: 1fr; }
.main { padding: 10px 12px; }
header { padding-left: 18px; padding-right: 18px; }
.totals-grid { grid-template-columns: repeat(3, minmax(72px, 1fr)); }
#settings-drawer { width: 100%; right: -100%; }
}
@media(max-width:600px){
/* Inputs + form grids → 1 col; metrics still scrollable at 2 */
.form-row { grid-template-columns: 1fr; }
.form-row.c3 { grid-template-columns: 1fr; }
.metrics-grid{
display: flex !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 8px;
padding-bottom: 8px;
grid-template-columns: unset !important;
scrollbar-width: thin;
scrollbar-color: #334155 #0a0f1e;
}
.metrics-grid::-webkit-scrollbar { height: 8px; }
.metrics-grid::-webkit-scrollbar-track { background: #0a0f1e; border-radius: 4px; }
.metrics-grid::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 2px solid #0a0f1e; }
.metrics-grid .mc {
flex: 0 0 auto;
min-width: max(100px, 3ch);
max-width: 160px;
}
.totals-grid { grid-template-columns: repeat(2, 1fr); }
.logo-name { font-size: 15px; }
header { padding: 0 14px; }
}
/* Smooth theme transitions — only on key elements, not everything */
body { transition: background-color .25s ease, color .25s ease; }
.card, .card-header, .mc, .tab, .inp, .sel, .preset-btn,
.settings-btn, .status-pill { transition: border-color .15s, background .15s, color .15s; }
/* Metric accent values */
/* strong slate-700 */
/* Checkboxes */
.preset-strip {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
padding: 8px 10px;
margin-bottom: 10px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
box-sizing: border-box;
width: 100%;
}
/* On wider screens, allow horizontal scroll if too many items */
@media (min-width: 601px) {
.preset-strip {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #334155 #0a0f1e;
}
}
.preset-strip::-webkit-scrollbar { height: 6px; }
.preset-strip::-webkit-scrollbar-track { background: #0a0f1e; border-radius: 3px; }
.preset-strip::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; border: 1px solid #0a0f1e; }
.preset-strip::-webkit-scrollbar-thumb:hover { background: var(--teal); }
.preset-btn {
font-family:var(--mono);
font-size:10px;
letter-spacing:.5px;
font-weight:600;
padding:5px 11px;
border-radius:var(--r-sm);
border:1px solid var(--border);
background:transparent;
color:var(--text-dim);
cursor:pointer;
transition:color .15s, border-color .15s, background .15s;
white-space:nowrap;
}
.preset-btn:hover {
border-color:rgba(29,233,212,0.35);
color:var(--teal);
background:rgba(29,233,212,0.05);
}
.preset-btn.active {
border-color:rgba(29,233,212,0.6);
color:var(--teal);
background:rgba(29,233,212,0.07);
}
#preset-icu {color:var(--teal);}
#preset-ward {color:var(--blue);}
#preset-sepsis:hover,#preset-ards:hover,
#preset-burns:hover,#preset-trauma:hover
{border-color:rgba(251,113,133,0.4);color:var(--red);}
#preset-sepsis.active,#preset-ards.active,
#preset-burns.active,#preset-trauma.active
{border-color:rgba(251,113,133,0.5);color:var(--red);}
#preset-pancreatitis:hover,#preset-renal:hover
{border-color:rgba(240,180,41,0.4);color:var(--amber);}
#preset-pancreatitis.active,#preset-renal.active
{border-color:rgba(240,180,41,0.55);color:var(--amber);}
/* Some inline styles hardcode dark colours — override for light mode */
/* Inline backgrounds */
/* Font swatches need legible text */
.mode-toggle-wrap {
display: flex; gap: 10px; margin-top: 4px;
}
.mode-btn {
flex: 1; display: flex; flex-direction: column;
align-items: center; gap: 8px;
padding: 14px 10px 12px;
border-radius: 12px;
border: 2px solid rgba(56,100,168,0.25);
background: rgba(8,18,36,0.6);
cursor: pointer; transition: all .25s;
position: relative; overflow: hidden;
}
.mode-btn:hover { border-color: rgba(29,233,212,0.35); }
.mode-btn.active {
border-color: var(--teal);
box-shadow: 0 0 20px rgba(29,233,212,0.15), inset 0 0 30px rgba(29,233,212,0.04);
}
.mode-btn .mode-icon { font-size: 26px; line-height: 1; }
.mode-btn .mode-label {
font-family: var(--cond); font-size: 10px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim);
}
.mode-btn.active .mode-label { color: var(--teal); }
.mode-btn .mode-check {
position: absolute; top: 7px; right: 9px;
font-size: 11px; color: var(--teal); opacity: 0; transition: opacity .2s;
}
.mode-btn.active .mode-check { opacity: 1; }
.mode-preview {
width: 100%; height: 32px; border-radius: 6px;
overflow: hidden; display: flex; flex-direction: column;
gap: 4px; padding: 5px 6px;
}
.mode-preview-dark { background: #07111c; }
.mode-preview-light { background: #f0f5fb; }
.mode-preview .mp-bar { height: 4px; border-radius: 2px; }
.pedi-subnav {
display:flex; flex-wrap:wrap; gap:3px; margin-bottom:0;
padding:6px 0 0; border-bottom:1px solid rgba(56,100,168,0.2);
}
.pedi-pill {
font-family:var(--mono); font-size:9.5px; font-weight:600;
letter-spacing:0.5px;
padding:7px 13px 9px; border-radius:8px 8px 0 0;
border:1px solid rgba(56,100,168,0.25); border-bottom:none;
background:rgba(8,18,36,0.5); cursor:pointer; color:var(--text-dim);
transition:all .2s; white-space:nowrap; margin-bottom:-1px;
}
.pedi-pill.active {
background:rgba(29,233,212,0.1); border-color:rgba(29,233,212,0.5);
border-bottom-color:var(--bg); color:var(--teal); font-weight:700;
}
.pedi-pill:hover:not(.active) { border-color:rgba(29,233,212,0.3); color:var(--text); background:rgba(29,233,212,0.04); }
@media(max-width:600px){.pedi-pill{font-size:9px;padding:6px 8px 8px;letter-spacing:0}}
.fenton-tile::before {
content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:2px;
}
.fenton-tile.wt::before { background:var(--amber); }
.fenton-tile.len::before { background:var(--blue); }
.fenton-tile.hc::before { background:var(--green); }
.fenton-tile-label {
font-family:var(--mono); font-size:8.5px; color:var(--text-dim);
letter-spacing:2px; text-transform:uppercase; margin-bottom:8px;
}
.fenton-big {
font-family:var(--mono); font-size:30px; font-weight:700; line-height:1; margin-bottom:4px;
}
.fenton-sub { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.fenton-badge {
display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700;
padding:3px 9px; border-radius:10px; letter-spacing:.5px; margin-top:6px;
}
.badge-sga { background:rgba(251,113,133,0.14); color:var(--red); border:1px solid rgba(251,113,133,0.35); }
.badge-aga { background:rgba(52,211,153,0.12); color:var(--green); border:1px solid rgba(52,211,153,0.30); }
.badge-lga { background:rgba(240,180,41,0.12); color:var(--amber); border:1px solid rgba(240,180,41,0.30); }
.badge-nd { background:rgba(100,140,200,0.10); color:var(--text-dim); border:1px solid var(--border); }
.pctl-bar-wrap { margin:10px 0 6px; position:relative; height:8px; border-radius:4px;
background:rgba(56,100,168,0.18); overflow:visible; }
.pctl-bar-fill { height:100%; border-radius:4px; transition:width .7s cubic-bezier(.2,.8,.3,1); }
.pctl-bar-marker {
position:absolute; top:-4px; width:3px; height:16px;
border-radius:2px; background:rgba(255,255,255,0.85);
transform:translateX(-50%); transition:left .7s cubic-bezier(.2,.8,.3,1);
box-shadow:0 0 6px rgba(0,0,0,0.5);
}
.pctl-bar-labels {
display:flex; justify-content:space-between;
font-family:var(--mono); font-size:8px; color:var(--text-dim);
margin-top:3px; padding:0 1px;
}
.pedi-date-info {
background:rgba(29,233,212,0.05); border:1px solid rgba(29,233,212,0.18);
border-radius:var(--r-sm); padding:12px 16px;
font-family:var(--mono); font-size:11px; color:var(--text); line-height:2;
}
.fenton-chart-wrap {
width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
border-radius:var(--r-md); border:1px solid var(--border);
background:var(--surface2);
}
.fenton-chart-svg { display:block; min-width:320px; width:100%; }
.pr-btn {
font-family: var(--mono);
font-size: 9px;
padding: 10px 16px;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-dim);
cursor: pointer;
letter-spacing: 1px;
white-space: nowrap;
transition: color .15s, border-color .15s;
}
.pr-btn:hover { color: var(--text); border-bottom-color: rgba(96,165,250,.4); }
.pr-btn.pr-active {
color: var(--blue);
border-bottom-color: var(--blue);
background: rgba(96,165,250,.07);
}
.dbtab-btn {
font-family: var(--mono);
font-size: 11px;
padding: 12px 22px;
background: none;
border: none;
border-bottom: 3px solid transparent;
color: var(--text-dim);
cursor: pointer;
letter-spacing: 1px;
white-space: nowrap;
transition: color .15s, border-color .15s, background .15s;
font-weight: 500;
}
.dbtab-btn:hover { color: var(--text); background: rgba(255,255,255,.03); }
.dbtab-btn.dbtab-active {
color: var(--teal);
border-bottom-color: var(--teal);
background: var(--teal-glow2);
font-weight: 700;
}
.cmam-banner {
border-radius:var(--r-md); padding:20px 22px;
display:flex; align-items:flex-start; gap:16px;
margin-bottom:18px; border:2px solid; position:relative; overflow:hidden;
}
.cmam-banner::before {
content:''; position:absolute; top:0; left:0; bottom:0; width:5px;
}
.cmam-sam { background:rgba(251,113,133,0.09); border-color:rgba(251,113,133,0.45); }
.cmam-mam { background:rgba(240,180,41,0.08); border-color:rgba(240,180,41,0.42); }
.cmam-norm { background:rgba(52,211,153,0.08); border-color:rgba(52,211,153,0.40); }
.cmam-sam::before { background:var(--red); }
.cmam-mam::before { background:var(--amber); }
.cmam-norm::before { background:var(--green); }
.cmam-icon { font-size:32px; flex-shrink:0; line-height:1; }
.cmam-label {
font-family:var(--cond); font-size:20px; font-weight:800;
letter-spacing:3px; line-height:1; margin-bottom:5px;
}
.cmam-full {
font-family:var(--mono); font-size:11px; letter-spacing:.5px;
margin-bottom:10px; opacity:.9;
}
.cmam-reasoning {
font-family:var(--mono); font-size:11px; line-height:1.9;
border-top:1px solid currentColor; padding-top:10px; margin-top:6px; opacity:.85;
}
.cmam-reasoning strong { opacity:1; }
.who-tile-grid {
display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;
margin-bottom:18px;
}
.who-tile {
background:var(--surface2); border:1px solid var(--border);
border-radius:var(--r-md); padding:15px 16px; position:relative; overflow:hidden;
}
.who-tile::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.who-tile-whz::before { background:var(--teal); }
.who-tile-waz::before { background:var(--blue); }
.who-tile-haz::before { background:var(--green); }
.who-tile-muac::before { background:var(--purple);}
.who-tile-label { font-family:var(--mono); font-size:8.5px; color:var(--text-dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.who-tile-z { font-family:var(--mono); font-size:28px; font-weight:700; line-height:1.1; margin-bottom:3px; }
.who-tile-sub { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.who-z-bar-wrap { margin:8px 0 4px; height:6px; border-radius:3px; background:rgba(56,100,168,0.18); position:relative; overflow:visible; }
.who-z-bar-fill { height:100%; border-radius:3px; transition:width .7s cubic-bezier(.2,.8,.3,1); }
.who-z-center { position:absolute; left:50%; top:-3px; width:2px; height:12px; background:rgba(255,255,255,0.3); transform:translateX(-50%); border-radius:1px; }
.who-z-labels { display:flex; justify-content:space-between; font-family:var(--mono); font-size:8px; color:var(--text-dim); }
.muac-indicator {
display:flex; align-items:center; gap:10px; padding:10px 14px;
border-radius:var(--r-sm); border:1px solid; margin-bottom:14px;
font-family:var(--mono); font-size:12px;
}
.muac-sam { border-color:rgba(251,113,133,0.4); background:rgba(251,113,133,0.07); color:var(--red); }
.muac-mam { border-color:rgba(240,180,41,0.4); background:rgba(240,180,41,0.07); color:var(--amber); }
.muac-norm { border-color:rgba(52,211,153,0.35); background:rgba(52,211,153,0.07); color:var(--green); }
.muac-nd { border-color:var(--border); background:var(--surface2); color:var(--text-dim); }
.oedema-yes { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
padding:5px 12px; border-radius:20px; background:rgba(251,113,133,0.1);
border:1px solid rgba(251,113,133,0.4); color:var(--red); font-weight:700; }
.oedema-no { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
padding:5px 12px; border-radius:20px; background:rgba(52,211,153,0.08);
border:1px solid rgba(52,211,153,0.3); color:var(--green); }
.who-ref-table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; }
.who-ref-table th { padding:8px 12px; background:rgba(8,18,36,0.7); color:var(--text-dim);
font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid var(--border); }
.who-ref-table td { padding:9px 12px; border-bottom:1px solid rgba(56,100,168,0.1); color:var(--text); vertical-align:middle; }
.who-ref-table tr:last-child td { border-bottom:none; }
.btn-calc {
display:block; width:100%; max-width:480px; margin:0 auto;
padding:14px 20px; border-radius:var(--r-md);
background:linear-gradient(135deg,rgba(29,233,212,0.15),rgba(96,165,250,0.12));
border:1.5px solid rgba(29,233,212,0.55); color:var(--teal);
font-family:var(--cond); font-size:14px; letter-spacing:2.5px;
font-weight:700; text-transform:uppercase; cursor:pointer;
transition:all .2s;
}
.btn-calc:hover { background:rgba(29,233,212,0.22); box-shadow:0 0 20px rgba(29,233,212,0.2); }
.dis-row { border-bottom:1px solid rgba(56,100,168,0.10); transition:background .15s; }
.dis-row:hover { background:rgba(29,233,212,0.04) !important; }
.dis-alt { background:rgba(8,18,36,0.35); }
.dis-section-hdr { }
.dis-cond {
padding:8px 12px; font-family:var(--mono); font-size:10.5px;
color:var(--text); font-weight:600; vertical-align:top;
}
.dis-kcal {
padding:8px 12px; font-family:var(--mono); font-size:10px;
color:var(--text-dim); line-height:1.7; vertical-align:top;
}
.dis-kcal strong { color:var(--amber); }
.dis-prot {
padding:8px 12px; font-family:var(--mono); font-size:10px;
color:var(--text-dim); line-height:1.7; vertical-align:top;
}
.dis-prot strong { color:var(--green); }
.dis-note {
padding:8px 12px; font-family:var(--mono); font-size:9.5px;
color:var(--text-dim); line-height:1.7; vertical-align:top;
font-style:italic;
}
.dis-row.hidden { display:none; }
/* ── Header Support Button ── */
.support-header-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--amber);
background: rgba(240,180,41,0.1);
border: 1px solid rgba(240,180,41,0.35);
border-radius: 20px;
padding: 6px 13px;
cursor: pointer;
text-decoration: none;
transition: background .2s, border-color .2s, transform .15s;
white-space: nowrap;
flex-shrink: 0;
}
.support-header-btn:hover {
background: rgba(240,180,41,0.18);
border-color: var(--amber);
transform: translateY(-1px);
}
@media (max-width: 600px) {
.support-header-label { display: none; }
.support-header-btn { padding: 6px 9px; }
}
/* ── Floating Support Developer Button (old FAB CSS purge) ── */
#offline-banner{
display:none;position:fixed;top:0;left:0;right:0;z-index:9998;
background:rgba(251,113,133,0.15);border-bottom:1px solid rgba(251,113,133,0.35);
padding:9px 20px;font-family:var(--mono);font-size:11px;color:#ffb3bf;
text-align:center;
}
#offline-banner.visible{display:block}
/* ── Clear button ── */
.nt-clear-btn {
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(251,113,133,0.85);
background: rgba(251,113,133,0.06);
border: 1px solid rgba(251,113,133,0.3);
border-radius: 8px;
padding: 10px 24px;
cursor: pointer;
transition: background .18s, border-color .18s, color .18s;
white-space: nowrap;
}
.nt-clear-btn:hover {
background: rgba(251,113,133,0.14);
border-color: rgba(251,113,133,0.6);
color: #fb7185;
}
/* ── Collapsible card-header ── */
.card-header.nt-collapsible {
cursor: pointer;
user-select: none;
transition: background .18s;
}
.card-header.nt-collapsible:hover {
background: rgba(29,233,212,0.06);
}
.nt-chevron {
margin-left: auto;
font-size: 9px;
color: var(--teal);
opacity: 0.7;
transition: transform .25s cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
}
.nt-chevron.collapsed { transform: rotate(-90deg); }
/* Collapsible body transition */
.nt-collapsible-body {
overflow: hidden;
transition: none;
}
.nt-collapsible-body.collapsed { display: none; }
/* ── Refeeding section collapsible header ── */
.rf-collapsible-hdr {
cursor: pointer;
user-select: none;
border-radius: 7px;
transition: background .18s;
padding: 4px 6px;
margin: -4px -6px 12px;
}
.rf-collapsible-hdr:hover {
background: rgba(255,64,96,0.08);
}
/* ─── Refeeding Risk checkboxes (extracted from inline) ─── */
/* ── Uniform refeeding checkboxes ── */
#cb-refeeding .cbox-item {
padding: 9px 11px;
gap: 10px;
font-size: 11.5px;
min-height: 38px;
align-items: center;
box-sizing: border-box;
}
#cb-refeeding .cbox-item input[type=checkbox] {
width: 17px;
height: 17px;
min-width: 17px;
min-height: 17px;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--red, #ef4444);
margin: 0;
box-sizing: border-box;
}
/* ─── GLIM 2019 checkboxes (extracted from inline) ─── */
#glim-section .cbox-item { padding: 10px 12px; gap: 12px; font-size: 12.5px; }
#glim-section .cbox-item input[type=checkbox] { width: 20px; height: 20px; min-width: 20px; accent-color: var(--teal); cursor: pointer; }
#glim-section .auto-badge { font-size: 9px; padding: 3px 8px; }
/* ─── Feedback emoji buttons (extracted from inline) ─── */
font-size:20px;background:var(--surface3);border:2px solid transparent;
border-radius:8px;padding:6px 8px;cursor:pointer;transition:all .15s;line-height:1;
}
/* ─── Adult module — extracted utility classes ─── */
.nt-lbl-dim { color: var(--text-dim); font-size: 8px; }
.nt-section-sub { font-family: var(--mono); font-size: 8px; color: #a8c8e8; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.nt-val-white { font-family: var(--mono); font-size: 11px; color: #ffffff; margin-top: 4px; }
.inp--lg { font-size: 16px; height: 46px; padding-top: 10px; padding-bottom: 10px; padding-left: 14px; font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════
CONTROLLED COPY BEHAVIOUR
Policy:
• Nothing selectable by default (body-level lock)
• Inputs / textareas — always selectable (browser default restored)
• Designated result containers — selectable + ::selection styled
• Tabs, labels, nav, buttons — explicitly non-selectable &
non-long-pressable via touch-action
═══════════════════════════════════════════════════════════════ */
/* 1 ── Global lock: nothing selectable unless opted in */
body,
.tab, .tab-label, .tab-icon,
.bottom-nav, .top-nav, .nav-bar,
.lbl, .field-lbl, label,
.card-title, .card-header,
.total-lbl, .adequacy-pct,
button, .btn, .print-btn,
.tab-topbar, .tab-topbar-label, .tab-topbar-back,
.splash-screen, .splash-title, .splash-tagline,
.mod-title, .feat, .feat-dot,
h1, h2, h3, h4,
.section-label, .field-group > label,
.recall-exchange-card .meal-header,
.meal-title,
.cond-chip, .cond-panel-title,
.nt-section-sub, .nt-lbl-dim {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/* Block long-press text-selection on touch devices */
-webkit-touch-callout: none;
touch-action: manipulation;
}
/* 2 ── Inputs: always fully selectable (overrides global lock) */
input, textarea, select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
.inp, .sel, .field-inp {
-webkit-user-select: text !important;
-moz-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
/* 3 ── Result/output containers: selectable */
#results-section,
#en-results,
#pt-results, #nn-results, #ie-results, #il-results,
#c10-results, #ad-results, #uc-results,
#amp-output,
#recall-totals-panel,
#recall-analysis-panel,
#recall-analysis-table,
#mp-totals-card,
#mp-meals-grid,
#mp-manual-analysis-out,
#mp-ons-card,
.alert,
.recall-totals {
-webkit-user-select: text !important;
-moz-user-select: text !important;
user-select: text !important;
-webkit-touch-callout: default !important;
}
/* 4 ── Selection highlight styling in result areas */
#results-section ::selection,
#en-results ::selection,
#pt-results ::selection, #nn-results ::selection,
#ie-results ::selection, #il-results ::selection,
#c10-results ::selection, #ad-results ::selection,
#uc-results ::selection,
#amp-output ::selection,
#recall-totals-panel ::selection,
#recall-analysis-panel ::selection,
#mp-totals-card ::selection,
#mp-meals-grid ::selection,
#mp-manual-analysis-out ::selection,
.alert ::selection {
background: rgba(29, 233, 212, 0.25);
color: #fff;
}
/* 5 ── Copy Results button — injected via JS */
.nt-copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 6px 16px;
border-radius: 7px;
border: 1.5px solid rgba(29, 233, 212, 0.4);
background: rgba(29, 233, 212, 0.07);
color: var(--teal);
cursor: pointer;
transition: all .18s;
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
.nt-copy-btn:hover {
background: rgba(29, 233, 212, 0.16);
border-color: rgba(29, 233, 212, 0.75);
box-shadow: 0 2px 12px rgba(29, 233, 212, 0.14);
}
.nt-copy-btn.copied {
border-color: rgba(52, 211, 153, 0.6);
background: rgba(52, 211, 153, 0.1);
color: var(--green);
}