/* "Saving to:" bar (signed-in, browse view): names the list the heart saves into and switches it. Sits above the results; the dropdown reuses the shared .ml-menu popup + .lk-* rows below. */ /* "Saving to:" sits above the filter box normally (just under the title); when the box auto-collapses it's moved INSIDE the box, just under the count (shares its bg + border). */ /* margin-bottom + .nb-mask padding-top (14px) = a 20px gap down to the Preferences box (matches the top gap). */ .saveto { display: flex; justify-content: center; background: transparent; margin: 0 0 6px; } .filters-panel .saveto { margin: 8px 0 0; } .saveto[hidden] { display: none; } /* Extra breathing room below the (taller, 2-line) home title — put on the dropdown itself, only in the non-pinned state so the 20px nav gap when pinned is untouched. Favorites uses its own bar. */ .namebar:not(.filters-collapsed):not(.filters-open) #saveTo { margin-top: 8px; } .saveto-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 340px; background: var(--panel2); border: 1.5px solid var(--accent2); color: var(--ink); border-radius: var(--r-container); padding: 8px 13px; font-size: .9rem; line-height: 1; cursor: pointer; } .saveto-btn:hover { filter: brightness(1.08); } .saveto-label { color: var(--muted); font-size: .8rem; white-space: nowrap; flex: 0 0 auto; } .saveto-heart { color: var(--pink); display: inline-flex; } .saveto-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .saveto-caret { color: var(--accent2); margin-left: 2px; } #saveToMenu, #curListMenu, #favActionsMenu { min-width: 216px; max-width: 300px; } /* Favorites-view header bar (under the title): "Current list:" switcher + "Actions" dropdown. */ .favbar { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 6px; flex-wrap: nowrap; } .filters-panel .favbar { margin: 8px 0 0; } /* Inside the box (collapsed/pinned) the list bar shows just "Current list:" — Actions is hidden there. */ .filters-panel .favbar .favactions-btn, .filters-panel .favbar .favactions-menu { display: none; } .favbar[hidden] { display: none; } .favbar .saveto-btn { margin: 0; min-width: 0; } .favactions-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: .9rem; line-height: 15px; border-radius: var(--r-container); border-width: 1.5px; min-width: 0; } .favactions-caret { color: var(--accent2); } /* Both views: wrap ALL filters in a rounded panel. At the very top (first load) the panel is fully expanded with NO toggle at all — the grid hugs the top border. Once it would slide under the nav it auto-collapses to a pinned "Preferences ▾" summary; the toggle exists only while pinned (collapsed or manually re-opened). */ .filters-toggle { display: none; } .namebar .filters-panel { max-width: 680px; margin: 0 auto 12px; border: 1px solid var(--line); border-radius: var(--r-container); background: var(--panel2); padding: 15px 16px; } .nb-sentinel { height: 0; } /* Toggle ("Preferences ▾") is shown ONLY while the panel is pinned. */ .namebar.filters-collapsed .filters-toggle, .namebar.filters-open .filters-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; border-radius: var(--r-control); padding: 8px 10px 8px 2px; color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer; } .namebar .filters-toggle:hover { color: var(--ink); } /* Header row holds just the toggle (only visible while pinned). Constrained + centered to match the .ff-grid box, so "Preferences" left-aligns with the field labels below it at any width. */ .filters-head { display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 0 auto; } .namebar .filters-toggle .ft-caret { color: var(--accent2); transition: transform .18s ease; } /* Collapsed → caret points right; open → caret points down. The "Preferences" word stays put across both pinned states — only the caret rotates. */ .namebar.filters-collapsed .filters-toggle .ft-caret { transform: rotate(-90deg); } /* Only the manually-opened (pinned) state needs the header gap; at the top the grid hugs it. */ .namebar.filters-open .ff-grid { margin-top: 8px; } .namebar.filters-collapsed .ff-grid, .namebar.filters-collapsed .surname-row, .namebar.filters-collapsed .controls { display: none; } /* Collapsed: tighten the panel's vertical padding so the pinned summary isn't so tall (full padding restores when expanded). */ .namebar.filters-collapsed .filters-panel { padding-top: 2px; padding-bottom: 2px; cursor: pointer; } /* Expanded-while-pinned: the header row stays a clickable target to collapse again. */ .namebar.filters-open .filters-head { cursor: pointer; } /* Use the SAME top padding when expanded (pinned) as when collapsed. Top padding only. */ .namebar.filters-open .filters-panel { padding-top: 2px; } /* ...and match the toggle's own top padding too, so "Preferences" sits at the same height. */ .namebar.filters-open .filters-toggle { padding-top: 6px; } /* Collapsed: also trim the toggle's own vertical padding so the collapsed bar is about as tall as the Saving-to pill (~34px). */ .namebar.filters-collapsed .filters-toggle { padding-top: 6px; padding-bottom: 6px; } /* Reset footer: centered action at the bottom of the panel; hidden while collapsed. */ .filters-foot { display: flex; justify-content: center; margin-top: 12px; } .namebar.filters-collapsed .filters-foot { display: none; } /* Collapsed summary drops the results count line and its top divider (HR) too. */ .namebar.filters-collapsed .countbar { display: none; } /* Labeled filter fields in a 2-column grid: Last name / Middle name, then Gender / Keyword. */ .ff-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px 14px; max-width: 620px; margin: 0 auto; } /* All filters now function on favorites too (Starts-with/Length/Gender/Keyword client-side; Culture/Scripture via lazy per-name enrichment), so they show in both views. */ /* The results count sits at the bottom of the filter box (a footer for the filters). */ .filters-panel .countbar { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .filters-panel .count { margin: 0; } .filters-panel .countbar:has(.count:empty) { display: none; } .ff-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ff-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); font-weight: 600; padding-left: 2px; } .ff-field #surname, .ff-field #middleInput, .ff-field #search { flex: 0 0 auto; width: 100%; min-width: 0; max-width: none; box-sizing: border-box; } .ff-field #genderSeg { flex: 0 0 auto; width: 100%; max-width: none; order: 0; } .ff-seg button { flex: 1; } .ff-field .ms { width: 100%; } .ff-field .ms-btn { width: 100%; min-width: 0; height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; } /* Middle-name generator: 50/50 style dropdown + Generate button. */ .ff-gen { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; } .ff-gen .ms { min-width: 0; width: 100%; } .ff-gen .gen-btn { min-width: 0; width: 100%; height: 34px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-control); font-size: .9rem; cursor: pointer; } .ff-gen .gen-btn:hover { border-color: var(--accent2); } /* Replaces the Middle name box while auto-generation is active. */ .gen-clear-btn { width: 100%; height: 34px; box-sizing: border-box; background: var(--panel2); border: 1px solid var(--accent2); color: var(--accent2); border-radius: var(--r-control); font-size: .9rem; font-weight: 600; cursor: pointer; } .gen-clear-btn:hover { background: var(--panel); } .gen-clear-btn[hidden] { display: none; } .gen-clear-btn .cg-short { display: none; } @media (max-width: 560px) { .gen-clear-btn .cg-long { display: none; } .gen-clear-btn .cg-short { display: inline; } } /* In the favorites panel every functional filter now lives in the grid; the old .controls block only holds the (favorites-inert) Starts-with/Length/Culture/Scripture set, so hide it. */ .namebar.faving .controls { display: none; } /* Responsive (mobile): pair the narrow controls two-up — Last name + Middle name, Culture + Scripture, Starts with + Length, Sort by + Keyword search — and move the Middle name generator above Gender. Gender and the generator span the full row. */ @media (max-width: 560px) { .ff-grid { grid-template-columns: 1fr 1fr; } /* Full-width on mobile: match the generator's two items to the two-up text boxes above by using the same 14px column gap, so their widths and gap line up. */ .ff-gen { gap: 14px; } .ff-grid > .ff-field { grid-column: 1 / -1; } .ff-grid > .ff-field:nth-child(1), .ff-grid > .ff-field:nth-child(2), .ff-grid > .ff-field:nth-child(5), .ff-grid > .ff-field:nth-child(6), .ff-grid > .ff-field:nth-child(7), .ff-grid > .ff-field:nth-child(8), .ff-grid > .ff-field:nth-child(9), .ff-grid > .ff-field:nth-child(10) { grid-column: auto; } .ff-grid > .ff-field:nth-child(4) { order: 1; } /* Middle name generator */ .ff-grid > .ff-field:nth-child(3) { order: 2; } /* Gender, now below the generator */ .ff-grid > .ff-field:nth-child(n+5) { order: 3; } /* keep the rest in DOM order after */ } .lk-tick { color: var(--accent2); font-style: normal; } .lk-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding: 2px 6px 5px; } .lk-lists { display: flex; flex-direction: column; gap: 4px; max-height: 244px; overflow-y: auto; } .lk-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-row); padding: 8px 10px; font-size: .9rem; cursor: pointer; text-align: left; } .lk-item:hover { border-color: var(--accent2); } .lk-item.on { border-color: var(--accent2); color: var(--accent2); } .lk-item .lk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk-item .lk-count { color: var(--dim); font-size: .8rem; flex: 0 0 auto; } .lk-sep { height: 1px; background: var(--line); margin: 7px 2px; } html.light .favpill-caret { color: var(--dim); } /* Favorites view: hide only the browse-only filters that don't apply to a saved list (Starts with / Length / Culture / Scripture). Gender, keyword and sort stay live. */ .namebar.faving .fpair { display: none; } /* Favorites-view action toolbar (list name + actions), shown above the results. */ .favtools { margin: 6px 0 14px; text-align: center; } .favtools[hidden] { display: none; } /* Favorites title doubles as a list switcher: a button styled like the H1, with a caret chip that clearly signals it's a dropdown. */ #tagline .tag-default[hidden], #tagline .tagsel[hidden] { display: none; } #tagline .tagsel { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 8px; } #tagline .tagsel.static { cursor: default; } #tagline .tag-titlewrap { display: inline-flex; align-items: center; } #tagline #tagselName { position: relative; } /* Kebab chip is unchanged; a pink heart sits BEHIND it (poking out around the box). */ #tagline .tag-caretwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; top: .15em; } #tagline .tag-caret-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: 1.5em; height: 1.5em; color: var(--pink); pointer-events: none; z-index: 0; } #tagline .tag-caret { position: relative; z-index: 1; font-size: .48em; display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; color: #fff; } #tagline .tagsel:hover .tag-caret-heart { filter: brightness(1.1); } #tagline .tagsel.static .tag-caretwrap { display: none; } #tagselMenu { min-width: 216px; max-width: 300px; } .ft-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .ft-btn { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: var(--r-pill); padding: 7px 14px; font-size: .82rem; cursor: pointer; } .ft-btn:hover { border-color: var(--accent2); color: var(--ink); } .ft-btn[hidden] { display: none; } .ft-btn.ft-danger:hover { border-color: var(--pink); color: var(--pink); } /* ---- Merge-lists modal (declarative source → destination form) ---- */ .merge-blurb { margin-top: 10px; font-size: .9rem; line-height: 1.5; } .merge-field { margin-top: 16px; } .merge-label { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; } /* In-app custom dropdown (replaces native