/* ============================================================ Ubringit stylesheet Light and dark themes. Switched via [data-theme="light"|"dark"] attribute on . When no attribute is set, system preference is followed. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,700;9..144,900&family=Inter+Tight:wght@400;500;600&display=swap'); /* Dark theme (default) */ :root, [data-theme="dark"] { --bg: #14161f; --bg-elev: #1c1f2b; --bg-elev-2: #242837; --border: #2c3142; --border-soft: #232636; --text: #e8e5dd; --text-dim: #9a9aa6; --text-mute: #6a6b78; --accent: #f0b660; --accent-2: #e07a5f; --accent-hover: #f4c478; --accent-text: #1a1410; /* text color on top of accent buttons */ --success: #7fb685; --danger: #d6604c; --shadow-lg: 0 20px 60px -20px rgba(0,0,0,0.6); --body-bg-gradient-1: rgba(240,182,96,0.06); --body-bg-gradient-2: rgba(224,122,95,0.04); --topbar-bg: rgba(20, 22, 31, 0.85); --flash-success-bg: rgba(127,182,133,0.12); --flash-success-border: rgba(127,182,133,0.3); --flash-success-text: #b7e2bd; --flash-error-bg: rgba(214,96,76,0.12); --flash-error-border: rgba(214,96,76,0.3); --flash-error-text: #f0a89a; --badge-accepted-bg: rgba(127,182,133,0.15); --badge-accepted-text: #a7d6ad; --badge-declined-bg: rgba(214,96,76,0.15); --badge-declined-text: #ec9988; --badge-pending-bg: rgba(240,182,96,0.15); --display: 'Fraunces', Georgia, serif; --body: 'Inter Tight', system-ui, sans-serif; --radius: 12px; --radius-sm: 8px; } /* Light theme — Ubringit brand palette: deep teal primary, coral accent, navy text */ [data-theme="light"] { --bg: #F7F9FA; --bg-elev: #ffffff; --bg-elev-2: #eef2f4; --border: #d7dde2; --border-soft: #e6eaee; --text: #24323D; --text-dim: #54636e; --text-mute: #8a98a4; --accent: #1F6F78; --accent-2: #FF7A59; --accent-hover: #2a8590; --accent-text: #ffffff; --success: #5BB98C; --danger: #d2453a; --shadow-lg: 0 20px 60px -20px rgba(36, 50, 61, 0.20); --body-bg-gradient-1: rgba(31, 111, 120, 0.06); --body-bg-gradient-2: rgba(255, 122, 89, 0.05); --topbar-bg: rgba(247, 249, 250, 0.88); --flash-success-bg: rgba(91, 185, 140, 0.12); --flash-success-border: rgba(91, 185, 140, 0.30); --flash-success-text: #2f7d59; --flash-error-bg: rgba(210, 69, 58, 0.10); --flash-error-border: rgba(210, 69, 58, 0.30); --flash-error-text: #a02d24; --badge-accepted-bg: rgba(91, 185, 140, 0.15); --badge-accepted-text: #2f7d59; --badge-declined-bg: rgba(210, 69, 58, 0.12); --badge-declined-text: #a02d24; --badge-pending-bg: rgba(242, 185, 80, 0.20); } /* Auto: when no data-theme is set AND system prefers light */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #F7F9FA; --bg-elev: #ffffff; --bg-elev-2: #eef2f4; --border: #d7dde2; --border-soft: #e6eaee; --text: #24323D; --text-dim: #54636e; --text-mute: #8a98a4; --accent: #1F6F78; --accent-2: #FF7A59; --accent-hover: #2a8590; --accent-text: #ffffff; --success: #5BB98C; --danger: #d2453a; --shadow-lg: 0 20px 60px -20px rgba(36, 50, 61, 0.20); --body-bg-gradient-1: rgba(31, 111, 120, 0.06); --body-bg-gradient-2: rgba(255, 122, 89, 0.05); --topbar-bg: rgba(247, 249, 250, 0.88); --flash-success-bg: rgba(91, 185, 140, 0.12); --flash-success-border: rgba(91, 185, 140, 0.30); --flash-success-text: #2f7d59; --flash-error-bg: rgba(210, 69, 58, 0.10); --flash-error-border: rgba(210, 69, 58, 0.30); --flash-error-text: #a02d24; --badge-accepted-bg: rgba(91, 185, 140, 0.15); --badge-accepted-text: #2f7d59; --badge-declined-bg: rgba(210, 69, 58, 0.12); --badge-declined-text: #a02d24; --badge-pending-bg: rgba(242, 185, 80, 0.20); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.55; min-height: 100%; } body { background-image: radial-gradient(ellipse 80% 60% at 50% -10%, var(--body-bg-gradient-1), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, var(--body-bg-gradient-2), transparent 70%); background-attachment: fixed; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.5em; } h1 { font-size: 2.4rem; line-height: 1.1; } h2 { font-size: 1.5rem; } h3 { font-size: 1.15rem; } /* ---------- Top bar ---------- */ .topbar { display: flex; flex-direction: column; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: var(--topbar-bg); backdrop-filter: blur(12px); /* z-index must clear Leaflet's internal range (tile pane = 200, controls up to 400, popups = 700). 1000 is well clear and matches what other overlay-stack frameworks expect. */ position: sticky; top: 0; z-index: 1000; } .topbar-brand-row { display: flex; align-items: center; justify-content: center; padding: 4px 0; } .topbar-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; } .back-btn-spacer { width: 1px; min-width: 1px; } /* Desktop: single row layout. The brand-row and nav-row containers go away visually — display:contents promotes their children up to the topbar level so brand, back-btn (or spacer), and topnav become siblings of .topbar. */ @media (min-width: 720px) { .topbar { flex-direction: row; align-items: center; padding: 14px 28px; gap: 16px; } .topbar-brand-row, .topbar-nav-row { display: contents; } .brand { margin-right: auto; } /* push everything else right */ .topnav { margin-left: auto; } /* nav sits at far right */ .back-btn-spacer { display: none; } } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); } .brand:hover { text-decoration: none; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } .brand-name { font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.01em; } .topnav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .topnav a { color: var(--text-dim); font-weight: 500; } .topnav a:hover { color: var(--text); text-decoration: none; } .btn-pill { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text) !important; font-size: 0.9rem; } .btn-pill:hover { border-color: var(--accent); } .admin-tag { padding: 5px 11px; border-radius: 999px; background: var(--accent-2); color: var(--accent-text) !important; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .admin-tag:hover { text-decoration: none; } .user-menu summary { list-style: none; cursor: pointer; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--bg-elev); color: var(--text); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 8px; } .user-menu summary::-webkit-details-marker { display: none; } .user-menu { position: relative; } .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 160px; padding: 6px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; } .menu-pop a { padding: 8px 12px; color: var(--text); border-radius: 6px; } .menu-pop a:hover { background: var(--bg-elev-2); text-decoration: none; } /* ---------- Layout ---------- */ .container { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; } .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; } .section-title { margin-top: 36px; color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--body); font-weight: 600; } .footer { text-align: center; padding: 32px 16px; color: var(--text-mute); font-size: 0.85rem; } /* ---------- Hero ---------- */ .hero { padding: 80px 0 60px; text-align: center; } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; max-width: 14ch; margin-inline: auto; } .hero .accent { color: var(--accent); font-style: italic; } .lede { font-size: 1.2rem; color: var(--text-dim); max-width: 50ch; margin: 24px auto; } .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 60px; } .feature-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 28px 24px; transition: transform 0.2s, border-color 0.2s; } .feature-card:hover { transform: translateY(-2px); border-color: var(--border); } .feature-icon { font-size: 1.8rem; margin-bottom: 10px; line-height: 1; } .feature-icon-img { height: 80px; width: auto; object-fit: contain; vertical-align: middle; display: inline-block; } .feature-card h3 { font-family: var(--display); } .feature-card p { color: var(--text-dim); margin: 0; font-size: 0.95rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: transform 0.05s, background 0.2s, border-color 0.2s; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-primary:hover { background: var(--accent-hover); text-decoration: none; } .btn-secondary { background: var(--bg-elev-2); color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--accent); text-decoration: none; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); text-decoration: none; } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: 14px; } .form-wide { max-width: 640px; } .form-row { display: flex; gap: 10px; align-items: center; } .form label { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: 0.9rem; font-weight: 500; } .form input, .form textarea, .form select { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; border-radius: var(--radius-sm); font: inherit; } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240,182,96,0.15); } .form input:disabled { opacity: 0.6; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } } .inline-form { display: inline; } .small { font-size: 0.85rem; } /* ---------- Auth card ---------- */ .auth-card { max-width: 420px; margin: 40px auto 0; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-lg); } .auth-card h1 { font-size: 1.8rem; margin-bottom: 8px; } .auth-card .muted { color: var(--text-dim); margin-bottom: 24px; } .center { text-align: center; } /* ---------- Flash ---------- */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.93rem; } .flash-success { background: var(--flash-success-bg); border: 1px solid var(--flash-success-border); color: var(--flash-success-text); } .flash-error { background: var(--flash-error-bg); border: 1px solid var(--flash-error-border); color: var(--flash-error-text); } /* ---------- Event cards ---------- */ .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 12px; } .event-card { display: block; padding: 22px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); color: var(--text); transition: transform 0.15s, border-color 0.2s; } .event-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; } .event-date { font-family: var(--display); font-weight: 900; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; } .event-title { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; } .event-meta { color: var(--text-mute); font-size: 0.85rem; margin-top: 6px; } /* ---------- Event detail ---------- */ .event-head { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .event-meta-row { display: flex; gap: 18px; color: var(--text-dim); font-size: 0.95rem; margin-top: 8px; flex-wrap: wrap; } .event-description { color: var(--text-dim); margin-top: 16px; max-width: 60ch; } .map { width: 100%; height: 320px; border-radius: var(--radius); border: 1px solid var(--border-soft); margin: 16px 0; /* isolation creates a new stacking context for the map. Leaflet sets z-indexes up to 700 internally for its controls and popups; without isolation those can render OVER a sticky page header on scroll. With isolation, all those z-indexes only compete within this box. */ isolation: isolate; position: relative; } .map-wrap { margin-top: 4px; } .map-help { font-size: 0.85rem; margin: 4px 2px; } .rsvp-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; margin: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .rsvp-card h3 { margin: 0; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } @media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } } .panel { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 24px; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; } /* ---------- Invitees ---------- */ .invitee-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .invitee-list li { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg-elev-2); border-radius: var(--radius-sm); } .invitee-id { display: flex; align-items: center; gap: 10px; } .invitee-name { color: var(--text); } .badge { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .badge-pending { background: var(--badge-pending-bg); color: var(--accent); } .badge-accepted { background: var(--badge-accepted-bg); color: var(--badge-accepted-text); } .badge-declined { background: var(--badge-declined-bg); color: var(--badge-declined-text); } /* ---------- Items ---------- */ .item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elev-2); border-radius: var(--radius-sm); } .item .check { width: 26px; height: 26px; border-radius: 50%; background: transparent; border: 2px solid var(--border); color: var(--accent); cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; } .item .check:hover { border-color: var(--accent); } .item-claimed .item-name { text-decoration: none; } .item-claimed .check { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } /* Claimed items: show a clear tick instead of crossing out. Keep them fully legible (no dimming) so guests can see what's already covered at a glance. */ .item-claimed { opacity: 1; } .item-claimed .item-tick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--accent-text, #fff); font-size: 13px; font-weight: 700; flex-shrink: 0; } .item-unclaimed .item-tick { display: none; } .item-body { flex: 1; min-width: 0; } .item-name { font-weight: 500; } .item-name .qty { color: var(--accent); font-weight: 600; margin-left: 6px; } .item-meta { font-size: 0.82rem; color: var(--text-mute); margin-top: 2px; } .link-danger { background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 4px 8px; font: inherit; } .link-danger:hover { color: var(--danger); } .link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 4px 6px; font: inherit; } .link:hover { text-decoration: underline; } /* ---------- Avatars ---------- */ .avatar-xs { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--bg-elev-2); } .avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-elev-2); border: 2px solid var(--border); } .avatar-block { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } /* ---------- Contacts ---------- */ .contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .contact-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; background: var(--bg-elev-2); border-radius: var(--radius-sm); gap: 12px; flex-wrap: wrap; } .contact-info { flex: 1; min-width: 0; } .contact-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .contact-meta { font-size: 0.88rem; color: var(--text-dim); } .contact-actions { display: flex; gap: 8px; align-items: center; } .checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev-2); } .checkbox-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 0.93rem; font-weight: 400; } .checkbox-row:hover { background: var(--bg-elev); } .checkbox-row input[type=checkbox] { accent-color: var(--accent); } /* ---------- Push banner ---------- */ .push-banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--accent); border-radius: 999px; padding: 10px 10px 10px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-lg); z-index: 100; max-width: calc(100% - 40px); } /* ---------- Admin ---------- */ .admin-shell { display: grid; grid-template-columns: 220px 1fr; gap: 28px; } @media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } } .admin-side { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; height: fit-content; position: sticky; top: 80px; } .admin-side h3 { font-family: var(--display); color: var(--accent-2); margin: 0 0 14px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; } .admin-side nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .admin-side nav a { padding: 8px 12px; border-radius: 6px; color: var(--text-dim); font-weight: 500; } .admin-side nav a:hover { color: var(--text); background: var(--bg-elev-2); text-decoration: none; } .admin-side nav a.active { background: var(--bg-elev-2); color: var(--text); border-left: 3px solid var(--accent); padding-left: 9px; } .admin-main h1 { font-size: 2rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0 28px; } .stat { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; text-align: center; } .stat-num { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1; } .stat-label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; } .admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 0.92rem; } .admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .admin-table th { font-family: var(--body); font-weight: 600; color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .admin-table td.actions { white-space: nowrap; } .admin-table select { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 6px; font-size: 0.85rem; } /* ---------- Utility ---------- */ .muted { color: var(--text-dim); } /* Leaflet popup themed style */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); } .leaflet-container { background: var(--bg-elev-2); } /* Theme switcher in user menu */ .theme-switcher { display: flex; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--border-soft); margin-top: 4px; } .theme-switcher button { flex: 1; padding: 6px 8px; background: transparent; border: 1px solid var(--border-soft); color: var(--text-dim); border-radius: 6px; cursor: pointer; font: inherit; font-size: 0.78rem; } .theme-switcher button:hover { color: var(--text); border-color: var(--border); } .theme-switcher button.active { background: var(--bg-elev-2); color: var(--accent); border-color: var(--accent); } /* Theme toggle for logged-out users (footer) */ .footer-theme { display: inline-flex; gap: 6px; margin-left: 12px; font-size: 0.78rem; } .footer-theme button { background: transparent; border: 0; color: var(--text-mute); cursor: pointer; padding: 2px 6px; } .footer-theme button.active { color: var(--accent); } /* Inline form (already exists, but extend for theme buttons in user menu) */ .menu-pop form.theme-form { margin: 0; } /* Invitee row right side (badge + remove button) */ .invitee-right { display: inline-flex; gap: 8px; align-items: center; } .invitee-right .link-danger { font-size: 1rem; line-height: 1; padding: 2px 8px; } /* Audit log admin page */ .audit-filter-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 24px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); } .audit-filter-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-dim); } .audit-filter-form select, .audit-filter-form input { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 0.9rem; } .audit-breakdown { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; } .audit-breakdown h3 { margin-top: 0; } .breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; } .breakdown-item { background: var(--bg-elev-2); border-radius: 8px; padding: 12px; text-align: center; } .breakdown-num { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1; } .breakdown-label { font-size: 0.78rem; color: var(--text-dim); margin-top: 4px; word-break: break-word; } .audit-table { font-size: 0.85rem; } .audit-table .nowrap { white-space: nowrap; } .action-code { background: var(--bg-elev-2); color: var(--accent); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 0.8rem; } /* Owner actions on event detail page */ .owner-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Inline avatar in item meta line */ .item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .item-meta .avatar-xs { width: 18px; height: 18px; } /* Admin: health check rows */ .health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 18px 0 24px; } .health-row { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; border-left: 3px solid var(--border); } .health-row.health-ok { border-left-color: var(--success); } .health-row.health-warn { border-left-color: var(--accent); } .health-row.health-fail { border-left-color: var(--danger); } .health-row.health-info { border-left-color: var(--text-mute); } .health-label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .health-value { font-family: ui-monospace, monospace; font-size: 0.92rem; } .health-detail { margin-top: 4px; } /* Admin: code block (for restore command etc) */ .codeblock { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; font-family: ui-monospace, monospace; font-size: 0.88rem; color: var(--text); overflow-x: auto; } .codeblock em { color: var(--accent); font-style: normal; } /* Admin: user drill-down */ .user-profile-head { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 24px; } .user-profile-head h1 { margin-bottom: 4px; } .user-meta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .user-bio { margin-top: 12px; color: var(--text-dim); max-width: 60ch; } /* Admin: broadcast recipient picker */ .recipient-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .recipient-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-weight: 400; } .recipient-row:hover { border-color: var(--border); } .recipient-row input[type=radio] { accent-color: var(--accent); } .checkbox-inline { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-dim); padding: 6px 0; } .checkbox-inline input[type=checkbox] { accent-color: var(--accent); } /* SMTP test result */ .smtp-result { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 18px; margin-top: 16px; border-left: 3px solid var(--border); } .smtp-result-ok { border-left-color: var(--success); } .smtp-result-fail { border-left-color: var(--danger); } .smtp-result h3 { margin-top: 0; } .smtp-error { color: var(--flash-error-text); } .smtp-hint { color: var(--accent); background: var(--bg-elev-2); border-radius: var(--radius-sm); padding: 10px 14px; } .smtp-transcript { background: #0d0f15; color: #cdd5e2; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: ui-monospace, monospace; font-size: 0.82rem; max-height: 360px; overflow: auto; white-space: pre-wrap; } .smtp-tx { color: #80b0ff; font-weight: 600; } .smtp-rx { color: #98d49b; font-weight: 600; } [data-theme="light"] .smtp-transcript { background: #f3efe6; color: #2a2823; } [data-theme="light"] .smtp-tx { color: #1a5fcb; } [data-theme="light"] .smtp-rx { color: #1f6b25; } details summary { cursor: pointer; padding: 6px 0; color: var(--text-dim); } details[open] summary { margin-bottom: 6px; } /* Email design page layout */ .email-design-layout { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr); gap: 24px; align-items: start; } @media (max-width: 1100px) { .email-design-layout { grid-template-columns: 1fr; } } .email-design-editor { display: flex; flex-direction: column; gap: 16px; } .design-panel { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 18px; } .design-panel > summary { cursor: pointer; padding: 4px 0; font-size: 1.05rem; } .design-panel[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; } .design-panel form { margin-top: 8px; } .color-input { display: inline-flex; gap: 6px; align-items: center; } .color-input input[type=color] { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; background: transparent; cursor: pointer; } .color-input input[type=text] { font-family: ui-monospace, monospace; flex: 1; } .email-design-preview { position: sticky; top: 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; } .preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 8px 4px; } .preview-frame { width: 100%; height: 700px; border: 1px solid var(--border-soft); border-radius: 8px; background: white; } /* Items panel sections (unclaimed vs claimed) */ .items-section { margin-bottom: 18px; } .items-section-header { display: flex; align-items: baseline; gap: 10px; padding: 0 0 6px 0; } /* "What we're bringing" panel: force readable text on every theme, including when an event wallpaper or wider scope tries to override colour. Mobile reports of unreadable near-white text came from --text being inherited from dark-mode context onto a light-mode panel background. Targeting #bringing scopes these to this panel only, so they can't bleed anywhere else. */ #bringing h2 { color: var(--text); font-weight: 800; } #bringing .items-section-header strong { color: var(--text); font-weight: 700; font-size: 1.05rem; } #bringing .items-section-header .muted { color: var(--text-dim); } /* Explicit light-mode fallback: in case anything in the chain tried to force white text in the bringing panel on a light background. */ [data-theme="light"] #bringing h2, [data-theme="light"] #bringing .items-section-header strong { color: #24323D; } [data-theme="light"] #bringing .items-section-header .muted { color: #54636e; } @media (prefers-color-scheme: light) { html:not([data-theme="dark"]) #bringing h2, html:not([data-theme="dark"]) #bringing .items-section-header strong { color: #24323D; } html:not([data-theme="dark"]) #bringing .items-section-header .muted { color: #54636e; } } /* Two-row item layout (body left, actions right) */ .item-list .item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } .item-unclaimed { background: var(--bg-elev-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); } .item-claimed { opacity: 0.95; } .item-body { flex: 1; min-width: 0; } .item-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; } .btn-sm { padding: 6px 12px; font-size: 0.85rem; } /* "Add" disclosure forms */ /* Disclosure-button style: makes
look like a tappable button */ .bring-form-wrap { margin-top: 10px; } .bring-form-wrap > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-weight: 500; font-size: 0.95rem; list-style: none; min-height: 44px; transition: background 0.15s, border-color 0.15s, transform 0.05s; user-select: none; } .bring-form-wrap > summary::-webkit-details-marker { display: none; } .bring-form-wrap > summary::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; position: relative; flex-shrink: 0; background: linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 8px no-repeat; transition: transform 0.15s; } .bring-form-wrap > summary:hover { background: var(--bg-elev); border-color: var(--accent); color: var(--accent); } .bring-form-wrap > summary:active { transform: scale(0.98); } .bring-form-wrap[open] > summary { background: var(--bg-elev); border-color: var(--accent); color: var(--accent); } .bring-form-wrap[open] > summary::before { /* Change + to – when open */ background: linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat; transform: rotate(180deg); } /* Favourites pick list */ .favourites-pick-list { list-style: none; padding: 0; margin: 0 0 10px; max-height: 240px; overflow-y: auto; } .favourites-pick-list li { padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .favourites-pick-list li:last-child { border-bottom: 0; } /* Profile: favourites list */ .favourites-list { list-style: none; padding: 0; margin: 0 0 16px; } .favourite-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 6px; } .favourite-item.dragging { opacity: 0.4; } .drag-handle { color: var(--text-mute); font-size: 1.2rem; line-height: 1; user-select: none; cursor: grab; padding: 0 4px; } .drag-handle:active { cursor: grabbing; } .favourite-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .favourite-name { color: var(--text); font-weight: 500; } .favourite-notes { word-break: break-word; } .favourite-add-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); } /* Smart back button in topbar */ .back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-left: 4px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-dim); text-decoration: none; font-size: 0.9rem; min-height: 36px; line-height: 1; transition: color 0.15s, border-color 0.15s, background 0.15s; } .back-btn:hover { color: var(--text); background: var(--bg-elev); border-color: var(--border); text-decoration: none; } .back-btn:active { transform: scale(0.97); } .back-arrow { font-size: 1.1rem; } /* On mobile, hide the "Back" label so it's just the arrow (saves space) */ @media (max-width: 640px) { .back-btn { padding: 8px 12px; min-width: 44px; /* iOS recommended touch target */ justify-content: center; } .back-label { display: none; } .back-arrow { font-size: 1.3rem; } } /* Hide username text in user-menu on small screens — just show avatar */ @media (max-width: 480px) { .user-menu-name { display: none; } .user-menu summary { padding: 6px; } .topnav { gap: 8px; } .topnav a:not(.btn-pill):not(.admin-tag) { font-size: 0.9rem; } } /* Tighten admin-tag on narrow screens */ @media (max-width: 480px) { .admin-tag { padding: 4px 8px !important; font-size: 0.72rem; } } /* ===== Roadmap ===== */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .page-head h1 { margin: 0 0 6px 0; } /* "Suggest a feature" pill that opens a form */ .suggest-disclosure { position: relative; } .suggest-disclosure > summary { cursor: pointer; list-style: none; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); font-weight: 600; } .suggest-disclosure > summary::-webkit-details-marker { display: none; } .suggest-disclosure > summary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .suggest-form { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(420px, 92vw); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow-lg); } @media (max-width: 720px) { .suggest-form { position: static; width: 100%; margin-top: 12px; } } /* Filter chip row */ .roadmap-toolbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .roadmap-filter-row { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text-dim); font-size: 0.9rem; background: var(--bg-elev); text-decoration: none; } .filter-chip:hover { border-color: var(--border); color: var(--text); text-decoration: none; } .filter-chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .filter-chip.active .chip-count { background: rgba(255,255,255,0.25); color: var(--accent-text); } .chip-count { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-mute); } .roadmap-sort-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--text-dim); } .roadmap-sort-row a { color: var(--text-dim); } .roadmap-sort-row a.active { color: var(--accent); font-weight: 600; } .roadmap-sort-row .link { cursor: pointer; color: var(--accent); } /* List */ .roadmap-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .roadmap-item { display: flex; gap: 14px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; } .roadmap-item:hover { border-color: var(--border); } .roadmap-item-body { flex: 1; min-width: 0; } .roadmap-item-title { display: block; font-weight: 600; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; } .roadmap-item-title:hover { color: var(--accent); text-decoration: none; } .roadmap-item-desc { margin: 6px 0 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; } .roadmap-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Vote button */ .vote-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; padding: 8px 6px; border-radius: 10px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); color: var(--text-dim); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .vote-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-elev); } .vote-btn.voted { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } .vote-arrow { font-size: 0.85rem; line-height: 1; margin-bottom: 2px; } .vote-count { font-size: 1.05rem; font-weight: 700; line-height: 1; } .vote-btn-lg { min-width: 72px; padding: 14px 8px; } .vote-btn-lg .vote-arrow { font-size: 1.1rem; } .vote-btn-lg .vote-count { font-size: 1.4rem; } /* Status & priority badges */ .badge.status-idea { background: rgba(120,120,120,0.15); color: var(--text-dim); } .badge.status-planned { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); } .badge.status-in_progress { background: var(--badge-pending-bg); color: var(--accent); } .badge.status-done { background: var(--badge-accepted-bg); color: var(--badge-accepted-text); } .badge.status-wont_do { background: var(--badge-declined-bg); color: var(--badge-declined-text); } .badge.priority-low { background: rgba(120,120,120,0.10); color: var(--text-mute); } .badge.priority-medium { background: rgba(120,120,120,0.15); color: var(--text-dim); } .badge.priority-high { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); } .badge.priority-critical { background: var(--badge-declined-bg); color: var(--badge-declined-text); } .badge.category-tag { background: var(--bg-elev-2); color: var(--text-dim); border: 1px solid var(--border-soft); } .badge.comment-count { background: var(--bg-elev-2); color: var(--text-dim); } /* Single item detail view */ .roadmap-detail { max-width: 760px; } .roadmap-detail-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; } .roadmap-detail-head h1 { margin: 6px 0 4px; font-size: 1.6rem; } .roadmap-detail-meta { flex: 1; min-width: 0; } .roadmap-description { background: var(--bg-elev); padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border-soft); color: var(--text-dim); line-height: 1.7; margin: 0 0 24px; } .admin-edit-panel { background: var(--bg-elev-2); padding: 14px 18px; border-radius: 12px; border: 1px solid var(--border-soft); margin-bottom: 24px; } .admin-edit-panel > summary { cursor: pointer; padding: 4px 0; } .admin-new-disclosure > summary { display: inline; cursor: pointer; color: var(--accent); } .admin-new-disclosure[open] > summary { font-weight: 600; } /* Comments */ .roadmap-comments h2 { margin: 8px 0 12px; font-size: 1.2rem; } .comment-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 14px; } .comment { display: flex; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; } .comment-body { flex: 1; min-width: 0; } .comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .comment-text { color: var(--text); line-height: 1.55; } .avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ===== Plan badges ===== */ .plan-badge { font-weight: 600; } .plan-badge.plan-free { background: var(--bg-elev-2); color: var(--text-dim); border: 1px solid var(--border-soft); } .plan-badge.plan-pro { background: var(--accent); color: var(--accent-text); } .plan-badge.plan-admin { background: var(--badge-pending-bg); color: var(--accent-2); } /* ===== Upgrade page ===== */ .plan-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; } @media (max-width: 720px) { .plan-compare { grid-template-columns: 1fr; } } .plan-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 14px; padding: 24px; } .plan-card-pro { border-color: var(--accent); border-width: 2px; box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--accent) 25%, transparent); } .plan-card h2 { margin: 0 0 8px; font-size: 1.4rem; } .plan-price { font-size: 2rem; font-weight: 700; color: var(--text); margin: 4px 0 14px; } .plan-price-amount { color: var(--accent); } .plan-features { list-style: none; padding: 0; margin: 0 0 20px; } .plan-features li { padding: 6px 0; color: var(--text-dim); border-bottom: 1px solid var(--border-soft); } .plan-features li:last-child { border-bottom: 0; } .plan-features li strong { color: var(--text); } /* ===== 2FA setup ===== */ .setup-2fa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 800px) { .setup-2fa-grid { grid-template-columns: 1fr; } } .qr-host { text-align: center; padding: 20px 0; } #qrcode-host { display: inline-block; padding: 16px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); } .manual-secret { display: block; padding: 12px 16px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: 0.05em; margin: 10px 0; word-break: break-all; } .totp-input { font-family: ui-monospace, monospace; font-size: 1.3rem; letter-spacing: 0.4em; text-align: center; padding: 12px; } /* ===== Backup codes ===== */ .backup-codes { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 480px) { .backup-codes { grid-template-columns: 1fr; } } .backup-codes li { padding: 0; } .backup-codes code { display: block; padding: 12px 14px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 8px; font-family: ui-monospace, monospace; font-size: 1.05rem; letter-spacing: 0.05em; text-align: center; } .flash-info { background: var(--badge-pending-bg); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); color: var(--accent-2); padding: 14px 18px; border-radius: 10px; margin-bottom: 18px; } @media print { .topbar, .form-row, form { display: none !important; } body, .panel { background: white !important; color: black !important; } } /* ===== Contact groups ===== */ .group-bar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; } .group-add-disclosure > summary { list-style: none; cursor: pointer; } .group-add-disclosure > summary::-webkit-details-marker { display: none; } .group-add-form { background: var(--bg-elev-2); padding: 14px; border-radius: 10px; margin-top: 10px; } /* Group chips */ .group-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .group-chips li { padding: 0; } .group-chip { --group-color: var(--accent); display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); font-size: 0.9rem; text-decoration: none; cursor: pointer; user-select: none; transition: background 0.15s, border-color 0.15s; } .group-chip:hover { border-color: var(--group-color); text-decoration: none; } .group-chip.active { background: var(--group-color); color: white; border-color: var(--group-color); } .group-chip.active .group-dot { background: white; } .group-chip.active .group-chip-count { background: rgba(255,255,255,0.25); color: white; } .group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--group-color); flex-shrink: 0; } .group-chip-count { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--bg-elev); color: var(--text-mute); margin-left: 2px; } .group-chip-small { padding: 2px 8px; font-size: 0.78rem; font-weight: 500; pointer-events: auto; } .group-chip-small .group-dot { width: 6px; height: 6px; } /* Contact row group tags */ .contact-group-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } /* Manage group disclosure */ .group-manage-disclosure { margin-top: 12px; } .group-manage-disclosure > summary { cursor: pointer; padding: 4px 0; } /* Contact: groups disclosure */ .contact-groups-disclosure { position: relative; display: inline-block; } .contact-groups-disclosure > summary { cursor: pointer; padding: 0 4px; color: var(--accent); font-size: 0.9rem; list-style: none; } .contact-groups-disclosure > summary::-webkit-details-marker { display: none; } .contact-groups-disclosure > summary:hover { text-decoration: underline; } .contact-groups-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 240px; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); } .contact-groups-form label { display: block; padding: 4px 0; } /* Invite-from-contacts group selector row */ .invite-group-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 12px; } .invite-group-row .group-chip-pick { border: 1px solid var(--border); background: var(--bg-elev); } /* "Add members to group" disclosure */ .group-add-members-disclosure { margin-top: 12px; } .group-add-members-disclosure > summary { list-style: none; cursor: pointer; display: inline-block; } .group-add-members-disclosure > summary::-webkit-details-marker { display: none; } .non-member-list { max-height: 300px; overflow-y: auto; margin-top: 6px; } /* Disabled group chip: shown for context but not clickable */ .group-chip-pick.is-disabled { opacity: 0.45; cursor: not-allowed; } .group-chip-pick.is-disabled:hover { border-color: var(--border-soft); } /* ===== Roadmap progress ===== */ .avatar-xs { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; } .roadmap-assignment { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .assignee-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--bg-elev-2); border-radius: 999px; font-size: 0.9rem; } .target-date { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--bg-elev-2); font-size: 0.9rem; color: var(--text-dim); } .target-date.overdue { background: var(--badge-declined-bg); color: var(--badge-declined-text); font-weight: 600; } .overdue-tag { background: var(--badge-declined-bg); color: var(--badge-declined-text); } .internal-notes-banner { background: var(--badge-pending-bg); border: 1px solid color-mix(in srgb, var(--accent-2) 25%, transparent); border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; } /* Updates feed */ .roadmap-updates { margin: 24px 0; } .roadmap-updates h2 { margin: 8px 0 12px; font-size: 1.2rem; } .update-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .update-entry { padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; display: flex; gap: 12px; } .update-entry.update-status_change { background: var(--bg-elev-2); border-style: dashed; } .update-status-change { display: flex; flex-direction: column; gap: 4px; } .status-flow { display: inline-flex; align-items: center; } .update-body { flex: 1; min-width: 0; } .update-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .update-text { color: var(--text); line-height: 1.55; } .btn-sm { padding: 4px 10px; font-size: 0.9rem; } /* Admin-only badge/marker for roadmap features that users can't see */ .admin-only-tag { display: inline-block; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); border-radius: 999px; margin-left: 8px; } .admin-only { position: relative; } .admin-badge { border: 1px dashed color-mix(in srgb, var(--accent-2) 35%, transparent); } /* Setting row: label + toggle + save button on one line */ .setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .setting-row > div { flex: 1; min-width: 280px; } /* Slider toggle — checkbox styled as iOS-style switch */ .setting-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; } .setting-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .setting-toggle-slider { position: relative; display: inline-block; width: 44px; height: 24px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; transition: background 0.18s; } .setting-toggle-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .setting-toggle input:checked + .setting-toggle-slider { background: var(--accent); border-color: var(--accent); } .setting-toggle input:checked + .setting-toggle-slider::before { transform: translateX(20px); } .setting-toggle:hover .setting-toggle-slider { border-color: var(--accent); } .setting-toggle input:focus-visible + .setting-toggle-slider { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } /* Time-left states on roadmap items */ .time-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .time-overdue, .target-date.time-overdue { background: var(--badge-declined-bg); color: var(--badge-declined-text); } .time-soon, .target-date.time-soon { background: color-mix(in srgb, var(--accent-2) 20%, transparent); color: var(--accent-2); } .time-normal, .target-date.time-normal { background: var(--bg-elev-2); color: var(--text-dim); } .time-far, .target-date.time-far { background: var(--bg-elev-2); color: var(--text-mute); } /* Active sessions list (profile + admin) */ .session-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; } .session-row.session-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev)); } .session-body { flex: 1; min-width: 0; } .session-label { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } /* ===== Templates ===== */ .template-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .template-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 12px; } .template-card-body { flex: 1; min-width: 0; } .template-name { font-size: 1.1rem; font-weight: 600; display: block; } .template-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .upgrade-prompt h2 { color: var(--accent); } .upgrade-prompt { border-left: 4px solid var(--accent); } .bare-list { list-style: none; padding: 0; margin: 0 0 12px; } .bare-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); } .bare-row:last-child { border-bottom: none; } .inline-add { display: flex; gap: 8px; align-items: stretch; } .inline-add input[type=text] { flex: 1; } .template-invitee-toggle { padding: 14px 16px; background: var(--bg-elev-2); border-radius: 10px; border: 1px solid var(--border-soft); } .pro-tag { display: inline-block; padding: 1px 6px; font-size: 0.65rem; font-weight: 700; background: var(--accent-2); color: white; border-radius: 4px; margin-left: 4px; vertical-align: middle; } .is-disabled-pro { opacity: 0.65; } .dropdown-disclosure { position: relative; display: inline-block; } .dropdown-disclosure summary { list-style: none; cursor: pointer; } .dropdown-disclosure summary::-webkit-details-marker { display: none; } .dropdown-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; min-width: 220px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); display: flex; flex-direction: column; } .dropdown-menu a { padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--text); } .dropdown-menu a:hover { background: var(--bg-elev-2); } .dropdown-menu hr { border: 0; border-top: 1px solid var(--border-soft); margin: 4px 0; } .page-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ===== Themes ===== */ :root { --theme-accent: var(--accent); /* fallback when no theme set */ } /* Theme picker — used on event create/edit, template create/edit */ .theme-picker { margin: 12px 0; } .theme-picker-paywall { padding: 10px 14px; background: var(--bg-elev-2); border-left: 3px solid var(--accent-2); border-radius: 6px; margin-bottom: 10px; font-size: 0.92rem; } .theme-options { display: flex; flex-wrap: wrap; gap: 8px; } .theme-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; min-width: 64px; background: var(--bg-elev); border: 2px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none; color: var(--text); transition: border-color .15s, transform .12s; } .theme-option:hover:not(:disabled):not([disabled]) { transform: translateY(-2px); } .theme-option.is-selected { border-color: var(--accent); background: var(--bg-elev-2); } .theme-option:disabled, .theme-option[disabled] { opacity: 0.6; cursor: not-allowed; } .theme-swatch { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.15); color: white; } .theme-swatch-add { background: var(--bg-elev-2); border: 2px dashed var(--border); color: var(--text-muted); font-size: 24px; } .theme-label { font-size: 0.78rem; color: var(--text-muted); } .theme-option.is-selected .theme-label { color: var(--text); font-weight: 600; } .theme-divider { flex-basis: 100%; border-top: 1px solid var(--border-soft); margin: 8px 0 4px; text-align: center; position: relative; } .theme-divider span { background: var(--bg); padding: 0 10px; position: relative; top: -10px; color: var(--text-muted); font-size: 0.78rem; } /* Themed event hero */ .event-hero[data-theme] { position: relative; overflow: hidden; border-radius: 14px; padding: 28px 24px; margin-bottom: 20px; background: linear-gradient(135deg, var(--theme-accent) 0%, color-mix(in srgb, var(--theme-accent) 60%, black) 100%); color: white; } .event-hero[data-theme] h1, .event-hero[data-theme] p { color: white; } .event-hero[data-theme] .muted { color: rgba(255,255,255,0.85); } .theme-emojis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.35; } .theme-emoji { position: absolute; user-select: none; } /* Themed dashboard card — colored left border */ .event-card[data-theme] { border-left: 5px solid var(--theme-accent); } .event-card[data-theme] .event-card-emoji { position: absolute; top: 10px; right: 12px; font-size: 22px; opacity: 0.7; } /* Themed RSVP Accept button */ .btn-rsvp-accept[data-theme] { background: var(--theme-accent); border-color: var(--theme-accent); color: white; } .btn-rsvp-accept[data-theme]:hover { background: color-mix(in srgb, var(--theme-accent) 85%, black); } /* Avatar circles for invitees without photos */ .avatar-init { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: white; font-size: 0.78rem; font-weight: 600; flex-shrink: 0; } .avatar-init.lg { width: 48px; height: 48px; font-size: 1rem; } /* Group dot — next to invitee names */ .group-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--group-color, var(--text-muted)); vertical-align: middle; margin-right: 4px; } /* Email-friendly theme stripe (rendered into email templates) */ /* Not used in CSS — implemented inline in email HTML for client compatibility. */ .form-fieldset { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 16px; margin: 12px 0; } .form-fieldset legend { padding: 0 8px; font-weight: 600; color: var(--text-muted); font-size: 0.9rem; } /* ===== Recurring events / series ===== */ .series-badge { display: inline-block; padding: 6px 12px; background: rgba(255,255,255,0.18); border-radius: 8px; font-size: 0.9rem; color: inherit; } .event-hero[data-theme] .series-badge { background: rgba(255,255,255,0.22); } .series-pill { display: inline-block; padding: 1px 7px; font-size: 0.7rem; font-weight: 700; background: var(--bg-elev-2); color: var(--text-muted); border-radius: 4px; margin-left: 4px; vertical-align: middle; } .recur-fieldset.is-disabled-pro { opacity: 0.7; } .recur-fieldset.is-disabled-pro * { pointer-events: none; } .recur-fieldset.is-disabled-pro a { pointer-events: auto; } .weekday-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .weekday-cell { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px; font-size: 0.85rem; cursor: pointer; user-select: none; } .weekday-cell input { margin: 0; } .weekday-cell:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); } .row-stack { display: flex; flex-direction: column; gap: 4px; } /* ===== Admin notification toggle grid ===== */ .notify-grid { width: 100%; border-collapse: collapse; margin-top: 8px; } .notify-grid th { text-align: center; font-weight: 600; font-size: 0.85rem; color: var(--text-muted); padding: 8px 6px; border-bottom: 2px solid var(--border-soft); } .notify-grid td { padding: 12px 6px; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .notify-grid tr:last-child td { border-bottom: none; } .notify-grid .setting-toggle { margin: 0; display: inline-flex; } /* ===== Wallpapers ===== */ /* Theme picker — wallpaper swatch shows the actual image */ .theme-swatch-wallpaper { background-size: cover; background-position: center; background-repeat: no-repeat; } /* Event hero with wallpaper background */ .event-hero.has-wallpaper { color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .event-hero.has-wallpaper h1, .event-hero.has-wallpaper p, .event-hero.has-wallpaper .muted { color: white; } .event-hero.has-wallpaper .muted { color: rgba(255,255,255,0.92); } .wallpaper-overlay { /* Dims the wallpaper so text stays readable. Adjust opacity if needed. */ position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%); border-radius: 14px; pointer-events: none; } /* Admin wallpapers library grid */ .wallpaper-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; } .wallpaper-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .wallpaper-thumb { width: 100%; aspect-ratio: 16 / 7; background-size: cover; background-position: center; background-color: var(--bg-elev-2); } .wallpaper-info { padding: 10px 12px; } /* ===== Email design preview — theme toggle row ===== */ .preview-theme-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--bg-elev-2); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); } .preview-theme-btn { padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 6px; font-size: 0.82rem; color: var(--text); text-decoration: none; white-space: nowrap; } .preview-theme-btn:hover { background: var(--bg); } .preview-theme-btn.is-selected { background: var(--accent); border-color: var(--accent); color: white; } /* ===== Themed/wallpaper hero — strong readability ===== */ /* Apply to BOTH color-themed events (.event-hero[data-theme]) and wallpaper * events (.event-hero.has-wallpaper). User wants Hosted-by, date, address, * and owner action buttons (Edit etc.) bright white and bolder for contrast. */ .event-hero[data-theme] .muted, .event-hero.has-wallpaper .muted { color: #ffffff !important; /* was rgba(255,255,255,0.85) — too subdued */ font-weight: 600; } .event-hero[data-theme] .event-meta-row, .event-hero.has-wallpaper .event-meta-row { color: #ffffff; font-weight: 600; } .event-hero[data-theme] .event-meta-row span, .event-hero.has-wallpaper .event-meta-row span { color: #ffffff; } /* Owner-action buttons (Edit, Save as template, Duplicate, Delete, Cancel future) * on themed/wallpaper heroes — make them white outlined, white text, semi-transparent * fill, with a darker hover. The default .btn-ghost is too dark to read here. */ .event-hero[data-theme] .owner-actions .btn, .event-hero.has-wallpaper .owner-actions .btn { color: #ffffff; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.12); font-weight: 600; } .event-hero[data-theme] .owner-actions .btn:hover, .event-hero.has-wallpaper .owner-actions .btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.85); } /* Keep the destructive-red distinction on Delete and Cancel-future buttons */ .event-hero[data-theme] .owner-actions .btn.link-danger, .event-hero.has-wallpaper .owner-actions .btn.link-danger { color: #ffd1d1; } .event-hero[data-theme] .owner-actions .btn.link-danger:hover, .event-hero.has-wallpaper .owner-actions .btn.link-danger:hover { color: #ffffff; background: rgba(220,80,80,0.45); border-color: rgba(255,180,180,0.9); } /* PRO tag pills inside owner-actions (free-user Save-as-template / Duplicate) * — let them keep their accent color but lift them on darker backgrounds */ .event-hero[data-theme] .owner-actions .pro-tag, .event-hero.has-wallpaper .owner-actions .pro-tag { box-shadow: 0 1px 2px rgba(0,0,0,0.25); } /* ===== Share modal ===== */ .share-modal-backdrop { /* Above the sticky header (z=1000) so the modal always covers the page. */ position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .share-modal { position: relative; max-width: 460px; width: 100%; background: var(--bg); border-radius: 14px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); max-height: 90vh; overflow-y: auto; } .share-modal-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; font-size: 28px; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 4px 10px; } .share-modal-close:hover { color: var(--text); } .share-url-row { display: flex; gap: 6px; align-items: stretch; margin: 14px 0 18px; } .share-url-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev); color: var(--text); font-family: monospace; font-size: 0.85rem; } .share-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; } .share-channel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; text-decoration: none; color: var(--text); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background .12s, transform .12s; } .share-channel:hover { background: var(--bg-elev-2); transform: translateY(-1px); } .share-icon { font-size: 28px; display: inline-flex; align-items: center; justify-content: center; height: 28px; } .share-icon svg { width: 26px; height: 26px; display: block; } button.share-channel { font-family: inherit; } /* ===== Share modal — QR code section ===== */ .share-qr-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); text-align: center; } .share-qr-heading { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; } .share-qr-box { display: inline-block; padding: 10px; background: #ffffff; /* QR codes need light background to scan reliably */ border-radius: 8px; border: 1px solid var(--border-soft); line-height: 0; /* no extra whitespace under the SVG */ margin-bottom: 10px; } .share-qr-box svg { display: block; width: 180px; height: 180px; } .share-qr-loading { padding: 60px 30px; } /* ===== Wallpaper emoji badge on thumbnails ===== */ .wallpaper-thumb { position: relative; } .wallpaper-emoji-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,0.55); color: white; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; backdrop-filter: blur(4px); } /* ===== Add-to-calendar row on event hero ===== */ .event-calendar-row { display: flex; gap: 8px; flex-wrap: wrap; } .event-calendar-row .btn-sm { font-size: 0.85rem; padding: 4px 10px; } /* Themed/wallpaper hero: keep buttons readable */ .event-hero[data-theme] .event-calendar-row .btn, .event-hero.has-wallpaper .event-calendar-row .btn { color: #ffffff; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.10); } .event-hero[data-theme] .event-calendar-row .btn:hover, .event-hero.has-wallpaper .event-calendar-row .btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.75); } /* ===== Storage dashboard ===== */ .storage-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; } .storage-tile { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 14px 16px; } .storage-tile strong { display: block; font-size: 1.5rem; margin: 4px 0; } .storage-bar { width: 100%; height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; margin-top: 6px; } .storage-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .25s ease-out; } /* ===== Wallpaper drag-reorder ===== */ .wallpaper-card[draggable="true"] { cursor: grab; transition: transform .12s, opacity .12s; } .wallpaper-card[draggable="true"]:active { cursor: grabbing; } .wallpaper-card.is-dragging { opacity: 0.5; transform: scale(0.98); } .wallpaper-card.drag-over { outline: 3px dashed var(--accent); outline-offset: -3px; } .wallpaper-drag-handle { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.55); color: white; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: -2px; backdrop-filter: blur(4px); user-select: none; pointer-events: none; /* drag is on the whole card, not the handle */ } /* ===== Site theme admin page ===== */ .theme-edit-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; } @media (max-width: 900px) { .theme-edit-layout { grid-template-columns: 1fr; } } .theme-edit-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-soft); } .theme-edit-row:last-child { border-bottom: 0; } .theme-edit-row label { font-weight: 500; } .theme-edit-controls { display: flex; gap: 6px; align-items: center; } .theme-edit-controls input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--border-soft); border-radius: 6px; cursor: pointer; background: transparent; } /* Live preview card uses --preview-* vars set by JS */ .theme-edit-preview { position: sticky; top: 16px; align-self: start; } .preview-card { background: var(--preview-bg, var(--bg)); color: var(--preview-text, var(--text)); border: 1px solid var(--preview-border, var(--border-soft)); border-radius: 12px; overflow: hidden; font-family: var(--preview-font-body, inherit); } .preview-card-body { background: var(--preview-bg-elev, var(--bg-elev)); padding: 18px; } .preview-card h4 { font-family: var(--preview-font-brand, var(--preview-font-body, inherit)); color: var(--preview-text, inherit); } .preview-muted { color: var(--preview-text-muted, var(--text-muted)); font-size: 0.9rem; } .preview-button { background: var(--preview-accent, var(--accent)); color: var(--preview-accent-text, #fff); border: 0; padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; margin-right: 6px; } .preview-button-secondary { background: var(--preview-bg-elev-2, var(--bg-elev-2)); color: var(--preview-text, inherit); border: 1px solid var(--preview-border, var(--border-soft)); padding: 8px 16px; border-radius: 8px; cursor: pointer; } /* ===== Event card — host row ===== */ .event-host { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 0.9rem; color: var(--text); } .event-host img.avatar-xs { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .event-host-self { /* Slightly de-emphasized for your own events — you know it's you */ opacity: 0.85; } /* ===== RSVP status pill in event-meta ===== */ .rsvp-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: capitalize; } .rsvp-accepted { background: rgba(34, 197, 94, 0.18); color: #15803d; } .rsvp-declined { background: rgba(239, 68, 68, 0.18); color: #b91c1c; } .rsvp-pending { background: rgba(245, 158, 11, 0.18); color: #b45309; } .rsvp-maybe { background: rgba(99, 102, 241, 0.18); color: #4338ca; } /* Dark theme pills need lighter text */ html[data-theme='dark'] .rsvp-accepted { color: #4ade80; } html[data-theme='dark'] .rsvp-declined { color: #f87171; } html[data-theme='dark'] .rsvp-pending { color: #fbbf24; } html[data-theme='dark'] .rsvp-maybe { color: #a5b4fc; } /* ===== Past events disclosure ===== */ .past-events-disclosure { margin-top: 32px; border-top: 1px solid var(--border-soft); padding-top: 16px; } .past-events-disclosure > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; color: var(--text-muted); font-weight: 500; user-select: none; } .past-events-disclosure > summary:hover { background: var(--bg-elev-2); color: var(--text); } .past-events-disclosure > summary::-webkit-details-marker { display: none; } .past-events-disclosure > summary::before { content: '▸'; font-size: 0.8em; transition: transform .15s; } .past-events-disclosure[open] > summary::before { transform: rotate(90deg); } .section-subtitle { font-size: 0.95rem; color: var(--text-muted); font-weight: 600; margin: 18px 0 10px; text-transform: uppercase; letter-spacing: 0.04em; } /* Dim past event cards slightly so they're visually de-emphasized */ .event-card-past { opacity: 0.78; transition: opacity .15s; } .event-card-past:hover { opacity: 1; } /* ===== Event assistants management ===== */ .assistants-panel { border: 1px solid var(--border-soft); background: var(--bg-elev); } .assistants-list { display: flex; flex-direction: column; gap: 12px; } .assistant-card { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elev-2); padding: 14px 16px; } .assistant-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); } .assistant-id { display: flex; align-items: center; gap: 10px; min-width: 0; /* lets the email column truncate gracefully */ flex: 1; } .assistant-id img.avatar-xs { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .assistant-perms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; } .assistant-perm-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background .12s; } .assistant-perm-row:hover { background: var(--bg-elev); } .assistant-perm-row.saving { opacity: 0.5; } .assistant-perm-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .assistant-perm-label { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } /* ===== Assistant banner on event page ===== */ .assistant-banner { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05)); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 10px; padding: 12px 16px; margin: 16px 0; display: flex; flex-direction: column; gap: 4px; } html[data-theme='dark'] .assistant-banner { background: linear-gradient(135deg, rgba(129, 140, 248, 0.18), rgba(129, 140, 248, 0.06)); border-color: rgba(129, 140, 248, 0.35); } /* Co-host indicator pill on dashboard */ .rsvp-assisting { background: rgba(99, 102, 241, 0.18); color: #4338ca; } html[data-theme='dark'] .rsvp-assisting { color: #a5b4fc; } /* ===== Items toolbar: search + sort ===== */ .items-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .items-search { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev-2); color: var(--text); font-size: 0.95rem; } .items-search:focus { outline: none; border-color: var(--accent); } .items-sort { display: flex; align-items: center; gap: 6px; } .items-sort-select { padding: 7px 10px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev-2); color: var(--text); font-size: 0.9rem; cursor: pointer; } .items-no-results { margin: 8px 0 16px; } /* ===== "Mine" highlight on items ===== */ /* --mine-highlight is admin-editable via the Site Theme panel. Falls back to a soft accent tint if unset. */ .item-mine { background: var(--mine-highlight, rgba(99, 102, 241, 0.10)); border-left: 3px solid var(--accent); border-radius: 6px; padding-left: 9px; /* compensate for the 3px border so text doesn't shift */ } .mine-flag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent); color: var(--accent-text, #fff); padding: 1px 6px; border-radius: 999px; margin-right: 4px; vertical-align: middle; } /* ===== Terms of Service ===== */ .terms-body { max-height: 50vh; overflow-y: auto; padding: 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev-2); line-height: 1.6; } .terms-body p { margin: 0 0 0.9em; } .terms-body p:last-child { margin-bottom: 0; } .auth-card-wide { max-width: 720px; } /* ===== Security dashboard ===== */ .seg-control { display: inline-flex; border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; margin-bottom: 14px; } .seg-control a { padding: 6px 14px; font-size: 0.9rem; color: var(--text-muted); text-decoration: none; border-right: 1px solid var(--border-soft); } .seg-control a:last-child { border-right: none; } .seg-control a.active { background: var(--accent); color: var(--accent-text, #fff); } .sec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 8px; } .sec-tile { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elev-2); padding: 14px 16px; } .sec-tile-warn { border-color: #f59e0b; background: rgba(245,158,11,0.08); } .sec-tile-n { font-size: 1.8rem; font-weight: 700; line-height: 1; } .sec-tile-l { font-size: 0.82rem; color: var(--text-muted); margin-top: 6px; } /* timeline bars */ .sec-timeline { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); } .sec-bar-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; } .sec-bar { width: 100%; max-width: 22px; min-height: 0; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.8; } .sec-bar-x { font-size: 0.65rem; color: var(--text-muted); } .sec-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } /* check rows */ .sec-checks { display: flex; flex-direction: column; gap: 8px; } .sec-check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--bg-elev-2); } .sec-check-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 0.8rem; color: #fff; } .sec-check-ok { border-left: 3px solid #22c55e; } .sec-check-ok .sec-check-icon { background: #22c55e; } .sec-check-warn { border-left: 3px solid #f59e0b; } .sec-check-warn .sec-check-icon { background: #f59e0b; } .sec-check-crit { border-left: 3px solid #ef4444; } .sec-check-crit .sec-check-icon { background: #ef4444; } .sec-check-info { border-left: 3px solid #6366f1; } .sec-check-info .sec-check-icon { background: #6366f1; } /* ===== Server management ===== */ .srv-graph { margin-bottom: 16px; } .srv-graph-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; } .srv-graph-svg { width: 100%; height: 90px; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 8px; } .job-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } .job-requested { background: rgba(99,102,241,0.18); color: #4338ca; } .job-running { background: rgba(245,158,11,0.18); color: #b45309; } .job-done { background: rgba(34,197,94,0.18); color: #15803d; } .job-failed { background: rgba(239,68,68,0.18); color: #b91c1c; } .job-rejected { background: rgba(239,68,68,0.12); color: #b91c1c; } html[data-theme='dark'] .job-requested { color: #a5b4fc; } html[data-theme='dark'] .job-running { color: #fbbf24; } html[data-theme='dark'] .job-done { color: #4ade80; } html[data-theme='dark'] .job-failed, html[data-theme='dark'] .job-rejected { color: #f87171; } .job-output { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px; font-size: 0.75rem; max-height: 240px; overflow: auto; white-space: pre-wrap; margin-top: 6px; } .srv-services { display: flex; flex-wrap: wrap; gap: 8px; } .srv-svc { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--bg-elev-2); font-size: 0.85rem; } .srv-svc-ok { color: #15803d; } .srv-svc-bad { color: #b91c1c; } html[data-theme='dark'] .srv-svc-ok { color: #4ade80; } html[data-theme='dark'] .srv-svc-bad { color: #f87171; } .srv-pre { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 8px; font-size: 0.75rem; max-height: 220px; overflow: auto; white-space: pre-wrap; } /* ===== Event suggestions ===== */ .suggestion-compose summary { display: inline-flex; cursor: pointer; list-style: none; } .suggestion-compose summary::-webkit-details-marker { display: none; } .suggestion-list { display: flex; flex-direction: column; gap: 10px; } .suggestion-card { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elev-2); padding: 12px 14px; } .suggestion-new { border-left: 3px solid var(--accent); } .suggestion-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .suggestion-head .avatar-xs { width: 24px; height: 24px; border-radius: 50%; } .suggestion-body { line-height: 1.5; } .suggestion-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; } .suggestion-badge { background: var(--accent); color: var(--accent-text, #fff); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; } .status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; } .status-on { background: rgba(34,197,94,0.18); color: #15803d; } .status-off { background: rgba(148,163,184,0.25); color: #475569; } html[data-theme='dark'] .status-on { color: #4ade80; } html[data-theme='dark'] .status-off { color: #94a3b8; } .row-new td { background: rgba(99,102,241,0.06); } /* ===== Map actions (open in maps / directions) ===== */ .map-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; } /* Google Places autocomplete dropdown needs to sit above modals/sticky headers */ .pac-container { z-index: 100000 !important; } /* ===== Danger zone (account deletion) ===== */ .danger-zone { border: 1px solid rgba(239,68,68,0.4); } .danger-zone h2 { color: #b91c1c; } html[data-theme='dark'] .danger-zone h2 { color: #f87171; } .danger-zone summary { display: inline-flex; cursor: pointer; list-style: none; } .danger-zone summary::-webkit-details-marker { display: none; } .btn-danger { background: #dc2626; color: #fff; border: none; } .btn-danger:hover { background: #b91c1c; } /* ===== Error pages ===== */ .error-page { text-align: center; padding: 60px 20px; } .error-page h1 { font-size: 4rem; margin: 0 0 8px; color: var(--accent); } .error-page p { margin-bottom: 24px; } .error-page .btn { margin: 0 4px; } /* ===== Custom header logo ===== */ .brand-logo { /* Logo sits larger than the default wordmark so it reads as a real brand mark. The header row has no fixed height, so this grows the bar to fit. */ height: 2.6rem; max-height: 3rem; width: auto; max-width: 240px; object-fit: contain; display: block; } /* Light/dark logo swap: both tags are in the DOM if both are uploaded. CSS hides the wrong one based on the [data-theme] attribute that the server (or theme JS) sets on . !important guards against any future override or partial-cache state where stale CSS might show both. */ .brand-logo-dark { display: none !important; } [data-theme="dark"] .brand-logo-light { display: none !important; } [data-theme="dark"] .brand-logo-dark { display: block !important; } /* Respect OS preference for users who haven't logged in / haven't set a theme. Without this, dark-OS-preferring visitors see the light logo on a dark background. We only apply the prefers-color-scheme swap when has no data-theme attribute (the explicit setting wins). */ @media (prefers-color-scheme: dark) { html:not([data-theme]) .brand-logo-light { display: none !important; } html:not([data-theme]) .brand-logo-dark { display: block !important; } } .brand-preview-box { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev-2); } .brand-preview-img { max-height: 48px; max-width: 240px; width: auto; object-fit: contain; } /* ===== Admin: landing tiles editor ===== */ .tiles-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .tile-edit-card { background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px; } .tile-edit-card label { display: block; margin-top: 10px; } .tile-edit-preview { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px; margin-bottom: 8px; background: var(--bg-elev); border: 1px dashed var(--border-soft); border-radius: 8px; } .checkbox-inline { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; } .checkbox-inline input { width: auto; } /* ===== Admin: grouped sidebar ===== */ .admin-nav { display: flex; flex-direction: column; gap: 2px; } .admin-nav-top { padding: 6px 10px; border-radius: 6px; } .admin-nav-top.active { background: var(--accent); color: #fff; } .admin-nav-group { margin-top: 4px; } .admin-nav-group > summary { cursor: pointer; list-style: none; padding: 6px 10px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); border-radius: 6px; user-select: none; } .admin-nav-group > summary::-webkit-details-marker { display: none; } .admin-nav-group > summary::before { content: "▸ "; font-size: 0.7rem; } .admin-nav-group[open] > summary::before { content: "▾ "; } .admin-nav-group > summary:hover { background: var(--bg-elev-2); } .admin-nav-links { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 8px; } .admin-nav-links a { padding: 5px 10px; border-radius: 6px; font-size: 0.92rem; } .admin-nav-links a.active { background: var(--accent); color: #fff; } /* ===== Admin: settings hub cards ===== */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .settings-card { display: flex; flex-direction: column; gap: 4px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px; transition: transform 0.15s, border-color 0.15s; } .settings-card:hover { transform: translateY(-2px); border-color: var(--border); text-decoration: none; } /* ===== Admin: country access picker ===== */ .country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 12px; margin-top: 6px; max-height: 360px; overflow-y: auto; padding: 8px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--bg-elev-2); } .country-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; padding: 2px 0; } .country-item input { width: auto; } /* ===== Footer language picker ===== */ .footer-lang select { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border-soft); border-radius: 6px; padding: 3px 8px; font-size: 0.85rem; cursor: pointer; } .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; } /* Secret Gifting wallpaper picker — radio inputs are hidden; the label's border updates when its is :checked. Pure CSS, no JS. */ .ss-wp-choice:has(input:checked) { border-color: var(--accent, #888) !important; } .ss-wp-choice:hover { opacity: 0.9; } /* Keep the wallpaper picker compact — if there are lots of wallpapers, the grid would otherwise push the rest of the form off-screen (especially on mobile). Cap the height and scroll within. The cap is ~2.5 rows of thumbnails so it's clear there's more to scroll. */ .ss-wp-grid { max-height: 200px; overflow-y: auto; padding: 4px; border: 1px solid var(--border-soft); border-radius: 8px; } /* When the SS panel has a wallpaper, we want the festive image to feel present but text to remain perfectly readable. The previous "white card per block" approach was too fragmented (every paragraph had its own floating card). Better: the wallpaper renders as a SHORT BANNER at the top of the panel, with the heading sitting over it as a hero. Below the banner, the panel uses the normal opaque background — so all the form/list/text content is plain and readable, exactly like the no- wallpaper case. The wallpaper is decorative framing, not a backdrop that has to support all the text. */ .ss-panel-has-wallpaper { /* Override the inline background-image: we'll render it inside ::before so we can constrain it to a banner strip rather than the full panel. */ background-image: none !important; padding-top: 0 !important; overflow: hidden; position: relative; } .ss-panel-has-wallpaper::before { content: ""; display: block; height: 140px; /* Bleed to the panel edges (panel has padding 24px now that we use the standard .panel class). Negative margins offset that padding. */ margin: -24px -24px 12px; background-image: var(--ss-wp-image); background-size: cover; background-position: center; /* Soft fade at the bottom so the banner blends into the panel content area */ -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); } /* Mobile: shorter banner so it doesn't overwhelm a collapsed panel. The wallpaper is decorative framing; the heading should still be the focal point at first glance. */ @media (max-width: 720px) { .ss-panel-has-wallpaper::before { height: 80px; } } /* The heading still has the gift emoji + title. Keep it tidy at the top of the body area, not floating over the banner — that needs no extra style. */ .ss-panel > h2 { /* Defensive: make sure the SS heading is always visibly rendered. Some earlier inline-styles attempts left it potentially squashed or hidden; explicit values here win against any cached/conflicting inline-style. */ display: block !important; visibility: visible !important; opacity: 1 !important; margin-top: 0; font-size: 1.5rem; color: var(--text); } /* ─── Collapsible panels (mobile only) ─────────────────────────────────── Designated panels (.collapsible-panel) collapse to just their heading on small screens. Tapping the heading toggles. Desktop is unaffected — no visual or behaviour change above 720px. Smooth height transition. The toggle target is the first

inside the panel (or

for the nested ss-panel). JS toggles the .is-collapsed class. data-init-collapsed: a panel can mark itself as "always start collapsed." On mobile, the rule below hides everything except the heading even before JS runs (defensive against JS failures or slow page loads). The JS still does the proper wrapping/animation once it loads. */ @media (max-width: 720px) { .collapsible-panel[data-init-collapsed] > *:not(h2):not(h3) { display: none; } /* Once JS has wrapped the body and added .is-collapsed, the rule above no longer applies (.cpanel-body is one of the children) — JS takes over with max-height animation. */ .collapsible-panel[data-init-collapsed] > .cpanel-body { display: block; /* let JS control via max-height */ } .collapsible-panel > h2, .collapsible-panel > h3 { cursor: pointer; user-select: none; position: relative; padding-right: 32px; /* room for the chevron */ margin-bottom: 0.4em; } .collapsible-panel > h2::after, .collapsible-panel > h3::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; /* Default rotation = chevron points DOWN (suggesting "expand to open") */ transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; opacity: 0.7; } /* When expanded (i.e., NOT collapsed) chevron flips up. */ .collapsible-panel:not(.is-collapsed) > h2::after, .collapsible-panel:not(.is-collapsed) > h3::after { transform: translateY(-30%) rotate(-135deg); } /* Hide all panel content except the heading. We use a wrapping container (.cpanel-body) that the JS creates on init, so we can animate it. */ .collapsible-panel .cpanel-body { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; } .collapsible-panel.is-collapsed .cpanel-body { max-height: 0 !important; opacity: 0; pointer-events: none; } } /* ─── Smooth scroll for anchor jumps ──────────────────────────────────── When landing at #bringing from a dashboard link, scroll smoothly instead of an instant jump. Respect users who've requested reduced motion. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Anchored sections leave breathing room above so the sticky header doesn't cover the panel heading. ~72px matches the topbar height on mobile. */ #bringing, #guests, #assistants, #suggestions, #secret-santa { scroll-margin-top: 72px; } /* ─── Auto-hide header on mobile ──────────────────────────────────────── On small screens, the header slides up out of view when the user scrolls DOWN and slides back in when they scroll UP. Standard mobile pattern (Twitter, Instagram, Safari, Chrome all use this). Desktop unaffected — only this media query toggles the behavior. */ @media (max-width: 720px) { .topbar { transition: transform 0.22s ease-in-out; will-change: transform; } .topbar.is-hidden { transform: translateY(-100%); } } /* ─── Person row + avatar utilities (Stage B name-split) ──────────────── Used in: bringing panel labels, Secret Gifting participants, guests list, co-hosts list, suggestions list, contacts list. The avatar sits on the LEFT of the name, with consistent sizing and spacing. Mobile gets a slightly larger avatar (48px) than desktop (40px) because each row is the primary tappable target. */ .person-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; } .person-row .person-name { flex: 1; min-width: 0; /* allow truncation */ line-height: 1.25; } .person-row .person-name .person-name-main { font-weight: 600; word-break: break-word; } .person-row .person-name .person-name-sub { color: var(--text-dim, rgba(0,0,0,0.55)); font-size: 0.85em; word-break: break-word; } .person-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-elev-2); border: 1px solid var(--border-soft); } @media (max-width: 720px) { .person-avatar { width: 48px; height: 48px; } } /* Compact variant for inline labels ("Sarah is bringing the salad") */ .person-avatar-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; background: var(--bg-elev-2); border: 1px solid var(--border-soft); } /* ─── Bringing panel: claimed-item row layout ────────────────────────── The row layout per the user's sketch: [Avatar] ITEM NAME [Unclaim] [×] ✓ Claimer - Avatar: sibling of .item-body, lives directly on the
  • flex track so it lands on the LEFT and centers vertically against full row height. Round circle, 56px desktop / 52px mobile. - ✓ tick: moved into .item-actions on the RIGHT so it reads as a "done" indicator rather than an inline bullet at the start of the name. - Claimer name: bolder + full-color so it reads as proper attribution. - All item rows (claimed AND unclaimed) get a consistent min-height so the list reads as a uniform grid instead of taller-claimed/shorter- unclaimed alternating heights. Without this, the list looks "jumpy" when scrolling on mobile. */ .item-list .item { min-height: 80px; } @media (max-width: 720px) { .item-list .item { min-height: 80px; } } .item-claimer-avatar { width: 56px; height: 56px; border-radius: 50%; /* perfect circle */ object-fit: cover; /* crop-to-fill, no distortion */ flex-shrink: 0; /* never squashed when row is narrow */ background: var(--bg-elev-2); border: 1px solid var(--border-soft); align-self: center; } /* Status column on the right: YOU pill stacked vertically above the ✓ tick. Sits inside .item-actions so it lives in the row's right-hand action slot. */ .item-status-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .item-status-col .mine-flag { /* Pill is already styled elsewhere — just keep it compact in this slot */ font-size: 0.65rem; padding: 2px 6px; } /* ─── Mobile bringing panel tweaks ────────────────────────────────────── Truncate long names rather than wrap, so rows stay uniform-height single- line. The × delete button stays visible on mobile (swipe-to-delete was tried but reverted — users need a visible way to delete on mobile too). */ @media (max-width: 720px) { .item-list .item { gap: 12px; padding: 10px 12px; } /* Allow item body to shrink before wrapping */ .item-body { min-width: 0; overflow: hidden; } /* Truncate long names + claimer text rather than wrap */ .item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-claimed .item-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Claimer name + notes: full-color, readable, bold name */ .item-claimed .item-meta { font-size: 0.95rem; color: var(--text); margin-top: 4px; gap: 6px; align-items: center; flex-wrap: wrap; } .item-claimer-name { font-weight: 600; }