/* The area map on place pages (see areamap.js). Kept out of styles.css so the
   ledger and homepage stylesheets are untouched by it. */
.area-map { margin: 0 0 30px; }
.area-map .am-box { position: relative; width: 100%; height: 360px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  background: var(--paper); overflow: hidden; touch-action: manipulation; }
.area-map canvas { display: block; }
.am-labels { position: absolute; inset: 0; pointer-events: none; }
.am-venue, .am-road { position: absolute; white-space: nowrap; font-family: var(--sans);
  text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper); }
.am-venue { font-size: 11.5px; font-weight: 700; font-stretch: 88%; color: var(--ink); }
.am-venue.lit { color: var(--accent); }
.am-road { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(18,17,15,.45); }
.am-tip { position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 7px 10px 8px; border-radius: 2px;
  font-family: var(--sans); font-size: 12px; line-height: 16px; max-width: 220px;
  white-space: normal; z-index: 3; }
.am-tip b { display: block; font-weight: 700; }
.am-tip .w { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247,246,243,.72); margin-top: 2px; }
.am-tip .w.op { color: #9fd3d4; }
.am-tip .now { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #f0a193; margin-top: 2px; }
.am-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; align-items: center; }
.am-legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.am-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.am-legend .k-now { background: #8e1d13; }
.am-legend .k-hh { background: rgba(140,135,126,.72); }
.am-legend .k-op { background: rgba(31,92,94,.8); }
.am-cap { margin-top: 8px; }
.ledger tr.am-flash td { background: color-mix(in srgb, var(--accent) 10%, transparent);
  transition: background .6s ease; }
@media (max-width: 720px) {
  .area-map { margin-bottom: 22px; }
  .am-venue { font-size: 11px; }
  .am-legend { gap: 6px 16px; }
  .am-legend span { font-size: 10.5px; }
}