/* Brand: charcoal #474A4C, gold #FCB127, sage #717D73 / #A0AEA2, gray #7A7A7A, white #F8F8F7. Light only. */
:root {
  color-scheme:light;
  --bg:#F8F8F7; --band:#F8F8F7; --card:#F8F8F7; --ink:#474A4C; --muted:#5f6264; --rule:#dcdad4;
  --accent:#717D73; --gold:#FCB127; --button:#474A4C; --button-ink:#F8F8F7; --on:#717D73; --on-ink:#F8F8F7;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.serif { font-family:Georgia, "Times New Roman", serif; }

.brand { display:flex; align-items:center; gap:12px; padding:calc(14px + env(safe-area-inset-top)) 16px 0; max-width:640px; margin:0 auto; }
.brand img { flex:none; width:auto; height:46px; }
.brand h1 { font:600 24px/1.1 Georgia, "Times New Roman", serif; margin:0; }
.brand p { font:italic 400 14px/1.3 Georgia, "Times New Roman", serif; color:var(--muted); margin:2px 0 0; }

main { max-width:640px; margin:0 auto; padding:12px 16px 24px; }
h2 { font:600 22px/1.2 Georgia, "Times New Roman", serif; margin:4px 0 4px; }
.lede { color:var(--muted); margin:0 0 16px; font-size:15px; }
h3.day { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:22px 0 8px; font-weight:600; }
h3.sub { font:600 17px/1.3 Georgia, "Times New Roman", serif; margin:24px 0 8px; }

.card { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:13px 14px; margin-bottom:8px; }
.promise { font:italic 400 13.5px/1.45 Georgia, "Times New Roman", serif; color:var(--muted); margin:4px 0 14px; }

a.obit { display:block; color:inherit; text-decoration:none; }
a.obit:active { border-color:var(--accent); }
.name { font:600 18px/1.25 Georgia, "Times New Roman", serif; }
.meta { color:var(--muted); font-size:14px; margin-top:3px; }
.cta { color:var(--accent); font-size:14px; margin-top:6px; }
.new { display:inline-block; background:var(--gold); color:#474A4C; font:700 11px/1 -apple-system, "Segoe UI", sans-serif; letter-spacing:.05em;
  text-transform:uppercase; border-radius:999px; padding:4px 8px; margin-left:8px; vertical-align:3px; }

.chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px; margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; border:1px solid var(--rule); background:var(--card); color:var(--ink); border-radius:999px; padding:8px 14px; font:inherit; font-size:14px; min-height:38px; }
.chip[aria-pressed="true"] { background:var(--on); border-color:var(--on); color:var(--on-ink); font-weight:600; }
.status { color:var(--muted); font-size:13px; min-height:20px; margin:0 0 4px; }

button, select, input { font:inherit; color:var(--ink); }
.btn, select, input[type="search"] { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:10px 14px; min-height:44px; }
.btn { white-space:nowrap; flex:none; }
.btn.primary { background:var(--button); border-color:var(--button); color:var(--button-ink); font-weight:600; }
.btn.quiet { color:var(--muted); min-height:38px; padding:6px 12px; font-size:14px; }
.btn:disabled { opacity:.55; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.row > select, .row > input { flex:1 1 150px; min-width:0; }
.search { margin-bottom:14px; flex-wrap:nowrap; }
.search input { flex:1 1 auto; min-width:0; }
.between { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.between > div:first-child { min-width:0; }
.title { font-weight:600; }
.small { color:var(--muted); font-size:14px; }

.choice { display:flex; border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin-top:10px; }
.choice button { flex:1; border:0; background:transparent; padding:10px 8px; min-height:44px; font-size:14px; color:var(--muted); }
.choice button + button { border-left:1px solid var(--rule); }
.choice button[aria-pressed="true"] { background:var(--on); color:var(--on-ink); font-weight:600; }
.muted-firm .title, .muted-firm .small { opacity:.6; }

.results { margin-top:8px; }
.results button { display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:11px 14px; margin-bottom:6px; min-height:44px; }

label.opt { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; }
label.opt input { margin-top:4px; width:18px; height:18px; accent-color:var(--accent); }
.note { color:var(--muted); padding:8px 0 16px; }
footer.fine { color:var(--muted); font-size:13px; margin-top:24px; border-top:1px solid var(--rule); padding-top:14px; }

.tabs { position:fixed; left:0; right:0; bottom:0; display:flex; background:var(--band); border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom); z-index:5; }
.tabs button { flex:1; border:0; background:transparent; color:var(--muted); font-size:11px; padding:8px 2px 7px; min-height:58px;
  display:flex; flex-direction:column; align-items:center; gap:3px; }
.tabs svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tabs button[aria-current="page"] { color:var(--accent); font-weight:600; }

.firm a { color:var(--accent); }
.flag { width:19px; height:10px; margin-left:8px; vertical-align:1px; border-radius:1.5px; box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.toolbar { display:flex; gap:8px; margin-bottom:22px; }
.toolbar input { flex:1 1 auto; min-width:0; }
.tool { flex:none; width:46px; height:46px; display:grid; place-items:center; background:var(--card); border:1px solid var(--rule); border-radius:10px; color:var(--ink); padding:0; }
.tool.solid { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.tool svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feedhead { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px; }
.feedhead h2 { font:400 19px/1.2 Georgia, "Times New Roman", serif; margin:0; }
.feedhead .today { font:italic 400 14px/1.3 Georgia, "Times New Roman", serif; color:var(--muted); margin-top:4px; }
.feedhead .status { font:italic 400 13px/1.3 Georgia, "Times New Roman", serif; color:var(--muted); margin:4px 0 0; text-align:right; }
a.obit.wall { display:flex; align-items:flex-start; gap:12px; padding:0 0 30px; }
.wall .body { flex:1; min-width:0; }
.wall .who { font:400 27px/1.15 Georgia, "Times New Roman", serif; letter-spacing:.005em; color:var(--ink); }
.wall .when { font-size:10.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:9px; }
.wall .detail { font-size:14px; color:var(--muted); margin-top:7px; }
.wall .from { font-size:14px; color:var(--muted); margin-top:1px; }
.wall .out { flex:none; width:24px; height:24px; margin-top:4px; fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.week { font:600 11px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:30px 0 26px; }
#rail { display:none; }

/* Wide screens: navigation down the left, feed in the middle, summary on the right. */
@media (min-width: 1100px) {
  body { padding-bottom:0; }
  .brand { position:fixed; left:0; top:0; width:250px; margin:0; padding:24px 16px 8px; z-index:6; }
  .brand h1 { font-size:20px; }
  .brand p { font-size:12px; }
  .tabs { top:110px; bottom:0; right:auto; width:250px; flex-direction:column; justify-content:flex-start; gap:4px;
    border-top:0; border-right:1px solid var(--rule); padding:12px; }
  .tabs button { flex:none; flex-direction:row; gap:14px; justify-content:flex-start; font-size:16px; min-height:50px; padding:10px 14px; border-radius:10px; }
  .tabs button:hover { background:var(--bg); }
  .tabs button[aria-current="page"] { background:var(--bg); }
  .tabs svg { width:26px; height:26px; }
  body::before { content:""; position:fixed; left:0; top:0; bottom:0; width:250px; background:var(--band); border-right:1px solid var(--rule); z-index:4; }
  /* The column is centered in the space left between the navigation and the summary. */
  body { --rail:0px; }
  body[data-tab="feed"] { --rail:360px; }
  main { max-width:none; margin:0 var(--rail) 0 250px; padding:28px max(32px, calc((100vw - 250px - var(--rail) - 580px) / 2)) 48px; }
  .chips { margin:0; padding:2px 0 12px; flex-wrap:wrap; }
  body[data-tab="feed"] #rail { display:block; position:fixed; top:0; right:0; bottom:0; width:360px; overflow-y:auto; padding:28px 28px 28px 8px; }
  .rail-head { font:600 15px/1.3 Georgia, "Times New Roman", serif; margin:0 0 10px; }
  .rail-row { padding:6px 0; font-size:14px; border-top:1px solid var(--rule); }
  .rail-row:first-of-type { border-top:0; }
  .stats { display:flex; gap:10px; text-align:center; }
  .stats > div { flex:1; }
  .stat { font:600 26px/1.1 Georgia, "Times New Roman", serif; color:var(--accent); }
  #rail .card { padding:16px; margin-bottom:12px; }
}
.wall .who b { font-weight:700; }
.toolbar { margin-bottom:18px; }
.toolbar input, .tool { height:42px; min-height:42px; }
.tool { width:42px; }
.tool svg { width:19px; height:19px; stroke-width:1.5; }
.chip { font-size:13.5px; padding:6px 12px; min-height:0; color:var(--muted); }
.chip[aria-pressed="true"] { background:transparent; color:var(--ink); border-color:var(--ink); }
.panel { border:1px solid var(--rule); border-radius:10px; margin:-8px 0 18px; padding:4px 14px 6px; }
.phead { font-size:10.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); padding:12px 0 6px; }
.prow { display:flex; align-items:center; border-top:1px solid var(--rule); }
.pick { flex:1; text-align:left; background:none; border:0; padding:12px 0; font:inherit; font-size:15px; color:var(--muted); }
.pick[aria-pressed="true"] { color:var(--ink); font-weight:600; }
.del { flex:none; width:40px; height:40px; display:grid; place-items:center; background:none; border:0; color:var(--muted); padding:0; }
.del svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.padd { background:none; border:0; border-top:1px solid var(--rule); width:100%; text-align:left; padding:12px 0 8px; font:inherit; font-size:14px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.feedhead h2 { font-size:22px; }
.feedhead { margin-bottom:22px; }
.none { font:italic 400 16px/1.5 Georgia, "Times New Roman", serif; color:var(--muted); margin:0 0 26px; }
.recent { display:flex; justify-content:space-between; align-items:center; width:100%; background:none; border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  padding:15px 0; margin:4px 0 0; font:italic 400 19px/1.2 Georgia, "Times New Roman", serif; color:var(--ink); text-align:left; }
.recent svg { width:20px; height:20px; fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.recent + .fine { margin-top:26px; }
.promise { margin-bottom:26px; }

/* Wide screens: brand and search across the top, navigation left, summary right; only the middle column scrolls. */
@media (min-width: 1100px) {
  html, body { height:100%; overflow:hidden; }
  body::before { top:68px; width:230px; }
  .brand { position:fixed; left:0; right:0; top:0; width:auto; max-width:none; height:68px; margin:0; padding:0 28px; background:var(--bg); border-bottom:1px solid var(--rule); z-index:6; }
  .brand img { height:40px; }
  .brand h1 { font-size:22px; }
  .brand p { font-size:13px; }
  .tabs { top:68px; width:230px; }
  main { position:fixed; top:68px; bottom:0; left:230px; right:var(--rail); max-width:none; margin:0; overflow-y:auto;
    padding:28px max(32px, calc((100vw - 230px - var(--rail) - 580px) / 2)) 48px; }
  /* The search row sits in the top bar; the areas list drops down beneath it. */
  .toolbar { position:fixed; top:13px; right:28px; width:420px; margin:0; z-index:7; }
  .panel { position:fixed; top:64px; right:28px; width:420px; margin:0; background:var(--bg); box-shadow:0 8px 24px rgba(71,74,76,.14); z-index:7; }
  /* The summary never scrolls: a card that does not fit whole wraps out of sight. */
  body[data-tab="feed"] #rail { top:68px; overflow:hidden; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; padding:28px 28px 16px 8px; }
  #rail .card { width:324px; flex:none; }
}
@media (min-width: 1100px) {
  .brand { z-index:4; }
  main { z-index:5; }
  body[data-tab="feed"] #rail { padding:28px 0 16px 8px; }
  #rail .card { margin-right:28px; }
}

/* Header and search row stay in place on every tab. */
#top { position:sticky; top:0; z-index:8; background:var(--bg); border-bottom:1px solid var(--rule); }
#bar { max-width:640px; margin:0 auto; padding:10px 16px 12px; }
.toolbar { margin:0; }
.panel { margin:10px 0 0; max-height:60vh; overflow-y:auto; }
@media (min-width: 1100px) {
  #top { position:fixed; left:0; right:0; top:0; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
  .brand { position:static; height:auto; padding:0; margin:0; border:0; }
  #bar { position:relative; margin:0; padding:0; max-width:none; }
  .toolbar { position:static; width:420px; }
  .panel { position:absolute; top:54px; right:0; width:420px; }
}
.credit { text-align:center; font-size:9px; color:#b9bbbb; margin:0; padding:4px 16px 22px; }
@media (min-width: 1100px) { .credit { position:fixed; left:0; bottom:0; width:230px; z-index:6; text-align:left; padding:0 26px 18px; line-height:1.5; } }

/* While checking for new obituaries: pulsing dots and a thin gold line that sweeps under the heading. */
.dots { display:inline-flex; gap:3px; margin-left:5px; vertical-align:2px; }
.dots i { width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.2; animation:dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.2s; }
.dots i:nth-child(3) { animation-delay:.4s; }
@keyframes dot { 0%, 80%, 100% { opacity:.2; } 40% { opacity:1; } }
.feedhead { position:relative; padding-bottom:14px; }
.feedhead::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rule); }
.feedhead.busy::before { content:""; position:absolute; left:0; bottom:0; height:1px; width:28%; background:var(--gold); z-index:1; animation:sweep 1.6s infinite ease-in-out; }
@keyframes sweep { 0% { left:0; width:0; } 50% { left:36%; width:28%; } 100% { left:100%; width:0; } }
@media (prefers-reduced-motion: reduce) { .dots i, .feedhead.busy::before { animation:none; opacity:1; } }
.wait { display:block; font-size:10.5px; line-height:1.35; margin-top:3px; max-width:190px; margin-left:auto; opacity:.85; }
@media (min-width: 1100px) {
  button.rail-row { width:100%; background:none; border:0; border-top:1px solid var(--rule); font:inherit; font-size:14px; color:inherit; text-align:left; padding:7px 0; cursor:pointer; }
  button.rail-row:first-of-type { border-top:0; }
  button.rail-row:hover span:first-child { text-decoration:underline; text-underline-offset:3px; }
}
/* Desktop scroll bar: a thin, pale thumb with no track. */
@media (min-width: 1100px) {
  main, .panel { scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
  main::-webkit-scrollbar, .panel::-webkit-scrollbar { width:8px; }
  main::-webkit-scrollbar-track, .panel::-webkit-scrollbar-track { background:transparent; }
  main::-webkit-scrollbar-thumb, .panel::-webkit-scrollbar-thumb { background:var(--rule); border-radius:8px; border:2px solid var(--bg); }
  main::-webkit-scrollbar-thumb:hover, .panel::-webkit-scrollbar-thumb:hover { background:#A0AEA2; }
}