/* MUSEUM
   The walkable 3-D hang: the walk itself (#/museum) and the owner's arrange
   screen (#/museum/arrange). The walk is CSS 3-D — a perspective viewport, a
   world div carrying the camera transform, and every wall, floor and painting
   a flat rectangle. One CSS pixel is one centimetre of museum. */

/* ---------- the walk ---------- */

.museum {
  position: fixed; inset: 0; z-index: 90;        /* over the chrome, under the viewer */
  background: var(--bg-viewer);
  overflow: hidden; user-select: none; touch-action: none;
}
body.mu-open { overflow: hidden; }

/* The scene is the control: take hold of a wall or the floor and drag. */
.mu-clip { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.mu-clip:active { cursor: grabbing; }
.mu-vp {
  position: absolute; inset: 0;
  perspective: 900px;                            /* rewritten per frame by zoom */
  perspective-origin: 50% 50%;
}
.mu-world {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* The supersampling stage: a uniform scale-up of the whole scene (camera
   strides scale to match in muApply), so the compositor rasterises every
   plane at several texels per centimetre instead of one. */
.mu-stage { position: absolute; transform-style: preserve-3d; }
.mu-roomg { position: absolute; transform-style: preserve-3d; }
.mu-roomg.mu-hidden { display: none; }
/* Phones (muCull applies .mu-far there): a neighbouring room shows its
   architecture through the doorway, but its art waits until you arrive. */
.mu-roomg.mu-far .mu-art,
.mu-roomg.mu-far .mu-label { display: none; }
/* An exit wall and its doorway, built once and turned to whichever wall the
   next room opens from. It lives at stage level — the wall belongs to two
   rooms at once — and culls on its own (see muCull). */
.mu-doorg { position: absolute; transform-style: preserve-3d; }
.mu-doorg.mu-hidden { display: none; }

/* The building itself — floors, ceiling, walls, doorway trim, the front door
   and the picture frames — lives in museum-room.css. This file keeps the
   walk's scaffolding and chrome, the placards, and the arrange screen. */

/* The one destination a tap offers: a disc on the floor before each doorway,
   chevron pointing through, that carries you to the middle of the room
   beyond. Everywhere else you walk. Drawn in world centimetres like the
   doorway itself, and only ever shown in the room it stands in (muCull). */
.mu-target {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(252, 249, 242, .26) 0 38%,
      rgba(252, 249, 242, .52) 38% 48%,
      rgba(252, 249, 242, .20) 48% 58%,
      rgba(252, 249, 242, 0) 60%);
  cursor: pointer;
  /* Pale on a pale floor needs its own edge to be found at all. */
  filter: drop-shadow(0 0 5px rgba(46, 36, 22, .5));
  animation: mu-target-beat 3.2s ease-in-out infinite;
}
.mu-target.mu-hidden { display: none; }
.mu-target-arrow {
  position: absolute; left: 50%; top: 24px;
  width: 26px; height: 26px; margin-left: -13px;
  border-top: 6px solid rgba(255, 253, 248, .95);
  border-left: 6px solid rgba(255, 253, 248, .95);
  transform: rotate(45deg);
}
@keyframes mu-target-beat {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mu-target { animation: none; opacity: .85; }
}

/* The wall placard beside each piece. Laid out ten times life-size and scaled
   (see muLabelEl), so its type stays vector-crisp when you lean in. */
.mu-label {
  position: absolute; left: 0; top: 0;
  padding: 14px 18px; overflow: hidden;
  background: #e9e2d3;
  border: 2px solid rgba(90, 78, 60, .28);
  box-shadow: 0 6px 14px rgba(20, 15, 8, .22);
  backface-visibility: hidden;
  pointer-events: none;
  text-align: left;
}
.mu-label .mu-lb-a {
  display: block; font: 700 15.5px var(--sans); letter-spacing: .02em;
  color: #2c261e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mu-label .mu-lb-t {
  display: block; margin-top: 5px; font: italic 400 15px/1.25 var(--serif);
  color: #3a332a;
  max-height: 38px; overflow: hidden;
}
.mu-label .mu-lb-d { font-style: normal; }
.mu-label .mu-lb-m {
  display: block; margin-top: 6px; font: 400 12.5px var(--sans);
  color: #6d6353;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- the walk's chrome ---------- */

.mu-hud { position: absolute; inset: 0; pointer-events: none; }

/* The stairwell dark: a breath of black while a portal carries you between
   storeys (or through a paired passage). */
.mu-fade {
  position: absolute; inset: 0; z-index: 30;
  background: #0b0a09; opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.mu-fade.on { opacity: 1; }
.mu-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 26px 22px;
  background: linear-gradient(to bottom, rgba(13, 11, 8, .62), transparent);
  pointer-events: none;
}
.mu-top > * { pointer-events: auto; }
.mu-room { font: 400 12px var(--sans); color: var(--dim); letter-spacing: .04em; }
.mu-sp { flex: 1; pointer-events: none; }
.mu-arrange { font-size: 13px; }
.mu-x {
  width: 38px; height: 38px; line-height: 36px; text-align: center;
  color: rgba(236, 227, 210, .6); font: 400 26px var(--serif);
}
.mu-x:hover { color: var(--display); }

/* Nothing runs across the bottom of the walk: a caption there stood over the
   floor markers, and the painting's own placard says it all once opened. The
   wall labels beside each piece are the museum's own signage. */

/* The map owns the lower-right corner now; the hint keeps to the other side. */
.mu-hint {
  position: absolute; left: 22px; bottom: 16px;
  font: 400 11.5px var(--sans); color: var(--off);
  pointer-events: none;
}

/* ---------- the corner plan ---------- */
/* Half-there until the mouse arrives; solid under it. Every room is a click
   target that puts you down in its middle. Phones never render the host
   element (museumView) — the whole screen there is for walking. */
.mu-map {
  position: absolute; right: 16px; bottom: 16px;
  padding: 10px;
  background: rgba(23, 19, 16, .92); border: 1px solid var(--hair);
  opacity: .45; transition: opacity .25s ease;
  pointer-events: auto;
}
.mu-map:hover { opacity: 1; }
.mu-map svg { display: block; }
.mu-map .mm-room {
  fill: #332d26; stroke: rgba(236, 227, 210, .55);
  stroke-width: var(--mm-sw, 2px);
  cursor: pointer; transition: fill .15s ease;
}
.mu-map .mm-room.on { fill: rgba(194, 160, 97, .28); stroke: var(--gold); }
.mu-map .mm-room:hover { fill: #4c443a; }
/* Room-coloured, drawn over the shared wall: the opening. */
.mu-map .mm-door { fill: #332d26; pointer-events: none; }
.mu-map .mm-num {
  fill: rgba(236, 227, 210, .55); font-family: var(--sans);
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none; user-select: none;
}
.mu-map #mm-cam polygon { fill: var(--gold); pointer-events: none; }

/* ---------- phones: landscape only ---------- */

/* The D-pad is gone: a finger on the wall walks the room, and the marker on
   the floor is the only button a museum needs. */
.museum.touch .mu-hint { display: none; }

/* The marker's pulse is a luxury a phone can't afford: that one animation
   keeps the compositor rendering an otherwise still scene, and the heat
   arrives long before the beauty does. */
.museum.touch .mu-target { animation: none; opacity: .85; }

/* Portrait is a corridor wall, not a museum: ask for the turn, stop rendering. */
.mu-rotate {
  display: none; position: absolute; inset: 0; z-index: 5;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px; background: var(--bg-viewer);
  font: italic 400 17px/1.6 var(--serif); color: var(--dim);
}
@media (orientation: portrait) {
  .museum.touch .mu-rotate { display: flex; }
  .museum.touch .mu-clip, .museum.touch .mu-hud { visibility: hidden; }
}

/* ---------- arranging the museum ---------- */

.mroom {
  margin: 26px 0 0; padding: 14px 16px 16px;
  background: var(--raised); border: 1px solid var(--hair-soft);
}
.mroom-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* A collection's room wears the collection's title — fixed, not typed. */
.mroom-head h2 { margin: 0; font: 400 19px var(--serif); color: var(--display2); }
/* The heading is the room's name, edited right where it stands. Unnamed rooms
   wear their number as a placeholder, a shade dimmer — an invitation to type.
   Scoped under the header to outweigh the form sheet's input[type=text]. */
.mroom-head .mroom-name {
  width: 240px; max-width: 100%; padding: 0 2px;
  background: none; border: 0; border-bottom: 1px solid transparent;
  font: 400 19px var(--serif); color: var(--display2);
}
.mroom-head .mroom-name::placeholder { color: var(--dim); opacity: 1; }
.mroom-head .mroom-name:hover { border-bottom-color: var(--hair-mid); }
.mroom-head .mroom-name:focus { outline: none; border-bottom-color: var(--gold-line); }
.mroom-n { white-space: nowrap; }
.mroom-empty { margin: 12px 2px 2px; font-style: italic; }
.mroom .arrange { margin-top: 12px; max-width: none; }
.mroom .marrange { min-height: 14px; }          /* an empty room still catches a drop */

/* Tight | Spacious. A pill pair — the one rounded thing, as the system allows. */
.seg { display: inline-flex; margin-left: 6px; }
.seg-btn {
  padding: 4px 14px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--hair-mid); border-left-width: 0;
  font: 600 10px var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.seg-btn:first-child { border-left-width: 1px; border-radius: 20px 0 0 20px; }
.seg-btn:last-child { border-radius: 0 20px 20px 0; }
.seg-btn.on { background: var(--gold-tint2); color: var(--gold-hi); border-color: var(--gold-line); }
.seg-btn.on + .seg-btn { border-left-color: var(--gold-line); }

.mroom-merge { font-size: 12px; }
.mroom-via-l { margin-left: 10px; white-space: nowrap; }

/* The floor selector above the rooms, and the storey note beside it. */
.mfloors { display: flex; align-items: center; gap: 16px; margin: 20px 0 4px; }
.mfloors .seg { margin-left: 0; }
.mfloors-n { white-space: nowrap; }

/* The folded-away help: a small "i" in the byline, the old hint below. */
.info-i {
  width: 20px; height: 20px; margin-left: 6px; padding: 0;
  cursor: pointer; vertical-align: -3px;
  background: none; color: var(--dim);
  border: 1px solid var(--hair-mid); border-radius: 50%;
  font: 600 11px var(--serif); font-style: italic;
}
.info-i:hover, .info-i.on { color: var(--gold-hi); border-color: var(--gold-line); }

/* The wall headings and doorway rows that group a room's list the way the
   room hangs. Neither is a row anyone can drag — they're the architecture. */
.mwall-h {
  margin: 14px 0 2px; padding: 4px 2px 3px;
  border-bottom: 1px solid var(--hair-mid);
  font: 600 10px var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); list-style: none;
}
.marrange .mwall-h:first-child { margin-top: 2px; }
.mdoor-row {
  display: flex; align-items: center; gap: 10px;
  margin: 3px 0; padding: 5px 10px;
  border: 1px dashed var(--hair-strong); color: var(--faint);
  font: 400 12px var(--sans); font-style: italic; list-style: none;
}
.mdoor-glyph { font-style: normal; font-size: 14px; color: var(--dim2); }

/* The pin mark at a row's end: hand-placed vs hanging free. */
.apin { width: 20px; text-align: center; color: var(--gold-hi); font-size: 13px; }
.apin.afree { color: var(--faint); }

/* The extra-door picker, compact like the old wall select. */
.mdoor2 {
  height: 26px; padding: 0 6px; margin-left: 6px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--hair-mid); border-radius: 0;
  font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.mdoor2:hover, .mdoor2:focus { color: var(--text); border-color: var(--hair-strong); }
.mroom-d2l { display: inline-flex; align-items: center; align-self: center; white-space: nowrap; }
.mroom-stair { white-space: nowrap; color: var(--gold-hi); }

/* The room's own movers, ↑ ↓ at the head of the room — the pair the paintings
   carry, one floor up. Header buttons, so they stand without the row's
   hover-reveal; at the ends of the museum the impossible one greys instead of
   vanishing, so the header doesn't reflow from room to room. */
.mroom-move { display: inline-flex; align-self: center; margin-right: -2px; }
.mroom-move .arow-btn { width: 26px; height: 26px; opacity: 1; }
.mroom-move .arow-btn[disabled] { opacity: .26; cursor: default; }
.mroom-move .arow-btn[disabled]:hover { border-color: transparent; color: var(--faint); }

/* The room's paint: a small colour well beside the fit pills, square like the
   wall picker (the pills stay the one rounded thing), and its ↺ reset — a
   header button, so it forgoes the row buttons' hover-reveal. */
.mroom-paint { display: inline-flex; align-self: center; }
.mroom-color {
  width: 26px; height: 26px; padding: 2px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--hair-mid); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.mroom-color::-webkit-color-swatch-wrapper { padding: 0; }
.mroom-color::-webkit-color-swatch { border: none; }
.mroom-color::-moz-color-swatch { border: none; }
.mroom-color:hover { border-color: var(--hair-strong); }
.mroom-head .mroom-paint-reset {
  align-self: center; opacity: 1;
  width: 26px; height: 26px; margin-left: -8px;
}

/* Row extras the collections list doesn't have: the movers riding just after
   the drag handle (↑ ⇈ over ↓ ⇊), then on the right the wall picker, cut
   here, and take down. */
.arow-move {
  display: grid; grid-template-columns: 24px 24px;
  flex: 0 0 auto; margin-right: 2px;
}
.arow-move .arow-btn { width: 24px; height: 22px; font-size: 12px; }
.arow-btns { margin-left: auto; display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.awall {
  height: 34px; padding: 0 8px; cursor: pointer;
  background: var(--panel); color: var(--dim);
  border: 1px solid var(--hair-mid); border-radius: 0;
  font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.awall:hover, .awall:focus { color: var(--text); border-color: var(--hair-strong); }
/* A pinned wall is a decision — keep it visible without the hover. */
.awall.pinned { color: var(--gold-hi); border-color: var(--gold-line); }
.arow-btn {
  width: 34px; height: 34px; cursor: pointer;
  background: none; border: 1px solid transparent;
  color: var(--faint); font: 400 14px var(--sans);
  opacity: 0; transition: opacity .15s;
}
.arow:hover .arow-btn { opacity: 1; }
.arow-btn:hover { border-color: var(--hair-mid); color: var(--text); }
.arow-btn.aunhang:hover { color: var(--warn); border-color: var(--warn); }
.arow:first-child .asplit { visibility: hidden; }   /* the wall above is already a cut */

.mu-est {
  margin-left: 10px; padding: 1px 7px 2px; vertical-align: 2px;
  font: 600 9px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(191, 126, 99, .45);
  white-space: nowrap;
}

/* Touch screens can't hover a row's buttons into view. */
@media (pointer: coarse) {
  .arow-btn { opacity: .75; }
}