/* Map page: banner, century dial, the map in a gold-framed paper mat with a reading panel,
   the eleven-century chronicle, and three ways further. Prefix mp-. Uses quiet-nav.css, enamel-cards.css, home.css. */
.mp-head { background: linear-gradient(#e9e3d5, var(--bg, #f8f4ec)); }
:root[data-theme="dark"] .mp-head { background: linear-gradient(#0b1424, var(--bg, #0f1a2b)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mp-head { background: linear-gradient(#0b1424, var(--bg, #0f1a2b)); } }
.mp-banner { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.mp-banner .en-lede { max-width: 52ch; }
.mp-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: #e9eef2; }
.mp-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .45rem; vertical-align: -.08rem; }
.mp-m { background: #19a7b6; box-shadow: 0 0 0 2px #fff7e2; }
.mp-t { background: #b8385d; box-shadow: 0 0 0 2px #fff7e2; }
.mp-l { background: transparent; box-shadow: inset 0 0 0 2px #fff7e2; }

.mp-sec { padding-top: 2.4rem; }
.mp-sec > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1rem; }
.mp-sec h2 { margin: 0; font-size: 1.45rem; }
.mp-sub { margin: 0; color: var(--en-ink2); font-size: .95rem; }

/* century dial */
.mp-cents { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem .1rem .7rem; scrollbar-width: thin; }
.mp-cent { flex: none; display: grid; justify-items: center; min-width: 4.2rem; padding: .45rem .7rem .4rem; border: 0; border-radius: 10px; cursor: pointer; font: inherit; color: var(--en-ink);
  background: linear-gradient(var(--en-paper1), var(--en-paper2)); box-shadow: inset 0 0 0 1px rgba(184,145,58,.4); transition: transform .2s; }
.mp-cent b { font-size: 1.05rem; } .mp-cent small { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--en-ink2); }
.mp-cent:hover { transform: translateY(-2px); }
.mp-cent[aria-pressed="true"] { color: #fbf3df; background: linear-gradient(170deg, rgba(255,255,255,.18), transparent 45%), radial-gradient(140% 140% at 80% 20%, #178995, #0b5f68 55%, #063a41); box-shadow: inset 0 -3px 0 #c9a44c, 0 10px 18px -10px rgba(5,40,50,.7); }
.mp-cent[aria-pressed="true"] small { color: #ecd28c; }
.mp-cent:disabled { cursor: default; opacity: .45; transform: none; }

/* map + reading panel */
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.4rem; align-items: start; }
.mp-mat { position: relative; padding: 12px; border-radius: 8px; background: linear-gradient(var(--en-paper1), var(--en-paper2));
  box-shadow: inset 0 0 0 5px var(--en-paper1), inset 0 0 0 6px rgba(184,145,58,.6), inset 0 0 0 9px var(--en-paper1), inset 0 0 0 10px rgba(184,145,58,.35), 0 30px 50px -32px rgba(20,30,60,.6); }
.mp-map { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 960 / 560; background: #cfe3e3 url("img/map-base.webp") center / cover; }
.mp-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-dot { cursor: pointer; transition: opacity .3s; }
.mp-dot circle { stroke: #fff7e2; stroke-width: 2.2; transition: r .2s; }
.mp-dot.m circle { fill: #19a7b6; } .mp-dot.t circle { fill: #b8385d; }
.mp-dot.lost circle { fill: rgba(255,247,226,.55); stroke-width: 2.6; } .mp-dot.lost.m circle { stroke: #0f8a99; } .mp-dot.lost.t circle { stroke: #b8385d; }
.mp-dot.past { opacity: .32; } .mp-dot.later { display: none; }
.mp-dot:hover circle, .mp-dot.on circle { r: 9; }
.mp-dot.on circle { stroke: #d9a520; stroke-width: 3; }
.mp-dot:focus-visible { outline: none; } .mp-dot:focus-visible circle { stroke: #d9a520; stroke-width: 3.5; }
.mp-place { font-family: var(--serif, "Gentium Book Plus", Georgia, serif); font-size: 14.5px; letter-spacing: .03em; fill: #2b2416;
  paint-order: stroke; stroke: rgba(251,246,234,.92); stroke-width: 3.5px; stroke-linejoin: round; transition: opacity .3s; pointer-events: none; }
.mp-place.past { opacity: .45; } .mp-place.later { display: none; }
.mp-place.now { font-weight: 700; fill: #17253a; }
.mp-place.sel { fill: #7a5a12; }
.mp-panel .en-page { gap: .25rem; }
.mp-panel .en-title { font-size: 1.25rem; }
.mp-panel .en-ar { font-size: 1.4rem; }
.mp-facts { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; margin: .3rem 0 .4rem; font-size: .92rem; }
.mp-facts dt { color: var(--en-ink2); } .mp-facts dd { margin: 0; }
.mp-status { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .8rem; background: rgba(184,145,58,.18); }
.mp-note { margin: .2rem 0 0; font-size: .93rem; line-height: 1.5; color: var(--en-ink2); }
.mp-panel .en-btn { text-decoration: none; }

/* chronicle */
.mp-chron { border-radius: 12px; overflow: hidden; background: linear-gradient(var(--en-paper1), var(--en-paper2)); box-shadow: inset 0 0 0 1px rgba(184,145,58,.35), 0 20px 34px -26px rgba(20,30,60,.5); }
.mp-row { border-top: 1px solid rgba(184,145,58,.28); } .mp-row:first-child { border-top: 0; }
.mp-row summary { display: grid; grid-template-columns: 4.6rem 9rem 1fr auto; gap: 1.2rem; align-items: center; padding: .75rem 1.2rem; cursor: pointer; list-style: none; }
.mp-row summary::-webkit-details-marker { display: none; }
.mp-row summary:hover { background: rgba(184,145,58,.08); }
.mp-when b { display: block; font-size: 1.1rem; } .mp-when small { color: var(--en-ink2); font-size: .78rem; }
.mp-bars { display: flex; gap: 3px; flex-wrap: wrap; }
.mp-bars i { width: 9px; height: 18px; border-radius: 2px; }
.mp-bars .m { background: #19a7b6; } .mp-bars .t { background: #b8385d; } .mp-bars .lost { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.mp-bars .lost.m { color: #19a7b6; } .mp-bars .lost.t { color: #b8385d; }
.mp-text { color: var(--en-ink2); font-size: .93rem; line-height: 1.45; }
.mp-row summary::after { content: "+"; color: #9a7a2e; font-size: 1.2rem; }
.mp-row[open] summary::after { content: "–"; }
.mp-row.empty summary { cursor: default; } .mp-row.empty summary::after { content: ""; }
.mp-works { margin: 0; padding: .2rem 1.2rem 1rem 6.8rem; list-style: none; columns: 2 18rem; font-size: .93rem; }
.mp-works li { break-inside: avoid; padding: .15rem 0; } .mp-works i { color: var(--en-ink2); }
.mp-works b { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .45rem; }
.mp-works .m { background: #19a7b6; } .mp-works .t { background: #b8385d; }

@media (max-width: 900px) { .mp-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mp-place { font-size: 15px; }
  .mp-map { aspect-ratio: auto; height: 300px; } .mp-map svg { width: 520px; left: 50%; transform: translateX(-50%); }
  .mp-row summary { grid-template-columns: 3.6rem 1fr auto; } .mp-text { grid-column: 1 / -1; grid-row: 2; } .mp-works { padding-left: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-dot, .mp-cent { transition: none; } }
/* The production page retains the existing map wiring, IDs and keyboard tooltips. */
.map-page #map{margin-top:0}.map-page .mp-banner{margin-top:0}
.map-page .mapbox{aspect-ratio:960/560;min-height:0;background:transparent;border:0;box-shadow:none;overflow:auto}
.map-page .mapbox svg{position:relative;display:block;inset:auto;width:100%;min-width:0;height:auto}
.map-page .dot.m{fill:#19a7b6}.map-page .dot.t{fill:#b8385d}.map-page .dot.lost{fill:#fff7e2b0;stroke-width:2}.map-page .dot.lost.m{stroke:#0f8a99}.map-page .dot.lost.t{stroke:#b8385d}
.map-page .dot.sel{stroke:#d9a520;stroke-width:3}.map-page .city{font-size:14.5px;fill:#2b2416;stroke:#fbf6ea;stroke-width:3.5;paint-order:stroke;pointer-events:none}
.map-page .city.now{font-weight:700}.map-page .city.past{opacity:.45}
.map-page .side{background:none;border:0;padding:0;box-shadow:none}.map-page #cents{margin:1.3rem 0}.map-page #cents .mp-cent{box-shadow:inset 0 0 0 1px #b8913a60}
.map-page .legend{color:#f5ecd6}.map-page .legend .sw.m{background:#19a7b6}.map-page .legend .sw.t{background:#b8385d}
.mp-chron>details{margin:0;padding:0;border:0;background:none}.mp-chron .mp-row{border-top:1px solid #b8913a45}.mp-chron p{padding:0 1.2rem 1rem;margin:0}
.map-page .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:640px){.map-page .mapbox{height:300px;aspect-ratio:auto}.map-page .mapbox svg{width:520px;min-width:520px;left:0;transform:none}.map-page .ways{grid-template-columns:1fr}}
.map-page .mp-banner{align-items:flex-start;text-align:left}
.map-page .mp-banner .en-lede{max-width:65ch}
.map-page .mp-banner .legend{margin-top:.4rem}
.map-page .city.sel{fill:#7a5a12;font-weight:700}
.mp-mat,.mp-panel{min-width:0}
.map-page #cents{flex-wrap:nowrap;overflow-x:auto;max-width:100%}
@media(max-width:900px){.mp-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.map-page .mapbox{width:100%;max-width:100%;box-sizing:border-box}.mp-row summary{grid-template-columns:3.6rem minmax(0,1fr) auto}}
/* Shared regional collage in the map banner; existing layout and turquoise glaze retained. */
.mp-banner::before{inset:0 0 0 35%;width:auto;height:auto;transform:none;background:linear-gradient(90deg,rgba(6,58,65,.7),rgba(6,58,65,.2)),url(img/lacquer/region-all.webp) center/cover no-repeat;mask:linear-gradient(90deg,transparent,#000 48%);-webkit-mask:linear-gradient(90deg,transparent,#000 48%);opacity:.85}
@media(max-width:700px){.mp-banner::before{inset:0;opacity:.4;mask:linear-gradient(180deg,#000,transparent);-webkit-mask:linear-gradient(180deg,#000,transparent)}}