/* A mounted landscape scroll, scoped to the itinerary sheet. */
dialog.sheet-map {
  width: min(980px, calc(100% - 48px));
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100dvh - 64px);
  border: 1px solid #a5946c;
  border-radius: 4px;
  background: #eee5cc;
  box-shadow: 0 24px 90px #152d2770, 0 0 0 4px #b9a57944, inset 0 0 0 5px #fbf1d855;
}
.sheet-map::backdrop { background: #172e294d; backdrop-filter: blur(3px); }
.sheet-map .panel-header { padding: 23px 32px 20px; background: #eee5cc; border-bottom: 1px solid #a6967138; }
.sheet-map .panel-heading { gap: 16px; }
.sheet-map .panel-heading > .icon { width: 35px; height: 35px; color: #7d805a; }
.sheet-map .panel-heading h2 { font-size: 30px; letter-spacing: 6px; color: #334f42; }
.sheet-map .panel-heading small { font-family: var(--serif); font-size: 11px; letter-spacing: 3px; margin-bottom: 7px; }
.sheet-map .close-button { width: 34px; height: 34px; color: #666d51; border-color: #a3957055; }
.sheet-map .panel-body { padding: 0 30px 19px; }
.route-atlas { --atlas-ink: #355b4d; --atlas-red: #a35b42; color: var(--atlas-ink); }
.atlas-topline { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px 13px; font: 12px var(--serif); letter-spacing: 3px; }
.atlas-topline > span > i { margin: 0 8px; font-style: normal; color: #a59570; }
.atlas-legend { display: flex; gap: 18px; font: 10px var(--sans); letter-spacing: 1px; color: #7c8069; }
.atlas-legend > span { display: flex; align-items: center; gap: 6px; }
.atlas-legend i { width: 6px; height: 6px; border: 1px solid #81927b; border-radius: 50%; }
.atlas-legend i.visited { background: #537763; border-color: #537763; }
.atlas-legend i.current { background: var(--atlas-red); border-color: var(--atlas-red); border-radius: 0; transform: rotate(45deg); }
.atlas-viewport { overflow-x: auto; overflow-y: hidden; border: 1px solid #a89e7555; scrollbar-width: thin; scrollbar-color: #acac8c #e6dfc5; }
.atlas-painting {
  position: relative;
  min-width: 800px;
  aspect-ratio: 12 / 5;
  isolation: isolate;
  background: radial-gradient(ellipse at 20% 15%, #c3c9a75c, transparent 47%), radial-gradient(ellipse at 75% 70%, #f7efd8a8, transparent 55%), #e9e3c9;
  box-shadow: inset 0 0 40px #a4945f22;
}
.atlas-painting::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236b654e' filter='url(%23n)' opacity='.4' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.atlas-landscape { display: block; width: 100%; height: 100%; position: absolute; inset: 0; }
.atlas-distant { fill: #9baa8850; }
.atlas-bank { stroke: #8c9e7966; stroke-width: 1; }
.atlas-river { stroke: #809e8a; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5; opacity: .8; }
.atlas-travelled { stroke: #416f5c; stroke-width: 2.5; stroke-linecap: round; }
.atlas-geography { fill: #6d7d5e; opacity: .4; font: 20px var(--serif); letter-spacing: 7px; }
.atlas-water-label { fill: #5f8579; opacity: .7; font: italic 14px var(--serif); letter-spacing: 6px; }
.atlas-compass { stroke: #8a8868; stroke-width: .7; opacity: .7; }
.atlas-compass text { text-anchor: middle; fill: #737558; stroke: none; font: 12px var(--serif); }
.atlas-inscription { position: absolute; left: 30%; bottom: 8%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none; }
.atlas-inscription > span { font: 25px var(--serif); letter-spacing: 7px; color: #526a52; }
.atlas-inscription > small { font: 10px var(--serif); letter-spacing: 3px; color: #86886a; }
.atlas-inscription > i { position: absolute; right: -31px; top: 1px; width: 19px; padding: 4px 2px; border: 1px solid #a7684b99; color: #9e674c; font: 12px var(--serif); text-align: center; line-height: 1.2; transform: rotate(-4deg); }
.atlas-pin { position: absolute; left: var(--pin-x); top: var(--pin-y); transform: translate(-50%, -13px); display: flex; flex-direction: column; align-items: center; width: 44px; padding: 6px 0; border: 0; background: transparent; color: #657359; z-index: 3; transition: color .18s; }
.atlas-pin-dot { display: grid; place-items: center; width: 9px; height: 9px; border: 1px solid #7c8d70; border-radius: 50%; background: #ece6ce; box-shadow: 0 0 0 3px #ebe5ca99; }
.atlas-pin-name { padding: 3px 5px; margin-top: 3px; font: 17px var(--serif); letter-spacing: 2px; white-space: nowrap; text-shadow: 0 1px 3px #f2ecd6, 0 0 7px #f2ecd6, 0 0 7px #f2ecd6; }
.atlas-pin.visited { color: #345844; }
.atlas-pin.visited .atlas-pin-dot { background: #547761; border-color: #547761; }
.atlas-pin.current { transform: translate(-50%, -25px); color: var(--atlas-red); z-index: 4; }
.atlas-pin.current .atlas-pin-dot { width: 31px; height: 31px; border: 1px solid #9c654a; border-radius: 50%; background: #f4e9cf; box-shadow: 0 0 0 4px #a35b421c, 0 2px 6px #77563a20; }
.atlas-pin-dot > .icon { width: 21px; height: 21px; }
.atlas-pin.current .atlas-pin-name { background: #f1e6cb; border: 1px solid #b8936866; margin-top: 6px; font-size: 19px; }
.atlas-pin > small { font: 9px var(--serif); letter-spacing: 2px; margin-top: 4px; white-space: nowrap; text-shadow: 0 0 4px #f1e6cb; }
.atlas-pin:hover .atlas-pin-name { background: #f5ecd4; color: var(--atlas-red); box-shadow: 0 1px 0 #aa856b77; }
.sheet-map :is(button, .atlas-viewport):focus-visible { outline: 2px solid #9f6445; outline-offset: 3px; }
.atlas-map-note { position: absolute; left: 20px; bottom: 14px; font: 9px var(--serif); letter-spacing: 2px; color: #83846a; }
.atlas-map-note > span { padding: 0 8px; }
.atlas-scroll-hint { display: none; }
.atlas-current-port { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid #a6967144; }
.atlas-port-image { width: 126px; height: 78px; object-fit: cover; border: 1px solid #9c9d7566; padding: 3px; filter: saturate(.7); }
.atlas-port-copy { flex: 1; min-width: 0; }
.atlas-port-copy > small { font: 10px var(--serif); letter-spacing: 2px; color: #888366; }
.atlas-port-copy h3 { font-size: 27px; letter-spacing: 3px; margin: 6px 0 7px; line-height: 1.2; }
.atlas-port-copy h3 > span { font-size: 13px; letter-spacing: 2px; color: #777d60; margin-left: 15px; padding-left: 15px; border-left: 1px solid #a6967166; vertical-align: middle; }
.atlas-port-copy p { font: 11px var(--serif); letter-spacing: 2px; color: #84836a; }
.atlas-progress { text-align: right; padding-left: 20px; border-left: 1px solid #a6967144; }
.atlas-progress > span { font: 10px var(--serif); color: #7d8067; letter-spacing: 1px; }
.atlas-progress strong { font: 33px var(--serif); margin-left: 9px; color: #47614b; }
.atlas-progress small { font-size: 12px; }
.atlas-progress p { font: 11px var(--serif); letter-spacing: 2px; margin-top: 8px; color: #7b7e60; }
.atlas-itinerary { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 17px 0 10px; }
.atlas-index { position: relative; display: flex; align-items: center; flex-direction: column; gap: 6px; padding: 4px 0 12px; border: 0; background: transparent; color: #878974; }
.atlas-index::after { content: ''; position: absolute; bottom: 6px; height: 1px; left: 50%; width: 100%; background: #a2a58655; }
.atlas-index:last-child::after { display: none; }
.atlas-index > small { font: 9px var(--serif); letter-spacing: 1px; opacity: .8; }
.atlas-index > span { font: 13px var(--serif); letter-spacing: 2px; padding: 3px 4px; }
.atlas-index > i { position: absolute; bottom: 3px; z-index: 1; width: 7px; height: 7px; border: 1px solid #a0a385; border-radius: 50%; background: #eee5cc; }
.atlas-index.visited { color: #4c6b50; }
.atlas-index.visited::after, .atlas-index.visited > i { background: #6e8b68; }
.atlas-index.current { color: var(--atlas-red); }
.atlas-index.current > span { background: #a35b4210; outline: 1px solid #a35b4244; }
.atlas-index.current > i { background: var(--atlas-red); border-color: var(--atlas-red); border-radius: 0; transform: rotate(45deg); }
.atlas-index:hover > span { background: #dedbc0; color: #385945; }
.atlas-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; font: 9px var(--serif); letter-spacing: 1px; color: #89846d; line-height: 1.7; }
.atlas-footer i { font-style: normal; padding: 0 7px; }
@media (max-width: 800px) {
  dialog.sheet-map { width: calc(100% - 28px); max-height: calc(100dvh - 40px); }
  .sheet-map .panel-header { padding: 18px 20px; }
  .sheet-map .panel-body { padding: 0 18px 16px; }
  .atlas-scroll-hint { display: block; text-align: right; margin-top: 7px; font: 9px var(--serif); letter-spacing: 1px; color: #85846e; }
  .atlas-current-port { gap: 14px; padding: 16px 0; }
  .atlas-port-image { width: 100px; height: 74px; }
  .atlas-port-copy h3 > span { margin-left: 8px; padding-left: 8px; }
}
@media (max-width: 560px) {
  dialog.sheet-map { max-height: calc(100dvh - 32px); }
  .sheet-map .panel-header { padding: 16px 18px; }
  .sheet-map .panel-heading { gap: 12px; }
  .sheet-map .panel-heading > .icon { width: 28px; height: 28px; }
  .sheet-map .panel-heading h2 { font-size: 26px; letter-spacing: 4px; }
  .sheet-map .panel-heading small { font-size: 9px; letter-spacing: 1px; }
  .sheet-map .panel-body { padding: 0 14px 14px; }
  .atlas-topline { font-size: 10px; letter-spacing: 1px; padding-block: 13px; }
  .atlas-topline > span > i { margin: 0 3px; }
  .atlas-legend { gap: 9px; font-size: 9px; letter-spacing: 0; }
  .atlas-current-port { gap: 11px; flex-wrap: wrap; }
  .atlas-port-image { width: 76px; height: 66px; }
  .atlas-port-copy h3 { font-size: 23px; letter-spacing: 2px; }
  .atlas-port-copy h3 > span { font-size: 11px; letter-spacing: 1px; }
  .atlas-port-copy > small, .atlas-port-copy p { font-size: 9px; letter-spacing: 1px; }
  .atlas-progress { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 0; border: 0; }
  .atlas-progress strong { font-size: 23px; }
  .atlas-progress p { margin: 0; }
  .atlas-itinerary { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 10px; padding-top: 12px; }
  .atlas-index:nth-child(6)::after { display: none; }
  .atlas-index > span { font-size: 12px; }
  .atlas-footer { flex-direction: column; gap: 3px; font-size: 9px; padding-top: 8px; }
}
@media (max-height: 600px) and (min-width: 561px) {
  dialog.sheet-map { max-height: calc(100dvh - 28px); }
}

/* The two north–south bends need their current-port caption above the river. */
.atlas-pin.current:is([data-map-port="1"], [data-map-port="7"]) { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 21px)); }
.atlas-pin.current:is([data-map-port="1"], [data-map-port="7"]) .atlas-pin-name { margin: 5px 0; }