/* ═══════════════════════════════════════════════════════════
   LiC x Vecto — prototype styles (hex map, cromo, seal, building, FYP denominator)
   Uses LiC tokens (--lic-*) with Vecto's gold as the "verified" accent.
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Aliases of the plugin palette (frontend/css/lic-frontend.css): no new colours. */
    --lv-sand: var(--lic-sand, #c9a96e);
    --lv-sand-light: var(--lic-sand-light, #f5eedd);
    --lv-sand-grad: linear-gradient(135deg, #e3d2a8, var(--lic-sand, #c9a96e) 60%, #a8884d);
    --lv-navy: var(--lic-navy, #1a3356);
    --lv-deep: var(--lic-deep, #0c1e3c);
    --lv-ocean: var(--lic-ocean, #2b5c8a);
    --lv-sky: var(--lic-sky, #5b9bd5);
    --lv-line: var(--lic-border, #d4dee8);
    --lv-ease: cubic-bezier(.22, 1, .36, 1);
    --lv-radius: 16px;   /* .lic-card-project */
    --lv-radius-btn: 12px; /* .lic-btn--hero-* */
    --lv-shadow: 0 8px 32px rgba(12,30,60,.12);
}

/* ── Hex map ── */
.lic-archive-map.lic-archive-map--hex { scroll-margin-top: 76px; position: relative; height: 580px; background: var(--lic-cloud, #eef3f7); }
.lic-archive-map--hex .lic-hexmap__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lic-hexmap__layers {
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    pointer-events: none;
}
.lic-hexmap__layers > * { pointer-events: auto; }
.lic-hexmap__lbl { font: 600 11px/1 var(--lic-sans, 'Outfit', sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--lv-navy);
    background: rgba(255,255,255,.82); backdrop-filter: blur(8px); padding: 8px 10px; border-radius: var(--lv-radius-btn); }
.lic-hexmap__layers button {
    font: 500 12.5px/1 var(--lic-sans, 'Outfit', sans-serif); color: var(--lv-navy); background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
    border: 1px solid var(--lv-line); border-radius: var(--lv-radius-btn); padding: 8px 12px; cursor: pointer; transition: all .25s var(--lv-ease);
}
.lic-hexmap__layers button:hover { border-color: var(--lv-ocean); }
.lic-hexmap__layers button.on { background: var(--lv-navy); color: #fff; border-color: var(--lv-navy); }
.lic-hexmap__legend { box-sizing: border-box;
    position: absolute; right: 58px; bottom: 26px; z-index: 3; width: 236px; max-width: calc(100% - 80px); max-height: calc(100% - 130px); overflow-y: auto;
    font: 500 11.5px/1.35 var(--lic-sans, 'Outfit', sans-serif); color: var(--lv-navy);
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--lv-line); border-radius: var(--lv-radius-btn); padding: 8px 12px;
}
.lic-hexmap__legend summary { cursor: pointer; font: 600 10.5px/1 var(--lic-sans, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #8a6a2e; list-style: none; padding: 2px 0; }
.lic-hexmap__legend summary::-webkit-details-marker { display: none; }
.lic-hexmap__legend summary::after { content: '+'; float: right; font-size: 14px; line-height: 10px; }
.lic-hexmap__legend details[open] summary::after { content: '–'; }
.lic-hexmap__legrow { margin-top: 8px; display: flex; align-items: flex-end; gap: 10px; }
.lic-hexmap__ramp { flex: 0 0 8px; align-self: stretch; min-height: 8px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f5eedd 0%, #d9c08a 38%, #b8d4e8 42%, #5b9bd5 70%, #2b5c8a 88%, #1a3356 100%); }
.lic-hexmap__ramp.is-empty { background: var(--lv-line); }
.lic-hexmap__legrow:has(.lic-hexmap__ramp) { flex-direction: column; align-items: stretch; gap: 3px; }
.lic-hexmap__rampk { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--lic-text-soft, #5a7088); }
.lic-hexmap__rampk em { font-style: normal; font-weight: 600; color: var(--lv-navy); }
.lic-hexmap__legbars { gap: 12px; }
.lic-hexmap__legk { flex: 1; color: var(--lic-text-soft, #5a7088); }
.lic-hexmap__bar { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; }
.lic-hexmap__bar i { width: 14px; background: var(--lv-navy); border-radius: 2px 2px 0 0; display: block; }
.lic-hexmap__legkeys { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.lic-hexmap__legkeys i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.lic-hexmap__legkeys i.g { background: var(--lv-sand); }
.lic-hexmap__legkeys i.n { background: var(--lv-line); }
.lic-hexmap__legkeys i.e { background: #5b9bd5; opacity: .5; }
.lic-hexmap__legsrc { margin: 8px 0 0; font-size: 10.5px; color: var(--lic-text-soft, #5a7088); line-height: 1.4; }
.lic-hexmap__legsrc span { display: block; margin-top: 3px; color: var(--lv-navy); font-weight: 600; }
.lic-hexmap__panel { position: absolute; top: 96px; left: 12px; z-index: 4; width: 280px; max-width: calc(100% - 24px); max-height: calc(100% - 150px); overflow-y: auto; border-radius: var(--lv-radius); scrollbar-width: thin;
    opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .4s var(--lv-ease), transform .4s var(--lv-ease); }
.lic-hexmap__panel.in { opacity: 1; transform: none; pointer-events: auto; }
.lic-hexmap__tip .maplibregl-popup-content { font: 500 12px/1.3 var(--lic-sans, 'Outfit', sans-serif); border-radius: 8px; padding: 7px 10px; color: var(--lv-navy); }

/* ── Cromo ── */
.lic-cromo { position: relative; color: #fff; border-radius: var(--lv-radius); padding: 18px 18px 16px;
    background: linear-gradient(160deg, var(--lv-navy) 0%, var(--lv-deep) 75%); box-shadow: var(--lv-shadow);
    border: 1px solid rgba(255,255,255,.12); font-family: var(--lic-sans, 'Outfit', sans-serif); }
.lic-cromo.is-verified { border-color: rgba(201,169,110,.75); box-shadow: var(--lv-shadow), 0 0 0 1px rgba(201,169,110,.35) inset; }
.lic-cromo__x { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: rgba(255,255,255,.6); font-size: 20px; cursor: pointer; line-height: 1; }
.lic-cromo__top { display: flex; gap: 12px; align-items: center; }
.lic-cromo__hex { flex: 0 0 64px; height: 72px; display: grid; place-items: center; background: var(--lv-sky); color: var(--lv-deep);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.is-verified .lic-cromo__hex { background: var(--lv-sand-grad); color: #0c1e3c; }
.lic-cromo__hex span { font: 600 30px/1 var(--lic-serif, 'Cormorant Garamond', Georgia, serif); letter-spacing: -.02em; }
.lic-cromo__name { font: 600 24px/1.1 var(--lic-serif, 'Cormorant Garamond', Georgia, serif); padding-right: 18px; }
.lic-cromo__sub { font-size: 11.5px; color: rgba(255,255,255,.65); margin: 3px 0 6px; text-transform: uppercase; letter-spacing: .06em; }
.lic-seal { display: inline-block; font: 600 10px/1 var(--lic-sans, sans-serif); letter-spacing: .08em; text-transform: uppercase;
    color: #0c1e3c; background: var(--lv-sand-grad); padding: 5px 9px; border-radius: 999px; }
.lic-seal--basic { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.lic-cromo__stats { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 7px; }
.lic-cromo__stats li { display: grid; grid-template-columns: 82px 1fr 26px; gap: 8px; align-items: center; font-size: 12px; }
.lic-cromo__k { color: rgba(255,255,255,.75); }
.lic-cromo__bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.lic-cromo__bar i { display: block; height: 100%; background: var(--lv-sky); border-radius: 4px; animation: lvGrow .9s var(--lv-ease) both; transform-origin: left; }
.is-verified .lic-cromo__bar i { background: var(--lv-sand-grad); }
.lic-cromo__stats b { text-align: right; font: 600 12px/1 var(--lic-sans, sans-serif); }
.lic-cromo__foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; }
.lic-cromo__foot b { color: #fff; }
.lic-cromo__go { display: block; margin-top: 12px; text-align: center; font: 600 13px/1 var(--lic-sans, sans-serif); color: var(--lv-deep); background: var(--lv-sand); padding: 13px; border-radius: var(--lv-radius-btn); text-decoration: none; transition: all .3s; }
.lic-cromo__go:hover { background: #d4b377; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,169,110,.35); }
.lic-chip-sim { font: normal 700 9.5px/1 var(--lic-sans, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #8a6a2e; background: var(--lv-sand-light); padding: 3px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
@keyframes lvGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lic-project-body > .lic-cromo, .lic-cromo--page { max-width: 420px; margin: 8px 0 28px; }
@media (max-width: 640px) {
    .lic-hexmap__panel { width: calc(100% - 24px); top: auto; bottom: 70px; }
    .lic-hexmap__legend .hint { display: none; }
}

/* ── Building ── */
.lic-bld { margin: 40px 0; }
.lic-bld__sub { color: var(--lic-text-soft, #5a7088); margin: 4px 0 18px; }
.lic-bld__stage { perspective: 1100px; height: 360px; display: grid; place-items: center; background: linear-gradient(var(--lic-cloud, #eef3f7), var(--lic-mist, #dce8f0)); border-radius: var(--lv-radius); overflow: hidden; cursor: grab; touch-action: pan-y; }
.lic-bld__tower { --w: 220px; position: relative; width: var(--w); height: 280px; transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(var(--ry, -28deg));
    transition: transform .9s var(--lv-ease); }
.lic-bld__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; padding: 10px;
    background: #fff; border: 1px solid var(--lv-line); backface-visibility: hidden; }
.lic-bld__face--0 { transform: translateZ(calc(var(--w) / 2)); }
.lic-bld__face--1 { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: var(--lic-cloud, #eef3f7); }
.lic-bld__face--2 { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.lic-bld__face--3 { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: var(--lic-cloud, #eef3f7); }
.lic-bld__roof { position: absolute; left: 0; top: 0; width: var(--w); height: var(--w); background: var(--lic-pastel, #b8d4e8); transform: rotateX(90deg) translateZ(calc(var(--w) / 2)); }
.lic-bld__row { display: flex; gap: 6px; flex: 1; }
.lic-bld__unit { flex: 1; border: 0; border-radius: 4px; cursor: pointer; min-height: 22px; transition: transform .2s var(--lv-ease), filter .2s; }
.lic-bld__unit:hover, .lic-bld__unit:focus-visible { transform: scale(1.12); filter: brightness(1.1); outline: 2px solid var(--lv-navy); outline-offset: 1px; }
.lic-bld__unit.is-free, .lic-bld__legend i.is-free { background: var(--lv-ocean); }
.lic-bld__unit.is-pre, .lic-bld__legend i.is-pre { background: var(--lv-sand); }
.lic-bld__unit.is-res, .lic-bld__legend i.is-res { background: var(--lv-navy); }
.lic-bld__unit.is-sold, .lic-bld__legend i.is-sold { background: var(--lic-pastel, #b8d4e8); }
.lic-bld__unit.is-other { background: var(--lv-line); }
.lic-bld__ctl { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 12px 0 4px; font-size: 13px; color: var(--lic-text-soft, #5a7088); }
.lic-bld__ctl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lv-line); background: #fff; cursor: pointer; }
.lic-bld__tip { min-height: 22px; text-align: center; font-weight: 600; color: var(--lv-navy); }
.lic-bld__legend { list-style: none; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 6px 0 0; padding: 0; font-size: 13px; }
.lic-bld__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (prefers-reduced-motion: reduce) { .lic-bld__tower, .lic-cromo__bar i, .lic-hexmap__panel { transition: none; animation: none; } }

/* ── Find Your Place: the denominator ── */
.lic-scan { margin: 4px 0 22px; padding: 16px 18px; border-radius: var(--lv-radius); background: var(--lv-sand-light); border: 1px solid rgba(201,169,110,.5); }
.lic-scan__line { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; font: 500 .95rem/1.4 var(--lic-sans, sans-serif); color: var(--lic-text, #1a2a3a); }
.lic-scan__n { font: 600 1.9rem/1 var(--lic-sans, 'Outfit', sans-serif); letter-spacing: -.02em; color: var(--lv-navy); }
.lic-scan__n small { font: 500 .8rem/1 var(--lic-sans, sans-serif); color: var(--lic-text-soft, #5a7088); letter-spacing: 0; margin-left: 4px; }
.lic-scan__n.is-fit { color: #8a6a2e; }
.lic-scan__note { margin: 10px 0 0; font-size: .9rem; color: var(--lic-text-soft, #5a7088); }
.lic-scan__hexes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.lic-scan__hexes i { width: 16px; height: 18px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--lv-line); animation: lvPop .5s var(--lv-ease) both; animation-delay: calc(var(--i) * 60ms); }
.lic-scan__hexes i.fit { background: var(--lv-navy); }
.lic-scan__hexes i.near { background: var(--lv-sand); }
@keyframes lvPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.lic-fyp__near { border: 1.5px dashed var(--lic-sand, #c9a96e); border-radius: var(--lv-radius); padding: 18px 20px; margin-bottom: 18px; background: #fffdf7; }
.lic-fyp__near h3 { margin: 0 0 4px; font-size: 1.1rem; }
.lic-fyp__near p.sub { margin: 0 0 10px; color: var(--lic-text-soft, #5a7088); font-size: .88rem; }
.lic-fyp__near li { margin: 6px 0; font-size: .92rem; }
.lic-fyp__near .gap { color: #8a6a2e; font-weight: 600; }

/* ── Map view tabs (classic map stays default; hexagon view is added) ── */
.lic-maptabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--lic-cloud, #eef3f7); border: 1px solid var(--lv-line); border-radius: var(--lv-radius-btn); }
.lic-maptabs button { font: 500 13px/1 var(--lic-sans, 'Outfit', sans-serif); color: var(--lic-text-soft, #5a7088); background: none; border: 0; border-radius: 9px; padding: 9px 16px; cursor: pointer; }
.lic-maptabs button[aria-selected="true"] { background: var(--lv-deep); color: #fff; }
.lic-maptabs button[aria-selected="true"]:hover { color: #fff; }

/* ── The hexagon as a door ── */
.lic-cromo__hex--door { border: 0; cursor: pointer; font: inherit; color: inherit; transition: transform .35s var(--lv-ease), filter .35s; padding: 0; }
.lic-cromo__hex--door:hover, .lic-cromo__hex--door:focus-visible { transform: scale(1.08); filter: brightness(1.08); outline: none; }
.lic-cromo__go--door { width: 100%; cursor: pointer; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); margin-top: 12px; }
.lic-cromo__go--door:hover { background: rgba(255,255,255,.12); transform: none; box-shadow: none; }
.lic-door-open, .lic-door-open body { overflow: hidden; }
.lic-door { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template-rows: auto auto 1fr auto; color: #fff;
    background: radial-gradient(circle at 50% 30%, var(--lv-navy), var(--lv-deep) 70%); font-family: var(--lic-sans, 'Outfit', sans-serif);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); -webkit-user-select: none; user-select: none; }
.lic-door__bars { display: flex; gap: 5px; padding: 14px 16px 0; }
.lic-door__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.22); overflow: hidden; }
.lic-door__bars b { display: block; height: 100%; background: var(--lv-sand); transform: scaleX(0); transform-origin: left; }
.lic-door__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; }
.lic-door__title { font: 600 26px/1.1 var(--lic-serif, 'Cormorant Garamond', Georgia, serif); }
.lic-door__x { background: rgba(255,255,255,.12); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer; }
.lic-door__stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 0 16px; touch-action: manipulation; }
.lic-door__stage img, .lic-door__stage video, .lic-door__stage iframe { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--lv-radius); box-shadow: var(--lv-shadow); border: 0; object-fit: contain; animation: lvDoorIn .5s var(--lv-ease) both; }
.lic-door__stage iframe { width: min(100%, 960px); aspect-ratio: 16 / 9; }
.lic-door.is-held .lic-door__stage img { transform: scale(1.015); transition: transform .3s; }
.lic-door__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 28px; cursor: pointer; border-radius: var(--lv-radius-btn); }
.lic-door__nav--prev { left: 10px; } .lic-door__nav--next { right: 10px; }
.lic-door__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; }
.lic-door__hint { font-size: 12px; color: rgba(255,255,255,.6); }
.lic-door__back { background: var(--lv-sand); color: var(--lv-deep); border: 0; border-radius: var(--lv-radius-btn); padding: 12px 18px; font: 600 14px/1 var(--lic-sans, sans-serif); cursor: pointer; min-height: 44px; }
.lic-door__env { box-sizing: border-box; width: min(100%, 460px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--lv-radius); padding: 22px; animation: lvDoorIn .5s var(--lv-ease) both; }
.lic-door__envk { font: 600 11px/1 var(--lic-sans, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--lv-sand); margin-bottom: 14px; }
.lic-door__envtop { display: flex; gap: 14px; align-items: center; }
.lic-door__envname { font: 600 28px/1.1 var(--lic-serif, 'Cormorant Garamond', Georgia, serif); }
.lic-door__envsub { font-size: 12px; color: rgba(255,255,255,.65); margin: 3px 0 8px; text-transform: uppercase; letter-spacing: .06em; }
.lic-door__envrows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.lic-door__envrows li { display: grid; grid-template-columns: 96px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; }
.lic-door__envrows b { text-align: right; }
@keyframes lvDoorIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
    .lic-door__title { font-size: 22px; }
    .lic-door__nav { display: none; }
    .lic-door__envrows li { grid-template-columns: 80px 1fr 28px; }
    .lic-door__back { flex: 1; }
    .lic-door__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lic-door__stage img, .lic-door__env { animation: none; } }

/* ── Zone page block ── */
.lic-zone-hex { margin: 3rem 0; }
.lic-zone-hex .lic-archive-map { height: 560px; }

/* ── Concierge: the fit, in UI ── */
.lic-ask-fit { margin: 10px 0 0; padding: 14px; border: 1px solid var(--lv-line); border-radius: var(--lv-radius); background: var(--lv-sand-light); font-family: var(--lic-sans, 'Outfit', sans-serif); color: var(--lic-text, #1a2a3a); }
.lic-ask-fit__title { font: 600 11px/1 var(--lic-sans, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: #8a6a2e; margin-bottom: 10px; }
.lic-ask-fit__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lic-ask-fit__chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border-radius: var(--lv-radius-btn); background: #fff; border: 1px solid var(--lv-line); font-size: 12px; }
.lic-ask-fit__chip b { font: 600 17px/1 var(--lic-sans, 'Outfit', sans-serif); color: var(--lv-navy); }
.lic-ask-fit__chip.is-fit { background: var(--lv-navy); color: #fff; border-color: var(--lv-navy); } .lic-ask-fit__chip.is-fit b { color: var(--lv-sand); }
.lic-ask-fit__chip.is-near { border-color: var(--lv-sand); }
.lic-ask-fit__basis { margin: 10px 0 0; font-size: 12px; color: var(--lic-text-soft, #5a7088); }
.lic-ask-fit__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lic-ask-fit__list li { font-size: 13px; line-height: 1.4; padding: 9px 11px; background: #fff; border-radius: 12px; border-left: 3px solid var(--lv-sand); }
.lic-ask-fit__list li.is-fit { border-left-color: var(--lv-navy); }
.lic-ask-fit__list a { font-weight: 600; color: var(--lv-deep); }
.lic-ask-fit__pct { font-weight: 600; margin-left: 4px; }
.lic-ask-fit__note { margin: 10px 0 0; font-size: 11px; color: var(--lic-text-soft, #5a7088); }

/* Cormorant defaults to old-style figures (a 1 reads as an I): lining numerals for every number */
.lic-cromo__hex span, .lic-ask-fit__chip b, .lic-door__envname, .lic-door__title { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.lic-door__env.is-verified .lic-cromo__bar i { background: var(--lv-sand-grad); }
.lic-door__env.is-verified .lic-cromo__hex { background: var(--lv-sand-grad); color: var(--lv-deep); }
.lic-door__env .lic-cromo__hex { flex: 0 0 64px; height: 72px; display: grid; place-items: center; background: var(--lv-sky); color: var(--lv-deep); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lic-door__env .lic-cromo__bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.lic-door__env .lic-cromo__bar i { display: block; height: 100%; background: var(--lv-sky); }

/* ── Mobile pass (390 px) ── */
@media (max-width: 640px) { .lic-archive-map--hex.has-card .lic-hexmap__legend { display: none; } }
@media (max-width: 640px) {
    .lic-archive-map.lic-archive-map--hex, .lic-zone-hex .lic-archive-map.lic-archive-map--hex { height: 600px; }
    /* one scrollable row of layer chips instead of three wrapped rows over the map */
    .lic-hexmap__layers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .lic-hexmap__layers::-webkit-scrollbar { display: none; }
    .lic-hexmap__layers > * { flex: 0 0 auto; }

    .lic-hexmap__legend .hint { display: none; }
    /* the cromo becomes a bottom sheet */
    .lic-hexmap__panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 72%; }
    .lic-hexmap__panel .lic-cromo__stats { margin: 10px 0 8px; gap: 5px; }
    .lic-maptabs button { padding: 10px 16px; min-height: 44px; }
    .lic-door__env { padding: 18px; }
}

/* ── Cell cromo (several promotions in one cell) + hover tooltip ── */
.lic-cell__list { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; }
.lic-cell__list button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer; color: #fff; font: inherit;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 9px 10px; transition: background .25s; }
.lic-cell__list button:hover, .lic-cell__list button:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.lic-cell__sc { flex: 0 0 38px; height: 42px; display: grid; place-items: center; background: var(--lv-sky); color: var(--lv-deep); font: 600 16px/1 var(--lic-sans, sans-serif);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lic-cell__sc.is-verified { background: var(--lv-sand-grad); }
.lic-cell__t b { display: block; font: 600 17px/1.1 var(--lic-serif, 'Cormorant Garamond', Georgia, serif); }
.lic-cell__t i { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.7); }
.lic-cromo__back { background: none; border: 0; color: var(--lv-sand); font: 600 12px/1 var(--lic-sans, sans-serif); cursor: pointer; padding: 0 0 8px; }
.lic-hexmap__tip .maplibregl-popup-content em { font-style: normal; color: #8a6a2e; }
.lic-hexmap__canvas .maplibregl-ctrl-top-right, .lic-hexmap__canvas .maplibregl-cooperative-gesture-screen { font-family: var(--lic-sans, sans-serif); }
@media (max-width: 640px) {
    .lic-hexmap__legend { right: auto; left: 8px; bottom: 44px; width: auto; max-width: calc(100% - 66px); padding: 6px 10px; }
    .lic-hexmap__legend details:not([open]) .lic-hexmap__legrow, .lic-hexmap__legend details:not([open]) .lic-hexmap__legkeys, .lic-hexmap__legend details:not([open]) .lic-hexmap__legsrc { display: none; }
    .lic-hexmap__legend:has(details[open]) { width: min(300px, calc(100% - 66px)); }
    .lic-hexmap__legend details[open] { width: 100%; max-height: 46vh; overflow: auto; }
}

.lic-hexmap__more { margin-top: 8px; border-top: 1px solid var(--lv-line); padding-top: 6px; }
.lic-hexmap__more summary { color: var(--lic-text-soft, #5a7088); text-transform: none; letter-spacing: 0; font: 600 11px/1.2 var(--lic-sans, sans-serif); }
.lic-hexmap__legbars .lic-hexmap__legk { line-height: 1.2; }

/* ── Satellite toggle and tooltip hint (pilot patterns) ── */
.lic-hexmap__layers .lic-hexmap__sat { margin-left: auto; }
.lic-hexmap__layers .lic-hexmap__sat.on { background: var(--lv-sand); color: var(--lv-deep); border-color: var(--lv-sand); }
.lic-hexmap__tip .tip-h { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--lic-text-soft, #5a7088); }

/* ── Motion (all of it off under prefers-reduced-motion) ── */
.lic-hexmap__radar { position: absolute; z-index: 1; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(201,169,110,0) 0deg, rgba(201,169,110,.5) 72deg, rgba(201,169,110,0) 74deg, rgba(201,169,110,0) 360deg);
    -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%);
    animation: lvRadar 1.4s cubic-bezier(.3,.6,.4,1) both; }
.lic-hexmap__radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(201,169,110,.55); animation: lvRadarRing 1.4s ease-out both; }
@keyframes lvRadar { from { transform: rotate(0) scale(.55); opacity: 0; } 12% { opacity: 1; } to { transform: rotate(540deg) scale(1.25); opacity: 0; } }
@keyframes lvRadarRing { from { transform: scale(.2); opacity: .9; } to { transform: scale(1); opacity: 0; } }
/* the card enters with a spring; its rows follow one after another. transform-origin keeps the overshoot inside the card's own margin */
.lic-hexmap__panel { transition: opacity .25s ease; }
.lic-hexmap__panel.in .lic-cromo { transform-origin: top left; animation: lvSpring .62s cubic-bezier(.34,1.45,.64,1) both; }
.lic-hexmap__panel.in .lic-cromo__stats li, .lic-hexmap__panel.in .lic-cell__list li { animation: lvRow .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(140ms + var(--i, 0) * 55ms); }
@keyframes lvSpring { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes lvRow { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.lic-cromo__bar i { animation-delay: calc(240ms + var(--i, 0) * 55ms); }
@media (max-width: 640px) {
    .lic-hexmap__panel { right: 56px; left: 8px; bottom: 56px; width: auto; }
    .lic-hexmap__panel.in .lic-cromo { transform-origin: bottom left; }
    .lic-hexmap__radar { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
}
@media (prefers-reduced-motion: reduce) {
    .lic-hexmap__radar { display: none; }
    .lic-hexmap__panel.in .lic-cromo, .lic-hexmap__panel.in .lic-cromo__stats li, .lic-hexmap__panel.in .lic-cell__list li { animation: none; }
}
.lic-fyp__field input{box-sizing:border-box}
/* classic map shown again because the hexagon view could not load */
.lic-hexmap__notice { margin: 0 0 10px; padding: 9px 14px; font: 500 13px/1.4 var(--lic-sans, 'Outfit', sans-serif); color: var(--lv-navy);
    background: var(--lv-sand-light); border: 1px solid var(--lv-line); border-left: 3px solid var(--lv-sand); border-radius: var(--lv-radius-btn); }