:root { /* Dark theme (default) — was the only theme until users asked for light. */ --bg: #1a1a1a; --bg-deeper: #0e0e0e; /* deeper than card, for nested cells / inputs */ --card: #161616; /* primary surface */ --card-hi: #1a1a1a; /* hover state for cards */ --border: #2a2a2a; --text: #f5f5f5; --text-2: #bbb; /* secondary text — paragraph copy */ --text-strong: #ffffff; /* maximum contrast */ --muted: #888; --muted-2: #666; /* even more muted */ --accent: #4a9eff; --pathognomonic: #ffce6e; --notes: #75b6ff; --ok: #6ee78c; --warn: #ffbd2e; --err: #ff5959; --chip-bg: #1f1f1f; --chip-border: #2e2e2e; --chip-text: #d8d8d8; } /* Light theme — opt-in via [data-theme="light"] on . Saturated brand colors stay; only structural surfaces flip. */ :root[data-theme="light"] { --bg: #fafafa; --bg-deeper: #f0f0f0; --card: #ffffff; --card-hi: #f8f8f8; --border: #e0e0e0; --text: #1a1a1a; --text-2: #4a4a4a; --text-strong: #000000; --muted: #707070; --muted-2: #999; --accent: #1e6fdb; /* slightly darker for contrast on white */ --pathognomonic: #c08000; --notes: #1565c0; --ok: #16a34a; --warn: #d97706; --err: #dc2626; --chip-bg: #f0f0f0; --chip-border: #d8d8d8; --chip-text: #2a2a2a; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; min-height: 100vh; } /* Mobile: narrow column. Desktop: roomier so multi-column grids breathe. */ #app { max-width: 600px; margin: 0 auto; padding: 16px; } @media (min-width: 800px) { #app { max-width: 900px; } } @media (min-width: 1200px) { #app { max-width: 1100px; } } /* Library/Pending category grid — collapses to single column on mobile, 2 cols at tablet width, 3 cols on wide desktop. Each .cat-group is a grid item. */ .cat-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } /* In a grid, gap handles vertical spacing — kill cat-header's stacking margin */ .cat-grid .cat-header { margin: 0; } @media (min-width: 800px) { .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } } @media (min-width: 1200px) { .cat-grid { grid-template-columns: 1fr 1fr 1fr; gap: 10px; } } .cat-group { min-width: 0; } /* allow text truncation if needed */ /* Long category names (e.g. GASTROINTESTINAL/HEPATOBILIARY) need min-width:0 on the flex child so flex can actually shrink past content width — otherwise the title pushes count + Pin button outside the cat-header background. overflow-wrap: anywhere lets the renderer break inside the word as a last resort when there's no whitespace to use. */ .cat-title { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* When a category is expanded inside the multi-column grid, let it span the full row so its chips have horizontal room to flow instead of stacking vertically in a 1/3-width column with empty neighbours. */ @media (min-width: 800px) { .cat-grid .cat-group.expanded { grid-column: 1 / -1; } } header { text-align: center; margin: 16px 0 24px; } h1 { font-size: 22px; font-weight: 700; margin: 0; } h1 .accent { color: var(--accent); } /* flex-wrap so admin nav (8+ items) reflows to a 2nd centered row on phones instead of overflowing horizontally and hiding Dashboard/Settings off-screen. */ nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; align-items: center; margin-bottom: 14px; font-size: 13px; } nav a { color: var(--accent); text-decoration: none; padding: 6px 0; } nav a:hover { text-decoration: underline; } .muted { color: var(--muted); } .chip { display: inline-block; background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--chip-text); padding: 8px 14px; border-radius: 9999px; font-size: 13px; cursor: pointer; margin: 0 8px 8px 0; text-decoration: none; /* touch-action: manipulation removes the 300ms tap delay iOS Safari adds to anything that *might* be a double-tap-to-zoom target. transition lets :active feel snappy instead of mushy. */ touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.06s ease, background-color 0.1s ease, border-color 0.1s ease; } .chip:hover { background: var(--border); } .chip:active { transform: scale(0.96); } /* Strong "selected" state — far more visible than the previous subtle blue tint. Users were tapping chips 2-3 times because they couldn't tell the first tap registered. */ .chip.is-selected { background: rgba(74, 158, 255, 0.22); border-color: var(--accent); color: var(--text-strong); font-weight: 600; } :root[data-theme="light"] .chip.is-selected { background: rgba(30, 111, 219, 0.14); color: var(--accent); } .cat-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cat-header:hover { filter: brightness(1.15); } .cat-arrow { font-size: 10px; width: 12px; display: inline-block; opacity: 0.7; } .cat-count { background: rgba(255,255,255,0.08); border-radius: 9999px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0; } .search { width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; color: var(--text); font-size: 13px; margin-bottom: 14px; font-family: inherit; } .search::placeholder { color: var(--muted-2); } .section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px; overflow: hidden; } .section-header { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); } .section-header .arrow { color: var(--muted-2); font-size: 12px; } .section-body { padding: 0 14px 12px; font-size: 12px; color: var(--text-2); line-height: 1.55; white-space: pre-wrap; } .section.collapsed .section-body { display: none; } .section.pathognomonic .section-header { color: var(--pathognomonic); } .section.pathognomonic:not(.collapsed) .section-header { background: rgba(255,189,46,0.07); } .notes-header { color: var(--notes) !important; } .notes-textarea { width: 100%; background: var(--bg-deeper); border: 1px solid var(--border); border-radius: 6px; padding: 8px; color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; } .spinner { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 1s linear infinite; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } .btn { padding: 10px 16px; border-radius: 10px; font-weight: 600; border: 0; cursor: pointer; font-size: 13px; font-family: inherit; /* Tactile feedback pieces: kill iOS tap delay + tap highlight, snap-scale on press so users instantly know their tap registered. transition is short enough to feel responsive but not jittery. */ touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.06s ease, filter 0.12s ease, opacity 0.12s ease; } .btn:active { transform: scale(0.97); filter: brightness(1.08); } .btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; /* pointer-events:none means a disabled button can't be re-clicked even if someone double-taps before the disable propagates — saves duplicate API calls during slow connections. */ pointer-events: none; transform: none; filter: none; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:link, .btn-primary:visited { color: #fff; } /* anchor-as-button: no purple visited fallback */ .btn-secondary { background: rgba(220, 38, 38, 0.12); color: var(--err); border: 1px solid rgba(220, 38, 38, 0.3); } .btn-secondary:link, .btn-secondary:visited { color: var(--err); } /* Default .btn used as previously fell back to the browser's visited-link color (the gaudy purple users reported). Pin link colours to the surface so the same .btn class works for both