/* Lotawana News mailing. Phone first: one column, big tap targets, a tab bar at the bottom. Wider screens get
   the top nav and multi-column grids. */
:root {
  /* LotawanaNews.com palette: navy, cream and lake teal; Playfair Display headings, Source Sans 3 text. */
  --navy: #1b2b4b; --teal: #00adee; --teal-pale: #e0f6ff;
  --bg: #faf8f2; --panel: #ffffff; --panel-2: #f5f2ea; --ink: #1e2a3a; --muted: #5f6a7a; --line: #ddd9d0; --line-2: #ece8de;
  --accent: #0a6f9e; --accent-ink: #ffffff; --accent-bg: #e0f6ff; --btn: #1b2b4b; --btn-ink: #ffffff; --heading: #1b2b4b;
  --warn: #8a5200; --warn-bg: #fff1d6; --bad: #a12a2a; --bad-bg: #fde8e6; --ok: #22663a; --ok-bg: #e3f3e7;
  --s-paper: #2f8a4f; --s-elsewhere: #00a0dc; --s-linked: #8a6fc2; --s-question: #d99a1e; --s-none: #c94040;
  --s-unknown: #9b3d6e; --s-public: #b3ada2;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 12px; --shadow: 0 1px 2px rgba(27, 43, 75, .06), 0 2px 10px rgba(27, 43, 75, .05);
  --tabbar-h: 0px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1726; --panel: #172238; --panel-2: #131d30; --ink: #e9eef5; --muted: #a3b1c4; --line: #2b3a56; --line-2: #22304a;
          --accent: #5ccfff; --accent-ink: #0b1626; --accent-bg: #133149; --btn: #33c0f5; --btn-ink: #0b1626; --heading: #f2f5fa;
          --teal-pale: #133149;
          --warn: #f0b45a; --warn-bg: #3a2c12; --bad: #f08a8a; --bad-bg: #3d1c1c; --ok: #7fd197; --ok-bg: #173022;
          --s-paper: #4fb26f; --s-elsewhere: #33c0f5; --s-linked: #a68ddc; --s-question: #e5ac3a; --s-none: #e06464;
          --s-unknown: #c46a9a; --s-public: #5e6878;
          --shadow: none; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
main { max-width: 1120px; margin: 0 auto; padding: 18px 16px calc(60px + var(--tabbar-h)); }
h1 { font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: 1.85rem; line-height: 1.15; margin: 6px 0 14px; }
h1::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--teal); margin-top: 10px; }
.hero h1::after, .blocknav h1::after, .section-head h1::after { display: none; }
h2 { font-family: var(--serif); font-weight: 700; color: var(--heading); font-size: 1.25rem; margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 0 0 6px; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }

/* ---------- header, nav, tab bar */
header.top { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
header.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; letter-spacing: -.005em; white-space: nowrap; }
.brand-tag { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--teal); border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 3px; }
.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav > a, .main-nav summary { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; padding: 7px 12px; border-radius: 8px; cursor: pointer; }
.main-nav > a:hover, .main-nav summary:hover { color: var(--accent); background: var(--teal-pale); }
.main-nav > a.on { color: var(--heading); background: var(--teal-pale); box-shadow: inset 0 -2px 0 var(--teal); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn-bg); color: var(--warn);
  font-size: .78rem; font-weight: 700; text-align: center; }
details.more { position: relative; }
details.more summary { list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " ▾"; font-size: .75rem; }
.more-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 6px; z-index: 40; }
.more-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.more-menu a:hover { background: var(--panel-2); }
header.top form.search { margin-left: auto; display: flex; gap: 6px; flex: 0 1 340px; }
.tabbar { display: none; }

@media (max-width: 760px) {
  :root { --tabbar-h: 64px; }
  header.top { padding: 8px 12px; gap: 8px; }
  .brand-text, .brand-tag { display: none; }
  .main-nav > a { display: none; }
  .main-nav { margin-left: auto; order: 2; }
  header.top form.search { order: 1; margin-left: 0; flex: 1; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .72rem; color: var(--muted); text-decoration: none; }
  .tabbar a.on { color: var(--accent); font-weight: 700; }
  .tabbar a.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar .dot { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--s-question); color: #1b1200; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
  main { padding: 14px 12px calc(40px + var(--tabbar-h)); }
  h1 { font-size: 1.35rem; }
}

/* ---------- cards, grids, tables */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--accent); }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.stat { font-family: var(--serif); color: var(--heading); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: .9rem; }
table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.section-head h2 { margin: 0; }

/* ---------- forms and buttons */
input, select, textarea { font: inherit; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { width: 100%; }
button, .btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--btn); background: var(--btn); color: var(--btn-ink);
  cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; }
button:hover, .btn:hover { filter: brightness(1.12); }
.btn.secondary, button.secondary { background: var(--panel); color: var(--accent); border-color: var(--line); }
.btn.secondary:hover, button.secondary:hover { border-color: var(--teal); filter: none; background: var(--teal-pale); }
.btn.danger, button.danger { border-color: var(--bad); background: var(--bad); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.form p { margin: 0 0 12px; }
.form label { display: block; font-weight: 600; margin-bottom: 4px; }
.form .helptext { display: block; color: var(--muted); font-size: .86rem; }
.errorlist { color: var(--bad); margin: 4px 0; padding-left: 18px; }
.msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; background: var(--ok-bg); color: var(--ok); }
.msg.error { background: var(--bad-bg); color: var(--bad); }
.msg.warning { background: var(--warn-bg); color: var(--warn); }
@media (max-width: 760px) { button, .btn { padding: 11px 16px; } input, select { padding: 11px 12px; font-size: 16px; } }

/* ---------- pills, chips, tags */
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-left: -2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { .chip.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); } }
.chip .n { color: var(--muted); font-size: .8rem; }
.chip.on .n { color: inherit; opacity: .75; }
.lotchip { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-size: .8rem;
  font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.role { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.role-owner, .role-co-owner { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.role-family { background: #efe9fb; color: #5b3fa0; border-color: transparent; }
.role-renter { background: #e4f1f8; color: #1f6488; border-color: transparent; }
.role-comped { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
@media (prefers-color-scheme: dark) { .role-family { background: #2b2340; color: #c3b0f0; } .role-renter { background: #16303d; color: #8ccbea; } }

/* status of a property */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--s-public)); flex: none; }
.st-paper { --st: var(--s-paper); } .st-elsewhere { --st: var(--s-elsewhere); } .st-linked { --st: var(--s-linked); }
.st-question { --st: var(--s-question); } .st-none { --st: var(--s-none); } .st-unknown { --st: var(--s-unknown); } .st-public { --st: var(--s-public); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 14px; color: var(--muted); }
.legend .st { font-weight: 500; color: var(--muted); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .85rem; }
.tag a { color: inherit; text-decoration: none; }
.tag form { display: inline; margin: 0; }
.tag-x { background: transparent; border: 0; color: inherit; padding: 0 6px; font-size: 1rem; line-height: 1; cursor: pointer; }
.tag-x:hover, .tag-x:focus-visible { color: var(--bad); }
.tag-add { display: inline-flex; gap: 4px; }
.tag-add input { padding: 4px 8px; width: 150px; font-size: .9rem; }
.tag-add button { padding: 4px 10px; font-size: .9rem; }
.tag-link { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .8rem; text-decoration: none; margin: 1px 0; }
.tag-filter { display: inline-flex; gap: 4px; }

/* ---------- key/value lists, addresses */
.addr { white-space: pre-line; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
@media (max-width: 520px) { dl.kv { grid-template-columns: 1fr; gap: 0; } dl.kv dt { margin-top: 8px; font-size: .85rem; } }
details.fold { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
details.fold > summary { padding: 12px 16px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Show"; color: var(--accent); font-weight: 500; font-size: .9rem; }
details.fold[open] > summary::after { content: "Hide"; }
details.fold > .fold-body { padding: 0 16px 14px; }

/* ---------- the lake: block overview */
.blocks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.blockcard { position: relative; display: block; padding: 12px 14px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.blockcard:hover { border-color: var(--accent); }
.blockcard .letter { font-family: var(--serif); color: var(--heading); font-size: 2rem; font-weight: 700; line-height: 1; }
.blockcard .sub { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.blockcard .flag { position: absolute; top: 10px; right: 10px; }
.bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line-2); margin-top: 10px; }
.bar span { display: block; height: 100%; }
.bar .b-paper { background: var(--s-paper); } .bar .b-elsewhere { background: var(--s-elsewhere); } .bar .b-linked { background: var(--s-linked); }
.bar .b-question { background: var(--s-question); } .bar .b-none { background: var(--s-none); } .bar .b-unknown { background: var(--s-unknown); }
.bar .b-public { background: var(--s-public); }
.summary-strip { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 4px 0 18px; }
.summary-strip a { display: block; padding: 12px 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); }
.summary-strip .num { font-family: var(--serif); color: var(--heading); font-size: 1.6rem; font-weight: 700; }
@media (max-width: 760px) { .blocks { grid-template-columns: repeat(3, 1fr); gap: 8px; } .blockcard { padding: 10px; } .blockcard .letter { font-size: 1.5rem; } }

/* ---------- the lake: one block, one row per property */
.blocknav { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.blocknav h1 { margin: 0; flex: 1; }
.blocknav .arrow { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); text-decoration: none; color: var(--ink); font-size: 1.2rem; }
.blocknav .arrow.off { opacity: .3; pointer-events: none; }
.props { display: flex; flex-direction: column; gap: 8px; }
.prop { display: grid; grid-template-columns: 92px 1fr auto; gap: 4px 16px; align-items: start; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 5px solid var(--st, var(--s-public)); border-radius: var(--radius); box-shadow: var(--shadow); }
.prop .lots { font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.prop .lots a { color: var(--ink); text-decoration: none; }
.prop .lots .more-lots { display: block; font-weight: 500; font-size: .8rem; color: var(--muted); }
.prop .kind { font-size: .78rem; color: var(--muted); font-weight: 500; }
.prop .who { min-width: 0; }
.prop .owner { font-weight: 600; }
.prop .owner a { color: var(--ink); text-decoration: none; }
.prop .papers { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.prop .papers li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: .92rem; }
.prop .papers .where { color: var(--muted); font-size: .84rem; }
.prop .q { margin-top: 6px; font-size: .86rem; color: var(--warn); }
.prop .side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.prop .open { font-size: .88rem; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
  .prop { grid-template-columns: 1fr auto; padding: 12px; }
  .prop .lots { grid-column: 1; }
  .prop .side { grid-column: 2; grid-row: 1; }
  .prop .who { grid-column: 1 / -1; }
}

/* ---------- paper list as cards on phones */
.paper-list { display: flex; flex-direction: column; gap: 8px; }
.paper { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); }
.paper .name { font-weight: 600; }
.paper .name a { color: var(--ink); text-decoration: none; }
.paper .name a:hover { color: var(--accent); }
.paper .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; }
.paper .num { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.filters { display: grid; gap: 8px; grid-template-columns: 1fr auto auto auto auto; align-items: center; margin: 6px 0 10px; }
.filters input[type=search] { width: 100%; }
@media (max-width: 760px) { .filters { grid-template-columns: 1fr 1fr; } .filters .q { grid-column: 1 / -1; } }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0; }

/* ---------- property page: the connection map */
.hero { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 4px 0 14px; }
.hero h1 { margin: 0; }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); }
.flow { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); align-items: stretch; margin-bottom: 14px; }
.flow > .card { margin: 0; position: relative; }
.flow h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.flow .item { padding: 8px 0; border-top: 1px solid var(--line-2); }
.flow .item:first-of-type { border-top: 0; padding-top: 0; }
.flow .src { font-size: .8rem; color: var(--muted); }
@media (min-width: 900px) {
  .flow > .card + .card::before { content: "→"; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1rem;
    background: var(--bg); width: 10px; text-align: center; }
}
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } }
.sales { list-style: none; margin: 0; padding: 0; }
.sales li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.sales li:first-child { border-top: 0; }
.question { background: var(--warn-bg); border-color: transparent; }
.question strong { color: var(--warn); }

/* ---------- connections (suggestions) */
.conn { position: relative; }
.conn .pick { position: absolute; top: 12px; right: 14px; }
.conn .pick input { width: 20px; height: 20px; }
.conn-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding-right: 30px; }
.reasons { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 16px; border-bottom: 1px solid var(--line); margin: 6px 0 12px; }
.tabs a { padding: 6px 0; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
@media (max-width: 640px) { .conn-sides { grid-template-columns: 1fr; } th.hide-sm, td.hide-sm { display: none; } }

/* ---------- quick search drop-down */
.qs-wrap { position: relative; flex: 1; }
.qs-wrap input { width: 100%; min-width: 0; border-radius: 999px; padding-left: 14px; background: var(--panel-2); }
.qs-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 300px; max-height: 70vh; overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.qs-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.qs-list li[aria-selected="true"] a, .qs-list a:hover { background: var(--bg); }
.qs-sub { color: var(--muted); font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) { .qs-list { min-width: 0; } }

.dup-row { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.dup-row input { margin-top: 4px; width: 18px; height: 18px; }

/* ---------- the lake map */
.mapwrap { position: relative; margin: -18px -16px calc(-60px - var(--tabbar-h)); height: calc(100vh - 57px); height: calc(100dvh - 57px); }
#map { position: absolute; inset: 0; background: #e8e4da; }
.mappanel { position: absolute; z-index: 500; top: 12px; left: 56px; width: min(420px, calc(100% - 120px)); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 10px 12px; }
.mappanel-head { display: flex; gap: 8px; }
.mapfind { flex: 1; }
.mapfind input { width: 100%; border-radius: 999px; }
.mapchip { cursor: pointer; padding: 4px 10px; font-size: .84rem; }
.mapchip input { margin: 0; width: 16px; height: 16px; }
.mapopts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mapopts select { padding: 6px 10px; }
.leaflet-tooltip.lotlabel { display: none; background: transparent; border: 0; box-shadow: none; color: #10161c; font-weight: 700; font-size: 11px;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; padding: 0; }
.leaflet-tooltip.lotlabel::before { display: none; }
.show-labels .leaflet-tooltip.lotlabel { display: block; }
.mappop { min-width: 200px; font: 15px/1.4 var(--sans); }
.mappop-h { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.mappop-papers { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--ink); }
.leaflet-popup-content a.btn { color: var(--accent-ink); }
@media (max-width: 760px) {
  .mapwrap { margin: -14px -12px calc(-40px - var(--tabbar-h)); height: calc(100vh - 57px - var(--tabbar-h)); height: calc(100dvh - 57px - var(--tabbar-h)); }
  .mappanel { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; }
  .leaflet-control-zoom { display: none; }
}

.tier { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); border: 1px dashed var(--line); white-space: nowrap; }
.tier-first { color: #00739e; border: 1px solid transparent; background: var(--teal-pale); }
@media (prefers-color-scheme: dark) { .tier-first { color: #8ddcff; } }
.mapmode { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.mapmode button { border: 0; border-radius: 0; padding: 5px 12px; background: var(--panel); color: var(--ink); font-size: .85rem; }
.mapmode button.on { background: var(--navy); color: #fff; }
.todo-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.todo-head a strong { color: var(--heading); }
.todo-q { font-size: 1.02rem; margin: 2px 0 6px; font-weight: 600; }
.todo details summary { cursor: pointer; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 7px 0; border-top: 1px solid var(--line-2); }
ul.plain li:first-child { border-top: 0; padding-top: 0; }
.years li { display: grid; grid-template-columns: 48px 1fr 70px 90px 60px; gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.ybar { display: block; height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.ybar span { display: block; height: 100%; background: var(--teal); }
.yp { text-align: right; font-weight: 600; }
@media (max-width: 520px) { .years li { grid-template-columns: 42px 1fr 60px 80px; } .years li > .muted { display: none; } }