/* CADO map stylesheet. Tokens first (from design/tokens.css), then the screen (from design/panel.css). Change colours here, never inline. */
:root{
  --cado-coral:#ff502d;      /* RGB 255,80,45 */
  --cado-brown:#370f0a;      /* RGB 55,15,10 */
  --cado-cream:#f5ebdb;      /* RGB 245,235,219 */
  --cado-paper:#f7f2ea;      /* off-white section background used on the site */
  --cado-sand:#e8dfcc;       /* land silhouette in the map mock-up */
  --cado-sand-dark:#dcd2bb;  /* buildings / coast lines at street zoom */
  --cado-sea:#f5ebdb;        /* sea = cream, as in the mock-up */
  --cado-white:#ffffff;
  --cado-ink:var(--cado-brown);
  --cado-muted:#6b5a54;      /* brown at ~70% on cream, for captions */

  --font-head:"Barlow Condensed","Barlow Condensed Fallback",Impact,"Arial Narrow",sans-serif;
  --font-body:"P22 Mackinac","P22 Mackinac Book",Georgia,"Times New Roman",serif;

  /* site scale (desktop) */
  --site-nav:33px; --site-h2:65px; --site-lead:27px; --site-lead-lh:32px; --site-body:24px; --site-body-lh:28px; --site-button:24px;
  /* map scale (inside the embed, to be confirmed in comps) */
  --map-title:30px; --map-title-lh:1.05; --map-label:15px; --map-body:17px; --map-body-lh:1.45; --map-card-title:20px; --map-card-line:15px; --map-button:20px; --map-small:13px;

  --radius-button:4px; --radius-card:12px; --radius-thumb:8px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --shadow-card:0 6px 24px rgba(55,15,10,.18);
  --shadow-panel:0 8px 30px rgba(55,15,10,.25);
}

*{box-sizing:border-box}
svg.defs{position:absolute}
html,body{margin:0;height:100%;background:var(--cado-cream);font-family:var(--font-body);color:var(--cado-ink);font-size:var(--map-body);line-height:var(--map-body-lh)}
h1,h2,h3{font-family:var(--font-head);text-transform:uppercase;margin:0;line-height:1.05}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the keyboard route to the buildings: hidden until a button in it has focus, then shown so the focus can be seen */
#pin-list{margin:0;padding:0;list-style:none}
#pin-list:focus-within{left:12px;bottom:40px;width:auto;height:auto;max-width:calc(100% - 24px);max-height:40%;overflow:auto;clip:auto;white-space:normal;z-index:12;padding:8px 12px;background:var(--cado-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
#pin-list button{border:0;background:none;padding:6px 4px;text-align:left;cursor:pointer;color:var(--cado-ink)}
#pin-list button:focus-visible{outline:2px solid var(--cado-coral);outline-offset:2px}
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:var(--map-button);text-transform:uppercase;letter-spacing:.03em;padding:10px 16px;border:1px solid var(--cado-brown);background:transparent;color:var(--cado-brown);border-radius:var(--radius-button);cursor:pointer;text-decoration:none;line-height:1}
.btn.primary{background:var(--cado-coral);border-color:var(--cado-coral)}
.btn.outline{border-color:var(--cado-coral)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,.icon:focus-visible{outline:2px solid var(--cado-coral);outline-offset:2px}
#app{height:100%;display:flex;flex-direction:column}

/* ---------- filter bar: a cream strip, no header of its own ---------- */
#bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--cado-cream);border-bottom:1px solid var(--cado-sand-dark);position:relative;z-index:20;flex-wrap:wrap}
#search{position:relative;flex:0 1 260px;min-width:180px}
#search input{width:100%;font-family:var(--font-body);font-size:var(--map-label);padding:9px 12px 9px 34px;border:1px solid var(--cado-brown);border-radius:var(--radius-button);background:var(--cado-white);color:var(--cado-ink)}
#search input::placeholder{color:var(--cado-muted)}
#search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--cado-brown);stroke-width:2;pointer-events:none}
.chips{display:flex;gap:6px;align-items:center}
.chip-wrap{position:relative}
.chip{font-family:var(--font-head);font-weight:600;font-size:var(--map-label);letter-spacing:.04em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--cado-brown);border-radius:var(--radius-button);background:transparent;cursor:pointer;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip .n{background:var(--cado-brown);color:var(--cado-cream);border-radius:10px;padding:2px 6px;font-size:12px}
.chip[aria-expanded="true"],.chip.active,.chip[aria-pressed="true"]{background:var(--cado-coral);border-color:var(--cado-coral)}
.chip.active .n{background:var(--cado-brown)}
.chip .caret{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:var(--cado-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:8px;z-index:30}
.menu[hidden]{display:none}
.menu label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font-size:var(--map-card-line);cursor:pointer;min-height:40px}
.menu label:hover{background:var(--cado-paper)}
.menu input{width:18px;height:18px;accent-color:var(--cado-coral);margin:0}
.menu .hint{font-size:var(--map-small);color:var(--cado-muted);padding:6px 10px 2px}
#count{font-size:var(--map-label);color:var(--cado-muted);white-space:nowrap}
#clear{border:0;background:none;color:var(--cado-coral);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:var(--map-label);cursor:pointer;padding:4px}
#clear[hidden]{display:none}
.cta{margin-left:auto;display:flex;align-items:center;gap:8px}
#filters-btn,#fab{display:none}
#filters-btn{order:-1}

/* ---------- stage ---------- */
#stage{position:relative;flex:1;min-height:0;overflow:hidden}
#map{position:absolute;inset:0}
.loading{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:7;background:rgba(255,255,255,.9);border-radius:6px;padding:6px 12px;font-size:13px;color:var(--cado-muted);pointer-events:none}
.loading[hidden]{display:none}
#empty{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--cado-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 24px;text-align:center;max-width:320px;z-index:8}
#empty[hidden]{display:none}
#empty h3{font-size:var(--map-card-title);margin-bottom:6px}
#empty p{margin:0 0 10px;color:var(--cado-muted);font-size:var(--map-card-line)}
.maplibregl-canvas:focus{outline:2px solid var(--cado-coral)}

/* the hover card (desktop) and tap card (phone) from day two */
.card{position:absolute;z-index:6;width:260px;background:var(--cado-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:10px;display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;pointer-events:none}
.card[hidden]{display:none}
.thumb{width:64px;height:64px;border-radius:var(--radius-thumb);overflow:hidden;background:var(--cado-sand);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .pin{width:14px;height:22px;fill:var(--cado-coral);opacity:.55}
.card .title{font-family:var(--font-head);font-weight:700;font-size:var(--map-card-title);line-height:1.1;text-transform:uppercase;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .line{font-size:var(--map-card-line);line-height:1.35;color:var(--cado-muted);margin:0 0 6px}
.pill{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--cado-ink);border:1px solid var(--cado-coral);border-radius:var(--radius-button);padding:3px 6px;line-height:1;background:var(--cado-white)}
.pill.muted{border-color:var(--cado-sand-dark);color:var(--cado-muted)}
.card .more,.card .close{display:none}
.card.sheet{left:0;right:0;bottom:0;width:auto;border-radius:var(--radius-card) var(--radius-card) 0 0;grid-template-columns:72px 1fr auto;padding:14px 16px 16px;box-shadow:0 -6px 24px rgba(55,15,10,.2);pointer-events:auto}
.card.sheet .thumb{width:72px;height:72px}
.card.sheet .more{display:block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:16px;color:var(--cado-coral);text-decoration:none;margin-top:4px;border:0;background:none;padding:0;cursor:pointer}
.card.sheet .more::after{content:" →"}
.card.sheet .close{display:block;font:20px/1 sans-serif;border:0;background:transparent;color:var(--cado-muted);width:44px;height:44px;margin:-10px -12px 0 0;cursor:pointer}

/* ---------- panel: right drawer on desktop ---------- */
#panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:100%;background:var(--cado-white);box-shadow:var(--shadow-panel);z-index:10;display:flex;flex-direction:column;transform:translateX(0);transition:transform .25s ease}
#panel[hidden]{display:flex;transform:translateX(102%);visibility:hidden}
#panel .handle{display:none}
#p-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.9);font:22px/1 sans-serif;cursor:pointer;z-index:2;color:var(--cado-ink)}
#p-body{overflow:auto;flex:1;overscroll-behavior:contain}
#p-body:focus{outline:none}
.carousel{position:relative;background:var(--cado-sand);aspect-ratio:4/3}
.carousel img{width:100%;height:100%;object-fit:cover;display:block}
.carousel .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;display:grid;place-items:center;color:var(--cado-ink)}
.carousel .nav.prev{left:8px}.carousel .nav.next{right:8px}
.carousel .nav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5}
.carousel .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.carousel .dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.carousel .dots button[aria-current="true"]{background:var(--cado-coral)}
.credit{display:flex;justify-content:space-between;font-size:var(--map-small);color:var(--cado-muted);padding:6px 20px 0}
.p-updated{margin:0;font-size:var(--map-small);color:var(--cado-muted);padding:4px 20px 0}
.nophoto{aspect-ratio:4/3;background:var(--cado-sand);display:grid;place-items:center;text-align:center;padding:24px}
.nophoto .pin{width:24px;height:38px;fill:var(--cado-coral);opacity:.6;margin-bottom:8px}
.nophoto a{display:block;font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:16px;color:var(--cado-coral);text-decoration:none}
.p-head{padding:16px 20px 0}
.p-name{font-size:var(--map-title);line-height:var(--map-title-lh);font-weight:700;margin-bottom:6px}
.p-where{margin:0 0 10px;color:var(--cado-muted)}
.p-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.p-actions{padding:20px 20px 0}
.p-section{padding:14px 20px 0}
.p-section h3{font-size:var(--map-label);font-weight:600;letter-spacing:.06em;color:var(--cado-coral);margin-bottom:4px}
.p-section p{margin:0}
.p-none{padding:16px 20px;color:var(--cado-muted)}
.p-foot{padding:20px 20px 24px;font-size:var(--map-small);color:var(--cado-muted);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;border-top:1px solid var(--cado-sand);margin-top:16px}
.p-foot button{border:0;background:none;padding:4px 0;min-height:24px;color:var(--cado-coral);font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:14px;cursor:pointer;margin-left:auto}

/* ---------- phone filter sheet ---------- */
#fsheet{position:absolute;inset:0;background:var(--cado-white);z-index:40;display:flex;flex-direction:column}
#fsheet[hidden]{display:none}
#fsheet header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--cado-sand)}
#fsheet header h2{font-size:var(--map-card-title)}
#fsheet .groups{overflow:auto;flex:1;padding:8px 16px}
#fsheet details{border-bottom:1px solid var(--cado-sand)}
#fsheet summary{font-family:var(--font-head);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:16px;padding:14px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
#fsheet summary::after{content:"+";color:var(--cado-coral)}
#fsheet details[open] summary::after{content:"–"}
#fsheet .menu{position:static;box-shadow:none;padding:0 0 8px;min-width:0}
#fsheet footer{display:flex;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--cado-sand);background:var(--cado-cream)}
#fsheet footer .btn{flex:1;text-align:center}

/* ---------- phone ---------- */
@media (max-width:600px){
  #bar{padding:10px 12px 8px;gap:8px}
  #search{flex:1 1 100%}
  .chips{flex:1 1 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chip{min-height:44px}
  #count,#clear,.cta{display:none}
  #filters-btn{display:inline-flex}
  #fab{display:block;position:absolute;right:12px;bottom:16px;z-index:9;box-shadow:var(--shadow-card);padding:14px 18px}
  #panel{top:auto;left:0;right:0;width:auto;height:58%;border-radius:var(--radius-card) var(--radius-card) 0 0;transform:translateY(0);transition:transform .25s ease}
  #panel[data-pos="full"]{height:100%;border-radius:0}
  #panel[hidden]{transform:translateY(102%)}
  #panel .handle{display:block;width:44px;height:5px;border-radius:3px;background:var(--cado-sand-dark);margin:8px auto 4px;flex:none;touch-action:none}
  /* half-open sheet: a shorter photo so the name and tags show without scrolling; full height keeps 4:3 */
  #panel:not([data-pos="full"]) .carousel,#panel:not([data-pos="full"]) .nophoto{aspect-ratio:auto;height:15vh;min-height:120px}
  #p-close{top:6px}
}
@media (prefers-reduced-motion:reduce){#panel,#panel[hidden]{transition:none}}

/* ---------- production extras ---------- */
html.framed .cta,html.framed #fab{display:none}
#failed{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);background:var(--cado-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:20px 24px;text-align:center;max-width:320px;z-index:8}
#failed[hidden]{display:none}
#failed h3{font-size:var(--map-card-title);margin-bottom:6px}
#failed p{margin:0 0 10px;color:var(--cado-muted);font-size:var(--map-card-line)}
#note{position:absolute;left:62px;top:12px;margin:0;z-index:4;font-size:13px;background:rgba(255,255,255,.85);padding:3px 8px;border-radius:6px;color:var(--cado-muted);pointer-events:none}
#note[hidden]{display:none}
.card .pill[hidden]{display:none}
@media (max-width:600px){#note{left:auto;right:12px;top:auto;bottom:80px}}