/* Kashar Center — unit explorer */
#kc-explorer{
  --ink:#0d1512; --ink2:#16211c; --line:rgba(248,245,236,.14);
  --cream:#f8f5ec; --muted:rgba(248,245,236,.58);
  --bronze:#dcae72; --bronze2:#b4854a;
  --ease:cubic-bezier(.22,.68,.32,1);
  background:var(--ink); color:var(--cream);
  font-family:inherit; margin:0 0 28px;
}
#kc-explorer *{box-sizing:border-box}

.kc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 4px 12px;flex-wrap:wrap}
.kc-crumbs{display:flex;align-items:center;gap:9px;font-size:13px;flex-wrap:wrap}
.kc-crumbs button{background:none;border:0;color:var(--bronze);cursor:pointer;
  font:inherit;font-size:13px;padding:2px 0}
.kc-crumbs button:hover{text-decoration:underline}
.kc-crumbs .sep{color:var(--muted)}
.kc-crumbs .cur{color:var(--cream);font-weight:600}
.kc-legend{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.kc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}

.kc-stage{display:grid;grid-template-columns:1fr;border:1px solid var(--line);
  background:var(--ink2);position:relative;overflow:hidden;
  transition:grid-template-columns .35s var(--ease)}
#kc-explorer.kc-has-rail .kc-stage{grid-template-columns:96px 1fr}
#kc-explorer.kc-has-side .kc-stage{grid-template-columns:96px 1fr 292px}
@media(max-width:900px){
  #kc-explorer.kc-has-rail .kc-stage,
  #kc-explorer.kc-has-side .kc-stage{grid-template-columns:72px 1fr}
}

.kc-rail{border-right:1px solid var(--line);display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;padding:20px 6px;user-select:none}
#kc-explorer.kc-has-rail .kc-rail{display:flex}
.kc-rail .cap{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:4px}
@media(max-width:900px){.kc-rail .cap{display:none}}
.kc-num{font-size:36px;line-height:1;color:var(--bronze);font-weight:600;
  transition:opacity .16s var(--ease),transform .16s var(--ease)}
.kc-num.kc-flip{opacity:0;transform:translateY(-6px)}
.kc-lbl{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.kc-dots{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.kc-dot{width:8px;height:8px;border-radius:50%;background:rgba(248,245,236,.22);
  border:0;padding:0;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.kc-dot:hover{background:rgba(248,245,236,.5)}
.kc-dot.on{background:var(--bronze);transform:scale(1.55)}
.kc-arw{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:none;
  color:var(--cream);cursor:pointer;font-size:11px;line-height:1;
  transition:border-color .2s,color .2s}
.kc-arw:hover{border-color:var(--bronze);color:var(--bronze)}

/* the canvas takes the aspect ratio of whichever image is showing, so there
   is never any letterboxing; --kc-ar is set per view from JS */
/* width-driven: these bar-building plans are ~4.4:1, and a min-height made the
   box compute its width from the ratio and overflow onto the unit list */
.kc-canvas{position:relative;overflow:hidden;background:var(--ink);
  width:100%;min-width:0;aspect-ratio:var(--kc-ar,1.6);min-height:0}
.kc-layer{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.kc-layer.on{opacity:1;pointer-events:auto}
.kc-layer img{width:100%;height:100%;object-fit:contain;display:block}
.kc-svg{position:absolute;inset:0;width:100%;height:100%}
.kc-hit{cursor:pointer;transition:fill-opacity .18s var(--ease),stroke-opacity .18s var(--ease)}
.kc-cap{position:absolute;left:14px;top:12px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);pointer-events:none;
  background:rgba(13,21,18,.55);padding:5px 9px}

.kc-side{border-left:1px solid var(--line);display:none;flex-direction:column;min-height:0}
#kc-explorer.kc-has-side .kc-side{display:flex}
@media(max-width:900px){#kc-explorer.kc-has-side .kc-side{display:none}}
.kc-side h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:15px 16px 9px;margin:0;font-weight:600}
.kc-list{overflow:auto;flex:1}
.kc-row{display:flex;align-items:center;gap:9px;padding:10px 16px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--cream);background:none;border:0;width:100%;
  text-align:left;border-top:1px solid rgba(248,245,236,.07);
  transition:background .16s var(--ease),padding-left .16s var(--ease)}
.kc-row:hover,.kc-row.hot{background:rgba(220,174,114,.10);padding-left:22px}
.kc-row .c{font-weight:600;min-width:64px}
.kc-row .m{color:var(--muted);font-size:11.5px;flex:1;text-align:right}
.kc-row .s{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.kc-row.dim .c,.kc-row.dim .m{opacity:.45}

.kc-detail{position:absolute;inset:0;background:rgba(13,21,18,.97);padding:24px 28px;
  overflow:auto;opacity:0;transform:translateY(10px);pointer-events:none;z-index:5;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.kc-detail.on{opacity:1;transform:none;pointer-events:auto}
.kc-back{background:none;border:0;color:var(--bronze);cursor:pointer;font:inherit;
  font-size:13px;font-weight:600;padding:2px 0;margin-bottom:14px}
.kc-back:hover{text-decoration:underline}
.kc-tag{display:inline-block;background:var(--cream);color:var(--ink);font-size:10px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;margin-bottom:10px}
.kc-code{font-size:28px;font-weight:600;margin:0 0 16px}
.kc-specs{max-width:440px;border-top:1px solid var(--line)}
.kc-spec{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.kc-spec span{color:var(--bronze)}
.kc-pill{display:inline-block;padding:3px 11px;border-radius:11px;color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.kc-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.kc-btn{padding:11px 19px;font:inherit;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:none;color:var(--cream);cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:background .2s,border-color .2s,color .2s}
.kc-btn:hover{border-color:var(--bronze);color:var(--bronze)}
.kc-btn.pri{background:var(--bronze2);border-color:var(--bronze2);color:var(--ink)}
.kc-btn.pri:hover{background:var(--bronze);color:var(--ink)}

@media(prefers-reduced-motion:reduce){#kc-explorer *{transition:none!important}}

.kc-empty{padding:18px 16px;font-size:13px;line-height:1.5;color:rgba(248,245,236,.6)}

.kc-stage{min-width:0}
.kc-stage>*{min-width:0}

/* basement parking: chip grid rather than per-bay hotspots, because the
   drawing only carries live text for part of the bay numbering */
.kc-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:5px;padding:14px 12px}
.kc-chip{font:600 11px/1 ui-monospace,monospace;color:#f8f5ec;cursor:pointer;
  border:1px solid;border-radius:2px;padding:8px 4px;transition:transform .15s ease}
.kc-chip:hover{transform:translateY(-1px);filter:brightness(1.35)}
@media(max-width:900px){.kc-chips{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}}


/* ==========================================================================
   MOBILE: the floor rail is a tall column, and with 11 levels it became
   taller than a wide/short elevation — so the grid row stretched to the rail
   and left a large empty band under the drawing. On small screens the rail
   becomes a horizontal, scrollable strip instead.
   ========================================================================== */
@media (max-width:900px){
  #kc-explorer.kc-has-rail .kc-stage,
  #kc-explorer.kc-has-side .kc-stage{grid-template-columns:1fr!important}
  .kc-stage{align-items:start}

  #kc-explorer.kc-has-rail .kc-rail{
    flex-direction:row; align-items:center; justify-content:flex-start;
    gap:10px; padding:10px 12px; overflow-x:auto; overflow-y:hidden;
    border-right:0; border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #kc-explorer.kc-has-rail .kc-rail::-webkit-scrollbar{display:none}
  .kc-rail .cap{display:none}
  .kc-rail>div{display:flex; align-items:baseline; gap:6px; flex:none}
  .kc-num{font-size:22px}
  .kc-lbl{margin-top:0}
  .kc-dots{flex-direction:row; gap:9px; margin-top:0; flex:none}
  .kc-dot{width:10px; height:10px}
  .kc-arw{width:30px; height:30px; flex:none}

  .kc-canvas{align-self:start}
  #kc-explorer.kc-has-side .kc-side{display:flex; border-left:0;
    border-top:1px solid var(--line); max-height:52vh}
}

/* ---- Kati Përdhe: mode switch on the masterplan ---------------------- */
/* The tabs used to sit absolutely inside the masterplan layer, covering the
   top of the render. They are now a sibling above the canvas, shown only on
   the masterplan, so they cannot overlap any drawing. */
.kc-modeswrap{display:none;padding:0 0 10px}
#kc-explorer[data-kc-stage="master"] .kc-modeswrap{display:block}
#kc-explorer .kc-modes{
  position:static; z-index:3; display:flex; gap:6px;
  padding:4px; border-radius:999px; background:rgba(13,21,18,.72);
  border:1px solid var(--line); backdrop-filter:blur(6px);
}
#kc-explorer .kc-mode{
  appearance:none; border:0; cursor:pointer; font:inherit; font-size:13px;
  letter-spacing:.02em; padding:7px 15px; border-radius:999px;
  background:transparent; color:var(--muted); transition:background .18s,color .18s;
}
#kc-explorer .kc-mode:hover{ color:var(--cream); }
#kc-explorer .kc-mode.on{ background:var(--bronze); color:var(--ink); font-weight:600; }
#kc-explorer .kc-mode:focus-visible{ outline:2px solid var(--bronze); outline-offset:2px; }
@media (max-width:640px){
  #kc-explorer .kc-mode{ padding:10px 8px; font-size:12px; }
}

/* ---- level toggle inside a shared (site-wide) view ------------------- */
#kc-explorer .kc-subtabs{ display:flex; gap:6px; margin:0 0 12px; }
#kc-explorer .kc-subtab{
  appearance:none; cursor:pointer; font:inherit; font-size:12px; padding:6px 12px;
  border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--muted); transition:background .18s,color .18s,border-color .18s;
}
#kc-explorer .kc-subtab:hover{ color:var(--cream); border-color:var(--bronze); }
#kc-explorer .kc-subtab.on{ background:var(--bronze); border-color:var(--bronze); color:var(--ink); font-weight:600; }


/* per-apartment plan inside the detail panel */
/* The 1:40 plans are portrait (roughly 900x1300). Left unconstrained they
   filled the panel and pushed the spec rows out of view, so the plan is capped
   and the panel scrolls. */
.kc-planwrap{position:relative;display:block;margin:0;background:#fff;
  border:1px solid var(--line);overflow:hidden}
.kc-planimg{display:block;width:100%;height:auto;max-height:none;object-fit:contain;
  background:#fff}
.kc-zoom{position:absolute;right:8px;bottom:8px;background:rgba(13,21,18,.86);
  color:#f8f5ec;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;pointer-events:none}
.kc-planwrap:hover .kc-zoom{background:#b4854a;color:#0d1512}
@media(max-width:900px){.kc-zoom{display:none}}

.kc-detail.on{overflow-y:auto;-webkit-overflow-scrolling:touch}
.kc-detail .kc-back{position:relative;z-index:2}
.kc-detail .kc-tag{margin-top:10px}



/* The detail panel is absolutely positioned inside .kc-canvas, which is locked
   to the drawing's aspect ratio. On a floor plate that ratio is ~4.7:1, so the
   panel was only ~180px tall and clipped the plan and the spec rows. While the
   detail is open the canvas is released from the ratio and sized to content. */
#kc-explorer.kc-detail-open .kc-canvas{aspect-ratio:auto;min-height:min(680px,86vh)}
#kc-explorer.kc-detail-open .kc-layer{opacity:0;pointer-events:none}
.kc-detail.on{position:absolute;inset:0;overflow-y:auto;padding:18px 20px 22px}
@media(max-width:900px){
  #kc-explorer.kc-detail-open .kc-canvas{min-height:min(560px,80vh)}
  .kc-detail.on{padding:14px 14px 18px}
}

/* ---- unit detail: plan beside the specs -----------------------------
   The plan used to sit above the spec rows and, at 100% height inside an
   auto-height wrapper, collapsed to nothing. It now sits in its own column
   and sizes from its intrinsic ratio. Single column below 900px, and when
   a unit has no plan at all (parking bays). */
.kc-detail .kc-unit{display:grid;gap:26px;align-items:start;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}
.kc-detail .kc-unit.noplan{grid-template-columns:minmax(0,1fr)}
.kc-detail .kc-unitinfo{min-width:0}
.kc-detail .kc-unit .kc-tag{margin-top:0}
.kc-detail .kc-unit .kc-planimg{max-height:min(58vh,620px)}
@media(max-width:900px){
  .kc-detail .kc-unit{grid-template-columns:minmax(0,1fr);gap:16px}
  .kc-detail .kc-unit .kc-planimg{max-height:44vh}
}

/* The plate is hidden only while a new one decodes, so the previous building's
   drawing is never shown stretched to the incoming aspect ratio. */
.kc-planimg.kc-loading,[data-kc="img-plan"].kc-loading{opacity:0}
[data-kc="img-plan"]{transition:opacity .12s linear}

/* Bay chips sit under the level tabs; they are a compact index into the
   drawing rather than the primary control, which is now the hotspot itself. */
#kc-explorer .kc-baylist{display:flex;flex-wrap:wrap;gap:4px}
#kc-explorer .kc-baylist .kc-chip{font-size:11px;padding:3px 7px;cursor:pointer}
#kc-explorer .kc-baylist .kc-chip.hot{background:var(--bronze);color:var(--ink);
  border-color:var(--bronze)}
#kc-explorer .kc-baylist .kc-chip.dim{opacity:.45}
svg.kc-planimg{width:100%;height:auto;display:block;background:#fff}

/* ==========================================================================
   v8 — brand accent, enquiry modal, mobile
   Brand blue #27187f is used as a secondary only: rules, eyebrows, focus and
   the modal chrome. The status colours (green/amber/red) stay untouched,
   because they carry meaning and must not compete with brand colour.
   ========================================================================== */
#kc-explorer{ --brand:#27187f; --brand-lt:#4436a8; --brand-ink:#f3f1ff; }

/* The modal is appended to <body>, outside #kc-explorer, so it inherits none
   of the explorer's custom properties. Declaring them here keeps one source
   of truth without moving the dialog inside a transformed container. */
.kc-modal{
  --ink:#0d1512; --ink2:#16211c; --line:rgba(248,245,236,.14);
  --cream:#f8f5ec; --muted:rgba(248,245,236,.58);
  --bronze:#dcae72; --brand:#27187f; --brand-lt:#4436a8;
}

/* thin brand rule under the breadcrumb bar and section heads */
.kc-top{border-bottom:2px solid var(--brand)}
.kc-side h4{border-left:3px solid var(--brand);padding-left:10px}
.kc-crumbs button:hover{color:var(--brand-lt)}
.kc-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.kc-btn.pri:hover{background:var(--brand-lt);border-color:var(--brand-lt);color:#fff}
.kc-row:hover,.kc-row.on{box-shadow:inset 3px 0 0 var(--brand)}
#kc-explorer :focus-visible{outline:2px solid var(--brand-lt);outline-offset:2px}

/* ------------------------------------------------------------ modal ---- */
.kc-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;padding:18px;opacity:0;transition:opacity .2s ease;
  font-family:inherit}
.kc-modal.on{opacity:1}
.kc-modal__veil{position:absolute;inset:0;background:rgba(6,10,9,.78);
  backdrop-filter:blur(3px)}
.kc-modal__box{position:relative;width:min(520px,100%);max-height:92vh;overflow-y:auto;
  background:var(--ink2);border:1px solid var(--line);border-top:3px solid var(--brand);
  padding:26px 24px 22px;transform:translateY(10px);transition:transform .22s ease;
  -webkit-overflow-scrolling:touch}
.kc-modal.on .kc-modal__box{transform:none}
.kc-modal__x{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;
  background:none;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.kc-modal__x:hover{color:var(--cream)}
.kc-modal__eye{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze)}
.kc-modal__head h3{margin:6px 0 4px;font-size:26px;color:var(--cream);letter-spacing:-.02em}
.kc-modal__sub{margin:0 0 18px;font-size:13px;color:var(--muted);line-height:1.5}
.kc-modal__wa{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;background:#25d366;color:#06301a;font-weight:700;
  font-size:14.5px;text-decoration:none;border-radius:2px}
.kc-modal__wa:hover{filter:brightness(1.08)}
.kc-modal__or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;
  font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.kc-modal__or::before,.kc-modal__or::after{content:'';flex:1;height:1px;background:var(--line)}
.kc-modal__form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kc-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.kc-f--full{grid-column:1/-1}
.kc-f label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kc-f label span{text-transform:none;letter-spacing:0;opacity:.7}
.kc-f input,.kc-f textarea{background:rgba(0,0,0,.25);border:1px solid var(--line);
  color:var(--cream);font:inherit;font-size:15px;padding:11px 10px;border-radius:2px;
  min-height:44px}
.kc-f textarea{min-height:62px;resize:vertical}
.kc-f input:focus,.kc-f textarea:focus{outline:none;border-color:var(--brand-lt)}
.kc-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;
  font-size:12.5px;color:var(--muted);line-height:1.45}
.kc-consent input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--brand)}
.kc-msg{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;min-height:16px;color:var(--muted)}
.kc-msg.ok{color:#7fc79a}
.kc-msg.bad{color:#e39a90}
.kc-msg a{color:var(--bronze)}

/* ========================================================== mobile ===== */
@media (max-width:900px){
  /* The unit list was display:none below 900px, so a phone showed hotspots
     with no way to read or pick a unit. It now sits under the drawing. */
  #kc-explorer.kc-has-side .kc-side{display:flex!important;border-left:0;
    border-top:1px solid var(--line);max-height:none}
  #kc-explorer.kc-has-rail .kc-stage,
  #kc-explorer.kc-has-side .kc-stage{grid-template-columns:1fr!important}
  .kc-stage{align-items:start}

  /* rail becomes a horizontal strip; as a column it dictated the row height
     and left a large dead band under wide, short floor plates */
  #kc-explorer.kc-has-rail .kc-rail{flex-direction:row;align-items:center;
    gap:10px;padding:9px 10px;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--line);
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #kc-explorer.kc-has-rail .kc-rail::-webkit-scrollbar{display:none}
  .kc-rail>div{display:flex;align-items:baseline;gap:6px;flex:none}
  .kc-dots{flex-direction:row;gap:9px;margin-top:0;flex:none}
  .kc-dot{width:12px;height:12px}
  .kc-arw{width:38px;height:38px;flex:none}
  .kc-num{font-size:22px}
  .kc-lbl{margin-top:0}
  .kc-canvas{align-self:start}

  .kc-list{max-height:none}
  .kc-row{min-height:52px}                 /* thumb-sized */
  .kc-top{flex-wrap:wrap;gap:8px;padding:10px 12px}
  .kc-legend{font-size:10.5px;gap:10px}
  .kc-acts{flex-wrap:wrap}
  .kc-acts .kc-btn{flex:1 1 auto;min-height:46px;justify-content:center}
}

@media (max-width:640px){
  .kc-modal{padding:0;align-items:flex-end}
  .kc-modal__box{width:100%;max-height:94vh;border:0;border-top:3px solid var(--brand);
    padding:22px 16px 18px}
  .kc-modal__form{grid-template-columns:1fr}
  .kc-modal__head h3{font-size:22px}
  .kc-chips{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
  .kc-chip{padding:11px 4px;font-size:11.5px}   /* was too small to tap */
  .kc-crumbs{font-size:12px}
}

/* ==========================================================================
   v8.2 — mobile: zoom on demand, never by default
   setStage('floor') is shared by the building plate, Kati Përdhe and the
   basements, so keying off the stage alone applied plate treatment to all
   three and broke the detail panel. Each view now declares data-kc-view and
   only the zoomed state changes layout.
   ========================================================================== */
.kc-zoombtn,.kc-panhint{display:none}

@media (max-width:900px){
  /* Mode tabs sat over the render. On a phone they take the space above it,
     so nothing is hidden behind them. */
  #kc-explorer .kc-modes{width:100%;justify-content:space-between}
  #kc-explorer .kc-mode{flex:1;text-align:center;padding:11px 6px;min-height:44px;
    font-size:12.5px}

  /* zoom control appears on any drawing view, but changes nothing until used */
  #kc-explorer[data-kc-view="plate"] .kc-zoombtn,
  #kc-explorer[data-kc-view="ground"] .kc-zoombtn,
  #kc-explorer[data-kc-view="basement"] .kc-zoombtn{
    position:absolute;display:inline-flex;align-items:center;gap:7px;
    right:10px;bottom:10px;z-index:6;
    background:rgba(13,21,18,.88);border:1px solid var(--line);color:var(--cream);
    font:inherit;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    padding:9px 13px;min-height:42px;border-radius:2px;cursor:pointer;
    backdrop-filter:blur(4px)}
  .kc-zoombtn[hidden]{display:none!important}
  .kc-zoombtn span{font-size:14px;line-height:1}
  .kc-zoombtn b{font-weight:700}

  /* Only once zoomed does the drawing become a scrollable strip. */
  #kc-explorer.kc-zoomed .kc-canvas{
    aspect-ratio:auto;height:clamp(300px,56vh,520px);
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;touch-action:pan-x pinch-zoom}
  #kc-explorer.kc-zoomed .kc-layer.on{
    position:relative;inset:auto;height:100%;width:max-content;min-width:100%}
  #kc-explorer.kc-zoomed .kc-layer:not(.on){display:none}
  #kc-explorer.kc-zoomed .kc-layer.on img{
    width:auto;height:100%;max-width:none;object-fit:fill}

  /* the pan hint belongs to the zoomed strip, nothing else */
  #kc-explorer.kc-zoomed .kc-panhint{position:absolute;display:flex;
    align-items:center;gap:8px;left:50%;transform:translateX(-50%);bottom:10px;
    z-index:5;background:rgba(39,24,127,.92);color:#fff;font-size:11px;
    letter-spacing:.06em;padding:7px 12px;border-radius:2px;pointer-events:none}
  .kc-panhint[hidden]{display:none!important}

  /* the detail panel must never inherit strip layout */
  #kc-explorer.kc-detail-open .kc-canvas{aspect-ratio:auto;overflow:visible;
    height:auto;min-height:min(680px,86vh)}
  #kc-explorer.kc-detail-open .kc-zoombtn,
  #kc-explorer.kc-detail-open .kc-panhint{display:none!important}

  #kc-explorer .kc-cap{font-size:10px;padding:4px 7px;background:rgba(13,21,18,.72)}
}

@media (prefers-reduced-motion:reduce){ .kc-panhint{animation:none} }

/* ==========================================================================
   v8.3 — loading state and mobile chrome
   ========================================================================== */
/* Polygons were painted over an empty canvas while the plate decoded. Hold the
   overlay and show a quiet shimmer instead of a blank hole. */
#kc-explorer.kc-img-loading .kc-svg{opacity:0;transition:none}
#kc-explorer .kc-svg{transition:opacity .18s ease}
#kc-explorer.kc-img-loading .kc-canvas::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,var(--ink2) 30%,rgba(248,245,236,.06) 50%,var(--ink2) 70%);
  background-size:220% 100%;animation:kcShim 1.1s linear infinite}
@keyframes kcShim{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  #kc-explorer.kc-img-loading .kc-canvas::after{animation:none;opacity:.5}
}

@media (max-width:900px){
  /* The caption repeats the breadcrumb above it and cost plate height. */
  #kc-explorer[data-kc-view="plate"] .kc-cap,
  #kc-explorer[data-kc-view="ground"] .kc-cap,
  #kc-explorer[data-kc-view="basement"] .kc-cap{display:none}

  /* Zoom button now sits below the drawing rather than on top of it. */
  #kc-explorer[data-kc-view="plate"] .kc-zoombtn,
  #kc-explorer[data-kc-view="ground"] .kc-zoombtn,
  #kc-explorer[data-kc-view="basement"] .kc-zoombtn{
    position:static;display:flex;width:100%;justify-content:center;
    margin:0;border-left:0;border-right:0;border-radius:0;
    border-top:0;border-bottom:1px solid var(--line);
    background:var(--ink2);backdrop-filter:none}
  #kc-explorer.kc-detail-open .kc-zoombtn{display:none!important}
}