:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #253e36;
  background: #f5f4ee;
  line-height: 1.8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header, main, footer { width: min(100%, 1040px); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
header { padding-block: clamp(1.5rem, 3vw, 2rem) 1.5rem; }
h1 { margin: .35rem 0 1rem; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 600; line-height: 1.35; letter-spacing: .025em; }
h2 { margin: 0; font-size: 1rem; font-weight: 600; }
p { margin: .5rem 0; }
.intro { color: #506159; }
.muted, footer { color: #5c6861; font-size: .875rem; }

fieldset { margin: 0; min-width: 0; padding: 1.25rem; border: 1px solid #c8d0c7; border-radius: .25rem; background: #fbfbf7; }
legend { padding-inline: .5rem; font-size: .875rem; font-weight: 600; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
label { display: flex; min-width: 0; flex-direction: column; gap: .4rem; font-size: .875rem; font-weight: 600; }
select, button { font: inherit; color: inherit; border: 1px solid #84958a; border-radius: .25rem; background: #fff; min-height: 48px; }
select { line-height: 1.4; width: 100%; min-width: 0; padding: .65rem .5rem; font-size: 1rem; }
button { padding: .5rem .9rem; font-size: .875rem; cursor: pointer; }
button:hover { background: #edf1e9; border-color: #253e36; }
.filter-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.more-filters { flex: 1; min-width: 0; }
summary { width: fit-content; min-height: 48px; padding-block: .6rem; font-size: .875rem; cursor: pointer; text-underline-offset: .2em; }
summary:hover { text-decoration: underline; }
.secondary-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-block: .5rem; }
.filter-note { margin-bottom: 0; }

:focus-visible { outline: 3px solid #a54e15; outline-offset: 4px; }
a { color: #215d4b; text-underline-offset: .22em; }
a:hover { color: #123d30; }
.skip { position: absolute; top: -100px; left: 1rem; z-index: 1; padding: .75rem 1rem; background: #fff; border-radius: .25rem; }
.skip:focus { top: .5rem; }

#results { margin-top: 2.25rem; scroll-margin-top: 1rem; }
.results-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
#summary { margin: 0; font-size: 1rem; font-weight: 600; }
.eligibility-path { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; max-width: 56rem; margin-top: 1rem; padding: .75rem 1rem; border-left: 3px solid #718176; background: #eeefe8; }
.eligibility-state { margin: 0; font-size: .875rem; font-weight: 600; }
.eligibility-path button { max-width: 100%; border-color: #64776a; background: #fbfbf7; }
.uncertainty-note { margin-block: .75rem 1.25rem; max-width: 46rem; color: #5c6861; font-size: .875rem; }
#cards { display: grid; gap: 1rem; }
article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .75rem 2rem; padding: 1.5rem; background: #fff; border: 1px solid #d3d9cf; border-radius: .25rem; overflow-wrap: anywhere; }
article h3 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.65; }
article ul { margin: 0; padding: 0; list-style: none; }
article li { padding-block: 1.25rem; border-top: 1px solid #dce1d7; }
article li:first-child { padding-top: 0; border-top: 0; }
article li:last-child { padding-bottom: 0; }
.occurrence-date { display: block; font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.occurrence-title { font-weight: 600; }
.occurrence-time { font-size: .875rem; font-weight: 400; color: #506159; }
.occurrence-context { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-block: .5rem .75rem; }
.occurrence-context p { margin: 0; font-weight: 600; }
.participation-detail { color: #506159; font-size: .875rem; }
.status { display: inline-block; vertical-align: middle; margin: .5rem .75rem .5rem 0; font-size: .875rem; color: #5c6861; }
.official-action { display: inline-block; vertical-align: middle; width: fit-content; max-width: 100%; min-height: 48px; margin-block: .5rem; padding: .6rem 1rem; border: 1px solid #253e36; border-radius: .25rem; background: #253e36; color: #fff; font-size: .9375rem; font-weight: 600; text-decoration: none; }
.official-action::after { content: " ↗"; }
.official-action:hover { background: #123d30; color: #fff; }
.supporting { font-size: .875rem; }
.supporting a, .program-source { display: inline-block; max-width: 100%; padding-block: .4rem; }
.more-occurrences { grid-column: 2; min-width: 0; }
.more-occurrences summary { width: fit-content; max-width: 100%; }
.more-occurrences[open] summary { margin-bottom: .75rem; }
.program-source { grid-column: 2; font-size: .875rem; }
.checked-at { margin-bottom: 0; }

footer { margin-top: 2rem; padding-block: 1.5rem 2rem; border-top: 1px solid #c8d0c7; }

@media (max-width: 720px) {
  article { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .program-source, .more-occurrences { grid-column: 1; }
}

@media (max-width: 720px) {
  header { padding-block: 1rem; }
  h1 { margin-bottom: .5rem; }
  fieldset, article { padding: 1rem; }
  .controls, .secondary-controls { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .controls > label { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; }
  .filter-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; margin-top: .5rem; }
  .more-filters { grid-column: 1 / -1; grid-row: 1; }
  .filter-actions > button { grid-column: 2; grid-row: 1; align-self: start; }
  summary { width: calc(100% - 9rem); }
  #results { margin-top: 1rem; }
  .eligibility-path { align-items: flex-start; }
  .uncertainty-note { margin-block: .5rem .75rem; }
  article { gap: .5rem; }
  article h3 { line-height: 1.5; }
  article p { margin-block: .375rem; }
  .occurrence-context p { margin: 0; }
}

@media (forced-colors: active) {
  .official-action { border: 1px solid LinkText; }
}