/* =============== TECHNICAL/EDITORIAL THEME — Systems Design Aesthetic Inspired by precision instruments, field manuals, and architectural drawings. Mobile-first responsive layout preserved. =============== */ /* ── Google Fonts fallback stack ── */ /* Playfair Display: editorial serif for headings */ /* JetBrains Mono: monospace for data, labels, metadata */ :root { --appbar-h: 120px; --dock-h: 72px; --dock-w: 72px; /* App identity — update this string when releasing a new version */ --app-ticker: "METABOLOG /// NUTRITIONAL FIELD SYSTEM /// v2"; /* Warm cream palette — light default */ --bg: #f0ece4; --fg: #111; --card: #f8f5ef; --border: #111; /* Accents: teal primary, orange-red secondary, red danger */ --accent: #007d8a; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #6b6560; /* No offset shadow — precision lines only */ --shadow: none; --radius: 0; --ring: 1px solid var(--border); --btn-text: #111; /* Typography scale */ --font-serif: "Playfair Display", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "Courier New", Courier, monospace; --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ══════════════════════════════════════════ COLOUR THEMES (set via ) Each theme preserves the cream warmth while shifting the accent hue. ══════════════════════════════════════════ */ /* ── Light Themes ── */ :root[data-theme="blue"] { --bg: #f0ece4; --fg: #111; --card: #f8f5ef; --border: #111; --accent: #007d8a; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #6b6560; --btn-text: #111; } :root[data-theme="mint"] { --bg: #edf2ed; --fg: #0c110d; --card: #f4f8f4; --border: #0c110d; --accent: #0a7c5e; --accent-2: #c85c1a; --accent-3: #b32c2c; --muted: #4e5e52; --btn-text: #0c110d; } :root[data-theme="peach"] { --bg: #f2ede6; --fg: #13100d; --card: #f9f5f0; --border: #13100d; --accent: #b54a1b; --accent-2: #007d8a; --accent-3: #8c1e1e; --muted: #5a5349; --btn-text: #13100d; } :root[data-theme="grape"] { --bg: #f0ecf4; --fg: #100d16; --card: #f7f4fa; --border: #100d16; --accent: #5c32c8; --accent-2: #c8501a; --accent-3: #9e1e4a; --muted: #5b5269; --btn-text: #100d16; } :root[data-theme="slate"] { --bg: #eaedf0; --fg: #0c1218; --card: #f2f5f7; --border: #0c1218; --accent: #0ea5e9; --accent-2: #d64b1b; --accent-3: #b32c2c; --muted: #57687a; --btn-text: #0c1218; } :root[data-theme="sand"] { --bg: #f2ede2; --fg: #13110d; --card: #faf6ee; --border: #13110d; --accent: #0077b6; --accent-2: #d4611a; --accent-3: #b32c2c; --muted: #63594e; --btn-text: #13110d; } /* ── Dark Themes ── */ :root[data-theme="blue-dark"] { --bg: #141210; --fg: #f0ece4; --card: #1e1b17; --border: #f0ece4; --accent: #2ab8c8; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a89f96; --btn-text: #f0ece4; } :root[data-theme="mint-dark"] { --bg: #101412; --fg: #e8f0ea; --card: #1a231e; --border: #e8f0ea; --accent: #16c995; --accent-2: #e8621e; --accent-3: #d44040; --muted: #8fb09a; --btn-text: #e8f0ea; } :root[data-theme="peach-dark"] { --bg: #130f0c; --fg: #f8f0e8; --card: #201710; --border: #f8f0e8; --accent: #e87055; --accent-2: #2ab8c8; --accent-3: #d44040; --muted: #b89a8a; --btn-text: #f8f0e8; } :root[data-theme="grape-dark"] { --bg: #0e0a15; --fg: #f0eaff; --card: #1a1426; --border: #f0eaff; --accent: #9070ff; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a898bc; --btn-text: #f0eaff; } :root[data-theme="slate-dark"] { --bg: #0c1018; --fg: #e8f0f7; --card: #141e28; --border: #e8f0f7; --accent: #38c8f5; --accent-2: #e8621e; --accent-3: #d44040; --muted: #8aa4bc; --btn-text: #e8f0f7; } :root[data-theme="sand-dark"] { --bg: #110e08; --fg: #f8f4ea; --card: #1e1810; --border: #f8f4ea; --accent: #00a3cc; --accent-2: #e8621e; --accent-3: #d44040; --muted: #b8a882; --btn-text: #f8f4ea; } @media (prefers-color-scheme: dark) { :root { --bg: #141210; --fg: #f0ece4; --card: #1e1b17; --border: #f0ece4; --accent: #2ab8c8; --accent-2: #e8621e; --accent-3: #d44040; --muted: #a89f96; } } /* ══════════════════════════════════════════ GLOBAL RESET & BASE ══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } /* Paper/grain texture overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 300px 300px; opacity: 1; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.45; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ── Editorial typography ── */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: 1.8rem; margin: 0 0 0.75rem; } h2 { font-size: 1.3rem; margin: 0 0 0.5rem; } h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } /* ══════════════════════════════════════════ UTILITY CLASSES ══════════════════════════════════════════ */ .grid { display: grid; } .row { display: flex; } .wrap { flex-wrap: wrap; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .w-full { width: 100%; } /* ══════════════════════════════════════════ APP BAR / HEADER ══════════════════════════════════════════ */ .appbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); } /* Thin status ticker above the main nav row */ .appbar::before { content: var(--app-ticker); display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent); } .brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; padding: .55rem 1rem; } .brand .logo { height: 30px; width: 30px; border: 1px solid var(--border); display: grid; place-items: center; background: var(--accent); } .brand .logo img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); } .app-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } /* Nav pills — refined, no offset shadow */ .pill { border: 1px solid var(--border); padding: .35rem .7rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--btn-text); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pill:hover { background: var(--fg); color: var(--bg); } .pill.selected { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── Theme toggle switch ── */ .theme-toggle-switch { position: relative; width: 3.2rem; height: 1.6rem; border: 1px solid var(--border); background: transparent; cursor: pointer; padding: 0; overflow: hidden; transition: background 0.2s ease; } .theme-toggle-switch:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); } .theme-switch-slider { position: absolute; top: 1px; left: 1px; width: 1.3rem; height: calc(100% - 2px); background: var(--accent); display: flex; align-items: center; justify-content: center; transition: left 0.25s ease; } .theme-toggle-switch.dark .theme-switch-slider { left: calc(100% - 1.3rem - 1px); } .theme-switch-icon { font-size: .85rem; line-height: 1; display: block; } /* ══════════════════════════════════════════ SHELL / LAYOUT SCAFFOLDING ══════════════════════════════════════════ */ .shell { min-height: 100dvh; padding-bottom: calc(var(--dock-h) + 1rem); } .view { padding-top: calc(var(--appbar-h) + 0.5rem); } .history { min-height: 100%; overflow-y: auto; padding-bottom: calc(var(--dock-h) + 1rem); } /* ══════════════════════════════════════════ CARDS — corner-bracket frame aesthetic ══════════════════════════════════════════ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); position: relative; padding: 1rem; } /* Corner brackets */ .card::before, .card::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--accent); border-style: solid; pointer-events: none; } .card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } .card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } .card h2 { margin: 0; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .card h3 { margin: 0; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; } .card .toolbar { display: flex; gap: .5rem; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--border); background: transparent; color: var(--btn-text); padding: .5rem .85rem; border-radius: 0; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); } .btn[aria-pressed="true"], .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.warn { background: var(--accent-3); color: #fff; border-color: var(--accent-3); } .btn:active:not(:disabled) { opacity: 0.85; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Size variants */ .btn-lg { font-size: .8rem; padding: .65rem 1.1rem; } .btn-sm { font-size: .65rem; padding: .3rem .55rem; } /* Semantic variants (also used in settings) */ .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); } .btn-secondary { background: color-mix(in srgb, var(--accent-2) 15%, transparent); border-color: var(--accent-2); color: var(--accent-2); } .btn-danger { background: var(--accent-3); color: #fff; border-color: var(--accent-3); } .btn-danger:hover:not(:disabled) { filter: brightness(1.1); } /* ── Form inputs ── */ .input, .select { width: 100%; display: block; padding: .6rem .8rem; font-size: .9rem; font-family: var(--font-mono); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: 0; outline: none; appearance: none; font-weight: 400; transition: border-color 0.15s ease; } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); } .input[type="number"], .input[type="date"] { font-family: var(--font-mono); } .select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='square'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .65rem center; background-size: 16px; padding-right: 2.2rem; } .card label { display: block; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; } /* ── Progress bars ── */ .bar { position: relative; height: 10px; border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); border-radius: 0; background: color-mix(in srgb, var(--bg) 60%, var(--card)); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.4s ease; } .bar .tick { position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, transparent 0 48px, color-mix(in srgb, var(--border) 12%, transparent) 48px, color-mix(in srgb, var(--border) 12%, transparent) 50px ); } .bar-overflow { border-color: var(--accent-3); } .bar-overflow > span { background: var(--accent-3); } /* ── Section containers ── */ .section { display: grid; gap: 1rem; } /* ── Meal list ── */ .meal { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .25rem; } .meal h3 { margin: 0; font-size: .95rem; font-weight: 600; font-family: var(--font-serif); } .meta { font-size: .82rem; color: var(--muted); } .grid .card .meta { margin-top: 0.4rem; } /* ══════════════════════════════════════════ BOTTOM DOCK / NAV ══════════════════════════════════════════ */ .dock { background: var(--bg); gap: 0; padding: 0; } .dock-mobile { position: fixed; inset: auto 0 0 0; z-index: 100; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); } .dock-desktop { display: none; } /* Shared dock button */ .dock .dock-btn { display: flex; border: none; border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent); border-radius: 0; background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; cursor: pointer; } .dock .dock-btn:last-child { border-right: none; } .dock .dock-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg); } .dock .dock-btn.selected { background: var(--fg); color: var(--bg); } .dock .dock-btn:active { opacity: 0.75; } .dock .dock-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; position: relative; } .dock .dock-btn:disabled::after { content: "Soon"; position: absolute; top: 3px; right: 3px; background: var(--accent-2); color: #fff; font-size: 0.55rem; padding: 1px 4px; font-weight: 700; letter-spacing: 0.05em; } .dock-mobile .dock-btn { flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .6rem .3rem; } /* ══════════════════════════════════════════ LAYOUT — mobile first ══════════════════════════════════════════ */ .container { display: grid; gap: 1rem; padding: 0 1rem 1rem 1rem; } .content-container { padding-bottom: calc(var(--dock-h) + 1rem); } /* ── Desktop ── */ @media (min-width: 900px) { .container { grid-template-columns: 1.25fr .75fr; align-items: start; padding: 0 1.25rem 1.25rem 1.25rem; gap: 1.25rem; } .content-container { margin-top: calc(var(--appbar-h) + 1.25rem); margin-bottom: 0; } .section.grid-2 { grid-template-columns: 1fr 1fr; } .shell { padding-top: calc(var(--appbar-h) + 1.25rem); padding-bottom: 2rem; } .dock-mobile { display: none; } .dock-desktop { display: flex; position: static; flex-direction: column; border: 1px solid var(--border); border-radius: 0; margin-bottom: 1rem; } .dock-desktop .dock-btn { flex-direction: row; justify-content: flex-start; align-items: center; font-size: .72rem; padding: .65rem .75rem; text-align: left; border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); } .dock-desktop .dock-btn:last-child { border-bottom: none; } } /* ══════════════════════════════════════════ HELPER / DEMO CLASSES ══════════════════════════════════════════ */ .ghost { opacity: .55; } .chip { display: inline-block; border: 1px solid var(--border); padding: .15rem .45rem; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent-2) 12%, var(--card)); color: var(--fg); } .theme-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border: 1px solid var(--border); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s ease; } .theme-badge:hover { opacity: 0.85; } /* ══════════════════════════════════════════ GRID LAYOUTS ══════════════════════════════════════════ */ .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } /* ══════════════════════════════════════════ MICRO STAT CARDS ══════════════════════════════════════════ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; } .stat-card { padding: .75rem; border: 1px solid color-mix(in srgb, var(--border) 40%, transparent); background: var(--card); position: relative; } /* Corner accent on stat cards */ .stat-card::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 2px; background: var(--accent); } .stat-card .stat-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; } .stat-card .stat-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--fg); line-height: 1.1; } .stat-card .stat-unit { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); font-weight: 400; } /* ══════════════════════════════════════════ RATIO BADGES ══════════════════════════════════════════ */ .ratio-badge { display: inline-block; padding: .2rem .45rem; border: 1px solid var(--border); font-family: var(--font-mono); font-size: .65rem; font-weight: 600; letter-spacing: 0.06em; background: color-mix(in srgb, var(--accent-2) 15%, var(--card)); } .ratio-badge.good { background: color-mix(in srgb, var(--accent) 15%, var(--card)); color: var(--accent); } .ratio-badge.warning { background: color-mix(in srgb, var(--accent-3) 15%, var(--card)); color: var(--accent-3); } /* ══════════════════════════════════════════ SECTION HEADER ══════════════════════════════════════════ */ .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 20%, transparent); } /* ══════════════════════════════════════════ CALENDAR ══════════════════════════════════════════ */ .calendar-overlay { position: fixed; inset: 0; background: color-mix(in srgb, #000 55%, transparent); display: grid; place-items: center; z-index: 200; padding: 1rem; } .calendar-modal { max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; } .calendar-grid.calendar-week { gap: .6rem; } .calendar-day-header { text-align: center; padding: .4rem; font-family: var(--font-mono); font-size: .65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .calendar-day { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--border) 35%, transparent); background: var(--card); cursor: pointer; font-family: var(--font-mono); font-size: .85rem; transition: background 0.12s ease, color 0.12s ease; } .calendar-day:hover { background: color-mix(in srgb, var(--fg) 8%, var(--card)); } .calendar-day:active { opacity: 0.75; } .calendar-day.calendar-day-empty { border: none; background: transparent; cursor: default; } .calendar-day.is-today { background: var(--fg); color: var(--bg); font-weight: 700; } .calendar-day.is-selected { border-color: var(--accent); border-width: 2px; } .calendar-day.has-log { background: color-mix(in srgb, var(--accent) 12%, var(--card)); } .calendar-day.has-log.is-today { background: var(--fg); } .calendar-day .day-number { font-size: .9rem; line-height: 1; } .calendar-day .log-indicator { position: absolute; bottom: .2rem; right: .2rem; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .calendar-year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; } .calendar-year-month { text-align: center; } .calendar-year-month:hover { opacity: 0.85; } .calendar-year-month.is-current { border: 1px solid var(--accent); } .calendar-year-month h4 { margin: 0 0 .5rem 0; font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* ══════════════════════════════════════════ RESPONSIVE TEXT ══════════════════════════════════════════ */ @media (max-width: 600px) { .card h2 { font-size: .9rem; } .stat-card .stat-value { font-size: 1.15rem; } .appbar .row { padding-left: .6rem; padding-right: .6rem; gap: .4rem; } .brand { padding: .45rem .6rem; gap: .35rem; font-size: .75rem; } .app-actions { gap: .35rem; } .pill { padding: .3rem .55rem; font-size: .65rem; } .theme-toggle-switch { width: 2.8rem; height: 1.45rem; } .theme-switch-slider { width: 1.15rem; } .theme-toggle-switch.dark .theme-switch-slider { left: calc(100% - 1.15rem - 1px); } .calendar-modal { max-height: 95vh; } .calendar-day .day-number { font-size: .8rem; } .calendar-year-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } } /* ══════════════════════════════════════════ PRINT STYLES FOR PDF GENERATION ══════════════════════════════════════════ */ @media print { @page { size: letter portrait; margin: 0.3in 0.4in; } body > *:not(.container) { display: none !important; } .appbar, .dock, .footer, button, .btn, .pill, .app-actions, .theme-toggle-switch { display: none !important; } body { background: white !important; color: black !important; margin: 0 !important; padding: 0 !important; } body::after { display: none !important; } .container { border: none !important; height: auto !important; width: 100% !important; display: block !important; padding: 0 !important; margin: 0 !important; } .content-container { padding: 0 !important; margin: 0 !important; overflow: visible !important; } #detailed-micro-report { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; page-break-inside: avoid; position: relative; top: 0; } #detailed-micro-report > .row { display: none !important; } #detailed-micro-report h2 { display: none !important; } #detailed-micro-report > .meta { display: none !important; } #detailed-micro-report h3 { font-size: .7rem !important; margin: .2rem 0 .08rem 0 !important; padding: .08rem .2rem; background: black !important; color: white !important; border: none !important; text-transform: uppercase; letter-spacing: .2px; } #detailed-micro-report h3 + .meta { display: none !important; } #detailed-micro-report .mt-4, #detailed-micro-report .mt-3 { margin-top: 0 !important; } #detailed-micro-report .grid { gap: .2rem !important; display: grid; grid-template-columns: repeat(2, 1fr); } #detailed-micro-report .card { border: 1px solid #333 !important; box-shadow: none !important; padding: .2rem !important; background: white !important; page-break-inside: avoid; margin: 0 !important; } /* Remove decorative corner brackets for print clarity */ #detailed-micro-report .card::before, #detailed-micro-report .card::after { display: none !important; } #detailed-micro-report .card strong { font-size: .6rem !important; font-weight: 900; } #detailed-micro-report .chip { font-size: .55rem !important; padding: .1rem .25rem !important; background: #f0f0f0 !important; border: 1px solid #333 !important; } #detailed-micro-report .card .row { margin-bottom: .08rem; } #detailed-micro-report .bar { height: 7px !important; margin: .08rem 0 !important; border: 1px solid #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } #detailed-micro-report .bar > span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #detailed-micro-report .bar .tick { opacity: .3; } #detailed-micro-report .card .meta { font-size: .42rem !important; margin: .08rem 0 0 0 !important; line-height: 1.05; color: #555 !important; } #detailed-micro-report .card span:not(.chip):not([style*="width"]) { font-size: .55rem !important; } #detailed-micro-report > .mt-4.card[style*="background"] { display: none !important; } #detailed-micro-report::before { content: "Bioenergetic Nutrition Analysis • Detailed Micronutrient Report"; display: block; text-align: center; font-size: .75rem; font-weight: 700; color: #000; margin: 0 0 .2rem 0; padding: 0 0 .15rem 0; border-bottom: 2px solid black; } #detailed-micro-report::after { content: "Generated: " attr(data-date) " • For healthcare provider/coach consultation"; display: block; text-align: center; font-size: .5rem; color: #888; margin: .15rem 0 0 0; padding: .12rem 0 0 0; border-top: 1px solid #ddd; } .grid, .card { page-break-inside: avoid; break-inside: avoid; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ══════════════════════════════════════════ SETTINGS PAGE ══════════════════════════════════════════ */ .settings-page { width: 100%; overflow-y: auto; } .settings-main { max-width: 900px; margin: 0 auto; padding: 1.5rem; } .page-title { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .settings-section { margin-bottom: 2rem; } .section-title { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); } /* ── Alerts ── */ .alert { padding: .85rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); font-size: .88rem; } .alert-success { background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-color: var(--accent); color: var(--fg); } .alert-error { background: color-mix(in srgb, var(--accent-3) 12%, var(--card)); border-color: var(--accent-3); color: var(--accent-3); } /* ── Settings forms ── */ .form-group { margin-bottom: 1rem; } .form-label { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } .form-input { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-size: .9rem; font-family: var(--font-body); transition: border-color 0.15s ease; } .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); } .form-input:disabled { opacity: .45; cursor: not-allowed; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 600px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Info display ── */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .info-item { display: flex; flex-direction: column; gap: .25rem; } .info-label { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .info-value { font-size: 1rem; font-weight: 600; } /* ── Preferences ── */ .preference-item { display: flex; flex-direction: column; gap: .5rem; } @media (min-width: 600px) { .preference-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* ── Data actions ── */ .data-action { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .data-action { flex-direction: row; justify-content: space-between; align-items: center; } } .action-title { font-family: var(--font-serif); font-size: .95rem; font-weight: 600; margin-bottom: .2rem; } .action-description { font-size: .85rem; color: var(--muted); margin: 0; } /* ── Security ── */ .security-item { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 600px) { .security-item { flex-direction: row; justify-content: space-between; align-items: center; } } /* ── Danger zone ── */ .danger-zone .section-title { color: var(--accent-3); } .card-danger { border-color: var(--accent-3) !important; } /* ── Confirmation ── */ .confirmation-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* ── Loading state ── */ .loading { text-align: center; padding: 2.5rem 1rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }