:root {
      --ink:          #1a1a18;
      --parchment:    #f2ede4;
      --panel-bg:     rgba(242, 237, 228, 0.86);
      --panel-border: rgba(26,26,24,0.10);
      --accent:       #2a4f7c;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body, #map { height: 100%; font-family: 'DM Mono', monospace; background: #e6dfd2; }

    .glass {
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }

    .topbar {
      position: absolute; top: 16px; right: 16px;
      z-index: 1000; display: flex; align-items: center; gap: 10px;
    }
    .app-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 20px; font-weight: 300; letter-spacing: 0.22em;
      text-transform: uppercase; color: var(--ink); padding: 8px 16px; border-radius: 6px;
      position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; white-space: nowrap;
    }
    .basemap-toggle { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--panel-border); }
    .basemap-toggle button {
      background: var(--panel-bg); border: none; padding: 8px 13px; cursor: pointer;
      font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
      color: var(--ink); opacity: 0.5; transition: opacity 0.2s, background 0.2s;
    }
    .basemap-toggle button.active { opacity: 1; background: rgba(42,79,124,0.12); }
    .basemap-toggle button:first-child { border-right: 1px solid var(--panel-border); }

    .loading-pill {
      border-radius: 6px; padding: 8px 12px; font-size: 11px; letter-spacing: 0.06em;
      color: var(--ink); opacity: 0; transform: translateY(-4px);
      transition: opacity 0.2s, transform 0.2s; pointer-events: none;
      display: flex; align-items: center; gap: 8px;
    }
    .loading-pill.visible { opacity: 1; transform: translateY(0); }
    .spinner {
      width: 12px; height: 12px; border-radius: 50%;
      border: 1.5px solid rgba(26,26,24,0.15); border-top-color: var(--ink);
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .panel {
      position: absolute; left: 16px; right: 16px; bottom: 16px;
      z-index: 1000; border-radius: 10px; padding: 12px 20px 12px;
    }
    .panel-row {
      display: grid; grid-template-columns: auto 1fr;
      gap: 24px; align-items: end; margin-bottom: 0;
    }
    .time-display { display: flex; flex-direction: column; gap: 3px; width: 160px; flex-shrink: 0;   position: relative;
  top: -30px;}
    .time-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); opacity: 0.45; }
    .time-year {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(28px, 4vw, 42px); font-weight: 300; line-height: 1;
      color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .time-era { font-size: 0.5em; letter-spacing: 0.04em; margin-left: 1px; }
    .time-epoch {
      font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink); opacity: 0.6; margin-top: 7px; white-space: nowrap;
    }
    .time-rsl { font-size: 11px; letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 2px; }

    .epoch-wrap { display: flex; flex-direction: column; gap: 0; min-width: 0; margin-top: 0; padding-top: 2px; }
    .timeline-track-shell { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; column-gap: 10px; margin-top: 10px; padding: 0; position: relative; top: -20px; }
    .timeline-track-stack { position: relative; min-width: 0; }
    .epoch-icons-row { position: relative; height: 46px; margin: 0 48px 0 48px; }
    .epoch-icon-item {
      position: absolute; transform: translateX(-50%);
      height: 45px; width: auto; opacity: 0.5;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .epoch-icon-item.active { opacity: 1; }
    .epoch-icon-item img { height: 100%; width: auto; display: block; }
    .epoch-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(26,26,24,0.08); position: relative; clip-path: inset(0 round 999px); }
    .epoch-segment { position: absolute; top: 0; bottom: 0; opacity: 0.7; }
    .epoch-labels-row { display: none; }
    .epoch-label-item {
      position: absolute; transform: translateX(-50%);
      font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;
      color: #000000; opacity: 1; white-space: nowrap; top: 4px;
    }

    input[type="range"] {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 10px; background: transparent; cursor: pointer;
      margin-top: -10px; margin-bottom: 0; display: block;
      position: relative; z-index: 1;
    }
    .timeline-arrow {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.18s ease, transform 0.18s ease;
      position: relative;
      z-index: 2;
    }
    .timeline-arrow img {
      height: 25px;
      width: auto;
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }
    .timeline-arrow-past img {
      transform: scaleX(-1);
      transform-origin: center;
    }
    /* While playing, the button shows pause (the arrow's ink colour) */
    .timeline-arrow .pause-ic { display: none; width: 25px; height: 25px; fill: #2e343d; }
    .timeline-arrow.active img { display: none; }
    .timeline-arrow.active .pause-ic { display: block; }
    .timeline-arrow:hover { opacity: 0.7; }
    .timeline-arrow.active { opacity: 1; }
    .timeline-arrow:active { transform: scale(0.96); }
    .timeline-arrow:focus-visible { outline: none; opacity: 0.7; }
    .epoch-wrap,
    .epoch-icons-row,
    .timeline-track-stack,
    .epoch-bar,
    input[type="range"] {
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .timeline-track-shell {
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    input[type="range"]::-webkit-slider-runnable-track {
      height: 10px; border-radius: 999px; background: transparent;
    }
    input[type="range"]::-moz-range-track {
      height: 10px; border-radius: 999px; background: transparent;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px; height: 16px;
      margin-top: -3px;
      background-color: var(--parchment);
      background-image: none;
      border-radius: 50%;
      border: 1px solid #000000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.45);
      transition: transform 0.12s;
    }
    input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
    input[type="range"]::-moz-range-thumb {
      width: 16px; height: 16px;
      background-color: var(--parchment);
      background-image: none;
      border-radius: 50%;
      border: 1px solid #000000;
      box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    }
    .timeline-ends {
      display: flex; justify-content: space-between;
      font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink); opacity: 0.35;
    }


    .scale-bar {
      display: flex; flex-direction: column; align-items: center;
      background: var(--panel-bg); backdrop-filter: blur(18px) saturate(130%);
      -webkit-backdrop-filter: blur(18px) saturate(130%);
      border: 1px solid var(--panel-border); border-radius: 6px;
      padding: 0 10px;
      height: 40px; justify-content: flex-end;
      width: 140px; flex-shrink: 0; position: relative;
    }
    .scale-bar-label {
      font-size: 10px; letter-spacing: 0.08em; color: var(--ink);
      opacity: 0.75; white-space: nowrap; text-align: center;
      position: absolute; top: 50%; transform: translateY(-80%);
    }
    .scale-bar-line {
      height: 8px; background: transparent; opacity: 0.6;
      border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink);
      border-bottom: 1.5px solid var(--ink);
      box-sizing: border-box; margin-bottom: 12px;
    }
    .left-controls {
      position: absolute; bottom: calc(var(--panel-h, 104px) + 26px); left: 16px; z-index: 1000;
      display: flex; align-items: center; gap: 6px;
    }
    /* Line icons (index.html): drawn, not font glyphs, so iOS can't swap in its emoji */
    .ic { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor;
          stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
    .layers-btn .ic-close, body.layers-open .layers-btn .ic-open { display: none; }
    body.layers-open .layers-btn .ic-close { display: inline; }
    .info-btn-inner {
      color: var(--ink);
      width: 40px; height: 40px; border-radius: 6px;
      border: 1px solid var(--panel-border); cursor: pointer;
      background: var(--panel-bg); backdrop-filter: blur(18px);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
      flex-shrink: 0;
    }
    .right-controls {
      position: absolute; bottom: calc(var(--panel-h, 104px) + 26px); right: 16px; z-index: 1000;
      display: flex; align-items: center; gap: 6px;
    }
    .right-controls .info-btn-inner { position: static; box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
    .gps-btn, .info-btn {
      position: absolute; bottom: 130px; z-index: 1000;
      width: 40px; height: 40px; border-radius: 6px;
      border: 1px solid var(--panel-border); cursor: pointer;
      background: var(--panel-bg); backdrop-filter: blur(18px);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    }
    .gps-btn { right: 16px; font-size: 18px; }
    .right-controls .gps-btn { position: static; }
    .gps-btn.active { background: rgba(42,79,124,0.15); }
    .basemap-toggle-panel {
      display: flex; border-radius: 6px; overflow: hidden;
      border: 1px solid var(--panel-border);
      height: 40px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    }
    .basemap-toggle-panel button {
      background: var(--panel-bg); border: none; padding: 0 13px; cursor: pointer;
      font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
      color: var(--ink); opacity: 0.5; transition: opacity 0.2s, background 0.2s;
      backdrop-filter: blur(18px);
    }
    .basemap-toggle-panel button.active { opacity: 1; background: rgba(42,79,124,0.12); }
    .basemap-toggle-panel button + button { border-left: 1px solid var(--panel-border); }
    .info-modal {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 2000; width: 480px; max-width: calc(100vw - 24px); box-sizing: border-box;
      max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
      padding: 24px 28px 28px; border-radius: 10px;
      display: none;
    }
    .info-modal.visible { display: block; }
    .info-title {
      font-family: 'Cormorant Garamond', serif; font-weight: 300;
      font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink); margin: 0 0 16px; padding-right: 24px;
    }
    /* Running text in the serif, headings and small print in the mono of the controls */
    .info-body { font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1.45; color: var(--ink); }
    .info-body p { margin: 0 0 10px; }
    .info-body .info-lead { font-size: 17.5px; font-style: italic; line-height: 1.4; }
    .info-body h3 {
      font-family: 'DM Mono', monospace; font-weight: 400; font-size: 10.5px;
      letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65;
      margin: 18px 0 6px;
    }
    .info-body ul { margin: 0 0 10px; padding-left: 16px; }
    .info-body li { margin-bottom: 4px; }
    .info-body li::marker { color: rgba(26,26,24,0.4); }
    .info-body a { color: inherit; text-decoration-color: rgba(26,26,24,0.35); text-underline-offset: 2px; }
    .info-epochs { border-collapse: collapse; margin: 0 0 10px; }
    .info-epochs td { padding: 1px 18px 1px 0; vertical-align: top; }
    .info-epochs td + td { font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: 0.02em; padding-top: 4px; }
    .info-sources { font-size: 15px; }
    .info-body .info-sign {
      font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.7;
      opacity: 0.6; margin: 20px 0 0;
    }
    .info-close {
      position: absolute; top: 14px; right: 14px;
      background: none; border: none; cursor: pointer;
      color: var(--ink); opacity: 0.5; padding: 4px;
    }
    .info-close .ic { width: 16px; height: 16px; }
    .info-close:hover { opacity: 1; }

    /* Sources for the visible layers: inside the time panel, bottom right,
       in the space under the timeline */
    .panel .leaflet-control-attribution {
      position: absolute; right: 20px; bottom: 6px; margin: 0; float: none;
      max-width: calc(100% - 240px);
      font-family: 'DM Mono', monospace; font-size: 9px; line-height: 12px; letter-spacing: 0.02em;
      color: rgba(26,26,24,0.55); background: none; padding: 0; box-shadow: none;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
    }
    .panel .leaflet-control-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .leaflet-attribution-flag { display: none !important; }
    /* ── OUTSIDE THE DATA AREA ─────────────────────────────────── */
    /* Context basemap (Terräng): greyscale, under the parchment veil */
    /* filter per tile (not on the pane), or tile seams show as hairlines */
    .leaflet-contextPane-pane .leaflet-tile { filter: grayscale(1) contrast(0.85) brightness(1.04); }
    /* Leaflet adds image tiles with plus-lighter to hide seams, but where two
       tiles overlap the colours add up to a light line along the tile grid.
       Tiles overlap by 1 px instead (config.js) and are drawn normally. */
    .leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
    /* The semi-transparent water in Karta/Foto can't overlap (it would draw
       twice); its abutting tiles add their anti-aliased edges up to full
       coverage instead. Each zoom level's tile container isolates the blend. */
    .seam-blend .leaflet-tile { mix-blend-mode: plus-lighter; }
    /* Place names in Foto: CARTO Dark Matter's grey text lifted to white; the dark halo stays */
    .labels-photo { filter: brightness(2.2) contrast(1.15); }
    /* The veil's shadow falls inward over the map edge: a sheet lying on paper */
    .outside-veil { filter: drop-shadow(0 0 7px rgba(52, 42, 30, 0.45)); }
    #map { background: #e6dfd2; }

    /* ── FORNLÄMNINGAR ──────────────────────────────────────────── */
    .legend-stack {
      position: fixed; top: 12px; left: 12px; z-index: 1000;
      display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    }
    .forn-legend {
      display: none;
      padding: 10px 12px 9px; border-radius: 8px; font-size: 10px; color: var(--ink);
      letter-spacing: 0.03em; line-height: 1.55; max-width: 190px;
    }
    .fl-title { font-family: 'Cormorant Garamond', serif; font-size: 14px; letter-spacing: 0.06em; margin-bottom: 4px; }
    .fl-row { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
    .fl-dot {
      width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(26,26,24,0.8);
    }
    .fl-dot.fl-possible { opacity: 0.35; box-shadow: 0 0 0 1px rgba(26,26,24,0.45); }
    .fl-check { cursor: pointer; gap: 6px; }
    .fl-check input { margin: 0; width: 11px; height: 11px; accent-color: #6b5a44; cursor: pointer; }
    .fl-glyph { flex-shrink: 0; }
    .fl-sep { height: 1px; background: var(--panel-border); margin: 6px 0; }
    .fl-note { font-size: 9px; opacity: 0.55; margin-top: 5px; white-space: normal; line-height: 1.35; }
    /* Wrecks: boat symbols (vrak.js) */
    .vl-icon svg { display: block; filter: drop-shadow(0 0 1px rgba(26,26,24,0.55)); }
    .vl-icon { display: inline-flex; flex-shrink: 0; }
    .vl-icon.fl-possible { box-shadow: none; }

    .fornlamning-popup {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: var(--ink);
      min-width: 200px;
      max-width: 280px;
    }
    .fornlamning-popup .fp-type {
      font-family: 'Cormorant Garamond', serif;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
      color: var(--ink);
      line-height: 1.3;
    }
    .fornlamning-popup .fp-id {
      font-size: 10px;
      letter-spacing: 0.08em;
      opacity: 0.5;
      margin-bottom: 10px;
    }
    .fornlamning-popup .fp-row {
      display: flex;
      gap: 8px;
      margin-bottom: 4px;
      font-size: 11px;
    }
    .fornlamning-popup .fp-label {
      opacity: 0.5;
      min-width: 60px;
      flex-shrink: 0;
    }
    .fornlamning-popup .fp-val {
      color: var(--ink);
    }
    .fornlamning-popup .fp-link {
      display: inline-block;
      margin-top: 10px;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid rgba(42,79,124,0.3);
      padding-bottom: 1px;
    }
    .fornlamning-popup .fp-link:hover { border-color: var(--accent); }
    .fp-status-badge {
      display: inline-block;
      font-size: 9px;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 3px;
      margin-top: 6px;
      text-transform: uppercase;
    }
    .fp-status-badge.fornlamning { background: rgba(42,79,124,0.12); color: var(--accent); }
    .fp-status-badge.övrig       { background: rgba(180,140,60,0.15); color: #8a6420; }
    .fp-status-badge.byggnadsminne { background: rgba(60,120,60,0.12); color: #2a6a2a; }
    .leaflet-popup-content-wrapper {
      border-radius: 8px !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18) !important;
      background: var(--parchment) !important;
    }
    .leaflet-popup-tip { background: var(--parchment) !important; }

    /* Eget popup-element i body — ovanför allt */
    #forn-popup {
      display: none;
      position: fixed;
      z-index: 9999;
      background: var(--parchment);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
      padding: 14px 16px 12px;
      min-width: 200px;
      max-width: 300px;
      pointer-events: auto;
    }
    #forn-popup::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 50%; transform: translateX(-50%);
      border: 8px solid transparent;
      border-bottom: none;
      border-top-color: var(--parchment);
    }
    #forn-popup-close {
      position: absolute; top: 6px; right: 8px;
      background: none; border: none; cursor: pointer;
      font-size: 14px; opacity: 0.4; color: var(--ink);
      line-height: 1; padding: 2px 4px;
    }
    #forn-popup-close:hover { opacity: 1; }

    /* Loading state for fornlämningar */
    #fornBtn.loading, #vrakBtn.loading { animation: pulse 1s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity:0.5 } 50% { opacity:1 } }
    /* ── PLACE SEARCH ───────────────────────────────────────────── */
    .search-box {
      position: relative; display: flex; align-items: center; height: 40px;
      border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    }
    .search-box input {
      width: 170px; height: 100%; border: none; background: transparent; outline: none;
      padding: 0 4px 0 12px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink);
    }
    .search-box input::placeholder { color: var(--ink); opacity: 0.45; }
    .search-box input::-webkit-search-cancel-button { display: none; }
    .search-box button[type="submit"] {
      width: 36px; height: 100%; border: none; background: transparent; cursor: pointer;
      font-size: 17px; color: var(--ink); opacity: 0.6;
    }
    .search-box button[type="submit"]:hover { opacity: 1; }
    .search-results {
      position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 280px;
      border-radius: 8px; padding: 4px 0; display: flex; flex-direction: column;
    }
    .search-results[hidden] { display: none; }
    .sr-item {
      display: flex; justify-content: space-between; gap: 12px; text-align: left;
      border: none; background: none; cursor: pointer; padding: 7px 12px;
      font-family: 'DM Mono', monospace; font-size: 11px; color: var(--ink);
    }
    .sr-item span { opacity: 0.45; font-size: 9.5px; white-space: nowrap; }
    .sr-item:hover, .sr-item:focus { background: rgba(42,79,124,0.10); outline: none; }
    .sr-msg { padding: 8px 12px; font-size: 11px; color: var(--ink); opacity: 0.7; }
    .sr-credit { padding: 4px 12px 2px; font-size: 8.5px; color: var(--ink); opacity: 0.45; }

    /* ── PLACE INSPECTOR POPUP ──────────────────────────────────── */
    .inspect-popup .leaflet-popup-content-wrapper {
      background: rgba(242, 237, 228, 0.96); border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.22); color: var(--ink);
    }
    .inspect-popup .leaflet-popup-tip { background: rgba(242, 237, 228, 0.96); }
    .inspect-popup .leaflet-popup-content { margin: 12px 16px 11px; font-family: 'DM Mono', monospace; font-size: 11px; line-height: 1.5; }
    .ip-title { font-family: 'Cormorant Garamond', serif; font-size: 17px; letter-spacing: 0.02em; margin-bottom: 2px; }
    .ip-row { margin-top: 1px; }
    .ip-state { color: var(--accent); }
    .ip-note { margin-top: 6px; font-size: 9px; opacity: 0.5; line-height: 1.35; }

    /* ── RESPONSIVE ─────────────────────────────────────────────── */
    /* Elements that only exist for narrow screens */
    .layers-btn, .layers-sheet-title, .time-epoch-icon, .timeline-ticks { display: none; }

    /* Medium widths: same layout, tighter */
    @media (max-width: 1000px) {
      .app-title { font-size: 16px; letter-spacing: 0.16em; }
      .basemap-toggle-panel button { padding: 0 9px; font-size: 10px; }
      .scale-bar { width: auto; min-width: 104px; }
      .epoch-icons-row { height: 36px; }
      .epoch-icon-item { height: 34px; }
      .panel-row { gap: 16px; }
    }

    /* Narrow: phones, tablets in portrait and narrow windows.
       Two-line title between round buttons, layers behind ☰, compact time panel. */
    @media (max-width: 820px) {
      .info-modal { padding: 20px 20px 22px; }
      .app-title {
        top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 128px);
        white-space: normal; text-align: center; padding: 6px 18px 7px; border-radius: 10px;
      }
      .app-title .t-main { display: block; font-size: 19px; letter-spacing: 0.12em; line-height: 1.1; }
      .app-title .t-sub {
        display: block; font-family: 'DM Mono', monospace; font-size: 8.5px;
        letter-spacing: 0.16em; opacity: 0.6; margin-top: 2px;
      }
      .layers-btn {
        display: grid; place-items: center; position: absolute; top: 14px; left: 12px; z-index: 1001;
        width: 42px; height: 42px; border-radius: 50%; font-size: 16px; color: var(--ink); cursor: pointer;
      }
      body.layers-open .layers-btn { background: var(--ink); color: var(--parchment); }
      #infoBtn { position: fixed; top: 14px; right: 12px; width: 42px; height: 42px; border-radius: 50%; z-index: 1001; }
      .topbar { top: 70px; right: 12px; }          /* loading pill below the info button */

      /* Layer controls become a sheet above the time panel, opened with ☰ */
      .left-controls {
        left: 8px; right: 8px; bottom: calc(var(--panel-h, 120px) + 20px);
        flex-direction: column; align-items: stretch; gap: 10px;
      }
      .left-controls > .basemap-toggle-panel,
      .left-controls > .layers-sheet-title,
      .left-controls > .search-box,
      .left-controls > .legend-stack { display: none !important; }
      /* No backdrop-filter here: it would make the fixed info button position
         itself inside the sheet instead of in the window corner */
      body.layers-open .left-controls {
        z-index: 1002; padding: 14px 16px 16px; border-radius: 16px;
        background: rgba(242, 237, 228, 0.97); border: 1px solid var(--panel-border);
        box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      }
      body.layers-open .left-controls > .layers-sheet-title {
        display: block !important; font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: 0.04em;
      }
      body.layers-open .left-controls > .basemap-toggle-panel { display: flex !important; height: 42px; box-shadow: none; }
      /* Search first in the sheet, results inline below the field */
      body.layers-open .left-controls > .search-box { display: flex !important; order: -1; height: 42px; box-shadow: none; flex-wrap: wrap; }
      body.layers-open .left-controls > .layers-sheet-title { order: -2; }
      .search-box input { flex: 1; width: auto; font-size: 16px; }   /* 16 px: no zoom-on-focus in iOS */
      .search-results { position: static; flex-basis: 100%; min-width: 0; margin-top: 6px; box-shadow: none; }
      body.layers-open .left-controls > .basemap-toggle-panel button { flex: 1; font-size: 11px; }
      body.layers-open .left-controls > .legend-stack { display: flex !important; position: static; gap: 4px; }
      body.layers-open .left-controls .forn-legend[style*="block"] {
        display: block !important; position: static; max-width: none; padding: 2px 2px 0;
        background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
      }

      /* Scale bar and position stay above the panel */
      .right-controls { right: 12px; bottom: calc(var(--panel-h, 120px) + 20px); }
      .right-controls .info-btn-inner { border-radius: 50%; }
      .scale-bar { width: auto; min-width: 92px; height: 34px; }

      /* Compact time panel: year, epoch icon and sea level on one row */
      .panel { left: 8px; right: 8px; bottom: 12px; padding: 10px 14px 6px; border-radius: 16px; }
      /* Sources as the panel's last line; wraps rather than truncating */
      .panel .leaflet-control-attribution {
        position: static; display: block; max-width: none; margin-top: 3px;
        font-size: 8px; line-height: 11px; white-space: normal; text-align: center;
      }
      .panel-row { display: block; }
      .time-display { flex-direction: row; align-items: center; gap: 10px; width: auto; top: 0; }
      .time-year { font-size: 32px; }
      .time-epoch-icon { display: block; height: 30px; width: auto; opacity: 0.9; }
      .time-meta { margin-left: auto; text-align: right; }
      .time-epoch { margin-top: 0; font-size: 9.5px; }
      .epoch-icons-row { display: none; }
      /* The year marks hang below the bar, out of the flow, so the arrows centre
         on the bar itself; the shell's bottom margin keeps their room */
      .timeline-track-shell {
        top: 0; margin-top: 10px; margin-bottom: 19px; grid-template-columns: 28px minmax(0, 1fr) 28px; column-gap: 8px;
      }
      .timeline-arrow { width: 28px; height: 28px; }
      .timeline-arrow img { height: 18px; }
      .timeline-arrow .pause-ic { width: 18px; height: 18px; }
      .timeline-ticks {
        display: block; position: absolute; left: 0; right: 0; top: calc(100% + 5px); height: 14px;
        font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); opacity: 0.5;
      }
      .timeline-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
      .timeline-ticks span:first-child { transform: none; }
      .timeline-ticks span:last-child { transform: translateX(-100%); }
    }