/* ============================================================ Design system — clean, airy, forest-green accents ============================================================ */ :root { color-scheme: light; --primary: #1a1a1a; --accent: #1d6b35; --accent-hover: #257d3f; --accent-light: #e8f2eb; --accent-subtle: rgba(29,107,53,0.07); --white: #ffffff; --body-bg: #f5f3ee; --card-bg: #ffffff; --card-bg-hover: #fcfdfb; --border: #b9c2b2; --border-light: #d7ddd0; --text: #142410; --text-secondary: #33402f; --text-muted: #5c6b5c; --error: #c0392b; --error-bg: #fdf0ef; --error-border: #e8bab6; --success: #27ae60; --badge-pink-bg: #fce7f3; --badge-pink-text: #db2777; --badge-amber-bg: #fef3c7; --badge-amber-text: #d97706; --badge-yellow-bg: #fef9c3; --badge-yellow-text:#a16207; --badge-green-bg: #d1fae5; --badge-green-text: #059669; --badge-blue-bg: #dbeafe; --badge-blue-text: #2563eb; --badge-purple-bg: #f5f3ff; --badge-purple-text: #7c3aed; --badge-purple-border: #ddd6fe; --radius-sm: 0; --radius-md: 0; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 2px 8px rgba(0,0,0,0.06); --font: var(--font-serif); --font-serif: 'Source Serif 4', Charter, Georgia, 'Times New Roman', serif; --header-h: 56px; --max-width: 680px; } /* ── Dark mode ── Defaults to the OS/browser preference, with zero JS required — the block below applies whenever the system prefers dark, unless js/theme.js has stamped an explicit override onto . The second block applies dark regardless of the system when js/theme.js has stamped data-theme="dark" instead. Both blocks carry the same values on purpose (nothing here should ever theme differently depending on which path activated it) — keep them in sync by hand if you touch one. --white stays fixed (it's used for text-on-accent-button, which needs to read the same in both themes, not for surfaces); the four spots that were misusing it as a surface colour now use --card-bg instead, above, so they pick up this override correctly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: #3ecb7e; --accent-hover: #55dc90; --accent-light: #1b3324; --accent-subtle: rgba(62,203,126,0.14); --body-bg: #111411; --card-bg: #1a1f1a; --card-bg-hover: #212721; --border: #3a453a; --border-light: #2a302a; --text: #e7ede4; --text-secondary: #b9c4b4; --text-muted: #838f81; --error: #e2574a; --error-bg: #3a1f1c; --error-border: #5c332e; --success: #46c47f; --badge-pink-bg: #4a1942; --badge-pink-text: #f3a8d4; --badge-amber-bg: #4a3212; --badge-amber-text: #fbc873; --badge-yellow-bg: #453910; --badge-yellow-text:#f0d878; --badge-green-bg: #0f3d2e; --badge-green-text: #7ee0b8; --badge-blue-bg: #1e3a5f; --badge-blue-text: #93c5fd; --badge-purple-bg: #362a56; --badge-purple-text: #c4b5fd; --badge-purple-border: #4d3f78; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 10px rgba(0,0,0,0.5); } } :root[data-theme="dark"] { color-scheme: dark; --accent: #3ecb7e; --accent-hover: #55dc90; --accent-light: #1b3324; --accent-subtle: rgba(62,203,126,0.14); --body-bg: #111411; --card-bg: #1a1f1a; --card-bg-hover: #212721; --border: #3a453a; --border-light: #2a302a; --text: #e7ede4; --text-secondary: #b9c4b4; --text-muted: #838f81; --error: #e2574a; --error-bg: #3a1f1c; --error-border: #5c332e; --success: #46c47f; --badge-pink-bg: #4a1942; --badge-pink-text: #f3a8d4; --badge-amber-bg: #4a3212; --badge-amber-text: #fbc873; --badge-yellow-bg: #453910; --badge-yellow-text:#f0d878; --badge-green-bg: #0f3d2e; --badge-green-text: #7ee0b8; --badge-blue-bg: #1e3a5f; --badge-blue-text: #93c5fd; --badge-purple-bg: #362a56; --badge-purple-text: #c4b5fd; --badge-purple-border: #4d3f78; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 2px 10px rgba(0,0,0,0.5); } /* ── Inline icon (replaces emoji glyphs) ── */ .icon-inline { vertical-align: -2px; margin-right: 4px; flex-shrink: 0; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font); background: var(--body-bg); color: var(--text); min-height: 100vh; line-height: 1.5; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: var(--font); cursor: pointer; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; } /* ── Site header ── */ .site-header { background: var(--card-bg); color: var(--text); height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 100; border-bottom: 2px solid var(--accent); } .site-header .logo { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--text); } .site-logo-img { height: 30px; width: auto; display: block; } /* ── Breadcrumb (in header) ── */ .breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .breadcrumb-home { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--text); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color 0.15s; } .breadcrumb-home:hover { color: var(--accent); } .breadcrumb-home-static { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; color: var(--text); white-space: nowrap; } .breadcrumb-sep { color: var(--border); font-size: 0.85rem; flex-shrink: 0; } .breadcrumb-parent { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: color 0.15s; } .breadcrumb-parent:hover { color: var(--accent); } .breadcrumb-current { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Breadcrumb trail dropdown (mobile ancestor navigation) ── */ .breadcrumb-trail-toggle { display: none; align-items: center; gap: 4px; min-width: 0; flex: 1; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 500; color: var(--text); } .breadcrumb-trail-toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumb-trail-toggle svg { flex-shrink: 0; color: var(--text-muted); transition: transform 0.15s; } .breadcrumb-trail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .breadcrumb-trail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .breadcrumb-trail-overlay.visible { opacity: 1; pointer-events: auto; } .breadcrumb-trail-panel { position: fixed; top: calc(var(--header-h) + 8px); left: 12px; right: 12px; max-width: 340px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 301; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s, transform 0.15s; overflow: hidden; } .breadcrumb-trail-panel.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .breadcrumb-trail-link { display: block; padding: 12px 16px; font-size: 0.88rem; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-light); } .breadcrumb-trail-link:last-child { border-bottom: none; } .breadcrumb-trail-link:hover { background: var(--accent-light); color: var(--accent); } .breadcrumb-trail-link.current { color: var(--text); font-weight: 600; cursor: default; } .breadcrumb-trail-link.current:hover { background: none; color: var(--text); } .header-actions { display: flex; align-items: center; gap: 16px; } .btn-logout { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; transition: all 0.15s; } .btn-logout:hover { border-color: var(--accent); color: var(--accent); } /* Personal-corner icon — injected by js/auth.js only for its owner's session. */ .btn-owner { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-secondary); background: transparent; transition: all 0.15s; } .btn-owner:hover { border-color: var(--accent); color: var(--accent); } .btn-settings { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; transition: color 0.15s, background 0.15s; } .btn-settings:hover { color: var(--accent); background: var(--accent-light); } /* .btn-settings is styled for ; the toggle is a