/* Year pages: pop-up words, jump links, back button, previous/next written year.
   See js/years.js. Colours come from the :root tokens in style.css. */

/* a word with a pop-up explanation: dotted underline, reads as text */
.yr-term{
  font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  cursor:help;text-decoration:underline dotted var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.yr-term:hover,.yr-term:focus-visible{color:var(--gold);outline:none}

/* a jump link to the year where a pearl is told in full */
.yr-link{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.yr-link::after{content:" ↩";font-size:.8em;opacity:.7}
.yr-link:hover{color:var(--ink)}

.yr-pop{
  position:absolute;z-index:1000;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;
  padding:12px 34px 12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);
  font-size:14px;line-height:1.5;
}
.yr-pop p{margin:0}
.yr-pop-term{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--gold);margin-bottom:4px}
.yr-pop-period{margin-top:8px;font-size:11.5px;color:var(--ink-dim);font-family:'IBM Plex Mono',monospace}
.yr-pop-src{margin-top:6px;font-size:11.5px;color:var(--ink-dim);overflow-wrap:anywhere}
.yr-pop-src a{color:inherit}
.yr-pop-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--ink-dim);font-size:14px;cursor:pointer;padding:4px}
.yr-pop-x:hover{color:var(--ink)}

.yr-back{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:999;
  display:flex;align-items:stretch;background:var(--panel2);border:1px solid var(--gold);
  border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.5);overflow:hidden;max-width:calc(100vw - 32px);
}
.yr-back button{background:none;border:0;color:var(--ink);font:500 14px 'IBM Plex Sans',sans-serif;cursor:pointer}
.yr-back-go{padding:10px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yr-back-go:hover{color:var(--gold)}
.yr-back-x{padding:10px 14px 10px 8px;color:var(--ink-dim)!important}

.yr-nav{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.yr-nav[hidden]{display:none}
.yr-nav-b{
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;font:500 12.5px 'IBM Plex Mono',monospace;cursor:pointer;min-height:30px;
}
.yr-nav-b:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.yr-nav-b:disabled{opacity:.35;cursor:default}
.yr-nav-l{font-size:11px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase}

.yr-label{font-size:12px;color:var(--gold);font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;margin:2px 0 8px}
.yr-none{color:var(--ink-dim);font-style:italic}
.yr-col p+p{margin-top:.75em}

/* the map window's top bar: zoom buttons on the left, the Grid and
   Painted-empires toggles kept over on the right (the written-year buttons
   that used to sit between them now live in the bottom strip, below) */
.zoombar .zbtn[data-z]{order:1}
.zoombar .zbtn[data-z="oc"]{margin-right:auto}
.zoombar #gridToggle,.zoombar .bord-ctl{order:3}

/* in a strip along the very BOTTOM of the map window (#mapFoot), centred.
   Gold so they read as a different kind of control from the zoom buttons at
   the top (these move in time; those move the map). On narrow phones the
   label is dropped so the two buttons always fit on one line. */
.map-foot{
  display:flex;justify-content:center;align-items:center;
  padding:8px 12px;border-top:1px solid var(--line);background:var(--panel2);
}
.map-foot[hidden]{display:none}
.map-foot .yr-nav{margin:0;gap:8px;flex-wrap:nowrap;align-items:center;justify-content:center}
.map-foot .yr-nav-b{
  background:rgba(228,184,92,.14);border:1px solid var(--gold);border-radius:5px;color:var(--gold);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;padding:5px 12px;min-height:0;
}
.map-foot .yr-nav-b:hover:not(:disabled){background:var(--gold);color:var(--bg)}
.map-foot .yr-nav-b:disabled{opacity:.3}
.map-foot .yr-nav-l{font-size:9.5px;white-space:nowrap;color:var(--gold);opacity:.85;text-align:center}
@media (max-width:600px){
  .map-foot .yr-nav-b{padding:9px 13px;min-height:38px}
  .map-foot .yr-nav-l{display:none}
}