/* Interactive images (crest-voland issues #28, #31, #32): the layer over a
   picture in the residence gallery (#mediaLightbox) and over a panorama.
   annotations.js lays .ann-layer exactly over the picture's content box;
   everything inside it is positioned in percentages of the picture, so it
   follows the image at every size.

   THE LOOK IS THE PICTURE'S THEME. annotations.js sets its colours, corners,
   type, density and motion as --ann-* custom properties on the host
   (annotation-theme.js themeVars) and its style as data-ann-style
   (minimal | glass | swiss); nothing below names a colour of its own except
   white rings and shadows. Each shape also carries its own colours and its
   idle and active values (--ann-color, --idle-stroke, --active-fill...): the
   theme's, or the author's when the element overrides the theme. The
   transition between the two states is the "reveal". */

.lightbox-stage{position:relative;min-width:0}
.ann-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.ann-layer[data-mode="clean"]{display:none}
.ann-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.ann-shape{fill:var(--ann-fill);fill-opacity:var(--idle-fill);stroke:var(--ann-color);stroke-opacity:var(--idle-stroke);
  stroke-width:var(--ann-w);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  pointer-events:visiblePainted;cursor:pointer;transition:fill-opacity var(--ann-dur,.2s) ease,stroke-opacity var(--ann-dur,.2s) ease,stroke-width var(--ann-dur,.2s) ease}
.ann-line{fill:none}
.ann-hit{fill:none;stroke:transparent;stroke-width:18px;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer}
.ann-arrow{fill:var(--ann-color);fill-opacity:var(--idle-stroke)}
.ann-shape.is-active,.ann-layer[data-mode="all"] .ann-shape,.ann-layer[data-mode="availability"] .ann-shape.is-active{
  fill:var(--ann-fill-active);stroke:var(--ann-color-active);fill-opacity:var(--active-fill);stroke-opacity:var(--active-stroke);
  stroke-width:calc(var(--ann-w) + 1px)}
/* A line has no inside: the hovered or chosen fill must not close it into a wedge (the editor's
   preview already draws none). */
.ann-layer[data-mode] .ann-shape.ann-line,.ann-layer[data-mode] .ann-shape.ann-line.is-active{fill:none}
.ann-leader{stroke:var(--ann-color);stroke-width:1.5px;vector-effect:non-scaling-stroke;stroke-opacity:.9;opacity:0;transition:opacity var(--ann-dur,.2s) ease}
/* The dimming around a chosen element (theme "dim"): the rest of the picture
   recedes, the subject keeps its own light. */
.ann-dim{fill:var(--ann-backdrop);opacity:0;pointer-events:none;transition:opacity var(--ann-dur,.2s) ease}
.ann-dim.is-on{opacity:1}

/* Points: screen-sized, whatever the picture's size. A white ring and a dark
   hairline outside it, so a marker reads over sky, snow and facade alike. */
.ann-layer .ann-pin{position:absolute;transform:translate(-50%,-50%);width:14px;height:14px;padding:0;border:2px solid #ffffff;
  border-radius:999px;background:var(--ann-color);color:var(--ann-on-color,#ffffff);opacity:max(var(--idle-stroke),.6);
  pointer-events:auto;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 1px 4px rgba(0,0,0,.4);
  font:700 11px/1 var(--ann-font,var(--brand-font));display:grid;place-items:center;
  transition:opacity var(--ann-dur,.2s) ease,width var(--ann-dur,.2s) ease,height var(--ann-dur,.2s) ease}
.ann-layer .ann-pin.is-big{width:24px;height:24px;font-size:12px}
.ann-layer .ann-pin svg{width:14px;height:14px}
.ann-layer .ann-pin.thumb{width:40px;height:40px;overflow:hidden;background:#ffffff}
.ann-layer .ann-pin.thumb img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.ann-layer .ann-pin.is-active,.ann-layer[data-mode="all"] .ann-pin{opacity:1;width:20px;height:20px;background:var(--ann-color-active)}
.ann-layer .ann-pin.is-big.is-active,.ann-layer[data-mode="all"] .ann-pin.is-big{width:30px;height:30px;font-size:14px}
.ann-layer .ann-pin.thumb.is-active,.ann-layer[data-mode="all"] .ann-pin.thumb{width:48px;height:48px;background:#ffffff;border-color:var(--ann-color-active)}
.ann-layer .ann-pin.is-selected{box-shadow:0 0 0 3px var(--ann-color-active),0 2px 8px rgba(0,0,0,.45)}
.ann-layer .ann-pin:hover{background:var(--ann-color-active)}
.ann-layer .ann-pin.thumb:hover{background:#ffffff}
/* Glass: floating translucent circles with a coloured core. */
[data-ann-style="glass"] .ann-layer .ann-pin{width:26px;height:26px;border:1px solid var(--ann-border);background:var(--ann-surface-a);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ann-color)}
[data-ann-style="glass"] .ann-layer .ann-pin.dot::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--ann-color)}
[data-ann-style="glass"] .ann-layer .ann-pin.is-big{width:30px;height:30px}
[data-ann-style="glass"] .ann-layer .ann-pin.is-active,[data-ann-style="glass"] .ann-layer[data-mode="all"] .ann-pin:not(.thumb){
  width:32px;height:32px;background:var(--ann-color-active);color:#ffffff;border-color:#ffffff}
[data-ann-style="glass"] .ann-layer .ann-pin.dot.is-active::after{background:#ffffff}
/* Swiss: numbered squares. */
[data-ann-style="swiss"] .ann-layer .ann-pin{border-radius:0;width:14px;height:14px}
[data-ann-style="swiss"] .ann-layer .ann-pin.is-big{width:24px;height:24px;font-weight:800}
[data-ann-style="swiss"] .ann-layer .ann-pin.is-active,[data-ann-style="swiss"] .ann-layer[data-mode="all"] .ann-pin{width:20px;height:20px}
[data-ann-style="swiss"] .ann-layer .ann-pin.is-big.is-active,[data-ann-style="swiss"] .ann-layer[data-mode="all"] .ann-pin.is-big{width:30px;height:30px}
[data-ann-style="swiss"] .ann-layer .ann-pin.thumb{border-radius:0}

/* The reveal (#31, #34): when the picture opens, each element in its turn
   (--ann-delay, annotations.js) — a pin grows in and sends one ring out, a
   zone or a line flashes, a title fades in — then still (annotations.js
   removes the class, ~2 s). Continuous motion would compete with the picture. */
@keyframes ann-pulse{0%{box-shadow:0 0 0 0 var(--ann-color),0 1px 4px rgba(0,0,0,.4)}100%{box-shadow:0 0 0 14px transparent,0 1px 4px rgba(0,0,0,.4)}}
@keyframes ann-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes ann-flash{0%{fill-opacity:0;stroke-opacity:0}40%{fill-opacity:var(--active-fill);stroke-opacity:1}}
.ann-layer.is-intro .ann-pin{animation:ann-pop .45s ease-out var(--ann-delay,0s) backwards,ann-pulse .9s ease-out calc(var(--ann-delay,0s) + .35s)}
.ann-layer.is-intro .ann-shape{animation:ann-flash 1.1s ease-in-out var(--ann-delay,0s) backwards}
.ann-layer.is-intro .ann-label.is-always{animation:ann-fade .45s ease-out var(--ann-delay,0s) backwards}
/* The light along a zone's outline or a line (#35): a short bright stretch
   of the path (pathLength 100, one dash per 200 so only one shows) travels it
   once at the reveal, then every GLOW_EVERY ms (annotations.js). Its strength
   is the 0.8 of ann-trace. */
.ann-glow{fill:none;stroke:var(--ann-color-active);stroke-width:calc(var(--ann-w) + 2px);vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 186;stroke-dashoffset:14;opacity:0;pointer-events:none;
  filter:drop-shadow(0 0 3px var(--ann-color-active))}
@keyframes ann-trace{0%{stroke-dashoffset:14;opacity:0}15%,80%{opacity:.8}100%{stroke-dashoffset:-100;opacity:0}}
.ann-layer.is-glow .ann-glow{animation:ann-trace var(--ann-glow-run,1.6s) ease-in-out}
.ann-layer.is-intro .ann-shape.is-hidden{animation:none}

/* Titles on the picture. A placed label (fixed, connected, or a text
   element) sits where the author put it; the others appear beside their
   subject in "Show all" only. */
.ann-layer .ann-label{position:absolute;transform:translate(-50%,-50%);max-width:220px;padding:5px 10px;border:1px solid var(--ann-color);
  border-radius:var(--ann-radius-sm,6px);background:var(--ann-surface-a,#ffffff);color:var(--ann-text,#111111);
  font:600 12px/1.25 var(--ann-font,var(--brand-font));text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.25);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:pointer;opacity:0;visibility:hidden;
  transition:opacity var(--ann-dur,.2s) ease,visibility var(--ann-dur,.2s)}
.ann-layer .ann-label[data-offset]{transform:translate(14px,-130%)}
.ann-layer .ann-label.is-always,.ann-layer .ann-label.is-placed.is-active,
.ann-layer[data-mode="all"] .ann-label{opacity:1;visibility:visible}
.ann-layer .ann-label.is-active{border-width:2px;border-color:var(--ann-color-active)}
[data-ann-style="swiss"] .ann-layer .ann-label{border:0;border-left:3px solid var(--ann-color);box-shadow:none;font-weight:800;letter-spacing:.01em;text-align:left}
.ann-layer:not([data-mode="clean"]) .ann-leader.is-active,.ann-layer[data-mode="all"] .ann-leader{opacity:1}
.ann-leader.is-always{opacity:1}

/* Buttons of the layer share the theme's corners, type and primary colour. */
.ann-host .ann-tools button,.ann-host .ann-action,.ann-host .ann-tour-nav button,.ann-host .ann-groups button,.ann-host .ann-more{
  font-family:var(--ann-font,var(--brand-font))}

/* The mode switch, top left, opposite the close button. */
.ann-host .ann-tools{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:4px;padding:4px;
  border-radius:calc(var(--ann-radius-sm,6px) + 4px);background:var(--ann-surface-a,#ffffff);color:var(--ann-text,#111111);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.ann-host .ann-tools button{height:32px;padding:0 12px;font-size:12px;font-weight:600;line-height:1;border:0;border-radius:var(--ann-radius-sm,6px);
  background:transparent;color:inherit;cursor:pointer}
.ann-host .ann-tools button:hover{background:var(--ann-selection-soft,rgba(0,0,0,.06))}
.ann-host .ann-tools button[aria-pressed="true"]{background:var(--ann-primary,#111111);color:var(--ann-on-primary,#ffffff)}
.ann-tools-label{padding:0 6px 0 10px;font:600 10px/1 var(--ann-font,var(--brand-font));letter-spacing:.08em;text-transform:uppercase;color:var(--ann-text-2,#7d7d7d)}
[data-ann-style="swiss"] .ann-tools button{text-transform:uppercase;letter-spacing:.04em;font-weight:800}

/* Hover and keyboard focus: a short label, not the whole card (#31, #32). */
.ann-tip{position:fixed;z-index:4;max-width:260px;padding:6px 10px;border:1px solid var(--ann-border,#e8e8e8);border-radius:var(--ann-radius-sm,6px);
  background:var(--ann-surface-a,#ffffff);color:var(--ann-text,#111111);box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none;
  font:12px/1.3 var(--ann-font,var(--brand-font));display:grid;gap:2px;animation:ann-fade var(--ann-dur,.15s) ease}
.ann-tip strong{font:var(--ann-head-weight,700) 13px/1.25 var(--ann-head-font,var(--brand-font));letter-spacing:var(--ann-head-tracking,0)}
.ann-tip span{color:var(--ann-text-2,#555555)}
.ann-tip[hidden]{display:none!important}
[data-ann-style="swiss"] .ann-tip{border:0;border-top:3px solid var(--ann-primary);box-shadow:0 2px 0 rgba(0,0,0,.12)}

/* The card. Its place (beside, overlay, sheet) is written by annotations.js;
   fixed, so it can leave the picture when the subject is near an edge, and
   never the screen. */
.ann-card{position:fixed;z-index:3;width:var(--ann-card-w,300px);max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto;
  box-sizing:border-box;padding:var(--ann-pad,14px 16px);border:1px solid var(--ann-border,#e8e8e8);border-radius:var(--ann-radius,10px);
  background:var(--ann-surface-a,#ffffff);color:var(--ann-text,#111111);box-shadow:var(--ann-shadow,0 10px 30px rgba(0,0,0,.45));
  pointer-events:auto;font:var(--ann-fs,13px)/1.45 var(--ann-font,var(--brand-font));text-align:var(--ann-align,left);animation:ann-in var(--ann-dur,.16s) ease}
.ann-card[data-open="overlay"]{width:max(var(--ann-card-w,300px),440px);max-height:min(80vh,720px)}
.ann-card[data-open="sheet"]{width:min(620px,calc(100vw - 24px));max-height:46vh}
.ann-card[hidden],.ann-tools[hidden],.ann-backdrop[hidden]{display:none!important}
@keyframes ann-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes ann-fade{from{opacity:0}to{opacity:1}}
@keyframes ann-grow{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
[data-ann-style="glass"] .ann-card{animation-name:ann-grow}
[data-ann-style="swiss"] .ann-card{animation-name:ann-fade}
.ann-backdrop{position:absolute;inset:0;z-index:3;background:var(--ann-backdrop,rgba(0,0,0,.5));animation:ann-fade var(--ann-dur,.16s) ease}
.ann-card[data-open="overlay"]{z-index:4}

.ann-body{display:grid;gap:var(--ann-gap,8px);min-width:0}
.ann-host .ann-figure,.ann-preview .ann-figure{display:block;font:inherit;width:100%;padding:0;border:0;border-radius:var(--ann-radius-sm,6px);overflow:hidden;background:var(--ann-rule,#e8e8e8);cursor:zoom-in}
.ann-host .ann-figure.is-large{border-radius:calc(var(--ann-radius-sm,6px) * .5)}
.ann-thumb{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:inherit;background:var(--ann-rule,#e8e8e8)}
.ann-title{display:block;font:var(--ann-head-weight,700) calc(var(--ann-fs,13px) + 2px)/1.25 var(--ann-head-font,var(--brand-font));
  letter-spacing:var(--ann-head-tracking,0);padding-right:28px}
.ann-text{margin:0;color:var(--ann-text-2,#3c3c3c);white-space:pre-line}
.ann-text.is-clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ann-host .ann-more{justify-self:var(--ann-align,start);padding:0;border:0;background:none;color:var(--ann-accent,#555555);
  font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ann-facts{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:calc(var(--ann-fs,13px) - 1px)}
[data-ann-align="center"] .ann-facts,[data-ann-align="center"] .ann-prop-head{justify-content:center}
.ann-facts div{display:flex;gap:4px}
.ann-facts dt{color:var(--ann-text-2,#7d7d7d)}
.ann-facts dd{margin:0;font-weight:600}
.ann-host .ann-action,.ann-card .ann-action{justify-self:var(--ann-align,start);display:inline-block;padding:9px 16px;border:0;
  border-radius:var(--ann-radius-sm,6px);background:var(--ann-primary,#e52436);color:var(--ann-on-primary,#ffffff);
  font-size:13px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer}
.ann-host .ann-action:hover{filter:brightness(.9)}
.ann-host .ann-close{position:absolute;z-index:2;top:6px;right:6px;width:28px;height:28px;padding:0;border:0;border-radius:var(--ann-radius-sm,6px);
  font-size:20px!important;line-height:1;background:var(--ann-selection-soft,#e8e8e8);color:var(--ann-text,#111111);cursor:pointer}
.ann-host .ann-close:hover{background:var(--ann-rule,#d0d0d0)}
.ann-details{position:relative}
.ann-card.is-pinned{outline:0}

/* Property card: reference and status, price, key facts, action. */
.ann-prop-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:28px}
.ann-prop-head .ann-title{padding-right:0}
.ann-badge{flex:none;padding:3px 8px;border-radius:999px;background:var(--av);color:#ffffff;
  font:700 10px/1.4 var(--ann-font,var(--brand-font));letter-spacing:.06em;text-transform:uppercase}
.ann-price{margin:0;font:var(--ann-head-weight,700) calc(var(--ann-fs,13px) + 5px)/1.2 var(--ann-head-font,var(--brand-font));color:var(--ann-text)}
/* Gallery card: one picture at a time, its place in the set. */
.ann-gallery{position:relative}
.ann-host .ann-gal{position:absolute;top:50%;width:30px;height:30px;margin-top:-15px;padding:0;border:0;border-radius:999px;
  background:rgba(17,17,17,.6);color:#ffffff;font-size:18px;line-height:1;cursor:pointer}
.ann-gal.prev{left:6px}.ann-gal.next{right:6px}
.ann-count{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:999px;background:rgba(17,17,17,.7);color:#ffffff;
  font:600 11px/1.4 var(--ann-font,var(--brand-font))}
.ann-body[data-layout="detail"]{gap:6px}
.ann-body[data-layout="detail"] .ann-title{font-size:var(--ann-fs,13px)}
.ann-card:has([data-layout="detail"]){width:max(var(--ann-card-w,300px),380px)}
/* The guided tour's steps. */
.ann-tour-nav{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--ann-rule,#e8e8e8);font-size:12px;color:var(--ann-text-2)}
.ann-host .ann-tour-nav button{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--ann-rule,#e8e8e8);border-radius:var(--ann-radius-sm,6px);
  background:transparent;color:var(--ann-text,#111111);font-size:15px;cursor:pointer}
.ann-host .ann-tour-nav button:disabled{opacity:.35;cursor:default}
.ann-host .ann-tour-nav .ann-tour-end{margin-left:auto;font-size:12px}
.ann-tour-nav span{flex:1;text-align:center}

/* Swiss: flat surfaces, strong grid, clear rules, bold headings. */
[data-ann-style="swiss"] .ann-card{border:0;border-top:4px solid var(--ann-primary)}
[data-ann-style="swiss"] .ann-title{padding-bottom:6px;border-bottom:2px solid var(--ann-text)}
[data-ann-style="swiss"] .ann-prop-head .ann-title{border:0;padding-bottom:0}
[data-ann-style="swiss"] .ann-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ann-rule)}
[data-ann-style="swiss"] .ann-facts div{display:grid;gap:0;padding:5px 0;border-bottom:1px solid var(--ann-rule)}
[data-ann-style="swiss"] .ann-facts dt{font-size:10px;text-transform:uppercase;letter-spacing:.06em}
[data-ann-style="swiss"] .ann-action{text-transform:uppercase;letter-spacing:.05em;font-weight:800;border-radius:0}
[data-ann-style="swiss"] .ann-badge{border-radius:0}
/* Glass: rounded, translucent, pill buttons. */
/* The blur only where the style is glass: even blur(0px) is a backdrop filter
   the browser re-runs whenever what is under it changes, which over a
   panorama is every frame of a drag. */
[data-ann-style="glass"] .ann-layer .ann-label,[data-ann-style="glass"] .ann-tools,[data-ann-style="glass"] .ann-tip{
  -webkit-backdrop-filter:blur(var(--ann-blur));backdrop-filter:blur(var(--ann-blur))}
[data-ann-style="glass"] .ann-card{-webkit-backdrop-filter:blur(var(--ann-blur)) saturate(1.3);backdrop-filter:blur(var(--ann-blur)) saturate(1.3)}
[data-ann-style="glass"] .ann-action,[data-ann-style="glass"] .ann-tools button{border-radius:999px}
[data-ann-style="glass"] .ann-tools{border-radius:999px}

/* An enlarged picture from a card. */
.ann-zoom{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:var(--ann-backdrop,rgba(0,0,0,.8));cursor:zoom-out;
  animation:ann-fade var(--ann-dur,.16s) ease}
.ann-zoom img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.ann-zoom .ann-close{position:fixed;top:16px;right:16px}

/* The list ("In this picture") and the side-panel details. A right-hand
   column on a wide screen; a sheet from the bottom, opened by "List" or by
   a tap, everywhere else. */
.ann-panel{box-sizing:border-box;color:var(--ann-text,#111111);background:var(--ann-surface,#ffffff);overflow:auto;
  font:var(--ann-fs,13px)/1.45 var(--ann-font,var(--brand-font));text-align:var(--ann-align,left)}
[data-ann-style="glass"] .ann-panel{background:var(--ann-surface-a);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ann-list h3{margin:0 0 8px;font:600 10px/1 var(--ann-font,var(--brand-font));letter-spacing:.08em;text-transform:uppercase;color:var(--ann-text-2,#7d7d7d)}
.ann-list ol{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.ann-host .ann-list button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:var(--ann-radius-sm,8px);
  background:transparent;color:var(--ann-text,#111111);font:500 13px/1.3 var(--ann-font,var(--brand-font));text-align:left;cursor:pointer}
.ann-host .ann-list button:hover,.ann-host .ann-list button.is-active{background:var(--ann-selection-soft,#f2f2f2)}
.ann-host .ann-list button[aria-pressed="true"]{background:var(--ann-selection-soft,#fce9eb);box-shadow:inset 3px 0 0 var(--ann-selection,#e52436)}
.ann-list button span:last-child{display:grid;gap:2px}
.ann-list small{font-size:11px;color:var(--ann-text-2,#7d7d7d)}
.ann-swatch{flex:none;width:10px;height:10px;border-radius:3px}
[data-ann-style="swiss"] .ann-swatch{border-radius:0}
.ann-details{display:grid;gap:8px;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--ann-rule,#e8e8e8)}
/* Layers the buyer can show or hide, and the availability legend. */
.ann-groups{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ann-host .ann-groups button{display:inline-flex;width:auto;padding:5px 10px;border:1px solid var(--ann-accent,#999999);border-radius:999px;
  background:transparent;color:var(--ann-text,#111111);font-size:12px;cursor:pointer}
.ann-host .ann-groups button[aria-pressed="true"]{background:var(--ann-accent,#999999);color:var(--ann-surface,#ffffff);box-shadow:none}
.ann-host .ann-groups button[aria-pressed="false"]{opacity:.7;text-decoration:line-through}
[data-ann-style="swiss"] .ann-groups button{border-radius:0}
.ann-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;padding:0;list-style:none;font-size:12px}
.ann-legend li{display:flex;align-items:center;gap:6px}
.ann-legend b{font-weight:700}

@media (min-width:1100px){
  .lightbox.annotated{grid-template-columns:64px minmax(0,1fr) 64px 320px}
  .lightbox.annotated .ann-panel{grid-column:4;grid-row:1;align-self:stretch;padding:64px 18px 18px}
  .lightbox.annotated .lightbox-close{right:332px}
  .lightbox .ann-list-toggle{display:none}
}
@media (max-width:1099px){
  .lightbox .ann-panel{position:absolute;left:0;right:0;bottom:0;z-index:3;max-height:55%;padding:18px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius:calc(var(--ann-radius,14px) + 4px) calc(var(--ann-radius,14px) + 4px) 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.4);
    transform:translateY(105%);transition:transform .22s ease}
  .lightbox .ann-panel.is-open{transform:none}
  /* An open sheet would cover the picture it describes: the picture moves up
     into the part of the screen the sheet leaves, and the card stays short. */
  .lightbox.ann-sheet-open .lightbox-figure{align-content:start}
  .lightbox .ann-panel .ann-figure{max-height:110px}
  .lightbox .ann-tools{max-width:calc(100% - 80px);overflow-x:auto}
}
@media (max-width:720px){
  .ann-host .ann-tools button{height:30px;padding:0 10px}
  .ann-tools-label{display:none}
  /* A finger is wider than a 14 px dot. */
  .ann-layer .ann-pin{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .ann-shape,.ann-leader,.ann-layer .ann-pin,.ann-layer .ann-label,.ann-panel,.ann-dim{transition:none}
  .ann-card,.ann-tip,.ann-backdrop,.ann-zoom{animation:none}
  .ann-layer.is-intro .ann-pin,.ann-layer.is-intro .ann-shape,.ann-layer.is-intro .ann-label{animation:none}
  .ann-glow{display:none}
}

/* The tile that opens an interactive picture says so, on the picture. */
.media-open:has(.media-interactive){position:relative}
.media-interactive{position:absolute;right:8px;bottom:8px;z-index:1;padding:4px 8px;border-radius:999px;background:rgba(17,17,17,.78);
  color:#ffffff;font:600 10px/1 var(--brand-font);letter-spacing:.06em;text-transform:uppercase;pointer-events:none}

/* Buttons of the layer outside the gallery, which styles every button of its
   own (residence.css .lightbox button). */
.ann-host:not(.lightbox) .ann-tools button,.ann-host:not(.lightbox) .ann-list button,
.ann-host:not(.lightbox) .ann-close,.ann-host:not(.lightbox) .ann-action{border:0;cursor:pointer}

/* ------------------------------------------------- over a panorama (View tab)
   The viewer's canvas is what the buyer drags to look around: zones and lines
   take no pointer events there (annotations.js hit-tests them itself), and
   every shape is placed in pixels after each frame, so none may transition
   its position. */
.ann-layer[data-view="panorama"]{z-index:1}
.ann-layer[data-view="panorama"] .ann-shape,.ann-layer[data-view="panorama"] .ann-arrow{pointer-events:none}
/* Pins and titles are painted on this canvas over a panorama (annotations.js,
   paintMarks: moving ~50 buttons each frame was half a slow phone's budget). */
.ann-marks{position:absolute;left:0;top:0;pointer-events:none}
/* The switch sits under the title and the views: the head's top (CSS) plus
   its height (annotations.js keeps --ann-below-h). */
.panorama .ann-tools{position:absolute;left:16px;top:calc(var(--pano-head-top,16px) + var(--ann-below-h,96px) + 8px);z-index:2}
/* The list and the details: a card over the bottom left of the view (over
   the mini-map while it is open), opened by "List" or by a tap. */
.panorama .ann-panel{position:absolute;left:12px;bottom:12px;z-index:4;width:min(340px,calc(100% - 24px));max-height:60%;
  box-sizing:border-box;padding:16px;border-radius:var(--ann-radius,12px);box-shadow:0 8px 30px rgba(0,0,0,.35);display:none}
.panorama .ann-panel.is-open{display:block}
.panorama .ann-panel.at-top{top:12px;bottom:auto}
.panorama .ann-panel .ann-figure{max-height:120px}
/* A phone held upright: the top right of the view is the Feedback and
   audience buttons, so the switch goes to the bottom, on one line, within
   reach of the thumb, where the "drag to look around" hint was (the canvas
   keeps that sentence as its label); the mini-map sits just above it. Lifting
   the map further, above the hint as well, put it over the subject. */
@media (max-width:720px) and (min-height:501px){
  .panorama .ann-tools{top:auto;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);overflow-x:auto}
  .panorama .ann-tools button{white-space:nowrap;padding:0 10px}
  .panorama.annotated .panorama-hint{display:none}
  .panorama.annotated .panorama-map,.panorama.annotated .panorama-hint:not(.gone) ~ .panorama-map{bottom:60px}
  .panorama .ann-panel{max-height:52%}
  .panorama .ann-panel .ann-figure{max-height:80px}
}

/* ------------------------------------------------- the admin's live preview
   The editor (admin, AnnotationEditor) draws a still sample of the theme with
   this same stylesheet; nothing in it is fixed to the screen. */
.ann-preview{position:relative;overflow:hidden}
.ann-preview .ann-card,.ann-preview .ann-tip{position:absolute;animation:none}
.ann-preview .ann-tools{position:absolute}

/* Lucide icons (crest-voland issue #61) in the card's close, gallery and tour buttons: centred. */
.ann-host .ann-close,.ann-host .ann-gal,.ann-host [data-ann-step]{display:grid;place-items:center}
.ann-host .ann-close svg.lucide,.ann-host .ann-gal svg.lucide{width:16px;height:16px}