/*
  sable-map.css · Sable Farms campus map · v2
  Reads the site's tokens (--sf-*, --serif, --sans) with fallbacks, so the
  module draws the same on a bare page. Everything is scoped under .sm.
  The image is the ground. On it: a 7px dot, a 1px leader, a 10px tracked-caps
  label on a paper chip, and thin brown arcs for the focused building only.
*/
.sm{
  --sm-paper:var(--sf-paper,#FFFAF0);
  --sm-ink:var(--sf-ink,#2B2622);
  --sm-brown:var(--sf-brown,#62422D);
  --sm-khaki:var(--sf-khaki,#9E9168);
  --sm-bone:var(--sf-bone,#E5E1CE);
  --sm-char:var(--sf-char,#343431);
  --sm-serif:var(--serif,'IM Fell Great Primer',Georgia,serif);
  --sm-sans:var(--sans,'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif);
  --sm-hair:rgba(43,38,34,.16);

  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:0;
  border:1px solid var(--sm-hair);background:var(--sm-paper);color:var(--sm-ink);
  font-family:var(--sm-sans);font-weight:300;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.sm *{box-sizing:border-box}
.sm-map{min-width:0;padding:10px 12px 12px}

/* ---------- the two tabs ---------- */
.sm-tabs{display:inline-flex;border:1px solid var(--sm-hair);border-radius:2px;overflow:hidden;margin:0 0 10px}
.sm-tab{font:inherit;font-family:var(--sm-sans);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sm-char);background:var(--sm-paper);border:0;border-right:1px solid var(--sm-hair);padding:7px 11px 6px;cursor:pointer}
.sm-tab:last-child{border-right:0}
.sm-tab[aria-selected="true"]{background:var(--sm-brown);color:var(--sm-paper)}
.sm-tab:focus-visible{outline:1px solid var(--sm-brown);outline-offset:-3px}

/* ---------- the sheet ---------- */
.sm-stage{position:relative;width:100%;background:var(--sm-bone);overflow:hidden}
.sm-img{display:block;width:100%;height:auto;filter:saturate(.84) contrast(1.02)}
.sm[data-view="drawing"] .sm-img{filter:none}
.sm-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sm-svg text{user-select:none;-webkit-user-select:none;pointer-events:none}

/* ---------- markers ---------- */
.sm-m{cursor:pointer;outline:none}
.sm-dot{fill:var(--sm-paper);stroke:var(--sm-ink);stroke-width:1;transition:r .18s,fill .18s,stroke .18s}
.sm-m--first .sm-dot{fill:var(--sm-brown);stroke:var(--sm-brown)}
.sm-m--proposed .sm-dot{fill:none;stroke:var(--sm-brown);stroke-dasharray:2 2}
.sm-m--rebuilt .sm-dot{fill:var(--sm-paper);stroke:var(--sm-brown)}
.sm-m--feature .sm-dot{fill:none;stroke:var(--sm-paper);stroke-width:1.2;stroke-dasharray:2 2}
.sm[data-view="drawing"] .sm-m--feature .sm-dot{stroke:var(--sm-ink)}
.sm-ring{fill:none;stroke:var(--sm-brown);stroke-width:1;stroke-dasharray:2 2;opacity:.9}
.sm-ring--rebuilt{stroke-dasharray:3 2;opacity:.75}
.sm-lead{stroke:var(--sm-paper);stroke-width:1;opacity:.95}
.sm[data-view="drawing"] .sm-lead{stroke:var(--sm-ink);opacity:.7}
.sm-chipbg{fill:var(--sm-paper);stroke:var(--sm-ink);stroke-width:.8;fill-opacity:.96;transition:fill .18s,stroke .18s}
.sm-chiptext{font-family:var(--sm-sans);font-weight:500;font-size:10px;letter-spacing:.1em;fill:var(--sm-ink);transition:fill .18s}
.sm-hit{fill:transparent;stroke:none}
/* aerial: the dot needs a hair of paper under it to read against shadow */
.sm-m:hover .sm-dot,.sm-m.is-on .sm-dot{fill:var(--sm-brown);stroke:var(--sm-brown);r:5}
.sm-m--feature:hover .sm-dot,.sm-m--feature.is-on .sm-dot{fill:var(--sm-brown);stroke:var(--sm-brown);stroke-dasharray:none}
.sm-m:hover .sm-chipbg,.sm-m.is-on .sm-chipbg{fill:var(--sm-brown);stroke:var(--sm-brown);fill-opacity:1}
.sm-m:hover .sm-chiptext,.sm-m.is-on .sm-chiptext{fill:var(--sm-paper)}
.sm-m.is-target .sm-chipbg{stroke:var(--sm-brown);stroke-width:1.2}
.sm-m.is-target .sm-dot{stroke:var(--sm-brown);stroke-width:1.6}
.sm-m.is-source .sm-dot{stroke:var(--sm-brown);stroke-dasharray:2 1.5}
.sm-m:focus-visible .sm-hit{stroke:var(--sm-brown);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.sm--has-focus .sm-m:not(.is-on):not(.is-target):not(.is-source){opacity:.62}
.sm--has-focus .sm-m:not(.is-on):not(.is-target):not(.is-source):hover{opacity:1}

/* ---------- arcs (focused building only) ---------- */
.sm-arcs{pointer-events:none}
.sm-arc{fill:none;stroke:var(--sm-brown);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.2,.7,.2,1)}
.sm-arc.is-drawn{stroke-dashoffset:0}
.sm-arc.no-motion{transition:none}

/* ---------- legend + credit ---------- */
.sm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;font-size:11.5px;color:var(--sm-char)}
.sm-legend-item{display:inline-flex;align-items:center;gap:6px}
.sm-legend-item i{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--sm-ink);background:var(--sm-paper)}
.sm-legend--first i{background:var(--sm-brown);border-color:var(--sm-brown)}
.sm-legend--later i{background:none;border:1px dashed var(--sm-brown)}
.sm-legend-dot{opacity:.5}
.sm-credit{margin:6px 0 0;font-family:var(--sm-serif);font-style:italic;font-size:12.5px;color:var(--sm-char);opacity:.7}

/* ---------- panel ---------- */
.sm-panel{border-left:1px solid var(--sm-hair);display:flex;flex-direction:column;min-width:0;background:var(--sm-paper)}
.sm-p-head{padding:18px 22px 0}
.sm-eyebrow{font-family:var(--sm-sans);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sm-char)}
.sm-p-body{padding:12px 22px 18px;flex:1}
.sm-title{font-family:var(--sm-serif);font-weight:400;font-size:30px;line-height:1.1;margin:6px 0 10px;color:var(--sm-ink);letter-spacing:.005em}
.sm-sub{font-size:13.5px;color:var(--sm-char);margin:0 0 8px}
.sm-hint{font-family:var(--sm-serif);font-style:italic;font-size:16px;color:var(--sm-brown);margin:0 0 14px}
.sm-notdrawn{font-family:var(--sm-serif);font-style:italic;font-size:14px;color:var(--sm-char);margin:-4px 0 8px;opacity:.8}
.sm-index{list-style:none;margin:0;padding:0;columns:2;column-gap:14px}
.sm-index li{break-inside:avoid}
.sm-index-b{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;border:0;padding:4px 0;
  font:inherit;color:var(--sm-ink);cursor:pointer;border-bottom:1px solid transparent}
.sm-index-b:hover .sm-index-name,.sm-index-b:focus-visible .sm-index-name{color:var(--sm-brown);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(98,66,45,.4)}
.sm-index-b:focus-visible{outline:1px solid var(--sm-brown);outline-offset:2px}
.sm-index-code{font-family:var(--sm-sans);font-weight:500;font-size:10px;letter-spacing:.18em;color:var(--sm-char);min-width:26px;opacity:.8}
.sm-index-name{font-family:var(--sm-serif);font-size:15.5px;line-height:1.25}
.sm-index-b.is-later .sm-index-name{opacity:.72;font-style:italic}
.sm-p-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.sm-code-chip{font-family:var(--sm-sans);font-weight:500;font-size:11px;letter-spacing:.22em;color:var(--sm-paper);background:var(--sm-brown);padding:4px 8px 3px 10px}
.sm-tag{font-family:var(--sm-serif);font-style:italic;font-size:14px;color:var(--sm-brown)}
.sm-tag--later{color:var(--sm-char);opacity:.8}
.sm-rows{margin:8px 0 0;padding:0}
.sm-rows dt{font-family:var(--sm-sans);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sm-char);opacity:.8;margin-top:12px;padding-top:10px;border-top:1px solid var(--sm-hair)}
.sm-rows dd{margin:4px 0 0;font-size:14px;color:var(--sm-ink)}
.sm-rows dd.sm-becomes{font-family:var(--sm-serif);font-size:17px;line-height:1.35}
.sm-carries{margin:0 0 6px;font-size:13.5px;color:var(--sm-char)}
.sm-chips{display:flex;flex-wrap:wrap;gap:6px}
.sm-chipbtn{display:inline-flex;gap:6px;align-items:baseline;background:none;border:1px solid var(--sm-hair);padding:4px 9px 3px;
  font:inherit;font-size:13px;color:var(--sm-ink);cursor:pointer;font-family:var(--sm-serif);line-height:1.2}
.sm-chipbtn:hover,.sm-chipbtn:focus-visible{border-color:var(--sm-brown);color:var(--sm-brown);outline:none}
.sm-chipbtn-code{font-family:var(--sm-sans);font-weight:500;font-size:9.5px;letter-spacing:.16em;opacity:.75}
.sm-back{margin-top:16px;background:none;border:0;padding:0;font:inherit;font-family:var(--sm-serif);font-style:italic;font-size:14.5px;color:var(--sm-brown);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(98,66,45,.35)}
.sm-back:disabled{text-decoration:none;color:var(--sm-char);opacity:.6;cursor:default}

/* ---------- narrow: panel drops below; labels become codes ---------- */
@media (max-width:820px){
  .sm{grid-template-columns:1fr}
  .sm-panel{border-left:0;border-top:1px solid var(--sm-hair)}
  .sm-map{padding:8px 8px 10px}
}
.sm--compact .sm-index{columns:1}
.sm--compact .sm-p-body{padding:12px 16px 16px}
.sm--compact .sm-p-head{padding-left:16px;padding-right:16px}

@media (prefers-reduced-motion:reduce){
  .sm-arc{transition:none;stroke-dashoffset:0}
  .sm-dot,.sm-chipbg,.sm-chiptext{transition:none}
}

/* ---------- v3 · circles with the deck's marks, the drawing that draws itself (S153 · 2026-09-27) ---------- */
.sm[data-view="drawing"] .sm-stage{background:var(--sm-paper)}
.sm-ink{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;pointer-events:none}
.sm:not([data-view="drawing"]) .sm-ink{display:none}
.sm--drawing .sm-img{opacity:var(--wash,0);
  -webkit-mask-image:radial-gradient(circle at 45% 40%,#000 calc(var(--r,0%) - 14%),transparent var(--r,0%));
  mask-image:radial-gradient(circle at 45% 40%,#000 calc(var(--r,0%) - 14%),transparent var(--r,0%))}
.sm-pins{position:absolute;inset:0;pointer-events:none}
.sm-b{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;padding:0;border-radius:50%;
  background:var(--sm-paper);border:1.5px solid var(--sm-ink);display:grid;place-items:center;cursor:pointer;pointer-events:auto;
  box-shadow:0 2px 8px rgba(43,38,34,.28);font:inherit;color:var(--sm-ink);
  transition:transform .2s ease,opacity .3s ease,border-color .2s ease}
.sm-b[hidden]{display:none}
.sm-b--first{border:2.2px solid var(--sm-brown)}
.sm-b--proposed,.sm-b--rebuilt{border:1.5px dashed var(--sm-ink);background:rgba(255,250,240,.86)}
.sm-b--feature{width:24px;height:24px;margin:-12px 0 0 -12px}
.sm-b sketch-draw{display:block;width:min(26px,calc(21px * var(--ar,1)))}
.sm-b-n{font-family:var(--sm-sans);font-weight:500;font-size:10px;letter-spacing:.06em;line-height:1}
.sm-b--feature .sm-b-n{font-size:9px}
.sm-b-lab{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);background:var(--sm-paper);border:1px solid var(--sm-char);
  padding:4px 7px 3px;white-space:nowrap;font-family:var(--sm-sans);font-weight:500;font-size:10px;line-height:1.2;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sm-ink);opacity:0;pointer-events:none;transition:opacity .2s;z-index:2}
.sm-b:hover,.sm-b:focus-visible,.sm-b.is-on{transform:scale(1.16);z-index:3;border-color:var(--sm-brown)}
.sm-b:hover .sm-b-lab,.sm-b:focus-visible .sm-b-lab,.sm-b.is-on .sm-b-lab{opacity:1}
.sm-b:focus-visible{outline:2px solid var(--sm-brown);outline-offset:2px}
.sm-b.is-target{border-color:var(--sm-brown);box-shadow:0 0 0 3px rgba(98,66,45,.28),0 2px 8px rgba(43,38,34,.28)}
.sm-b.is-source{border-style:dashed;border-color:var(--sm-brown)}
.sm--has-focus .sm-b:not(.is-on):not(.is-target):not(.is-source){opacity:.6}
.sm--has-focus .sm-b:not(.is-on):not(.is-target):not(.is-source):hover{opacity:1}
/* a crowded circle steps clear: a hairline and a dot back to where the building really is */
.sm-b-lead{position:absolute;left:50%;top:50%;height:1.2px;margin-top:-.6px;width:calc(var(--d) - var(--r));transform-origin:0 50%;
  transform:rotate(var(--a)) translateX(var(--r));pointer-events:none;background:var(--sm-paper);box-shadow:0 0 2px rgba(43,38,34,.8);transition:width .2s ease}
.sm-b-lead::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:inherit;box-shadow:0 0 0 1px rgba(43,38,34,.6)}
.sm[data-view="drawing"] .sm-b-lead{background:var(--sm-ink);box-shadow:none}
.sm[data-view="drawing"] .sm-b-lead::after{box-shadow:none}
.sm-b:hover .sm-b-lead,.sm-b:focus-visible .sm-b-lead,.sm-b.is-on .sm-b-lead{width:calc(var(--d) / 1.16 - var(--r))}
/* the drawing: circles arrive after the lines and the wash */
.sm--drawing .sm-b:not(.is-in){opacity:0;transform:scale(.6);pointer-events:none}
.sm-program{font-family:var(--sm-serif);font-style:italic;font-size:16px;color:var(--sm-brown);margin:-6px 0 6px}
.sm--compact .sm-b{width:26px;height:26px;margin:-13px 0 0 -13px}
.sm--compact .sm-b--feature{width:20px;height:20px;margin:-10px 0 0 -10px}
.sm--compact .sm-b sketch-draw{width:min(20px,calc(16px * var(--ar,1)))}
.sm--compact .sm-b-n{font-size:8.5px}
@media (prefers-reduced-motion:reduce){.sm-b,.sm-b-lead{transition:none}}