/* ---------------------------------------------------------------- fonts (bundled, SIL OFL) */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
  --font: "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --ink: #2a2620; --muted: #6f675b; --line: rgba(60, 50, 35, .16);
  --panel: #f8f4ea; --panel-alpha: 86%;
  --accent: var(--accent-l, #8c3b2b); /* --accent-l / --accent-d are set from the print's palette */
  --on-accent: #fff;                  /* text on an accent-coloured button */
  --ui-scale: 1;                      /* size of the panel, buttons and dialogs */
  --u: calc(1px * var(--ui-scale));
  --box-pad: calc(12 * var(--u)); /* inner edge spacing of the weather box and dialogs: title, text and close x */
  --mat: #f1ece0;
  --washi: #ebe3cf;
  --plain: #e9e2d3;
  --shadow: 0 2px 14px rgba(30, 20, 10, .22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ece5d6; --muted: #a59b8a; --line: rgba(236, 229, 214, .14);
    --panel: #23201b; --panel-alpha: 84%;
    --mat: #d9d2c3; --washi: #cfc6b1; --plain: #3a352d;
    --accent: var(--accent-d, #e0a48f); --on-accent: #1c1a17;
    --shadow: 0 2px 18px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
/* touch screens (phones, tablets): everything in the panel, buttons and dialogs one fifth larger */
@media (pointer: coarse) { :root { --ui-scale: 1.2; } }
/* iPhone/iPad: follow the Dynamic Type text size from the Settings app. Safari's -apple-system-body sets the root
   font size to the user's body text size (17 px at the default setting); --u grows or shrinks with it.
   Capped at 26 px so the largest accessibility sizes don't make the panel cover the whole print. */
@supports (font: -apple-system-body) {
  @media (pointer: coarse) {
    html { font: -apple-system-body; }
    :root { --u: calc(min(1rem, 26px) / 17 * var(--ui-scale)); }
  }
}
:root[data-theme="dark"] {
  --ink: #ece5d6; --muted: #a59b8a; --line: rgba(236, 229, 214, .14);
  --panel: #23201b; --panel-alpha: 84%;
  --mat: #d9d2c3; --washi: #cfc6b1; --plain: #3a352d;
  --accent: var(--accent-d, #e0a48f); --on-accent: #1c1a17;
  --shadow: 0 2px 18px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* no automatic text inflation on iPhone */
body { font-family: var(--font); color: var(--ink); background: var(--mat); font-size: 15px; line-height: 1.4;
  overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
a { color: var(--accent); }

/* ---------------------------------------------------------------- stage and surrounds */
#stage { position: fixed; inset: 0; overflow: hidden; transition: background-color .6s; }
.surround-washi {
  /* Japanese paper: neutral fibre and grain textures laid over the print colour.
     Light fibres are screened (lighten), dark fibres and grain are multiplied (darken), so the paper takes on
     the print's colour without any colour shift from the texture itself. */
  background-color: var(--plain);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.01 0.18' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -0.47'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.22' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0 0.25 0 0 0 0.9 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-blend-mode: screen, multiply, multiply;
}

#printbox { position: absolute; margin: 0; transition: left var(--layout-ms, 400ms), top var(--layout-ms, 400ms), width var(--layout-ms, 400ms), height var(--layout-ms, 400ms); }
.frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: rgba(0, 0, 0, .06); box-shadow: var(--shadow); }
.frame img { position: absolute; display: block; max-width: none; opacity: 0; transition: opacity var(--fade-ms, 800ms); }
.frame img.loaded { opacity: 1; }
.size-fit .frame { box-shadow: none; } /* the print runs to the window edge: no shadow needed */

/* ---------------------------------------------------------------- panel (compact) */
#panel {
  position: absolute; display: flex; flex-direction: column; min-height: 0;
  background: color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--line); border-radius: calc(8 * var(--u)); box-shadow: var(--shadow);
  transition: left var(--layout-ms, 400ms), top var(--layout-ms, 400ms), width var(--layout-ms, 400ms), height var(--layout-ms, 400ms);
  transform-origin: 0 0;
}
#panel.hidden { visibility: hidden; pointer-events: none; }
#panel, dialog { font-size: calc(15 * var(--u)); }
.p-head { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: var(--box-pad) var(--box-pad) calc(6 * var(--u)); }
.place { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  font-weight: 600; font-size: calc(14.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place:hover { color: var(--accent); }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 50%; width: calc(22 * var(--u)); height: calc(22 * var(--u)); cursor: pointer; line-height: 1; padding: 0; font-size: calc(13 * var(--u)); }
.p-body { overflow-y: auto; padding: 0 var(--box-pad) var(--box-pad); display: flex; flex-direction: column; gap: calc(7 * var(--u)); min-height: 0; }

.ico { width: 1em; height: 1em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 1.15;
  stroke-linecap: round; stroke-linejoin: round; }
.ico .f { fill: currentColor; stroke: none; }
.ico .bg { fill: var(--panel); }
.now-main { display: flex; align-items: baseline; gap: calc(8 * var(--u)); flex-wrap: wrap; }
.temp { font-size: calc(32 * var(--u)); line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.cond { font-size: calc(15 * var(--u)); }
.sym { color: var(--accent); }
.now-sub { color: var(--muted); font-size: calc(12.5 * var(--u)); margin-top: calc(2 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)) calc(10 * var(--u)); }
.now-sub span { white-space: nowrap; }

.hours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); text-align: center; font-size: calc(11.5 * var(--u)); line-height: 1.25;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: calc(4 * var(--u)) 0; }
.hours div { display: flex; flex-direction: column; }
.hours .h { color: var(--muted); font-variant-numeric: tabular-nums; }
.hours .s { color: var(--accent); font-size: calc(13 * var(--u)); }
.hours .t { font-variant-numeric: tabular-nums; }

.days { display: flex; flex-direction: column; gap: 0; font-size: calc(12.5 * var(--u)); line-height: 1.55; }
.day { display: grid; grid-template-columns: calc(38 * var(--u)) calc(16 * var(--u)) calc(38 * var(--u)) 1fr calc(54 * var(--u)); gap: calc(6 * var(--u)); align-items: center; }
.day .d { color: var(--muted); }
.day .s { color: var(--accent); text-align: center; }
.day .p { color: var(--muted); font-size: calc(11 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day .range { position: relative; height: calc(4 * var(--u)); background: var(--line); border-radius: calc(2 * var(--u)); }
.day .range b { position: absolute; top: 0; bottom: 0; border-radius: calc(2 * var(--u)); background: var(--accent); opacity: .7; }
.day .lohi { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.print-info { border-top: 1px solid var(--line); padding-top: calc(6 * var(--u)); line-height: 1.3; }
.print-info .title { font-weight: 600; font-size: calc(13.5 * var(--u)); }
.print-info .meta { color: var(--muted); font-size: calc(12 * var(--u)); margin-top: 1px; }
.print-info .credit { font-size: calc(11.5 * var(--u)); margin-top: calc(2 * var(--u)); color: var(--muted); }

.why summary { cursor: pointer; color: var(--muted); font-size: calc(12 * var(--u)); }
.why ul { margin: calc(4 * var(--u)) 0 0; padding-left: calc(16 * var(--u)); font-size: calc(12 * var(--u)); }
.why .evidence { font-style: italic; font-size: calc(12 * var(--u)); margin: calc(4 * var(--u)) 0 0; }
.why .conds { color: var(--muted); font-size: calc(11.5 * var(--u)); margin-top: calc(4 * var(--u)); }

.foot { display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.foot .status { flex: 1; min-width: calc(120 * var(--u)); }
.actions { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.actions button { background: transparent; border: 1px solid var(--line); border-radius: calc(5 * var(--u)); padding: calc(2 * var(--u)) calc(9 * var(--u)); cursor: pointer; font-size: calc(12.5 * var(--u)); }
.actions button:hover { border-color: var(--accent); color: var(--accent); }
.actions button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.status { color: var(--muted); font-size: calc(11 * var(--u)); margin: 0; line-height: 1.3; }

.expand { position: absolute; z-index: 5; border: 1px solid var(--line); border-radius: calc(20 * var(--u));
  padding: calc(5 * var(--u)) calc(13 * var(--u)); cursor: pointer; font-size: calc(15 * var(--u)); display: flex; gap: calc(6 * var(--u)); align-items: baseline;
  background: color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
#mini-sym { color: var(--accent); }
.expand[hidden] { display: none; }

/* ---------------------------------------------------------------- settings dialog */
dialog { border: 1px solid var(--line); border-radius: calc(10 * var(--u)); background: var(--panel); color: var(--ink);
  width: min(calc(440 * var(--u)), calc(100vw - calc(32 * var(--u)))); padding: 0; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(20, 15, 10, .35); }
.settings-form { padding: var(--box-pad); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.settings-form h2 { margin: 0; font-size: calc(19 * var(--u)); font-weight: 600; }
fieldset { border: 1px solid var(--line); border-radius: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); margin: 0; }
legend { color: var(--muted); font-size: calc(13 * var(--u)); padding: 0 calc(4 * var(--u)); }
.radio { display: flex; gap: calc(8 * var(--u)); align-items: center; margin: calc(4 * var(--u)) 0; }
.search input { width: 100%; margin-top: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(8 * var(--u)); border: 1px solid var(--line); border-radius: calc(5 * var(--u)); background: transparent; }
#place-results { list-style: none; margin: calc(4 * var(--u)) 0 0; padding: 0; }
#place-results li button { width: 100%; text-align: left; background: none; border: 0; padding: calc(5 * var(--u)) calc(4 * var(--u)); cursor: pointer; border-radius: calc(4 * var(--u)); }
#place-results li button:hover { background: var(--line); }
#place-results small { color: var(--muted); }
.small { font-size: calc(13 * var(--u)); margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* icon sizes in the panel */
#sym .ico { width: 1.45em; height: 1.45em; vertical-align: -0.32em; }
.hours .s .ico { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
.day .s .ico { width: calc(17 * var(--u)); height: calc(17 * var(--u)); vertical-align: -0.25em; }
#mini-sym .ico { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }

/* developer-only parts (shown on localhost, or with ?dev in the address) */
body:not(.dev) .dev-only { display: none !important; }
.foot .actions { margin-left: auto; }
.status[hidden] { display: none; }
.credits p { margin: 0; font-size: calc(13.5 * var(--u)); line-height: 1.45; }

/* always-visible controls: credits and settings, bottom right */
.controls { position: absolute; z-index: 6; display: flex; gap: calc(8 * var(--u)); }
.round-btn { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) var(--panel-alpha), transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.round-btn:hover { color: var(--accent); }
.round-btn .ico { width: calc(19 * var(--u)); height: calc(19 * var(--u)); stroke-width: 1.1; }

/* close buttons: a circled x, top right of the weather box and the dialogs.
   The button is exactly the circle, and the title line is exactly as tall as the button, so the circle sits
   --box-pad from the top and right edges and the title --box-pad from the left edge, centred on the circle. */
:root { --close-size: calc(22 * var(--u)); }
.close-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--muted); line-height: 0;
  width: var(--close-size); height: var(--close-size); display: grid; place-items: center; flex: none; }
.close-btn:hover { color: var(--accent); }
.close-btn .ico { width: var(--close-size); height: var(--close-size); }
.dlg-head h2, .p-head .place { line-height: var(--close-size); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
dialog:focus { outline: none; } /* the dialog itself holds focus when it opens; controls keep their own focus ring */