/* === Palette: ColorBrewer YlOrBr (warm sequential) === * Datawrapper guidelines applied. Light & dark themes share the same hue * families (warm earth for vice, sage olive for virtue) — only lightness * ladder is inverted. Switch via: * - automatic: prefers-color-scheme: dark * - manual: — overrides the auto detect */ :root { --bg-base: #fff7ec; --bg-card: #fee8c8; --bg-elev: #fdbb84; --accent: #7f0000; --accent-hi: #b30000; --accent-fg: #fff7ec; --text: #3a1a0a; --dim: #8a6650; --border: #f4d29c; --link: #4a6da6; --star: #d95f0e; --vice: #8c510a; --virtue: #5e7a4a; --input-bg: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-base: #1a1411; --bg-card: #2a201a; --bg-elev: #3a2c20; --accent: #e8a87c; --accent-hi: #f0b88a; --accent-fg: #1a1411; --text: #f0e6d8; --dim: #a89b88; --border: #4a3828; --link: #82c0ff; --star: #f7b65c; --vice: #c19064; --virtue: #8aa67a; --input-bg: #2a201a; } } :root[data-theme="dark"] { --bg-base: #1a1411; --bg-card: #2a201a; --bg-elev: #3a2c20; --accent: #e8a87c; --accent-hi: #f0b88a; --accent-fg: #1a1411; --text: #f0e6d8; --dim: #a89b88; --border: #4a3828; --link: #82c0ff; --star: #f7b65c; --vice: #c19064; --virtue: #8aa67a; --input-bg: #2a201a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg-base); color: var(--text); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } #topbar { position: sticky; top: 0; z-index: 50; background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 10px 16px 8px; } #title { font-weight: 600; color: var(--accent); margin-bottom: 6px; } #tabs { display: flex; gap: 4px; overflow-x: auto; } #tabs a { padding: 6px 12px; border-radius: 16px; text-decoration: none; color: var(--text); white-space: nowrap; font-size: 13px; border: 1px solid transparent; } #tabs a.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .screen { padding: 16px; max-width: 900px; margin: 0 auto; } .card { background: var(--bg-card); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--border); } .card h3 { margin: 0 0 6px 0; color: var(--accent); font-size: 15px; } .card .meta { color: var(--dim); font-size: 12px; } button, .btn { background: var(--accent); color: var(--accent-fg); border: 0; padding: 10px 16px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; } button:hover { background: var(--accent-hi); } #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-fg); padding: 10px 20px; border-radius: 24px; z-index: 100; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } input, textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--input-bg); color: var(--text); } textarea { min-height: 120px; resize: vertical; } /* Theme toggle button (top right of topbar) */ #theme-toggle { background: transparent; border: 0; padding: 4px 8px; font-size: 16px; color: var(--accent); cursor: pointer; line-height: 1; } #theme-toggle:hover { background: var(--bg-elev); border-radius: 4px; } a.corpus-link { color: var(--link); text-decoration: none; border-bottom: 1px dashed; } a.corpus-link:hover { background: rgba(108,182,255,0.1); } /* Map view */ .metro-wrap { overflow-x: auto; padding: 10px 0; -webkit-overflow-scrolling: touch; } .metro-svg { min-width: 700px; height: 240px; display: block; margin: 0 auto; } .station { cursor: pointer; } .station:hover circle { stroke: var(--accent); stroke-width: 3; } .station:focus { outline: none; } .station:focus circle { stroke: var(--star); stroke-width: 3; } /* Roadmap view */ .rm-scroll { overflow-x: auto; padding-bottom: 8px; } .rm-grid { display: grid; grid-template-columns: 80px repeat(12, minmax(60px, 1fr)); gap: 3px; min-width: 800px; } .rm-cell { padding: 6px 4px; border-radius: 3px; text-align: center; font-size: 11px; cursor: pointer; } .rm-header { background: var(--bg-elev); color: var(--accent); font-weight: bold; font-size: 10px; } .rm-header.focus { background: var(--accent); color: var(--accent-fg); } .rm-header.starred { background: var(--star); color: var(--vice); } .rm-row-label { padding: 6px 4px; color: var(--dim); font-size: 10px; text-align: right; align-self: center; } .rm-vice { background: var(--vice); color: var(--accent-fg); } .rm-vice.focus { background: var(--accent-hi); } .rm-virtue { background: var(--virtue); color: var(--accent-fg); } .rm-source { background: var(--bg-elev); color: var(--accent); font-weight: bold; } .week-detail summary { cursor: pointer; padding: 6px 0; } .week-detail details[open] summary { color: var(--accent); }