/* WO-LANDMARKSTACK-001 -- unlock notification stack (public/landmarks.js).
   Injected via a <link> landmarks.js creates itself at load time -- see its
   ensureStylesheet -- because index.html is out of this task's file
   ownership. Reuses public/style.css's existing :root tokens by name
   (--ink/--panel-bg/--panel-backdrop/--outline/--outline-width/--shadow-sm/
   --pc-font-body/--accent/--focus-ring/--radius-chrome), and references the
   DESIGN-SPEC's newer tokens (--sp-N, --r-chrome, --r-pill, --lift-1,
   --dur-quick, --ease-reveal, --pc-chrome-sunk) THROUGH A FALLBACK in every
   var() call, because style.css (owned by a different parallel branch) may
   not have landed those tokens yet in this tree -- the fallback keeps this
   file correct standalone and picks up the real token automatically once
   that branch merges.

   PLACEMENT (measured, headless Chromium, real index.html, this tree,
   2026-09-23): the DESIGN-SPEC protects the centred 50%/50% viewport rect
   for the paintable map (x:90-270/y:185-555 at 360x740; x:100-300/y:200-600
   at 400x800 and 1200x800) -- nothing new may overlap it. Every existing
   fixed element on a phone-width screen already fills the top strip
   (chrome-top-left icons, chrome-top-right icons, #landmarks-panel's
   compass) and the bottom strip (#pc-bottom-dock, starting y522 at 360px
   width). The one gap that clears the centre rect on X alone (so it is
   safe regardless of Y) sits at x:12-90ish, between .pc-legal-footer's
   measured bottom edge (y352, all widths -- its position is not
   breakpoint-dependent) and #pc-bottom-dock's measured top edge (y522 at
   360x740, the tightest case measured; y582 at 400x800; y628 at 1200x800).
   That is why this panel is narrow (74px phone) rather than a preference --
   width is capped by the gap between the centre rect's x-start and the
   legal footer's own x-start (x12), not by a design choice. Desktop has
   far more room (the same left column is ~288px wide before the centre
   rect starts at x300), so it widens at the existing 600px breakpoint
   public/style.css's own .side-panel rule already uses. */

.pc-landmark-stack {
  position: fixed;
  left: 12px;
  top: 364px; /* 12px below .pc-legal-footer's measured bottom edge (352px) */
  width: 74px;
  z-index: 27; /* between .chrome-corner's 25 and .side-panel's 30 -- never overlaps either */
  font-family: var(--pc-font-body);
  color: var(--ink);
}
@media (min-width: 601px) {
  .pc-landmark-stack { width: 200px; }
}

.pc-landmark-stack-toggle {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  position: relative;
}
.pc-landmark-stack-toggle:focus-visible {
  outline: 4px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
}

.pc-landmark-stack-peek {
  position: relative;
}

.pc-landmark-peek-card {
  box-sizing: border-box;
  width: 100%;
  padding: var(--sp-2, 8px);
  background: var(--pc-chrome-sunk, var(--panel-bg));
  -webkit-backdrop-filter: var(--panel-backdrop);
  backdrop-filter: var(--panel-backdrop);
  border: var(--outline-width) solid var(--outline);
  border-radius: var(--r-chrome, var(--radius-chrome));
  box-shadow: var(--lift-1, var(--shadow-sm));
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  overflow-wrap: anywhere;
  transition: transform var(--dur-quick, 110ms) var(--ease-reveal, ease-out),
    opacity var(--dur-quick, 110ms) var(--ease-reveal, ease-out);
}
/* The front card sits in normal flow (defines the toggle's real height);
   cards 1/2 peek out from behind it -- offset down, dimmer, lower z-index,
   no scale (74px is already too narrow to shrink text further and stay
   legible). This is the "Apple notification stack" cue at this width. */
.pc-landmark-peek-card[data-peek-index="0"] {
  position: relative;
  z-index: 3;
}
.pc-landmark-peek-card[data-peek-index="1"] {
  position: absolute;
  inset: 6px 3px auto 3px;
  z-index: 2;
  opacity: 0.7;
}
.pc-landmark-peek-card[data-peek-index="2"] {
  position: absolute;
  inset: 11px 6px auto 6px;
  z-index: 1;
  opacity: 0.45;
}

.pc-landmark-stack-label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--sp-2, 8px);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-backdrop);
  backdrop-filter: var(--panel-backdrop);
  border: var(--outline-width) solid var(--outline);
  border-radius: var(--r-chrome, var(--radius-chrome));
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.pc-landmark-stack-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  box-sizing: border-box;
  padding: 1px 4px;
  background: var(--accent);
  color: var(--accent-ink, var(--ink));
  border: 2px solid var(--outline);
  border-radius: var(--r-pill, 999px);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  z-index: 4;
}

.pc-landmark-stack-list {
  box-sizing: border-box;
  width: 100%;
  max-height: 88px; /* measured (headless, 360x740, tightest case): label+margin+list must clear #pc-bottom-dock's top edge (y522) from top:364 -- see this file's own header comment */
  overflow-y: auto;
  margin-top: var(--sp-2, 8px);
  padding: var(--sp-1, 4px);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-backdrop);
  backdrop-filter: var(--panel-backdrop);
  border: var(--outline-width) solid var(--outline);
  border-radius: var(--r-chrome, var(--radius-chrome));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
}
@media (min-width: 601px) {
  .pc-landmark-stack-list { max-height: 220px; }
}

.pc-landmark-row {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: var(--sp-1, 4px) var(--sp-2, 8px);
  font-family: var(--pc-font-body);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  cursor: pointer;
  border-radius: var(--r-chrome, var(--radius-chrome));
}
.pc-landmark-row:hover {
  background: var(--accent);
  color: var(--accent-ink, var(--ink));
}
.pc-landmark-row:focus-visible {
  outline: 4px solid var(--focus-ring, var(--accent));
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .pc-landmark-peek-card {
    transition: none;
  }
}