/* ========================================================================== #O World map — everywhere the log has been -------------------------------------------------------------------------- Migrated into the deck log on 2026-09-07. Drawn by public/20-worldmap-page.js. A room off the sidebar: the Rooms-off-Home head, and no bottom bar. What it replaces: a page header with a back arrow, two unlabelled icon controls floating over the map, and a grid of trip cards laid over its foot. ========================================================================== */ #worldMapPage { background: var(--log-stock); } #worldMapPage.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; overflow: clip; } /* The head, its title and Back are the room head (.room-bar, css/11-home.css, since 2026-09-16). What is this room's own: the page is a column with its own scroller, so the head must not shrink into it. */ #worldMapPage .wm-bar { flex: none; } /* Fit and Save, the head's actions, in Back's word. */ #worldMapPage .wm-act { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; background: none; border: none; padding: 0; cursor: pointer; color: var(--log-ink); display: inline-flex; align-items: center; min-height: 44px; } /* Two words at the right, which is one more than the Rooms-off-Home head allows — and they are the two halves of one thing: see all of it, keep all of it. Neither changes the record, so both are ink. */ #worldMapPage .wm-acts { justify-self: end; display: flex; align-items: center; gap: var(--sp-md); } /* The tally is a standfirst above the plate, in the written voice — the Two Jobs of Prose Rule: a sentence above the instrument says what the instrument holds. */ #worldMapPage .wm-count { flex: none; margin: 0; padding: var(--sp-sm) var(--sp-lg); font-family: var(--log-write); font-size: var(--fs-small); color: var(--log-ink-soft); border-bottom: 1px solid var(--log-rule-firm); } /* The words that act on the sheet, printed under its own colophon and turned with it. They sit inside the rotated layer because the reader is holding the phone sideways to look at this: a control left upright in the page would be lying on its side to them. They take the sheet's own paper, so the words are as legible on the oilskin as on the stock. */ #worldMapPage .wm-words { display: flex; align-items: center; gap: 0 var(--sp-lg); padding: 0 12px; height: 40px; } #worldMapPage .wm-paper { min-height: 40px; padding: 0; border: none; background: none; font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } #worldMapPage .wm-paper.is-on, #worldMapPage .wm-paper.is-act { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; } /* Save is pushed to the far end: it is not one of the papers, it is what to do with the one you chose. */ #worldMapPage .wm-paper.is-act { margin-left: auto; } #worldMapPage .wm-turned[data-paper="stock"] { background: #D9DFDD; } #worldMapPage .wm-turned[data-paper="stock"] .wm-paper { color: #6E7A77; } #worldMapPage .wm-turned[data-paper="stock"] .wm-paper.is-on, #worldMapPage .wm-turned[data-paper="stock"] .wm-paper.is-act { color: #43276B; } #worldMapPage .wm-turned[data-paper="oilskin"] { background: #16191A; } #worldMapPage .wm-turned[data-paper="oilskin"] .wm-paper { color: #8C9895; } #worldMapPage .wm-turned[data-paper="oilskin"] .wm-paper.is-on, #worldMapPage .wm-turned[data-paper="oilskin"] .wm-paper.is-act { color: #E8EDEB; } /* The atlas paper's words sit on its colophon band, which is the land rather than the sea: the quiet ink is 1.90:1 on that water and cannot be read there. */ #worldMapPage .wm-turned[data-paper="atlas"] { background: #E9E4D6; } #worldMapPage .wm-turned[data-paper="atlas"] .wm-paper { color: #6E7A77; } #worldMapPage .wm-turned[data-paper="atlas"] .wm-paper.is-on, #worldMapPage .wm-turned[data-paper="atlas"] .wm-paper.is-act { color: #43276B; } /* The plate is the page: everything below the tally, edge to edge, closed by the rules around it rather than floated on it. It was cut to four-to-three for an hour on 2026-09-07, to keep the Arctic and Antarctica out of the slack a tall plate leaves when the stops lie in a shallow band of latitude, with a list of journeys underneath. The owner had the first version's view and wanted it back. The polar bands are gone by the other route instead: the chart is held at the zoom that fills the plate, so there is no slack for the poles to occupy. */ #worldMapPage .wm-plate { position: relative; flex: 1; min-height: 0; } /* The world view: the saved sheet, laid down the length of the plate. A quarter turn rather than a shrink. At 430 across, the whole world on Google's map is 256 pixels wide — a thumbnail, not a map — so the page is turned instead of the world reduced, and the reader turns the phone to read it. It is this app's own chart, the same drawing the Save word writes to a file, so the two agree. It does not pan and does not zoom: being the whole thing at once is the one thing the other view cannot do. */ #worldMapPage .wm-world { position: absolute; inset: 0; overflow: hidden; background: var(--log-stock); } /* Placed by its own centre rather than laid out and then turned. A grid centres an item by its box before the transform, and this box is wider than the plate — so the browser put it at the start instead, the turn happened about a point that was no longer the middle, and a hundred and fifteen pixels of the Atlantic went over the right-hand edge. */ #worldMapPage .wm-turned { position: absolute; left: 50%; top: 50%; /* Anticlockwise, so the page is read by turning the phone clockwise — the way a hand goes to it (owner, 2026-09-07). ONLY WHILE THE VIEWPORT IS TALLER THAN IT IS WIDE. The turn was unconditional, which is right for the phone it was designed on — held upright, turned by hand — and wrong for every phone that is not locked to portrait: turning the device reflows the viewport to landscape and the sheet was STILL turned a quarter, so it lay on its side for a reader who had just straightened it. When the viewport is already landscape the sheet is upright and nothing is rotated. */ transform: translate(-50%, -50%); display: block; } /* Anticlockwise, so the page is read by turning the phone clockwise — the way a hand goes to it (owner, 2026-09-07). ONLY WHEN THE DRAWING SAYS SO. This used to be the default, cancelled by `@media (orientation: landscape)` — two decisions in two files, and the file that sizes the sheet was in neither. paintWorldSheet now decides from the plate's own shape and scales the sheet to match, and puts the class on when it has scaled for a turn. The media query asked about the VIEWPORT, which in a 430-wide app is not the same question: every laptop window is landscape while the plate inside it is portrait, so the sheet was straightened on the desk and left at its turned size — 920 across a 430 plate, half the chart over the edge. */ #worldMapPage .wm-turned.is-turned { transform: translate(-50%, -50%) rotate(-90deg); } #worldMapPage .wm-turned svg { display: block; } #worldMapPage .wm-map { position: absolute; inset: 0; background: var(--log-stock); } /* The place under the finger, named at the foot of the plate. The same strip Saved's map raises, so a pin means the same thing in both. */ #worldMapPage .wm-pick { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-sm) var(--sp-lg); background: var(--log-stock); border-top: 1px solid var(--log-rule-firm); } #worldMapPage .wm-pick[hidden] { display: none; } #worldMapPage .wm-pick-name { font-family: var(--log-write); font-size: var(--fs-body); color: var(--log-ink); } #worldMapPage .wm-quiet { margin: 0; padding: var(--sp-2xl) var(--sp-lg); font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.5; color: var(--log-ink); } #worldMapPage .wm-quiet.is-reading { animation: wall-breathe 1.8s ease-in-out infinite; } /* The room's line, then Boswell at work or how a mark gets here (2026-09-17). */ #worldMapPage .wm-quiet span, #worldMapPage .wm-count.is-empty span { display: block; margin-top: var(--sp-2xs); font-size: var(--fs-small); color: var(--log-ink-soft); } #worldMapPage .wm-count.is-empty { color: var(--log-ink); } #worldMapPage :focus-visible { outline: 2px solid var(--log-ink); outline-offset: 2px; }