/* Šator sastanka i hramovi. Boje i fontovi sajta (shared.css); raspored iz odobrene skice.
   Gore četiri prekidača, lijevo tlocrt (zapad gore, istok i ulaz dolje), desno ploča s popisom dijelova;
   ispod usporedba veličina. Ispod 900px: prekidači, tlocrt i ploča jedno ispod drugog.
   Bez JavaScripta nema tlocrta: vidljivi su popisi sa svim tekstom. */
[hidden] { display: none !important; }
.hr {
  --bg: #f6f1e7; --paper: #fbf8f1; --ink: #2b2420; --muted: #6e625a; --rule: #ddd2c1; --soft: #efe8db;
  --main: #651829; --gold: #b0782c; --olive: #5f6b3a; --bronze: #8a5a32; --lin: #f3ecdd; --area: #ebe1cc; --wall: #4a3f38;
  width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 40px 0 72px; color: var(--ink);
}
.hr * { box-sizing: border-box; }
.hr .eyebrow { margin: 0; font: 700 12px var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--main); }
.hr h1 { font: 500 clamp(32px, 4.6vw, 48px)/1.1 var(--serif); letter-spacing: -.02em; margin: 8px 0 10px; text-wrap: balance; }
.hr .lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 780px; }
.hr :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

.hr .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; font-family: var(--sans); }
.hr .tab { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); }
.hr .tab b { font-size: 15px; font-weight: 700; }
.hr .tab small { font-size: 12px; color: var(--muted); }
.hr .tab[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }
.hr .tab[aria-pressed="true"] small { color: #f1d9de; }
.hr .tab:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }

.hr .layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.hr .planbox { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; min-width: 0; }
.hr .planbox svg { display: block; width: 100%; height: auto; max-height: 84vh; margin: 0 auto; }
.hr .cap { font: 400 12.5px/1.45 var(--sans); color: var(--muted); margin: 8px 4px 2px; }
.hr .cap b { color: var(--ink); }

/* tlocrt */
.hr .pt { cursor: pointer; }
.hr .pt * { vector-effect: non-scaling-stroke; }
.hr .pt .s { stroke: var(--wall); stroke-width: 1.2; }
.hr .pt.area .s { fill: var(--area); stroke-width: 1.6; }
.hr .pt.room .s { fill: var(--lin); }
.hr .pt.holy .s { fill: #e9d6c9; }
.hr .pt.outline .s { fill: none; stroke-width: 2.4; pointer-events: stroke; }
.hr .pt.unknown .s { fill: none; stroke-dasharray: 6 5; stroke: var(--muted); pointer-events: stroke; }
.hr .pt.cloth .s { fill: var(--main); stroke: var(--main); }
.hr .pt.gold .s { fill: var(--gold); stroke: #7b5217; }
.hr .pt.bronze .s { fill: var(--bronze); stroke: #5a3a1f; }
.hr .pt.stone .s { fill: #cfc4b2; }
.hr .pt.side .s { fill: #e3d9c6; stroke-width: .8; }
.hr .pt.slaughter .s { fill: #e0d3bc; stroke-dasharray: 3 3; }
.hr .pt:hover .s { filter: brightness(1.08); stroke: var(--main); }
.hr .pt.sel .s { stroke: var(--main); stroke-width: 3; }
.hr .pt:focus { outline: none; }
.hr .pt:focus-visible .s { stroke: var(--main); stroke-width: 3.5; filter: drop-shadow(0 0 3px rgba(101, 24, 41, .85)); }
.hr .lbl { font-family: var(--sans); font-weight: 700; fill: var(--ink); pointer-events: none; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.hr .dir { font-family: var(--sans); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; fill: var(--main); text-anchor: middle; dominant-baseline: central; }
.hr .dim { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hr .dimt { font-family: var(--sans); fill: var(--muted); text-anchor: middle; dominant-baseline: central; }

/* ploča */
.hr .panel { position: sticky; top: 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 20px; min-width: 0; max-height: calc(100vh - 32px); overflow: auto; font-family: var(--sans); }
.hr .view + .view { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.hr .pk { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--main); }
.hr .view h2 { font: 500 26px/1.15 var(--serif); margin: 4px 0 6px; text-wrap: balance; }
.hr .intro { font: 400 15.5px/1.6 var(--read); color: var(--muted); margin: 0 0 12px; }
.hr .box { background: var(--soft); border-left: 3px solid var(--main); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 0 0 14px; font: 400 15px/1.55 var(--read); }
.hr .box h3 { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 4px; color: var(--main); }
.hr .box p { margin: 0 0 6px; }
.hr .box p:last-child { margin: 0; }
.hr .view > .cap { margin: 0 0 12px; }
.hr .items { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); }
.hr .it-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin: 0; font-family: var(--sans); }
.hr .it-head > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; width: 100%; min-height: 44px; padding: 6px; border-radius: 6px; font-family: var(--sans); }
.hr .it-head > button:hover, .hr .it-head > button[aria-current="true"] { background: var(--soft); }
.hr .it-head > button:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.hr .it-head .sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .25); align-self: center; }
.hr .it-head b { font-size: 15px; line-height: 24px; flex: 1 1 0; min-width: 0; }
.hr .it-head small { flex: 0 0 100%; padding-left: 22px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.hr .detail { padding: 2px 6px 12px 28px; }
.hr .heb-line { font: 400 13px var(--sans); color: var(--muted); margin: 0 0 4px; }
.hr .heb-line span { font: 400 18px "SBL Hebrew", "Ezra SIL", "Times New Roman", serif; color: var(--ink); unicode-bidi: isolate; }
.hr .detail p { font: 400 15px/1.6 var(--read); margin: 2px 0 8px; }
.hr .detail .heb-line { font: 400 13px var(--sans); }
.hr .detail .flag { font: 600 12.5px/1.45 var(--sans); color: var(--bronze); }
.hr .kmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 13px var(--sans); }
.hr .kmeta a { color: var(--main); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hr .links { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font: 400 13.5px var(--sans); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.hr .links a { color: var(--main); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* usporedba veličina */
.hr .cmp { margin-top: 36px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 20px; }
.hr .cmp h2 { font: 500 24px/1.2 var(--serif); margin: 0 0 4px; }
.hr .cmp > p { font: 400 15px/1.6 var(--read); color: var(--muted); margin: 0 0 12px; max-width: 820px; }
.hr .cmprow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; margin: 6px 0 20px; }
.hr .cmpcell { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 12.5px var(--sans); color: var(--muted); text-align: center; }
.hr .cmpcell b { color: var(--ink); font-size: 13.5px; }
.hr .cmpcell svg { display: block; max-width: 100%; height: auto; }

/* sa skriptom: samo odabrani tlocrt, a popis dijelova otvara jedan opis; bez skripta ostaje sav tekst, a tlocrt se ne prikazuje */
.js .hr .view:not(.on) { display: none; }
.js .hr .view > .cap { display: none; }
.js .hr .detail { display: none; }
.js .hr .item.open .detail { display: block; }
html:not(.js) .hr :is(.tabs, .planbox) { display: none; }
html:not(.js) .hr .layout { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .hr .panel { position: static; max-height: none; }

@media (max-width: 900px) {
  .hr { width: calc(100% - 32px); padding: 28px 0 56px; }
  .hr .layout { grid-template-columns: minmax(0, 1fr); }
  .hr .panel { position: static; max-height: none; overflow: visible; padding: 16px; }
  .hr .planbox { padding: 8px; }
  .hr .planbox svg { max-height: none; }
  .hr .cmp { padding: 16px; }
}
@media (prefers-reduced-motion: no-preference) { .hr .pt .s { transition: filter .15s; } }
/* Dodirni ciljevi na mobitelu i tabletu: najmanje 44 px */
@media (max-width: 900px), (pointer: coarse) {
  .hr .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .hr .links { row-gap: 0; }
}