/* css/area.css: the Area mode of js/area.js (place labels on pins, edge arrows for the far places, the site label over
   the tower, the Area sheet with its filter, list and place card). Adapted from the Blu Marine area.css (read only,
   10_BLU_MARINE/review/realism/integ/site/css/area.css): two line labels (name over distance), a soft fade in and out
   instead of a pop, one label style for every category. Uses the tokens of css/app.css. */

.ar-layer { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; contain: layout style; }

/* ---- a place: the label stands on a pin line (--stem) above (or below, .dn) its anchor; the element sits on the anchor */
.am, .ar-site, .ar-edge { position: absolute; left: 0; top: 0; will-change: transform, opacity; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility 0s linear .32s; }
.am.on, .ar-site.on, .ar-edge.on { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s; }
/* (js/area.js warm(): painted once behind the loading screen) */
.ar-layer.warm .am, .ar-layer.warm .ar-site, .ar-layer.warm .ar-edge { visibility: visible; opacity: 0.01; transition: none; }
.am-box { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; white-space: nowrap;
  color: var(--ink); background: linear-gradient(180deg, rgba(30, 35, 42, 0.74), rgba(12, 15, 19, 0.76)); border: 1px solid rgba(238, 241, 244, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 18px rgba(4, 6, 9, 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  transform: translate(-50%, calc(-100% - var(--stem, 18px))); }
.am.dn .am-box { transform: translate(-50%, var(--stem, 18px)); }
.am-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), 0.15); border: 1px solid rgba(var(--accent-rgb), 0.28); }
.am-ic svg { width: 15px; height: 15px; }
.am-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.18; }
.am-n { font-size: 12.5px; font-weight: 600; letter-spacing: 0.005em; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.am-d { font-size: 11px; color: var(--mute-2); font-variant-numeric: tabular-nums; }
.am-d i { font-style: normal; color: var(--mute); }
/* the pin: a hairline from the label to a dot on the place */
.am::after, .ar-site::after { content: ""; position: absolute; left: -0.5px; top: calc(-1 * var(--stem, 18px)); width: 1px; height: var(--stem, 18px); background: linear-gradient(180deg, rgba(238, 241, 244, 0.75), rgba(238, 241, 244, 0.35)); }
.am.dn::after { top: 0; background: linear-gradient(0deg, rgba(238, 241, 244, 0.75), rgba(238, 241, 244, 0.35)); }
.am::before, .ar-site::before { content: ""; position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(10, 13, 16, 0.45); }
.am.sel .am-box { border-color: rgba(var(--accent-rgb), 0.85); background: linear-gradient(180deg, rgba(58, 49, 36, 0.86), rgba(20, 17, 13, 0.86)); }
.am.sel::before { background: var(--accent); }
@media (max-width: 599px) { .am-box { gap: 7px; padding: 3px 10px 3px 3px; } .am-ic { width: 26px; height: 26px; } .am-ic svg { width: 14px; height: 14px; } .am-n { font-size: 12px; max-width: 150px; } .am-d { font-size: 11px; } }

/* ---- the site label: the project over the tower, its pin in the steel blue of the Highframe mark */
.ar-site .am-box { padding: 6px 14px 6px 8px; gap: 9px; border-color: rgba(var(--steel-rgb), 0.55); background: linear-gradient(180deg, rgba(36, 46, 58, 0.86), rgba(14, 19, 26, 0.88)); }
.ar-site .am-box img { width: 18px; height: 20px; display: block; }
.ar-site .am-n { font: 400 11.5px/1.2 var(--font-display); letter-spacing: 0.3em; text-transform: uppercase; }
.ar-site::after { background: linear-gradient(180deg, rgba(var(--steel-rgb), 0.95), rgba(var(--steel-rgb), 0.5)); }
.ar-site.dn .am-box { transform: translate(-50%, var(--stem, 30px)); }
.ar-site.dn::after { top: 0; background: linear-gradient(0deg, rgba(var(--steel-rgb), 0.95), rgba(var(--steel-rgb), 0.5)); }
.ar-site::before { background: var(--steel); }

/* ---- edge arrows: the far places at the edge of the free view, pointing at them */
.ar-edge .am-box { transform: none; padding: 4px 12px 4px 4px; border-style: dashed; border-color: rgba(238, 241, 244, 0.26); }
.ar-edge .am-ic { color: var(--steel); background: rgba(var(--steel-rgb), 0.12); border-color: rgba(var(--steel-rgb), 0.3); }
.ar-edge .am-ic svg { width: 16px; height: 16px; }
.ar-edge .ar-arw { display: grid; place-items: center; width: 16px; height: 16px; }

/* ---- the Area sheet */
.ar-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.ar-filter button { min-height: 44px; min-width: 44px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--mute-2); font-size: 12.5px; font-weight: 500; }
.ar-filter button.on { color: var(--ink); border-color: rgba(var(--accent-rgb), 0.7); background: rgba(var(--accent-rgb), 0.16); }
.ar-actions { display: flex; gap: 8px; margin: 0 0 10px; }
.ar-actions button { flex: 1 1 0; min-height: 44px; padding: 0 12px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ar-actions button.primary { border-color: transparent; background: var(--accent); color: #17130d; }
.ar-actions button:disabled { opacity: 0.45; cursor: default; }
.ar-list > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--mute-2); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; }
.ar-list > summary::-webkit-details-marker { display: none; }
.ar-list > summary svg { width: 16px; height: 16px; transition: transform .2s; }
.ar-list[open] > summary svg { transform: rotate(180deg); }
.ar-row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; margin: 0; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: var(--ink); }
@media (hover: hover) { .ar-row:hover { background: rgba(255, 255, 255, 0.06); } }
.ar-row.sel { background: rgba(var(--accent-rgb), 0.12); }
.ar-row .am-ic { width: 32px; height: 32px; }
.ar-row .am-ic svg { width: 16px; height: 16px; }
.ar-rt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ar-rt b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-rt small { color: var(--mute); font-size: 11.5px; }
.ar-dist { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--mute-2); line-height: 1.2; }
.ar-dist small { display: block; color: var(--mute); font-size: 11px; }
.ar-src { margin: 12px 0 0; color: var(--mute); font-size: 11.5px; line-height: 1.5; }
/* the place card */
.ar-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; margin: -8px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; }
.ar-back svg { width: 18px; height: 18px; flex: none; }
.ar-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ar-card-h .am-ic { width: 40px; height: 40px; }
.ar-card-h .am-ic svg { width: 19px; height: 19px; }
.ar-card-h h3 { margin: 2px 0 0; font: 500 18px/1.2 var(--font-display); }
.ar-about { margin: 0 0 10px; font-size: 13.5px; color: var(--mute-2); }
.ar-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 13px; }
.ar-dl dt { color: var(--mute); }
.ar-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .ar-card-h h3 { font-size: 16.5px; } .ar-about { font-size: 13px; } }
/* phones: the list sheet is the filter (one row that scrolls sideways inside the sheet) and the folded list; the close
   button already goes back to the tower, and the honesty line is on screen under the toolbar */
@media (max-width: 599px), (orientation: landscape) and (max-height: 500px) {
  .ar-listacts { display: none; }
  .ar-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 4px; padding: 0 16px 2px; touch-action: pan-x; }
  .ar-filter::-webkit-scrollbar { display: none; }
  .ar-filter button { flex: none; }
  .ar-list:not([open]) ~ .ar-src, .ar-dl ~ .ar-actions ~ .ar-src { display: none; }
  .ar-src { font-size: 11px; }
}