is a direct child of body here; the authenticated shell's own

is handled by .app-main > main instead, so this selector never double-applies). .site-footer is fixed (see below), not part of this flex flow, so this just lets short guest pages fill the viewport height. */ body > main { flex: 1 0 auto; } /* Contains any horizontal overflow bleeding out of page content (e.g. the diary table, wider than its viewport-narrow wrapper below a min-width floor) to

's own box, instead of letting it inflate .app-main/body and drag the whole page sideways. Deliberately not on html/body directly: overflow-x set there without an explicit overflow-y forces overflow-y to auto too (CSS's paired-axis rule), which turns into its own actual scroll container and broke .sidebar's position:sticky -- confirmed live, the sidebar stopped pinning to the viewport on any page taller than one screen.

sits outside .sidebar's ancestor chain entirely, so this can't touch that. */ main { overflow-x: hidden; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-bright); } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } /* Off-screen until focused -- lets a keyboard user jump past the sidebar's nav items and the topbar's search/primary-action before reaching content, instead of tabbing through the whole shell on every page load. */ .skip-link { position: fixed; top: -100%; left: 1rem; z-index: 100; padding: 0.65rem 1.3rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: 0.9rem; transition: top 0.15s ease; } .skip-link:focus, .skip-link:hover { color: var(--color-accent-ink); } .skip-link:focus { top: 1rem; outline: 2px solid var(--color-accent-ink); outline-offset: 2px; } .eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-accent); font-size: 0.78rem; } /* ---------- Layout shell: sidebar + main ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; gap: 2rem; padding: 1.625rem 1.125rem; background: var(--color-bg); border-right: 1px solid var(--color-border); /* Pinned to the viewport (not just the top of a long scrolling page) so the user block at the bottom (margin-top: auto below) never scrolls out of view -- without this, a tall .app-shell stretches the sidebar to match the full page height and the user info ends up far below the fold. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-logo { display: flex; align-items: center; gap: 0.56rem; padding: 0 0.375rem; color: var(--color-text); } .sidebar-logo:hover { color: var(--color-text); } .sidebar-logo-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; background: var(--color-accent); display: flex; align-items: center; justify-content: center; } .sidebar-logo-mark span { width: 10px; height: 10px; border-radius: 2px; background: var(--color-accent-ink); } .sidebar-logo-label { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } .sidebar-logo-label span { color: var(--color-accent); } .sidebar-nav { display: flex; flex-direction: column; gap: 0.125rem; } .sidebar-nav-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.56rem 0.625rem; border-radius: 9px; color: var(--color-text-dim); font-size: 0.84rem; font-weight: 600; cursor: pointer; } .sidebar-nav-item:hover { color: var(--color-text); text-decoration: none; } .sidebar-nav-item:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: -2px; } .sidebar-nav-item.is-active { background: var(--color-accent-wash); color: var(--color-accent-dim); } .sidebar-nav-icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; } .sidebar-nav-icon svg { width: 100%; height: 100%; } .nav-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.35rem; border-radius: 999px; background: var(--color-danger); color: var(--color-danger-ink); font-size: 0.68rem; font-weight: 700; } /* ---------- Sidebar user block ---------- */ .sidebar-user { position: relative; margin-top: auto; } .sidebar-user-trigger { width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 9px; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .sidebar-user-trigger:hover, .sidebar-user-trigger[aria-expanded="true"] { background: var(--color-surface-raised); } .sidebar-user-avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } .sidebar-user-info { min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; } .sidebar-user-name { font-size: 0.82rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-email { font-size: 0.72rem; color: var(--color-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-menu { position: absolute; bottom: calc(100% + 0.4rem); left: 0; right: 0; padding: 0.35rem; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; gap: 0.1rem; z-index: 20; } .sidebar-user-menu[hidden] { display: none; } .sidebar-user-menu-item { display: block; width: 100%; padding: 0.5rem 0.6rem; border-radius: 6px; border: none; background: none; color: var(--color-text-dim); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; } .sidebar-user-menu-item:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; } .no-js .sidebar-user-menu { display: flex !important; position: static !important; box-shadow: none; margin-top: 0.4rem; } .sidebar-user-menu-header { display: none; padding: 0.35rem 0.6rem 0.6rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--color-border); } .sidebar-user-menu-name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user-menu-email { display: block; font-size: 0.72rem; color: var(--color-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-main > main { flex: 1 0 auto; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 2.5rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .topbar-search { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; } .topbar-search-icon { position: absolute; left: 0.75rem; width: 16px; height: 16px; color: var(--color-text-faint); pointer-events: none; } .topbar-search input { width: 100%; padding: 0.55rem 2.6rem 0.55rem 2.25rem; border-radius: 9px; border: 1px solid var(--color-border-strong); background: var(--color-surface-sunken); color: var(--color-text); font: inherit; font-size: 0.85rem; } .topbar-search input::placeholder { color: var(--color-text-dim); } .topbar-search input:focus { outline: none; border-color: var(--color-accent); } .topbar-search-kbd { position: absolute; right: 0.5rem; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text-dim-strong); font-size: 0.68rem; font-weight: 600; pointer-events: none; } .topbar-log-btn { flex-shrink: 0; gap: 0.55rem; } .topbar-btn-kbd { padding: 0.1rem 0.35rem; border-radius: var(--radius-sm); background: oklch(0.16 0.02 75 / 0.35); font-size: 0.68rem; font-weight: 700; } .page { flex: 1; width: 100%; padding: 1.625rem 2.5rem calc(var(--footer-height) + 1.5rem); } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .page-title { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; } .page-subtitle { color: var(--color-text-dim); margin: 0.3rem 0 0; font-size: 0.95rem; } .page-summary { color: var(--color-accent); font-weight: 600; font-size: 0.88rem; margin: 0.4rem 0 0; } /* ---------- Flash messages ---------- */ .flash-list { padding: 1.25rem 2.5rem 0; display: grid; gap: 0.6rem; } .flash { position: relative; display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); font-size: 0.92rem; } .flash.error { background: var(--color-danger-bg); border-color: var(--color-danger); } .flash-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.1rem; color: var(--color-text-dim); } .flash.error .flash-icon { color: var(--color-danger); } .flash-api-key { background: var(--color-accent-wash); border: 1px solid var(--color-accent); } .flash-api-key-label { margin: 0 0 0.5rem; font-weight: 600; color: var(--color-accent-dim); } .flash-api-key-value { display: block; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text); font-family: var(--font-mono); font-size: 0.85rem; overflow-wrap: anywhere; } /* ---------- Buttons & forms ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 1.3rem; border-radius: 999px; border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn:hover { background: var(--color-accent-bright); color: var(--color-accent-ink); text-decoration: none; box-shadow: 0 0 0 4px oklch(0.78 0.13 75 / 0.16); } .btn:active { transform: translateY(1px); } .btn:disabled { background: var(--color-surface-raised); border-color: var(--color-border); color: var(--color-text-faint); cursor: not-allowed; box-shadow: none; transform: none; } .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); } .btn-secondary:hover { background: var(--color-surface-raised); color: var(--color-text); box-shadow: none; } .btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); box-shadow: none; } .btn-block { width: 100%; } .btn-sm { padding: 0.35rem 0.85rem; font-size: 0.78rem; } @media (max-width: 900px) { .btn-sm { min-height: 44px; } } .table-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Confirm dialog: reserved for destructive actions that cascade to other records (deleting a user, a chain, a membership) — everything lower-stakes still uses the plain browser confirm() in app.js. */ .confirm-dialog { max-width: 420px; width: calc(100% - 2.5rem); padding: 1.5rem; background: var(--color-surface-raised); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } .confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } .confirm-dialog-body { gap: 1.25rem; } .confirm-dialog-message { margin: 0; line-height: 1.5; } .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .toggle-form-wrap { margin: 0 0 1.75rem; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .toggle-form-wrap[hidden] { display: none; } /* Progressive-enhancement fallback: app.js removes .no-js from as soon as it runs. Anything below only matters when JS never ran, so these forms and panels (normally revealed on click/select) stay reachable regardless. */ .no-js .toggle-form-wrap, .no-js [data-new-venue-field], .no-js [data-venue-panel], .no-js .bulk-action-bar, .no-js [data-bulk-edit-toggle] { display: block !important; } .bulk-action-bar { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .bulk-action-bar[hidden] { display: none; } .bulk-action-count { color: var(--color-text-dim); font-size: 0.85rem; margin-right: auto; } form { display: grid; gap: 1.1rem; } .form-narrow { max-width: var(--max-width-form); } .admin-add-section { margin-top: 2rem; } .admin-filter-form { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.75rem; } .admin-filter-form .field { flex: 1; max-width: 320px; } .filter-details { margin-bottom: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-sunken); } .filter-details-summary { display: flex; align-items: center; gap: 0.55rem; padding: 0.85rem 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; user-select: none; } .filter-details-summary::-webkit-details-marker { display: none; } .filter-details-summary svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-dim); } .filter-details-chevron { margin-left: auto; transition: transform 0.15s ease; } .filter-details[open] .filter-details-chevron { transform: rotate(180deg); } .filter-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 0.35rem; border-radius: 999px; background: var(--color-accent-wash); color: var(--color-accent-dim); font-size: 0.68rem; font-weight: 700; } .logs-filter-form { display: grid; gap: 1.25rem; padding: 0 1.1rem 1.1rem; } .filter-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; } .filter-group-title { grid-column: 1 / -1; padding: 0; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); } .logs-filter-form .form-actions { padding-top: 0.15rem; border-top: 1px solid var(--color-border); } .inline-form { display: inline; } .field { display: grid; gap: 0.4rem; } .field label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-dim); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="datetime-local"], .field input[type="number"], .field select, .field textarea { background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; color: var(--color-text); font-family: inherit; font-size: 0.95rem; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); } .field input:disabled { color: var(--color-text-faint); cursor: not-allowed; } .field-input-name { max-width: 280px; } .field-input-currency { max-width: 200px; } .field-input-email { max-width: 320px; } .field textarea { min-height: 6rem; resize: vertical; } .checkbox-field { display: flex; align-items: center; gap: 0.5rem; flex-direction: row; } .checkbox-list { display: grid; gap: 0.6rem; max-height: 360px; overflow-y: auto; padding: 0.25rem; } .checkbox-field label { text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--color-text); } .field-error { color: var(--color-danger); font-size: 0.82rem; } .field-hint { color: var(--color-text-dim); font-size: 0.8rem; } .field-label-standalone { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-dim); margin-bottom: 0.5rem; } .form-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .form-section { display: grid; gap: 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .form-section:first-of-type { padding-top: 0; border-top: none; } .form-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-accent); margin: 0; } .checkbox-list { display: flex; flex-direction: column; gap: 0.6rem; } .checkbox-list-option { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; color: var(--color-text); cursor: pointer; } /* ---------- Chip toggles (multi-select as pills) ---------- */ .fieldset-reset { border: 0; margin: 0; padding: 0; min-width: 0; } .fieldset-reset > legend { padding: 0; margin: 0 0 1.1rem; width: 100%; } .chip-toggle-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.8rem 1.15rem; border-radius: 999px; border: 1px solid var(--color-border-strong); color: var(--color-text-dim); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .chip-toggle input { position: absolute; opacity: 0; pointer-events: none; } .chip-toggle:has(input:checked) { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); } .chip-toggle:has(input:focus-visible) { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } /* ---------- Profile page ---------- Rebuilt from local_references/design_handoff_cinelogger 3/PROFILE-BRIEF.md. Deliberately its own small palette (card surface/border, label/positive colors) distinct from the app's global tokens -- exact oklch values from the handoff, scoped as custom properties on .profile-shell rather than folded into :root, since the brief didn't ask for these to become sitewide tokens. */ .profile-shell { --profile-card-bg: oklch(0.165 0.004 260); --profile-card-border: oklch(0.235 0.005 260); --profile-divider: oklch(0.22 0.005 260); --profile-label: oklch(0.62 0.005 260); --profile-text: oklch(0.92 0.004 260); --profile-text-dim: oklch(0.62 0.005 260); --profile-text-dimmer: oklch(0.6 0.005 260); --profile-field-label: oklch(0.75 0.005 260); --profile-field-bg: oklch(0.21 0.005 260); --profile-field-border: oklch(0.29 0.005 260); --profile-positive: oklch(0.84 0.14 145); display: grid; /* Column 1's card content is capped at 520px per the handoff brief. An equal `1fr 1fr` split still gives column 1 a full 50% *track*, so everything past the 520px card sits empty as a gap in the middle of the page before column 2 starts. Sizing track 1 to its actual content cap (minmax(340px, 520px)) and letting track 2 take the rest removes that dead zone -- column 2 now starts right after column 1's real content. */ grid-template-columns: 1fr; align-items: start; gap: 16px; padding-bottom: 70px; } @media (min-width: 701px) { .profile-shell { grid-template-columns: minmax(340px, 520px) 1fr; } } .profile-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ---------- Identity card ---------- */ .profile-identity { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px; background: linear-gradient(150deg, oklch(0.2 0.014 75), oklch(0.16 0.004 260) 60%); border: 1px solid oklch(0.26 0.008 260); } .profile-identity-top { display: flex; align-items: center; gap: 14px; } .profile-avatar-lg { width: 54px; height: 54px; border-radius: 15px; flex-shrink: 0; background: linear-gradient(150deg, oklch(0.82 0.14 75), oklch(0.62 0.13 45)); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800; color: oklch(0.2 0.02 60); } .profile-identity-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .profile-identity-name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: oklch(0.98 0.002 260); line-height: 1.1; } .profile-identity-meta { font-size: 12.5px; color: var(--profile-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: oklch(0.28 0.006 260); border-radius: 11px; overflow: hidden; } .profile-stat-cell { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; background: oklch(0.175 0.005 260); } .profile-stat-label { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(0.62 0.005 260); } .profile-stat-value { font-size: 18px; font-weight: 800; color: oklch(0.95 0.003 260); } .profile-stat-value--positive { color: var(--profile-positive); } /* ---------- Generic card + label ---------- */ .profile-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; border-radius: 14px; background: var(--profile-card-bg); border: 1px solid var(--profile-card-border); } .profile-card--flush { padding: 18px 20px 6px; } .profile-card-label { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--profile-label); } .profile-card--flush > .profile-card-label { margin-bottom: 4px; } .profile-card-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } /* ---------- Account & preferences fields ---------- */ .profile-field { display: flex; flex-direction: column; gap: 6px; } .profile-field label { font-size: 12.5px; font-weight: 600; color: var(--profile-field-label); } .profile-field input[type="text"], .profile-field select { width: 100%; padding: 10px 12px; border-radius: 9px; background: var(--profile-field-bg); border: 1px solid var(--profile-field-border); color: oklch(0.93 0.004 260); font: inherit; font-size: 13.5px; box-sizing: border-box; } .profile-field input:focus, .profile-field select:focus { outline: none; border-color: var(--color-accent); } .profile-field-hint { font-size: 12px; color: var(--profile-text-dimmer); } .profile-email-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; background: oklch(0.145 0.004 260); border: 1px solid oklch(0.22 0.005 260); color: var(--profile-text-dim); font-size: 13.5px; } .profile-email-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-email-locked { flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.62 0.005 260); } .profile-form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--profile-divider); } .profile-form-status { font-size: 12.5px; color: var(--profile-text-dimmer); margin-right: auto; } /* ---------- Card-scoped buttons (Discard, Rotate, Export, Choose file...) ---------- */ .profile-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: 9px; background: oklch(0.24 0.005 260); border: 1px solid oklch(0.32 0.005 260); color: oklch(0.9 0.004 260); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } .profile-btn:hover { background: oklch(0.29 0.005 260); } .profile-btn--danger { background: transparent; border-color: oklch(0.42 0.12 25); color: oklch(0.74 0.16 25); } .profile-btn--danger:hover { background: oklch(0.28 0.08 25); color: oklch(0.74 0.16 25); } .profile-btn--save { padding: 9px 15px; font-size: 12.5px; } /* ---------- Cinema memberships tiles ---------- */ .profile-membership-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; } .profile-membership-tile { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px 10px 11px 14px; border-radius: 11px; background: oklch(0.195 0.005 260); border: 1px solid oklch(0.27 0.005 260); cursor: pointer; } .profile-membership-tile input { position: absolute; opacity: 0; pointer-events: none; } .profile-membership-tile:has(input:focus-visible) { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } /* Every rendered tile starts checked (unchecked ones don't render at all) -- this only ever matches after a click unchecks one, giving "marked for removal" feedback on the still-visible tile with no JS involved. */ .profile-membership-tile:has(input:not(:checked)) { opacity: 0.5; } .profile-membership-tile:has(input:not(:checked)) .profile-membership-tile-plan { text-decoration: line-through; } .profile-membership-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profile-membership-tile-plan { font-size: 13px; font-weight: 600; color: oklch(0.92 0.004 260); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-membership-tile-chain { font-size: 11.5px; color: oklch(0.62 0.005 260); line-height: 1.3; } .profile-membership-tile-remove { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: oklch(0.5 0.005 260); } .profile-membership-tile:hover .profile-membership-tile-remove { background: oklch(0.32 0.08 25); color: oklch(0.85 0.1 25); } .profile-membership-add { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 11px 14px; border-radius: 11px; background: transparent; border: 1px dashed oklch(0.34 0.005 260); color: oklch(0.72 0.005 260); font-size: 13px; font-weight: 600; cursor: pointer; } .profile-membership-add:hover { border-color: var(--color-accent); color: var(--color-accent-dim); } .profile-membership-add-panel { margin-top: 4px; } /* ---------- Data & access divided rows ---------- */ .profile-data-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-bottom: 1px solid var(--profile-divider); } .profile-card--flush > .profile-data-row:last-child { padding-bottom: 18px; border-bottom: none; } .profile-data-row-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 240px; min-width: 0; } .profile-data-row-title { font-size: 13.5px; font-weight: 600; color: oklch(0.92 0.004 260); } .profile-data-row-meta { font-size: 12px; color: oklch(0.6 0.005 260); } .profile-data-row-meta a { color: inherit; text-decoration: underline; } .profile-data-row-code { font-family: var(--font-mono); color: oklch(0.72 0.005 260); } .profile-data-row-actions { display: flex; gap: 8px; flex-shrink: 0; } .profile-import-form { flex-shrink: 0; } .profile-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .profile-import-form:has(.profile-file-input:focus-visible) .profile-btn { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } /* ---------- Auth card ---------- */ .wordmark { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.02em; color: var(--color-text); } .wordmark span { color: var(--color-accent); } .auth-shell { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem var(--side-margin) calc(var(--footer-height) + 1rem); } .auth-card { width: 100%; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; } .auth-card .wordmark { display: block; text-align: center; margin: 0 0 0.4rem; } .auth-tagline { text-align: center; color: var(--color-text-dim); font-size: 0.85rem; margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); } .auth-switch { margin-top: 1.25rem; text-align: center; font-size: 0.88rem; color: var(--color-text-dim); } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: 4rem 1.5rem; color: var(--color-text-dim); border: 1px dashed var(--color-border-strong); border-radius: var(--radius); } .empty-state p { margin: 0 0 1.25rem; } .empty-state-icon { margin: 0 auto 1rem; width: 40px; height: 40px; color: var(--color-text-faint); } .empty-state-icon svg { width: 100%; height: 100%; } .empty-state-hint { color: var(--color-text-dim); font-size: 0.85rem; margin: -0.75rem 0 1.25rem; } /* ---------- Diary: filter pills ---------- */ .filter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.875rem; } .filter-row-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .filter-pills { display: flex; gap: 0.5rem; } .date-range-form { display: flex; align-items: center; gap: 0.5rem; } .date-range-form select { padding: 0.42rem 0.7rem; border-radius: 100px; border: 1px solid var(--color-border-strong); background: var(--color-surface-sunken); color: var(--color-text-dim); font-size: 0.78rem; font-weight: 600; } .filter-date-apply { padding: 0.3rem 0.7rem; font-size: 0.72rem; } .no-js .filter-date-apply { display: inline-flex !important; } .active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.4rem 0 1rem; } .active-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 100px; background: var(--color-accent-wash); border: 1px solid var(--color-accent); color: var(--color-accent-dim); font-size: 0.74rem; font-weight: 600; } .active-filter-chip:hover { background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; } .filter-pill { padding: 0.44rem 0.875rem; border-radius: 100px; border: 1px solid var(--color-border-strong); color: var(--color-text-dim); font-size: 0.78rem; font-weight: 600; } .filter-pill:hover { color: var(--color-text); text-decoration: none; } .filter-pill:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } .filter-pill.is-active { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-accent-dim); } .filter-result-count { font-size: 0.78rem; color: var(--color-text-dim); } /* ---------- Diary table ---------- */ .diary-table-wrap { position: relative; border-radius: var(--radius); border: 1px solid var(--color-border); overflow: auto; } /* Fade cue on the trailing edge when there's more of the table to scroll to -- the wrap's own overflow:auto scrollbar is invisible at rest on touch devices (iOS Safari never renders one), so without this a narrow viewport gives no indication the Saved/Tags columns exist at all. Toggled by setupTableScrollHints() in app.js; a generated pseudo-element on the scroll container itself, so it stays pinned to the visual edge instead of scrolling away with the table content. */ .diary-table-wrap.has-scroll-hint::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--color-surface-sunken)); pointer-events: none; } /* ---------- Diary table: bulk edit ---------- */ .cell-edit { display: none; } .diary-table-wrap.is-bulk-editing .cell-display { display: none; } .diary-table-wrap.is-bulk-editing .cell-edit { display: inline-block; } .diary-table-wrap.is-bulk-editing .bulk-edit-price-fields, .diary-table-wrap.is-bulk-editing .bulk-edit-rewatch, .diary-table-wrap.is-bulk-editing .bulk-edit-field { display: flex; } /* Spreadsheet-style grid lines and a raised header, active only while editing -- reinforces that the table has become a grid of individually addressable cells rather than a read-only list. */ .diary-table-wrap.is-bulk-editing th { background: var(--color-surface-raised); } .diary-table-wrap.is-bulk-editing td { border-left: 1px solid var(--color-border); } .diary-table-wrap.is-bulk-editing td:first-child { border-left: none; } .bulk-edit-hint { display: none; margin: -0.5rem 0 1rem; font-size: 0.78rem; color: var(--color-text-dim); } .bulk-edit-hint kbd { padding: 0.05rem 0.4rem; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); font: inherit; font-size: 0.72rem; } .bulk-edit-field { display: none; flex-direction: column; gap: 0.2rem; } .bulk-edit-field-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-dim); } .bulk-edit-input { width: 100%; max-width: 128px; padding: 0.32rem 0.5rem; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 0.8rem; } .bulk-edit-input:focus { outline: none; border-color: var(--color-accent); } /* Live validation as the user types, rather than only surfacing a bad row after the whole batch is submitted -- toggled by setupBulkEdit() in app.js off the input's own HTML5 constraint-validation state. */ .bulk-edit-input.is-invalid { border-color: var(--color-danger); } .bulk-edit-input.is-invalid:focus { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); } .bulk-edit-price-fields { display: none; flex-direction: column; gap: 0.5rem; } .bulk-edit-rewatch { display: none; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--color-text-dim); cursor: pointer; } .bulk-edit-rewatch input { width: 15px; height: 15px; } [data-bulk-edit-toggle] svg { width: 16px; height: 16px; flex-shrink: 0; } [data-bulk-edit-toggle][aria-pressed="true"] { background: var(--color-accent-wash); color: var(--color-accent-dim); border-color: var(--color-accent); } .diary-table { width: 100%; /* Floor so columns keep a readable width instead of being crushed on a narrow viewport -- .diary-table-wrap's overflow:auto (below) then scrolls horizontally past this floor, which is the whole point of that wrapper existing. Without it, width:100% wins and overflow-wrap:anywhere on .diary-table-title starts breaking titles letter by letter instead. */ min-width: 680px; border-collapse: collapse; } .diary-table th { background: var(--color-surface); padding: 0.69rem 1rem; font-size: 0.72rem; font-weight: 600; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; } .sort-header { color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; display: inline-flex; align-items: center; gap: 0.25rem; } .sort-header:hover { color: var(--color-text); text-decoration: none; } .sort-header.is-active { color: var(--color-accent-dim); } .diary-table td { padding: 0.69rem 1rem; border-top: 1px solid var(--color-border); vertical-align: middle; font-size: 0.82rem; color: var(--color-text-dim); } .diary-table tbody tr { background: var(--color-surface-sunken); } .diary-table tbody tr:not(.diary-table-group-row):hover, .diary-table tbody tr:not(.diary-table-group-row):has(:focus-visible) { background: var(--color-surface-raised); } .diary-table-group-row td { padding: 0.55rem 1rem; background: var(--color-bg); } .diary-table-group-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-dim); } .diary-table-group-saved { color: var(--color-accent-dim); font-weight: 700; text-transform: none; letter-spacing: normal; } .diary-table-poster { width: 44px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--color-surface-raised); } .diary-table-poster-placeholder { width: 44px; height: 64px; border-radius: 6px; background: repeating-linear-gradient( 135deg, var(--color-surface-raised) 0, var(--color-surface-raised) 5px, var(--color-border) 5px, var(--color-border) 10px ); } .diary-table-title { font-weight: 700; font-size: 0.875rem; color: var(--color-text); overflow-wrap: anywhere; } .diary-table-meta { font-size: 0.75rem; color: var(--color-text-dim); overflow-wrap: anywhere; } .diary-table-price { font-size: 0.82rem; color: var(--color-text-dim); } .diary-table-price-full { font-size: 0.69rem; color: var(--color-text-dim); text-decoration: line-through; } .diary-table-price-full.diary-table-price-note { text-decoration: none; font-style: italic; } .diary-table-saved { font-weight: 700; font-size: 0.875rem; color: var(--color-accent-dim); } .diary-table-saved-none { font-weight: 400; color: var(--color-text-dim); } .diary-table-saved-negative { color: var(--color-text-dim); } .diary-table-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .row-menu { position: relative; display: flex; justify-content: flex-end; } .row-menu-trigger { position: relative; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); /* A real hairline at rest, not transparent -- previously invisible until hover, so the control had no resting affordance at all. */ border: 1px solid var(--color-border); background: none; /* text-faint measured 2.26:1 on this row background, under the 4.5:1 minimum; text-dim clears it here at 4.84:1 (the row surface is dark enough -- see --color-text-dim-strong above for the lighter-surface case this token doesn't cover). */ color: var(--color-text-dim); font-size: 1rem; line-height: 1; cursor: pointer; } .row-menu-trigger::after { /* Invisible hit-area extension to the 44x44px touch-target minimum without inflating the visible glyph or the row's height/density. */ content: ""; position: absolute; inset: -8px; } .row-menu-trigger:hover, .row-menu-trigger[aria-expanded="true"] { color: var(--color-text); background: var(--color-surface-raised); border-color: var(--color-border-strong); } .row-menu-dropdown { position: absolute; top: calc(100% + 0.3rem); right: 0; min-width: 160px; padding: 0.35rem; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); z-index: 15; } .row-menu-dropdown[hidden] { display: none; } .row-menu-form { display: contents; } .row-menu-item { display: block; width: 100%; padding: 0.45rem 0.6rem; border: none; background: none; border-radius: 6px; color: var(--color-text); font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer; } .row-menu-item:hover { background: var(--color-surface); text-decoration: none; } .row-menu-item-danger { color: var(--color-danger); } .row-menu-item-danger:hover { background: var(--color-danger-bg); } .row-menu-divider { height: 1px; margin: 0.3rem 0.2rem; background: var(--color-border); } .no-js .row-menu-trigger { display: none; } .no-js .row-menu-dropdown { display: flex !important; position: static !important; flex-direction: row; flex-wrap: wrap; box-shadow: none; min-width: 0; } .no-js .row-menu-divider { display: none; } .tag { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); font-size: 0.76rem; color: var(--color-text-dim-strong); } a.tag:hover { color: var(--color-text); border-color: var(--color-border-strong); text-decoration: none; } a.tag.is-active { background: var(--color-accent-wash); border-color: var(--color-accent); color: var(--color-accent-dim); } .tag-highlight { color: var(--color-text); } .pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; font-size: 0.85rem; } /* ---------- Search / results ---------- */ .search-eyebrow { text-align: center; margin: 0 0 1rem; } .search-hero { position: relative; max-width: 640px; margin: 0 auto 2.5rem; } .search-hero-form { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.1rem; } .search-hero-form:focus-within { border-color: var(--color-accent); } .search-hero-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-dim); } .search-hero-form input { flex: 1; border: none; background: none; padding: 0.7rem 0; font-size: 1.1rem; color: var(--color-text); } .search-hero-form input:focus { outline: none; } .search-hero-submit { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: none; background: var(--color-accent); color: var(--color-accent-ink); font-size: 0; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .search-hero-submit::before { content: ""; display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat; } .search-hero-submit:hover { background: var(--color-accent-bright); } .film-suggestions { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 0.5rem 0 0; padding: 0.4rem; list-style: none; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); max-height: 22rem; overflow-y: auto; } .film-suggestion { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; } .film-suggestion:hover { background: var(--color-surface-sunken); } .film-suggestion img, .film-suggestion-poster-placeholder { width: 32px; height: 48px; border-radius: 4px; object-fit: cover; background: var(--color-surface-sunken); flex-shrink: 0; } .film-suggestion-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text); } .film-suggestion-year { font-size: 0.78rem; color: var(--color-text-dim); } .results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; } .result-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s ease; } .result-card:hover { border-color: var(--color-accent); } .result-card a { display: block; color: var(--color-text); } .result-card a:hover { text-decoration: none; } .result-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--color-surface-raised); } .result-poster-placeholder { width: 100%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; background: var(--color-surface-raised); color: var(--color-text-dim); font-size: 0.75rem; text-align: center; padding: 0.5rem; } .result-info { padding: 0.65rem 0.75rem; } .result-title { font-size: 0.88rem; font-weight: 600; line-height: 1.3; } .result-year { font-size: 0.78rem; color: var(--color-text-dim); } /* ---------- Add / edit entry (confirm screen) ---------- */ .confirm-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; max-width: 900px; } .confirm-poster { width: 100%; border-radius: var(--radius); border: 1px solid var(--color-border); } .confirm-poster-placeholder { width: 100%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text-dim); font-size: 0.8rem; text-align: center; padding: 0.75rem; } .confirm-film-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.25rem; } .confirm-film-meta { color: var(--color-text-dim); font-size: 0.85rem; margin: 0 0 1.25rem; } .image-credit { margin: 0.5rem 0 0; font-size: 0.7rem; color: var(--color-text-dim); text-align: center; } .image-credit a { color: var(--color-text-dim); text-decoration: underline; } /* ---------- Cinema / streaming toggle ---------- */ .segmented { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: 999px; overflow: hidden; } .segmented-option { position: relative; padding: 0.5rem 1.4rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text-dim); cursor: pointer; } .segmented-option input { position: absolute; opacity: 0; pointer-events: none; } .segmented-option.is-active { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; } .segmented-option:focus-within { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; } .venue-panel { display: grid; gap: 1rem; } .venue-panel[hidden] { display: none; } /* ---------- Price fields ---------- */ .price-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ---------- Tag input ---------- */ .tag-input { position: relative; } .tag-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .tag-chips:empty { margin-bottom: 0; } .tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); font-size: 0.8rem; color: var(--color-text); } .tag-chip button { background: none; border: none; color: var(--color-text-dim); cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; } .tag-chip button:hover { color: var(--color-danger); } .tag-suggestions { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0.3rem; list-style: none; background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); max-height: 200px; overflow-y: auto; } .tag-suggestions li { padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; } .tag-suggestions li:hover { background: var(--color-surface-sunken); color: var(--color-accent-bright); } /* ---------- Stats ---------- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .stats-grid-diary { grid-template-columns: repeat(4, 1fr); margin-bottom: 1.75rem; } .stats-grid-2x2 { grid-template-columns: repeat(2, 1fr); } .stats-hero-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1rem; margin-bottom: 1rem; } .stats-hero-side { display: flex; flex-direction: column; gap: 1rem; } .stats-secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; } .stats-chart-card { display: flex; flex-direction: column; } .stats-chart-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .stats-delta-pill { flex-shrink: 0; padding: 0.3rem 0.7rem; border-radius: 100px; background: var(--color-success-bg); color: var(--color-accent-dim); font-size: 0.74rem; font-weight: 700; white-space: nowrap; } .stats-chart { width: 100%; height: 140px; display: block; } .stats-chart-gridline { stroke: var(--color-border); stroke-width: 1; } .stats-chart-area { stroke: none; } .stats-chart-gradient-start { stop-color: var(--color-accent); stop-opacity: 0.35; } .stats-chart-gradient-end { stop-color: var(--color-accent); stop-opacity: 0; } .stats-chart-line { stroke: var(--color-accent); stroke-width: 2; } .stats-chart-dot { fill: var(--color-accent); } .stats-chart-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.68rem; color: var(--color-text-dim); } .stats-chart-empty { color: var(--color-text-dim); font-size: 0.85rem; margin: 1rem 0 0; } .stats-best-value-card { display: flex; flex-direction: column; flex: 1; } .stats-best-value-body { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 0.5rem; } .stats-best-value-poster, .stats-best-value-poster-placeholder { flex-shrink: 0; width: 44px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--color-surface-raised); } .stats-best-value-poster-placeholder { background: repeating-linear-gradient( 135deg, var(--color-surface-raised) 0, var(--color-surface-raised) 5px, var(--color-border) 5px, var(--color-border) 10px ); } .stats-best-value-title { font-weight: 700; font-size: 0.9rem; color: var(--color-text); } .stats-best-value-venue { font-size: 0.76rem; color: var(--color-text-dim); margin-top: 0.15rem; } .stats-best-value-saved { font-weight: 700; font-size: 0.85rem; color: var(--color-accent-dim); margin-top: 0.35rem; } .stats-venue-card { display: flex; flex-direction: column; } .stats-venue-rows { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.75rem; } .stats-venue-row-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; } .stats-venue-row-label { font-weight: 700; font-size: 0.82rem; color: var(--color-text); } .stats-venue-row-figures { font-size: 0.72rem; color: var(--color-text-dim); } .stats-venue-bar { width: 100%; height: 8px; display: block; } .stats-venue-bar-track { fill: var(--color-surface-raised); } .stats-venue-bar-spent { fill: var(--color-text-dim); } .stats-venue-bar-saved { fill: var(--color-accent); } .stats-venue-legend { display: flex; gap: 1rem; margin-top: 1rem; font-size: 0.72rem; color: var(--color-text-dim); } .stats-legend-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.3rem; } .stats-legend-swatch-spent { background: var(--color-text-dim); } .stats-legend-swatch-saved { background: var(--color-accent); } .stats-percentile-card { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding: 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .stats-percentile-ring { width: 80px; height: 80px; flex-shrink: 0; transform: rotate(-90deg); } .stats-percentile-ring-track { fill: none; stroke: var(--color-surface-raised); stroke-width: 6; } .stats-percentile-ring-fill { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; } .stats-percentile-ring-text { fill: var(--color-text); font-size: 0.95rem; font-weight: 800; transform: rotate(90deg); transform-origin: 40px 40px; } .stats-percentile-headline { font-size: 1.1rem; font-weight: 800; color: var(--color-text); } .stats-percentile-caption { margin: 0.35rem 0 0; color: var(--color-text-dim); font-size: 0.85rem; } .stat-card { padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .stat-card--accent { background: linear-gradient(135deg, oklch(0.24 0.03 75), oklch(0.21 0.02 75)); border-color: oklch(0.3 0.03 75 / 0.5); } .stat-value { display: block; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); line-height: 1; } .stat-card--accent .stat-value { color: oklch(0.96 0.01 75); } .stat-label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-dim); } .stat-card--accent .stat-label { color: oklch(0.75 0.03 75); } .stat-subline { margin-top: 0.3rem; font-size: 0.75rem; color: var(--color-text-dim); } .stat-card--accent .stat-subline { color: oklch(0.75 0.03 75); } .stats-section { margin-bottom: 2rem; } .stats-section:last-child { margin-bottom: 0; } .stats-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-dim); margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); } .section-header .stats-section-title { margin: 0; padding: 0; border: none; } /* ---------- Admin ---------- */ .admin-subnav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .admin-subnav-group { display: flex; align-items: center; gap: 1rem; padding-left: 1.25rem; border-left: 1px solid var(--color-border); } .admin-subnav a { padding: 0.3rem 0.7rem; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; color: var(--color-text-dim); } .admin-subnav a:hover { text-decoration: none; color: var(--color-text); } .admin-subnav a.is-active { background: var(--color-accent-wash); color: var(--color-accent-dim); } .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1.25rem; font-size: 0.85rem; color: var(--color-text-dim); } .breadcrumbs a { color: var(--color-text-dim); } .breadcrumbs a:hover { color: var(--color-text); } .breadcrumb-sep { color: var(--color-border); } .breadcrumb-current { color: var(--color-text); } .table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .admin-table th, .admin-table td { padding: 0.75rem 1rem; text-align: left; /* Wraps in place rather than forcing the whole table wider (and the row into horizontal scroll) -- the same overflow-wrap: anywhere protection the diary table applies to its own free-text cells, now applied consistently here instead of via a different mechanism. Short cells (dates, counts, badges) never reach their wrap point, so this is only visible where a long user-entered name actually needs it. */ overflow-wrap: anywhere; } .admin-table th { background: var(--color-surface-raised); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; font-weight: 700; color: var(--color-text-dim); } .admin-table tbody tr:not(:last-child) { border-bottom: 1px solid var(--color-border); } .admin-table tbody tr:hover { background: var(--color-surface-raised); } .cell-mono { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-dim); } .btn-danger-text { background: none; border: none; padding: 0; font: inherit; color: var(--color-danger); cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; } .btn-danger-text:hover { text-decoration: underline; } .btn-secondary-text { background: none; border: none; padding: 0; font: inherit; color: var(--color-accent); cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; } .btn-secondary-text:hover { text-decoration: underline; } /* ---------- Error pages ---------- */ .error-page { text-align: center; padding: 5rem 1.5rem; } .error-code { font-size: 4rem; font-weight: 800; color: var(--color-accent); margin: 0; } .error-message { font-size: 1rem; font-weight: 400; margin: 0 0 1.5rem; } /* ---------- Footer ---------- */ /* Fixed to the viewport bottom (not just after the content) so it's always visible, matching the sticky sidebar user block above -- .app-main's descendant footer gets offset clear of the sidebar; the guest shell (no sidebar ancestor) spans the full width. */ .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--color-bg); border-top: 1px solid var(--color-border); } .app-main .site-footer { left: var(--sidebar-width); } .footer-content { padding: 0.9rem 2.5rem; } .footer-legal-line { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--color-text-dim); } .footer-legal-line a { color: var(--color-text-dim); text-decoration: underline; } .footer-legal-line a:hover { color: var(--color-accent-bright); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { :root { --side-margin: 5%; /* The fixed footer's legal line wraps to multiple lines at this width instead of the desktop single line, so it renders taller than the desktop --footer-height -- generous enough for a worst-case 3-line wrap down to 320px, since .page's padding-bottom below is this app's only guard against the fixed footer covering real content. */ --footer-height: 6rem; } .app-shell { flex-direction: column; } /* The sidebar becomes the mobile nav row at this breakpoint -- its items are the app's most-used control, so they get the same touch-target floor as .profile-btn/.btn-sm below. */ .sidebar-nav-item { min-height: 44px; } /* PROFILE-BRIEF.md rule 7: interactive targets >=44px tall at touch widths -- 900px matches the sidebar-stacking breakpoint above, since that's this app's actual touch/mobile threshold, not the narrower 640px phone breakpoint this rule used to be scoped to. */ .profile-btn, .profile-membership-add { min-height: 44px; } .profile-membership-tile-remove { width: 32px; height: 32px; } .sidebar { width: 100%; /* Grid instead of a single flex row: at this width logo + nav + user can't all fit on one line without either wrapping nav items onto their own stacked rows (each alone still too wide to share a line -- the bug this replaced, which turned the mobile header into a tall, cramped 3-row stack) or crushing everything illegibly. Two rows by *design* -- logo/account up top, nav given the full width below -- reflows the same three children (still in their original DOM order, nothing moved in markup) without lengthening the header uncontrolled. Row layout, not a full-height column -- the sticky/100vh pin above is a desktop-only trick, and would otherwise fight the topbar's own sticky top:0 for the same viewport real estate. */ display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo logo user" "nav nav nav"; align-items: center; row-gap: 0.6rem; column-gap: 1rem; padding: 0.75rem 1.25rem; border-right: none; border-bottom: 1px solid var(--color-border); position: static; height: auto; overflow-y: visible; } .sidebar-logo { grid-area: logo; } .app-main .site-footer { left: 0; } .footer-content { padding: 0.9rem 5%; } .sidebar-nav { grid-area: nav; flex-direction: row; /* nowrap + its own horizontal scroll, not flex-wrap -- wrap let each item claim a full line the moment two couldn't fit side by side, which is what produced the 3-row stack this grid layout replaces. At this row's full width the three items comfortably fit on one line; overflow-x is a safety net for a narrower viewport or a future fourth nav item, not the primary mechanism. */ flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; } .sidebar-user { grid-area: user; justify-self: end; margin-top: 0; /* Without this, the flex item's shrink floor defaults to its content's unwrapped min-content width (the full email address), which pushes .sidebar past the viewport instead of letting .sidebar-user-name/ -email's existing text-overflow:ellipsis actually engage. A percentage here (the old 55%) is a share of this grid item's own "auto" track, which is sized *from* the item's content -- that circular dependency is what was collapsing the trigger down to just the avatar. vw sizes against the viewport instead, breaking the loop. */ flex-shrink: 1; min-width: 0; max-width: 45vw; } .sidebar-user-trigger, .sidebar-user-info { min-width: 0; } .sidebar-user-trigger { min-height: 44px; } /* The trigger sits at the top of the mobile header now, not the bottom of a tall sidebar column, so the desktop menu (which opens upward via `bottom`) would render above the viewport -- invisible and unclickable. Open downward instead, and size the menu to its own content rather than matching the narrow (45vw-capped) trigger it hangs off. */ .sidebar-user-menu { top: calc(100% + 0.4rem); bottom: auto; left: auto; right: 0; width: max-content; min-width: 200px; max-width: calc(100vw - 2 * 5%); } .topbar { padding: 0.6rem 5%; } .topbar-search-kbd, .topbar-btn-kbd { display: none; } .page { padding: 1.5rem 5% calc(var(--footer-height) + 1rem); } .flash-list { padding: 1.25rem 5% 0; } .stats-hero-row, .stats-secondary-row { grid-template-columns: 1fr; } /* Touch-target floor for the page-level filter controls specifically -- not applied to .tag, which sits at table-row density where a 44px pill would wreck the row rhythm the table depends on for scanability. .sort-header is a table header, not a per-row element, so it renders once per table rather than once per entry -- the same floor applies without the row-density cost. */ .filter-pill, .sort-header { display: inline-flex; align-items: center; min-height: 44px; } .date-range-form select { min-height: 44px; } } @media (max-width: 640px) { :root { --side-margin: 1.25rem; } .sidebar-nav-item { padding: 0.5rem 0.6rem; font-size: 0.78rem; } /* At this width even 45vw of name+email crowds the logo out of the header row. Collapse to just the avatar -- the full name/email moves into the dropdown's header instead of being lost. */ .sidebar-user { max-width: none; } .sidebar-user-info { display: none; } .sidebar-user-menu-header { display: block; } .sidebar-user-menu { max-width: calc(100vw - 2 * 1.25rem); } .page { padding: 1.25rem 1.25rem calc(var(--footer-height) + 0.5rem); } .flash-list { padding: 1.25rem 1.25rem 0; } .stats-grid-diary { grid-template-columns: repeat(2, 1fr); } .confirm-layout { grid-template-columns: 1fr; } .confirm-poster, .confirm-poster-placeholder { max-width: 160px; } .search-hero-form { padding-left: 0.8rem; } .search-hero-form input { font-size: 1rem; } .auth-card { padding: 1.5rem; } .price-fields { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }