/* Spectrum CrossCheck · the map of Kochi, v2.1 (u3-foundation; MASTER-PLAN §3.9). Markup: ui/c/map.html + marker.html
   ({% kochi_map markers mode %}); the camera: core/ui/map.js. One static OpenStreetMap ground; outlets as markers: lit
   (nothing to do) quiet with their names, problems with a chip and a crisp ring in their colour that breathes, a count
   badge when more than one thing waits, not-live-yet outlets hollow, past outlets not drawn. The map labels' land-coloured
   halo below is the one text-shadow in the build (legibility over the map, not a glow). */
@layer components {
  .map { position: relative; overflow: hidden; background: var(--ground); aspect-ratio: var(--aspect, 16 / 10); isolation: isolate; }
  .map--ground { position: absolute; inset: 0; aspect-ratio: auto; }
  .map--head { aspect-ratio: auto; height: 330px; }
  .map--frame { border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
  .map--mini { border-radius: var(--r-4); box-shadow: var(--sh-1); }
  .map .ground { position: absolute; max-width: none; user-select: none; pointer-events: none; transition: opacity 900ms var(--ease-in-out); }
  .map .mlayer { position: absolute; inset: 0; z-index: 2; }
  /* the credit is a link: 24 px tall at least (WCAG 2.5.8), whatever opens over the map beside it (a drawer's rows) */
  .map .osm { position: absolute; right: 12px; bottom: 8px; z-index: 3; display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px;
    border-radius: 6px; font-size: 11px; color: var(--ink-3); text-decoration: none; background: rgba(var(--wash), .7); }
  .map .osm:hover { color: var(--ink); text-decoration: underline; }
  .map--frame .osm, .map--mini .osm, .map--head .osm { right: 10px; bottom: 6px; font-size: 10.5px; }
  .map--frame .osm { top: 8px; bottom: auto; }                  /* the key holds the bottom of Daniel's framed map */
  .map-empty { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 8px 14px; border-radius: 12px;
    background: var(--glass-strong); box-shadow: var(--sh-1); font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
  .map-unplaced { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
  .map > .map-unplaced { position: absolute; z-index: 3; right: 12px; bottom: 30px; max-width: min(360px, calc(100% - 24px)); margin: 0; padding: 6px 11px;
    border-radius: 11px; background: var(--glass-strong); box-shadow: var(--sh-1); font-size: 12.5px; }
  .map-unplaced a { display: inline-flex; align-items: center; min-height: var(--target); }
  .map-unplaced > span:first-child { font-weight: 600; color: var(--ink-2); }
  .map-unplaced .nw { white-space: nowrap; }                    /* a name keeps its comma (no line starts with one) */
  .map-key { position: absolute; z-index: 3; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 6px 11px;
    border-radius: 11px; font-size: 12.5px; font-weight: 560; color: var(--ink-2); background: var(--glass-strong); box-shadow: var(--sh-2); }
  .map-key .k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .map-key .cross { width: 15px; height: 15px; }
  .ringk { width: 13px; height: 13px; border-radius: 4px; flex: none; }
  .ringk.is-hold { background: var(--hold-tint); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--hold-ring); }
  .ringk.is-check { background: var(--check-tint); box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--check-ring); }

  /* ---- markers (scoped under .mlayer: master's ledgers use td.mk for their mark column) ---- */
  .mlayer .mk { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: block; border-radius: 13px; color: var(--ink); text-decoration: none; }
  .mlayer .mk:focus-visible { outline-offset: 4px; z-index: 6; }                 /* a focused marker over its neighbours */
  /* on a phone page (Daniel's framed map) a marker is a 44 px target around its tile, the phones' rule; its name keeps
     its place beside the tile */
  [data-density="phone"] .mlayer a.mk { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  [data-density="phone"] .mlayer a.mk.compact.right .lbl { left: calc(100% + 1px); }
  [data-density="phone"] .mlayer a.mk.compact.left .lbl { right: calc(100% + 1px); }
  .mlayer .mk .tile { position: relative; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--sh-2), var(--hi);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) linear; }
  .mlayer .mk .tile .cross { width: 22px; height: 22px; }
  .mlayer .mk:hover .tile { transform: translateY(-2px) scale(1.04); box-shadow: var(--sh-3); }
  .mlayer .mk.is-sel .tile { transform: scale(1.08); }
  /* a crisp ring in the family's colour (spread only, no blur) for money on hold or a needed look */
  .mlayer .mk.is-hold .tile { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--hold-ring), var(--sh-2); }
  .mlayer .mk.is-check .tile { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--check-ring), var(--sh-2); }
  .mlayer .mk .ring { position: absolute; inset: -4px; border-radius: 16px; border: 2px solid var(--hold-ring); opacity: 0; pointer-events: none; }
  .mlayer .mk.is-check .ring { border-color: var(--check-ring); }
  .mlayer .mk.is-hold .ring, .mlayer .mk.is-check .ring { animation: breathe 2.8s var(--ease-in-out) 1.6s infinite; }
  @keyframes breathe { 0% { opacity: .55; transform: scale(1); } 60% { opacity: 0; transform: scale(1.38); } 100% { opacity: 0; transform: scale(1.38); } }
  .mlayer .mk .bdgc { position: absolute; top: -9px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--hold-fill); color: var(--hold-on);
    font-size: 11.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper); font-variant-numeric: proportional-nums; }
  .mlayer .mk.is-check .bdgc { background: var(--check-fill); color: var(--check-on); }
  .mlayer .mk.is-wait .bdgc { background: var(--wait-fill); color: var(--wait-on); }
  .mlayer .mk .tile:has(.bdgc) .cross-dot { display: none; }          /* the badge carries the count; one cue, not two */
  /* lit: smaller, quieter; the cross is the message */
  .mlayer .mk.is-lit .tile { width: 30px; height: 30px; border-radius: 10px; box-shadow: var(--sh-1), var(--hi); }
  .mlayer .mk.is-lit .tile .cross { width: 17px; height: 17px; }
  /* not live yet: hollow */
  .mlayer .mk.is-quiet .tile { width: 28px; height: 28px; border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-5); }
  .mlayer .mk.is-quiet .tile .cross { width: 15px; height: 15px; opacity: .6; }
  .mlayer .mk.is-behind { visibility: hidden; }               /* map.js: a not-live-yet outlet under the Overview's answer */
  .mlayer .mk.is-off { visibility: hidden; }                  /* map.js: outside the frame the camera chose (not a target) */
  /* compact (Daniel's framed card, the outlet page's mini map) */
  .mlayer .mk.compact .tile { width: 30px; height: 30px; border-radius: 10px; }
  .mlayer .mk.compact .tile .cross { width: 17px; height: 17px; }
  .mlayer .mk.compact .bdgc { top: -8px; right: -8px; min-width: 18px; height: 18px; font-size: 11px; }
  .map--mini .mlayer .mk.compact:not(.is-here) { opacity: .55; }
  .mlayer .mk.is-here .tile { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink-2), var(--sh-2); }

  /* labels: a quiet name with the land's halo, or a chip */
  .mlayer .mk .lbl { position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
  .mlayer .mk.right .lbl { left: calc(100% + 10px); } .mlayer .mk.left .lbl { right: calc(100% + 10px); text-align: right; }
  .mlayer .mk.below .lbl { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
  .mlayer .mk.above .lbl { top: auto; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); text-align: center; }
  .mlayer .mk.is-lit.right .lbl { left: calc(100% + 8px); } .mlayer .mk.is-lit.left .lbl { right: calc(100% + 8px); }
  .mlayer .mk .lbl.quiet { font-size: 13px; font-weight: 600; color: var(--ink-2);
    text-shadow: 0 0 3px rgb(var(--wash)), 0 0 6px rgb(var(--wash)), 0 0 10px rgb(var(--wash)); }
  .mlayer .mk.is-lit .lbl.quiet { font-size: 12.5px; font-weight: 560; color: var(--ink-3); }
  .mlayer .mk .lbl.quiet.small { font-size: 11.5px; font-weight: 640; color: var(--ink); }
  .mlayer .mk .lbl.quiet.faint { font-size: 12px; font-weight: 520; color: var(--ink-3); }
  .mlayer .mk .lbl.mchip { padding: 7px 11px 8px; border-radius: 12px; background: var(--paper); box-shadow: var(--sh-2); line-height: 1.25; text-align: left; }
  .mlayer .mk .lbl.mchip b { display: block; font-size: 13.5px; font-weight: 640; color: var(--ink); }
  .mlayer .mk .lbl.mchip i { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; margin-top: 1px; }
  .mlayer .mk.is-hold .lbl.mchip i { color: var(--hold); } .mlayer .mk.is-check .lbl.mchip i { color: var(--check); } .mlayer .mk.is-wait .lbl.mchip i { color: var(--wait); }

  /* an outlet beyond the Kochi map: an edge marker with an arrow pointing its way, its name and distance */
  .mlayer .mk-far .far-arrow { position: absolute; left: 50%; top: 50%; width: 12px; height: 10px; margin: -5px 0 0 -6px; pointer-events: none;
    transform: rotate(var(--deg, 90deg)) translateY(-27px); }
  .mlayer .mk-far.is-lit .far-arrow, .mlayer .mk-far.compact .far-arrow { transform: rotate(var(--deg, 90deg)) translateY(-23px); }
  .mlayer .mk-far .far-arrow::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--ink-2); }
  .mlayer .mk .lbl.far { font-size: 12.5px; font-weight: 520; color: var(--ink-2);
    text-shadow: 0 0 3px rgb(var(--wash)), 0 0 6px rgb(var(--wash)), 0 0 10px rgb(var(--wash)); }
  .mlayer .mk .lbl.far b { font-weight: 640; color: var(--ink); }

  /* arrival (map.js adds .is-arriving once): the outlets pop west to east, then the lit crosses switch on like shop signs */
  .map.is-arriving .ground { animation: fade 700ms ease both; }
  /* the tile pops, not the link: the marker's target keeps its full size while it arrives */
  .map.is-arriving .mlayer .mk .tile { animation: pop 620ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
  .map.is-arriving .mlayer .mk .lbl { animation: fade 500ms ease both; animation-delay: calc(var(--i, 0) * 70ms + 620ms); }
  .map.is-arriving .mlayer .mk.is-lit .tile svg { animation: switch-on 900ms ease both; animation-delay: calc(var(--i, 0) * 70ms + 560ms); }
  @keyframes pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
  @keyframes switch-on { 0% { filter: saturate(0) brightness(1.25); opacity: .55; } 30% { filter: saturate(.3) brightness(1.1); opacity: 1; }
    38% { filter: saturate(0) brightness(1.2); opacity: .7; } 52%, 100% { filter: none; opacity: 1; } }
}
/* reduced motion: fades, no travel, no loops (the ring stops breathing) */
@media (prefers-reduced-motion: reduce) {
  @layer components {
    .map.is-arriving .mlayer .mk .tile { animation: fade 400ms ease both !important; }
    .map.is-arriving .mlayer .mk .lbl { animation: fade 300ms ease both !important; }      /* labels too: final within ~0.7 s */
    .map.is-arriving .mlayer .mk.is-lit .tile svg { animation: none !important; }
    .mlayer .mk .ring { animation: none !important; }
  }
}
@media print { @layer components { .map, .map-unplaced { display: none !important; } } }