/* /dungeons/ — the pages of the module `instances` (instances/page.py): the hub cards, a dungeon page (facts, interior maps
   with pins and the layer of the other creatures, bosses with historical loot, tables, sources) and the page of a new
   Forever dungeon; the reference loot and its filter.  The site's own components come from site.css (.page-head .eyebrow
   .lead .kpis .chip .btn .tabs .table .notice .switch); everything declared here is ins-*.  The pages are complete without the
   script: instances.js only turns the floors into tabs, adds the map tools and shows the loot filter. */

/* ---- shared */
.ins-en{display:block;margin-top:-4px;color:var(--text-3);font-size:.92rem;font-family:var(--font)}
.ins-block{display:grid;gap:12px;min-width:0}
.ins-block>h2 .chip{margin-left:6px;vertical-align:middle;font-family:var(--font);font-weight:500}
.ins-chips{display:flex;flex-wrap:wrap;gap:6px}
.ins-chips .chip{white-space:normal}
.ins-chip-extra{color:var(--teal-2);border-color:#2b6059}
.ins-ref{color:var(--text-3);border-style:dashed}
.ins-note{color:var(--text-3);font-size:.9rem}
.ins-more{color:var(--text-2);font-size:.92rem}
.ins-label{margin-right:4px;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-toc a:hover{border-color:var(--accent-dim);color:var(--accent-2)}

/* the mark of a boss (its number in the client's order) and of a creature outside that list (a letter) — in lists and keys;
   the pins on the pictures below share the look */
.ins-mark{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;min-width:24px;height:24px;padding:0 4px;border-radius:50%;background:var(--accent);color:#1b1407;font:700 .78rem/1 var(--font)}
.ins-mark-extra{border-radius:7px;background:var(--teal);color:#06211e}
.ins-mark.is-chest{border-radius:5px}
.ins-mark.is-maybe{border:2px dashed var(--accent);background:#0e1116;color:var(--accent-2)}
.ins-dot{display:inline-block;flex:none;box-sizing:border-box;width:9px;height:9px;border-radius:50%;background:#aab4c4}
.ins-dot-e{background:#ef8f6a}
.ins-dot-a{border:2px solid #aab4c4;background:none}

/* ---- hub: cards */
.ins-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.ins-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.ins-card:hover{border-color:var(--accent-dim)}
.ins-thumb{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#17191a}
.ins-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.ins-card-body{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;padding:12px 14px 14px}
.ins-card h3{font-size:1.12rem}
.ins-stretch{color:inherit;text-decoration:none}
.ins-stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ins-stretch:focus-visible{outline:none}
.ins-stretch:focus-visible::after{outline:2px solid var(--teal);outline-offset:-2px}
.ins-card:hover .ins-stretch{color:var(--accent-2)}
.ins-cards-new{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ins-card-new h3 a{color:inherit;text-decoration:none}
.ins-card-new h3 a:hover{color:var(--accent-2)}
.ins-card-text{color:var(--text-2);font-size:.94rem;line-height:1.55}
.ins-card-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.ins-card-links .btn{white-space:normal;text-align:left}

/* ---- dungeon page: facts and outside entrances */
.ins-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.ins-facts>div{min-width:0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.ins-facts dt{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-facts dd{margin:2px 0 0;display:grid;gap:1px}
.ins-facts dd b{font-family:var(--font-display);font-size:1.25rem;line-height:1.25;color:var(--accent-2)}
.ins-facts dd small{color:var(--text-3);font-size:.8125rem;line-height:1.4}
.ins-gates{display:grid;gap:6px}
.ins-gates>p:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ---- dungeon page: the interior map */
.ins-map{display:grid;gap:10px;min-width:0}
.ins-map [hidden]{display:none!important}   /* .btn and .switch set display themselves */
.ins-key{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--text-2);font-size:.9rem;line-height:1.5}
.ins-key>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.ins-key>.ins-key-dots{display:block}   /* a sentence with three samples in it: it wraps as text */
.ins-key-dots .ins-dot{margin-right:3px}
/* floors: a row of links to the floors; with the script the same row is the tab list (role=tablist, the links are the tabs) */
.ins-floornav{display:flex;flex-wrap:wrap;gap:8px 18px}
.ins-floornav-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ins-floornav-wing{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-floornav a{display:inline-flex;align-items:center;min-height:34px;padding:5px 11px;border:1px solid var(--line);border-radius:6px;color:var(--text-2);font-size:.9rem;text-decoration:none}
.ins-floornav a:hover{border-color:var(--accent-dim);color:var(--accent-2)}
.ins-floornav a[aria-selected=true]{border-color:var(--accent-dim);background:var(--panel-2);color:var(--accent-2)}
.ins-floornav a.is-hot{border-color:var(--teal);color:var(--teal-2)}
/* the tools appear with the script; the row keeps its height before that, so nothing moves when they do */
.ins-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:32px}
.ins-status{min-width:0;color:var(--text-2);font-size:.9rem}
.ins-floors{display:grid;gap:18px;min-width:0}
.ins-wing{display:grid;gap:12px;min-width:0}
.ins-wing-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ins-wing-head h3{color:var(--accent-2)}
.ins-floor{display:grid;gap:8px;min-width:0;scroll-margin-top:12px}
.ins-floor-title{font-size:1.05rem}
.ins-fig{margin:0;display:grid;gap:6px;min-width:0}
.ins-fig figcaption{color:var(--text-3);font-size:.9rem}
/* #17191a is the background the floor pictures are drawn on (instances/tools/render.py), so a picture has no visible frame.
   The picture never widens the page: a wide one shrinks to the column, and on a phone it keeps --keep px (560; the page
   sets it for the pictures that are wide) and scrolls inside its box, so that the pins stay apart; any other picture
   fits its box whole.  A small picture is shown enlarged (--up, at most twice; the page computes it).  Pins are placed in
   percent of the picture: any size keeps them.  The 14 px of padding and the 1240 px column are the numbers
   instances/page.py shown() counts with. */
.ins-scroll{max-width:100%;padding:14px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#17191a;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}   /* the padding keeps a pin at the very edge of a picture whole */
.ins-canvas{position:relative;width:100%;max-width:calc(var(--w)*var(--up,1)*1px);min-width:calc(var(--keep,0)*1px);margin:0 auto;line-height:0}
.ins-canvas>img{display:block;width:100%;height:auto}
.ins-pan{display:block;color:var(--accent-2)}
.ins-fig.is-zoom .ins-scroll{max-height:82vh}
.ins-fig.is-zoom .ins-canvas{width:calc(var(--w)*var(--zoom,2)*1px);min-width:0;max-width:none}
/* the other creatures: an SVG in picture pixels stretched over the picture; a point keeps a visible size at any scale
   (the stroke does not scale).  g.e — an elite creature, circle.a — a point where one of several creatures stands */
.ins-dots{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#aab4c4;filter:drop-shadow(0 0 1px #0b0d11) drop-shadow(0 0 1px #0b0d11)}   /* the dark rim keeps a point visible on sand and lava */
.ins-dots circle{fill:currentColor;stroke:currentColor;stroke-width:3px;vector-effect:non-scaling-stroke;pointer-events:auto;cursor:pointer}
.ins-dots g.e{color:#ef8f6a}
.ins-dots circle.a{fill:#17191a;stroke-width:2px}
.ins-map.is-nodots .ins-dots{display:none}
.ins-map.has-pick .ins-dots g{opacity:.22}
.ins-map.has-pick .ins-dots g.is-pick,.ins-dots g.is-hot{opacity:1;color:#fff0a6}
.ins-dots g.is-pick circle,.ins-dots g.is-hot circle{stroke-width:7px}
.ins-dots g.is-pick circle.a,.ins-dots g.is-hot circle.a{stroke-width:4px}
/* pins: links of at least 26 px.  A pin whose mark would cover a neighbour's is moved off its point by a few px: --dx / --dy
   in the full column, --px / --py on a phone (instances/page.py spread()); between the two widths of the picture (--wp and
   --wp + --wr on the canvas) the move goes evenly from one to the other.  A browser without container units keeps the
   first rule: the move of the full column. */
.ins-pin,.ins-entry{position:absolute;box-sizing:border-box;transform:translate(-50%,-50%)}
.ins-pin{margin:calc(var(--dy,0)*1px) 0 0 calc(var(--dx,0)*1px)}
@supports (width:1cqw){
  .ins-canvas{container-type:inline-size}
  .ins-pin{--far:clamp(0px,100cqw - var(--wp,0)*1px,var(--wr,1)*1px);margin:calc(var(--py,var(--dy,0))*1px + var(--far)*(var(--dy,0) - var(--py,var(--dy,0)))/var(--wr,1)) 0 0 calc(var(--px,var(--dx,0))*1px + var(--far)*(var(--dx,0) - var(--px,var(--dx,0)))/var(--wr,1))}
}
.ins-pin{z-index:2;display:grid;place-items:center;min-width:26px;height:26px;padding:0 4px;border-radius:50%;background:var(--accent);color:#1b1407;font:700 .8rem/1 var(--font);text-decoration:none;box-shadow:0 0 0 2px #0b0d11d9,0 2px 6px #000a;transition:transform .12s}
.ins-pin:hover{color:#1b1407}
.ins-pin-extra{border-radius:7px;background:var(--teal);color:#06211e}
.ins-pin-extra:hover{color:#06211e}
.ins-pin.is-chest{border-radius:5px}
.ins-pin.is-maybe{border:2px dashed var(--accent);background:#0e1116eb;color:var(--accent-2);box-shadow:0 2px 6px #000a}
.ins-pin.is-maybe:hover{color:var(--accent-2)}
.ins-pin-extra.is-maybe{border-color:var(--teal);color:var(--teal-2)}
.ins-pin-extra.is-maybe:hover{color:var(--teal-2)}
.ins-pin:hover,.ins-pin:focus-visible,.ins-pin.is-hot,.ins-pin.is-flash{z-index:4;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 2px #0b0d11,0 0 0 4px #fff,0 2px 8px #000c}
.ins-pin.is-flash{animation:ins-flash .7s ease-in-out 3}
@keyframes ins-flash{50%{box-shadow:0 0 0 2px #0b0d11,0 0 0 9px #fff8,0 2px 8px #000c}}
.ins-entry{z-index:1;padding:3px 6px;border:1px solid var(--green);border-radius:5px;background:#0e1116eb;color:var(--green);font:600 .66rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ins-entry-key{position:static;transform:none}
/* what is marked on a floor: the same marks as a row of links under the picture */
.ins-here{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ins-here a{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:3px 11px 3px 4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-size:.86rem;text-decoration:none}
.ins-here a:hover,.ins-here a.is-hot{border-color:var(--accent-dim);color:var(--accent-2)}

/* ---- dungeon page: bosses and the creatures outside the client's list */
.ins-units{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ins-unit{display:grid;gap:8px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);scroll-margin-top:12px}
.ins-unit.is-hot{border-color:var(--accent-dim)}
.ins-unit:target{border-color:var(--accent);box-shadow:0 0 0 2px #e0b25b40}
.ins-unit-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 10px;align-items:center}
.ins-unit-head .ins-mark{grid-row:1/span 2;align-self:start;min-width:28px;height:28px;font-size:.86rem}
.ins-unit-head h3{font-size:1.15rem;overflow-wrap:anywhere}
.ins-unit-head .ins-chips{grid-column:2}
.ins-unit h3 small,.ins-table small,.ins-members small,.ins-members-one small,.ins-enc small{font-family:var(--font);font-size:.8125rem;font-weight:400;color:var(--text-3)}
.ins-where{color:var(--text-2);font-size:.94rem}
.ins-tomap{margin-right:4px}
.ins-members{margin:0;padding-left:18px;display:grid;gap:2px;font-size:.92rem}
.ins-members-one{color:var(--text-2);font-size:.92rem}
.ins-loot{display:grid;gap:8px;padding-top:9px;border-top:1px solid var(--line)}
.ins-loot h4,.ins-common h4{font-family:var(--font);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-tag{margin-left:6px;padding:1px 7px;border:1px dashed var(--line-2);border-radius:999px;font-size:.8125rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-3)}
.ins-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 14px}
.ins-items li{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-width:0}
.ins-item{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:30px;font-size:.92rem;text-decoration:none}
.ins-item img,.ins-noicon{flex:none;width:22px;height:22px;border:1px solid var(--line-2);border-radius:4px;background:var(--bg)}
.ins-item span{min-width:0;overflow-wrap:anywhere}
.ins-item:hover span{text-decoration:underline}
.ins-items-who{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:6px 14px}
.ins-items-who li{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
.ins-items-who small{padding-left:29px;color:var(--text-3);font-size:.8125rem;line-height:1.35}   /* under the name, past the icon */
.ins-common{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent-dim);border-radius:var(--radius);background:var(--panel);scroll-margin-top:12px}
.ins-common h3{font-size:1.1rem}

/* ---- dungeon page: tables (they scroll inside their box on a phone, as on /pets/ and /pvp/) */
.ins-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
.ins-table tr:last-child>*{border-bottom:0}
.ins-table tbody th{font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text)}
.ins-table tbody th small{display:block}
.ins-table .ins-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.ins-table tr.is-hot>*,.ins-table tr.is-pick>*{background:#e0b25b14}
.ins-table tr:target>*{background:#e0b25b1f}
.ins-roster .btn{margin-left:10px}
.ins-table tbody th small.ins-qmeta{display:none}   /* what a phone shows under the name in place of the columns .ins-wide-cell */
.ins-quests tbody th{min-width:190px}
.ins-quests td:last-child{white-space:nowrap}
.ins-quests td:last-child a,.ins-tomap{display:inline-block;padding:4px 0}
.ins-giver small{display:block;color:var(--text-3);font-size:.8125rem}
.ins-qtag{margin:4px 6px 0 0;white-space:normal}

/* ---- sources, the pager, the encounter list of a new dungeon */
.ins-about{padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent-dim);border-radius:var(--radius);background:var(--panel)}
.ins-about h2{font-size:1.15rem}
.ins-about p{color:var(--text-2);font-size:.9rem}
.ins-about ul{margin:0;padding-left:18px;display:grid;gap:7px;color:var(--text-2);font-size:.9rem;line-height:1.6}
.ins-about b{color:var(--text);font-weight:500}
.ins-details{padding:0 16px}
.ins-details summary{padding:11px 0;color:var(--accent-2);font-size:.9rem;font-weight:500;cursor:pointer}
.ins-details>p{margin-bottom:8px}
.ins-details>ul{margin-bottom:14px}
.ins-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.ins-pager a{min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:6px;color:var(--text-2);text-decoration:none}
.ins-pager a:hover{border-color:var(--accent-dim);color:var(--accent-2)}
.ins-prev{justify-self:start}
.ins-next{justify-self:end;text-align:right}
.ins-enc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.ins-enc li{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.ins-enc small{display:block}

/* ---- reference loot (the layer instances/data/loot-*.json): the part of a boss card, the blocks of «Справочная добыча» */
.ins-refloot{display:grid;gap:8px;padding-top:8px;border-top:1px dashed var(--line)}
.ins-loot>.ins-refloot:first-child{padding-top:0;border-top:0}
.ins-refloot h4,.ins-src h4,.ins-src h5{margin:0;font-family:var(--font);font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-src h4{font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--text)}
.ins-src h4 small{margin-left:6px;font-size:.8125rem;font-weight:400;color:var(--text-3)}
.ins-tag-warn{color:var(--changed);border-color:var(--accent-dim)}
.ins-items li>small{color:var(--text-3);font-size:.8125rem;line-height:1.35}
.ins-items:not(.ins-items-who) li>small{flex-basis:100%;padding-left:29px}   /* a line under the name, past the icon */
.ins-src{display:grid;gap:6px;min-width:0;padding-top:10px;border-top:1px solid var(--line);scroll-margin-top:12px}
.ins-src>.ins-refloot{padding-top:0;border-top:0}
.ins-refblock>p+.ins-src{padding-top:4px;border-top:0}
.ins-src:target{box-shadow:0 0 0 2px #e0b25b40;border-radius:4px}
.ins-items[hidden],.ins-items li[hidden],.ins-loot [hidden],.ins-common [hidden],.ins-src[hidden]{display:none}
/* the loot filter (instances.js shows it; without the script every list is shown whole) */
.ins-filter{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.ins-filter[hidden]{display:none}
.ins-filter-title{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ins-filter-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px}
.ins-filter-field{display:grid;gap:4px;min-width:0}
.ins-filter-field>span{color:var(--text-2);font-size:.8125rem}
.ins-filter select,.ins-filter input{width:100%;min-width:0;min-height:38px;padding:7px 8px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--text);font-size:.875rem}
.ins-filter select:focus,.ins-filter input:focus{border-color:var(--teal);outline:1px solid var(--teal)}
.ins-filter-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ins-filter-count{color:var(--text-2);font-size:.875rem}
.ins-filter-none{color:var(--text-3);font-size:.875rem;font-style:italic}

@media (max-width:640px){
  .ins-filter{padding:10px 12px}
  .ins-filter-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-filter select,.ins-filter input{font-size:16px}
  .ins-toc{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ins-toc::-webkit-scrollbar{display:none}
  .ins-toc a{flex:none;white-space:nowrap;font-size:.86rem}
  .ins-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-facts>div{padding:8px 10px}
  .ins-facts dd b{font-size:1.1rem}
  .ins-unit,.ins-common{padding:12px}
  .ins-items,.ins-items-who{grid-template-columns:minmax(0,1fr)}
  .ins-table th,.ins-table td{padding:7px 8px}
  .ins-table .ins-wide-cell{display:none}
  .ins-table tbody th small.ins-qmeta{display:block}
  .ins-roster .btn{margin-left:8px}
  .ins-floornav-group{flex:1 1 100%}
  .ins-floornav-wing{flex:1 1 100%}
  .ins-quests tbody th{min-width:0}
  .ins-pager{grid-template-columns:1fr 1fr}
  .ins-up{grid-column:1/-1;grid-row:2;justify-self:center}
  .ins-cards-new{grid-template-columns:minmax(0,1fr)}
  /* the hub on a phone: a row per dungeon, the preview on the left */
  .ins-cards{grid-template-columns:minmax(0,1fr);gap:10px}
  .ins-card:not(.ins-card-new){flex-direction:row}
  .ins-card:not(.ins-card-new) .ins-thumb{flex:none;width:108px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
  .ins-card-body{padding:10px 12px 12px}
}
@media (hover:none){.ins-item{min-height:36px}}
@media (prefers-reduced-motion:reduce){.ins-pin{transition:none}.ins-pin.is-flash{animation:none}}