/* 空间地图与随身地图的样式；与 night-experience.css 同一纸色体系。 */

/* ── 地图视图 ── */
.r11-maphead { position: sticky; top: 0; z-index: 3; background: #f5efe3; padding: 6px 0 4px; box-shadow: 0 8px 12px -10px #342f2940; }
.r11-maphead h2 { margin: 4px 0 8px; }
.r11-mapwrap {
  margin: 14px 0 10px;
  border: 1px solid #d4c6ae;
  border-radius: 12px;
  background: #f8f2e7;
  overflow: hidden;
}
.r11-mapcanvas { display: block; }
.r11-map-svg { display: block; width: 100%; height: auto; }

.r11-area-square { fill: #eae2d1; stroke: #d8cbb4; stroke-width: 1; }
.r11-area-park { fill: #e2e6d4; stroke: #cdd3ba; stroke-width: 1; }
.r11-area-palace { fill: #efe3d2; stroke: #ddcdb6; stroke-width: 1; }
.r11-area-label { fill: #9a8f7c; font-size: 9px; letter-spacing: .06em; }

.r11-street { stroke: #e6dcc9; stroke-width: 5; stroke-linecap: butt; }
.r11-street.major { stroke: #ddd0b8; stroke-width: 9; }
.r11-axis { fill: none; stroke: #cbb693; stroke-width: 2; stroke-dasharray: 7 5; opacity: .85; }

.r11-walked { stroke: #b08d57; stroke-width: 3.2; stroke-linecap: round; }
.r11-leg { stroke: #93392b; stroke-width: 2.4; stroke-dasharray: 7 5; stroke-linecap: round; }
.r11-arrow { fill: #93392b; }
.r11-leg-label { fill: #93392b; font-size: 10px; font-weight: 600; }

.r11-dot { fill: #f8f2e7; stroke: #8d8371; stroke-width: 2; }
.r11-pin.done .r11-dot { fill: #b08d57; stroke: #b08d57; }
.r11-pin.current .r11-dot { fill: #93392b; stroke: #93392b; }
.r11-pin.pending .r11-dot { fill: none; stroke-dasharray: 2.5 2.5; stroke-width: 1.6; }
.r11-pin.done { cursor: pointer; }
.r11-pin:focus { outline: 2px solid #93392b; outline-offset: 2px; }
.r11-pulse { fill: none; stroke: #93392b; stroke-width: 1.4; opacity: .45; animation: r11-pulse 2.4s ease-out infinite; }
@keyframes r11-pulse { 0% { r: 8; opacity: .55; } 70% { r: 17; opacity: 0; } 100% { opacity: 0; } }

.r11-pin-label { fill: #514838; font-size: 11px; }
.r11-pin-label.done { fill: #7a5c2a; }
.r11-pin-label.current { fill: #93392b; font-weight: 700; }
.r11-pin-label.locked { fill: #a99e8c; }
.r11-leader { stroke: #c3b6a0; stroke-width: .8; }
.r11-unverified { fill: none; stroke: #a1502f; stroke-width: 1; stroke-dasharray: 2 2; opacity: .8; }
.r11-q { fill: #6b6456; font-size: 7.5px; font-weight: 700; }
.r11-warn { fill: #a1502f; font-size: 11px; font-weight: 700; }

.r11-scale line { stroke: #6b6456; stroke-width: 1.2; }
.r11-scale text { fill: #6b6456; font-size: 9px; }
.r11-north path { fill: #6b6456; }
.r11-north text { fill: #6b6456; font-size: 9px; }

.r11-leg { font-size: 14px; color: #4a4238; }
.r11-flag { margin: 10px 0; padding: 10px 12px; border-left: 2px solid #a1502f; background: #f7ece2; font-size: 13px; line-height: 1.75; color: #6b3a25; }

/* 进度条（保留原轴线示意的作用：整体推进感） */
.r11-strip { margin-top: 22px; }
.r11-strip h3 { font-size: 14px; font-weight: 500; color: #6b5741; margin: 0 0 10px; }
.r11-strip ol { display: flex; gap: 14px; overflow-x: auto; list-style: none; margin: 0; padding: 0 0 8px; }
.r11-strip li { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: #8d8371; min-width: 42px; }
.r11-strip li i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8d8371; background: transparent; }
.r11-strip li.done i { background: #b08d57; border-color: #b08d57; }
.r11-strip li.done { color: #7a5c2a; }
.r11-strip li.cur i { background: #93392b; border-color: #93392b; box-shadow: 0 0 0 4px #93392b22; }
.r11-strip li.cur { color: #93392b; font-weight: 700; }
.r11-strip li.locked i { border-style: dotted; opacity: .6; }
.r11-strip li span { white-space: nowrap; }

/* ── 随身地图 ── */
.r11-pocket { position: fixed; inset: 0; z-index: 300; background: #201b16e6; overflow: auto; padding: 0 0 40px; }
.r11-pocket-bar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; justify-content: center; padding: 12px; background: #201b16; }
.r11-pocket-bar button, .r11-pocket-bar a { font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px; border-radius: 8px; border: 1px solid #b9a88b; background: #fffaf1; color: #342f29; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.r11-pocket-page { width: min(94vw, 760px); margin: 8px auto 0; background: #f5efe3; color: #342f29; padding: 22px 20px 18px; border-radius: 6px; box-shadow: 0 10px 40px #0006; }
.r11-pocket-page header h1 { font-size: 21px; font-weight: 500; margin: 0 0 4px; letter-spacing: .08em; }
.r11-pocket-page header p { font-size: 12px; color: #6b5741; margin: 0 0 12px; }
.r11-pocket-map { border: 1px solid #d8cbb4; border-radius: 4px; background: #f8f2e7; }
.r11-pocket-map svg { display: block; width: 100%; height: auto; }
.r11-pocket-list { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; }
.r11-pocket-list th, .r11-pocket-list td { text-align: left; padding: 6px 6px; border-bottom: 1px solid #ddd0b8; }
.r11-pocket-list th { color: #6b5741; font-weight: 500; }
.r11-pocket-list tr.done td { color: #7a5c2a; }
.r11-pocket-list tr.cur td { color: #93392b; font-weight: 600; }
.r11-pocket-page footer { margin-top: 12px; font-size: 10.5px; line-height: 1.7; color: #7d7365; }
.r11-pocket-page footer p { margin: 4px 0; }

@media print {
  body.r11-pocket-open > *:not(.r11-pocket) { display: none !important; }
  body.r11-pocket-open { background: #fff; }
  .r11-pocket { position: static; background: #fff; padding: 0; overflow: visible; }
  .r11-pocket-bar { display: none !important; }
  .r11-pocket-page { width: auto; max-width: none; margin: 0; box-shadow: none; border-radius: 0; padding: 0; }
  .r11-pocket-map { break-inside: avoid; }
  @page { size: A4 portrait; margin: 12mm; }
}