/* Backgrounds come in two families. The NEUTRAL trio is a brightness ladder: "dim" is the default and the reason this file exists — a full-white screen is genuinely unpleasant to look at mid-attack, and this app expects to be opened mid-attack. "dark" goes further for a bad one, "light" is there for anyone who wants it. The WARM set (amber, terracotta, rose, sand) tints the whole surface toward the warm end for people who find it easier on the eyes — three warm-dark options and one warm-light. Every screen is styled through these tokens, so a theme swap is one attribute on and nothing else has to know. */ :root[data-theme='dim'] { --bg: #14161c; --bg-2: #1b1e26; --bg-3: #232733; --line: #2e3342; --line-2: #3a4054; --ink: #dfe3ee; --ink-2: #a3abbf; --ink-3: #848da2; --accent: #7c9cf5; --accent-soft: #2a3459; --warm: #e0a458; --hot: #e06c75; --cool: #5bbf9a; --shadow: 0 6px 24px rgba(0,0,0,.35); } :root[data-theme='dark'] { --bg: #0a0b0e; --bg-2: #101217; --bg-3: #171a21; --line: #23262f; --line-2: #2d313c; --ink: #b9bfcf; --ink-2: #868da1; --ink-3: #737b8f; --accent: #6b8ae0; --accent-soft: #1e2740; --warm: #c08b45; --hot: #c25c64; --cool: #4a9e80; --shadow: 0 6px 24px rgba(0,0,0,.5); } :root[data-theme='light'] { --bg: #f4f5f8; --bg-2: #ffffff; --bg-3: #eef0f5; --line: #dfe2ea; --line-2: #c9cedb; --ink: #1e2230; --ink-2: #5b6274; --ink-3: #878ea1; --accent: #3f62c4; --accent-soft: #e3e9fb; --warm: #b5730f; --hot: #c0392b; --cool: #1f7a5c; --shadow: 0 4px 16px rgba(20,25,40,.08); } /* ---- warm backgrounds ---- */ :root[data-theme='amber'] { --bg: #17130d; --bg-2: #1e1812; --bg-3: #292118; --line: #382d1f; --line-2: #473927; --ink: #f0e7d7; --ink-2: #b7aa93; --ink-3: #847966; --accent: #d99b4e; --accent-soft: #382a17; --warm: #e0a458; --hot: #e0705f; --cool: #6bbf92; --shadow: 0 6px 24px rgba(0,0,0,.4); } :root[data-theme='terracotta'] { --bg: #1a110d; --bg-2: #221611; --bg-3: #2d1e17; --line: #3b2820; --line-2: #4b3328; --ink: #f2e3d8; --ink-2: #bda291; --ink-3: #8a7063; --accent: #e08a5f; --accent-soft: #3a2318; --warm: #e09a58; --hot: #e56a5a; --cool: #6bbf92; --shadow: 0 6px 24px rgba(0,0,0,.42); } :root[data-theme='rose'] { --bg: #180f13; --bg-2: #201419; --bg-3: #2b1c23; --line: #3a2530; --line-2: #4a303d; --ink: #f1e0e6; --ink-2: #bd9fab; --ink-3: #886e78; --accent: #e08a9f; --accent-soft: #3a1f28; --warm: #e0a458; --hot: #e0625f; --cool: #6bbf92; --shadow: 0 6px 24px rgba(0,0,0,.42); } :root[data-theme='sand'] { --bg: #f5efe4; --bg-2: #fffaf0; --bg-3: #efe7d8; --line: #e6dcc9; --line-2: #d3c6ad; --ink: #2a2318; --ink-2: #6b5f4c; --ink-3: #978a72; --accent: #b5730f; --accent-soft: #f2e6cf; --warm: #b5730f; --hot: #c0392b; --cool: #1f7a5c; --shadow: 0 4px 16px rgba(60,45,20,.1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; overflow-x: hidden; /* nothing should ever scroll the page sideways on a phone */ } .app { max-width: 780px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; } /* ---- top bar ---- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; gap: 12px; /* clear the notch / status bar on phones with viewport-fit=cover */ padding-top: max(18px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 20; background: linear-gradient(var(--bg) 72%, transparent); } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; background: radial-gradient(circle at 32% 30%, var(--accent), var(--accent-soft) 72%); box-shadow: inset 0 0 0 1px var(--line-2); } h1 { font-size: 17px; font-weight: 640; letter-spacing: -.01em; } .brand-sub { font-size: 12px; color: var(--ink-3); } .icon-btn { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 15px; transition: .15s; } .icon-btn:hover { color: var(--ink); border-color: var(--line-2); } /* Emergency button — quietly present, unmistakably itself. */ .em-btn { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); font-weight: 700; } .em-btn:hover { color: var(--hot); background: color-mix(in srgb, var(--hot) 12%, transparent); border-color: var(--hot); } /* ---- emergency panel ---- */ .emergency { border-color: color-mix(in srgb, var(--hot) 50%, var(--line)); background: color-mix(in srgb, var(--hot) 6%, var(--bg-2)); } .em-title { font-size: 16px; font-weight: 680; color: var(--hot); } .em-lead { font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; } .em-flags { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; } .em-flags li { font-size: 12.5px; line-height: 1.5; color: var(--ink); } .em-flags li::marker { color: var(--hot); } .em-call { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 14px 16px; border-radius: 12px; text-decoration: none; background: var(--hot); color: #fff; transition: .15s; } .em-call:hover { filter: brightness(1.08); } .em-call-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .9; } .em-call-num { font-size: 26px; font-weight: 750; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .em-change { background: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--accent); padding: 0; text-decoration: underline; } /* ---- layout ---- */ .view { flex: 1; padding: 4px 20px 110px; outline: none; } /* Cards live inside each view's wrapper div, so the spacing has to reach the wrapper's children — the old `.view > * + *` only ever saw the lone wrapper. */ .view > * > * + * { margin-top: 14px; } /* Desktop layout. Above ~1040px the app widens; screens marked `col-feed` (Today, Cycle) flow into two columns, their hero spanning the full width as a header band. Everything else (Insights, History, Settings, and the sub-pages) stays a single column, capped and centred so its cards read at a comfortable width instead of stretching across the whole app. */ @media (min-width: 1040px) { .app { max-width: 1140px; } .view > *:not(.col-feed) { max-width: 720px; margin-inline: auto; } .col-feed { columns: 2; column-gap: 20px; } .col-feed > * + * { margin-top: 0; } .col-feed > * { margin-bottom: 20px; break-inside: avoid; } .col-feed > .welcome, .col-feed > .risk, .col-feed > .risk-alert, .col-feed > .col-span { column-span: all; } } .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .card-title { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 14px; } /* When the title is the collapse toggle, it's a full-width button that still reads as the old label — the button chrome is stripped back to nothing. */ button.card-title { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 0; margin-bottom: 14px; font-family: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } button.card-title .card-title-text { flex: 1; } button.card-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .card-caret { flex: none; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .18s ease; } .card.collapsed .card-caret { transform: rotate(-45deg); } .card.collapsed button.card-title { margin-bottom: 0; } .card.collapsed .card-body { display: none; } @media (prefers-reduced-motion: reduce) { .card-caret { transition: none; } } .muted { color: var(--ink-2); font-size: 13px; } .tiny { font-size: 12px; color: var(--ink-3); } /* ---- risk gauge ---- */ .risk { text-align: center; padding: 26px 18px 22px; } .risk-dial { position: relative; width: 168px; height: 168px; margin: 0 auto 14px; } .risk-dial svg { transform: rotate(-90deg); width: 100%; height: 100%; } .risk-dial .track { fill: none; stroke: var(--bg-3); stroke-width: 11; } .risk-dial .fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1), stroke .4s; } .risk-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .risk-pct { font-size: 40px; font-weight: 680; letter-spacing: -.03em; line-height: 1; } .risk-band { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); } .risk-say { font-size: 14px; color: var(--ink-2); max-width: 44ch; margin: 0 auto; } .risk-recent { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 5px 12px; border-radius: 16px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-2); background: var(--bg-3); border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; } .risk-recent:hover { border-color: var(--line-2); color: var(--ink); } .risk-recent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .risk-recent .rr-go { color: var(--ink-3); font-weight: 700; } .band-low { color: var(--cool); } .band-moderate { color: var(--accent); } .band-elevated { color: var(--warm); } .band-high { color: var(--hot); } /* ---- early-signs timeline ---- */ .early-signs { padding: 11px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warm) 7%, var(--bg-3)); border: 1px solid color-mix(in srgb, var(--warm) 30%, var(--line)); } .es-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; } .es-row + .es-row { border-top: 1px solid var(--line); } /* "What can be behind a visual sign" — the root-cause explainer */ .sign-why { margin-top: 12px; } .sign-causes { display: flex; flex-direction: column; gap: 11px; } .sign-cause-name { font-size: 13px; font-weight: 650; color: var(--ink); margin-bottom: 2px; } .sign-cause-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .es-time { font-size: 12px; font-weight: 680; color: var(--warm); font-variant-numeric: tabular-nums; flex: none; min-width: 52px; } .es-signs { font-size: 13px; color: var(--ink); line-height: 1.4; } /* ---- driver chips ---- */ .drivers { display: flex; flex-direction: column; gap: 7px; } .driver { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; } .driver-bar { height: 5px; border-radius: 3px; flex: none; min-width: 3px; } .driver-up .driver-bar { background: var(--hot); } .driver-down .driver-bar { background: var(--cool); } .driver-label { flex: 1; } .driver-src { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } /* ---- form controls ---- */ .group + .group { margin-top: 18px; } .group-name { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); } .field { padding: 9px 0; } .field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .field-label { font-size: 14px; } .field-val { font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; } .field-hint { font-size: 12px; color: var(--ink-3); margin-top: 3px; } input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin-top: 4px; } input[type='range']::-webkit-slider-runnable-track { height: 5px; border-radius: 3px; background: var(--bg-3); border: 1px solid var(--line); } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-2); margin-top: -8px; box-shadow: 0 1px 4px rgba(0,0,0,.3); } .seg { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; } .seg-btn { flex: 1; min-width: 34px; padding: 8px 4px; cursor: pointer; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2); border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; transition: .12s; } .seg-btn:hover { border-color: var(--line-2); } .seg-btn[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 640; } .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { padding: 8px 13px; border-radius: 20px; cursor: pointer; font-size: 13px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2); transition: .12s; } .chip:hover { border-color: var(--line-2); color: var(--ink); } .chip[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; } .chip.chip-hot[aria-pressed='true'] { background: color-mix(in srgb, var(--hot) 16%, transparent); border-color: var(--hot); color: var(--hot); } /* ---- background swatches ---- */ .swatch-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin: 4px 0 8px; } .swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; color: var(--ink-3); font-size: 11px; } .swatch-dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-2); position: relative; transition: transform .12s, box-shadow .12s; } /* the small accent pip shows the theme's highlight colour, not just its ground */ .swatch-dot::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--pip); border: 1.5px solid rgba(0,0,0,.25); } .swatch:hover .swatch-dot { transform: scale(1.06); } .swatch[aria-pressed='true'] .swatch-dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); } .swatch[aria-pressed='true'] { color: var(--ink); font-weight: 600; } .swatch:focus-visible .swatch-dot { outline: 2px solid var(--accent); outline-offset: 3px; } textarea, input[type='text'], input[type='time'], input[type='date'], input[type='number'], select { width: 100%; padding: 10px 12px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px; } textarea { resize: vertical; min-height: 74px; } textarea:focus, input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- buttons ---- */ .btn { padding: 12px 18px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; transition: .15s; border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); } .btn:hover { border-color: var(--line-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { filter: brightness(1.08); } .btn-danger { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); } .btn-danger:hover { background: color-mix(in srgb, var(--hot) 12%, transparent); } .btn-wide { width: 100%; } .btn-row { display: flex; gap: 9px; flex-wrap: wrap; } /* ---- stats ---- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 9px; } /* lite first-run: one big number leading the page */ .lite-lead { text-align: center; margin-bottom: 14px; } .lite-num { font-size: 52px; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .lite-num-k { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-top: 6px; } /* "Why?" disclosure — folds the wordy how-it-works text away by default */ .why { margin-top: 10px; } .why > summary { list-style: none; cursor: pointer; width: fit-content; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent); -webkit-tap-highlight-color: transparent; } .why > summary::-webkit-details-marker { display: none; } .why > summary::after { content: '›'; font-weight: 700; transition: transform .15s ease; } .why[open] > summary::after { transform: rotate(90deg); } .why > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .why-body { margin-top: 8px; } .why-body > * + * { margin-top: 8px; } @media (prefers-reduced-motion: reduce) { .why > summary::after { transition: none; } } /* first-day welcome hero */ .welcome { text-align: center; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 13%, var(--bg-2)), var(--bg-2) 72%); } .welcome-mark { font-size: 32px; line-height: 1; margin-bottom: 8px; } .welcome-h { font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .welcome-p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 46ch; margin: 0 auto 14px; } .welcome-steps { display: flex; flex-direction: column; gap: 9px; margin: 18px auto 0; text-align: left; max-width: 250px; } .welcome-step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); } .welcome-step-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); } .stat { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-align: center; } .stat-v { font-size: 21px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat-k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; } /* ---- self-validation ---- */ .verdict-band { padding: 13px 14px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); border-left-width: 3px; } .verdict-band.tone-cool { border-left-color: var(--cool); } .verdict-band.tone-accent { border-left-color: var(--accent); } .verdict-band.tone-warm { border-left-color: var(--warm); } .verdict-band.tone-hot { border-left-color: var(--hot); } .vb-tag { font-size: 14px; font-weight: 680; } .vb-line { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 5px 0 0; } .cal { display: flex; flex-direction: column; gap: 7px; } .cal-row { display: grid; grid-template-columns: 62px 1fr 60px; align-items: center; gap: 10px; } .cal-band { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .cal-bars { position: relative; height: 20px; } .cal-bar { position: absolute; left: 0; height: 8px; border-radius: 3px; transition: width .6s cubic-bezier(.2,.8,.2,1); } .cal-pred { top: 0; background: var(--ink-3); opacity: .5; } .cal-obs { bottom: 0; background: var(--accent); } .cal-n { font-size: 10.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } /* ---- frequency sparkline (reduction card) ---- */ .spark { display: flex; align-items: flex-end; gap: 8px; height: 96px; } .spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; min-width: 0; } .spark-val { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .spark-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .spark-bar { width: 60%; max-width: 26px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--accent); transition: height .6s cubic-bezier(.2,.8,.2,1); } .spark-bar.is-thin { background: var(--ink-3); opacity: .45; } /* thinly-logged month */ .spark-lab { font-size: 11px; color: var(--ink-3); } /* ---- trigger table ---- */ .trig { display: flex; flex-direction: column; gap: 8px; } .trig-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .trig-row.is-strong { border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); } .trig-row.is-protective { border-color: color-mix(in srgb, var(--cool) 45%, var(--line)); } .trig-name { font-size: 14px; font-weight: 560; } .trig-lift { font-size: 15px; font-weight: 680; font-variant-numeric: tabular-nums; } .trig-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); } .trig-track { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; margin-top: 4px; } .trig-track span { display: block; height: 100%; border-radius: 2px; } /* ---- calendar ---- */ .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cal-title { font-size: 15px; font-weight: 620; } /* minmax(0,1fr), not 1fr: plain 1fr won't shrink below the cells' content, so on a narrow phone the 7-column grid overflowed sideways. This lets it always fit. */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .cal-dow { font-size: 10px; color: var(--ink-3); text-align: center; padding-bottom: 4px; text-transform: uppercase; } .cal-cell { aspect-ratio: 1; border-radius: 8px; cursor: pointer; position: relative; background: var(--bg-3); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); transition: .12s; } .cal-cell:hover { border-color: var(--accent); } .cal-cell.empty { visibility: hidden; } .cal-cell.logged { color: var(--ink); } .cal-cell.today { outline: 2px solid var(--accent); outline-offset: 1px; } .cal-cell .dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; } .cal-cell .dot i { width: 4px; height: 4px; border-radius: 50%; display: block; } .dot-ep { background: var(--hot); } .dot-aura { background: var(--warm); } .dot-period { background: #d4589a; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-3); } .legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; } /* ---- episode list ---- */ .ep-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .ep-sev { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 680; font-size: 14px; color: #fff; } .ep-main { flex: 1; min-width: 0; } .ep-date { font-size: 13.5px; font-weight: 580; } .ep-tags { font-size: 11.5px; color: var(--ink-3); } /* ---- misc ---- */ .notice { padding: 12px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink-2); } .notice strong { color: var(--ink); } .notice-warn { border-color: color-mix(in srgb, var(--warm) 40%, var(--line)); } .progress { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin: 8px 0; } .progress span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .5s; } .empty { text-align: center; padding: 40px 20px; color: var(--ink-3); } .empty-ico { font-size: 32px; opacity: .5; margin-bottom: 10px; } /* ---- feed ---- */ .feed-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; border-radius: 11px; cursor: pointer; text-align: left; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font: inherit; transition: .15s; } .feed-row + .feed-row { margin-top: 8px; } .feed-row:hover { border-color: var(--line-2); transform: translateX(2px); } .feed-row.is-due { border-color: var(--accent); background: var(--accent-soft); } .feed-row.is-quiet { cursor: default; opacity: .75; } .feed-row.is-quiet:hover { transform: none; border-color: var(--line); } /* Red is reserved for the two things that are actually urgent. */ .feed-row.is-alarm { border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); } .feed-row.is-alarm:hover { background: color-mix(in srgb, var(--hot) 10%, transparent); } /* A missed check-in is amber: worth catching, not an emergency. */ .feed-row.is-overdue { border-color: color-mix(in srgb, var(--warm) 45%, var(--line)); } .feed-row.is-overdue:hover { background: color-mix(in srgb, var(--warm) 10%, transparent); } /* Filled rather than outlined: this is the one you need to find while squinting. It's the acute focus, so it carries the strongest red on the screen. */ .feed-row.is-now { border-color: var(--hot); background: color-mix(in srgb, var(--hot) 20%, transparent); box-shadow: 0 1px 12px color-mix(in srgb, var(--hot) 26%, transparent); } .feed-row.is-now:hover { background: color-mix(in srgb, var(--hot) 28%, transparent); } .feed-row.is-now .feed-name { color: var(--hot); font-size: 15px; } .feed-row.is-now .feed-ico, .feed-row.is-now .feed-go { color: var(--hot); } /* The acute section is the one place the design leans on red: it's where the focus goes when things are bad, so its heading carries it too. */ .card-now { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); } .card-now > .card-title { color: var(--hot); font-size: 13px; } /* how-it-works guide */ .guide-list { display: flex; flex-direction: column; gap: 12px; } .gloss { padding: 10px 0; border-top: 1px solid var(--line); } .gloss:first-child { padding-top: 0; border-top: 0; } .gloss-t { font-weight: 600; color: var(--ink); font-size: 13.5px; margin-bottom: 3px; } .gloss-d { font-size: 13px; color: var(--ink-2); line-height: 1.5; } .feed-ico { font-size: 18px; width: 24px; text-align: center; flex: none; } .feed-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .feed-name { font-size: 14px; font-weight: 600; } .feed-sub { font-size: 11.5px; color: var(--ink-3); } .feed-go { color: var(--ink-3); font-size: 16px; } /* ---- check-in flow ---- */ .ci { min-height: 380px; display: flex; flex-direction: column; } .ci-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ci-title { font-size: 13px; font-weight: 620; } .ci-ico { color: var(--accent); } .dots { display: flex; gap: 5px; margin: 14px 0 20px; } .dots i { flex: 1; height: 3px; border-radius: 2px; background: var(--bg-3); transition: .3s; } .dots i.on { background: var(--accent); } .ci-purpose { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 12px; padding: 11px 14px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); } .ci-purpose strong { color: var(--accent); } .ci-prompt { margin-bottom: 20px; } .ci-prompt h2 { font-size: 21px; font-weight: 620; letter-spacing: -.02em; line-height: 1.3; } .ci-prompt p { margin-top: 6px; } .ci-options { display: flex; flex-direction: column; gap: 8px; } .ci-opt { padding: 15px 16px; border-radius: 11px; cursor: pointer; text-align: left; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 15px; font-weight: 550; transition: .12s; } .ci-opt:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .ci-grid { display: flex; flex-wrap: wrap; gap: 7px; } .ci-skip { margin-top: 18px; background: none; border: 0; cursor: pointer; color: var(--ink-3); font: inherit; font-size: 12.5px; text-decoration: underline; align-self: center; padding: 8px; } .ci-skip:hover { color: var(--ink-2); } /* ---- triage ---- */ .vessel { border: 1px solid; border-radius: 11px; padding: 14px; background: var(--bg-3); } .vessel-name { font-size: 17px; font-weight: 680; letter-spacing: -.01em; } .vessel-do { font-size: 13.5px; margin-top: 8px; } .kit { margin-top: 14px; } .kit summary, .fullform summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 8px 0; list-style: none; user-select: none; } .kit summary::before, .fullform summary::before { content: '▸ '; color: var(--ink-3); } .kit[open] summary::before, .fullform[open] summary::before { content: '▾ '; } .kit summary:hover, .fullform summary:hover { color: var(--ink); } .fullform { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; } .fullform[open] { padding-bottom: 14px; } .fullform .card { border: 0; background: none; padding: 0; } /* ---- KPI strip ---- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 7px; margin-top: 18px; } .kpi { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px; text-align: center; position: relative; } /* KPI tiles are real buttons for keyboard + screen-reader access; strip the browser chrome so they still read as tiles. */ button.kpi { font: inherit; color: inherit; width: 100%; -webkit-tap-highlight-color: transparent; } .kpi-tap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Red / amber / green. A dot rather than a coloured tile: the number stays readable, and colour is never the only signal — the value and note say it too, which matters for anyone who can't separate red from green. */ .rag { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; } .rag-green { background: var(--cool); } .rag-amber { background: var(--warm); } .rag-red { background: var(--hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hot) 20%, transparent); } .kpi-tap { cursor: pointer; transition: .15s; } .kpi-tap:hover { border-color: var(--accent); } .kpi-v { font-size: 17px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } /* Word values need to fit the tile; numbers get the bigger size. */ .kpi-v.is-text { font-size: 13px; letter-spacing: 0; } .kpi-k { font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; } /* Clamped so a long note can never stretch one tile and drag the row with it. */ .kpi-note { font-size: 9px; color: var(--ink-3); margin-top: 2px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tone-cool { color: var(--cool); } .tone-accent { color: var(--accent); } .tone-warm { color: var(--warm); } .tone-hot { color: var(--hot); } .tone-cyc { color: #d4589a; } .tone-ink-3 { color: var(--ink-3); } /* Folded provenance / detail — present, not shouting. */ .prov { margin-top: 14px; } .prov summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); list-style: none; user-select: none; padding: 6px 0; text-align: left; } .prov summary::before { content: '▸ '; } .prov[open] summary::before { content: '▾ '; } .prov summary:hover { color: var(--ink-2); } .risk .prov { text-align: left; } /* ---- weather ---- */ .wx-strip { display: flex; align-items: center; gap: 10px; } .wx-icon { font-size: 26px; line-height: 1; flex: none; } .wx-temp { font-size: 22px; font-weight: 680; letter-spacing: -.02em; flex: none; } .wx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wx-label { font-size: 12.5px; color: var(--ink-2); } .wx-place { font-size: 10.5px; color: var(--ink-3); } .wx-trend { font-size: 13px; font-weight: 660; font-variant-numeric: tabular-nums; flex: none; } .wx-down { color: var(--hot); } .wx-up { color: var(--accent); } .wx-flat { color: var(--ink-3); } .wx-pill { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 660; padding: 3px 7px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line); flex: none; } .wx-calm { color: var(--cool); } .wx-mild { color: var(--accent); } .wx-notable { color: var(--warm); border-color: color-mix(in srgb, var(--warm) 40%, var(--line)); } .wx-rough { color: var(--hot); border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); } .wx-tom { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .wx-tom-ico { font-size: 20px; flex: none; } /* ---- cycle ---- */ .cyc-ring { position: relative; width: 148px; height: 148px; margin: 4px auto 6px; } .cyc-ring svg { width: 100%; height: 100%; } .cyc-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .cyc-day { font-size: 38px; font-weight: 680; letter-spacing: -.03em; line-height: 1; } .cyc-of { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .cyc-phase { font-size: 11px; color: #d4589a; text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; font-weight: 600; } .cd { display: flex; flex-direction: column; gap: 9px; } .cd-row { display: grid; grid-template-columns: 96px 1fr 40px 40px; align-items: center; gap: 9px; } .cd-label { font-size: 12px; color: var(--ink-2); } .cd-track { height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; } .cd-track span { display: block; height: 100%; border-radius: 4px; transition: width .5s; } .cd-val { font-size: 12.5px; font-weight: 640; text-align: right; font-variant-numeric: tabular-nums; } .cd-n { font-size: 10.5px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 380px) { .cd-row { grid-template-columns: 74px 1fr 36px; } .cd-n { display: none; } } /* ---- charts ---- */ .chart { width: 100%; overflow-x: auto; } .chart svg { width: 100%; height: 200px; display: block; } .chart-sm svg { height: 150px; } .chart-xs svg { height: 130px; } /* ---- tools grid ---- Five full-width feed rows became six tiles: a third of the height, scannable at a glance, and the feed goes back to being about today. */ .tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tool { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 11px; cursor: pointer; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font: inherit; transition: .14s; } .tool:hover { border-color: var(--accent); color: var(--accent); } .tool-ico { font-size: 19px; line-height: 1; } .tool-label { font-size: 10.5px; text-align: center; line-height: 1.3; } /* ---- risk drop ---- */ .risk-drop { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 8px 12px; border-radius: 9px; background: var(--bg-3); border: 1px solid var(--line); } .rd-from { font-size: 14px; color: var(--ink-3); text-decoration: line-through; } .rd-arrow { color: var(--ink-3); font-size: 12px; } .rd-to { font-size: 16px; font-weight: 680; color: var(--cool); } .rd-why { font-size: 11px; color: var(--ink-3); } .risk-restore { margin-top: 12px; width: 100%; cursor: pointer; font: inherit; font-size: 12px; padding: 9px; border-radius: 9px; color: var(--warm); background: color-mix(in srgb, var(--warm) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--warm) 45%, var(--line)); } .risk-restore:hover { background: color-mix(in srgb, var(--warm) 16%, transparent); } /* The two help doors, inside the antidote card — separated from the tips above them, because those are things to do and these are places to go. */ .antidote-doors { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } /* ---- advice ---- */ .advice { display: flex; flex-direction: column; gap: 8px; } .adv { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .adv.is-done { opacity: .55; border-color: color-mix(in srgb, var(--cool) 40%, var(--line)); } .adv-tick { align-self: flex-start; margin-top: 4px; cursor: pointer; font: inherit; font-size: 11.5px; padding: 5px 10px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); border: 0; } .adv-tick:hover { filter: brightness(1.15); } .adv-act { border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); } .adv-now { border-color: color-mix(in srgb, var(--warm) 35%, var(--line)); } .adv-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 660; align-self: flex-start; } .adv-text { font-size: 13px; line-height: 1.5; color: var(--ink); } .adv-context .adv-text { color: var(--ink-2); } /* ---- pattern band ---- */ .band { border: 1px solid; border-radius: 11px; padding: 14px; background: var(--bg-3); } .band-name { font-size: 19px; font-weight: 680; letter-spacing: -.02em; } .band-range { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } /* ---- sleep ---- */ .sl { display: flex; flex-direction: column; gap: 4px; } .sl-row { display: grid; grid-template-columns: 14px 1fr 12px; align-items: center; gap: 7px; } .sl-day { font-size: 9.5px; color: var(--ink-3); text-align: center; } .sl-track { position: relative; height: 13px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line); overflow: hidden; } .sl-bar { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .85; border-radius: 2px; } .sl-nap { position: absolute; top: 0; bottom: 0; background: var(--warm); opacity: .9; border-radius: 2px; } .sl-mark { font-size: 8px; color: var(--hot); text-align: center; } .sl-axis { display: flex; justify-content: space-between; margin: 6px 0 0 21px; font-size: 9px; color: var(--ink-3); } .sl-times { display: flex; gap: 10px; } .sl-times label { flex: 1; display: flex; flex-direction: column; gap: 4px; } /* ---- check-in time picker ---- */ .ci-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .ci-quick-opt { text-align: center; } .ci-picker { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .ci-picker input { flex: 1; background: var(--bg-2); } /* ---- high-risk flag ---- A blinking indicator light, at ~0.8Hz. The photosensitivity hazard is flicker in the 3–60Hz band; a slow blink is nowhere near it, so a small blinking light is safe and does the job a static card can't. What is still avoided: full-screen flashing and anything fast. The blink is suppressed anyway on days light sensitivity is logged. */ .risk-alert { border-color: color-mix(in srgb, var(--warm) 55%, var(--line)); background: color-mix(in srgb, var(--warm) 7%, var(--bg-2)); } .risk-alert.is-pulsing { animation: raPulse 2.4s ease-in-out infinite; } @keyframes raPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warm) 0%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warm) 16%, transparent); } } .ra-head { display: flex; align-items: center; gap: 12px; } .ra-pct { font-size: 26px; font-weight: 700; color: var(--warm); letter-spacing: -.02em; font-variant-numeric: tabular-nums; flex: none; } /* The blinking light itself. */ .ra-beacon { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--hot); animation: beacon 1.25s steps(1, end) infinite; } @keyframes beacon { 0%, 49% { opacity: 1; box-shadow: 0 0 8px 2px color-mix(in srgb, var(--hot) 55%, transparent); } 50%, 100% { opacity: .22; box-shadow: 0 0 0 0 transparent; } } /* Light-sensitive day, or motion turned off: the light goes solid. */ .risk-alert:not(.is-pulsing) .ra-beacon { animation: none; opacity: 1; } @media (prefers-reduced-motion: reduce) { .ra-beacon { animation: none; opacity: 1; } } .ra-title { flex: 1; min-width: 0; } .ra-t1 { font-size: 15px; font-weight: 660; } .ra-t2 { font-size: 12px; color: var(--ink-2); margin-top: 2px; } /* Motion off: the colour and the words carry it. */ @media (prefers-reduced-motion: reduce) { .risk-alert.is-pulsing { animation: none; } } /* ---- rescue ---- Everything here is sized for someone who can barely look at it: bigger type, fewer words, targets you can hit without aiming. */ .rsc-top { text-align: center; padding: 22px 18px; } .rsc-head { font-size: 24px; font-weight: 680; letter-spacing: -.02em; line-height: 1.25; } .rsc-sub { font-size: 14px; color: var(--ink-2); margin-top: 8px; } .rsc-seehow { margin-top: 12px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); padding: 4px 6px; } .rsc-seehow:hover { text-decoration: underline; } .rsc-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 13px; border-radius: 12px; cursor: pointer; text-align: left; background: var(--bg-3); border: 1px solid var(--line); color: var(--ink); font: inherit; transition: .15s; } .rsc-act + .rsc-act { margin-top: 9px; } .rsc-act:hover { border-color: var(--line-2); } .rsc-act.is-primary { border-color: var(--accent); background: var(--accent-soft); padding: 18px 14px; } .rsc-act.is-primary .rsc-label { font-size: 17px; color: var(--accent); } .rsc-ico { font-size: 22px; flex: none; width: 26px; text-align: center; } .rsc-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rsc-label { font-size: 15px; font-weight: 640; } .rsc-detail { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; } .rsc-go { color: var(--ink-3); font-size: 18px; } /* ---- how-to guides ---- */ .how-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .how-link { background: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--accent); padding: 5px 8px; border-radius: 7px; background: var(--accent-soft); } .how-link:hover { filter: brightness(1.15); } .how { display: flex; justify-content: center; } .how-svg { width: 100%; max-width: 300px; height: auto; } .how-steps { margin: 14px 0 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; } .how-steps li { font-size: 13px; line-height: 1.55; color: var(--ink-2); } .how-steps li::marker { color: var(--accent); font-weight: 660; } .how-steps.tight li { font-size: 12.5px; } /* Temple massage: fingertips tracing a small circle, both sides mirrored. */ .tm-finger { animation: tmCircle 2.4s linear infinite; transform-origin: center; } .tm-left { animation-name: tmCircleL; } .tm-right { animation-name: tmCircleR; } @keyframes tmCircleL { 0% { transform: translate(0, -6px); } 25% { transform: translate(6px, 0); } 50% { transform: translate(0, 6px); } 75% { transform: translate(-6px, 0); } 100% { transform: translate(0, -6px); } } @keyframes tmCircleR { 0% { transform: translate(0, -6px); } 25% { transform: translate(-6px, 0); } 50% { transform: translate(0, 6px); } 75% { transform: translate(6px, 0); } 100% { transform: translate(0, -6px); } } /* Pressure points: pulse in sequence, top to bottom, matching the order. */ .pp { fill: var(--accent); opacity: .35; animation: ppPulse 3s ease-in-out infinite; } .pp-1 { animation-delay: 0s; } .pp-2 { animation-delay: .6s; } .pp-3 { animation-delay: 1.2s; } @keyframes ppPulse { 0%, 60%, 100% { opacity: .3; r: 5; } 20% { opacity: .95; r: 8; } } .pp-key { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .pp-row { display: flex; gap: 10px; align-items: flex-start; } .pp-num { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .pp-title { font-size: 13.5px; font-weight: 600; } .pp-text { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; } /* Breathing pacer. */ .br { display: flex; justify-content: center; padding: 10px 0; } .br-ring { position: relative; width: 180px; height: 180px; border-radius: 50%; border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; } .br-orb { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--accent), var(--accent-soft) 75%); opacity: .5; transition: transform 4s cubic-bezier(.4, 0, .3, 1); } .br-text { position: relative; text-align: center; z-index: 1; } .br-label { font-size: 14px; font-weight: 620; color: var(--ink); } .br-count { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* Compress: the two opposite responses, side by side. */ .cps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .cp { padding: 13px 11px; border-radius: 11px; background: var(--bg-3); border: 1px solid var(--line); } .cp-constriction { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .cp-dilation { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); } .cp-ico { font-size: 22px; } .cp-name { font-size: 15px; font-weight: 680; margin-top: 4px; } .cp-when { font-size: 11px; color: var(--ink-3); margin-top: 3px; } .cp-signs { font-size: 11px; color: var(--ink-2); margin-top: 7px; line-height: 1.45; } @media (max-width: 380px) { .cps { grid-template-columns: 1fr; } } /* ---- medication doses ---- */ .doses { display: flex; flex-direction: column; gap: 8px; } .dose { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .dose + .dose { margin-top: 8px; } .dose.is-taken { opacity: .6; } .dose.is-late { border-color: color-mix(in srgb, var(--warm) 45%, var(--line)); } .dose-tick { width: 26px; height: 26px; border-radius: 8px; flex: none; cursor: pointer; background: var(--bg-2); border: 1.5px solid var(--line-2); color: var(--cool); font-size: 14px; font-weight: 700; line-height: 1; transition: .15s; } .dose-tick[aria-pressed='true'] { background: var(--cool); border-color: var(--cool); color: var(--bg); } .dose-tick:hover { border-color: var(--cool); } .dose-main { flex: 1; min-width: 0; } .dose-name { font-size: 13.5px; font-weight: 600; } .dose-dose { font-weight: 400; color: var(--ink-3); } .dose-time { font-size: 11.5px; color: var(--ink-3); } .time-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 16px; font-size: 12.5px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); } .time-x { background: none; border: 0; color: inherit; cursor: pointer; font-size: 10px; padding: 0; opacity: .7; } .time-x:hover { opacity: 1; } .time-add { padding: 6px 12px; border-radius: 16px; font-size: 12.5px; cursor: pointer; background: var(--bg-3); border: 1px dashed var(--line-2); color: var(--ink-2); } .time-add:hover { border-color: var(--accent); color: var(--accent); } /* ---- remedies (light & eyes) ---- */ .rems { display: flex; flex-direction: column; gap: 9px; } .rem { padding: 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .rem-do, .rem-evidence { border-color: color-mix(in srgb, var(--cool) 30%, var(--line)); } .rem-dont { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); } .rem-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .rem-title { font-size: 14px; font-weight: 620; } .rem-verdict { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; font-weight: 660; white-space: nowrap; flex: none; } .rem-text { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; } /* ---- community links ---- */ .ress { display: flex; flex-direction: column; gap: 9px; } .res { display: block; padding: 12px; border-radius: 10px; text-decoration: none; background: var(--bg-3); border: 1px solid var(--line); transition: .15s; } .res:hover { border-color: var(--accent); transform: translateX(2px); } .res-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .res-name { font-size: 14px; font-weight: 620; color: var(--ink); } .res-kind { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 660; } .res-region { font-size: 10px; color: var(--ink-3); margin-left: auto; } .res-blurb { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 6px; } .res-why { font-size: 11.5px; line-height: 1.45; color: var(--ink-3); margin-top: 5px; font-style: italic; } .res-go { font-size: 10.5px; color: var(--accent); display: inline-block; margin-top: 7px; } /* Reduced motion: the drawings go still and the numbered steps carry the technique. The breathing pacer is timer-driven, so its count keeps working. */ @media (prefers-reduced-motion: reduce) { .pp { opacity: .8; } .res:hover { transform: none; } } /* ---- settings slots ---- */ .slots { display: flex; flex-direction: column; gap: 9px; } .slot-card { padding: 11px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); } .slot-head { display: flex; align-items: center; gap: 10px; } .slot-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .slot-card input[type='time'] { width: auto; padding: 6px 9px; font-size: 13px; } .slot-card .seg-btn { font-size: 11.5px; padding: 6px 3px; } /* ---- tabs ---- */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 780px; display: flex; background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); z-index: 30; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border: 0; background: none; cursor: pointer; color: var(--ink-3); font: inherit; font-size: 10.5px; border-radius: 9px; transition: .15s; } .tab-ico { font-size: 16px; line-height: 1; } .tab:hover { color: var(--ink-2); } .tab[aria-selected='true'] { color: var(--accent); background: var(--accent-soft); } /* ---- auto-prompt overlay ---- */ .ovl { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; animation: ovlIn .18s ease-out; } @keyframes ovlIn { from { opacity: 0; } to { opacity: 1; } } .ovl-sheet { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; animation: sheetIn .22s cubic-bezier(.2, .8, .2, 1); } @keyframes sheetIn { from { transform: translateY(18px); } to { transform: translateY(0); } } .ovl-sheet .card { box-shadow: var(--shadow); } .ovl-tag { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; font-size: 11px; color: var(--ink-3); } .ovl-later { background: none; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--accent); padding: 4px 6px; } .ovl-later:hover { text-decoration: underline; } @media (min-width: 560px) { .ovl { align-items: center; } } /* ---- toast ---- */ .toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 22px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 50; box-shadow: var(--shadow); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- doctor's report ---- */ .report { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 16px; } .rep-head { border-bottom: 2px solid var(--line-2); padding-bottom: 12px; margin-bottom: 16px; } .rep-head h1 { font-size: 21px; font-weight: 700; } .rep-range { font-size: 14px; color: var(--ink-2); margin-top: 4px; } .rep-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; } .rep-sec { margin-top: 22px; } .rep-sec h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .rep-sec h3 { font-size: 12.5px; font-weight: 650; margin: 14px 0 6px; } .rep-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; margin-top: 8px; } .rep-flag { font-size: 12px; line-height: 1.55; margin-top: 10px; padding: 9px 11px; border-radius: 8px; color: var(--warm); background: color-mix(in srgb, var(--warm) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warm) 40%, var(--line)); } .rep-footer p { font-size: 11.5px; color: var(--ink-2); line-height: 1.6; margin-top: 8px; } .rep-table { width: 100%; border-collapse: collapse; font-size: 12px; } .rep-table th, .rep-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .rep-table thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 650; } .rep-kv th { width: 42%; color: var(--ink-3); font-weight: 500; } .rep-sev { display: inline-block; min-width: 20px; padding: 1px 5px; border-radius: 4px; color: #fff; font-weight: 650; text-align: center; font-size: 11px; } /* Diary grids */ .rc-wrap { display: flex; flex-wrap: wrap; gap: 16px; } .rc-month { width: 150px; } .rc-title { font-size: 11px; font-weight: 650; margin-bottom: 5px; } .rc-dow, .rc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .rc-dow span { font-size: 8px; color: var(--ink-3); text-align: center; } .rc-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 8.5px; border-radius: 3px; color: var(--ink-3); border: 1px solid var(--line); } .rc-empty { border: 0; } .rc-logged { background: var(--bg-3); color: var(--ink-2); } .rc-ep { font-weight: 700; border-color: transparent; } .rc-key { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 10.5px; color: var(--ink-3); } .rc-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 4px; } .rc-key-logged { background: var(--bg-3); border: 1px solid var(--line-2); } /* ---- print ---- Forced light: printing the dim theme would empty a cartridge and be unreadable. Everything that is app rather than document is removed. */ @media print { :root, :root[data-theme='dim'], :root[data-theme='dark'], :root[data-theme='light'] { --bg: #fff; --bg-2: #fff; --bg-3: #f4f4f6; --line: #ccc; --line-2: #999; --ink: #000; --ink-2: #333; --ink-3: #666; --accent: #234; --warm: #8a5a00; --hot: #a3251a; --cool: #1f6a4f; --accent-soft: #eef; --shadow: none; } body { background: #fff; } .topbar, .tabbar, .no-print, .toast, .ovl { display: none !important; } .app { max-width: none; } .view { padding: 0; } .report { border: 0; padding: 0; margin: 0; box-shadow: none; border-radius: 0; } /* Keep sections whole across page breaks where possible. */ .rep-sec { break-inside: avoid; page-break-inside: avoid; } .rc-month, .rep-table tr { break-inside: avoid; page-break-inside: avoid; } .rep-footer { break-before: auto; } @page { margin: 14mm; } } @media (max-width: 420px) { .view { padding: 4px 14px 110px; } .card { padding: 15px; } .rc-month { width: 100%; max-width: 200px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---- share sheet ---- */ .share-ovl { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); } .share-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 16px; width: 100%; max-width: 380px; box-shadow: var(--shadow); max-height: 92vh; overflow-y: auto; } .share-preview { width: 100%; border-radius: 12px; display: block; }