/* Tokyo Time (sanborn.jp/time/). Colours come from the season class on <body>
   (s-sakura, s-natsu, s-momiji, s-fuyu); app.js picks it from the Tokyo date.
   Sizes scale with --u, about 1% of the screen, so a 13" iPad and a phone both fit. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  --u: min(1vw, 1.35vh);
  --ko: #ed6d3d;
  --ko-glow: transparent;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s;
}

/* ---------- Seasons ---------- */

body.s-momiji {
  --bg: #1c1417; --ink: #f6e9de; --muted: #c6ada2; --line: #46323a; --btn: #2b1d22; --sel-bg: #f6e9de; --sel-ink: #1c1417;
  --hero-bg: linear-gradient(160deg, #8a2414 0%, #4a1a14 55%, #241619 100%); --hero-ink: #fff3e6; --hero-muted: #f0c8ab;
  --chip: rgba(255, 243, 230, .12); --chip-line: rgba(255, 243, 230, .28); --motif: #ff8a4c; --hero-sun: #f5b54a;
  --day-bg: #fbf1e4; --day-ink: #2a1712; --day-muted: #6e5045; --day-line: #ecd6bf;
  --night-bg: #2b1d22; --night-ink: #f6e9de; --night-muted: #c6ada2; --night-line: #46323a;
  --acc-day: #b8321a; --acc-night: #ff9a6b; --seg-day: #e9a23b; --seg-nd: #e2cfc0; --seg-nn: #4a353d;
  --sun: #b5600c; --cloud: #6b5a62; --rain: #2f5f9e; --moon: #8a6d14; --thunder: #6a4fa0;
  --sun-n: #f5b54a; --cloud-n: #c6b6bd; --rain-n: #9cc0f0; --moon-n: #f1c76a; --thunder-n: #c9b6f0;
  --cell-day: #f0b45c; --cell-day-ink: #2a1712; --cell-night: #4a323a; --cell-night-ink: #e9d6cc; --now: #ff9a6b;
}
body.s-fuyu {
  --bg: #0c1526; --ink: #e8eef8; --muted: #a9b9d4; --line: #22345a; --btn: #142240; --sel-bg: #e8eef8; --sel-ink: #0c1526;
  --hero-bg: linear-gradient(160deg, #2a4f8f 0%, #172d58 55%, #0e1930 100%); --hero-ink: #f2f6fc; --hero-muted: #c3d3ec;
  --chip: rgba(242, 246, 252, .12); --chip-line: rgba(242, 246, 252, .3); --motif: #cfe3ff; --hero-sun: #ffd27a;
  --day-bg: #eef3fa; --day-ink: #0f1d33; --day-muted: #4a5b74; --day-line: #d5e0ee;
  --night-bg: #142240; --night-ink: #e8eef8; --night-muted: #a9b9d4; --night-line: #22345a;
  --acc-day: #1f5fae; --acc-night: #9fd0ff; --seg-day: #f3c96b; --seg-nd: #cfd9e8; --seg-nn: #2a3d63;
  --sun: #a8650f; --cloud: #55657d; --rain: #1f5fae; --moon: #8a6d14; --thunder: #5a46a0;
  --sun-n: #ffd27a; --cloud-n: #b7c4da; --rain-n: #9fd0ff; --moon-n: #f3d98a; --thunder-n: #c9b6f0;
  --cell-day: #f3d27f; --cell-day-ink: #0f1d33; --cell-night: #2a3d63; --cell-night-ink: #dfe8f6; --now: #9fd0ff;
}
body.s-sakura {
  --bg: #fdf0f3; --ink: #2b1020; --muted: #75536a; --line: #f0d0db; --btn: #ffffff; --sel-bg: #2b1020; --sel-ink: #fdf0f3;
  --hero-bg: linear-gradient(160deg, #f9cfdc 0%, #f2a6bf 50%, #b98ac0 100%); --hero-ink: #2b1020; --hero-muted: #5a2a45;
  --chip: rgba(255, 255, 255, .45); --chip-line: rgba(43, 16, 32, .18); --motif: #ffffff; --hero-sun: #8a4508;
  --day-bg: #ffffff; --day-ink: #2b1020; --day-muted: #75536a; --day-line: #f2d5de;
  --night-bg: #3a2346; --night-ink: #f8eaf2; --night-muted: #cdb3cb; --night-line: #533660;
  --acc-day: #b0285a; --acc-night: #ffb3cf; --seg-day: #f2b84b; --seg-nd: #ecd9e2; --seg-nn: #5a3e68;
  --sun: #9a4f0a; --cloud: #6d5a70; --rain: #3a5fa8; --moon: #8a6d14; --thunder: #5a3fa0;
  --sun-n: #f3c35a; --cloud-n: #cdb8cf; --rain-n: #a9c8f5; --moon-n: #f3d27a; --thunder-n: #d4c2f2;
  --cell-day: #f6c35e; --cell-day-ink: #2b1020; --cell-night: #5a3e68; --cell-night-ink: #f8eaf2; --now: #b0285a;
}
body.s-natsu {
  --bg: #08282b; --ink: #eaf6f3; --muted: #a2c9c2; --line: #1d5054; --btn: #0f3a3e; --sel-bg: #eaf6f3; --sel-ink: #08282b;
  --hero-bg: linear-gradient(160deg, #136168 0%, #0c4448 50%, #0a2e31 100%); --hero-ink: #f4fbf8; --hero-muted: #b9e0d9;
  --chip: rgba(244, 251, 248, .12); --chip-line: rgba(244, 251, 248, .3); --motif: #ffb070; --hero-sun: #ffc35c;
  --day-bg: #fff7e8; --day-ink: #13292a; --day-muted: #5b6b66; --day-line: #f0e2c4;
  --night-bg: #0f3a3e; --night-ink: #eaf6f3; --night-muted: #a2c9c2; --night-line: #1d5054;
  --acc-day: #b8481a; --acc-night: #ffb070; --seg-day: #ffb347; --seg-nd: #e6dcc8; --seg-nn: #23585c;
  --sun: #a85f0a; --cloud: #5b6b66; --rain: #21648f; --moon: #8a6d14; --thunder: #5a46a0;
  --sun-n: #ffc35c; --cloud-n: #a9c9c3; --rain-n: #9fd6f0; --moon-n: #f3d27a; --thunder-n: #c9b6f0;
  --cell-day: #ffc066; --cell-day-ink: #13292a; --cell-night: #1d5054; --cell-night-ink: #dff1ec; --now: #ffb070;
}

/* Wall view between 23:00 and 06:00 Tokyo time: low, warm, nothing bright. */
body.dim {
  --bg: #0d0c0b; --ink: #8a8174; --muted: #8a8174; --line: #24211e; --btn: #151311;
  --hero-bg: transparent; --hero-ink: #6e665b; --hero-muted: #8a8174; --chip: transparent; --chip-line: #24211e; --hero-sun: #8a7a4e;
  --day-bg: transparent; --day-ink: #8a8174; --day-muted: #8a8174; --day-line: #24211e;
  --night-bg: transparent; --night-ink: #8a8174; --night-muted: #8a8174; --night-line: #24211e;
  --acc-day: #8a8174; --acc-night: #8a8174;
  --sun: #8a7a4e; --sun-n: #8a7a4e; --moon: #8a7a4e; --moon-n: #8a7a4e; --cloud: #7a7369; --cloud-n: #7a7369;
  --rain: #6b7a8c; --rain-n: #6b7a8c; --thunder: #7a7369; --thunder-n: #7a7369;
}
body.dim .motif { display: none; }

/* Day and night colours for each card or band. */
.card, .band {
  --c-bg: var(--day-bg); --c-ink: var(--day-ink); --c-muted: var(--day-muted); --c-line: var(--day-line);
  --c-acc: var(--acc-day); --c-segn: var(--seg-nd);
  --i-sun: var(--sun); --i-cloud: var(--cloud); --i-rain: var(--rain); --i-moon: var(--moon); --i-thunder: var(--thunder);
}
.card.night, .band.night {
  --c-bg: var(--night-bg); --c-ink: var(--night-ink); --c-muted: var(--night-muted); --c-line: var(--night-line);
  --c-acc: var(--acc-night); --c-segn: var(--seg-nn);
  --i-sun: var(--sun-n); --i-cloud: var(--cloud-n); --i-rain: var(--rain-n); --i-moon: var(--moon-n); --i-thunder: var(--thunder-n);
}
.hero, .band.home {
  --i-sun: var(--hero-sun); --i-moon: var(--hero-sun); --i-cloud: var(--hero-ink); --i-rain: var(--hero-ink); --i-thunder: var(--hero-ink);
}

/* ---------- Icons ---------- */

.ic { display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic .t { fill: currentColor; fill-opacity: .2; }
.wi { display: inline-flex; }
.k-sun, .k-partlyDay, .k-hot { color: var(--i-sun); }
.k-moon, .k-partlyNight { color: var(--i-moon); }
.k-overcast, .k-fog, .k-partlyDay .cloud, .k-partlyNight .cloud { color: var(--i-cloud); }
.k-drizzle, .k-rain, .k-snow { color: var(--i-rain); }
.k-thunder { color: var(--i-thunder); }

/* ---------- Layout ---------- */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(12px, calc(var(--u) * 1.6)) max(16px, calc(var(--u) * 2.2));
  padding-left: max(16px, calc(var(--u) * 2.2), env(safe-area-inset-left));
  padding-right: max(16px, calc(var(--u) * 2.2), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: max(10px, calc(var(--u) * 1.4));
  transition: transform 2s ease;
}
main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: max(10px, calc(var(--u) * 1.4)); }

/* Top bar */
.bar { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 46px; transition: opacity .4s; }
.bar-left { margin: 0; display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.home-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.stamp { color: var(--muted); }
.bar-right { display: flex; gap: 8px; align-items: center; }
.seg { display: flex; padding: 3px; border-radius: 999px; background: var(--btn); border: 1px solid var(--line); }
.seg button {
  min-height: 40px; min-width: 84px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-ink); }
.gear {
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--btn); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--now); outline-offset: 2px; }

.settings {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 300px; max-width: calc(100vw - 32px);
  background: var(--btn); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  display: grid; gap: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}
.settings[hidden] { display: none; }
.settings fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.settings legend { width: 100%; padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.settings button {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-family: inherit; font-size: 15px; cursor: pointer;
}
.settings button[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-ink); border-color: var(--sel-bg); }

/* Tokyo hero */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg); color: var(--hero-ink);
  border-radius: max(18px, calc(var(--u) * 2.4));
  padding: max(14px, calc(var(--u) * 2)) 24px max(16px, calc(var(--u) * 2.2));
  display: flex; flex-direction: column; align-items: center; gap: max(6px, calc(var(--u) * .8)); text-align: center;
}
.hero > :not(.motif):not(.hero-glow) { position: relative; }
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 115%, var(--ko-glow, transparent), transparent 55%); }
.motif { position: absolute; right: -4%; top: -30%; width: max(220px, calc(var(--u) * 34)); color: var(--motif); opacity: .3; pointer-events: none; }
.motif svg { width: 100%; height: auto; stroke-width: 1; }
.hero-place { margin: 0; font-size: max(12px, calc(var(--u) * 1.1)); letter-spacing: .24em; font-weight: 600; color: var(--hero-muted); text-transform: uppercase; }
.hero-time { font-size: max(72px, calc(var(--u) * 15)); font-weight: 250; line-height: .9; letter-spacing: -.035em; }
.ampm { font-size: .3em; font-weight: 400; letter-spacing: 0; margin-left: .15em; color: var(--hero-muted); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.chip {
  display: inline-flex; gap: .45em; align-items: center;
  background: var(--chip); border: 1px solid var(--chip-line); border-radius: 999px;
  padding: .35em .9em; font-size: max(15px, calc(var(--u) * 1.5));
}
.chip.strong { font-weight: 600; }
.chip[hidden] { display: none; }
.chip strong { font-weight: 650; }
.chip .alt { color: var(--hero-muted); }
.chip .ic { width: 1.5em; height: 1.5em; }
.hero-note { margin: 0; font-size: max(15px, calc(var(--u) * 1.5)); font-weight: 600; }
.hero-note[hidden] { display: none; }
.hero.yuyake {
  --hero-bg: linear-gradient(160deg, #f2b27c 0%, #d9787a 55%, #5e4c7c 100%);
  --hero-ink: #1f1422; --hero-muted: #3b2433; --chip: rgba(255, 245, 236, .55); --chip-line: rgba(31, 20, 34, .2); --hero-sun: #7a3d06;
}

/* City cards */
.cards {
  flex: 1; display: grid; gap: max(10px, calc(var(--u) * 1.2));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.card {
  background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: max(14px, calc(var(--u) * 1.8));
  padding: max(12px, calc(var(--u) * 1.6)) max(14px, calc(var(--u) * 1.8));
  display: flex; flex-direction: column; justify-content: space-between; gap: max(6px, calc(var(--u) * .7)); min-width: 0;
  transition: background-color .6s, color .6s;
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.city { margin: 0; font-size: max(20px, calc(var(--u) * 2.2)); font-weight: 650; line-height: 1.1; letter-spacing: -.01em; }
.card-top .wi { flex: none; }
.card-top .ic { width: max(28px, calc(var(--u) * 3)); height: auto; }
.ctime { margin: 0; font-size: max(44px, calc(var(--u) * 6.6)); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.card .ampm { color: var(--c-muted); }
.zone { margin: 0; font-size: max(14px, calc(var(--u) * 1.3)); color: var(--c-muted); }
.zone.dst-soon { text-decoration: underline dotted var(--c-acc); text-underline-offset: 4px; }
/* Daylight strip: 24 hours from midnight, gold = daylight there, notch = their time now. */
.strip-wrap { position: relative; padding-top: calc(max(16px, calc(var(--u) * 1.6)) + 6px); }
.strip-icon { position: absolute; top: 0; transform: translateX(-50%); display: flex; }
.strip-icon .ic { width: max(16px, calc(var(--u) * 1.6)); height: auto; }
.strip { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; }
.strip .seg { height: max(7px, calc(var(--u) * .7)); border-radius: 2px; background: var(--c-segn); }
.strip .seg.d { background: var(--seg-day); }
.strip-now { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--c-ink); box-shadow: 0 0 0 2px var(--c-bg); }
.strip-hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; font-size: max(11px, calc(var(--u) * 1)); color: var(--c-muted); }
.card-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: max(13px, calc(var(--u) * 1.15)); font-weight: 650; white-space: nowrap; color: var(--c-muted);
  padding: .2em .7em; border-radius: 999px; border: 1.5px solid var(--c-line);
}
.pill.other-day { color: var(--c-acc); border-color: var(--c-acc); }
.temp { font-size: max(16px, calc(var(--u) * 1.7)); white-space: nowrap; }
.temp strong { font-weight: 650; }
.temp .alt { color: var(--c-muted); font-size: .8em; }
.nowx .temp { display: inline-block; width: 5em; height: 1em; border-radius: 6px; background: var(--c-line); }
.call { margin: 0; display: flex; align-items: center; gap: 6px; font-size: max(14px, calc(var(--u) * 1.2)); color: var(--c-muted); }
.call .ic { width: 1.1em; height: 1.1em; }
.dst { margin: 0; font-size: max(13px, calc(var(--u) * 1.1)); color: var(--c-acc); }
.dst[hidden] { display: none; }
.wx-stale .temp, .wx-stale .btemp, .wx-stale #homeWx { opacity: .55; }

/* Day bands */
.bands { display: none; flex: 1; min-height: 0; flex-direction: column; gap: max(6px, calc(var(--u) * .6)); }
.view-bands .bands { display: flex; }
.view-bands .hero, .view-bands .cards { display: none; }
.band {
  flex: 1 1 0; min-height: 64px; display: flex; align-items: stretch; gap: 14px;
  background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 14px; padding: 8px 12px;
}
.band.home { flex-grow: 1.6; background: var(--hero-bg); color: var(--hero-ink); border-color: transparent; --c-ink: var(--hero-ink); --c-muted: var(--hero-muted); }
.band-label { flex: 0 0 max(230px, calc(var(--u) * 24)); display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.bl p { margin: 0; }
.bl1 { font-size: max(16px, calc(var(--u) * 1.8)); font-weight: 650; white-space: nowrap; }
.bsub { font-size: max(12px, calc(var(--u) * 1.1)); font-weight: 500; letter-spacing: 0; color: var(--c-muted); }
.bl2 { font-size: max(26px, calc(var(--u) * 3.6)); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
.band.home .bcity { font-size: max(12px, calc(var(--u) * 1.2)); letter-spacing: .2em; text-transform: uppercase; }
.band.home .bl2 { font-size: max(40px, calc(var(--u) * 6)); }
.brel { font-size: max(13px, calc(var(--u) * 1.2)); font-weight: 650; letter-spacing: 0; color: var(--c-acc); }
.bwx { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 650; font-size: max(15px, calc(var(--u) * 1.5)); }
.bwx .ic { width: max(24px, calc(var(--u) * 2.8)); height: auto; }
.track { flex: 1; min-width: 0; position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; }
.cell {
  background: var(--cell-night); color: var(--cell-night-ink);
  font-size: max(11px, calc(var(--u) * 1.05)); font-weight: 500; padding: 4px 0 0 3px; overflow: hidden; white-space: nowrap;
}
.cell.d { background: var(--cell-day); color: var(--cell-day-ink); }
.cell.mid { border-left: 2px dashed var(--c-ink); }
.now { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--now); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.legend { order: 99; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .ld { background: var(--cell-day); }
.legend .ln { background: var(--cell-night); outline: 1px solid var(--line); }
.legend .lnow { width: 3px; background: var(--now); }

/* Footer */
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); transition: opacity .4s; }
.foot a { color: var(--muted); }

/* ---------- Microseason (七十二候) in the hero ---------- */

.ko {
  width: 100%; max-width: 1180px; margin-top: max(4px, calc(var(--u) * .6));
  display: flex; align-items: center; gap: max(12px, calc(var(--u) * 1.6));
  padding: max(10px, calc(var(--u) * 1.2)) 6px;
  background: transparent; border: 0; border-top: 1px solid var(--chip-line); color: var(--hero-ink);
  font-family: inherit; text-align: left; cursor: pointer;
}
.ko[hidden] { display: none; }
.ko-swatch { flex: none; width: max(16px, calc(var(--u) * 1.8)); height: max(16px, calc(var(--u) * 1.8)); border-radius: 999px; background: var(--ko); box-shadow: 0 0 0 2px var(--hero-muted); }
.ko-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ko-en { font-size: max(18px, calc(var(--u) * 2.4)); font-weight: 600; }
.ko-sub { font-size: max(13px, calc(var(--u) * 1.3)); color: var(--hero-muted); }
.ko-sub i, .ko-new-sub i { font-style: italic; }
.ko-side { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ko-dots { display: flex; gap: 6px; }
.ko-dots i { width: 10px; height: 10px; border-radius: 999px; border: 1.5px solid var(--hero-muted); }
.ko-dots i.past { background: var(--hero-ink); border-color: var(--hero-ink); }
.ko-dots i.today { background: var(--ko); border-color: var(--hero-ink); box-shadow: 0 0 0 1px var(--hero-ink); }
.ko-next { font-size: max(13px, calc(var(--u) * 1.25)); color: var(--hero-muted); }
.ko-season { width: 100%; max-width: 1180px; margin: 0; padding: 0 6px; text-align: left; font-size: max(14px, calc(var(--u) * 1.4)); color: var(--hero-muted); }
.ko-season[hidden] { display: none; }
.ko-season .lbl { font-size: .72em; letter-spacing: .18em; font-weight: 700; margin-right: .6em; color: var(--hero-ink); }
.ko-season a { color: var(--hero-ink); text-decoration: underline dotted; text-underline-offset: 4px; }
.ko-season .kou { float: right; text-decoration: none; }
.hero-obi { align-self: stretch; height: 6px; margin: 2px -24px calc(-1 * max(16px, calc(var(--u) * 2.2))); background: var(--ko); }

.ko-new {
  width: 100%; max-width: 640px; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;
  border-radius: 16px; background: var(--chip); border: 1px solid var(--chip-line); padding: 14px 18px;
}
.ko-new[hidden] { display: none; }
.ko-new-label { font-size: 12px; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; color: var(--hero-muted); }
.ko-new-en { font-size: max(20px, calc(var(--u) * 2.6)); font-weight: 600; }
.ko-new-sub { font-size: 14px; color: var(--hero-muted); }

/* Almanac sheet */
.almanac {
  width: min(1000px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 28px; overflow: auto;
  background: var(--day-bg); color: var(--day-ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.almanac::backdrop { background: rgba(10, 6, 8, .62); }
.alm-obi { height: 8px; background: var(--ko); }
.alm-close {
  position: absolute; top: 22px; right: 22px; width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid var(--day-line); background: var(--day-bg); color: var(--day-ink); display: grid; place-items: center; cursor: pointer;
}
.alm-head { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; padding: 30px 84px 0 40px; }
.alm-kanji { font-size: clamp(48px, 7vw, 72px); line-height: 1; font-weight: 500; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.alm-head h2 { margin: 0 0 6px; font-size: clamp(24px, 3vw, 34px); font-weight: 650; letter-spacing: -.01em; }
.alm-meta { margin: 0 0 3px; font-size: 16px; color: var(--day-muted); }
.alm-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding: 24px 40px 32px; }
.alm-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.alm-colour { display: flex; gap: 18px; align-items: center; }
.alm-swatch { flex: none; width: 92px; height: 92px; border-radius: 18px; background: var(--ko); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.alm-label { margin: 0 0 4px; font-size: 12px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: var(--day-muted); }
.alm-colour-name { margin: 0 0 4px; font-size: 21px; font-weight: 600; }
.alm-mood { margin: 0; font-size: 16px; font-style: italic; color: var(--day-muted); }
.alm-groups { border-top: 1px solid var(--day-line); padding-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.alm-groups h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; color: var(--acc-day); }
.alm-groups p { margin: 0 0 5px; font-size: 17px; display: flex; gap: 10px; align-items: baseline; }
.alm-groups .ja { min-width: 3.4em; font-size: 15px; color: var(--day-muted); }
.alm-groups .en { color: var(--day-muted); }
.alm-groups a { color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; }
.alm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-solid, .btn-line {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; border-radius: 999px;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.btn-solid { background: var(--day-ink); color: var(--day-bg); }
.btn-line { border: 1.5px solid var(--day-ink); color: var(--day-ink); }
.btn-line[hidden] { display: none; }
.alm-note, .alm-hint { margin: 0; font-size: 13px; color: var(--day-muted); }
.alm-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.alm-ring svg { display: block; width: 300px; max-width: 100%; height: auto; }
.alm-ring path { cursor: pointer; }
.alm-ring path:focus-visible { outline: none; stroke: var(--day-ink); stroke-width: 2; }
.alm-next { width: 100%; border: 1px solid var(--day-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.alm-next b { font-size: 18px; font-weight: 600; }
.alm-next span { font-size: 14px; color: var(--day-muted); }
.alm-next button { align-self: flex-start; margin-top: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--day-line); background: transparent; color: var(--day-ink); font: inherit; font-size: 14px; cursor: pointer; }
@media (max-width: 760px) {
  .alm-body { grid-template-columns: 1fr; padding: 20px; }
  .alm-head { padding: 24px 76px 0 20px; }
  .alm-groups { grid-template-columns: 1fr; }
}

/* ---------- Wall view ---------- */

.view-wall .bar, .view-wall .foot { opacity: 0; pointer-events: none; }
.view-wall.awake .bar, .view-wall.awake .foot { opacity: 1; pointer-events: auto; }
.view-wall .hero { flex: 1; justify-content: center; }
.view-wall .hero-time { font-size: max(96px, calc(var(--u) * 24)); }
.view-wall .cards { flex: none; }
.view-wall .strip-wrap, .view-wall .call, .view-wall .dst, .view-wall .pill { display: none; }
.view-wall .ko-sub, .view-wall .ko-side, .view-wall .ko-season, .view-wall .ko-new { display: none; }
.view-wall .ko { justify-content: center; border-top: 0; }
body.dim .ko-swatch { display: none; }
body.dim .ko { justify-content: center; }
body.dim .ko-en { font-weight: 400; font-size: max(16px, calc(var(--u) * 1.8)); }
body.dim .hero-obi { height: 2px; opacity: .35; }
body.dim .hero-glow { display: none; }
.view-wall .ctime { font-size: max(36px, calc(var(--u) * 5)); }

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  .stamp { display: none; }
  .seg button { min-width: 64px; }
  .ko { flex-wrap: wrap; }
  .ko-side { margin-left: 0; align-items: flex-start; }
  .ko-season { display: none; }
  .band { flex-wrap: wrap; }
  .band-label { flex-basis: 100%; }
  .track { min-height: 44px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .ic .rays { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }
  .ic .cloud { animation: drift 9s ease-in-out infinite alternate; }
  .ic .drops, .ic .flakes { animation: fall 2.8s ease-in-out infinite; }
  .motif svg { transform-origin: 50% 90%; animation: sway 14s ease-in-out infinite alternate; }
  .card.flip { animation: flip .8s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .app, body, .card, .bar, .foot { transition: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-1px); } to { transform: translateX(1.5px); } }
@keyframes fall { 0% { transform: translateY(-1px); opacity: .6; } 50% { opacity: 1; } 100% { transform: translateY(1.5px); opacity: .6; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes flip { 0% { transform: perspective(800px) rotateX(0); } 50% { transform: perspective(800px) rotateX(80deg); } 100% { transform: perspective(800px) rotateX(0); } }