/* ══════════════════════════════════════════════════════════════ MOVED OUT OF css/09-modal.css · 2026-09-21 (prepended) 1 rules. DESIGN.md: a surface's rules go in that surface's part, and the legacy parts only shrink. ⚠️ 09-modal.css loaded BEFORE this file. Placing them at the head keeps their order against THIS PART’S OWN rules — and nothing else. Against the parts BETWEEN #43 and #8 the order is reversed by this move, and whether that matters was a separate question somebody had to answer. See DESIGN.md. ══════════════════════════════════════════════════════════════ */ /* The weather's rules were here: a tinted block for each stop, alternating, grey type on cream, the mark in the old primary, the chance of rain in the accent, a subtitle and a source line on their own grounds. REMOVED on 2026-09-14, not overridden: the page is in the deck log (css/17zb-weather.css). The spinner below stays, on the owner's word, until every waiting state is done in one round. */ .wx-spinner { width: 26px; height: 26px; margin: 2rem auto; border-radius: 50%; /* gate:allow rotate — 旋转动画元素，方形旋转会露角，是视觉故障不是风格选择 */ /* Was --border and --primary, the outgoing grey and brown. The ring is the hairline and the travelling arc is the ink: one mark, two pressures, which is what this world does everywhere instead of a second hue. */ border: 3px solid var(--log-rule); border-top-color: var(--log-ink); animation: wxspin 0.8s linear infinite; } /* ── carried by hand from css/09-modal.css, 2026-09-22. The mover does not move at-rules, and a keyframe left behind in a file that is about to be deleted is an animation that will name nothing. ── */ @keyframes wxspin { to { transform: rotate(360deg); } } /* ========================================================================== #AM The weather, in the deck log ========================================================================== Migrated 2026-09-14 (owner: 迁移weather). A page on the stack, pushed by openWeather with `log-page`, so the header's band and ink come from css/17m-journal.css. ⚠️ ITS SIZE AND PLACE ARE NOT THIS FILE'S (owner, 2026-09-14: weather也是一样的). dockPageInDrawer measures the contents drawer's cover and writes the page's top, left and width inline, as it does for the checklist. This room's column is the docked header's 20px. TWO THINGS KEPT ON THE OWNER'S WORD (2026-09-14, asked between two answers): - **The day's mark stays**, drawn in ink: a line glyph per day, the one glyph this world keeps, because a column of fourteen days is scanned by eye before it is read. DESIGN.md recorded that reason when the second home's weather row became a word. - **The spinner stays** until the round that does every waiting state together. Its rules are still in 09-modal.css, untouched. THE COMPOSITION. One ruled column, a band for each stop: WEATHER CLOSE ═════════════════════════════════════════════════ The long way west · 12 Sept – 28 Oct ───────────────────────────────────────────────── FORECAST MARRAKESH (band) ═════════════════════════════════════════════════ SAT 12 ☼ Clear 22°C 13°C ───────────────────────────────────────────────── What went: the alternating tinted blocks standing for stops, the grey type on cream, the × close, and the chance of rain in the outgoing accent. */ .pgstack-page.wx-page, .pgstack-page.wx-page .pgstack-body { background: var(--log-stock); } /* ---- the way out: a word ------------------------------------------------- */ .pgstack-page.wx-page .wx-close { width: auto; height: auto; min-height: 44px; 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; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; color: var(--log-ink); } .pgstack-page.wx-page .wx-close:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--log-ink); } /* ---- which journey, which days --------------------------------------------- */ .pgstack-page.wx-page .wx-subtitle { display: flex; align-items: center; min-height: var(--log-row); box-sizing: border-box; margin: 0; padding: var(--sp-xs) 20px; border-bottom: 1px solid var(--log-rule); background: none; text-align: left; font-family: var(--log-write); font-size: var(--fs-body); letter-spacing: normal; text-transform: none; color: var(--log-ink-soft); } /* ---- a stop ------------------------------------------------------------------ */ /* A band names it: what kind of reading on the left, the place on the right. The stop itself has no ground of its own; the band is what separates one from the next. */ .pgstack-page.wx-page .wx-stop { padding: 0; background: none; } .pgstack-page.wx-page .wx-stop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); min-height: var(--log-row); box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid var(--log-rule-firm); background: var(--log-stock-band); } .pgstack-page.wx-page .wx-stop-mode, .pgstack-page.wx-page .wx-stop-name { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--log-ink); } .pgstack-page.wx-page .wx-stop-name { text-align: right; } .pgstack-page.wx-page .wx-stop-note { margin: 0; padding: var(--sp-sm) 20px; border-bottom: 1px solid var(--log-rule); font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.5; color: var(--log-ink-soft); text-wrap: pretty; } /* ---- a day ------------------------------------------------------------------- */ /* Five columns, the same on every row down the page: the day, its mark, what the sky did, the high and the low. The figures are tabular and end on one edge. */ .pgstack-page.wx-page .wx-days { display: block; } .pgstack-page.wx-page .wx-day { display: grid; grid-template-columns: 48px 22px minmax(0, 1fr) auto 44px; align-items: center; gap: 0 var(--sp-xs); min-height: var(--log-row); box-sizing: border-box; padding: 0 20px; border-bottom: 1px solid var(--log-rule); } .pgstack-page.wx-page .wx-day-date { width: auto; font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink-soft); white-space: nowrap; } /* The mark, in ink (owner, 2026-09-14: 保留图标，改成墨色). */ .pgstack-page.wx-page .wx-day-mark { display: block; width: 22px; height: 22px; color: var(--log-ink); } .pgstack-page.wx-page .wx-day-cond { min-width: 0; font-family: var(--log-write); font-size: var(--fs-body); color: var(--log-ink); } /* The chance of rain is one more figure on the line, not a warning: soft ink, not the outgoing accent. */ .pgstack-page.wx-page .wx-day-pop { font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: lining-nums tabular-nums; color: var(--log-ink-soft); /* The dot and the figure move as one, so a line never ends on the dot. */ white-space: nowrap; } .pgstack-page.wx-page .wx-day-hi, .pgstack-page.wx-page .wx-day-lo { justify-self: end; font-family: var(--log-print); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; } .pgstack-page.wx-page .wx-day-hi { font-size: var(--fs-base); color: var(--log-ink); } .pgstack-page.wx-page .wx-day-lo { width: auto; font-size: var(--fs-small); color: var(--log-ink-soft); } /* ---- where it came from, and what it could not say --------------------------- */ .pgstack-page.wx-page .wx-source { margin: 0; padding: var(--sp-md) 20px var(--sp-xl); border-top: none; background: none; font-family: var(--log-print); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: var(--log-ink-soft); } /* A state said in words, in the reader's own voice. */ .pgstack-page.wx-page .wx-msg { margin: 0; padding: var(--sp-md) 20px; font-family: var(--log-write); font-size: var(--fs-body); line-height: 1.5; color: var(--log-ink); text-wrap: pretty; } .pgstack-page.wx-page .wx-msg.is-inline { border-bottom: 1px solid var(--log-rule); }