/* Culture Atlas · the sibling's bones, a colder palette: stone, moss and brass instead of oil. */
:root{
  --ink:#22261f; --ink-soft:#5c6356; --line:#d8d5cb; --paper:#f4f2ec; --paper-2:#eceadf;
  --moss:#5a6b57; --brass:#b08d3f; --stone:#8b8577; --rust:#a3552f; --sky:#3d6a86;
  --dom-letters:#5a6b57; --dom-music:#7a5a8a; --dom-image:#a3552f; --dom-stage:#b08d3f;
  --dom-science:#3d6a86; --dom-power:#7c4a4a; --dom-faith:#6b6250; --dom-sport:#4a7c6b;
  --dom-trade:#8a7250; --dom-other:#9a958a; --dom-nobody:#c3bdb0;
  /* "Somebody, not named": a gap, not a kind of person (0.40). Darker and warmer than `nobody`, so a wall of
     plaques to people nobody could identify does not read as a wall of museums. */
  --dom-unnamed:#9c8f7c;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);display:flex;flex-direction:column;overflow:hidden}

#navbar{display:flex;align-items:center;gap:6px;background:#2f3a2e;color:#cfd6c8;padding:3px 10px;font-size:12px;flex:0 0 auto}
#navbar a{color:#e6ebe0;text-decoration:none}
#navbar a:hover{text-decoration:underline}
#navbar .nav-sep{opacity:.5}
#navbar .build{margin-left:auto;color:#8a9184;font-size:6.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

#bar{display:flex;align-items:center;gap:14px;padding:6px 10px;background:var(--paper-2);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.brand strong{display:block;font-size:15px;letter-spacing:.2px}
.brand small{display:block;color:var(--ink-soft);font-size:11px}
#bar-rail{display:contents}
.stats{margin-left:auto;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

#modes{display:flex;align-items:center;gap:10px;padding:5px 10px;background:var(--paper);
  border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
#modes-rail{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.view-btn,.chip.btn,#chrome-toggle{border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:3px 8px;font-size:12px;cursor:pointer;color:var(--ink)}
.view-btn.active{background:var(--moss);color:#fff;border-color:var(--moss)}
.chip.btn.active{background:var(--brass);color:#fff;border-color:var(--brass)}

/* a filter family: a label and its chips, boxed so the axes read as axes */
.fam{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:7px;
  padding:2px 5px;background:#fff;flex-wrap:wrap}
.fam-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--stone);margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:5px;
  padding:2px 6px;font-size:12px;cursor:pointer;background:#fff;user-select:none}
.chip input{margin:0}
.chip.on{background:var(--paper-2);border-color:var(--stone)}
/* CHASSIS §4: a chip that can never match must say why, not sit there dead */
.chip.dead{opacity:.42;cursor:not-allowed;text-decoration:line-through var(--stone)}
.chip .n{font-size:10px;color:var(--stone);font-variant-numeric:tabular-nums}

#filter-wrap{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:180px}
#filter{width:100%;padding:4px 24px 4px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff}
#filter-clear{position:absolute;right:4px;border:0;background:transparent;cursor:pointer;color:var(--stone)}
#filter-clear[hidden]{display:none!important}

#timeline{display:flex;align-items:center;gap:10px;padding:3px 12px;background:var(--paper-2);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.tl-cap{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--stone)}
.tl-range{position:relative;flex:1;height:20px}
.tl-track{position:absolute;top:9px;left:0;right:0;height:3px;background:var(--line);border-radius:2px}
.tl-fill{position:absolute;top:9px;height:3px;background:var(--moss);border-radius:2px}
.tl-range input{position:absolute;top:0;left:0;width:100%;margin:0;background:none;pointer-events:none;
  -webkit-appearance:none;appearance:none;height:20px}
.tl-range input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:13px;height:13px;
  border-radius:50%;background:#fff;border:2px solid var(--moss);cursor:pointer}
.tl-val{font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}

#main{flex:1 1 auto;display:flex;min-height:0}
#map{flex:1 1 auto;min-width:0}
#panel{flex:0 0 340px;border-left:1px solid var(--line);background:var(--paper);display:flex;
  flex-direction:column;min-height:0}
#panel[hidden]{display:none!important}
#panel-top{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line);
  background:var(--paper-2);font-size:12px}
#panel-head{font-weight:600}
#panel-head .ph-tail{font-weight:400;color:var(--ink-soft)}
#panel-view{margin-left:auto;display:flex;gap:4px;align-items:center}
.pvbtn{border:1px solid var(--line);background:#fff;border-radius:5px;padding:1px 6px;cursor:pointer;font-size:12px}
#pv-sort{border:1px solid var(--line);border-radius:5px;background:#fff;font-size:11px;padding:1px 3px}
#worklist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1 1 auto}
#worklist li{padding:4px 8px;border-bottom:1px solid #e7e4d9}
#worklist li.grp{background:var(--paper-2);position:sticky;top:0;z-index:2;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-size:12px}
#worklist li.grp .gname{font-weight:600}
#worklist li.grp .gsub{color:var(--ink-soft);font-size:11px;margin-left:auto;white-space:nowrap}
#worklist li.row{display:flex;align-items:baseline;gap:6px;cursor:pointer}
#worklist li.row:hover{background:#fff}
#worklist li.row .nm{font-weight:500}
#worklist li.row .yr{color:var(--stone);font-size:11px;font-variant-numeric:tabular-nums}
#worklist li.row .tags{margin-left:auto;display:flex;gap:3px;align-items:center}
#worklist li.empty{color:var(--ink-soft);padding:14px 10px;text-align:center}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;display:inline-block}
.badge{font-size:9px;padding:0 4px;border-radius:3px;border:1px solid var(--line);color:var(--ink-soft);
  background:#fff;white-space:nowrap}
.badge.acc-hours{border-color:var(--brass);color:#7a5f22}
.badge.acc-open-air{border-color:var(--moss);color:#3f4b3d}
.badge.acc-unknown{border-color:var(--line);color:var(--stone)}
.badge.plc{border-color:var(--rust);color:var(--rust)}

/* pins */
.pin{background:none;border:0}
.pin i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.4)}
.pin b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 10px/1 sans-serif;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.leaflet-popup-content{margin:8px 10px;font-size:13px;max-height:300px;overflow:auto}
.pop-h{font-weight:600;margin-bottom:2px}
.pop-sub{color:var(--ink-soft);font-size:11px;margin-bottom:6px}
.pop-list{list-style:none;margin:0;padding:0}
.pop-list li{padding:2px 0;border-bottom:1px solid #eee;display:flex;gap:6px;align-items:baseline}
.pop-list a{color:var(--sky)}

#table{flex:1 1 auto;overflow:auto;padding:0 10px 20px}
#table[hidden]{display:none!important}
#table-bar{position:sticky;top:0;background:var(--paper);padding:6px 0;border-bottom:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);z-index:3;display:flex;gap:8px;align-items:center}
#traces-table{border-collapse:collapse;width:100%;font-size:12.5px}
#traces-table th{position:sticky;top:31px;background:var(--paper-2);text-align:left;padding:4px 6px;
  border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;z-index:2}
#traces-table td{padding:3px 6px;border-bottom:1px solid #eeece2}
#traces-table tr:hover td{background:#fff}

#banner{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#2f3a2e;color:#fff;
  padding:8px 14px;border-radius:8px;font-size:13px;z-index:9999;box-shadow:0 3px 14px rgba(0,0,0,.3)}
#banner[hidden]{display:none!important}

body.chrome-off #bar,body.chrome-off #timeline{display:none}

/* ── a phone ─────────────────────────────────────────────────────────────────────────────────
 * Four rows of chips, a legend and a stats line do not fit in 375 px, and the first version simply
 * cut them off: only ACCESS was visible and nothing said the rest were there. Every rail scrolls
 * sideways now AND SAYS SO: a fading edge on the right while there is more, which disappears when
 * you reach the end. A hidden control is a control that does not exist.
 */
@media (max-width:720px){
  #main{flex-direction:column}
  #panel{flex:0 0 46%;border-left:0;border-top:1px solid var(--line)}
  .brand small{display:none}
  .brand strong{white-space:nowrap}

  #modes-rail,#axes,#legend{overflow-x:auto;flex-wrap:nowrap;width:100%;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #modes-rail::-webkit-scrollbar,#axes::-webkit-scrollbar,#legend::-webkit-scrollbar{display:none}
  /* the fade that says "there is more this way" */
  #modes,.scroller{position:relative}
  #modes-rail,#axes,#legend{
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent 100%)}
  #modes-rail.at-end,#axes.at-end,#legend.at-end{mask-image:none;-webkit-mask-image:none}
  #axes .fam,#legend .lg-i{flex:0 0 auto}

  /* the stats line explains what a pin IS; truncating it is the worst possible cut */
  .stats{white-space:normal;font-size:10.5px;line-height:1.25;margin-left:0;flex:1 1 100%;
    order:3;padding:2px 0 0}
  #bar{flex-wrap:wrap;row-gap:2px}
  .leaflet-control-attribution{font-size:8.5px;line-height:1.2;max-height:2.4em;overflow:hidden}
  #suggest{max-height:52vh}
}

/* ── the record card: same bones as the sibling's popup (card → hd + rows) ── */
.leaflet-popup-content{margin:0;max-height:340px}
.leaflet-popup-content-wrapper{border-radius:10px;padding:0;overflow:hidden}
.card{font-size:13px}
.card .hd{padding:8px 10px 6px;background:var(--paper-2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:2}
.card .hd .nm{font-weight:600;font-size:14px;line-height:1.25}
.card .hd .meta{color:var(--ink-soft);font-size:11px;margin-top:1px}
.card ul.people{list-style:none;margin:0;padding:0}
.card li.pop-person,.card li.pop-place{display:flex;gap:8px;padding:6px 10px;
  border-bottom:1px solid #eeece2;align-items:flex-start}
.card li.pop-place{cursor:pointer;align-items:center}
.card li.pop-place:hover{background:var(--paper-2)}
.card .th{width:48px;height:48px;flex:0 0 48px;object-fit:cover;border-radius:4px;
  background:var(--paper-2);border:1px solid var(--line)}
.card .th.ph{display:flex;align-items:center;justify-content:center;color:var(--stone);font-size:16px}
.card .wk{min-width:0;flex:1}
.card .wt{font-weight:600;line-height:1.25}
.card .wt .yr{font-weight:400;color:var(--stone);font-size:11px;font-variant-numeric:tabular-nums}
.card .by{color:var(--ink-soft);font-size:11.5px}
.card .fx{color:var(--stone);font-size:11px;margin-top:1px}
.card .lk{font-size:11px;margin-top:2px}
.card .lk a{color:var(--sky);text-decoration:none}
.card .lk a:hover{text-decoration:underline}
.card .pop-more{padding:6px 10px;color:var(--stone);font-size:11px}
.card li.pop-place .yr{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:12px}

/* ── the professions popover ── */
.who{position:relative}
/* fixed, not absolute: the filter rail scrolls sideways on a phone and would clip a popup inside it;
   app.js places it under its button when it opens */
#who-pop{position:fixed;z-index:1200;max-height:60vh;overflow:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.18);min-width:230px;margin-top:4px;
  max-height:60vh;overflow:auto}
#who-pop[hidden]{display:none!important}
#who-pop ul{list-style:none;margin:0;padding:2px 0}
#who-pop .pop-actions{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);
  background:var(--paper-2)}
#who-pop .pop-actions button{border:1px solid var(--line);background:#fff;border-radius:5px;
  padding:1px 8px;font-size:11px;cursor:pointer}
#who-pop li.prow{display:flex;align-items:center;gap:4px;padding:2px 8px}
#who-pop li.prow:hover{background:var(--paper-2)}
#who-pop li.prow label{display:flex;align-items:center;gap:6px;flex:1;cursor:pointer;font-size:12.5px}
#who-pop .sw{width:10px;height:10px;border-radius:2px;flex:0 0 10px}
#who-pop .n{margin-left:auto;color:var(--stone);font-size:10px;font-variant-numeric:tabular-nums}
#who-pop .only,#who-pop .also{border:1px solid var(--line);background:#fff;border-radius:4px;
  font-size:10px;padding:0 5px;cursor:pointer;color:var(--ink-soft)}
#who-pop .also{border-color:var(--moss);color:var(--moss)}

/* ── the person sheet: one person, everything they left ── */
#sheet{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:var(--paper);
  border-left:1px solid var(--line);box-shadow:-6px 0 26px rgba(0,0,0,.16);z-index:1500;
  display:flex;flex-direction:column;overflow:auto}
#sheet[hidden]{display:none!important}
#sheet-close{position:absolute;top:8px;right:10px;border:1px solid var(--line);background:#fff;
  border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1;color:var(--ink-soft)}
#sheet-body{padding:14px 14px 24px}
.sh-head{display:flex;gap:12px;align-items:flex-start;padding-right:30px}
.sh-por{width:88px;height:88px;flex:0 0 88px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);background:var(--paper-2)}
.sh-por.ph{display:flex;align-items:center;justify-content:center;color:var(--stone);font-size:26px}
.sh-name{font-size:18px;font-weight:600;line-height:1.15}
.sh-life{color:var(--stone);font-size:12px;font-variant-numeric:tabular-nums}
.sh-occ{color:var(--ink-soft);font-size:12.5px;margin-top:2px}
.sh-count{color:var(--moss);font-size:11.5px;margin-top:4px;font-weight:600}
.sh-links{font-size:11.5px;margin-top:3px}
.sh-links a{color:var(--sky);text-decoration:none}
.sh-links a:hover{text-decoration:underline}
.sh-actions{margin:12px 0 6px}
#sh-fit,#sh-fit-all{border:1px solid var(--moss);background:var(--moss);color:#fff;border-radius:6px;
  padding:4px 10px;font-size:12px;cursor:pointer}
.sh-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sh-trace{display:flex;gap:9px;padding:8px 2px;border-bottom:1px solid #eeece2;cursor:pointer;
  align-items:flex-start}
.sh-trace:hover{background:#fff}
.sh-trace.unpinnable{cursor:default;opacity:.72}
.sh-trace .ic{font-size:15px;width:20px;flex:0 0 20px;text-align:center;line-height:1.3}
.sh-trace .wt{font-weight:600;font-size:13px;line-height:1.25}
.sh-trace .fx{color:var(--stone);font-size:11.5px;margin-top:1px}
.sh-trace .fx.warn{color:var(--rust)}
/* A place list hosted by the sheet is a card in its own right and brings its own padding. */
#sheet[data-kind="place"] #sheet-body{padding:0}
/* The sheet does not scroll; its BODY does. That is the whole fix for a close button that scrolled
   away with the list: it sits on a box that never moves (the Atlas of Painting's sheet, ported). */
#sheet{overflow:hidden}
#sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#sheet-close{z-index:3}
#sheet[data-kind="place"] .card .hd{padding-right:46px}
/* rows worth reading */
.card li.pop-person{cursor:pointer}
.card li.pop-person:hover{background:var(--paper-2)}
.card .gp{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;color:var(--stone)}
.card .gth{width:40px;height:40px;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
img[data-file]{cursor:zoom-in}
/* a museum's own card: its photo, its kind, its links */
.card .mx{display:flex;gap:9px;align-items:flex-start;margin-top:7px}
.card .mx-img{width:96px;height:72px;flex:0 0 96px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
.card .mx-k{font-size:12px;color:var(--ink-soft);text-transform:capitalize}
.card .mx-f{font-size:11px;color:var(--stone);margin-top:1px}
.card .mx-f.approx{color:var(--rust)}
.card .mx .ins-q{margin:5px 0 3px}
/* what the plaque says */
.card .ins-q{margin:7px 0 2px;padding:6px 8px;background:#fff;border-left:3px solid var(--brass);
  font-size:12.5px;line-height:1.4;font-style:italic;cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.card .ins-q.open{display:block;-webkit-line-clamp:unset}
.card .ins-src{font-size:10.5px;color:var(--stone)}
.card .ins-src a{color:var(--sky);text-decoration:none}
/* a picture, large */
#lightbox{position:fixed;inset:0;z-index:3000;background:rgba(20,18,15,.93);display:flex;
  align-items:center;justify-content:center;padding:16px}
#lightbox[hidden]{display:none!important}
#lightbox figure{margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
#lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:4px;background:#222}
#lb-cap{color:#e9e4da;font-size:12px;text-align:center;line-height:1.4}
#lb-cap a{color:#9cc3ff}
#lb-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border-radius:50%;border:0;
  background:#fff;font-size:17px;cursor:pointer}
#sheet[data-kind="place"] #sheet-close{top:6px;right:8px;z-index:2}
.card .where{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.card .by.dim{color:var(--stone);font-size:11px}
.sh-trace .fx.wh{color:var(--ink-soft)}
.gwhere{display:block;font-weight:400;font-size:10.5px;color:var(--stone);line-height:1.2}
.card .pop-zoom{margin-top:6px;border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:4px 8px;font:inherit;font-size:11.5px;cursor:pointer;color:var(--ink-soft)}
.card .pop-zoom:hover{background:var(--paper-2)}
/* On a phone the sheet comes up from the BOTTOM and stops short of the top, so the map stays
   visible above it. A drawer that covers the whole screen is a page, and a page loses the one
   thing the list is about: where on the map you tapped. */
@media (max-width:720px){
  #sheet-close{width:36px;height:36px;border-radius:50%;font-size:16px;top:8px;right:10px}
  .card .th{width:56px;height:56px;flex:0 0 56px}
  #sheet{width:100%;max-width:100%;top:auto;left:0;right:0;bottom:0;max-height:68vh;
    border-left:0;border-top:1px solid var(--line);border-radius:12px 12px 0 0;
    box-shadow:0 -6px 26px rgba(0,0,0,.22)}
}

/* ── the axes get a row of their own, so a family reads as a family ── */
#axes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%;padding-top:2px}
#axes .fam{flex:0 0 auto}
#modes{flex-wrap:wrap}
#modes-rail{flex:1 1 100%}
.chip.btn.active{background:var(--brass);color:#fff;border-color:var(--brass)}
#reset{color:var(--ink-soft)}
@media (max-width:900px){
  #axes{overflow-x:auto;flex-wrap:nowrap}
  #axes .fam{flex:0 0 auto}
}

/* ── the search box's answers: people and places, not rows ── */
#suggest{position:absolute;top:100%;left:0;right:0;z-index:1400;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.18);
  list-style:none;margin:4px 0 0;padding:2px 0;max-height:62vh;overflow:auto}
#suggest[hidden]{display:none!important}
#suggest .sg-h{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--stone);
  padding:4px 10px 2px;background:var(--paper-2)}
#suggest li.sg-person,#suggest li.sg-place{display:flex;gap:8px;align-items:center;
  padding:4px 10px;cursor:pointer;border-bottom:1px solid #f0eee4}
#suggest li.sg-person:hover,#suggest li.sg-place:hover{background:var(--paper-2)}
#suggest .sg-th{width:34px;height:34px;flex:0 0 34px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);background:var(--paper-2)}
#suggest .sg-th.ph{display:flex;align-items:center;justify-content:center;color:var(--stone)}
#suggest .wt{font-weight:600;font-size:13px;line-height:1.2}
#suggest .wt .yr{font-weight:400;color:var(--stone);font-size:11px;font-variant-numeric:tabular-nums}
#suggest .by{color:var(--ink-soft);font-size:11px}

.sh-links .sh-sib{color:var(--rust);font-weight:600}

/* ── published opening hours: the string, the source, the date. Never "open". ── */
.card .hrs{margin-top:6px;padding:5px 7px;background:#fff;border:1px solid var(--brass);
  border-radius:6px}
.card .hrs-h{font-size:12px;line-height:1.35}
.card .hrs-src{font-size:10px;color:var(--stone);margin-top:2px}
.card .hrs-src a{color:var(--sky)}

/* ── only / also live beside the chip, not inside its label ── */
.chipwrap{display:inline-flex;align-items:center;gap:2px}
.fam .only,.fam .also{border:1px solid var(--line);background:#fff;border-radius:4px;
  font-size:9.5px;padding:0 4px;cursor:pointer;color:var(--ink-soft);line-height:1.6}
.fam .also{border-color:var(--moss);color:var(--moss)}
.fam .only:hover{border-color:var(--brass);color:#7a5f22}

/* ── the legend, which is also the colour-by switch ── */
#legend{display:flex;align-items:center;gap:5px;flex-wrap:wrap;width:100%;margin-top:2px}
#legend .lg-by{border:1px solid var(--line);background:#fff;border-radius:5px;padding:1px 7px;
  font-size:11px;cursor:pointer;color:var(--ink)}
#legend .lg-by.on{background:var(--moss);color:#fff;border-color:var(--moss)}
#legend .lg-keys{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:4px}
#legend .lg-i{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-soft)}
#legend .lg-sw{width:9px;height:9px;border-radius:50%;display:inline-block}
#legend .lg-mk{font-size:11px;color:var(--ink);width:9px;text-align:center}

/* a pin holding one thing says what it is */
/* an emoji mark needs a little more room than a glyph did, and no white fill */
.pin b.mk{font-size:11px;font-weight:400;line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))}
/* the shapes (app.js F_APPROX, F_SAINT): an area is larger, see-through and dashed; a saint wears a halo */
:root{--area:#b0412e;--halo:#e3b23c}
.pin.area i{border:2px dashed var(--area);opacity:.72;box-shadow:none}
.pin.halo i{box-shadow:0 0 0 2px var(--halo),0 0 7px 3px rgba(227,178,60,.75)}
.pin.area.halo i{box-shadow:0 0 0 2px var(--halo)}
.lg-pin{display:inline-block;width:12px;height:12px;border-radius:50%;background:#8a8478;
  border:2px solid #fff;margin-right:4px;vertical-align:-2px}
.lg-pin.halo{box-shadow:0 0 0 2px var(--halo),0 0 5px 2px rgba(227,178,60,.7)}
.lg-pin.area{border:2px dashed var(--area);opacity:.75;width:14px;height:14px}
.lg-shapes{margin-left:4px}
.where.approx,.fx.approx{color:var(--area)}
.sh-halo{font-size:10.5px;font-weight:500;color:#8a6a12;background:#fbf1d6;border:1px solid var(--halo);
  border-radius:9px;padding:0 6px;vertical-align:2px;white-space:nowrap}

/* who the atlas is currently narrowed to: always visible, always dismissable */
#personchip{display:inline-flex;align-items:center;gap:5px;background:var(--moss);color:#fff;
  border-radius:6px;padding:2px 4px 2px 8px;font-size:11.5px}
#personchip[hidden]{display:none!important}
#personchip button{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:4px;
  width:17px;height:17px;cursor:pointer;line-height:1;font-size:11px}

/* ── the chip IS the button ─────────────────────────────────────────────────────────────────── */
.chipwrap{display:inline-flex;align-items:stretch;gap:0}
button.chip{border:1px solid var(--line);background:#fff;border-radius:6px 0 0 6px;border-right:0;
  padding:3px 8px;font-size:12.5px;cursor:pointer;color:var(--ink-soft);display:inline-flex;
  align-items:center;gap:5px;line-height:1.35}
button.chip.on{background:var(--paper-2);border-color:var(--stone);color:var(--ink);font-weight:600}
button.chip.sole{background:var(--moss);border-color:var(--moss);color:#fff}
button.chip.sole .n{color:rgba(255,255,255,.75)}
button.chip:hover{border-color:var(--brass)}
.chip.dead{border-radius:6px;opacity:.42;cursor:not-allowed;text-decoration:line-through var(--stone);
  padding:3px 8px;font-size:12.5px;border:1px solid var(--line);display:inline-flex;align-items:center}
.plus{border:1px solid var(--line);background:#fff;border-radius:0 6px 6px 0;cursor:pointer;
  color:var(--stone);font-size:12px;width:19px;line-height:1;padding:0}
.plus.on{background:var(--paper-2);border-color:var(--stone)}
.plus:hover{color:var(--ink);border-color:var(--brass)}

/* the primary row is bigger, because it is the one that decides the rest */
.fam.primary button.chip{font-size:13.5px;padding:5px 10px}
.fam.primary .fam-lbl{font-weight:600;color:var(--ink-soft)}
.fam[hidden]{display:none!important}

/* ── the drawer: what is real but rarely asked ── */
#more{width:100%;margin-top:2px}
#more summary{cursor:pointer;font-size:11px;color:var(--stone);list-style:none;
  display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:5px;background:#fff}
#more summary::-webkit-details-marker{display:none}
#more[open] summary{background:var(--paper-2)}
.more-body{display:flex;flex-direction:column;gap:4px;padding-top:4px}

/* ── the fold control ── */
#fold{display:none;border:1px solid var(--line);background:#fff;border-radius:6px;
  padding:3px 9px;font-size:12px;cursor:pointer;color:var(--ink);white-space:nowrap}
#fold b{background:var(--brass);color:#fff;border-radius:8px;padding:0 5px;font-size:10px;
  margin-left:3px}
body.folded #modes,body.folded #axes,body.folded #more,body.folded #timeline{display:none}

/* ── a phone: the map is the point, so it gets the screen ────────────────────────────────────
 * The controls fold away behind one button (which keeps saying how many filters are still on,
 * because a hidden control that is silently filtering is worse than no control). When they are
 * open, the chips STRETCH to fill the row instead of leaving a field of grey beside them: the
 * whole width is tappable, which on a phone is the only size that matters.
 */
@media (max-width:720px){
  #fold{display:inline-block;margin-left:auto;order:2}
  #bar{padding:4px 8px;gap:8px}
  .brand{gap:6px}
  .brand strong{font-size:14px}
  .brand .mark{width:20px;height:20px}
  .stats{order:4}
  #who{order:3;flex:0 0 auto}

  /* chips fill the row: no scrolling, no dead space, everything reachable with a thumb */
  #axes{flex-direction:column;align-items:stretch;gap:3px;overflow:visible;
    mask-image:none;-webkit-mask-image:none}
  #axes .fam{display:flex;flex-wrap:wrap;gap:3px;width:100%;padding:3px 4px}
  #axes .fam-lbl{flex:0 0 100%;margin:0 0 1px}
  #axes .chipwrap{flex:1 1 30%;min-width:0}
  #axes button.chip{flex:1 1 auto;min-width:0;justify-content:center;padding:5px 4px;
    border-radius:6px 0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #axes .fam.primary button.chip{font-size:12.5px;padding:6px 4px}
  #axes .chip .n{font-size:9.5px}
  .plus{width:22px}

  #modes-rail{overflow-x:auto;flex-wrap:nowrap;width:100%;align-items:center}
  #view-tabs{display:inline-flex;gap:3px;flex:0 0 auto}
  #view-tabs .view-btn{padding:4px 7px;font-size:11.5px;white-space:nowrap}
  #panel{flex:0 0 38%}
  #axes .chip .n{opacity:.6}
  .leaflet-control-attribution{max-height:1.4em}
}

/* ── the glossary ── */
#gloss-wrap{margin-top:2px}
#gloss-wrap summary{cursor:pointer;font-size:11px;color:var(--sky);list-style:none;
  display:inline-block;padding:1px 0}
#gloss-wrap summary::-webkit-details-marker{display:none}
#glossary{max-width:720px;padding:4px 0 6px}
#glossary h4{margin:8px 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--stone);font-weight:600}
#glossary ul{list-style:none;margin:0;padding:0}
#glossary li{font-size:11.5px;line-height:1.4;color:var(--ink-soft);padding:1px 0}
#glossary li b{color:var(--ink);font-weight:600}

/* the atlas explaining whatever you just isolated, right under the row that did it */
/* the explanation gets the whole width of its row, and a rule to sit under */
.fam-note{flex:1 1 100%;width:100%;font-size:11px;line-height:1.45;color:var(--ink-soft);
  padding:4px 2px 2px;margin-top:2px;border-top:1px dotted var(--line)}
@media (max-width:720px){ .fam-note{font-size:10.5px} }

/* ── Where I am, beside the title ── */
#bar #locate{white-space:nowrap}
@media (max-width:720px){ #bar #locate{order:1;padding:3px 8px;font-size:12.5px} }

/* ── the list's size is the reader's: drag the grip ──────────────────────────────────────────────
   Beside the map on a wide screen (drag sideways), under it on a phone (drag up or down). */
#panel{position:relative}
#panel-grip{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:500;touch-action:none}
#panel-grip:hover,#panel-grip.dragging{background:linear-gradient(90deg,transparent 3px,var(--brass) 3px,var(--brass) 5px,transparent 5px)}
@media (max-width:720px){
  #panel-grip{position:static;width:auto;height:18px;cursor:row-resize;flex:0 0 18px;
    display:flex;align-items:center;justify-content:center;background:var(--paper-2);border-bottom:1px solid var(--line)}
  #panel-grip::before{content:"";width:44px;height:5px;border-radius:3px;background:#c9c2b4}
  #panel-grip:hover,#panel-grip.dragging{background:var(--paper-2)}
  #panel-grip.dragging::before{background:var(--brass)}
}
body.dragging-panel{user-select:none;-webkit-user-select:none}

/* ── the filters, open on a phone: everything at a glance, and an obvious way out ─────────────
   The first row used to scroll sideways, which works well once you know it is there, and a reader
   who does not know simply never finds the second half. Open, it wraps instead: the fold already
   hides it all when closed, so the height costs the map nothing. */
#fold-done{display:none}
@media (max-width:720px){
  body:not(.folded) #modes-rail{flex-wrap:wrap;overflow:visible;row-gap:6px;
    mask-image:none;-webkit-mask-image:none}
  body:not(.folded) #legend{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
  body:not(.folded) #fold-done{display:block;width:calc(100% - 16px);margin:4px 8px 8px;padding:10px;
    border:0;border-radius:8px;background:var(--moss);color:#fff;font:inherit;font-size:14px;
    font-weight:600;cursor:pointer}
  body:not(.folded) #fold{background:var(--ink);color:#fff;border-color:var(--ink)}

  /* the grip: a real target for a thumb, and a tap that changes size */
  #panel-grip{flex:0 0 26px;height:26px;position:relative}
  #panel-grip::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-6px}
  #panel-grip::before{width:52px;height:6px}
}

/* ── wide screens: the person card fills the list panel (D26) ─────────────────────────────────── */
#sheet-back{display:none}
#sheet.in-panel{position:absolute;inset:0;width:auto;max-width:none;z-index:6;box-shadow:none;border-left:0}
#sheet.in-panel #sheet-close{display:none}
#sheet.in-panel #sheet-back{display:block;flex:0 0 auto;text-align:left;border:0;border-bottom:1px solid var(--line);
  background:var(--paper-2);padding:7px 10px;font:inherit;font-size:12.5px;color:var(--sky);cursor:pointer}
#sheet.in-panel #sheet-back:hover{background:#fff}
#sheet.in-panel .sh-head{padding-right:0}
.sh-trace.on{background:#fff;box-shadow:inset 3px 0 0 var(--brass)}
#panel-back{border:0;border-bottom:1px solid var(--line);background:var(--paper-2);text-align:left;
  padding:6px 10px;font:inherit;font-size:12.5px;color:var(--sky);cursor:pointer}
#panel-back[hidden]{display:none!important}
/* a pin tapped: its place in the list lights up, and its card opens the group */
#worklist li.grp{transition:background-color .6s}
#worklist li.grp.grp-flash{background:#f3e3b0}
#worklist li.grp-card{position:relative;background:#fff;padding:8px 10px;border-bottom:1px solid var(--line)}
#worklist li.grp-card .hd{padding-right:24px}
#worklist li.grp-card .nm{font-weight:600}
.grp-card-x{position:absolute;top:6px;right:6px;border:1px solid var(--line);background:#fff;border-radius:6px;
  width:22px;height:22px;font-size:11px;line-height:1;cursor:pointer;color:var(--ink-soft)}

/* the group header above already names the place and its town */
#worklist li.grp-card .nm,#worklist li.grp-card .where:not(.approx){display:none}
/* a person's card in sections: their life, their work, how they are remembered */
.sh-sec{margin-top:12px}
.sh-sec-h{display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--ink);padding-bottom:3px}
.sh-sec[data-sec="remembered"] .sh-sec-h{border-bottom-color:var(--stone)}
.sh-sec-t{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.sh-sec-n{font-size:11px;color:var(--stone);background:var(--paper-2);border-radius:9px;padding:0 6px}
.sh-sec-fit{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:6px;padding:2px 8px;
  font:inherit;font-size:11.5px;cursor:pointer;color:var(--ink-soft)}
.sh-sec-fit:hover{background:var(--paper-2)}
.sh-sec-note{font-size:11px;color:var(--stone);margin:3px 0 2px}
.sh-sec .sh-list{border-top:0}
/* ── what the map is narrowed to, and the way out (0.27) ── */
.modebar{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 110px);background:rgba(34,30,24,.92);color:#fff;
  border-radius:20px;padding:5px 6px 5px 14px;font-size:12.5px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.modebar[hidden]{display:none!important}
.modebar b{font-weight:700}
.modebar button{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:14px;
  padding:3px 10px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.modebar button:hover{background:rgba(255,255,255,.12)}
.modebar .mb-x{background:#fff;color:#221e18;border-color:#fff;font-weight:600}
.modebar .mb-x:hover{background:#f3e3b0}
@media (max-width:720px){ .modebar{top:auto;bottom:10px;font-size:12px;width:max-content;max-width:calc(100% - 20px);flex-wrap:wrap;border-radius:14px;padding:5px 6px 5px 12px} .modebar .mb-t{flex:1 1 100%;text-align:center} }
#sh-contemp{border:1px solid var(--line);background:#fff;color:var(--ink-soft);border-radius:6px;padding:4px 10px;
  font-size:12px;cursor:pointer;margin-left:6px}
.sh-sum{font-size:12.5px;line-height:1.45;color:var(--ink);margin-top:6px}
.sh-sum:empty{display:none}
.sh-sum-src{font-size:11px;color:var(--stone);white-space:nowrap}
/* people they knew: a circle, lines that light up, and the names as buttons */
.sh-knew{margin-top:12px}
.kn-svg{width:100%;height:auto;display:block;margin:4px 0 2px}
.kn-l{stroke:#c9c2b2;stroke-width:1.2}
.kn-l.lit{stroke-width:3}
.kn-me{fill:var(--ink)}
.kn-n{cursor:pointer}
.kn-n circle{fill:#fff;stroke-width:2}
.kn-n text{font-size:9.5px;fill:var(--ink)}
.kn-n.lit text{font-weight:700}
.kn-n.lit circle{r:7}
.g-love.kn-l.lit,.g-love circle{stroke:#b0412e}
.g-family.kn-l.lit,.g-family circle{stroke:#8a6a12}
.g-learning.kn-l.lit,.g-learning circle{stroke:#3d6a86}
.g-work.kn-l.lit,.g-work circle{stroke:#5f8f4e}
.g-other.kn-l.lit,.g-other circle{stroke:#8a8478}
.kn-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.kn-c{border:1px solid var(--line);background:#fff;border-radius:12px;padding:2px 8px;font:inherit;font-size:11.5px;cursor:pointer}
.kn-c .kn-r{color:var(--stone);font-size:10.5px}
.kn-c.lit,.kn-c:hover{background:#f3e3b0}
/* streets and squares named after them */
.sh-streets{margin-top:12px}
.st-list{list-style:none;margin:4px 0 0;padding:0;font-size:12.5px}
.st-list li[data-i]{border-bottom:1px solid var(--line);padding:4px 0}
.st-n{display:block}
.st-w{display:block;font-size:11px;color:var(--stone)}
.st-list li{padding:2px 0;cursor:pointer;break-inside:avoid;color:var(--ink)}
.st-list li:hover{color:var(--sky)}
.st-list .st-more{color:var(--stone);cursor:default}
.st-pin{background:#6b5ca5;border:2px solid #fff;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.st-pin.sq{background:#a5625c;border-radius:1px}
/* ── top people ── */
#toppanel{flex:1 1 auto;overflow:auto;padding:0 12px 24px;background:var(--paper)}
#toppanel[hidden]{display:none!important}
#tp-bar{position:sticky;top:0;z-index:3;background:var(--paper);display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
#tp-bar .tp-ns button{border:1px solid var(--line);background:#fff;padding:3px 9px;font:inherit;font-size:12px;cursor:pointer}
#tp-bar .tp-ns button:first-child{border-radius:6px 0 0 6px}
#tp-bar .tp-ns button:last-child{border-radius:0 6px 6px 0}
#tp-bar .tp-ns button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
#tp-bar select,#tp-bar input{font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid var(--line);border-radius:6px}
#tp-body{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;margin-top:10px}
@media (max-width:820px){ #tp-body{grid-template-columns:minmax(0,1fr)} }
#tp-how h3,#tp-countries h3{font-size:13px;margin:4px 0 6px;text-transform:uppercase;letter-spacing:.04em}
#tp-how p{font-size:12.5px;line-height:1.5;margin:0 0 8px;color:var(--ink)}
#tp-how details{font-size:12px;margin-bottom:12px}
.tp-adj{border-collapse:collapse;margin-top:6px;font-size:11.5px}
.tp-adj td,.tp-adj th{padding:2px 6px;border-bottom:1px solid #e7e4d9;text-align:left}
.tp-bar-row{display:grid;grid-template-columns:120px 1fr 40px;gap:6px;align-items:center;font-size:12px;margin:2px 0}
.tp-bb{background:#ece8dc;height:10px;border-radius:5px;overflow:hidden}
.tp-bb i{display:block;height:100%;background:var(--brass)}
.tp-bn{text-align:right;font-variant-numeric:tabular-nums}
.tp-table{border-collapse:collapse;width:100%;font-size:12.5px}
.tp-table th{text-align:left;font-size:11px;color:var(--stone);border-bottom:2px solid var(--ink);padding:4px 6px;position:sticky;top:42px;background:var(--paper)}
.tp-table td{padding:4px 6px;border-bottom:1px solid #e7e4d9}
.tp-table tr[data-qid]{cursor:pointer}
.tp-table tr[data-qid]:hover{background:#fff}
.tp-pos,.tp-num{font-variant-numeric:tabular-nums;color:var(--stone)}
.tp-name{font-weight:600}
.tp-more{font-size:12px;color:var(--stone)}
.tp-note{font-size:12px;color:var(--stone);margin:6px 0 10px}
.tp-tabs button{border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--stone);cursor:pointer;padding:2px 8px 2px 0}
.tp-tabs button.on{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#tp-streets[hidden],#tp-body[hidden]{display:none!important}
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:820px){ .st-grid{grid-template-columns:minmax(0,1fr)} }
.st-grid h3{font-size:13px;margin:12px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.st-grid .tp-bar-row{grid-template-columns:150px 1fr 56px auto}
.st-who{font-size:11px;color:var(--stone);white-space:nowrap}
.st-p{cursor:pointer}
.st-p:hover .tp-bl{color:var(--sky)}

/* top people on a phone: the panel takes the screen, the table fits it */
@media (max-width:720px){
  #toppanel{min-height:calc(100dvh - 120px)}
  #tp-list{overflow-x:auto}
  .tp-table th:nth-child(3),.tp-table td:nth-child(3),.tp-table th:nth-child(6),.tp-table td:nth-child(6){display:none}
  .tp-table th{top:0}
  #tp-bar{position:static}
  .tp-bar-row,.st-grid .tp-bar-row{grid-template-columns:110px 1fr 48px}
  .st-who{display:none}
}
#tp-map{display:none}
@media (max-width:720px){
  #tp-map{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 9px;font:inherit;font-size:12.5px}
  #tp-bar{gap:6px}
  #tp-country,#tp-q{flex:1 1 40%;min-width:0}
  /* the list first, the country bars after it */
  #tp-body{display:flex;flex-direction:column;gap:12px}
  #tp-side{display:contents}
  #tp-how{order:0} #tp-list{order:1} #tp-countries{order:2}
}
/* on a computer, folded still shows the views and the best-known dial: one row above the map */
@media (min-width:721px){ body.folded #modes{display:flex} }
@media (min-width:721px){
  #fold{display:inline-block;padding:3px 10px;font:inherit;font-size:12.5px;cursor:pointer}
  body:not(.folded) #fold{background:var(--ink);color:#fff;border-color:var(--ink)}
}
/* a place with one person is one entry: the person, then what and where (0.29.8) */
#worklist li.row.single{flex-wrap:wrap;row-gap:0}
#worklist li.row.single .sub{flex-basis:100%;padding-left:14px;font-size:11px;color:var(--stone);line-height:1.3}

/* ── the list, 0.30: one system, lighter (who on the first line, where under it in grey; no boxes) ── */
#worklist li{padding:7px 12px;border-bottom:1px solid #ece8de}
#worklist li.row{display:grid;grid-template-columns:10px minmax(0,auto) 1fr;column-gap:8px;align-items:baseline}
#worklist li.row .dot{align-self:center;width:8px;height:8px}
#worklist li.row .nm{font-weight:500;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#worklist li.row .yr{font-size:11.5px;color:var(--stone);white-space:nowrap}
#worklist li.row .tags{display:none}
#worklist li.row .sub{grid-column:2 / 4;font-size:11.5px;color:var(--stone);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#worklist li.row.single .nm{font-weight:400}
/* a place, and the people in it */
#worklist li.grp{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:9px 12px 8px;
  background:var(--paper-2);border-bottom:1px solid #e2ddd0;border-top:6px solid var(--paper);cursor:pointer;font-size:13px}
#worklist li.grp .g-ic{font-size:16px;width:20px;text-align:center;flex:0 0 auto}
#worklist li.grp .g-t{flex:1 1 auto;min-width:0}
#worklist li.grp .gname{display:block;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#worklist li.grp .gwhere{display:block;font-size:11.5px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#worklist li.grp .g-n{flex:0 0 auto;font-size:11.5px;color:var(--ink-soft);background:#fff;border-radius:10px;padding:1px 8px}
#worklist li.grp .g-chev{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
#worklist li.grp .g-chev::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(-45deg);transition:transform .15s}
#worklist li.grp.open .g-chev::before{transform:rotate(45deg) translate(-2px,-2px)}
#worklist li.grp.foldable:hover .g-chev{background:#fff}
#worklist li.row.in-grp{padding:6px 12px 6px 42px;border-bottom:none;position:relative;grid-template-columns:10px minmax(0,auto) auto 1fr}
#worklist li.row.in-grp::before{content:"";position:absolute;left:21px;top:0;bottom:0;border-left:2px solid #e2ddd0}
#worklist li.row.in-grp .vb{justify-self:end;font-size:11px;color:var(--stone)}
#worklist li.row:hover,#worklist li.row:active{background:#fff}
@media (max-width:720px){
  #worklist li{padding:9px 14px}
  #worklist li.row .nm{font-size:15px}
  #worklist li.row .sub,#worklist li.grp .gwhere{font-size:12.5px}
  #worklist li.grp .gname{font-size:15px}
  #worklist li.row.in-grp{padding-left:44px}
}
/* lighter headings: a place is a title, not a band */
#worklist li.grp{background:var(--paper);border-top:none;border-bottom:none;padding:10px 12px 2px}
#worklist li.grp + li.row.in-grp{padding-top:3px}
#worklist li.row.in-grp{padding-bottom:9px}
#worklist li.row.in-grp:has(+ li.grp),#worklist li.row.in-grp:last-child{border-bottom:1px solid #ece8de}
#worklist li.row.in-grp::before{top:0;bottom:6px}
#worklist li.grp.foldable:not(.open){border-bottom:1px solid #ece8de;padding-bottom:9px}
@media (max-width:720px){
  #worklist li{padding:6px 14px}
  #worklist li.row .nm{font-size:14.5px}
  #worklist li.row .sub{font-size:12px;line-height:1.3}
  #worklist li.grp{padding:9px 14px 1px}
  #worklist li.row.in-grp{padding:4px 14px 7px 44px}
}
/* sharing (0.31): a link is the whole feature; the button is small and says so once */
.ic-share{width:12px;height:12px;vertical-align:-1px;margin-right:4px;fill:currentColor;stroke:currentColor}
a.sh-share{color:var(--ink-soft);text-decoration:none;white-space:nowrap}
a.sh-share:hover{color:var(--sky);text-decoration:underline}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;
  padding:8px 14px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:2000}
#toast.on{opacity:.96;transform:translateX(-50%) translateY(0)}
#share-view{margin-left:2px}
@media (max-width:720px){ #share-view{padding:3px 8px} }

/* ── the card, 0.32: a bigger face, quieter buttons, tighter lines ── */
.sh-por{width:88px;height:88px;flex:0 0 88px}
.sh-name{font-size:19.5px;letter-spacing:-.01em}
.sh-life{font-size:12.5px}
.sh-occ{font-size:13px;margin-top:3px}
.sh-sum{font-size:13px;line-height:1.45;margin-top:5px}
.sh-count{color:var(--ink-soft);font-weight:500}
.sh-links{margin-top:5px;font-size:12px}
#sh-fit-all,#sh-contemp{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
  padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
#sh-fit-all:hover,#sh-contemp:hover{background:var(--paper-2)}
.sh-sec-h{border-bottom-width:1px;padding-bottom:4px}
.sh-sec-t{font-size:12px;letter-spacing:.06em;color:var(--ink)}
.sh-sec-fit{border-radius:999px;font-size:11.5px;color:var(--ink-soft)}
.sh-sec-note{font-size:11.5px;margin:4px 0 2px;font-style:italic}
.sh-trace{padding:9px 2px}
.sh-trace .wt{font-size:13.5px;font-weight:600}
.sh-trace .fx{font-size:12px;margin-top:2px}
@media (max-width:720px){
  .sh-por{width:84px;height:84px;flex:0 0 84px}
  .sh-name{font-size:19px}
  .sh-sum{font-size:13.5px}
  .sh-trace .wt{font-size:15px}
  .sh-trace .fx{font-size:12.5px}
}
#share-view .ic-share{margin-right:5px}
@media (max-width:720px){ #share-view .lbl{display:none} #share-view .ic-share{margin-right:0;width:14px;height:14px} }
.sh-list .sh-more{list-style:none;color:var(--stone);font-size:12px;padding:8px 2px;font-style:italic}
/* 0.35: on a phone the search stays in sight with the filters folded (Víctor: "¿no deja search?") */
@media (max-width:720px){
  body.folded #modes{display:block;padding:4px 8px 6px}
  body.folded #modes > :not(#filter-wrap){display:none}
  body.folded #filter-wrap{display:block;width:100%}
  body.folded #filter{width:100%;font-size:16px}
}
/* 0.35: the close button sat under the sticky card header (both z-index 2, the header later in the page), so on a
   phone a place card could not be closed with it. Always above. */
#sheet-close,#sheet[data-kind="place"] #sheet-close{z-index:6}

/* ── the place card, 0.36 ── */
.pc{padding:16px 16px 28px}
#sheet .pc .sh-name{padding-right:40px}
.pc-kind{color:var(--ink-soft);font-size:13px;margin-top:3px}
.pc .sh-occ{margin-top:6px;color:var(--ink-soft);font-style:italic}
.pc-img{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px;margin:10px 0 4px}
.pc .sh-sum{margin-top:8px}
.pc-facts{margin:8px 0 4px;color:var(--ink-soft)}
.pc .mx{margin:10px 0 4px}
.pc .mx .mx-img{width:100%;max-height:240px;object-fit:cover;border-radius:8px}
.pc .sh-sec{margin-top:16px}
.pc-list{list-style:none;margin:6px 0 0;padding:0}
.pc-p{display:flex;gap:10px;align-items:center;padding:7px 2px;border-bottom:1px solid #eeece2;cursor:pointer}
.pc-p:hover{background:#fff}
.pc-th{width:38px;height:38px;flex:0 0 38px;border-radius:50%;object-fit:cover;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--stone)}
.pc-n{font-weight:600;font-size:13.5px;line-height:1.25}
.pc-n .yr{font-weight:400;color:var(--stone);font-size:12px}
.pc-o{font-size:12px;color:var(--ink-soft)}
@media (max-width:720px){ .pc-n{font-size:15px} .pc-o{font-size:12.5px} .pc-th{width:42px;height:42px;flex-basis:42px} }
.pc-photo .pc-img{margin:0 0 12px;max-height:240px}
#sheet .pc .pc-photo:not(:empty) + .sh-name{padding-right:0}
.pc .pc-facts a{color:var(--sky);text-decoration:none}
.pc .ins-q{margin:10px 0 0}
@media (max-width:720px){ .pc-photo .pc-img{max-height:190px} }

/* Share, in the two views that had no way to hand somebody what was on screen (0.37.1). The same button in both,
   and the same one line of behaviour as everywhere else: it copies the address, which already says it all. */
.tp-share{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:6px;padding:3px 10px;
  font:inherit;font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap}
.tp-share:hover{background:var(--paper-2)}

/* The atlas saying what it knows about the people it holds (0.38, D62). Quiet: a fact, not a banner. */
.pc-note{font-size:12px;color:var(--stone);margin:4px 0 2px;line-height:1.4}