:root{
      --color-wildcat-white: rgb(255,255,255);
      --color-cool-neutral: rgba(220,221,222,1);
      --color-warm-neutral-20: rgba(249,249,245,1);
      --color-warm-neutral-60: rgba(239,235,226,1);
      --color-warm-neutral: rgba(214,210,196,1);

      --bg:#1b365d;   /* UK Midnight */
      --panelTop:#0033a0; /* UK Wildcat Blue */
      --panelBot:#1b365d; /* UK Midnight */
      --text: var(--color-warm-neutral-20);
      --muted: var(--color-cool-neutral);
      --border:rgba(255,255,255,.12);
      --hover:rgba(255,255,255,.06);
      --pill:rgba(0,0,0,.4);
      --shadow: 0 12px 34px rgba(0,0,0,.42);

      --sideW: 430px;
      --sideWCollapsed: 0px;
      --handleW: 34px;
      --headerH: 58px;
    }

    html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
      /* UK brand fonts: "Usual" (primary) + "Alt Trade Gothic" (accent) — load via Adobe Fonts */
      font-family:"Usual","Alt Trade Gothic",system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;}

.app{
  height:100%;
  min-height: 0;
  display:grid;
  grid-template-columns: 1fr auto;
}

#map{
  height:100%;
  width:100%;
  background:#1b365d; /* UK Midnight */
}

/* Combined basemap + opacity control */
.leaflet-control.basemap-opacity-control{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.basemap-controls{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(27,54,93,.88); /* UK Midnight */
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.basemap-cycle{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(0,0,0,.15);
  border-radius: 8px;
  background: var(--color-wildcat-white);
  color: #0033a0; /* UK Blue on white */

  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;

  min-width: 96px;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.basemap-cycle:hover{
  background: var(--color-warm-neutral-20);
}

.entry-opacity-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.entry-opacity{
  flex: 1 1 auto;
  accent-color: var(--color-cool-neutral);
  cursor: pointer;
}

.entry-opacity-value{
  min-width: 36px;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}

.opacityRow{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 4px 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}

.opacityLabel{
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

    .leaflet-control-attribution a{
      background: transparent !important;
      padding: 0 !important;
      border: 0 !important;
      color: #1e8aff !important; /* UK Bluegrass */
      text-decoration: underline;
    }

.rightRail{
  position:relative;
  /* % (not vh/dvh) so this tracks the same live containing-block height as
     #map and .app — vh/dvh can render taller than what's actually visible
     behind iOS Safari's bottom bar, pushing the footer toggle off-screen. */
  height:100%;
  min-height: 0;
  display:flex;
  flex-direction: row; /*set to column for toggle bar above rail*/
  overflow: hidden;
}

    /* Handle */
#sideToggle{
  width: var(--handleW);
  min-width: var(--handleW);
  height: 100%;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  background: rgba(27,54,93,.90); /* UK Midnight */
  backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  touch-action: pan-y;
  position:relative;
  box-shadow: var(--shadow);
  z-index:50;
  transition: background .15s ease, width .15s ease;
}
    #sideToggle:hover{ background: rgba(255,255,255,.06); }
    #sideToggle:active{ background: rgba(30,138,255,.35); } /* UK Bluegrass tap feedback */
    #sideToggle .ico{ color: var(--muted); width:18px; height:18px; }
    #sideToggle[data-title="Expand"] .ico-caret{ transform: rotate(180deg); }

    /* Larger, more visible handle for touch devices */
    @media (max-width: 768px), (pointer: coarse){
      :root{ --handleW: 50px; } /* 48px width + 2px border, matches the override below */
      #sideToggle{
        width: 48px;
        min-width: 48px;
        background: rgba(30,138,255,.85); /* UK Bluegrass — stands out against the map */
        border-left-color: rgba(255,255,255,.35);
        border-right-color: rgba(255,255,255,.35);
      }
      #sideToggle .ico{ width:28px; height:28px; color:#fff; }
    }

    /* Panel */
#sideElement{
  width: var(--sideW);
  /* Must leave room for the handle (--handleW) beside it, or the two
     together exceed 100vw and the panel's right edge is clipped off-screen. */
  max-width: min(var(--sideW), calc(100vw - var(--handleW)));
  height:100%;
  flex:0 0 var(--sideW);
  border-left:1px solid var(--border);
  background: linear-gradient(180deg, #0033a0, #1b365d); /* UK Blue → Midnight */
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: width .18s ease, flex-basis .18s ease, opacity .18s ease;
}
.collapsed #sideElement{
  width:0;
  flex-basis:0;
  max-width:0;
  opacity:0;
  pointer-events:none;
  border-left:none;
}

    /* Header */
    #infoHeader{
      flex: 0 0 auto;
      height: var(--headerH);
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-bottom:1px solid var(--border);
      touch-action:none;
      user-select:none;
      background: rgba(0,0,0,.08);
    }
    .titlePill{
      flex:1 1 auto;
      border:1px solid var(--border);
      background: var(--pill);
      border-radius:999px;
      padding:8px 12px;
      font-weight:700;
      font-size:13px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .titlePill span:last-child{
      color:var(--muted);
      font-weight:600;
      font-size:12px;
    }

    /* On narrow screens the title pill + 3 icon buttons don't fit on one
       line. Let the header grow to a second row instead of clipping at the
       fixed --headerH (which let the wrapped buttons bleed into the
       scrollable content below), and force the title pill to take the full
       first row so all 3 buttons wrap together onto row two. */
    @media (max-width: 768px), (pointer: coarse){
      #infoHeader{
        height:auto;
        min-height: var(--headerH);
        flex-wrap: wrap;
        row-gap: 8px;
        padding-bottom: 8px;
      }
      .titlePill{
        flex-basis: 100%;
      }
    }

    .infoHeaderIcon{
      width: 34px;
      height: 34px;
      border-radius:10px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      display:flex;
      align-items:center;
      justify-content:center;
      color: var(--muted);
      cursor:pointer;
    }
    .infoHeaderIcon:hover{ background: var(--hover); color: var(--text); }

    .sideScroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* Gridding */
    .col12{width:100%}
    .col11{width:91.666%}
    .col10{width:83.333%}
    .col9{width:50%}
    .col8{width:66.666%}
    .col6{width:50%}
    .col5{width:41.666%}
    .col4{width:33.333%}
    .col3{width:45%}
    .col2{width:16.666%}
    .col1{width:8.333%}

    .inline{display:flex; flex-wrap:wrap;}
    .center{text-align:center;}
    .fr{float:right;}
    .pad05{padding:4px;}
    .pad1l{padding-left:10px;}
    .pad1{padding:8px;}
    .noselect{user-select:none;}

    /* Records list styling */
    #recordsTable{
      list-style:none;
      padding:0;
      margin:0;
      border:1px solid var(--border);
      border-radius: 14px;
      overflow:hidden;
      background: rgba(0,0,0,.10);
    }
    #recordsTable li{
      border-top:1px solid rgba(255,255,255,.08);
      padding-block: 10px;
      background: rgba(0,0,0,0.4);
    }
    #recordsTable li:first-child{border-top:none;}

    /* The clickable entry itself */
    #recordsTable a{
      display:block;
      color:var(--text);
      text-decoration:none;
    }
    #recordsTable a:hover{
      background: rgba(255,255,255,.03);
    }


    .recTitle{font-weight:800;}
    .recState{color:var(--muted); font-weight:700;}
    .searchItem{color: rgba(249,249,245,.92); font-size:12px;}
    .recYear{color: var(--muted); font-weight:700;}
    .recScale{color: rgba(249,249,245,.92); font-weight:700;}
    .scaleLine{
      white-space: nowrap;
      display: inline-block;
      padding-left:5px; 
      padding-right:5px;
    }
    .recKeyline{border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:6px; display:inline-block;}
    /* Thumb */
    .recImageMini{
      width: 45%;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      border:1px solid rgba(255,255,255,.10);
      height: 140px;
    }

    /* Downloads */
    .sideFile{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
    .downloadItem{
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--muted);
      cursor:pointer;
      user-select:none;
    }
    .downloadItem:hover{ background: var(--hover); color: var(--text); }
    .downloadItem[aria-disabled="true"]{
      opacity:.45;
      pointer-events:none;
    }
    .jpgByte,.kmzByte,.tifByte,.pdfByte{ color: rgba(214,210,196,.85); margin-left:6px; }

    /* Record links row (Show/Info/Zoom/Pan/Pin/Fix) */
    .recordlinkGroup{ margin-top:8px; }
    .btnRow{ display:flex; align-items:center; flex-wrap:wrap; }
    .btnRow .mapComment-right{ margin-left:auto; margin-right:20px; }
    .recordLinks{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius:999px;
      padding:6px 10px;
      margin: 4px 6px 0 0;
      cursor:pointer;
      color: var(--muted);
      user-select:none;
      text-indent:0 !important;
    }
    .recordLinks:hover{ background: var(--hover); color: var(--text); }
    .linkText{ font-size:12px; letter-spacing:.2px; }

    .infoShown{
      border-color: rgba(30,138,255,.55); /* UK Bluegrass */
      background: rgba(30,138,255,.14);
      color: var(--text);
    }

    /* Expandable meta fields (the “info opened” block) */
    .metaFields{
      display:none;
      width:100%;
      padding:10px 10px 12px 10px;
      border-top:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.12);
    }
    .metaFields.open{ display:flex; flex-wrap:wrap; gap:10px; }

    .metaInfo{ width:100%; }
    .metaPub{ font-size:12px; color: rgba(249,249,245,.92); }
    .metaColumn{ padding-top:8px; }

    .metaItem{
      display:flex;
      gap:8px;
      align-items:flex-start;
      padding:6px 0;
      border-top:1px solid rgba(255,255,255,.06);
      width:100%;
    }
    .metaItem:first-child{border-top:none;}
    .metaChecked{ color: rgba(120,220,160,.95); margin-top:1px; }
    .metaNoCheck{ color: rgba(255,120,120,.92); margin-top:1px; }
    .noData{ color: rgba(214,210,196,.75); }
    .overflow{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* Cite modal */
.citeModal.hidden{
  display:none;
}
.citeModal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.citeModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.citeModalPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(520px, calc(100vw - 32px));
  background:linear-gradient(180deg, #0033a0, #1b365d); /* UK Blue → Midnight */
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.citeModalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-weight:700;
}
.citeCloseBtn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:8px;
  width:32px;
  height:32px;
  cursor:pointer;
}
.citeCloseBtn:hover{
  background:var(--hover);
}
.citeModalBody{
  padding:14px;
}
#citeTextarea{
  width:100%;
  min-height:140px;
  resize:vertical;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  line-height:1.4;
}
.citeModalActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
}
.citeActionBtn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
}
.citeActionBtn:hover{
  background:var(--hover);
}
.citeActionBtn.secondary{
  background:rgba(255,255,255,.03);
}

.helpModalText{
  margin:0;
  line-height:1.65;
  color:var(--text);
  font-size:0.9rem;
}

.helpModalText a,
.helpModalText a:visited {
  color: var(--color-wildcat-white);
  text-underline-offset: 0.2em;
}

/* Cite button in record row */
.recordLinks.citeLink{
  color: var(--muted);
}
.recordLinks.citeLink:hover{
  color: var(--text);
}
    
/* Inline SVG icon styling */
.ico{
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:-3px;
  fill:none;
  stroke:currentColor;
}
.infoHeaderIcon .ico{ width:18px; height:18px; }

.recordLinks .ico{
  width:15px; height:15px;
  margin-right:6px;
  vertical-align:-2px;
}

.metaIcon .ico{
  width:14px; height:14px;
}

.metaIcon.ok{ color: rgba(160, 220, 170, 0.95); }
.metaIcon.no{ color: rgba(240, 160, 160, 0.95); }

/* Sidebar attribution */
.attributionFooter{
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.attributionFooter a{ color: inherit; }
.attributionFooterInner{
  padding: 10px 12px 12px 12px;
}

/* Horizontal handle to hide/show the whole attribution footer — mobile only */
.footerToggle{ display:none; }

@media (max-width: 768px), (pointer: coarse){
  .footerToggle{
    display:flex;
    align-items:center;
    justify-content:center;
    height: 26px;
    cursor:pointer;
    user-select:none;
    /* Drag via pointer events — leaving this to
       "manipulation" lets the browser's own scroll/pan heuristics race
       the JS and can swallow the gesture entirely on touch devices. */
    touch-action: none;
    background: rgba(30,138,255,.18); /* UK Bluegrass, subdued */
    border-bottom: 1px solid var(--border);
  }
  .footerToggle:hover{ background: rgba(30,138,255,.3); }
  /* Pointing down = footer is shown, drag/tap down to hide it */
  .footerToggle .ico{ width:16px; height:16px; color:#fff; transform: rotate(90deg); transition: transform .15s ease; }
  /* Pointing up = footer is hidden, drag/tap up to show it */
  .attributionFooter.collapsed .footerToggle .ico{ transform: rotate(-90deg); }

  .attributionFooter.collapsed .attributionFooterInner{
    display: none;
  }
}

/* Lay topright controls side by side; margin moved to container padding */
.leaflet-top.leaflet-right {
  display: flex;
  align-items: flex-start;
  padding: 12px 12px 0 0;
  gap: 8px;
}
.leaflet-top.leaflet-right .leaflet-control {
  float: none;
  clear: none;
  margin: 0;
}

/*
 * Both logo pill divs are 80px tall — the minimum satisfying all brand guidelines:
 *   - Stakeholder SVGs: 200-unit clear space in 800-unit viewBox = 50% content → 80px total, 40px visible
 *   - KY250 color SVG: fills viewBox = 100% content → 40px total, 40px visible
 *     (KY250 brand minimum: 72px wide; at 40px visible height × 1.799 aspect ratio = 72px ✓)
 *   - RI250 color PNG: 75% content → 53px total (40 ÷ 0.75), 40px visible
 */
.logoDock {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.logoPrimary {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  pointer-events: auto;
  display: flex;
  align-items: center;
  height: 80px;
}

.logoPrimary .nehLogo {
  display: block;
  height: 80px;
  width: auto;
  margin-left: 10px;
}

.logoPrimary .commemLogo {
  display: block;
  height: 40px;
  width: auto;
  margin-left: 10px;
  margin-right: 5px;
}

.logoPrimary .commemLogo.ri250-logo {
  height: 53px;
}

/* Hidden on desktop — the panel below is always expanded there */
.logoDropdownToggle {
  display: none;
}

.logoDropdownPanel {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  pointer-events: auto;
  display: flex;
  align-items: center;
}

.logoDropdownPanel img {
  display: block;
  height: 80px;
  width: auto;
  margin-left: 10px;
}
.logoDropdownPanel img:last-child {
  margin-right: 10px;
}

/* Mobile: drop the zoom buttons (pinch/drag still work), stretch the primary
   logo bar (NEH + KY250 + RI250) across the top of the viewport, and tuck the
   remaining partner logos behind a dropdown tab next to RI250. All three
   primary logos keep their brand-guideline sizes from above (40px visible
   content each), same as desktop. */
@media (max-width: 768px), (pointer: coarse){
  .leaflet-control-zoom {
    display: none;
  }

  .leaflet-top.leaflet-right {
    left: 0;
    right: 0;
    padding: 0;
    gap: 0;
  }

  .logoDock {
    position: relative;
    width: 100%;
    align-items: stretch;
  }

  .logoPrimary {
    flex: 1;
    height: 80px;
    border-radius: 0;
  }

  /* Pulled out of the logo row entirely — a small square tab that pokes out
     of the bottom-right corner of the bar (same fill as the bar, so it reads
     as part of the same div), so the 3 logos get the full-width row. */
  .logoDropdownToggle {
    position: absolute;
    top: 100%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88);
    color: #0033a0; /* UK Wildcat Blue */
    cursor: pointer;
  }
  .logoDropdownToggle .ico-caret{ transform: rotate(90deg); transition: transform .15s ease; }
  .logoDropdownToggle[aria-expanded="true"] .ico-caret{ transform: rotate(-90deg); }

  .logoDropdownPanel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1;
    border-radius: 0 0 10px 10px;
    padding: 8px;
    gap: 8px;
    justify-content: flex-end;
    width: max-content;
    max-width: calc(100vw - 16px);
  }
  /* flex-wrap (not a fixed grid column count) since these logos are now
     80px tall to match the NEH guideline minimum — too wide to reliably
     fit 4 across, so they wrap to as many per row as actually fit. */
  .logoDropdownPanel.open {
    display: flex;
    flex-wrap: wrap;
  }
  .logoDropdownPanel img {
    height: 80px; /* same as .logoPrimary .nehLogo — these are the same style of logo */
    width: auto;
    margin: 0;
  }
}

.entrySearchBox {
  display: flex;
  gap: 6px;
  padding: 8px;
  flex-wrap: wrap;
}

.entrySearchInput {
  flex: 1 1 120px;
  padding: 6px 8px;
  font-size: 14px;
}

.entrySearchClear {
  padding: 6px 10px;
  cursor: pointer;
}

.noSearchResults {
  padding: 12px;
  opacity: 0.75;
}