/* Daily 马德里视觉：A「暖阳」定稿（Claude Design 画布「Daily 马德里视觉稿」）。
   CSP 只允许同源：不用网页字体和外部图片，图标是 data: SVG，用 mask 按文字颜色上色。手机优先，900px 起并排三栏。 */

:root {
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;

  /* 底色与文字 */
  --bg: #faf6ef;
  --surface: #fff;
  --surface-soft: #fffdf9;
  --surface-muted: #fbf8f3;
  --surface-2: #f3ece1;
  --surface-3: #efe6d9;
  --ink: #2b231c;
  --ink-2: #625548;
  --line: #f1e9de;
  --line-strong: #e4d8c8;
  --line-card: #eadfd2;
  --line-dashed: #c9b49a;
  --underline: #d9c7ae;

  /* 主色「暖阳」 */
  --sun: #e39b2d;
  --sun-ring: #f8e5c4;
  --sun-halo: #fcf0dc;
  --sun-ink: #8a4f06;
  --sun-ink-strong: #6e3f05;
  --sun-soft: #fce9c8;
  --sun-pressed: #fff4e0;
  --sun-line: #e8cfa6;

  /* 标签 */
  --free-bg: #e4f2e7;
  --free-ink: #24693f;
  --booking-bg: #fceeda;
  --booking-ink: #8a4b00;
  --paid-bg: #f0ebe4;
  --paid-ink: #5b5148;
  --alert-bg: #fceee8;
  --alert-ink: #9e3b26;
  --stale-line: #f1d3a4;
  --empty-line: #e1d3c1;
  --error-bg: #f6e7e6;

  /* 七个类别色：白字 ≥ 5.7:1；浅底上同色字 ≥ 5:1 */
  --cat-festival: #ae3d18;
  --cat-festival-tint: #f5e8e3;
  --cat-culture: #6b46a8;
  --cat-culture-tint: #ede9f5;
  --cat-deal: #276e47;
  --cat-deal-tint: #e5eee9;
  --cat-food: #86580a;
  --cat-food-tint: #f0ebe2;
  --cat-outdoor: #2367a0;
  --cat-outdoor-tint: #e5edf4;
  --cat-youth: #aa2e65;
  --cat-youth-tint: #f5e6ed;
  --cat-alert: #b0372b;
  --cat-alert-tint: #f6e7e6;

  /* 字号 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 22px;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: 16px;

  /* 圆角与阴影 */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-card: 18px;
  --radius-pill: 22px;
  --radius-bar: 26px;
  --shadow-card: 0 1px 2px rgb(60 40 20 / 6%), 0 6px 20px rgb(60 40 20 / 5%);
  --shadow-tab: 0 1px 2px rgb(60 40 20 / 8%), 0 2px 8px rgb(60 40 20 / 6%);
  --tap: 44px;

  /* 图标（mask 用，颜色取 currentColor） */
  --icon-clock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
  --icon-pin: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>");
  --icon-save: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 4h11v17l-5.5-3.8L6.5 21z'/></svg>");
  --icon-seen: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.8 2.8 5.2-5.6'/></svg>");
  --icon-hide: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 3.5l17 17'/><path d='M10.4 5.6c.5-.1 1-.1 1.6-.1 5 0 8.6 4.3 9.5 6.5-.4 1-1.2 2.3-2.4 3.5'/><path d='M6.4 6.6C4.3 7.9 3 10.1 2.5 12c.9 2.2 4.5 6.5 9.5 6.5 1.6 0 3-.4 4.3-1.1'/><path d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/></svg>");
  --icon-bell: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/><path d='M10 20.5a2 2 0 0 0 4 0'/></svg>");
  --icon-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  --icon-external: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7'/><path d='M9 7h8v8'/></svg>");
  --icon-funnel: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16l-6.2 7.4V18l-3.6 2v-7.6z'/></svg>");
  --icon-calendar: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='3'/><path d='M3.5 10h17'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>");
  /* 两色图标直接当背景图 */
  --image-saved: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e39b2d' stroke='%238a4f06' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 4h11v17l-5.5-3.8L6.5 21z'/></svg>");
  --image-chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625548' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --image-offline: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0372b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14.5a4.5 4.5 0 0 1 3.4-4.4A6 6 0 0 1 19 9.5a4 4 0 0 1 .5 8H8'/><path d='M3 3l18 18'/></svg>");
}

/* 基础 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button,
select,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--ink);
  text-decoration-color: var(--underline);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--sun-ink);
}

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

/* 所有 mask 图标共用 */
.when::before,
.where::before,
.actions button::before,
#alerts > h2::before,
.check:has(:checked)::before,
.active-filters::before,
.filter-toggle::before,
.filter-toggle::after,
.banner-stale::before,
.column > .empty::before,
.detail .official a::after,
.detail .facts a::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* 整页 */

#app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-6);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
}

#app > section > h2 {
  margin-bottom: 14px;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.35;
}

.empty {
  color: var(--ink-2);
  font-size: var(--text-md);
}

/* 加载中与加载失败（失败时 app.js 只放一句文字） */

#app > .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 70vh;
  color: var(--ink-2);
}

#app > .loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 7px var(--sun-ring), 0 0 0 14px var(--sun-halo);
  animation: sun-breathe 1.6s ease-in-out infinite;
}

@keyframes sun-breathe {
  50% {
    box-shadow: 0 0 0 9px var(--sun-ring), 0 0 0 18px var(--sun-halo);
  }
}

#app:not(:has(> *)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 70vh;
  padding-inline: var(--space-6);
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

#app:not(:has(> *))::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--error-bg) var(--image-offline) center / 26px no-repeat;
}

.noscript {
  margin: 0;
  padding: var(--space-6);
  text-align: center;
}

/* 顶栏 */

header.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: 2px;
}

header.top h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

header.top h1::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 4px var(--sun-ring);
}

header.top .today {
  color: var(--ink-2);
  font-size: var(--text-md);
}

header.top .updated {
  grid-column: 1 / -1;
  margin-left: 28px;
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.profile {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  padding: 6px;
  border-radius: var(--radius-bar);
  background: var(--surface-2);
}

.profile > label[for] {
  padding: 0 var(--space-1) 0 10px;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.profile select {
  height: var(--tap);
  padding: 0 34px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface) var(--image-chevron) right 13px center / 14px no-repeat;
  font-size: 16px; /* iOS Safari 遇到小于 16px 的表单控件，获得焦点时会把页面放大 */
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}

/* 胶囊复选框：档位、免费 / 要预约、类别、区 */

.profile .check,
.filter-panel > .flags:first-child .check,
.filter-panel fieldset .check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-md);
  cursor: pointer;
}

.profile .check input,
.filter-panel > .flags:first-child .check input,
.filter-panel fieldset .check input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.profile .check:has(:focus-visible),
.filter-panel > .flags:first-child .check:has(:focus-visible),
.filter-panel fieldset .check:has(:focus-visible) {
  outline: 2px solid var(--sun-ink);
  outline-offset: 2px;
}

.profile .check:has(:checked),
.filter-panel > .flags:first-child .check:has(:checked),
.filter-panel fieldset .check:has(:checked) {
  gap: 6px;
  padding: 0 16px 0 11px;
  border-color: var(--sun);
  background: var(--sun-soft);
  color: var(--sun-ink-strong);
  font-weight: 600;
}

.check:has(:checked)::before {
  --icon: var(--icon-check);
}

/* 类别复选框前面的色点（勾上后换成对勾） */
.filter-panel .categories .check:not(:has(:checked))::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-dot);
}

.check:has([data-key="filter:category:festival"]) { --chip-dot: var(--cat-festival); }
.check:has([data-key="filter:category:culture"]) { --chip-dot: var(--cat-culture); }
.check:has([data-key="filter:category:deal"]) { --chip-dot: var(--cat-deal); }
.check:has([data-key="filter:category:food"]) { --chip-dot: var(--cat-food); }
.check:has([data-key="filter:category:outdoor"]) { --chip-dot: var(--cat-outdoor); }
.check:has([data-key="filter:category:youth"]) { --chip-dot: var(--cat-youth); }
.check:has([data-key="filter:category:alert"]) { --chip-dot: var(--cat-alert); }

/* 数据过期横幅 */

.banner-stale {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 10px;
  margin-top: -10px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--stale-line);
  border-radius: var(--radius-md);
  background: var(--booking-bg);
  color: var(--sun-ink-strong);
  font-size: var(--text-md);
  line-height: 1.55;
}

.banner-stale::before {
  --icon: var(--icon-clock);
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

/* 卡片 */

.cards {
  display: grid;
  gap: var(--space-3);
}

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding: var(--space-4) var(--space-4) 2px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.card > * {
  grid-column: 1 / -1;
}

.cat-festival { --cat: var(--cat-festival); --cat-tint: var(--cat-festival-tint); }
.cat-culture { --cat: var(--cat-culture); --cat-tint: var(--cat-culture-tint); }
.cat-deal { --cat: var(--cat-deal); --cat-tint: var(--cat-deal-tint); }
.cat-food { --cat: var(--cat-food); --cat-tint: var(--cat-food-tint); }
.cat-outdoor { --cat: var(--cat-outdoor); --cat-tint: var(--cat-outdoor-tint); }
.cat-youth { --cat: var(--cat-youth); --cat-tint: var(--cat-youth-tint); }
.cat-alert { --cat: var(--cat-alert); --cat-tint: var(--cat-alert-tint); }

/* 类别标签：小圆点加类别名，类别名取自 aria-label */
.card > .dot {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--cat-tint);
  color: var(--cat);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.card > .dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.card > .dot::after {
  content: attr(aria-label);
}

.card > .price {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.badge-free,
.badge-paid,
.badge-booking,
.badge-not-for-you,
.card.is-hidden .price::after,
.card.is-hidden:not(:has(.price))::after {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.badge-free {
  background: var(--free-bg);
  color: var(--free-ink);
}

.badge-paid {
  background: var(--paid-bg);
  color: var(--paid-ink);
}

.badge-booking {
  background: var(--booking-bg);
  color: var(--booking-ink);
}

/* 限定人群的免费，浏览者的档位不全在里面：用收费的灰底，和「免费」的绿底区分开 */
.badge-not-for-you {
  background: var(--paid-bg);
  color: var(--paid-ink);
}

.price .audience {
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.card > h3 {
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
}

.card-open,
.text-button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-align: left;
}

.card > p[lang="es"] {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.card > .when {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--sun-ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.when::before {
  --icon: var(--icon-clock);
  width: 15px;
  height: 15px;
}

.card > .where {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--space-1);
  font-size: var(--text-md);
}

.where::before {
  --icon: var(--icon-pin);
  width: 15px;
  height: 15px;
  margin-top: 3px;
  background: var(--ink-2);
}

.card > .summary {
  margin-top: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-md);
  line-height: 1.6;
}

.card > .actions {
  display: flex;
  gap: 2px;
  margin: 10px -8px 0;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.actions button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tap);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.actions [data-action="save"]::before { --icon: var(--icon-save); }
.actions [data-action="seen"]::before { --icon: var(--icon-seen); }
.actions [data-action="hide"]::before { --icon: var(--icon-hide); }

.actions [aria-pressed="true"] {
  background: var(--sun-pressed);
  color: var(--sun-ink);
  font-weight: 600;
}

.actions [data-action="save"][aria-pressed="true"]::before {
  background: var(--image-saved) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

.actions [data-action="hide"][aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--ink);
}

/* 看过的、隐藏后又显示出来的卡片：不降低文字对比度，只换底色和边框 */
.card.is-seen {
  background: var(--surface-muted);
  box-shadow: none;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}

.card.is-hidden {
  border: 1px dashed var(--line-dashed);
  background: var(--surface-muted);
  box-shadow: none;
}

.card.is-hidden .price::after,
.card.is-hidden:not(:has(.price))::after {
  content: "已隐藏";
  border: 1px dashed var(--line-dashed);
  color: var(--ink-2);
  font-weight: 400;
}

.card.is-hidden:not(:has(.price))::after {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
}

/* 实用提醒：浅红底，手机上横向滑动 */

#app > #alerts > h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--alert-ink);
  font-size: var(--text-base);
  font-weight: 600;
}

#alerts > h2::before {
  --icon: var(--icon-bell);
}

#alerts > .cards {
  display: flex;
  gap: 10px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

#alerts > .cards > .card {
  flex: 0 0 min(318px, 86%);
  scroll-snap-align: start;
}

#alerts > .cards > .card:only-child {
  flex-basis: 100%;
}

#alerts .card {
  align-items: baseline;
  column-gap: var(--space-2);
  padding: 14px var(--space-4) 2px;
  background: var(--alert-bg);
  box-shadow: none;
}

#alerts .card > * {
  grid-column: 2;
}

#alerts .card > .dot {
  grid-column: 1;
  grid-row: 1;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--cat-alert);
  transform: translateY(-2px);
}

#alerts .card > .dot::before,
#alerts .card > .dot::after {
  content: none;
}

#alerts .card > h3 {
  grid-row: 1;
  margin: 0;
  font-size: 16px;
}

#alerts .card > p[lang="es"] {
  margin-top: 2px;
  font-size: var(--text-xs);
}

#alerts .card > .price {
  grid-row: auto;
  margin-top: 6px;
}

#alerts .card > .when {
  margin-top: var(--space-2);
  color: var(--ink);
  font-weight: 400;
}

#alerts .card > .when::before {
  background: var(--alert-ink);
}

#alerts .card > .summary {
  margin-top: var(--space-1);
  line-height: 1.55;
}

#alerts .card > .actions {
  grid-column: 1 / -1;
  margin-top: 6px;
  border-top: 0;
}

/* 已筛选提示行：在筛选按钮下面，面板收起时也看得到 */

#filters > .active-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-1) var(--space-1) var(--space-1) 14px;
  border-radius: var(--radius-bar);
  background: var(--booking-bg);
  color: var(--sun-ink-strong);
}

.active-filters::before {
  --icon: var(--icon-funnel);
}

.active-filters .summary {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.active-filters .text-button {
  flex: none;
  height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--sun-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--sun-ink);
  font-size: var(--text-md);
}

/* 时间三栏：手机上分段切换、只显示一栏；宽屏并排三栏，不显示分段按钮 */

#columns [role="tablist"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-bar);
  background: var(--surface-3);
}

#columns [role="tab"] {
  height: var(--tap);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font-size: var(--text-base);
}

#columns [role="tab"][aria-selected="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-tab);
  color: var(--ink);
  font-weight: 600;
}

#columns .column {
  margin-top: var(--space-3);
}

.column > .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px var(--space-5);
  border: 1.5px dashed var(--empty-line);
  border-radius: var(--radius-card);
  text-align: center;
  font-size: var(--text-base);
}

.column > .empty::before {
  --icon: var(--icon-calendar);
  width: 32px;
  height: 32px;
  background: var(--line-dashed);
}

@media (max-width: 899.98px) {
  #columns[data-tab="today"] .column:not([data-column="today"]),
  #columns[data-tab="weekend"] .column:not([data-column="weekend"]),
  #columns[data-tab="twoWeeks"] .column:not([data-column="twoWeeks"]) {
    display: none;
  }

  /* 分段按钮已经写了栏名，标题只留给读屏 */
  #columns .column > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* 面板：本周免费开放的三块、截止与限时、节日时间轴、筛选 */

.always-free,
.reduced,
.week,
#deadlines > ul,
#timeline > ol,
.filter-panel {
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* 本周免费开放 */

#free-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  align-items: start;
}

#app > #free-week > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
}

#free-week > h2::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px var(--sun-ring);
}

#free-week h3 {
  font-size: var(--text-base);
  font-weight: 600;
}

.always-free,
.reduced {
  padding: var(--space-4);
}

.always-free > h3,
.reduced > h3 {
  margin-bottom: var(--space-1);
}

.always-free li,
.reduced li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  column-gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.always-free li:last-child,
.reduced li:last-child {
  border-bottom: 0;
}

.always-free li > :first-child,
.reduced li > :first-child {
  font-size: var(--text-base);
  font-weight: 600;
}

.always-free li > [lang="es"],
.always-free li > .note {
  grid-column: 1 / -1;
}

/* 列表里的链接文字只有一行高：用链接的透明伪元素铺满整行（青年卡铺满整张卡），点整行都打开它，
   可点区域不小于 44px，也不会盖到上一行的链接（负外边距在桌面分栏里会撑开行距） */
.always-free li,
.reduced li,
.slot,
.youth-card {
  position: relative;
}

.always-free li > a::after,
.reduced li > a::after,
.slot > a::after,
.youth-card > .name > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

#free-week [lang="es"],
#free-week .verified,
#free-week .was,
.slot .note {
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.always-free .note,
.reduced .note {
  color: var(--free-ink);
  font-size: var(--text-xs);
}

.always-free li > .verified {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}

.reduced li > [lang="es"],
.reduced li > .note {
  grid-column: 1;
}

.reduced .price-for-you {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--sun-ink);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reduced .was {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.reduced li > .verified {
  grid-column: 2;
  justify-self: end;
  white-space: nowrap;
}

.week {
  padding: var(--space-4) var(--space-4) 6px;
}

.week > .verified {
  margin-top: 2px;
}

.week li.day {
  padding: var(--space-3) 0 var(--space-1);
  border-bottom: 1px solid var(--line);
}

.week li.day:last-child {
  border-bottom: 0;
}

.week h4 {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.week li.day:first-child h4 {
  color: var(--sun-ink);
}

.week li.day > .empty {
  margin-top: var(--space-1);
}

.slot {
  display: grid;
  grid-template-columns: 100px minmax(0, max-content) auto 1fr;
  align-items: center;
  align-content: center;
  column-gap: var(--space-2);
  min-height: var(--tap);
  padding: 6px 0;
}

.slot > * {
  grid-column: 2;
  grid-row: 1;
}

.slot > .time {
  grid-column: 1;
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.slot > .badge-booking {
  grid-column: 3;
  justify-self: start;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: 11px;
}

.slot > .note {
  grid-column: 2 / -1;
  grid-row: 2;
}

.youth-cards > h3 {
  margin: var(--space-1) 0 10px;
}

.youth-cards > ul {
  display: grid;
  gap: 10px;
}

.youth-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px var(--space-4);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  background: var(--surface-soft);
}

.youth-card > .name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
}

.youth-card > .name > :first-child {
  font-size: 16px;
  font-weight: 600;
}

/* 青年卡的价格写法各不相同（免费办理、10 欧 30 天），统一用暖色标签 */
.youth-card > .price {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: var(--booking-bg);
  color: var(--booking-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.youth-card .benefits {
  padding-left: 18px;
  font-size: var(--text-md);
  line-height: 1.6;
  list-style: disc;
}

.youth-card .how-to {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

/* 截止与限时 */

#deadlines > ul {
  padding: var(--space-1) var(--space-4);
}

#deadlines li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: var(--space-3) 0 var(--space-1);
  border-bottom: 1px solid var(--line);
}

#deadlines li:last-child {
  border-bottom: 0;
}

#deadlines li > * {
  grid-column: 1 / -1;
  grid-row: 2;
}

#deadlines .kind {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--kind-bg);
  color: var(--kind-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.kind-opens { --kind-bg: var(--cat-outdoor-tint); --kind-ink: var(--cat-outdoor); }
.kind-free_period { --kind-bg: var(--cat-deal-tint); --kind-ink: var(--cat-deal); }
.kind-deadline { --kind-bg: var(--cat-alert-tint); --kind-ink: var(--cat-alert); }
.kind-closure { --kind-bg: var(--paid-bg); --kind-ink: var(--paid-ink); }

#deadlines .date {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--ink-2);
  font-size: var(--text-sm);
  text-align: right;
}

#deadlines li > :is(a, .text-button, span:not(.kind, .date)) {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-base);
  font-weight: 600;
}

/* 节日时间轴 */

#timeline > ol {
  padding: var(--space-2) var(--space-4) var(--space-2) 14px;
}

#timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, max-content) auto 1fr;
  align-items: center;
  padding: 10px 0;
}

#timeline li > * {
  grid-column: 2;
  grid-row: 2;
}

/* 圆点：已确认实心，待确认空心；圆点之间连一条竖线 */
#timeline li::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 8px;
  height: 8px;
  border: 2px solid var(--line-dashed);
  border-radius: 50%;
  background: var(--surface);
}

#timeline li.confirmed::before {
  width: 12px;
  height: 12px;
  border: 0;
  background: var(--sun);
  box-shadow: 0 0 0 4px var(--sun-ring);
}

#timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -14px;
  left: 16px;
  width: 2px;
  background: var(--surface-3);
}

#timeline .date {
  grid-column: 2 / -1;
  grid-row: 1;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

#timeline li.confirmed .date {
  color: var(--sun-ink);
}

#timeline li > :is(a, .text-button, .name) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--text-base);
  font-weight: 600;
}

#timeline .note {
  grid-column: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px dashed var(--line-dashed);
  border-radius: 11px;
  color: var(--ink-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}

#timeline [lang="es"] {
  grid-column: 2 / -1;
  grid-row: 3;
  color: var(--ink-2);
  font-size: var(--text-xs);
}

/* 筛选：在时间栏正上方，平时收成一条按钮，点开是整块面板 */

#filters {
  display: grid;
  gap: var(--space-2);
  margin-bottom: calc(var(--space-3) - var(--space-6));
}

#app > #filters > h2 {
  margin: 0;
  font-size: inherit;
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-bar);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.filter-toggle::before {
  --icon: var(--icon-funnel);
}

.filter-toggle::after {
  --icon: var(--image-chevron);
  margin-left: auto;
}

.filter-toggle[aria-expanded="true"] {
  border-color: var(--sun-line);
  color: var(--sun-ink);
}

.filter-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.filter-panel .flags,
.filter-panel fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-panel legend {
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 演唱会开关和「显示已隐藏」是开关行：文字在左，复选框在右 */
.filter-panel > .flags:not(:first-child) {
  flex-direction: column;
  gap: 0;
}

.filter-panel > .flags:not(:first-child, .hidden-items) {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.filter-panel > .hidden-items {
  margin-top: calc(-1 * var(--space-4));
}

.filter-panel > .flags:not(:first-child) .check {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  font-size: var(--text-md);
  cursor: pointer;
}

.filter-panel > .flags:not(:first-child) .check::before {
  content: none;
}

.filter-panel > .flags:not(:first-child) input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sun-ink);
}

.filter-panel > .hidden-items .check {
  color: var(--ink-2);
}

.filter-panel > .hidden-items .check:has(:checked) {
  color: var(--ink);
  font-weight: 600;
}

/* 页脚 */

footer#about {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line-card);
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.75;
}

footer#about h2 {
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
}

footer#about a {
  color: var(--sun-ink);
}

/* 详情弹层：手机上是从底部升起的面板，宽屏居中。dialog 本身不留内边距，点到背景时 target 才是 dialog */

dialog#detail {
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto 0 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  box-shadow: 0 -8px 32px rgb(43 35 28 / 18%);
  color: var(--ink);
}

dialog#detail[open] {
  animation: sheet-in 0.22s ease-out;
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

dialog#detail::backdrop {
  background: rgb(43 35 28 / 42%);
}

body:has(dialog[open]) {
  overflow: hidden;
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: var(--space-5) 20px 20px;
}

.detail > h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.35;
}

.detail > p[lang="es"] {
  margin-top: -14px;
  color: var(--ink-2);
  font-size: var(--text-md);
}

.detail > .summary {
  margin-top: -10px;
  line-height: 1.65;
}

.detail a {
  color: var(--sun-ink);
}

.facts {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  margin: 0;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: var(--text-md);
}

.facts dt,
.facts dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--surface-3);
}

.facts dt {
  color: var(--ink-2);
}

.facts dt:last-of-type,
.facts dd:last-of-type {
  border-bottom: 0;
}

.facts dd:first-of-type {
  font-weight: 600;
}

.facts .original {
  color: var(--ink-2);
  font-size: var(--text-xs);
}

.facts a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  margin-block: -11px;
  font-weight: 600;
}

.facts a::after {
  --icon: var(--icon-external);
  width: 14px;
  height: 14px;
}

.detail h3 {
  font-size: var(--text-base);
  font-weight: 600;
}

.detail h3 + ul {
  margin-top: -10px;
}

.tips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-md);
  line-height: 1.6;
}

.tips li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: var(--space-2);
}

.tips li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--sun);
}

.detail .official a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border-radius: 24px;
  background: var(--sun-soft);
  color: var(--sun-ink-strong);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}

.detail .official a::after {
  --icon: var(--icon-external);
  width: 15px;
  height: 15px;
}

.detail h3:has(+ .sources) {
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.sources {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  font-size: var(--text-sm);
}

.sources a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.detail > .verified {
  margin-top: -14px;
  color: var(--ink-2);
  font-size: var(--text-xs);
}

/* 「关闭」贴在面板底部，滚动时一直看得到 */
.detail > [data-action="close"] {
  position: sticky;
  bottom: 20px;
  height: 48px;
  margin-top: var(--space-1);
  border: 0;
  border-radius: 24px;
  background: var(--ink);
  box-shadow: 0 0 0 12px var(--surface), 0 20px 0 12px var(--surface);
  color: var(--surface);
  font-size: var(--text-base);
  font-weight: 600;
}

@media (min-width: 640px) {
  dialog#detail {
    width: min(640px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    margin: auto;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgb(43 35 28 / 22%);
  }
}

/* 宽屏 */

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
  }

  #app {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: 40px;
    padding: var(--space-6) var(--gutter) 56px;
  }

  #app > * {
    grid-column: 1 / -1;
  }

  #app > #deadlines {
    grid-column: 1;
  }

  #app > #timeline {
    grid-column: 2;
  }

  #app > section > h2 {
    font-size: var(--text-2xl);
  }

  header.top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: var(--space-1);
  }

  header.top h1 {
    grid-column: 1 / 3;
    gap: var(--space-3);
    font-size: 28px;
    line-height: 1.25;
  }

  header.top h1::before {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 5px var(--sun-ring);
  }

  header.top .today {
    grid-column: 1;
    grid-row: 2;
    margin-left: 33px;
  }

  header.top .updated {
    grid-column: 2;
    grid-row: 2;
    margin-left: 0;
    font-size: var(--text-md);
  }

  .profile {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .banner-stale {
    margin-top: -16px;
  }

  /* 长期展览与活动：三栏按高度往下排，卡片不拆开 */
  #long > .cards {
    display: block;
    columns: 3;
    column-gap: var(--space-5);
  }

  #long > .cards > .card {
    margin-bottom: var(--space-3);
    break-inside: avoid;
  }

  #alerts > .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  #app > #alerts > h2 {
    margin-bottom: var(--space-3);
  }

  #columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
  }

  /* 宽屏：筛选按钮和「已筛选」并排，面板在下面占满一行 */
  #filters {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
  }

  #filters > .filter-panel {
    grid-column: 1 / -1;
  }

  .filter-toggle {
    width: auto;
    min-width: 160px;
  }

  #columns [role="tablist"] {
    display: none;
  }

  #columns .column {
    margin-top: 0;
  }

  #columns .column > h2 {
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
  }

  /* 分两栏按内容高度自动排：各块按顺序往下流，长列表可以在两条之间断到下一栏，两栏高度差不多 */
  #free-week {
    display: block;
    columns: 2;
    column-gap: var(--space-5);
  }

  #free-week > * {
    margin-bottom: var(--space-5);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  #app > #free-week > h2,
  #free-week > .empty {
    column-span: all;
    margin-bottom: var(--space-4);
  }

  #free-week h3,
  #free-week .week > .verified {
    break-after: avoid;
  }

  #free-week li,
  #free-week > :not(:has(li:nth-child(6))) {
    break-inside: avoid;
  }

  .always-free,
  .reduced,
  .week {
    padding-inline: 20px;
  }

  .youth-cards > ul {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--space-3);
  }

  .week li.day {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-4);
    padding: 6px 0;
  }

  .week h4 {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    font-size: var(--text-md);
  }

  .week li.day > .empty {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    margin-top: 0;
  }

  .slot {
    grid-template-columns: 104px minmax(0, max-content) auto 1fr;
    padding: 0;
  }

  #deadlines > ul {
    padding: 6px 20px;
  }

  #deadlines li {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    padding: 6px 0;
  }

  #deadlines li > * {
    grid-column: 2;
    grid-row: 1;
  }

  #deadlines .kind {
    justify-self: start;
  }

  #deadlines .date {
    grid-column: 3;
  }

  #timeline > ol {
    padding: 10px 20px 10px 18px;
  }

  footer#about {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    padding-top: var(--space-5);
  }

  footer#about h2 {
    grid-column: 1 / -1;
  }

  /* 宽屏面板太宽，开关行改成复选框在前、紧挨着文字 */
  .filter-panel > .flags:not(:first-child) .check {
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* 关掉动效 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}