/* Private buyer link UI (tracker.js): the privacy notice, the Share button and
   its dialog, and "Who's viewing?". Rendered only when the page was opened
   through a buyer link; the public explorer never has any of these elements.
   Palette and shapes follow feedback.css. */

/* The share pill sits directly above the feedback button (bottom strip, left
   of the 414px panel), which is the one free spot feedback.css documents.
   Same z-index band: above the header (20), below #planViewer (30). */
.link-share{position:fixed;z-index:25;bottom:62px;right:426px;
  border:0;border-radius:999px;padding:10px 15px;background:#fffdf8f2;color:#18302c;
  font:650 11px/1 Inter,system-ui;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 6px 20px rgba(20,41,37,.2);backdrop-filter:blur(6px)}
.link-share:hover{background:#fff}
.link-share:focus-visible{outline:2px solid #c99843;outline-offset:2px}

/* The Mirage Visualisation logo, first in the header (top left). The header
   has no brand of its own any more (issue #18), so no hairline either. Its
   height follows the header: --header-h is 68px on a laptop, 78/104px on large
   displays, 60px on a phone, 52px on its side. 721-899px (and a phone under
   381px) shows the MV mark alone (tracker.js mountLogo); 721-1199px keeps the
   header gaps at 16px (12px up to 1099px). Measured after issue #18. */
/* contents: the <img> is the flex item. The <source> would be one too, an
   empty box that still takes a header gap, so it is hidden. */
.link-logo-box{display:contents}.link-logo-box source{display:none}
.link-logo{flex:none;display:block;width:auto;height:clamp(20px,calc(var(--header-h,68px) * .4),42px)}
@media (min-width:721px) and (max-width:1199px){.link-logo{height:clamp(20px,calc(var(--header-h,68px) * .38),26px)}
  header:has(#linkLogo){gap:16px}}
/* Tighter still to 1099px: 12px gaps, 16px sides (1024 is iPad landscape). */
@media (min-width:721px) and (max-width:1099px){header:has(#linkLogo){gap:12px;padding-left:16px;padding-right:16px}}
/* Phone portrait: 20px, so "Résidence ❄ FR" keeps one line at 360px. */
@media (max-width:720px) and (min-height:501px){.link-logo{height:20px}}

/* Cards: bottom strip, left of the panel. Above everything but the feedback
   modal (60), so a notice is never hidden behind the plan viewer. */
.link-stack{position:fixed;z-index:55;bottom:108px;right:426px;width:min(340px,calc(100vw - 32px));
  display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 190px);overflow:auto}
.link-stack:empty{display:none}
.link-card{padding:16px 18px;border-radius:14px;background:var(--glass,rgba(248,245,237,.98));
  color:var(--ink,#19302d);font:13px/1.45 Inter,system-ui;
  box-shadow:0 18px 50px rgba(20,41,37,.3);border:1px solid var(--line,rgba(25,48,45,.12))}
.link-card p{margin:6px 0 0}
.link-card strong{font-size:14px}
.link-card input{box-sizing:border-box;width:100%;margin-top:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line,rgba(25,48,45,.2));background:#fff;font:inherit;color:inherit}
.link-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.link-actions button{border:1px solid var(--line,rgba(25,48,45,.18));border-radius:10px;padding:9px 13px;
  background:#fff;color:var(--ink,#19302d);font:650 12px/1 Inter,system-ui;cursor:pointer}
.link-actions button.primary{border-color:transparent;background:var(--pine,#173d36);color:#fff}
.link-card .link-error{color:#c43e1d}
/* The hidden attribute loses to any display rule (MISTAKES.md M-001). */
.link-card [hidden]{display:none!important}

/* The privacy notice: a slim bar at the bottom LEFT of the map area, one row
   above the bottom controls (#terrainBadge sits at bottom:18px),
   starting at x=49 like #terrainBadge, clear of MapLibre's zoom/compass
   control (x 10-39, 87px tall), and only as wide as the space left of the
   feedback/share column — measured
   at 1440 and 1024 px, where centring it collided with "Return to the full
   residence" and a centred width formula squeezed it to 198 px. Fades by
   itself after five seconds (tracker.js). */
.link-notice{position:fixed;z-index:56;bottom:62px;left:49px;
  max-width:min(640px,calc(100vw - var(--panel-edge,414px) - 230px));
  display:flex;align-items:center;gap:10px;padding:7px 7px 7px 14px;border-radius:999px;
  background:rgba(24,48,44,.92);color:#f1ede3;font:12px/1.35 Inter,system-ui;
  box-shadow:0 6px 20px rgba(20,41,37,.25);backdrop-filter:blur(6px);transition:opacity .3s}
.link-notice.leaving{opacity:0}
.link-notice button{flex:none;border:0;border-radius:999px;padding:6px 12px;background:#f1ede3;color:#18302c;
  font:700 11px/1 Inter,system-ui;cursor:pointer}
.link-notice button:focus-visible{outline:2px solid #c99843;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.link-notice{transition:none}}

@media (max-width:720px){
  /* Mobile: the panel is a bottom sheet and the feedback button sits top
     right (feedback.css). The pill goes directly under the feedback button —
     the top left belongs to the 3D viewer's own control column — and the cards
     open below both. */
  /* From the header token, like the feedback button (header + 12px): a
     constant here broke the moment the touch-phone header grew to 110px. */
  .link-share{right:12px;bottom:auto;top:calc(var(--header-h) + 56px);padding:8px 12px}
  .link-stack{right:12px;left:12px;width:auto;bottom:auto;top:calc(var(--header-h) + 98px);max-height:calc(100vh - var(--header-h) - 126px)}
  /* Phone: full width, pinned to the very bottom over the sheet — it is two
     lines tall and gone in five seconds. */
  .link-notice{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));max-width:none;border-radius:14px}
}
@media print{.link-ui{display:none!important}}