/* ============================================================ PINCKNEY FAMILY ARCHIVE — GLOBAL STYLES styles.css ============================================================ */ /* ── Design tokens ────────────────────────────────────────── */ :root { --parchment: #f5efe0; --parchment-dark: #e8ddc8; --parchment-mid: #ede3ce; --ink: #1a1208; --ink-light: #3d2f1a; --sepia: #8b6914; --sepia-light: #c4993a; --sepia-pale: rgba(196,153,58,0.12); --connector: #c8b080; --white: #ffffff; --shadow-sm: 0 1px 4px rgba(26,18,8,0.08); --shadow-md: 0 4px 14px rgba(26,18,8,0.13); --shadow-lg: 0 8px 28px rgba(26,18,8,0.18); --radius: 3px; --radius-lg: 6px; /* Status colours */ --s-unreviewed: #9e9e9e; --s-submitted: #e8a020; --s-review: #d4601a; --s-tentative: #3a7abf; --s-verified: #2d7a45; /* Layout */ --header-h: 54px; --toolbar-h: 42px; --legend-h: 36px; --nav-total: calc(var(--header-h) + var(--toolbar-h) + var(--legend-h)); /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Crimson Pro', Georgia, serif; } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Prevent any oversized element (date inputs with intrinsic widths, inline-styled toolbars, etc.) from pushing the page past the viewport on mobile. Without this, the fixed header and content both appear to shift left under horizontal scroll on iOS Safari. */ html, body { overflow-x: hidden; max-width: 100vw; } body { font-family: var(--font-body); background: var(--parchment); color: var(--ink); min-height: 100vh; background-image: radial-gradient(ellipse at 15% 15%, rgba(196,153,58,0.06) 0%, transparent 55%), radial-gradient(ellipse at 85% 85%, rgba(139,105,20,0.04) 0%, transparent 55%); } /* Pinckney family crest as a faint, fixed watermark behind every page. Uses a ::before pseudo on so it stays put while content scrolls and so opacity can be applied to the image alone (background-image itself can't be made translucent). */ html::before { content: ''; position: fixed; inset: 0; background-image: url('/img/crest.png'); background-repeat: no-repeat; background-position: center 38%; background-size: min(460px, 65vw) auto; opacity: 0.10; pointer-events: none; z-index: 0; } /* Make sure interactive layers paint above the watermark. The header already sets z-index: 50 and #page-content sets z-index: 1, which stack on top of html::before (z-index: 0) without any further work. */ img { display: block; max-width: 100%; } button { cursor: pointer; font-family: var(--font-body); } input, textarea, select { font-family: var(--font-body); } a { color: var(--sepia); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Loading screen ───────────────────────────────────────── */ #app-loading { position: fixed; inset: 0; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 9999; transition: opacity 0.4s; } #app-loading h1 { font-family: var(--font-display); color: var(--parchment); font-size: 1.6rem; letter-spacing: 0.04em; } #app-loading h1 em { color: var(--sepia-light); font-style: italic; font-weight: 400; } /* Crest above the spinner. Sized so it reads cleanly without dominating the viewport; subtle fade-in so it doesn't pop on slow networks. */ #app-loading .loading-crest { display: block; width: 180px; max-width: 50vw; max-height: 40vh; height: auto; opacity: 0; animation: loading-crest-in 0.45s ease-out forwards; } @keyframes loading-crest-in { to { opacity: 1; } } #app-loading .spinner { width: 32px; height: 32px; border: 2px solid rgba(196,153,58,0.3); border-top-color: var(--sepia-light); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #app-loading.hidden { opacity: 0; pointer-events: none; } /* ── Header ───────────────────────────────────────────────── */ #app-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--ink); border-bottom: 3px solid var(--sepia); display: flex; align-items: center; padding: 0 24px; gap: 20px; z-index: 50; } #app-header .logo { font-family: var(--font-display); color: var(--parchment); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; cursor: pointer; } #app-header .logo em { color: var(--sepia-light); font-style: italic; font-weight: 400; font-size: 1rem; } #app-header nav { display: flex; align-items: center; gap: 4px; flex: 1; } .nav-link { color: var(--parchment-dark); font-size: 0.82rem; padding: 5px 12px; border-radius: var(--radius); border: 1px solid transparent; transition: all 0.15s; letter-spacing: 0.02em; white-space: nowrap; } .nav-link:hover, .nav-link.active { background: var(--sepia-pale); border-color: rgba(196,153,58,0.3); color: var(--sepia-light); text-decoration: none; } .nav-link.active { color: var(--sepia-light); font-weight: 600; } .nav-sep { width: 1px; height: 18px; background: rgba(196,153,58,0.2); margin: 0 4px; } #header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .user-badge { background: rgba(196,153,58,0.15); border: 1px solid var(--sepia); padding: 3px 10px; border-radius: var(--radius); color: var(--sepia-light); font-size: 0.75rem; letter-spacing: 0.04em; white-space: nowrap; } .admin-badge { background: rgba(45,122,69,0.2); border: 1px solid #2d7a45; color: #5aad7a; font-size: 0.68rem; padding: 2px 7px; border-radius: 10px; letter-spacing: 0.05em; } .btn-signout { background: none; border: none; color: var(--sepia-light); font-size: 0.75rem; opacity: 0.5; transition: opacity 0.15s; padding: 4px 8px; } .btn-signout:hover { opacity: 1; } /* ── Banner strip ─────────────────────────────────────────── */ #banner-strip { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 39; display: none; /* shown when banner items exist */ } #banner-strip.visible { display: block; } .banner-inner { background: var(--ink-light); border-bottom: 2px solid var(--sepia); padding: 7px 24px; display: flex; align-items: center; gap: 12px; overflow-x: auto; white-space: nowrap; } .banner-item { display: inline-flex; align-items: center; gap: 6px; background: rgba(196,153,58,0.12); border: 1px solid rgba(196,153,58,0.3); border-radius: var(--radius); padding: 3px 10px; font-size: 0.76rem; color: var(--parchment-dark); cursor: pointer; transition: background 0.15s; text-decoration: none; } .banner-item:hover { background: rgba(196,153,58,0.22); color: var(--parchment); } .banner-item .bi-icon { font-size: 0.85rem; } .banner-item .bi-date { color: var(--sepia-light); font-size: 0.7rem; } .banner-book { margin-left: auto; background: var(--sepia); border: none; color: var(--ink); font-family: var(--font-display); font-size: 0.75rem; padding: 4px 12px; border-radius: var(--radius); flex-shrink: 0; } .banner-book:hover { opacity: 0.85; } /* ── Page content area ────────────────────────────────────── */ #page-content { margin-top: var(--header-h); min-height: calc(100vh - var(--header-h)); transition: margin-top 0.2s; position: relative; z-index: 1; } #page-content.with-banner { margin-top: calc(var(--header-h) + 38px); } /* ── Page sections ────────────────────────────────────────── */ .page-section { padding: 24px 28px 60px; } .page-header { font-family: var(--font-display); font-size: 1rem; color: var(--sepia); border-bottom: 1px solid var(--parchment-dark); padding-bottom: 8px; margin-bottom: 22px; font-style: italic; } /* ── Toolbar ──────────────────────────────────────────────── */ .toolbar { background: var(--ink-light); padding: 0 24px; min-height: var(--toolbar-h); display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(196,153,58,0.15); flex-wrap: nowrap; overflow-x: auto; position: sticky; top: var(--header-h); z-index: 30; } .toolbar-label { color: var(--parchment-dark); font-size: 0.72rem; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; } .toolbar-sep { width: 1px; height: 20px; background: rgba(196,153,58,0.18); flex-shrink: 0; } .tab-btn { background: transparent; border: 1px solid rgba(196,153,58,0.3); color: var(--parchment-dark); padding: 4px 13px; font-family: var(--font-body); font-size: 0.8rem; border-radius: var(--radius); transition: all 0.15s; white-space: nowrap; } .tab-btn:hover, .tab-btn.active { background: var(--sepia); color: var(--ink); border-color: var(--sepia); } /* Documents page renders these tabs on a parchment background (not inside a dark .toolbar), so dial the inactive color to ink so they're legible. Hover/active inherit the dark color above. */ #docs-cat-tabs .tab-btn { color: var(--ink); } /* ── Documents folder grid (landing) ─────────────────────────── */ .docs-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; } .docs-folder-card { background: var(--white); border: 1px solid var(--parchment-dark); border-radius: var(--radius); padding: 22px 16px 18px; text-align: center; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; display: flex; flex-direction: column; align-items: center; gap: 4px; } .docs-folder-card:hover { border-color: var(--sepia); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } .docs-folder-card.is-empty { opacity: 0.55; } .docs-folder-card .dfc-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 8px; } .docs-folder-card .dfc-name { font-family: var(--font-display); font-size: 1rem; color: var(--sepia); font-style: italic; } .docs-folder-card .dfc-count { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 4px; } .docs-folder-card .dfc-hint { font-size: 0.74rem; color: var(--ink-light); opacity: 0.8; line-height: 1.45; margin-top: 4px; } /* ── Documents drill-in (category view) ──────────────────────── */ .docs-back-row { margin-bottom: 6px; } .docs-back-link { display: inline-block; font-size: 0.85rem; color: var(--sepia); cursor: pointer; } .docs-back-link:hover { text-decoration: underline; } .docs-category-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--sepia); font-style: italic; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--parchment-dark); } .docs-category-desc { font-size: 0.85rem; color: var(--ink-light); margin-bottom: 14px; line-height: 1.5; } /* Same fix for the Event/Notification modal tabs — they sit on a parchment-light modal background, not the dark toolbar. */ .entry-tab.tab-btn { color: var(--ink); } .entry-tab.tab-btn:hover, .entry-tab.tab-btn.active { color: var(--ink); } /* The .search-input class was authored for the header (dark background, light text). Used in light-background contexts — the Documents search panel and the in-document search bar — it became light-on-light. Scoped overrides keep both legible. */ #docs-search-panel .search-input, #docs-viewer-searchbar .search-input { color: var(--ink); background: var(--white); } #docs-search-panel .search-input::placeholder, #docs-viewer-searchbar .search-input::placeholder { color: var(--ink-light); opacity: 0.45; } #docs-search-panel .search-input:focus, #docs-viewer-searchbar .search-input:focus { color: var(--ink); background: var(--white); border-color: var(--sepia); } .toolbar-action { margin-left: auto; background: var(--sepia); color: var(--ink); border: none; padding: 5px 14px; font-family: var(--font-display); font-size: 0.8rem; border-radius: var(--radius); transition: opacity 0.15s; flex-shrink: 0; } .toolbar-action:hover { opacity: 0.85; } .toolbar-action-full { display: inline; } .toolbar-action-short { display: none; } @media (max-width: 480px) { .toolbar-action-full { display: none; } .toolbar-action-short { display: inline; } } /* ── Legend strip ─────────────────────────────────────────── */ .legend-strip { background: var(--parchment-dark); border-bottom: 1px solid var(--connector); padding: 6px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; top: calc(var(--header-h) + var(--toolbar-h)); z-index: 29; } .legend-label { font-size: 0.68rem; opacity: 0.52; text-transform: uppercase; letter-spacing: 0.08em; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--ink-light); } .legend-pip { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* ── Person cards ─────────────────────────────────────────── */ .person-card { width: 158px; background: var(--white); border: 1.5px solid var(--parchment-dark); border-radius: var(--radius); padding: 10px 10px 8px; position: relative; cursor: pointer; transition: transform 0.14s, box-shadow 0.14s; box-shadow: var(--shadow-sm); flex-shrink: 0; user-select: none; } .person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .person-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; } .s-unreviewed::before { background: var(--s-unreviewed); } .s-submitted::before { background: var(--s-submitted); } .s-review::before { background: var(--s-review); } .s-tentative::before { background: var(--s-tentative); } .s-verified::before { background: var(--s-verified); } .card-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--parchment-dark); float: right; margin: 0 0 4px 6px; } .card-name { font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; line-height: 1.25; margin-bottom: 2px; } .card-dates { font-size: 0.67rem; color: var(--ink-light); opacity: 0.72; font-style: italic; margin-bottom: 2px; } .card-place { font-size: 0.65rem; color: var(--sepia); opacity: 0.8; margin-bottom: 6px; } .card-badges { margin-left: 4px; display: inline-flex; gap: 2px; vertical-align: middle; } .card-badge { font-size: 0.68rem; line-height: 1; opacity: 0.85; filter: grayscale(0.15); cursor: help; } .card-badge:hover { opacity: 1; filter: none; } .card-btns { display: flex; gap: 3px; clear: both; } .btn-sm { flex: 1; font-size: 0.63rem; padding: 3px 4px; border: none; border-radius: var(--radius); transition: opacity 0.14s; white-space: nowrap; font-family: var(--font-body); } .btn-edit-sm { background: var(--sepia); color: white; } .btn-expand-sm { background: var(--parchment-dark); color: var(--ink-light); } .btn-sm:hover { opacity: 0.78; } /* Ghost / add card */ .ghost-card { width: 158px; background: transparent; border: 1.5px dashed var(--connector); border-radius: var(--radius); padding: 10px; cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 76px; gap: 4px; } .ghost-card:hover { border-color: var(--sepia); background: rgba(139,105,20,0.04); } .ghost-label { font-size: 0.72rem; color: var(--sepia); opacity: 0.7; font-style: italic; } .ghost-icon { font-size: 1rem; color: var(--sepia); opacity: 0.5; } /* Partner dash */ .partner-dash { width: 158px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.3; } .partner-dash span { font-size: 1.3rem; color: var(--connector); letter-spacing: 0.12em; } /* ── Union connector elements ─────────────────────────────── */ .union-year { font-size: 0.63rem; color: var(--sepia); font-style: italic; flex-shrink: 0; padding: 0 2px; align-self: center; } .union-line { background: var(--connector); flex-shrink: 0; } .union-line-h { height: 1px; width: 24px; } .union-line-v { width: 1px; } /* ── Buttons (global) ─────────────────────────────────────── */ .btn-primary { background: var(--sepia); color: white; border: none; padding: 8px 20px; font-family: var(--font-display); font-size: 0.88rem; border-radius: var(--radius); transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.85; } .btn-ghost { background: transparent; color: var(--ink-light); border: 1px solid var(--parchment-dark); padding: 7px 14px; font-family: var(--font-body); font-size: 0.88rem; border-radius: var(--radius); } .btn-ghost:hover { border-color: var(--sepia); } .btn-danger { background: #b83232; color: white; border: none; padding: 7px 14px; font-family: var(--font-body); font-size: 0.85rem; border-radius: var(--radius); transition: opacity 0.15s; } .btn-danger:hover { opacity: 0.85; } .btn-success { background: var(--s-verified); color: white; border: none; padding: 7px 14px; font-family: var(--font-body); font-size: 0.85rem; border-radius: var(--radius); transition: opacity 0.15s; } .btn-success:hover { opacity: 0.85; } /* ── Form elements ────────────────────────────────────────── */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-light); opacity: 0.65; margin-bottom: 4px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 7px 10px; font-family: var(--font-body); font-size: 0.9rem; background: var(--white); border: 1px solid var(--parchment-dark); border-radius: var(--radius); color: var(--ink); outline: none; transition: border-color 0.15s; /* Force light-mode rendering for the native datalist suggestion dropdown. Without this Chrome/Safari/Firefox honor the user's OS dark-mode setting and render datalist option rows with white text on a light hover background — invisible. The form-control owner is what determines the dropdown's color scheme. */ color-scheme: light; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--sepia); box-shadow: 0 0 0 2px rgba(196,153,58,0.15); /* Lock the typed-text color so OS-level form-control defaults (Safari/Chrome dark-mode inheritance, autofill, etc.) don't render the input as white-on-white when the field is focused. */ color: var(--ink); background: var(--white); } /* Same color lock for typed-into-but-not-focused state — covers the moment after picking a datalist option, where some browsers blur the field while keeping the text dark. */ .form-input:not(:placeholder-shown), .form-textarea:not(:placeholder-shown) { color: var(--ink); background: var(--white); } /* Chrome / Safari apply -webkit-autofill styling that paints the input white text on white background once they recognize an input as "filled" (datalist pick counts as autofill in some builds). The canonical workaround is an inset box-shadow + text-fill-color. */ .form-input:-webkit-autofill, .form-input:-webkit-autofill:focus, .form-input:-webkit-autofill:hover, .form-textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink); } /* ── Custom autocomplete dropdown (Tree Tools pickers) ───────── Replaces the native dropdown so we own the colors. Native datalist rows render in the OS color scheme and on macOS/Windows dark mode show white text on a hover background, even when color-scheme is forced light on the input. */ .tt-picker { position: relative; } .tt-picker-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; background: var(--white); border: 1px solid var(--parchment-dark); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,0.08); max-height: 260px; overflow-y: auto; z-index: 1200; } .tt-picker-item { padding: 7px 12px; font-size: 0.88rem; color: var(--ink); cursor: pointer; border-bottom: 1px solid rgba(196,153,58,0.08); } .tt-picker-item:last-child { border-bottom: 0; } .tt-picker-item:hover, .tt-picker-item.active { background: rgba(196,153,58,0.18); color: var(--ink); } .tt-picker-empty { padding: 10px 12px; font-size: 0.82rem; color: var(--ink-light); font-style: italic; } .form-input::placeholder, .form-textarea::placeholder { color: var(--ink-light); opacity: 0.35; font-style: italic; } .form-input.readonly, .f-current { background: var(--parchment-mid); border-color: var(--parchment-dark); color: var(--ink-light); } .form-textarea { min-height: 72px; resize: vertical; } .form-row { display: flex; gap: 10px; } .form-row .form-group { flex: 1; } .form-hint { font-size: 0.72rem; color: var(--ink-light); opacity: 0.55; margin-top: 3px; font-style: italic; } .form-error { font-size: 0.75rem; color: #b83232; margin-top: 3px; } /* Edit field row: current → proposed */ .edit-row { display: flex; gap: 6px; align-items: center; } .edit-arrow { font-size: 0.75rem; color: var(--connector); flex-shrink: 0; } .edit-current { flex: 1; padding: 5px 9px; font-family: var(--font-body); font-size: 0.88rem; background: var(--parchment-mid); border: 1px solid var(--parchment-dark); border-radius: var(--radius); color: var(--ink-light); min-width: 0; } .edit-proposed { flex: 1; padding: 5px 9px; font-family: var(--font-body); font-size: 0.88rem; background: var(--white); border: 1px solid var(--sepia); border-radius: var(--radius); color: var(--ink); outline: none; min-width: 0; } .edit-proposed:focus { border-color: var(--sepia-light); box-shadow: 0 0 0 2px rgba(196,153,58,0.18); } .edit-proposed::placeholder { color: var(--ink-light); opacity: 0.35; font-style: italic; } /* ── Modal ────────────────────────────────────────────────── */ .overlay { display: none; position: fixed; inset: 0; background: rgba(26,18,8,0.55); z-index: 100; align-items: center; justify-content: center; padding: 20px; } .overlay.open { display: flex; } .modal { background: var(--parchment); border: 2px solid var(--sepia); border-radius: var(--radius-lg); padding: 26px 28px 22px; width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto; position: relative; } .modal-lg { width: 640px; } .modal-sm { width: 380px; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.1rem; color: var(--ink-light); opacity: 0.4; transition: opacity 0.15s; } .modal-close:hover { opacity: 1; } .modal-title { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 2px; } .modal-sub { font-size: 0.78rem; color: var(--sepia); font-style: italic; margin-bottom: 14px; } .modal-section { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sepia); border-bottom: 1px solid var(--parchment-dark); padding-bottom: 4px; margin: 18px 0 12px; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--parchment-dark); } /* Status pill */ .status-pill { display: inline-block; font-size: 0.68rem; padding: 2px 10px; border-radius: 10px; color: white; margin-bottom: 14px; letter-spacing: 0.04em; } /* ── Cards (events, announcements, queue items) ───────────── */ .card { background: var(--white); border: 1.5px solid var(--parchment-dark); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s; } .card:hover { box-shadow: var(--shadow-md); } .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; } .card-meta { font-size: 0.75rem; color: var(--sepia); font-style: italic; } .card-body { font-size: 0.9rem; line-height: 1.55; color: var(--ink-light); } .card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--parchment-dark); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Event type badge */ .type-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; padding: 2px 9px; border-radius: 10px; color: white; } /* ── Table ────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; } .data-table th { text-align: left; padding: 8px 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--sepia); border-bottom: 2px solid var(--parchment-dark); white-space: nowrap; } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--parchment-dark); vertical-align: middle; } .data-table tr:hover td { background: rgba(196,153,58,0.04); } .data-table .actions { display: flex; gap: 6px; } /* ── Search bar ───────────────────────────────────────────── */ .search-wrap { position: relative; flex: 1; max-width: 320px; } .search-input { width: 100%; padding: 6px 10px 6px 32px; font-family: var(--font-body); font-size: 0.85rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(196,153,58,0.3); border-radius: var(--radius); color: var(--parchment-dark); outline: none; transition: all 0.15s; } .search-input::placeholder { color: var(--parchment-dark); opacity: 0.4; } .search-input:focus { background: rgba(255,255,255,0.12); border-color: var(--sepia); color: var(--parchment); } .search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; opacity: 0.45; pointer-events: none; } .search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--ink); border: 1px solid var(--sepia); border-radius: var(--radius); max-height: 280px; overflow-y: auto; z-index: 60; box-shadow: var(--shadow-lg); display: none; } .search-results.open { display: block; } .search-result-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(196,153,58,0.1); transition: background 0.12s; } .search-result-item:hover { background: rgba(196,153,58,0.12); } .search-result-item:last-child { border-bottom: none; } .sri-name { font-size: 0.85rem; color: var(--parchment); } .sri-dates { font-size: 0.72rem; color: var(--sepia-light); font-style: italic; } /* ── Toast ────────────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 80px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 500; pointer-events: none; } .toast { background: var(--ink); color: var(--parchment); padding: 10px 16px; border-radius: var(--radius); font-size: 0.82rem; max-width: 320px; box-shadow: var(--shadow-lg); border-left: 4px solid var(--sepia); opacity: 0; transform: translateX(20px); transition: all 0.28s; pointer-events: auto; } .toast.show { opacity: 1; transform: translateX(0); } .toast.toast-success { border-color: var(--s-verified); } .toast.toast-error { border-color: #b83232; } .toast.toast-info { border-color: var(--s-tentative); } /* ── Feedback button ──────────────────────────────────────── */ #feedback-btn { position: fixed; bottom: 24px; right: 24px; z-index: 400; } #feedback-toggle { width: 42px; height: 42px; background: var(--ink); border: 2px solid var(--sepia); border-radius: 50%; color: var(--sepia-light); font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: all 0.18s; } #feedback-toggle:hover { background: var(--ink-light); transform: scale(1.08); } #feedback-menu { position: absolute; bottom: 50px; right: 0; background: var(--ink); border: 1px solid var(--sepia); border-radius: var(--radius-lg); padding: 8px; display: none; flex-direction: column; gap: 4px; min-width: 180px; box-shadow: var(--shadow-lg); } #feedback-menu.open { display: flex; } .feedback-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius); color: var(--parchment-dark); font-size: 0.82rem; text-decoration: none; transition: background 0.15s; white-space: nowrap; } .feedback-option:hover { background: rgba(196,153,58,0.12); color: var(--parchment); text-decoration: none; } .feedback-option .fo-icon { font-size: 0.9rem; } /* ── Auth pages ───────────────────────────────────────────── */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background: var(--white); border: 2px solid var(--sepia); border-radius: var(--radius-lg); padding: 36px 40px; width: 400px; max-width: 100%; box-shadow: var(--shadow-lg); } .auth-title { font-family: var(--font-display); font-size: 1.5rem; text-align: center; margin-bottom: 4px; } .auth-subtitle { font-size: 0.82rem; color: var(--sepia); text-align: center; font-style: italic; margin-bottom: 28px; } .auth-link { text-align: center; margin-top: 16px; font-size: 0.82rem; color: var(--ink-light); } .auth-error { background: rgba(184,50,50,0.08); border: 1px solid rgba(184,50,50,0.3); border-radius: var(--radius); padding: 8px 12px; font-size: 0.82rem; color: #b83232; margin-bottom: 16px; display: none; } .auth-error.visible { display: block; } /* ── Admin queue badges ───────────────────────────────────── */ .queue-count { display: inline-block; background: var(--s-submitted); color: white; font-size: 0.65rem; padding: 1px 6px; border-radius: 10px; margin-left: 4px; font-style: normal; font-family: var(--font-body); } /* ── Scroll area for tree ─────────────────────────────────── */ .tree-scroll { overflow-x: auto; overflow-y: auto; padding: 24px 28px 80px; /* Force the element into a separate scroll container with explicit touch-action so iOS Safari doesn't hand horizontal pan gestures back to the (overflow:hidden) body, which would otherwise block them silently. width:100% caps the element to viewport so its wide-content child triggers overflow-x. */ width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; } /* ── Empty state ──────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--ink-light); opacity: 0.55; } .empty-state .es-icon { font-size: 2.5rem; margin-bottom: 12px; } .empty-state .es-text { font-size: 0.95rem; font-style: italic; } /* ── Spinner (inline) ─────────────────────────────────────── */ .spinner-sm { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--parchment-dark); border-top-color: var(--sepia); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { #app-header { padding: 0 14px; } #app-header .logo em { display: none; } .nav-link { padding: 4px 8px; font-size: 0.76rem; } .page-section { padding: 16px 14px 60px; } .toolbar { padding: 0 14px; } .legend-strip { padding: 5px 14px; } .modal { padding: 20px 18px 18px; } .auth-card { padding: 28px 22px; } .person-card { width: 138px; } .ghost-card { width: 138px; } .partner-dash { width: 138px; } .form-row { flex-direction: column; gap: 0; } .edit-row { flex-direction: column; gap: 4px; } .edit-arrow { display: none; } } @media (max-width: 480px) { #app-header nav .nav-link:not(.always-show) { display: none; } } /* ── Book viewer ──────────────────────────────────────────── */ .book-viewer { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - var(--nav-total)); overflow: hidden; } .book-sidebar { background: var(--parchment-dark); border-right: 1px solid var(--connector); overflow-y: auto; padding: 14px; } .book-main { overflow-y: auto; padding: 24px 32px; } .book-page-thumb { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--connector); cursor: pointer; transition: opacity 0.15s; margin-bottom: 8px; } .book-page-thumb:hover { opacity: 0.85; } .book-page-thumb.active { border-color: var(--sepia); box-shadow: 0 0 0 2px var(--sepia); } .book-page-image { max-width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); margin-bottom: 24px; } .book-passage { font-size: 1rem; line-height: 1.7; color: var(--ink); background: var(--white); border: 1px solid var(--parchment-dark); border-radius: var(--radius); padding: 20px 24px; margin-top: 12px; } .book-passage mark { background: rgba(196,153,58,0.25); border-radius: 2px; padding: 0 2px; } .passage-corrected { background: rgba(232,160,32,0.12); border-bottom: 2px solid var(--s-submitted); cursor: pointer; } .passage-corrected:hover { background: rgba(232,160,32,0.2); } /* ── Family hub ───────────────────────────────────────────── */ .hub-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; padding: 24px 28px 60px; } @media (max-width: 900px) { .hub-grid { grid-template-columns: 1fr; } } .hub-section-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--sepia); border-bottom: 1px solid var(--parchment-dark); padding-bottom: 8px; margin-bottom: 16px; font-style: italic; } .events-list { display: flex; flex-direction: column; gap: 14px; } .links-list { display: flex; flex-direction: column; gap: 8px; } .link-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--white); border: 1px solid var(--parchment-dark); border-radius: var(--radius); text-decoration: none; transition: box-shadow 0.15s; color: var(--ink); } .link-item:hover { box-shadow: var(--shadow-sm); text-decoration: none; } .link-item .li-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .link-item .li-title { font-size: 0.88rem; font-weight: 600; } .link-item .li-desc { font-size: 0.76rem; color: var(--ink-light); opacity: 0.7; margin-top: 2px; } /* ── Utility ──────────────────────────────────────────────── */ .text-sepia { color: var(--sepia); } .text-muted { color: var(--ink-light); opacity: 0.6; } .text-sm { font-size: 0.8rem; } .text-xs { font-size: 0.72rem; } .italic { font-style: italic; } .bold { font-weight: 600; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .hidden { display: none !important; } .w-full { width: 100%; } /* ============================================================ MOBILE RESPONSIVE — full pass Breakpoints: 768px = tablet/large phone landscape 480px = phone portrait (primary mobile target) ============================================================ */ /* ── Mobile nav sidebar overlay ──────────────────────────── */ #mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(26,18,8,0.55); z-index: 80; transition: opacity 0.25s; } #mobile-nav-overlay.open { display: block; } #mobile-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 300px; background: var(--ink); z-index: 90; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; border-right: 3px solid var(--sepia); overflow-y: auto; } #mobile-sidebar.open { transform: translateX(0); } .sidebar-header { background: var(--ink); padding: 18px 20px 14px; border-bottom: 1px solid rgba(196,153,58,0.2); display: flex; align-items: center; justify-content: space-between; } .sidebar-logo { font-family: var(--font-display); color: var(--parchment); font-size: 1rem; font-weight: 600; } .sidebar-logo em { color: var(--sepia-light); font-style: italic; font-weight: 400; } .sidebar-close { background: none; border: none; color: var(--parchment-dark); font-size: 1.3rem; opacity: 0.5; cursor: pointer; padding: 4px; } .sidebar-close:hover { opacity: 1; } .sidebar-user { padding: 16px 20px; border-bottom: 1px solid rgba(196,153,58,0.15); } .sidebar-user-name { font-family: var(--font-display); color: var(--parchment); font-size: 0.95rem; margin-bottom: 4px; } .sidebar-user-role { font-size: 0.72rem; color: var(--sepia-light); letter-spacing: 0.05em; text-transform: uppercase; } .sidebar-nav { flex: 1; padding: 12px 0; } .sidebar-nav-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--parchment-dark); font-size: 0.95rem; cursor: pointer; transition: background 0.14s; border: none; background: none; width: 100%; text-align: left; font-family: var(--font-body); text-decoration: none; } .sidebar-nav-link:hover, .sidebar-nav-link.active { background: rgba(196,153,58,0.1); color: var(--sepia-light); } .sidebar-nav-link .snl-icon { font-size: 1.1rem; flex-shrink: 0; } .sidebar-nav-divider { height: 1px; background: rgba(196,153,58,0.12); margin: 6px 20px; } .sidebar-search { padding: 14px 20px; border-top: 1px solid rgba(196,153,58,0.15); } .sidebar-search input { width: 100%; padding: 8px 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(196,153,58,0.3); border-radius: var(--radius); color: var(--parchment); font-family: var(--font-body); font-size: 0.9rem; outline: none; } .sidebar-search input::placeholder { color: var(--parchment-dark); opacity: 0.4; } .sidebar-search input:focus { border-color: var(--sepia); } .sidebar-signout { padding: 14px 20px; border-top: 1px solid rgba(196,153,58,0.15); } .sidebar-signout button { width: 100%; padding: 9px; background: rgba(196,153,58,0.1); border: 1px solid rgba(196,153,58,0.3); border-radius: var(--radius); color: var(--parchment-dark); font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; transition: all 0.15s; } .sidebar-signout button:hover { background: rgba(196,153,58,0.2); color: var(--parchment); } /* ── Hamburger button (mobile only) ──────────────────────── */ #hamburger-btn { display: none; background: none; border: none; color: var(--parchment); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; margin-left: auto; line-height: 1; } /* ── Mobile tree list view ────────────────────────────────── */ .mobile-person-list { display: flex; flex-direction: column; gap: 10px; padding: 16px; } .mobile-person-row { display: flex; align-items: center; gap: 12px; background: white; border: 1.5px solid var(--parchment-dark); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: box-shadow 0.14s; box-shadow: var(--shadow-sm); position: relative; } .mobile-person-row::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: var(--radius) 0 0 var(--radius); } .mobile-person-row.s-unreviewed::before { background: var(--s-unreviewed); } .mobile-person-row.s-submitted::before { background: var(--s-submitted); } .mobile-person-row.s-review::before { background: var(--s-review); } .mobile-person-row.s-tentative::before { background: var(--s-tentative); } .mobile-person-row.s-verified::before { background: var(--s-verified); } .mobile-person-row:hover { box-shadow: var(--shadow-md); } .mobile-person-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid var(--parchment-dark); } .mobile-person-initials { width: 44px; height: 44px; border-radius: 50%; background: var(--parchment-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.9rem; color: var(--sepia); flex-shrink: 0; font-weight: 600; } .mobile-person-info { flex: 1; min-width: 0; } .mobile-person-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .mobile-person-dates { font-size: 0.75rem; color: var(--ink-light); opacity: 0.7; font-style: italic; } .mobile-person-place { font-size: 0.72rem; color: var(--sepia); opacity: 0.8; } .mobile-person-chevron { color: var(--connector); font-size: 1rem; flex-shrink: 0; } .mobile-tree-toggle { display: flex; gap: 8px; padding: 12px 16px; background: var(--parchment-dark); border-bottom: 1px solid var(--connector); } /* ── Mobile search bar (in page, not sidebar) ─────────────── */ .mobile-search-bar { padding: 10px 16px; background: var(--parchment-dark); border-bottom: 1px solid var(--connector); display: none; } .mobile-search-bar input { width: 100%; padding: 8px 12px; font-family: var(--font-body); font-size: 0.9rem; background: white; border: 1px solid var(--parchment-dark); border-radius: var(--radius); outline: none; color: var(--ink); } .mobile-search-bar input:focus { border-color: var(--sepia); } /* Mobile Tree toolbar "⋯ Tools" popover. The desktop has 6+ inline tool buttons; on a 375px iPhone those clip. The popover keeps the toolbar to two visible items (branch + Tools trigger) and tucks the rest into a tappable menu. */ .mobile-tools-wrap { position: relative; margin-left: auto; } .mobile-tools-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--parchment); border: 1px solid var(--parchment-dark); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 200; min-width: 220px; padding: 4px 0; } .mobile-tools-menu.open { display: block; } .mobile-tools-menu hr { border: none; border-top: 1px solid var(--parchment-dark); margin: 4px 0; } .tools-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 14px; font-family: var(--font-body); font-size: 0.86rem; color: var(--ink); cursor: pointer; white-space: nowrap; } .tools-menu-item:hover { background: var(--parchment-mid); } .tools-menu-item.highlight { color: #5a6f8a; font-weight: 600; } /* ── Modal full-screen on mobile ──────────────────────────── */ @media (max-width: 600px) { /* Full-screen mobile modal pinned to the top of the viewport so the close button + title + any inline tabs are always visible on open. The previous flex-end bottom-sheet layout meant tall forms scrolled under the iOS safe area, hiding the top tabs until the user scrolled the modal up. Top padding respects env(safe-area-inset-top) so the title and the absolutely-positioned ✕ button don't slip under the iOS notch / Dynamic Island / status bar. */ .overlay { padding: 0; align-items: flex-start; } .modal { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: none; overflow-y: auto; padding-top: calc(env(safe-area-inset-top, 0px) + 24px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); } .modal-close { top: calc(env(safe-area-inset-top, 0px) + 12px); } .modal-lg { width: 100%; } .modal-sm { width: 100%; } } /* ── Responsive breakpoints ───────────────────────────────── */ @media (max-width: 768px) { /* Header — hide desktop nav, show hamburger */ #app-header nav { display: none; } #app-header .search-wrap { display: none; } #app-header .user-badge { display: none; } #app-header .admin-badge { display: none; } #app-header .btn-signout { display: none; } #hamburger-btn { display: block; } #app-header { padding: 0 16px; gap: 12px; } #app-header .logo { font-size: 1rem; } #app-header .logo em { display: inline; font-size: 0.82rem; } /* Show mobile search bar below toolbar */ .mobile-search-bar { display: block; } /* Toolbar */ .toolbar { padding: 0 12px; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 4px 10px; font-size: 0.76rem; } .toolbar-action { padding: 4px 10px; font-size: 0.76rem; } .toolbar-label { display: none; } .toolbar-sep { display: none; } /* Legend */ .legend-strip { padding: 5px 12px; gap: 8px; } .legend-label { display: none; } .legend-item { font-size: 0.68rem; } .legend-pip { width: 8px; height: 8px; } /* Page content */ .page-section { padding: 14px 12px 60px; } /* Tree scroll */ .tree-scroll { padding: 14px 0 60px; } /* Hub grid — single column */ .hub-grid { grid-template-columns: 1fr; padding: 14px 12px 60px; gap: 16px; } /* Cards */ .card { padding: 14px 14px; } /* Wide admin tables (Users, Audit Log, Pre-reg, etc.) — instead of hiding columns 4+ (which lost the Actions and Detail columns on mobile) or trying a card layout that needed data-label attributes the markup didn't set, make the table horizontally scrollable so the user can swipe sideways to reach every column. Every row/cell stays intact; ellipsised cells (audit log Detail) still open the modal on tap for the full text. */ .data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table thead, .data-table tbody { display: table; width: max-content; min-width: 100%; table-layout: auto; } .data-table tr { display: table-row; } .data-table th, .data-table td { display: table-cell; white-space: nowrap; } /* Keep the Actions cell's buttons side-by-side so long button strips stay tappable during a horizontal pan. */ .data-table td .actions { flex-wrap: nowrap; } /* Auth */ .auth-card { padding: 24px 18px; } /* Person card sizing */ .person-card { width: 140px; } .ghost-card { width: 140px; } .partner-dash { width: 140px; } /* Book viewer — single column */ .book-viewer { grid-template-columns: 1fr; height: auto; } .book-sidebar { max-height: 200px; overflow-y: auto; } } @media (max-width: 480px) { #app-header .logo em { display: none; } .toolbar { gap: 4px; } .tab-btn { padding: 4px 8px; font-size: 0.72rem; } /* Stack form rows */ .form-row { flex-direction: column; gap: 0; } .edit-row { flex-direction: column; gap: 4px; } .edit-arrow { display: none; } /* Full-width edit fields */ .edit-current, .edit-proposed { width: 100%; } /* Admin tables — the horizontal-scroll rule from the 768px block above already applies here; nothing extra needed. The previous "cards on mobile" attempt required `data-label` attributes on every , which admin.js never set, so it rendered as a wall of unlabeled stacked cells with hidden columns. Removed. */ } /* ============================================================ MOBILE ADMIN PANEL ============================================================ */ /* Admin tab bar — scrollable on mobile */ @media (max-width: 768px) { .admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 4px; padding: 0 12px; } .admin-tab { white-space: nowrap; flex-shrink: 0; font-size: 0.78rem; padding: 6px 12px; } /* Queue cards on mobile */ .queue-card { background: white; border: 1.5px solid var(--parchment-dark); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-sm); position: relative; } .queue-card-type { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sepia); margin-bottom: 4px; } .queue-card-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .queue-card-meta { font-size: 0.78rem; color: var(--ink-light); margin-bottom: 12px; } .queue-card-actions { display: flex; gap: 8px; } .queue-card-approve { flex: 1; padding: 10px; background: var(--s-verified); color: white; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .queue-card-reject { flex: 1; padding: 10px; background: #b83232; color: white; border: none; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .queue-card-more { padding: 10px 14px; background: var(--parchment-dark); color: var(--ink); border: none; border-radius: var(--radius); font-size: 0.9rem; cursor: pointer; font-family: var(--font-body); } /* Confirm bottom sheet */ .confirm-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 20px 20px 36px; box-shadow: 0 -4px 24px rgba(26,18,8,0.15); z-index: 200; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); border-top: 3px solid var(--sepia); } .confirm-sheet.open { transform: translateY(0); } .confirm-sheet-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 6px; color: var(--ink); } .confirm-sheet-sub { font-size: 0.85rem; color: var(--ink-light); margin-bottom: 18px; } .confirm-sheet-detail { background: var(--parchment-mid); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; font-size: 0.85rem; } .confirm-sheet-detail strong { color: var(--sepia); display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; } .confirm-sheet-buttons { display: flex; gap: 10px; } .confirm-sheet-confirm { flex: 2; padding: 13px; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; font-family: var(--font-body); color: white; } .confirm-sheet-confirm.approve { background: var(--s-verified); } .confirm-sheet-confirm.reject { background: #b83232; } .confirm-sheet-cancel { flex: 1; padding: 13px; background: var(--parchment-dark); border: none; border-radius: var(--radius); font-size: 0.9rem; cursor: pointer; font-family: var(--font-body); color: var(--ink); } .confirm-sheet-overlay { position: fixed; inset: 0; background: rgba(26,18,8,0.4); z-index: 199; display: none; } .confirm-sheet-overlay.open { display: block; } } /* ============================================================ FAMILY TREE — TOP DOWN VIEW ============================================================ */ .topdown { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; /* Container sizes to its widest generation row. The parent (.tree-scroll a.k.a. #tree-area) provides horizontal scrolling. JS scrolls #tree-area after render so the Settlor (gen 0) is visually centered on initial load. */ min-width: max-content; } .td-gen { display: flex; flex-direction: row; /* No wrap within a generation — each generation stays on one visual row so people don't appear to belong to the wrong generation. Use horizontal scroll on the parent (#tree-area) instead. */ flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 12px; margin-bottom: 0; } .union-line { background: var(--connector); } .union-line-h { height: 1.5px; width: 24px; margin-top: 40px; /* align with middle of card */ } .union-year { font-size: 0.68rem; color: var(--sepia); opacity: 0.7; margin-top: 36px; white-space: nowrap; font-style: italic; } .partner-dash { display: flex; align-items: center; justify-content: center; width: 160px; min-height: 80px; border: 1.5px dashed var(--parchment-dark); border-radius: var(--radius); color: var(--ink-light); font-size: 0.8rem; opacity: 0.5; } /* Tree scroll container */ .tree-scroll { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; } @media (max-width: 768px) { .td-gen { gap: 8px; } .union-line-h { width: 12px; } } /* ── Person modal tabs + Family panel ─────────────────────────── */ .pm-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--parchment-dark); margin: 14px 0 14px; } .pm-tab { background: transparent; border: none; padding: 8px 14px; font-family: var(--font-display, var(--font-body)); font-size: 0.82rem; color: var(--sepia); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.12s, border-color 0.12s; } .pm-tab:hover:not(:disabled) { color: var(--ink); } .pm-tab.active { color: var(--ink); border-bottom-color: var(--sepia); font-weight: 500; } .pm-tab:disabled { opacity: 0.4; cursor: not-allowed; } .pm-panel { min-height: 80px; } .fam-section { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px dashed var(--parchment-dark); } .fam-section:last-child { border-bottom: none; padding-bottom: 0; } .fam-self-section { background: rgba(180, 130, 60, 0.07); border-radius: 4px; padding: 8px 12px; border-bottom: none; } .fam-self-note { font-size: 0.7rem; font-style: italic; color: var(--sepia); font-weight: normal; margin-left: 6px; } .fam-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sepia); margin-bottom: 8px; } .fam-count { font-size: 0.7rem; letter-spacing: 0; text-transform: none; opacity: 0.7; margin-left: 4px; } .fam-parents-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fam-amp { color: var(--sepia); font-style: italic; opacity: 0.7; } .fam-meta { font-size: 0.72rem; color: var(--sepia); font-style: italic; margin-top: 4px; } .fam-empty { font-size: 0.78rem; font-style: italic; color: var(--sepia); opacity: 0.6; } .fam-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fam-chip { display: inline-flex; align-items: baseline; gap: 6px; background: var(--white); border: 1px solid var(--parchment-dark); border-radius: 14px; padding: 3px 10px; font-size: 0.82rem; color: var(--ink); cursor: pointer; text-decoration: none; transition: background 0.12s, border-color 0.12s; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fam-chip:hover { background: var(--parchment); border-color: var(--sepia); } .fam-yrs { font-size: 0.7rem; color: var(--sepia); font-style: italic; font-variant-numeric: tabular-nums; } .fam-union-block { background: var(--white); border: 1px solid var(--parchment-dark); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; } .fam-union-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .fam-union-spouse { flex: 1; min-width: 0; } .fam-children-label { font-size: 0.7rem; color: var(--sepia); text-transform: uppercase; letter-spacing: 0.06em; margin: 8px 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fam-expand-all { background: transparent; border: 1px solid var(--parchment-dark); color: var(--sepia); font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; } .fam-expand-all:hover { background: var(--parchment); color: var(--ink); } .fam-children-empty { padding: 4px 0; } .fam-children-list, .fam-grandkids-list { list-style: none; margin: 0; padding: 0; } .fam-child { padding: 4px 0; border-top: 1px dashed transparent; } .fam-child + .fam-child { border-top-color: var(--parchment-dark); } .fam-child-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fam-grandkids-toggle { background: transparent; border: none; color: var(--sepia); font-size: 0.72rem; cursor: pointer; padding: 2px 4px; font-family: inherit; } .fam-grandkids-toggle:hover { color: var(--ink); } .fam-grandkids-toggle .caret { display: inline-block; width: 10px; color: var(--sepia); } .fam-grandkids { margin: 4px 0 4px 18px; padding-left: 8px; border-left: 2px solid var(--parchment-dark); } .fam-grandkids-list li { padding: 3px 0; } /* ── Family panel mini-tree (SVG diagram) ──────────────────────── */ .fam-minitree-wrap { margin-bottom: 16px; padding: 12px 8px 14px; background: linear-gradient(to bottom, rgba(232,222,196,0.20), rgba(232,222,196,0.05)); border: 1px solid var(--parchment-dark); border-radius: 6px; } .fam-mt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .fam-mt-svg { font-family: var(--font-display, var(--font-body)); user-select: none; } .fam-mt-clickable { cursor: pointer; transition: opacity 0.12s; } .fam-mt-clickable:hover { opacity: 0.78; } .fam-mt-clickable:hover rect { stroke-width: 2; } .fam-mt-overflows { margin-top: 6px; padding: 0 8px; } .fam-mt-overflow { font-size: 0.72rem; font-style: italic; color: var(--sepia); padding: 2px 0; } .fam-mt-legend { margin-top: 8px; padding: 6px 8px 0; font-size: 0.7rem; color: var(--sepia); text-align: center; font-style: italic; } .fam-mt-gk-wrap { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--parchment-dark); } .fam-mt-gk-block { margin-bottom: 6px; } .fam-mt-gk-toggle { background: transparent; border: 1px solid var(--parchment-dark); color: var(--ink); font-family: inherit; font-size: 0.75rem; padding: 4px 10px; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; } .fam-mt-gk-toggle:hover { background: var(--parchment); border-color: var(--sepia); } .fam-mt-gk-toggle .caret { display: inline-block; width: 10px; color: var(--sepia); } .fam-mt-gk-content { margin: 4px 0 12px 8px; padding: 6px; border-left: 2px solid var(--parchment-dark); } .fam-mt-gk-svg-wrap { overflow-x: auto; } /* Detailed list view (collapsible) */ .fam-details { margin-top: 8px; border-top: 1px dashed var(--parchment-dark); padding-top: 8px; } .fam-details > summary { cursor: pointer; font-size: 0.78rem; color: var(--sepia); font-style: italic; padding: 4px 0; user-select: none; list-style: none; } .fam-details > summary::-webkit-details-marker { display: none; } .fam-details > summary::before { content: '▸'; display: inline-block; margin-right: 6px; transition: transform 0.15s; } .fam-details[open] > summary::before { transform: rotate(90deg); } .fam-details > summary:hover { color: var(--ink); } .fam-details-inner { padding-top: 8px; } /* ============================================================ PEDIGREE TO FOUNDER — modal list, founder→target ============================================================ */ .pedigree-list { display: flex; flex-direction: column; align-items: stretch; margin: 8px 0 4px; } .pedigree-step { background: var(--white); border: 1.5px solid var(--parchment-dark); border-left: 4px solid var(--connector); border-radius: var(--radius-lg); padding: 10px 14px; font-size: 0.92rem; line-height: 1.35; box-shadow: var(--shadow-sm); } .pedigree-step.pedigree-founder { border-left-color: var(--sepia); background: rgba(196,153,58,0.06); } .pedigree-step.pedigree-target { border-left-color: var(--s-verified); background: rgba(45,122,69,0.06); } .pedigree-badge { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sepia); margin-bottom: 4px; } .pedigree-link { cursor: pointer; color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 600; border-bottom: 1px dotted rgba(139,105,20,0.4); } .pedigree-link:hover { color: var(--sepia); border-bottom-color: var(--sepia); } .pedigree-yrs { margin-left: 6px; font-size: 0.82rem; color: var(--sepia); font-style: italic; } .pedigree-parents { margin-top: 3px; font-size: 0.86rem; color: var(--ink-light); } .pedigree-faint { opacity: 0.6; font-size: 0.78rem; font-style: italic; } .pedigree-connector { align-self: center; color: var(--connector); font-size: 1rem; line-height: 1; height: 14px; user-select: none; } /* ============================================================ LOGIN CREST — center any image inside the auth card ============================================================ */ .auth-card > img, .auth-card .auth-logo, .auth-card .auth-crest { display: block; margin: 0 auto 18px; max-width: 140px; height: auto; } /* ============================================================ FAMILY HUB — defensive tab contrast fix If the Family Hub tab strip is rendered without a `.toolbar` parent, these ID-specific rules keep the buttons readable against the dark `--ink-light` background. ============================================================ */ button#fam-tab-events:not(.active), button#fam-tab-announcements:not(.active), button#fam-tab-links:not(.active) { color: var(--parchment-dark); } button#fam-tab-events:not(.active):hover, button#fam-tab-announcements:not(.active):hover, button#fam-tab-links:not(.active):hover { color: var(--ink); background: var(--sepia); border-color: var(--sepia); } /* ============================================================ PRINT — clean pedigree The person modal lives inside
. To print a clean multi-page pedigree we hide siblings of
, keep
displayed but stripped of layout, hide all of
's children except #person-modal, then let the modal flow naturally (position: static — fixed/absolute break multi-page printing). ============================================================ */ @media print { @page { margin: 0.5in; } html, body { background: white !important; color: black !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } body > #app-header, body > #banner-strip, body > #toast-container, body > #app-loading, body > .feedback-fab, body > #feedback-fab, body > #mobile-sidebar, body > .mobile-sidebar, body > .sidebar-backdrop { display: none !important; } body > #page-content, body > main { display: block !important; margin: 0 !important; padding: 0 !important; background: white !important; overflow: visible !important; height: auto !important; min-height: 0 !important; width: auto !important; max-width: none !important; position: static !important; } #page-content > *, main > * { display: none !important; } #page-content > #person-modal, main > #person-modal { display: block !important; position: static !important; background: white !important; padding: 0 !important; margin: 0 !important; width: 100% !important; height: auto !important; overflow: visible !important; inset: auto !important; z-index: auto !important; } #person-modal .modal { box-shadow: none !important; border: none !important; max-height: none !important; overflow: visible !important; width: 100% !important; max-width: 100% !important; background: white !important; padding: 0 !important; margin: 0 !important; position: static !important; display: block !important; } #person-modal .modal-close, #person-modal .modal-footer { display: none !important; } .pedigree-list { margin: 0 !important; display: block !important; } .pedigree-step { box-shadow: none !important; page-break-inside: avoid; break-inside: avoid; border: 1px solid #999 !important; background: white !important; margin-bottom: 6px !important; display: block !important; } .pedigree-link { color: black !important; border-bottom: none !important; } .pedigree-badge, .pedigree-yrs, .pedigree-parents, .pedigree-faint { color: #444 !important; } .pedigree-connector { color: #999 !important; } .modal-title, .modal-sub { page-break-after: avoid; break-after: avoid; } } /* ============================================================ RELATIONSHIP FINDER (diagram + print) When body.rf-printing is set, override the existing person-modal-only print rule above so we print just the Relationship Finder modal's result region in landscape. ============================================================ */ .rf-headline { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); text-align: center; padding: 6px 4px 10px; } .rf-person-box:hover rect { filter: brightness(0.96); } .rf-diagram-svg { max-width: 100%; } @media print { body.rf-printing #relationship-finder-modal { display: block !important; position: static !important; background: white !important; inset: auto !important; z-index: auto !important; } body.rf-printing #relationship-finder-modal .modal { box-shadow: none !important; border: none !important; max-width: 100% !important; max-height: none !important; width: 100% !important; background: white !important; padding: 0 !important; margin: 0 !important; position: static !important; display: block !important; overflow: visible !important; } /* Hide the picker inputs / action buttons; show only the headline + diagram. Picker dropdowns + the modal-close + print button live above the result panel and aren't needed on paper. */ body.rf-printing #relationship-finder-modal .modal > :not(#rf-result):not(.modal-title) { display: none !important; } body.rf-printing #rf-result { border: none !important; padding: 0 !important; overflow: visible !important; background: white !important; min-height: 0 !important; } body.rf-printing .rf-diagram-wrap { overflow: visible !important; } body.rf-printing .rf-diagram-svg { width: 100% !important; height: auto !important; max-width: 100% !important; } /* Landscape orientation is injected at print time via a temporary