/* RootMap's font, bundled in fonts/ (SIL Open Font License, fonts/OFL.txt) rather than
   loaded from Google Fonts, which is blocked or slow in mainland China. */
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("fonts/caveat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("fonts/nunito-latin-700-normal.woff2") format("woff2"); }

/* A warm paper page with white cards, and a deep olive for selected states and primary
   actions, dark enough to pass AA as text and under white text (DESIGN.md 2). */
:root {
  --bg: #FBF8F1;
  --surface: #FFFFFF;
  --tint: #F3EFE4;
  --ink: #26251F;
  --ink-soft: #66655C;
  --line: #E8E2D3;
  --accent: #4B6B2E;
  --accent-ink: #FFFFFF;
  --selected: #EAF0D8;
  --heading: #26251F;
  --apricot: #FBEFD9;
  --peach: #F6D9A8;
  --shadow: 0 1px 2px rgba(38, 37, 31, .04), 0 6px 20px rgba(38, 37, 31, .06);
  --sky: #7FA7C9;
  --holiday: #96421A;
  --warning: #8A5A00;
  --leaf-ink: #4B6B2E;
  --google-gray: #5E5E5E; /* only Google's "Google Maps" text attribution */
  --print-sky: #E2EEF7;
  --print-rose: #FBE6E0;
  --font-fun: "Caveat", "Nunito", system-ui, sans-serif; /* only printed and shared pages */
  --font-head: "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --radius: 20px;
  --radius-small: 14px;
}

* { box-sizing: border-box; }

/* Grid and flex rules below would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font-body);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
}

/* Chinese: the system's Chinese font, as RootMap does (no web font: a full Chinese font is
   too large to bundle, and Google Fonts is slow in mainland China), at sizes and weights
   that suit Chinese characters better than Caveat's. */
html:lang(zh-CN) {
  --font-fun: "Yuanti SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-head: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  line-height: 1.65;
  /* A small gap between Chinese and Latin or numbers ("牛顿 02458"), and no line starting
     with closing punctuation. Browsers without text-autospace simply skip it. */
  text-autospace: normal;
  line-break: strict;
}
html:lang(zh-CN) h1,
html:lang(zh-CN) h2,
html:lang(zh-CN) h3 { font-weight: 600; letter-spacing: .02em; }
html:lang(zh-CN) .setup h1 { font-size: 26px; line-height: 1.3; }
html:lang(zh-CN) .section-head h2 { font-size: 24px; }
html:lang(zh-CN) .idea h3,
html:lang(zh-CN) .saved-place h3 { font-size: 19px; }
html:lang(zh-CN) .place-section h3,
html:lang(zh-CN) .panel h3,
html:lang(zh-CN) .hours h3,
html:lang(zh-CN) .now-card h3,
html:lang(zh-CN) .your-data h2 { font-size: 18px; }
html:lang(zh-CN) .day-name { font-size: 16px; }

/* Line icons from RootMap (24 × 24, drawn with the text color). */
.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* A smaller inline variant, for a pin icon sitting beside a line of text. */
.icon-inline {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Header */

.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  padding-block: 8px;
}

.site-nav {
  display: flex;
  gap: 24px;
  margin: 0 24px 0 auto;
}

.site-header nav a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

/* EN / 中文: a small pill at the end of the top bar. */
.lang-switch {
  min-width: 56px;
  padding: 0 12px;
  font-weight: 700;
  color: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}

.lang-switch:hover { border-color: var(--accent); }

.site-header nav a:hover,
.site-header nav a[aria-current=page] { color: var(--accent); }

/* The current tab: gold text with a line under it on a computer. */
.site-header nav a[aria-current=page] { box-shadow: inset 0 -2px 0 var(--accent); }


.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
}

/* The logo mark: a two-leaf sprout over a stem, standing in for the old 🌱 emoji. */
.logo-mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.logo-mark-leaf { fill: currentColor; }
.logo-mark-stem {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Explore: search, map, places. One column; from 960px the search and places share a
   column and the map stays in view beside them (DESIGN.md 5). */
.explore-page {
  display: grid;
  /* minmax(0, …) lets the column shrink below its widest child. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px 32px;
}

.explore-side { min-width: 0; }

.explore-main { min-width: 0; padding: 0; }
.wrap-status { max-width: 992px; margin: 32px auto; }
/* .wrap's own padding would otherwise cancel the sections' space above and below. */
.view > section.wrap { padding-block: 16px; }

.controls {
  display: grid;
  /* minmax(0, …) again, so a long address is cut short instead of widening the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.controls .field > label,
.controls legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}

fieldset.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field .note { margin: 8px 0 0; color: var(--ink-soft); }

/* °F / °C: two radio buttons styled as one control. */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--tint);
  border-radius: 12px;
}

.segmented label { position: relative; }

.segmented input {
  position: absolute;
  opacity: 0;
}

.segmented span {
  display: block;
  min-width: 52px;
  padding: 0 12px;
  line-height: 44px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
  border-radius: 9px;
  cursor: pointer;
}

/* The selected choice: a pale-green pill. */
.segmented input:checked + span {
  font-weight: 700;
  color: var(--accent);
  background: var(--selected);
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The one-time step (PRD.md 7.1). "Change" shows only the address part of it. */
.setup { max-width: 560px; margin: 0 auto; padding: 8px 24px 32px; }
.setup-photos { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.setup-photos img { width: 100%; height: clamp(120px, 20dvh, 200px); object-fit: cover; border-radius: var(--radius-small); }
.setup h1 { margin: 24px 0 16px; font-size: 28px; line-height: 1.15; text-wrap: balance; }
.setup-ask { margin: 8px 0 0; font-weight: 700; }
.setup-ask:focus { outline: 0; }
.setup-note { margin: 0; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }
.setup-actions { display: flex; flex-wrap: wrap; gap: 0 16px; }
.setup-actions .link-button { display: inline-flex; gap: 4px; align-items: center; padding: 0; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.setup.is-change .setup-intro,
.setup.is-change .setup-mode { display: none; }
.setup.is-change { padding-top: 24px; }

/* The saved starting point: one line and "Change", on Explore and Weather. */
.base-line { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 44px; }
.base-line p { flex: 1; min-width: 0; margin: 0; }
.base-line .link-button { flex: none; color: var(--accent); }
#place-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-field { flex: 1; min-width: 0; }

.city-row {
  display: flex;
  gap: 8px;
}

.city-row input,
.city-row button { min-height: 48px; }

/* Google's address field, styled only through what it documents: the element and its
   parts (DESIGN.md 6). One edge, and it belongs to the element: at rest a shadow draws it,
   and on focus that edge gives way to Google's ring, so there are never two lines. Google's
   default black box is on the element too, so this border: 0 is what removes it. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  height: 52px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  color-scheme: light;
  background-color: var(--surface);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}

gmp-place-autocomplete:focus-within { box-shadow: var(--shadow); }

/* !important: Google's own part styles would otherwise win (confirmed live). */
gmp-place-autocomplete::part(input) {
  background: transparent !important;
  border: 0 !important;
  text-overflow: ellipsis;
}

gmp-place-autocomplete::part(prediction-list) {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-small) !important;
}

gmp-place-autocomplete::part(prediction-item-selected) { background: var(--selected) !important; }
/* The focus ring part draws itself with border-color, not outline-color. */
gmp-place-autocomplete::part(focus-ring) { border-color: var(--accent) !important; }
gmp-place-autocomplete[aria-invalid=true] { box-shadow: 0 0 0 2px var(--accent); }

/* A long address is cut short rather than breaking the layout; the full text is in the
   field above and in the line's title. */
.location-line {
  display: flex;
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: pre;
}

.location-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hint { font-size: 14px; }
.hint:empty { display: none; }
.hint p { margin: 0; }

/* The compact weather line. A hazard gets the warm box so it can't be missed. */
.now-line {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.now-line p { min-width: 0; margin: 0; }

.now-line a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent);
}

.now-warning::before { content: "⚠︎ "; color: var(--warning); }
.now-loading { color: var(--ink-soft); }

.now-hazard {
  padding: 0 12px;
  font-weight: 600;
  background: var(--apricot);
  border-radius: var(--radius-small);
}

/* How many filters differ from the defaults, on the Filters button. */
.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 999px;
}

.filters-summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-soft);
}

.filters-summary p { min-width: 0; margin: 0; }
.filters-summary .link-button { flex: none; }

/* Every secondary setting, in one sheet (DESIGN.md 6). */
dialog.filters-panel { width: min(760px, calc(100% - 32px)); max-width: 100%; max-height: 90dvh; padding: 0; }
dialog.filters-panel[open] { display: flex; flex-direction: column; }
.filters-head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; }
.filters-head h2 { font-size: 18px; }
.filters-head h2:focus { outline: 0; }
.filters-body { flex: 0 1 auto; min-height: 0; gap: 12px 24px; padding: 8px 16px 16px; overflow-y: auto; }
@media (min-width: 720px) {
  .filters-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-body > .note { grid-column: 1 / -1; }
}
/* One row per filter, label beside its control, so they all fit on a phone screen. */
.filters-body .field { display: grid; grid-template-columns: 38% minmax(0, 1fr); align-items: center; gap: 8px; }
.filters-body fieldset.field { display: block; }
.filters-body fieldset.field legend { float: left; width: 38%; margin: 0; line-height: 44px; }
.filters-body fieldset.field .segmented { margin-left: calc(38% + 8px); }
.filters-body .field > label { margin: 0; }
.filters-body > .note { margin: 0; color: var(--ink-soft); font-size: 14px; }
.filters-foot { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.filters-foot button { width: 100%; }
.explore-tools { display: flex; gap: 8px; align-items: flex-start; min-width: 0; margin-bottom: 8px; }
.filters-button { flex: none; }
.link-as-button { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 16px; font-weight: 600; text-decoration: none; }

input[type=text],
input[type=date],
input[type=time],
textarea,
select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  color: var(--ink);
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}

/* Browsers draw their own select, and Safari's ignores the height above. */
select {
  padding-right: 32px;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366655C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 20px;
  appearance: none;
  -webkit-appearance: none;
}

input[aria-invalid=true] { border-color: var(--accent); }

.field-message {
  margin: 0;
  font-size: 14px;
}

/* Buttons: primary by default. Icon and label are centered by flexbox, 8px apart, and a
   short label never wraps. .button-secondary and .button-quiet below are the quieter ones. */
button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--accent-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: opacity 150ms;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.button-secondary,
.toggle,
.perspective {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--line);
}

.button-secondary:hover,
.toggle:hover,
.perspective:hover { border-color: var(--accent); }

.toggle[aria-pressed=true],
.perspective[aria-pressed=true] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* For the less important of two actions: no box until it's hovered. */
.button-quiet {
  color: var(--ink-soft);
  background: none;
  border-color: transparent;
}

.button-quiet:hover { color: var(--accent); }

.button-added,
.button-added:disabled {
  color: var(--leaf-ink);
  background: transparent;
  border-color: var(--leaf-ink);
  opacity: 1;
}

/* Looks like a link, behaves like a button. */
.link-button {
  justify-content: flex-start;
  padding: 0 4px;
  font-weight: 400;
  white-space: normal;
  color: var(--accent);
  text-align: left;
  text-decoration: underline;
  background: none;
  border: 0;
}

/* Sections */

section { padding-block: 32px; }

.section-head { margin-bottom: 16px; }
.section-head h2 { font-size: 24px; }

/* My week's heading plus its "Share or print" button, side by side when there's room. */
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-head-row h2 { margin: 0; }

.section-head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
}

.note { font-size: 14px; }

/* Status area */

/* Cards: one look for everything that sits in a box. */
.status,
.now-card,
.hours,
.idea,
.plan,
.saved-place {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.status {
  margin: 0;
  padding: 16px;
}

.status:empty { display: none; }
.status p { margin: 0; }
.status.loading p { color: var(--ink-soft); }
.status.error { border-left: 4px solid var(--accent); }
.status.error button { margin-top: 12px; }
#weather-status:not(:empty) { margin-bottom: 16px; }

/* Weather: Now and Next hours side by side. */
.weather-now {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 16px;
  margin-bottom: 16px;
}

.now-card,
.hours { padding: 16px; }

.now-card h3,
.hours h3 { font-size: 18px; margin-bottom: 8px; }
.now-card p { margin: 0; color: var(--ink-soft); }

.now-temp {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading) !important;
}

.now-card,
.hour-list { font-variant-numeric: tabular-nums; }

.hour-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.hour-list li {
  position: relative; /* keeps .visually-hidden inside the scrolling row */
  display: grid;
  gap: 2px;
}
.hour-time,
.hour-rain { font-size: 13px; color: var(--ink-soft); }
.hour-icon { font-size: 24px; }
.hour-temp { font-weight: 700; }

#holiday-note { margin: 0 0 12px; color: var(--ink-soft); }

/* Tags */

.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
  border-radius: 999px;
}

.tag-holiday { --c: var(--holiday); }
.tag-warning { --c: var(--warning); }
.tag-soft { --c: var(--ink-soft); }

/* Photos (RootMap). Fixed 4:3 frame; a missing photo leaves a plain tile. */

.art {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--tint);
  border-radius: var(--radius-small);
}

.art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-missing::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 32px;
  color: var(--accent);
  opacity: .5;
}

/* Seven-day strip */

.week {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: 12px;
  margin: 0;
  padding: 4px 2px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.day {
  position: relative; /* keeps .visually-hidden inside the scrolling strip */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: 12px 8px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  color: var(--ink);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  justify-content: flex-start;
  scroll-snap-align: start;
}

.day[aria-pressed=true] {
  background: var(--selected);
  border: 2px solid var(--accent);
  padding: 11px 7px;
}

.day-name {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading);
}

.day-date,
.day-condition,
.day-rain {
  font-size: 13px;
  color: var(--ink-soft);
}

.day-icon {
  margin-top: 4px;
  font-size: 34px;
  line-height: 1.2;
}

.day-temps {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.day-low {
  font-weight: 400;
  color: var(--ink-soft);
}

.day .tag { margin-top: 4px; }

.day-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
  font-size: 13px;
  line-height: 1.3;
}

/* Two lines at most, so the photos line up across the week. */
.day-pick-title {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Ideas for the selected day */

.warnings {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--apricot);
  border-radius: var(--radius);
}

.warnings ul {
  margin: 0 0 8px;
  padding-left: 0;
  list-style: none;
}

.warnings li {
  padding-left: 24px;
  text-indent: -24px;
}

.warnings li::before {
  content: "⚠︎";
  display: inline-block;
  width: 24px;
  text-indent: 0;
  color: var(--warning);
}

.warnings-footnote {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.idea {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.idea-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.idea h3 { font-size: 19px; }
.idea p { margin: 0; }

.meta {
  font-size: 14px;
  color: var(--ink-soft);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.safety {
  font-size: 14px;
  color: var(--ink-soft);
}

/* A title that's also a button: plain text, wrapping freely, still a full touch target. */
.idea-title,
.place-title {
  justify-content: flex-start;
  padding: 0;
  font: inherit;
  white-space: normal;
  color: var(--heading);
  text-align: left;
  background: none;
  border: 0;
}

.idea-title:hover,
.place-title:hover { text-decoration: underline; }

.idea-body > button:last-child { margin-top: 4px; }

/* Selected day: warnings and "What to wear" side by side under the strip,
   then the at-home ideas and "Why these activities?" in their own section. */
.day-weather {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.warnings { margin-bottom: 0; }

.day-ideas {
  display: grid;
  gap: 16px;
}

.panel {
  padding: 16px;
  background: var(--tint);
  border-radius: var(--radius);
}

.panel h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.panel ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.panel p { margin: 0 0 8px; }

.panel-label {
  font-size: 14px;
  font-weight: 600;
}

.panel-footnote {
  font-size: 14px;
  color: var(--ink-soft);
}

.panel > :last-child { margin-bottom: 0; }

/* My week */

.plan {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan > li {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 12px;
  align-items: start;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
}

.plan > li:first-child { border-top: 0; }

.plan-day {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
}

.plan-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-items li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.plan-empty {
  margin: 0;
  padding-block: 12px;
  color: var(--ink-soft);
}

.remove-button { color: var(--ink-soft); }

/* Activity details */

dialog {
  width: min(520px, calc(100% - 32px));
  max-height: 90vh;
  padding: 24px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

dialog::backdrop { background: rgba(34, 53, 44, .45); }

dialog[open] { animation: fade-in 150ms ease-out; }

@keyframes fade-in {
  from { opacity: 0; }
}

#details-title {
  margin: 16px 0 4px;
  font-size: 26px;
}

#details-title:focus { outline: none; }
#details-title:focus-visible { outline: 2px solid var(--accent); }

dialog h3 {
  margin: 16px 0 8px;
  font-family: var(--font-body);
  font-size: 15px;
}

dialog ul,
dialog ol { margin: 0; padding-left: 20px; }
dialog li + li { margin-top: 4px; }
dialog p { margin: 8px 0 0; }

.details-box {
  margin-top: 16px;
  padding: 4px 16px 12px;
  background: var(--tint);
  border-radius: var(--radius-small);
}

.source-note {
  font-size: 13px;
  color: var(--ink-soft);
}

.details-actions {
  position: sticky;
  bottom: -24px;
  display: flex;
  gap: 8px;
  margin: 24px -24px -24px;
  padding: 12px 24px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.details-actions button:first-child { flex: 1; }

.site-footer {
  margin-top: 32px;
  padding-block: 32px;
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--tint);
}

.site-footer p { margin: 0 0 16px; }
.your-data { padding: 0; }
.your-data h2 { font-size: 20px; margin-bottom: 16px; }
.your-data ul { margin: 0; padding-left: 20px; }
.your-data li + li { margin-top: 4px; }

/* Three clearly separated groups (privacy / backup / delete) instead of one run-on block. */
.data-group { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.your-data > .data-group:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.data-group h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.data-group p:last-child { margin-bottom: 0; }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.data-status { margin: 8px 0 0; color: var(--ink); }
.data-status:empty { display: none; }
.data-group-danger h3 { color: var(--warning); }


/* Fills its row, so each choice shares the width (Family / Classroom, walking time). */
.segmented-wide { display: flex; }
.segmented-wide label { flex: 1 1 auto; }
.segmented-wide span { min-width: 0; padding: 0 8px; font-size: 14px; white-space: nowrap; }
.segmented-small { display: flex; }
.segmented-small label { flex: 1 1 auto; }
.segmented-small span { min-width: 0; padding: 0 4px; font-size: 13px; white-space: nowrap; }

.explore-notes {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

.explore-notes p { margin: 0 0 4px; }
.classroom-line { color: var(--ink); font-weight: 600; }

.google-attribution {
  margin: 0 0 8px;
  font: 400 14px Roboto, var(--font-body);
  color: var(--google-gray);
  white-space: nowrap;
}

.place-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 0 24px;
}

.list-divider {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}

/* An entry in the guide: the kind of place as an icon beside the words, with a rule between
   entries. No photo: nothing here may look like a picture of the place itself. */
.place-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.place-icon { display: grid; place-items: center; width: 56px; height: 56px; color: var(--accent); background: var(--selected); border-radius: var(--radius-small); }
.place-icon .icon { width: 28px; height: 28px; }
.place-card.is-selected { background: var(--selected); box-shadow: 0 0 0 8px var(--selected); border-radius: 2px; }

.place-card h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.place-title { min-width: 0; }

/* The same number as the map marker. */
.place-number {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 50%;
}

.place-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  margin: 0;
}

.place-card p { margin-block: 0; }
.place-card p + p { margin-top: 8px; }

.place-idea,
.place-access,
.place-alert { font-size: 14px; }

/* Three lines at most, so every card stays about the same height. */
.place-idea {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-soft);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.idea-label { font-weight: 600; color: var(--leaf-ink); }
.place-alert::before { content: "⚠︎ "; color: var(--warning); }

.place-address {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.place-walk {
  margin: 8px 0 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.walk-source,
.walk-pending {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}

.place-walk .link-button { min-height: 44px; font-weight: 600; }

.notes-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.place-weather {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.place-weather li::before { content: "⚠︎ "; color: var(--warning); }
.place-weather li.is-good::before { content: none; }

.place-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.place-card .place-actions { margin-top: 8px; }
.place-card .button-secondary { flex: 1; }

.tag-saved { --c: var(--leaf-ink); }

/* About 40% of the screen, starting right under the search. Before a search it holds only
   the Explore status, so it stays small. */
.map-box {
  position: relative;
  height: clamp(208px, 30dvh, 280px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 8px;
}

.map-box.is-empty {
  height: auto;
  min-height: clamp(160px, 24dvh, 220px);
  background: var(--tint);
}

.map { width: 100%; height: 100%; background: var(--tint); }

.map-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  height: 100%;
  padding: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--ink-soft);
}

.map-empty > .icon { width: 28px; height: 28px; color: var(--accent); }
.map-empty .status { padding: 0; background: none; border: 0; border-radius: 0; }
.map-empty .status button { margin-top: 8px; }
.map-empty .link-button { color: var(--ink-soft); }

@media (min-width: 960px) {
  .explore-page {
    grid-template-columns: minmax(360px, 5fr) 7fr;
    grid-template-rows: auto 1fr;
    gap: 16px 24px;
    align-items: start;
  }
  /* Short enough to fit under the header, so Google's logo is never below the fold. */
  .map-box,
  .map-box.is-empty {
    position: sticky;
    top: 16px;
    grid-column: 2;
    grid-row: 1 / 3;
    height: calc(100vh - 84px);
    max-height: 760px;
  }
}

/* Sits above the bottom of the map, clear of Google's logo and terms. */
.map-peek {
  position: absolute;
  inset: auto 12px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow);
}

.map-peek p { min-width: 0; margin: 0; }
.peek-title { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.peek-walk { grid-column: 1; font-size: 14px; }
.map-peek button { grid-row: 1 / 3; grid-column: 2; }

/* Place details */

.place-dialog {
  width: min(640px, calc(100% - 32px));
  padding: 0;
  background: var(--bg);
}

.place-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.place-head p { margin: 4px 0 0; }
#place-title:focus { outline: none; }
#place-title:focus-visible { outline: 2px solid var(--accent); }

.place-section { padding: 0 24px; margin-top: 24px; }
.place-section h3 { font-size: 18px; margin-bottom: 8px; }
.place-section p { margin: 0 0 8px; }
.place-section a { color: var(--accent); font-weight: 600; }

.map-detail {
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 8px;
  border-radius: var(--radius);
}

.route-warnings,
.route-reminder { font-size: 14px; }

.route-reminder {
  padding: 12px;
  background: var(--apricot);
  border-radius: var(--radius-small);
}

.route-reminder::before { content: "⚠︎ "; color: var(--warning); }

.ideas-panel {
  margin: 24px 24px 0;
  padding: 16px;
  background: var(--tint);
  border-radius: var(--radius);
}

.ideas-panel h4 { margin: 16px 0 4px; font-size: 15px; }
.ideas-panel ul { margin: 0; padding-left: 20px; }
.perspectives { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.perspective-focus { font-weight: 600; }
.guide-note { font-size: 14px; font-style: italic; color: var(--ink-soft); }
.place-dialog .place-actions { padding: 0 24px 24px; margin-top: 24px; }

/* Forms in the details dialog and My week */

textarea {
  min-height: 0;
  padding: 10px 12px;
  line-height: 1.4;
  resize: vertical;
}

.visit-form,
.plan-form,
.edit-visit-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}

.visit-form label,
.plan-form label,
.edit-visit-form label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 600;
}

/* The label text and "(optional)" share a line; the field goes below. */
.visit-form label > :is(input, textarea),
.plan-form label > :is(input, textarea),
.edit-visit-form label > :is(input, textarea) { flex: 1 1 100%; }

.visit-form h4,
.plan-form h3 { margin: 0; }
.visit-form button[type=submit],
.plan-form button[type=submit] { justify-self: start; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.form-row label { flex: 1 1 140px; }
.optional { font-weight: 400; color: var(--ink-soft); }
.hint,
.form-done { margin: 0; font-size: 13px; color: var(--ink-soft); }
.form-done:empty { display: none; }
.form-done { color: var(--leaf-ink); font-weight: 600; }

/* Your visits and the journal */

.status-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

.journal {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.journal li {
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--tint);
}

.journal p { margin: 0 0 2px; }
.journal-date { font-weight: 700; color: var(--ink); }
.journal-note { font-size: 14px; }
.perspective-note { font-size: 14px; color: var(--ink-soft); }

/* My Places */

.places-tabs {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.places-tabs .segmented { display: flex; max-width: 520px; }
.places-tabs label { flex: 1; }

/* Room for a two-line label on narrow screens, still at least 44px tall. */
.places-tabs .segmented input + span {
  display: flex;
  gap: 0 4px;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 44px;
  padding: 4px;
  line-height: 1.25;
}
/* The count sits inside a segmented-control label, so undo that control's span styles. */
.segmented .count {
  display: inline;
  min-width: 0;
  padding: 0;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
  background: none;
}

.places-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.saved-place { padding: 16px; }

.saved-place h3 { font-size: 19px; }
.saved-place h3.unavailable { color: var(--ink-soft); font-family: var(--font-body); font-size: 16px; }
.saved-place p { margin: 4px 0 0; }
.saved-meta { font-size: 14px; color: var(--ink-soft); }
.history { margin-top: 8px; font-size: 14px; }
.history summary { min-height: 44px; display: flex; align-items: center; color: var(--accent); font-weight: 600; cursor: pointer; }
#my-places .section-head .google-attribution { margin-top: 4px; }

/* My week: weather and planned places */

.plan-weather { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }

.plan-place {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4px 0;
}

.plan-place > div:first-child { flex: 1 1 220px; }
.plan-meta,
.plan-notes { margin: 0 0 0 28px; font-size: 14px; color: var(--ink-soft); }
.plan-place-actions { display: flex; gap: 4px; }
.plan-place-name { margin: 0; font-weight: 600; }
.edit-visit-form { flex: 1 1 100%; }

/* Phone */

@media (max-width: 719px) {
  .wrap { padding: 0 16px; }
  .setup { padding: 8px 16px 24px; }
  html:lang(zh-CN) .section-head h2 { font-size: 22px; }
  .logo { font-size: 20px; }
  .logo-mark { width: 24px; height: 24px; }
  section { padding-block: 24px; }
  .section-head h2 { font-size: 22px; }

  /* Swipeable row; the next card peeks in at the edge. */
  .week {
    grid-auto-columns: 112px;
    margin-right: -16px;
    padding-right: 16px;
  }
  .day-name { font-size: 16px; }
  .day-condition,
  .day-pick-title { display: none; }

  /* Ideas as rows: photo on the left. */
  .ideas { grid-template-columns: 1fr; gap: 12px; }
  .idea {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: start;
  }

  /* "What to wear" comes first on phones. */
  .day-weather {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .day-ideas { gap: 12px; }

  /* Now on top; the next hours swipe sideways. */
  .weather-now { grid-template-columns: 1fr; gap: 12px; }
  .hours { overflow-x: auto; }
  .hour-list { grid-template-columns: repeat(6, 64px); }

  .place-dialog { width: 100%; max-width: 100%; }
  dialog.filters-panel { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  dialog.filters-panel .filters-body { flex: 1 1 auto; gap: 8px; }
  .place-head { padding: 16px; }
  .details-actions { bottom: -16px; margin: 16px -16px -16px; padding: 12px 16px 16px; }
  .place-section { padding: 0 16px; }
  .ideas-panel { margin: 24px 16px 0; padding: 16px; }
  .place-dialog .place-actions { padding: 0 16px 16px; }

  /* Section links move to a bar at the bottom, within reach of a thumb. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .site-nav {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(59, 42, 26, .06);
    backdrop-filter: blur(14px);
  }
  .site-header .site-nav a {
    display: grid;
    gap: 2px;
    place-items: center;
    align-content: center;
    min-height: 60px;
    font-size: 12px;
    text-align: center;
  }
  .site-header .site-nav a[aria-current=page] { font-weight: 700; box-shadow: none; }
  .explore-page { padding: 0 16px 24px; gap: 12px; }
  .wrap-status { margin: 24px 16px; }

  .plan > li { grid-template-columns: 1fr; gap: 0; padding-top: 12px; }

  /* Details open as a bottom sheet. */
  dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding: 16px;
    border-radius: var(--radius) var(--radius) 0 0;
  }
}

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

/* Print: the share card and "Print Adventure Guide" (PRD.md 7.9, 7.14, DESIGN.md 11).
   app.js fills #print-area with one of the two, then calls window.print(). On screen
   it's always hidden; only @media print shows it, and hides everything else in its place -
   no PDF library, just window.print(), @media print and @page (DESIGN.md "Don't"). */
#print-area { display: none; }

.plan-alert { margin: 4px 0 0; font-size: .85rem; color: var(--warning); }
.plan-alert::before { content: "⚠︎ "; }

/* A kindergarten handout: soft color blocks, big rounded shapes, one friendly title. */
.print-page {
  max-width: 100%;
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.print-hero { position: relative; padding: 14px 18px 16px; overflow: hidden; background: var(--apricot); border-radius: 26px; }
.print-doodles { position: absolute; top: 8px; right: 10px; width: 130px; height: 70px; }
.print-brand { margin: 0; font-size: 16px; }
.print-brand .logo-mark { width: 22px; height: 22px; }
.print-title { position: relative; margin: 2px 0 0; padding-right: 96px; font-family: var(--font-fun); font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--heading); }
.print-subtitle,
.print-address { position: relative; margin: 4px 0 0; color: var(--ink); }
.print-perspective { display: inline-block; margin: 8px 0 0; padding: 2px 12px; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--surface); border-radius: 999px; }
.print-page > .google-attribution { margin: 6px 0 0 8px; }
.print-empty { margin-top: 16px; color: var(--ink-soft); }

/* One day: a block of its own color, kept whole across a page break. */
.print-day { margin-top: 12px; padding: 12px 16px; background: var(--selected); border-radius: 22px; break-inside: avoid; }
.print-day:nth-of-type(4n + 2) { background: var(--print-sky); }
.print-day:nth-of-type(4n + 3) { background: var(--apricot); }
.print-day:nth-of-type(4n) { background: var(--print-rose); }
.print-day h2 { font-size: 20px; }
.print-weather { margin: 2px 0 8px; font-size: 14px; }

.print-items { margin: 0; padding: 0; list-style: none; }
.print-item { padding: 6px 0 6px 26px; position: relative; break-inside: avoid; }
.print-item::before { content: "🌱"; position: absolute; left: 0; top: 6px; font-size: 15px; }
.print-item-title { margin: 0; font-size: 17px; font-weight: 700; }
.print-item-address,
.print-item-meta,
.print-item-notes { margin: 2px 0 0; font-size: 14px; color: var(--ink); }

/* The guide: the same color blocks, two across, so the words stay on one page. */
.print-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.print-section { padding: 10px 14px; font-size: 14px; background: var(--selected); border-radius: 20px; break-inside: avoid; }
.print-section:nth-child(4n + 2) { background: var(--print-sky); }
.print-section:nth-child(4n + 3) { background: var(--apricot); }
.print-section:nth-child(4n) { background: var(--print-rose); }
.print-section h2 { font-size: 16px; }
.print-section p { margin: 4px 0 0; }
.print-section ul { margin: 4px 0 0; padding-left: 18px; }
.print-section li { margin: 2px 0; }

/* The week's screenshot leaves out the full alerts, so it says this much instead. */
.print-week-alert { display: none; }
.print-wear { margin-top: 8px; padding: 8px 12px; background: rgba(255, 255, 255, .7); border-radius: 14px; }
.print-wear p { margin: 2px 0 0; font-size: 14px; }

/* Children draw rather than write, so this gets a whole page and no ruled lines. */
.print-drawing { break-before: page; }
.print-drawing h2 { font-family: var(--font-fun); font-size: 36px; text-align: center; }
.print-drawing-box { position: relative; height: 200mm; margin-top: 10px; border: 4px dashed var(--peach); border-radius: 36px; }
.print-drawing-box .print-doodles { top: auto; right: 16px; bottom: 12px; }

/* The card a teacher screenshots for families: fills a phone, and with its buttons hidden
   nothing else is in the picture, so there's nothing to crop. */
dialog.share-dialog { width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; background: var(--surface); border: 0; border-radius: 0; }
dialog.share-dialog[open] { display: flex; flex-direction: column; }
.share-controls { display: grid; flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 16px 12px; background: var(--tint); }
.share-controls h2 { margin: 0; font-size: 18px; }
#share-close { justify-self: end; }
.share-range, #share-clean, #share-print, .share-note { grid-column: 1 / -1; }
.share-controls button { min-width: 0; }
.share-note { margin: 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.share-dialog.is-clean .share-controls { display: none; }
.share-card { flex: 1; min-height: 0; padding: 10px 12px; overflow-y: auto; }
.share-card .print-title { font-size: 34px; }
/* The week has to fit one screenshot; the single day has room for everything. */
.share-card .print-week .print-hero { padding: 8px 14px 10px; border-radius: 20px; }
.share-card .print-week .print-doodles { top: 4px; width: 100px; height: 54px; }
.share-card .print-week .print-title { font-size: 28px; }
.share-card .print-week .print-subtitle { margin: 0; font-size: 13px; }
.share-card .print-week > .google-attribution { margin: 3px 0 0 6px; font-size: 12px; }
.share-card .print-week .print-day { margin-top: 6px; padding: 6px 12px; border-radius: 16px; }
.share-card .print-week .print-day h2 { display: inline; font-size: 15px; }
.share-card .print-week .print-weather { display: inline; margin: 0 0 0 8px; font-size: 12px; line-height: 1.3; }
.share-card .print-week .print-week-alert { display: block; margin: 0; font-size: 12px; font-weight: 700; color: var(--warning); }
.share-card .print-week .print-items { margin-top: 2px; }
.share-card .print-week .print-item { margin: 0; padding: 1px 0 1px 20px; line-height: 1.3; }
.share-card .print-week .print-item::before { top: 1px; font-size: 12px; }
.share-card .print-week .print-item p { display: inline; }
.share-card .print-week .print-item-title { font-size: 14px; line-height: 1.3; }
.share-card .print-week .print-item-meta { margin: 0 0 0 6px; font-size: 12px; line-height: 1.3; }
.share-card .print-week .print-item-address,
.share-card .print-week .print-item-notes,
.share-card .print-week .print-weather strong,
.share-card .print-week .print-weather br,
.share-card .print-week .print-item-meta + .print-item-meta { display: none !important; }

@media print {
  /* Nothing else on the page prints: no header, nav, dialogs, maps or bottom bar. */
  body > :not(#print-area) { display: none !important; }
  #print-area { display: block !important; }

  /* No fixed size, so the browser's own Letter/A4 choice (and Save as PDF) is respected;
     a comfortable margin keeps every browser's unprintable edge clear on both sizes. */
  @page { margin: 14mm; }

  html, body { background: #FFF; }

}