/* The town's index idx (chosen 11 Nov from design/map-guide, option 5).
   Desktop: a paper column down the left of the map, under the header, listing every building
   grouped by door. Pointing at a row lifts its building; choosing it opens a short summary in the
   row with a link in. Phone: the same list as a drawer that peeks up from the bottom.
   It replaces the hover card, the key hint, the mini-map and the plate caption. */
.idx { --rail-w: 330px; position: absolute; left: 0; top: var(--hdr-h); bottom: 0; z-index: 5; width: var(--rail-w); display: flex; flex-direction: column; background: var(--card); border-right: 3px solid var(--ink); color: var(--ink); }
.idx__hd { flex: none; padding: 18px 20px 12px; border-bottom: var(--rule); }
.idx__hd h2 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 34px; line-height: 1; text-transform: uppercase; }
.idx__toggle { display: none; }
.idx__tip { margin: 6px 0 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.55; color: var(--mute); }
.idx__tip .touch { display: none; }
@media (pointer: coarse) { .idx__tip .desk { display: none; } .idx__tip .touch { display: inline; } }
.idx__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.idx__grp { margin: 0; padding: 12px 20px 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--red); text-transform: uppercase; }
.idx__list { list-style: none; margin: 0; padding: 0 20px; }
.idx__list li { border-bottom: 1.5px dashed var(--ink); }
.idx__it { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; width: 100%; margin: 0; padding: 8px 0 6px; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: padding-left 200ms var(--ease-out); }
.idx__it span, .idx__it small { font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.idx__it b { font-family: var(--f-sign); font-weight: 400; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .idx__it:hover, .idx li.is-hot .idx__it { padding-left: 6px; } .idx__it:hover b, .idx li.is-hot .idx__it b { color: var(--red); } }
.idx__it:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.idx li.is-open { margin: 0 -20px; padding: 0 20px; background: var(--ink); border-bottom-color: transparent; }
.idx li.is-open .idx__it b, .idx li.is-open .idx__it span, .idx li.is-open .idx__it small { color: var(--card); }
.idx li.is-open .idx__it:focus-visible { outline-color: var(--card); }
.idx__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.idx li.is-open .idx__more { grid-template-rows: 1fr; }
.idx__more > div { overflow: hidden; }
.idx__more p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--card); }
.idx__more .idx__meta { font-family: var(--f-mono); font-size: 12px; color: #C9C2B6; }
.idx__acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 14px; }
.idx__acts a, .idx__acts button { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1.5px solid var(--card); background: transparent; color: var(--card); font-family: var(--f-mono); font-size: 12px; text-decoration: none; cursor: pointer; }
.idx__acts .is-go { background: var(--red); border-color: var(--red); }
.idx__acts a:focus-visible, .idx__acts button:focus-visible { outline: 2px solid var(--card); outline-offset: 2px; }
.idx__ft { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-top: var(--rule); font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
.idx__ft kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border: 1.5px solid var(--ink); font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
@media (pointer: coarse) { .idx__ft { display: none; } }

/* what the idx replaces */
body.home .hover-card, body.home .hud-hint, body.home .plate, body.home .plan-fab, body.home .pull, body.home .town__meta { display: none !important; }

/* phone: a drawer that peeks up from the bottom */
@media (max-width: 900px) {
  .idx { top: auto; right: 0; width: auto; height: min(72vh, 620px); height: min(72dvh, 620px); border-right: 0; border-top: 3px solid var(--ink); box-shadow: 0 -12px 30px -16px rgba(22, 20, 19, .6); transform: translateY(calc(100% - 108px)); transition: transform 420ms var(--ease-drawer, cubic-bezier(0.32, 0.72, 0, 1)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .idx.is-up { transform: none; }
  .idx__hd { padding: 0 16px 10px; }
  .idx__toggle { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 44px; margin: 0; padding: 10px 0 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
  .idx__toggle::before { content: ""; align-self: center; width: 44px; height: 4px; margin-bottom: 10px; background: var(--ink); opacity: .35; }
  .idx__toggle span { display: flex; justify-content: space-between; align-items: baseline; }
  .idx__toggle small { font-family: var(--f-mono); font-size: 12px; color: var(--mute); }
  .idx__hd h2 { font-size: 30px; }
  .idx__grp { padding: 10px 16px 2px; }
  .idx__list { padding: 0 16px; }
  .idx li.is-open { margin: 0 -16px; padding: 0 16px; }
  .idx__it { padding: 10px 0 8px; min-height: 44px; }
  .idx__acts a, .idx__acts button { height: 44px; flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 900px) { body.home .replay { top: calc(var(--hdr-h) + 12px); bottom: auto; right: 14px; } }
@media (prefers-reduced-motion: reduce) { .idx, .idx__more, .idx__it { transition-duration: 1ms !important; } }

/* The panel is the map's key: each group, and its rows, carry the roof colour of that neighbourhood. */
.idx__grp { display: flex; align-items: center; gap: 10px; color: var(--hue, var(--red)); font-weight: 500; }
.idx__grp::after { content: ""; flex: 1; height: 3px; background: var(--hue, var(--red)); }
.idx__list .idx__it span { color: var(--hue, var(--mute)); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .idx__list .idx__it:hover b, .idx__list li.is-hot .idx__it b { color: var(--hue, var(--red)); } }
.idx__list li.is-open { box-shadow: inset 6px 0 0 var(--hue, var(--red)); }
.idx__list li.is-open .idx__acts .is-go { background: var(--hue, var(--red)); border-color: var(--card); }

/* The panel in the dark style of the résumé and Profile side panels. Cream sign
   titles on ink, red mono kicker, solid hairline rules, numbers and group names in light district colours. */
.idx { background: #161413; color: #F7F3EB; border-right-color: #161413; }
.idx .idx__hd { padding: 26px 28px 16px; border-bottom: 1px solid #3A3633; }
.idx__kick { margin: 0 0 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #E0705F; }
.idx .idx__hd h2 { font-size: 56px; line-height: .9; color: #F7F3EB; }
.idx .idx__tip { margin-top: 10px; color: #C9C2B6; }
.idx .idx__toggle, .idx .idx__toggle small { color: #C9C2B6; }
.idx .idx__toggle::before { background: #F7F3EB; }
.idx .idx__list li { border-bottom: 1px solid #3A3633; }
.idx .idx__it { color: #F7F3EB; padding: 10px 0 8px; }
.idx .idx__it span { color: var(--hue-t); }
.idx .idx__it small { color: #C9C2B6; }
.idx .idx__it:focus-visible { outline-color: #F7F3EB; }
.idx .idx__ft { border-top: 1px solid #3A3633; color: #C9C2B6; padding: 12px 28px; }
.idx .idx__ft kbd { border-color: #F7F3EB; color: #F7F3EB; }
@media (max-width: 900px) {
  .idx { border-top-color: #161413; }
  .idx .idx__hd { padding: 0 16px 12px; } .idx .idx__hd h2 { font-size: 36px; }
  .idx .idx__kick { display: none; }
}

/* Group bars and row states (both panels). Each group heading is a solid bar in its district colour;
   a row you point at gets a tint of that colour and an edge bar, and the open row fills with it. */
.idx__list { --pad: 20px; --tint: color-mix(in srgb, var(--hue) 30%, #F7F3EB); }
.idx .idx__grp { margin: 16px 0 0; padding: 10px 20px 9px; background: var(--hue); color: #F7F3EB; }
.idx .idx__grp:first-child { margin-top: 0; }
.idx .idx__grp::after { display: none; }
.idx .idx__list li { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); transition: background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .idx .idx__list li:not(.is-open):hover, .idx .idx__list li.is-hot:not(.is-open) { background: var(--tint); box-shadow: inset 6px 0 0 var(--hue); }
  .idx .idx__list li:not(.is-open):hover .idx__it, .idx .idx__list li.is-hot:not(.is-open) .idx__it { padding-left: 8px; }
  .idx .idx__list li:not(.is-open):hover .idx__it b, .idx .idx__list li.is-hot:not(.is-open) .idx__it b { color: var(--hue); }
}
.idx .idx__list li.is-open { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); background: var(--hue); border-bottom-color: transparent; box-shadow: inset 6px 0 0 #161413; }
.idx .idx__list li.is-open .idx__it b, .idx .idx__list li.is-open .idx__it span, .idx .idx__list li.is-open .idx__it small, .idx .idx__list li.is-open .idx__more p, .idx .idx__list li.is-open .idx__meta { color: #F7F3EB; }
.idx .idx__list li.is-open .idx__acts a, .idx .idx__list li.is-open .idx__acts button { border-color: #F7F3EB; color: #F7F3EB; }
.idx .idx__list li.is-open .idx__acts .is-go { background: #F7F3EB; border-color: #F7F3EB; color: var(--hue); font-weight: 500; }
.idx .idx__list { padding: 0 28px; --pad: 28px; --tint: color-mix(in srgb, var(--hue) 80%, #161413); }
.idx .idx__grp { padding: 10px 28px 9px; }
@media (hover: hover) and (pointer: fine) {
  .idx .idx__list li:not(.is-open):hover, .idx .idx__list li.is-hot:not(.is-open) { box-shadow: inset 6px 0 0 var(--hue-t); }
  .idx .idx__list li:not(.is-open):hover .idx__it b, .idx .idx__list li.is-hot:not(.is-open) .idx__it b, .idx .idx__list li:not(.is-open):hover .idx__it span, .idx .idx__list li.is-hot:not(.is-open) .idx__it span { color: #F7F3EB; }
}
.idx .idx__list li.is-open { box-shadow: inset 6px 0 0 #F7F3EB; }
@media (max-width: 900px) { .idx__list { --pad: 16px; } .idx .idx__grp { padding: 10px 16px 9px; } .idx .idx__list { padding: 0 16px; --pad: 16px; } }