/* MapFun — History mode chrome (src/time/history.js, src/time/empires.js): city tooltip, polity card, Empires gallery + blurb */

/* ---- city tooltip (inside the stage overlay) ---------------------------------------------- */
.hist-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px; font-size: 12.5px; color: var(--ink);
  background: var(--panel-solid); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
  font-variant-numeric: tabular-nums; animation: fade-in var(--t-fast);
}
:root[data-theme="atlas"] .hist-tip { font-style: italic; }

/* ---- polity card ---------------------------------------------------------------------------------- */
.hist-card {
  position: absolute; z-index: 6; pointer-events: auto; width: 268px; max-width: calc(100vw - 16px);
  padding: 12px 14px 12px; animation: pop-in var(--t-med);
}
.hist-card .close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
.hist-card .eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin: 0 28px 4px 0; }
.hist-card h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; padding-right: 20px; }
.hist-card dl.meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0 0 8px; font-size: 13px; }
.hist-card dl.meta dt { color: var(--ink-muted); }
.hist-card dl.meta dd { margin: 0; font-weight: 500; }
.hist-card .actions { display: flex; gap: 6px; margin-top: 6px; }
.hist-card .actions .btn { height: 28px; font-size: 12.5px; padding: 0 10px; }
.hist-card .actions .btn:hover { text-decoration: none; }
@media (max-width: 720px) { .hist-card { right: 8px; width: auto; } }

/* ---- Empires gallery ------------------------------------------------------------------------------- */
.empires {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--tl-h, 96px) + 26px + var(--safe-b));
  width: min(920px, calc(100vw - 24px)); max-height: min(520px, calc(100vh - var(--topbar-h) - var(--tl-h, 96px) - 60px));
  display: flex; flex-direction: column; z-index: 22; animation: pop-in var(--t-med); overflow: hidden;
}
.empires .emp-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--panel-border); }
.empires .emp-head h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.empires .emp-head .hint { color: var(--ink-muted); font-size: 12.5px; }
.empires .spacer, .emp-nav .spacer { flex: 1; }
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; padding: 12px 14px 14px; overflow: auto; }
.emp-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 10px; border-radius: 10px; text-align: center; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.emp-card:hover, .emp-card:focus-visible { background: color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.emp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.emp-card[aria-selected="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); }
.emp-thumbwrap { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--ocean-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 16px rgba(0,0,0,.22); position: relative; }
.emp-thumbwrap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), transparent 55%); pointer-events: none; }
:root[data-theme="atlas"] .emp-thumbwrap::after { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 55%); }
.emp-thumb { width: 104px; height: 104px; opacity: 0; transition: opacity 260ms ease; }
.emp-card.drawn .emp-thumb { opacity: 1; }
.emp-name { font-weight: 600; font-size: 13px; line-height: 1.25; }
.emp-peak { font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); letter-spacing: .01em; }
:root[data-theme="atlas"] .emp-peak { font-family: var(--font-ui); font-style: italic; font-size: 12.5px; }
:root.empires-open #coords, :root.empires-open #attribution { opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }

/* ---- blurb card ------------------------------------------------------------------------------------- */
.emp-blurb {
  position: absolute; left: 12px; bottom: calc(var(--tl-h, 96px) + 28px + var(--safe-b)); width: 340px; max-width: calc(100vw - 24px);
  padding: 12px 16px 14px; z-index: 15; animation: slide-in-left var(--t-med);
}
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.emp-blurb-head { display: flex; align-items: center; gap: 8px; }
.emp-blurb-head .eyebrow { flex: 1; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.emp-blurb-head .close { width: 28px; height: 28px; margin-right: -6px; }
.emp-blurb h3 { margin: 2px 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
.emp-blurb p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; }
.emp-blurb p.note { color: var(--ink-muted); font-size: 12.5px; }
.emp-nav { display: flex; gap: 6px; align-items: center; }
.emp-nav .btn { height: 30px; font-size: 13px; padding: 0 10px; }
.emp-nav a.btn:hover { text-decoration: none; }

/* ---- phones: gallery and blurb become bottom sheets above the timeline -------------------------------- */
@media (max-width: 720px) {
  .empires { left: 8px; right: 8px; transform: none; width: auto; bottom: calc(var(--tl-h, 120px) + 14px + var(--safe-b)); max-height: 56vh; max-height: 56dvh; border-radius: 14px; }
  .empires .emp-head { padding: 8px 8px 8px 12px; }
  .empires .emp-head .hint { display: none; }
  .emp-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 10px; }
  .emp-thumbwrap, .emp-thumb { width: 72px; height: 72px; }
  .emp-blurb { left: 8px; right: 8px; width: auto; bottom: calc(var(--tl-h, 120px) + 14px + var(--safe-b)); padding: 10px 14px 12px; }
  .emp-blurb p { font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .emp-thumb { transition: none; } }