/* Two color palettes share layout, media frames and interaction states. */
.appearance {
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px 52px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.appearance-label { font-size: 11px; color: var(--ink); white-space: nowrap; }
.theme-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  max-width: 100%;
}
.theme-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.theme-switch button[aria-pressed=true] { background: var(--selection-bg); color: var(--selection-ink); }
.theme-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
  opacity: .8;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
/* Keep keyboard focus inside the calendar's clipped border. */
.day:focus-visible { outline-offset: -4px; z-index: 1; }

/* Simple retains the established mint/peach appearance. Pastel changes color only. */
:root:is([data-theme=simple], [data-theme=pastel]) {
  --paper: #fff;
  --white: #fff;
  --ink: #343a42;
  --green: #39786f;
  --muted: #626974;
  --line: #e1e5e8;
  --sage: #e5f4ed;
  --orange: #ad5471;
  --yellow: #fff1b9;
  --serif: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --surface: #f2f6fa;
  --control-line: #82979a;
  --brand-bg: #d8eee4;
  --brand-ink: #315e55;
  --hero-start: #e5f4ed;
  --hero-middle: #f5f8e8;
  --hero-end: #fff0df;
  --hero-ink: #45776d;
  --hero-line: #c8dbd2;
  --selection-bg: #39786f;
  --selection-ink: #fff;
  --selected-chip-bg: #ffffff17;
  --selected-chip-line: #dce6df;
  --chip-ink: #475149;
  --chip-line: #929d94;
  --view-surface: #e9ece7;
  --blank-surface: #f6f7fa;
  --tag-bg: #e7f3ed;
  --tag-ink: #3a6156;
  --tag-art-bg: #f5e8ee;
  --tag-art-ink: #86526b;
  --tag-family-bg: #fff0c9;
  --tag-family-ink: #796029;
  --tag-learning-bg: #e8effb;
  --tag-learning-ink: #536b90;
}
/* White, blush pink and light blue form a clearly separate second palette. */
:root[data-theme=pastel] {
  --ink: #344259;
  --green: #3f678d;
  --muted: #5c6676;
  --line: #e5e5ef;
  --sage: #e5f1fc;
  --orange: #984766;
  --yellow: #fce7f0;
  --surface: #f1f7fd;
  --control-line: #8292a8;
  --brand-bg: #f9dfeb;
  --brand-ink: #87405e;
  --hero-start: #fce2ed;
  --hero-middle: #f6f0fb;
  --hero-end: #dceeff;
  --hero-ink: #984766;
  --hero-line: #d8c9df;
  --selection-bg: #dceeff;
  --selection-ink: #315474;
  --selected-chip-bg: #f6faff;
  --selected-chip-line: #7598bb;
  --chip-ink: #49617c;
  --chip-line: #95aac2;
  --view-surface: #f8eaf1;
  --blank-surface: #faf7fc;
  --tag-bg: #e5f1fc;
  --tag-ink: #416484;
  --tag-art-bg: #fce7f0;
  --tag-art-ink: #874563;
  --tag-family-bg: #fce7f0;
  --tag-family-ink: #874563;
  --tag-learning-bg: #e5f1fc;
  --tag-learning-ink: #416484;
}
:is([data-theme=simple], [data-theme=pastel]) .site-header { border-bottom: 1px solid var(--line); background: #fff; }
:is([data-theme=simple], [data-theme=pastel]) .brand { font-weight: 700; letter-spacing: .025em; }
:is([data-theme=simple], [data-theme=pastel]) .brand-mark { border-radius: 14px; box-shadow: none; background: var(--brand-bg); color: var(--brand-ink); }
:is([data-theme=simple], [data-theme=pastel]) .range-pill { background: transparent; color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .appearance-label { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .theme-switch { border-radius: 12px; box-shadow: none; }
:is([data-theme=simple], [data-theme=pastel]) .theme-switch button { border-radius: 8px; }
:is([data-theme=simple], [data-theme=pastel]) .theme-switch button:not([aria-pressed=true]):hover { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .intro { margin: 22px 0 28px; padding: 32px; border-radius: 24px; background: linear-gradient(115deg, var(--hero-start) 0%, var(--hero-middle) 52%, var(--hero-end) 100%); }
:is([data-theme=simple], [data-theme=pastel]) h1 { font-size: 42px; font-weight: 700; letter-spacing: -.025em; line-height: 1.5; }
:is([data-theme=simple], [data-theme=pastel]) h1 span { color: var(--hero-ink); }
:is([data-theme=simple], [data-theme=pastel]) .intro .eyebrow { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .intro-copy { color: var(--muted); font-size: 13px; margin-top: 13px; }
:is([data-theme=simple], [data-theme=pastel]) .intro-note { border-color: var(--hero-line); }
:is([data-theme=simple], [data-theme=pastel]) .tiny-label { color: var(--muted); }

/* Shared navigation and focus behavior; selection colors follow the palette. */
:is([data-theme=simple], [data-theme=pastel]) .experience-tabs {
  max-width: none;
  gap: 28px;
  padding: 0;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
:is([data-theme=simple], [data-theme=pastel]) .experience-tabs [role=tab] {
  flex: 0 1 auto;
  min-width: 175px;
  padding: 15px 4px;
  border-radius: 0;
  color: var(--muted);
  font-weight: 600;
}
:is([data-theme=simple], [data-theme=pastel]) .experience-tabs [role=tab]:hover { color: var(--ink); }
:is([data-theme=simple], [data-theme=pastel]) .experience-tabs [aria-selected=true] {
  background: transparent;
  color: var(--green);
  box-shadow: inset 0 -3px 0 var(--green);
}
:is([data-theme=simple], [data-theme=pastel]) .discovery-heading h2 { font-weight: 650; letter-spacing: -.025em; }
:is([data-theme=simple], [data-theme=pastel]) .discovery-jst { background: transparent; color: var(--muted); border-radius: 0; padding: 8px 0; }
:is([data-theme=simple], [data-theme=pastel]) .discovery-dates button,
:is([data-theme=simple], [data-theme=pastel]) .discovery-dates input,
:is([data-theme=simple], [data-theme=pastel]) .export-date-label select {
  background: var(--white);
  border-color: var(--control-line);
  border-radius: 8px;
  color: var(--ink);
}
:is([data-theme=simple], [data-theme=pastel]) .discovery-dates button:not([aria-pressed=true]):hover { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .discovery-dates button[aria-pressed=true] { background: var(--selection-bg); border-color: var(--green); color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .discovery-dates label { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .discovery-results-heading { margin-top: 30px; }
:is([data-theme=simple], [data-theme=pastel]) .discovery-results-heading h3 { font-weight: 650; }
:is([data-theme=simple], [data-theme=pastel]) .discovery-notice {
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
  margin-bottom: 24px;
}
:is([data-theme=simple], [data-theme=pastel]) .discovery-booking { background: var(--surface); color: var(--muted); border-radius: 6px; }
:is([data-theme=simple], [data-theme=pastel]) .discovery-footnote, :is([data-theme=simple], [data-theme=pastel]) .discovery-checked { color: var(--muted); }

/* Months, filters and view controls have a single consistent selection language. */
:is([data-theme=simple], [data-theme=pastel]) .months {
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
:is([data-theme=simple], [data-theme=pastel]) .month-button {
  margin: 0;
  padding: 14px 10px;
  min-height: 70px;
  background: transparent;
  border-radius: 8px;
}
:is([data-theme=simple], [data-theme=pastel]) .month-button:not(:last-child)::after { display: none; }
:is([data-theme=simple], [data-theme=pastel]) .month-button:not([aria-pressed=true]):hover { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .month-button[aria-pressed=true] { background: var(--selection-bg); color: var(--selection-ink); box-shadow: none; }
:is([data-theme=simple], [data-theme=pastel]) .month-button[aria-pressed=true] .year,
:is([data-theme=simple], [data-theme=pastel]) .month-button[aria-pressed=true] .month-count { color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .toolbar { gap: 12px; }
:is([data-theme=simple], [data-theme=pastel]) .toolbar input, :is([data-theme=simple], [data-theme=pastel]) .toolbar select {
  height: 46px;
  border-color: var(--control-line);
  border-radius: 8px;
  background: var(--white);
}
:is([data-theme=simple], [data-theme=pastel]) .toolbar input::placeholder,
:is([data-theme=simple], [data-theme=pastel]) .search-icon { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .reset { min-height: 44px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
:is([data-theme=simple], [data-theme=pastel]) .reset:hover { color: var(--green); }
:is([data-theme=simple], [data-theme=pastel]) .view-switch { background: var(--view-surface); border-radius: 10px; padding: 4px; }
:is([data-theme=simple], [data-theme=pastel]) .view-switch button { min-height: 44px; border-radius: 7px; color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .view-switch button[aria-pressed=true] { background: var(--white); color: var(--green); box-shadow: 0 1px 3px #252b2710; }
:is([data-theme=simple], [data-theme=pastel]) .date-reset { min-height: 44px; border-color: var(--control-line); border-radius: 8px; background: var(--white); }

/* Calendar ink and surface hierarchy replace decorative category colors. */
:is([data-theme=simple], [data-theme=pastel]) .calendar { border-radius: 12px; }
:is([data-theme=simple], [data-theme=pastel]) .week { background: transparent; color: var(--muted); font-size: 12px; }
:is([data-theme=simple], [data-theme=pastel]) .week span:last-child { color: var(--orange); }
:is([data-theme=simple], [data-theme=pastel]) .day:hover { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .day.blank { background: var(--blank-surface); }
:is([data-theme=simple], [data-theme=pastel]) .day.past:not(.selected) .day-number { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .day.sunday:not(.selected) .day-number { color: var(--orange); }
:is([data-theme=simple], [data-theme=pastel]) .day.sunday.past:not(.selected) .day-number { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .day.today:not(.selected) .day-number { color: var(--green); background: transparent; box-shadow: inset 0 0 0 1.5px var(--green); }
:is([data-theme=simple], [data-theme=pastel]) .day.selected, :is([data-theme=simple], [data-theme=pastel]) .day.selected:hover { background: var(--selection-bg); color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day.selected:focus-visible { outline-color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day-chip { background: var(--surface); border-color: var(--chip-line); color: var(--chip-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day.selected .day-chip { background: var(--selected-chip-bg); border-color: var(--selected-chip-line); color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day.selected .day-more, :is([data-theme=simple], [data-theme=pastel]) .day.selected .day-total { color: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day-total:before, :is([data-theme=simple], [data-theme=pastel]) .legend-dot { background: var(--green); }
:is([data-theme=simple], [data-theme=pastel]) .day.selected .day-total:before { background: var(--selection-ink); }
:is([data-theme=simple], [data-theme=pastel]) .day-heading { padding: 0 0 17px; border-bottom: 1px solid var(--line); }

/* Cards leave room for the event itself; every category shares the same frame. */
:is([data-theme=simple], [data-theme=pastel]) .event-card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px #252b2705; }
:is([data-theme=simple], [data-theme=pastel]) .event-card:focus-within { border-color: var(--green); }
:is([data-theme=simple], [data-theme=pastel]) .mini-card { padding: 0 0 18px; margin-bottom: 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }
:is([data-theme=simple], [data-theme=pastel]) .tag { padding: 4px 8px; background: var(--tag-bg); color: var(--tag-ink); font-weight: 500; letter-spacing: .025em; border-radius: 999px; }
:is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="音楽・舞台"], :is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="展示・美術"] { background: var(--tag-art-bg); color: var(--tag-art-ink); }
:is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="まつり・買い物・家族"], :is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="大学祭"] { background: var(--tag-family-bg); color: var(--tag-family-ink); }
:is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="講座・学び"], :is([data-theme=simple], [data-theme=pastel]) .tag[data-event-category="スポーツ・健康"] { background: var(--tag-learning-bg); color: var(--tag-learning-ink); }
:is([data-theme=simple], [data-theme=pastel]) .tag::before { display: none; }
:is([data-theme=simple], [data-theme=pastel]) .status.today-status { color: var(--green); font-weight: 600; }
:is([data-theme=simple], [data-theme=pastel]) .card-body { padding: 20px; }
:is([data-theme=simple], [data-theme=pastel]) .card-body h3 { font-weight: 650; line-height: 1.65; }
:is([data-theme=simple], [data-theme=pastel]) .card-bottom { border-color: var(--line); }
:is([data-theme=simple], [data-theme=pastel]) .meta, :is([data-theme=simple], [data-theme=pastel]) .meta-symbol,
:is([data-theme=simple], [data-theme=pastel]) .mini-credit, :is([data-theme=simple], [data-theme=pastel]) .image-role-text,
:is([data-theme=simple], [data-theme=pastel]) footer { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .mini-image, :is([data-theme=simple], [data-theme=pastel]) .card-media,
:is([data-theme=simple], [data-theme=pastel]) .detail-image, :is([data-theme=simple], [data-theme=pastel]) .image-slot,
:is([data-theme=simple], [data-theme=pastel]) .detail-image .image-slot { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .card-media .date-badge { background: #fffffff5; color: var(--ink); border-radius: 6px; font-weight: 650; box-shadow: 0 1px 5px #252b270d; }
:is([data-theme=simple], [data-theme=pastel]) .photo-label { background: #fffffff2; color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .period-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
:is([data-theme=simple], [data-theme=pastel]) .list-row { border-left: 0; }
:is([data-theme=simple], [data-theme=pastel]) .empty { background: var(--surface); border-color: #aeb7ad; color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .announcement { background: var(--surface); border-color: var(--green); color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .load-more { background: var(--white); border-color: var(--control-line); border-radius: 8px; }
:is([data-theme=simple], [data-theme=pastel]) .load-more:hover { background: var(--surface); }

/* Pastel pairs blush date controls with blue month/date selections. */
[data-theme=pastel] .theme-switch button[aria-pressed=true],
[data-theme=pastel] .discovery-dates button[aria-pressed=true] {
  background: #f9dfeb;
  color: #87405e;
  border-color: #984766;
}
[data-theme=pastel] .experience-tabs [aria-selected=true] { box-shadow: inset 0 -3px 0 #984766; }
[data-theme=pastel] .event-card { border-color: #e2e7f2; box-shadow: 0 3px 12px #576f9809; }
[data-theme=pastel] .card-bottom { border-color: #f1dce7; }
[data-theme=pastel] .day.selected { box-shadow: inset 0 0 0 2px #3f678d; }
[data-theme=pastel] .day.selected .day-number { background: #f9dfeb; color: #87405e; }
[data-theme=pastel] .source-button { background: var(--green); }
/* The swatches preview each option independently of the current theme. */
.theme-switch [data-theme-choice=simple] .theme-swatch { background: linear-gradient(135deg, #b9decc 50%, #f8d9b9 50%); }
.theme-switch [data-theme-choice=pastel] .theme-swatch { background: linear-gradient(135deg, #f3bfd5 50%, #badbf7 50%); }
.theme-switch .theme-swatch { opacity: 1; box-shadow: 0 0 0 1px #0002; }

/* Secondary information and event details remain visually secondary. */
:is([data-theme=simple], [data-theme=pastel]) .research-heading { background: transparent; padding: 0; border-radius: 0; }
:is([data-theme=simple], [data-theme=pastel]) .checked-stamp { background: transparent; color: var(--muted); border-color: var(--line); }
:is([data-theme=simple], [data-theme=pastel]) .audit-pass>span { color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .detail-note, :is([data-theme=simple], [data-theme=pastel]) .detail-pdfs,
:is([data-theme=simple], [data-theme=pastel]) .evidence-badge, :is([data-theme=simple], [data-theme=pastel]) .selected-date-note { background: var(--surface); color: var(--muted); }
:is([data-theme=simple], [data-theme=pastel]) .planned-badge { color: var(--muted); }
html:is([data-theme=simple], [data-theme=pastel]) .pdf-preview { background: var(--surface); border-color: var(--line); }
:is([data-theme=simple], [data-theme=pastel]) .detail-actions { border-color: var(--line); }
:is([data-theme=simple], [data-theme=pastel]) .action-button { background: var(--white); border-color: var(--control-line); color: var(--green); border-radius: 8px; }
:is([data-theme=simple], [data-theme=pastel]) .action-button:hover { background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) .close-detail { min-height: 44px; min-width: 44px; background: var(--surface); }
:is([data-theme=simple], [data-theme=pastel]) dialog::backdrop { background: #1e282366; }
:is([data-theme=simple], [data-theme=pastel]) .source-button { border-radius: 8px; }
:is([data-theme=simple], [data-theme=pastel]) .identity-card { background: var(--surface); color: var(--ink); }
:is([data-theme=simple], [data-theme=pastel]) .identity-label, :is([data-theme=simple], [data-theme=pastel]) .identity-note { color: var(--muted); border-color: var(--line); }

@media (max-width: 1100px) {
  .appearance { padding-left: 30px; padding-right: 30px; }
  :is([data-theme=simple], [data-theme=pastel]) h1 { font-size: 36px; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button { padding: 12px 6px; }
}
@media (max-width: 850px) {
  .appearance { padding-left: 23px; padding-right: 23px; }
  :is([data-theme=simple], [data-theme=pastel]) .intro { padding: 27px 24px; }
  :is([data-theme=simple], [data-theme=pastel]) .toolbar { gap: 10px; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button { padding: 11px 4px; }
}
@media (max-width: 530px) {
  .appearance { padding: 12px 16px 0; justify-content: space-between; gap: 8px; }
  .appearance-label { font-size: 10px; }
  .theme-switch { gap: 2px; padding: 3px; }
  .theme-switch button { padding: 8px 10px; font-size: 11px; }
  .theme-swatch { width: 7px; height: 7px; margin-right: 4px; }
  :is([data-theme=simple], [data-theme=pastel]) .intro { padding: 25px 20px; margin-top: 18px; border-radius: 20px; }
  :is([data-theme=simple], [data-theme=pastel]) .intro h1 { font-size: 31px; letter-spacing: -.025em; }
  :is([data-theme=simple], [data-theme=pastel]) .intro-copy { font-size: 12px; }
  :is([data-theme=simple], [data-theme=pastel]) .experience-tabs { gap: 20px; margin-bottom: 24px; }
  :is([data-theme=simple], [data-theme=pastel]) .experience-tabs [role=tab] { flex: 1; min-width: 0; padding: 14px 0; font-size: 14px; }
  :is([data-theme=simple], [data-theme=pastel]) .months { gap: 3px; padding: 4px; scrollbar-color: #aeb7ad transparent; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button { padding: 11px 3px; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button .year { font-size: 11px; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button .month-count { font-size: 12px; }
  :is([data-theme=simple], [data-theme=pastel]) .card-body { padding: 18px; }
  :is([data-theme=simple], [data-theme=pastel]) .view-switch button { min-height: 44px; }
  :is([data-theme=simple], [data-theme=pastel]) .date-reset, :is([data-theme=simple], [data-theme=pastel]) .toolbar .reset { min-height: 44px; }
}
@media (max-width: 350px) {
  .appearance { flex-wrap: wrap; justify-content: flex-end; }
  .appearance-label { margin-right: auto; }
  :is([data-theme=simple], [data-theme=pastel]) .intro h1 { font-size: 28px; }
}
@media (forced-colors: active) {
  .theme-switch button[aria-pressed=true] { outline: 2px solid ButtonText; outline-offset: -4px; }
  .day.selected { outline: 2px solid ButtonText; outline-offset: -3px; }
  :is([data-theme=simple], [data-theme=pastel]) .experience-tabs [aria-selected=true] { border-bottom: 3px solid ButtonText; }
  :is([data-theme=simple], [data-theme=pastel]) .month-button[aria-pressed=true],
  :is([data-theme=simple], [data-theme=pastel]) .discovery-dates button[aria-pressed=true],
  :is([data-theme=simple], [data-theme=pastel]) .view-switch button[aria-pressed=true] { outline: 2px solid ButtonText; outline-offset: -4px; }
}

/* A visible sorting choice preserves date groups and never hides text-only events. */
.discovery-sort { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 18px; color:var(--muted); font-size:12px; }
.discovery-sort select { min-height:44px; padding:8px 30px 8px 12px; border:1px solid var(--control-line, #7b8980); border-radius:8px; background:var(--white); color:var(--ink); font:inherit; }
.discovery-sort small { font-size:11px; }