/* More and the sections it opens: saints, relics, locations, lineage, groups,
   jobs, shop and give. Built on design.css tokens so they read as one app. */

/* Page header and sections */
#app .more-header { margin-bottom:18px; }
#app .more-header .pane-title { margin-bottom:8px; overflow-wrap:anywhere; }
#app .more-header .eyebrow a { color:inherit; }
#app .more-header .eyebrow a:hover { color:var(--gold-deep); }
#app .more-subtitle { color:var(--soft); font-size:13px; line-height:1.65; max-width:62ch; }
#app .more-header .more-actions { margin-top:14px; }
#app .more-section { border-top:1px solid var(--line); padding:20px 0; min-width:0; }
/* A section's padding is its only gap; trailing margins inside would double it. */
#app .more-section > :last-child, #app .daily-section > :last-child, #app .prayer-section > :last-child { margin-bottom:0; }
#app .more-section > h3 { font-size:22px; font-weight:400; margin:0 0 12px; }
#app .more-section h4 { font-size:12px; font-weight:600; color:var(--soft); margin:18px 0 8px; }
#app .more-prose { color:var(--ink); font-size:14px; line-height:1.75; margin:0 0 22px; overflow-wrap:anywhere; }
#app .more-prose p + p { margin-top:.8em; }
#app .person-biography { max-width:72ch; }
#app .person-lineage { border-top:1px solid var(--line); padding-top:14px; margin-top:22px; }
#app .person-lineage > summary { font-family:Newsreader,Georgia,serif; font-size:22px; color:var(--ink); }
#app .person-lineage > summary::after { content:'›'; margin-left:auto; color:var(--soft); }
#app .person-lineage[open] > summary::after { transform:rotate(90deg); }
#app .person-source-group { margin-top:16px; }
#app .person-source-group > h3 { font-size:18px; font-weight:400; }
#app .more-error { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--soft); font-size:13px; }
#app .more-error p { margin-bottom:10px; }
#app .more-callout { padding:16px 18px; margin:0 0 20px; border:1px solid var(--wash-line); border-radius:12px; background:var(--wash); color:var(--ink); font-size:13px; line-height:1.65; }
#app .more-callout .more-actions { margin-top:10px; }
#app .more-suggest { margin-top:18px; }
#app .more-filter { font-size:12px; color:var(--soft); margin:-6px 0 14px; }

/* The More hub reuses the Settings list (.shub). */
#app .more-menu { margin-bottom:28px; }
#app .more-menu .shub-row:disabled { border-radius:0; color:var(--soft); opacity:1; cursor:default; }
#app .more-menu .shub-row:disabled:hover { background:none; }
#app .more-menu .more-wip { margin-left:auto; }

/* Toolbars and filters */
#app .more-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px; }
#app .more-toolbar[hidden] { display:none; }
#app .more-toolbar input[type=search] { flex:1 1 220px; min-height:44px; width:auto; }
#app .more-toolbar select { flex:0 1 auto; width:auto; min-height:44px; }
#app .more-toolbar button { flex:none; }
#app .more-toolbar label { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; }
#app .more-segmented { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px; }
#app .more-segmented button { background:transparent; color:var(--soft); border:1px solid var(--input-border); padding:.35rem .8rem; font-size:.75rem; min-height:var(--button-height); }
#app .more-segmented button[aria-pressed="true"] { background:var(--selected-bg); color:var(--selected-ink); border-color:var(--selected-bg); }

/* Lists and rows */
#app .more-list, #app .more-rows, #app .more-plain, #app .more-chips { list-style:none; margin:0; padding:0; }
#app .more-list > li { border-bottom:1px solid var(--line); }
#app .more-list > li:first-child { border-top:1px solid var(--line); }
#app .more-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; min-width:0; }
#app .more-rows .more-row { padding:10px 0; }
#app .more-row-body { min-width:0; flex:1; }
#app .more-row-title { font-size:14px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
#app .more-row-title:hover { color:var(--gold-deep); }
#app .more-row p { margin-top:2px; }
#app .more-rows > li { padding:8px 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
#app .more-rows > li + li { border-top:1px solid var(--line); }
#app .more-plain li { font-size:13px; line-height:1.8; color:var(--soft); }
#app .more-plain .observance-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px 18px; padding:10px 0; }
#app .observance-row + .observance-row { border-top:1px solid var(--line); }
#app .more-plain .observance-row:first-child { padding-top:0; }
#app .more-plain .observance-row:last-child { padding-bottom:0; }
#app .observance-details { flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
#app .observance-details p { margin:2px 0 0; }
#app .observance-row > button { flex:none; }
#app .more-results .more-load { margin-top:14px; }
#app .more-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
#app .more-section > .more-actions, #app .org-section > .more-actions { margin-top:14px; }
#app .more-actions input[type=number] { width:5.5rem; min-height:44px; }
#app .more-thumb { width:52px; height:52px; object-fit:cover; border-radius:8px; flex:none; }

/* Chips, facts, stars */
#app .more-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
#app .more-chip { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; background:var(--ghost); color:var(--soft); font-size:11px; line-height:1.5; white-space:nowrap; }
#app .more-chip-warn { background:var(--wash); color:var(--gold-deep); border:1px solid var(--wash-line); white-space:normal; }
#app .more-row-body .more-chip { margin-left:6px; vertical-align:middle; }
#app .more-facts { display:grid; grid-template-columns:minmax(7rem,max-content) minmax(0,1fr); gap:8px 18px; margin:0 0 22px; font-size:13px; line-height:1.6; }
#app .more-facts dt { color:var(--faint); }
#app .more-facts dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
#app .more-stars { color:var(--gold-deep); font-size:12px; letter-spacing:.04em; }

/* Mass and Confession times */
#app .more-times { display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:6px 16px; margin:0; font-size:14px; line-height:1.6; }
#app .more-times dt { color:var(--faint); }
#app .more-times dd { margin:0; font-variant-numeric:tabular-nums; }
#app .more-service + .more-service { margin-top:6px; }
#app .parish-notes { margin-top:20px; }
#app .parish-notes h4 { color:var(--ink); }

/* Sources, history, suggestions, moderation */
#app .more-provenance { margin-top:8px; }
#app .more-source { display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
#app .more-history { margin-top:6px; font-size:12px; color:var(--soft); }
#app .more-history summary { display:flex; align-items:center; min-height:44px; cursor:pointer; }
/* Page-level disclosures read as one divided list, not floating links. */
#app .pane > .more-history { margin-top:0; border-top:1px solid var(--line); }
#app .more-moderation { margin:12px 0; padding:10px 12px; border:1px dashed var(--wash-line); border-radius:10px; }
#app .more-moderation .eyebrow { margin:0 6px 0 0; }
#app .more-suggestion p + p { margin-top:4px; }

/* Lineage */
#app .lineage-toolbar input[type=search] { flex-basis:150px; min-width:0; }
#app .lineage-canvas { container-type:inline-size; overflow:auto; max-height:72vh; padding:18px; margin:12px 0 20px; border:1px solid var(--line); border-radius:14px; background:var(--wash); }
#app .lineage-canvas:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
#app .more-tree, #app .more-tree ul, #app .lineage-ancestry, #app .lineage-descendants { list-style:none; margin:0; padding:0; }
#app .more-tree > li + li { margin-top:24px; }
#app .more-tree ul { margin-left:18px; padding-left:24px; border-left:1px solid var(--gold); }
#app .more-tree ul > li { position:relative; padding:12px 0; }
#app .more-tree ul > li::before { content:""; position:absolute; left:-24px; top:36px; width:24px; border-top:1px solid var(--gold); }
#app .more-tree ul.lineage-continuation { margin-left:0; padding-left:0; border-left:0; }
#app .more-tree .lineage-continuation > li::before { left:min(125px,50%); top:0; width:0; height:12px; border-top:0; border-left:1px solid var(--gold); }
#app .more-tree summary { cursor:pointer; min-height:44px; padding:10px 0 10px 18px; font-size:12px; color:var(--soft); }
#app .lineage-card { display:flex; flex-direction:column; gap:3px; width:min(250px,100cqi); max-width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
#app .lineage-name { font-size:14px; font-weight:500; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
#app .lineage-name:hover { color:var(--gold-deep); }
#app .lineage-card .daily-muted { font-size:11px; line-height:1.5; }
#app .lineage-match { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
#app .lineage-ancestry { width:max-content; min-width:min(100%,250px); margin:0 auto; }
#app .lineage-ancestry > li { position:relative; padding-bottom:28px; }
#app .lineage-ancestry > li:not(:last-child)::after { content:""; position:absolute; left:50%; height:28px; bottom:0; border-left:1px solid var(--gold); }
#app .lineage-ancestry > li > .lineage-card { margin:0 auto; }
#app .lineage-ancestry > li:last-child { padding-bottom:0; }
#app .lineage-descendants { position:relative; display:flex; gap:20px; padding-top:28px; }
#app .lineage-descendants::before { content:""; position:absolute; left:50%; top:0; height:28px; border-left:1px solid var(--gold); }
#app .lineage-descendants > li { position:relative; flex:0 0 min(250px,100cqi); padding-top:20px; }
#app .lineage-descendants > li::before { content:""; position:absolute; left:50%; top:0; height:20px; border-left:1px solid var(--gold); }
#app .lineage-descendants > li::after { content:""; position:absolute; left:-10px; right:-10px; top:0; border-top:1px solid var(--gold); }
#app .lineage-descendants > li:first-child::after { left:50%; }
#app .lineage-descendants > li:last-child::after { right:50%; }
#app .lineage-review-option { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--soft); margin-top:16px; }
#app .lineage-review-option input { width:auto; }
#app .lineage-review-option[hidden] { display:none; }
#app .lineage-review-option { margin-bottom:16px; }
#app .jurisdiction-event p { margin:0 0 6px; }
#app .lineage-management { border-top:1px solid var(--line); padding-top:12px; margin-top:20px; }
#app .more-record + .more-record { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
#app .more-record p { font-size:13px; line-height:1.65; }

/* Tables */
#app .more-table-wrap { overflow-x:auto; margin:6px 0 4px; }
#app .more-table { width:100%; border-collapse:collapse; font-size:12px; }
#app .more-table th { text-align:left; font-weight:600; color:var(--faint); padding:8px 10px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
#app .more-table td { padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top; }
#app .more-table td:nth-child(3) { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Maps */
#app .more-map { height:min(62vh,520px); min-height:320px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--wash); margin-bottom:10px; z-index:0; }
#app .more-map-small { height:220px; min-height:0; margin:0 0 22px; }
#app .more-map-error { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding:24px; }
#app .more-map-error p { flex-basis:100%; text-align:center; }
#app .more-near { margin-top:12px; }
[data-theme="dark"] #app .more-map .leaflet-tile-pane { filter:brightness(.72) contrast(1.1) saturate(.7); }
#app .leaflet-container { font:inherit; }
#app .leaflet-popup-content-wrapper, #app .leaflet-popup-tip { background:var(--surface); color:var(--ink); }
#app .leaflet-container a.leaflet-popup-close-button { color:var(--faint); }
#app .more-popup strong { display:block; font-size:13px; font-weight:600; }
#app .more-popup p { margin:4px 0 6px; font-size:12px; color:var(--soft); }
#app .more-pin svg { display:block; }
#app .more-pin, #app .more-pin-static { display:grid; place-items:center; border-radius:50%; font:600 10px/1 Inter,system-ui,sans-serif; color:#fff; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); background:var(--accent); }
#app .more-pin-static { width:26px; height:26px; flex:none; border-width:0; box-shadow:none; }
#app .pin-first { background:#b08a2e; }
#app .pin-second { background:#7d8590; }
#app .pin-third { background:#a0643a; }
#app .pin-miracle { background:#8a2f3c; }
#app .pin-apparition { background:#2f5f8a; }
#app .pin-place { background:var(--accent); }
#app .pin-visited { outline:3px solid var(--gold); outline-offset:1px; }
#app .marker-cluster { background:color-mix(in srgb,var(--gold) 35%,transparent); border-radius:50%; }
#app .marker-cluster div { width:30px; height:30px; margin:5px; border-radius:50%; background:var(--gold-deep); color:#fff; text-align:center; font:600 12px/30px Inter,system-ui,sans-serif; }
#app .more-visited { display:flex; align-items:center; gap:6px; margin:0; font-size:12px; color:var(--soft); white-space:nowrap; }

/* Shop */
#app .more-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
#app .more-product { display:flex; flex-direction:column; gap:4px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); text-decoration:none; }
#app .more-product:hover { border-color:var(--gold); }
#app .more-product img, #app .more-product-blank { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--wash); margin-bottom:6px; }
#app .more-product-blank { display:grid; place-items:center; }
#app .more-product .more-product-blank img, #app .more-gallery .more-product-blank img { width:28%; height:auto; aspect-ratio:auto; margin:0; background:none; opacity:.45; }
#app .more-product strong { font-size:13px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
#app .more-price { font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums; }
#app .more-price-large { font-family:Newsreader,Georgia,serif; font-size:26px; margin-bottom:8px; }
#app .more-product-page { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; margin-bottom:22px; }
#app .more-product-page p { margin-bottom:8px; font-size:13px; }
#app .more-product-page .more-chip { margin-left:6px; }
#app .more-product-page .more-price-large { font-size:26px; }
#app .more-gallery > .more-product-blank { display:grid; width:100%; aspect-ratio:1; border-radius:12px; }
#app .more-gallery > img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; background:var(--wash); }
#app .more-thumbs, .manage-dialog .more-thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#app .more-thumbs button { padding:0; background:none; border:1px solid var(--line); border-radius:8px; overflow:hidden; width:58px; height:58px; }
#app .more-thumbs img, .manage-dialog .more-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.manage-dialog .more-photo { display:grid; gap:4px; width:92px; }
.manage-dialog .more-photo img { height:92px; border-radius:8px; }
#app .more-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; list-style:none; margin:0 0 22px; padding:0; }
#app .more-steps li { padding:10px 0 0; border-top:3px solid var(--line); font-size:12px; color:var(--faint); }
#app .more-steps li.is-done { border-top-color:var(--gold); color:var(--ink); }
#app .more-steps small { display:block; color:var(--faint); }
#app .more-orders details { padding:12px 0; }
#app .more-orders summary { display:flex; justify-content:space-between; gap:12px; align-items:center; min-height:44px; cursor:pointer; font-size:13px; }
#app .more-orders .more-facts { margin:12px 0; }

/* Give */
#app .more-give-form { max-width:30rem; }
#app .more-give-form > label { margin:0 0 16px; font-size:13px; }
#app .more-give-form input[type=number] { max-width:12rem; }
#app .more-give-form .actions { margin:14px 0 10px; }
#app .more-fund-progress { margin-top:6px; }
#app .more-fund-progress progress { display:block; width:100%; max-width:22rem; height:6px; accent-color:var(--gold-deep); }

/* Links styled as buttons */
#app a.button-link, #app a.more-button-link { display:inline-flex; align-items:center; justify-content:center; min-height:var(--button-height); padding:.3rem .65rem; border-radius:6px; font-size:.75rem; font-weight:500; line-height:1.4; text-decoration:none; white-space:nowrap; }
#app a.gold.button-link { background:linear-gradient(120deg,var(--gold-deep),var(--gold)); color:#fff; }

/* Dialog controls (dialogs live outside #app) */
.manage-dialog label.manage-check { display:flex; align-items:center; gap:10px; margin-bottom:.4rem; color:var(--ink); font-size:.9rem; }
.manage-dialog label.manage-check input { display:inline-block; width:18px; margin:0; flex:none; }
.manage-dialog .manage-hint, #app .manage-hint { font-size:.78rem; color:var(--faint); line-height:1.55; margin:-.6rem 0 1rem; }
#app label.manage-check { display:flex; align-items:center; gap:10px; margin:0 0 12px; color:var(--ink); font-size:13px; }
#app label.manage-check input { width:18px; margin:0; flex:none; }
.manage-dialog .more-church-field { margin-bottom:1rem; font-size:.8rem; color:var(--soft); }
.manage-dialog .more-church-field p { margin:.3rem 0; color:var(--ink); }
.manage-dialog .more-church-results { list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:4px; }
.manage-dialog .more-church-results button { width:100%; text-align:left; border-radius:10px; }

@media (max-width:900px) {
  #app .more-product-page { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px) {
  #app .more-row { flex-wrap:wrap; }
  #app .more-facts { grid-template-columns:minmax(0,1fr); gap:2px; }
  #app .more-facts dd { margin-bottom:8px; }
  #app .more-times { grid-template-columns:5.5rem minmax(0,1fr); }
  #app .more-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app .more-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #app .more-map { height:56vh; }
  #app .more-map-small { height:220px; }
}

/* Today: saints link to their pages without looking like a list of links */
#app .saints-names a, #app #today-commemorations a, #app #today-feast-rank a { color:inherit; text-decoration:underline; text-decoration-color:var(--wash-line); text-underline-offset:3px; }
#app .saints-names a:hover, #app #today-commemorations a:hover, #app #today-feast-rank a:hover { color:var(--gold-deep); text-decoration-color:currentColor; }
#app .daily-saints > a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--action-ink); }
#app #org-services:not(:empty) { margin-top:1rem; }
#app .pane > .more-actions { margin:0 0 18px; }
#app .more-map-caption { margin:-14px 0 22px; }
#app .more-suggest + .more-moderation, #app .more-provenance + .more-moderation { margin-top:16px; }
#app #org-services h4 { margin:20px 0 8px; font-size:13px; }