/* Tide-Line Atlas · living map on the shared tokens (loaded after living-map.css). */
:root{--ink:var(--ink-strong);--muted:var(--ink-muted);--paper:var(--bg-canvas);--dark:var(--bg-dark);--gold:var(--accent-coral);--gold-2:var(--accent-coral-soft);--display:var(--font-display);--reading:var(--font-body);--line:var(--border-soft)}
body{font-family:var(--font-body);color:var(--ink-body)}
.panel{background:color-mix(in srgb,var(--bg-canvas) 96%,transparent)}
.panel h1,.panel h2.list-title{font-family:var(--font-display)}
.headline-stat strong,.balance strong{font-family:var(--font-body);font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.timebar b{font:600 20px var(--font-body);font-variant-numeric:lining-nums}
.timebar button{min-height:48px}
.timebar .play[aria-pressed=true]{background:var(--accent-coral)}
.legend{border-radius:var(--radius);background:color-mix(in srgb,var(--bg-surface) 95%,transparent)}
.segmented button,.sheet-toggle,.back,.tour,.sites button{min-height:44px}
#panel-body:focus{outline:none}
/* phone: the legend ends above the bottom sheet (which starts at 44svh) instead of sliding under it */
@media (max-width:760px){
  .legend{max-height:calc(44svh - 96px);top:76px}
}

/* features in view */
.in-view{margin:6px 0 18px}
.in-view-btn{width:100%;min-height:44px;border:1.5px solid var(--border-soft);border-radius:999px;background:var(--bg-surface);color:var(--ink-strong);font:650 14px var(--font-body);cursor:pointer}
.in-view-btn[aria-expanded=true]{background:var(--ink-strong);color:var(--ink-inverse)}
.view-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-height:280px;overflow:auto}
.view-list button{width:100%;min-height:42px;padding:7px 12px;border:1px solid var(--border-soft);border-radius:10px;background:var(--bg-surface);text-align:left;font:14px/1.3 var(--font-body);color:var(--ink-strong);cursor:pointer}
.view-list button:hover{border-color:var(--accent-tide)}
.view-list small{display:block;color:var(--ink-muted);font-size:12.5px}
.view-list .empty{font-size:14px;color:var(--ink-muted)}

/* swipe comparison over the whole map */
.timebar .swipe-btn{min-width:96px}
.timebar .swipe-btn[aria-pressed=true]{background:var(--accent-coral);color:#fff}
.lm-swipe{position:fixed;inset:0;z-index:2}
.lm-swipe .sw{position:absolute;inset:0}
.lm-swipe-close{position:absolute;z-index:6;top:16px;right:16px;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--ink-inverse);color:var(--ink-strong);font:650 14px var(--font-body);box-shadow:var(--shadow-2);cursor:pointer}
@media (min-width:761px){.lm-swipe .sw-tag-a{left:420px}}

/* phone: bottom sheet with three heights; the legend always ends above it */
@media (max-width:760px){
  .panel{transition:max-height .35s var(--ease)}
  .panel[data-sheet=peek]{max-height:96px}
  .panel[data-sheet=peek] .panel-body{display:none}
  .panel[data-sheet=half]{max-height:45svh}
  .panel[data-sheet=full]{max-height:88svh}
  .panel-head{cursor:grab;touch-action:none;position:relative}
  .panel-head::before{content:'';position:absolute;left:50%;top:6px;width:44px;height:4px;margin-left:-22px;border-radius:2px;background:var(--border-strong)}
  .panel[data-sheet=half] ~ .legend{max-height:calc(55svh - 96px)}
  .panel[data-sheet=peek] ~ .legend{max-height:calc(100svh - 200px)}
  .panel[data-sheet=full] ~ .legend{display:none}
  .lm-swipe-close{top:auto;bottom:calc(45svh + 12px);right:12px}
}

/* Arabic: the guide panel sits on the right, the legend on the left */
@media (min-width:761px){
  .lang-ar .panel{left:auto;right:16px}
  .lang-ar .timebar{left:calc(50% - 202px)}
  .lang-ar .legend{right:auto;left:16px}
  .lang-ar .lm-swipe .sw-tag-a{left:14px}
}
.lang-ar .timebar,.lang-ar .lm-swipe{direction:ltr}
.lang-ar .timebar button{direction:rtl}
.lang-ar .timebar button{display:flex;flex-direction:column;align-items:center}