/* IBS Tracker - one stylesheet. Tokens first; the 1-5 scale is the palette. Theme: color-scheme decides which half of light-dark() applies. `system` sets nothing on ; theme.js sets data-theme="light|dark" for a choice. Accent: theme.js sets --accent-l/--accent-d from its palette; sage is the default. */ :root { color-scheme: light dark; --accent-l: #5f7f66; --accent-d: #7ea486; --accent-ink-l: #ffffff; --accent-ink-d: #14201a; --bg: light-dark(#f4f4f6, #121214); --surface: light-dark(#ffffff, #1c1c1f); --surface-2: light-dark(#ececef, #27272b); --ink: light-dark(#1b1b1e, #ececee); --muted: light-dark(#6c6c73, #9a9aa2); --line: light-dark(#e1e1e5, #333338); --accent: light-dark(var(--accent-l), var(--accent-d)); --accent-ink: light-dark(var(--accent-ink-l), var(--accent-ink-d)); --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface)); --danger: light-dark(#b8503c, #d9705a); --s1: light-dark(#6f9a74, #7eab83); --s2: light-dark(#9cb06b, #a9bd78); --s3: light-dark(#d4a84b, #d9b25c); --s4: light-dark(#d3783f, #d98552); --s5: light-dark(#b8503c, #cf6350); --radius: 14px; --radius-sm: 9px; --shadow-c1: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35)); --shadow-c2: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.25)); --shadow: 0 1px 2px var(--shadow-c1), 0 4px 14px var(--shadow-c2); --font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; --safe-b: env(safe-area-inset-bottom, 0px); } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.2; margin: 0; } h1 { font-size: 1.35rem; font-weight: 650; } h2 { font-size: 1.1rem; font-weight: 650; } h3 { font-size: 1rem; font-weight: 650; } p { margin: 0 0 0.75em; } .muted { color: var(--muted); } .small { font-size: 0.875rem; } .hidden { display: none !important; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #app { min-height: 100dvh; display: flex; flex-direction: column; } .view { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px calc(84px + var(--safe-b)); } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; margin-bottom: 8px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); } .topbar h1 { font-size: 1.15rem; } .daynav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; } .daytitle { flex: 1; text-align: center; min-width: 0; } .daytitle h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05rem; } .daysub { line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; } .iconbtn:active { background: var(--surface-2); } .iconbtn[disabled] { opacity: 0.35; } input.datepick { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* Status pill (saved / saving / offline) */ .status { font-size: 0.8rem; color: var(--muted); white-space: nowrap; transition: color 0.2s; } .status[data-state="saving"] { color: var(--s3); } .status[data-state="queued"] { color: var(--s4); } .status[data-state="error"] { color: var(--danger); } /* Week strip */ .strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin: 4px 0 14px; } .strip button { border: 0; background: transparent; padding: 4px 0 2px; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 0.7rem; } .strip button[aria-current="date"] { background: var(--surface-2); color: var(--ink); font-weight: 600; } .strip .dots { display: flex; flex-direction: column; gap: 2px; } .strip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .strip .dot.empty { background: transparent; border: 1px solid var(--line); } .strip .dot.sq { border-radius: 2px; } .dot[data-s="1"], .score button[data-s="1"][aria-pressed="true"] { background: var(--s1); } .dot[data-s="2"], .score button[data-s="2"][aria-pressed="true"] { background: var(--s2); } .dot[data-s="3"], .score button[data-s="3"][aria-pressed="true"] { background: var(--s3); } .dot[data-s="4"], .score button[data-s="4"][aria-pressed="true"] { background: var(--s4); } .dot[data-s="5"], .score button[data-s="5"][aria-pressed="true"] { background: var(--s5); } .legend { display: flex; gap: 14px; justify-content: flex-end; margin: -8px 0 10px; font-size: 0.72rem; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 4px; } /* Cards & rows */ .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px; } .card h2 { margin-bottom: 6px; } .rows { display: flex; flex-direction: column; } .row { padding: 14px 0 22px; border-top: 1px solid var(--line); } .row:first-child { border-top: 0; padding-top: 2px; } .row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .row-ico { color: var(--accent); display: inline-flex; } .row-label { font-weight: 650; font-size: 0.95rem; flex: 1; } .row-label input { width: 100%; border: 0; border-bottom: 1px dashed var(--line); background: transparent; padding: 2px 0; font-weight: 650; } .row-label input::placeholder { font-weight: 500; color: var(--muted); } .row-remove { border: 0; background: transparent; color: var(--muted); font-size: 1rem; width: 36px; height: 36px; border-radius: 50%; } .row-remove:active { background: var(--surface-2); } textarea.note { width: 100%; resize: none; border: 0; background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 11px; min-height: 42px; line-height: 1.4; overflow: hidden; } textarea.note::placeholder { color: var(--muted); opacity: 0.8; } .row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .row-foot .lbl { font-size: 0.8rem; color: var(--muted); } /* 1-5 score picker */ .score { display: inline-flex; gap: 6px; } .score button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 650; font-size: 0.9rem; transition: transform 0.08s; } .score button:active { transform: scale(0.92); } .score button[aria-pressed="true"] { color: #fff; border-color: transparent; } .score.big button { width: 44px; height: 44px; font-size: 1rem; } .score-clear { border: 0; background: transparent; color: var(--muted); font-size: 0.8rem; padding: 4px 6px; } /* Insert-between affordance: a small + sitting on each divider */ .insert { display: flex; justify-content: center; height: 0; position: relative; } .insert button { position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 1rem; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .insert button:active { background: var(--surface-2); color: var(--ink); } /* Forms */ .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .field label { font-size: 0.85rem; font-weight: 600; color: var(--muted); } .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; } .field textarea { resize: none; min-height: 64px; overflow: hidden; } .field .hint { font-size: 0.8rem; color: var(--muted); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 380px) { .grid2 { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: 0.5; cursor: default; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn-danger { color: var(--danger); } .btn-block { width: 100%; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .link { background: none; border: 0; color: var(--accent); padding: 0; font-weight: 600; text-decoration: underline; } .error { color: var(--danger); font-size: 0.9rem; margin: 6px 0; } .banner { background: var(--surface-2); border-left: 4px solid var(--accent); padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; } .banner.required { border-left-color: var(--s4); } /* Collapsible settings sections */ details.card { padding: 0; } details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--radius); } details.card > summary::-webkit-details-marker { display: none; } /* Text boxes reserve descender space, icons do not: pad the text down so cap-centres meet the icon centres. */ details.card > summary h2 { flex: 1; margin: 0; padding-top: 3px; } details.card > summary .sec-ico { color: var(--accent); display: inline-flex; } details.card > summary .sum { color: var(--muted); font-size: 0.85rem; max-width: 45%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; } details.card > summary .chev { transition: transform 0.15s; color: var(--muted); } details.card[open] > summary .chev { transform: rotate(90deg); } details.card > .body { padding: 0 14px 14px; } @media (prefers-reduced-motion: reduce) { details.card > summary .chev { transition: none; } } /* Medicines */ .med { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); } .med:first-of-type { border-top: 0; } .med input, .med textarea { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; } /* Analysis list & report */ .alist { display: flex; flex-direction: column; } .aitem { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 12px 0; border-top: 1px solid var(--line); } .aitem:first-child { border-top: 0; } .aitem .ttl { font-weight: 650; display: flex; justify-content: space-between; gap: 8px; } .aitem .prev { color: var(--muted); font-size: 0.85rem; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .badge { font-size: 0.72rem; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); } .badge[data-status="running"], .badge[data-status="pending"] { color: var(--s3); } .badge[data-status="error"] { color: var(--danger); } .report h3 { margin: 18px 0 6px; font-size: 1.05rem; } .report h4 { margin: 12px 0 4px; } .report ul, .report ol { padding-left: 1.3em; margin: 0 0 0.75em; } .report li { margin-bottom: 4px; } .report code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; } .spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } .score button { transition: none; } } /* Icons */ .ico { display: inline-block; vertical-align: middle; flex: none; } .iconbtn .ico { width: 22px; height: 22px; } /* Segmented control (theme picker) */ .seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--surface); } .seg button { border: 0; background: transparent; color: var(--muted); border-radius: 999px; min-height: 36px; padding: 0 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .seg .ico { width: 18px; height: 18px; } /* Accent swatches */ .swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatches button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; background: var(--sw); padding: 0; box-shadow: inset 0 0 0 2px var(--surface); } .swatches button[aria-pressed="true"] { border-color: var(--ink); } /* Analysis thread */ .thread { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; } .msg { margin: 10px 0; padding: 10px 12px; border-radius: var(--radius); max-width: 92%; } .msg.user { background: var(--accent-soft); margin-left: auto; white-space: pre-wrap; } .msg.assistant { background: var(--surface-2); margin-right: auto; } .msg .who { font-size: 0.72rem; font-weight: 650; color: var(--muted); margin-bottom: 2px; } .reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; } .reply textarea { flex: 1; } .reply .btn { padding: 0 14px; } /* Bottom nav */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; padding: 6px 0 calc(6px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line); } .bottomnav button { flex: 1; border: 0; background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 4px 0; } .bottomnav button .ico { width: 24px; height: 24px; } .bottomnav button[aria-current="page"] { color: var(--accent); } /* Login */ .login { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 380px; margin: 0 auto; padding: 24px 16px; width: 100%; } .login .logo { width: 72px; height: 72px; margin: 0 auto 14px; display: block; } .login h1 { text-align: center; margin-bottom: 6px; } /* Toast */ #toast { position: fixed; left: 50%; bottom: calc(76px + var(--safe-b)); transform: translate(-50%, 12px); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 20; max-width: 90vw; text-align: center; } #toast.show { opacity: 1; transform: translate(-50%, 0); } #toast[data-kind="error"] { background: var(--danger); color: #fff; }