/* Scoped countdown refinement: native controls, compact filters and colourful time blocks. */
.dsf-countdown {
  --cd-mint: #E2F7EE;
  --cd-yellow: #FFF2C6;
  --cd-coral: #FFE2DB;
  --cd-lavender: #EEE7FF;
  --cd-soft: var(--cd-mint);
  background: var(--dsf-color-surface);
}
.dsf-countdown--school { --cd-soft: var(--cd-lavender); }
.dsf-countdown__hero { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--dsf-space-5) + 100px); background: var(--cd-soft); text-align: center; }
.dsf-countdown__hero > .dsf-container { position: relative; z-index: 1; }
.dsf-countdown__decor { position: absolute; z-index: 0; inset: var(--dsf-space-4); pointer-events: none; opacity: 0.9; }
.dsf-countdown__decor-defs { position: absolute; }
.dsf-countdown__ornament { position: absolute; inset-inline-start: var(--ornament-x); inset-block-start: var(--ornament-y); inline-size: var(--ornament-size); block-size: var(--ornament-size); overflow: visible; transform: translate(-50%, -50%) rotate(var(--ornament-turn)); }
.dsf-countdown__ornament--mint { color: color-mix(in srgb, var(--cd-mint) 88%, var(--dsf-color-primary)); }
.dsf-countdown__ornament--yellow { color: color-mix(in srgb, var(--cd-yellow) 88%, var(--dsf-color-primary)); }
.dsf-countdown__ornament--coral { color: color-mix(in srgb, var(--cd-coral) 88%, var(--dsf-color-primary)); }
.dsf-countdown__ornament--lavender { color: color-mix(in srgb, var(--cd-lavender) 88%, var(--dsf-color-primary)); }
.dsf-countdown__ornament--blue { color: color-mix(in srgb, var(--dsf-color-accent) 65%, var(--dsf-color-surface)); }
.dsf-countdown__heading { display: flex; align-items: center; justify-content: center; gap: var(--dsf-space-4); }
.dsf-countdown__icon { flex-shrink: 0; inline-size: 3rem; block-size: 3rem; padding: var(--dsf-space-2); border-radius: var(--dsf-radius-medium); background: var(--cd-yellow); color: var(--dsf-color-primary); animation: dsf-countdown-wave 600ms var(--dsf-ease) 1; }
.dsf-countdown--school .dsf-countdown__icon { background: var(--dsf-color-surface); color: var(--dsf-color-accent); }
.dsf-countdown__hero h1 { max-inline-size: 32ch; margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; line-height: 1.2; }
.dsf-countdown__hero p { margin-block-start: var(--dsf-space-2); color: var(--dsf-color-primary); }
.dsf-countdown__body { padding-block: var(--dsf-space-4) var(--dsf-space-6); }
.dsf-countdown__tool { max-inline-size: calc(var(--dsf-measure) + 400px); margin-inline: auto; border: 1px solid var(--dsf-color-border); border-radius: var(--dsf-radius-large); background: var(--dsf-color-surface); }

/* Shared 48px control geometry. The native select still owns focus and selection. */
.dsf-countdown__form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: var(--dsf-space-3) var(--dsf-space-4); padding: var(--dsf-space-5) var(--dsf-space-5) var(--dsf-space-4); border-radius: var(--dsf-radius-large) var(--dsf-radius-large) 0 0; background: color-mix(in srgb, var(--cd-soft) 35%, var(--dsf-color-surface)); }
.dsf-countdown__field { position: relative; min-inline-size: 0; grid-column: span 5; }
.dsf-countdown__field--year { grid-column: span 2; }
.dsf-countdown__period { grid-column: span 9; }
.dsf-countdown--school .dsf-countdown__field--state { grid-column: span 4; }
.dsf-countdown--school .dsf-countdown__period { grid-column: span 5; }
.dsf-countdown__field label { display: block; margin-block-end: var(--dsf-space-2); color: var(--dsf-color-primary); font-size: var(--dsf-text-small); font-weight: 700; line-height: 1.25rem; }
.dsf-countdown__field select {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: 48px;
  min-block-size: 48px;
  margin: 0;
  padding-block: 0;
  padding-inline: var(--dsf-space-4) calc(var(--dsf-space-4) + var(--dsf-space-5));
  border: 1px solid var(--dsf-color-control-border);
  border-radius: var(--dsf-radius-medium);
  background: var(--dsf-color-surface);
  color: var(--dsf-color-text);
  font-family: var(--dsf-font-body);
  font-size: var(--dsf-text-body);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dsf-duration-fast) var(--dsf-ease);
}
.dsf-countdown__field::after { content: ''; position: absolute; inset-block-start: calc(1.25rem + var(--dsf-space-2) + 24px); inset-inline-end: 18px; inline-size: 8px; block-size: 8px; border-inline-end: 2px solid var(--dsf-color-primary); border-block-end: 2px solid var(--dsf-color-primary); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.dsf-countdown__field select:hover { border-color: var(--dsf-color-accent); }
.dsf-countdown__field select:focus-visible { outline: 3px solid var(--dsf-color-accent); outline-offset: 2px; box-shadow: 0 0 0 2px var(--dsf-color-surface); }
.dsf-countdown__field select option { color: var(--dsf-color-text); background: var(--dsf-color-surface); }
.dsf-countdown__selection-caption { margin-block: var(--dsf-space-1) 0; color: var(--dsf-color-muted); font-size: 0.75rem; line-height: 1.5; overflow-wrap: anywhere; }
.dsf-countdown__selection-caption[data-cd-caption='state'],
.dsf-countdown__selection-caption[data-cd-caption='type'] { display: none; }
.dsf-countdown__field .dsf-countdown__selection-caption:empty { display: none; }
.dsf-countdown__form button { grid-column: span 3; align-self: start; justify-self: stretch; min-block-size: 48px; margin-block-start: calc(1.25rem + var(--dsf-space-2)); padding-inline: var(--dsf-space-4); font-weight: 700; transition: background-color var(--dsf-duration-fast) var(--dsf-ease), transform var(--dsf-duration-fast) var(--dsf-ease); }
.dsf-countdown__form button svg { flex-shrink: 0; }
.dsf-countdown__form button:not(:disabled):hover { background: var(--dsf-color-accent-hover); transform: translateY(-1px); }
.dsf-countdown__form button:focus-visible { outline: 3px solid var(--dsf-color-accent); outline-offset: 3px; box-shadow: 0 0 0 2px var(--dsf-color-surface); }
.dsf-countdown__form:not(:has(.dsf-countdown__period:not([hidden]))) button { grid-column: 1 / -1; justify-self: start; margin-block-start: 0; }
.dsf-countdown__feedback { margin: 0; padding-inline: var(--dsf-space-5); color: var(--dsf-color-primary); font-size: var(--dsf-text-small); }
.dsf-countdown__feedback:empty { display: none; }
.dsf-countdown__feedback:not(:empty) { padding-block: 0 var(--dsf-space-3); }
.dsf-countdown__feedback[role='alert'] { color: var(--dsf-color-error); }

/* Four legible time blocks are the visual centrepiece. */
.dsf-countdown__result { padding: var(--dsf-space-5); border-block-start: 1px solid var(--dsf-color-border); border-radius: 0 0 var(--dsf-radius-large) var(--dsf-radius-large); background: var(--dsf-color-surface); text-align: center; }
.dsf-countdown__status { display: inline-block; padding: var(--dsf-space-1) var(--dsf-space-3); border-radius: var(--dsf-radius-small); background: var(--cd-soft); color: var(--dsf-color-primary); font-size: var(--dsf-text-small); font-weight: 700; }
.dsf-countdown__result h2 { margin-block-start: var(--dsf-space-3); font-size: var(--dsf-text-h3); font-weight: 800; }
.dsf-countdown__dates { margin-block-start: var(--dsf-space-1); color: var(--dsf-color-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.dsf-countdown__dates time { white-space: nowrap; }
.dsf-countdown__result [data-cd-scope] { margin-block-start: var(--dsf-space-2); color: var(--dsf-color-muted); font-size: var(--dsf-text-small); }
.dsf-countdown__target { margin-block-start: var(--dsf-space-3); font-size: var(--dsf-text-small); color: var(--dsf-color-muted); font-weight: 600; }
.dsf-countdown__digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dsf-space-3); max-inline-size: 54rem; margin: var(--dsf-space-4) auto var(--dsf-space-3); }
.dsf-countdown__digits > div { min-inline-size: 0; padding: var(--dsf-space-5) var(--dsf-space-3); border: 1px solid color-mix(in srgb, var(--dsf-color-primary) 12%, transparent); border-radius: var(--dsf-radius-large); background: var(--cd-mint); }
.dsf-countdown__digits > div:nth-child(2) { background: var(--cd-yellow); }
.dsf-countdown__digits > div:nth-child(3) { background: var(--cd-lavender); }
.dsf-countdown__digits > div:nth-child(4) { background: var(--cd-coral); }
.dsf-countdown--school .dsf-countdown__digits > div:first-child { background: var(--dsf-color-accent); border-color: var(--dsf-color-accent); }
.dsf-countdown--school .dsf-countdown__digits > div:first-child :where(strong, span) { color: var(--dsf-color-surface); }
.dsf-countdown--school .dsf-countdown__digits > div:nth-child(2) { background: var(--cd-mint); }
.dsf-countdown--school .dsf-countdown__digits > div:nth-child(3) { background: var(--cd-yellow); }
.dsf-countdown--school .dsf-countdown__digits > div:nth-child(4) { background: var(--cd-lavender); }
.dsf-countdown__digits strong { display: block; font-family: var(--dsf-font-heading); font-size: clamp(2rem, 5.5vw, 4.25rem); color: var(--dsf-color-primary); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.08; letter-spacing: -0.025em; }
.dsf-countdown__digits span { display: block; margin-block-start: var(--dsf-space-2); color: var(--dsf-color-primary); font-size: var(--dsf-text-small); font-weight: 600; }
.dsf-countdown__message { max-inline-size: var(--dsf-measure); margin: var(--dsf-space-3) auto 0; color: var(--dsf-color-primary); font-weight: 700; }
.dsf-countdown__progress { max-inline-size: 36rem; margin: var(--dsf-space-4) auto 0; text-align: start; }
.dsf-countdown__progress label { font-size: var(--dsf-text-small); color: var(--dsf-color-muted); }
.dsf-countdown__progress progress { display: block; appearance: none; inline-size: 100%; block-size: 0.375rem; margin-block-start: var(--dsf-space-2); border: 0; border-radius: var(--dsf-radius-small); overflow: hidden; background: var(--dsf-color-border); accent-color: var(--dsf-color-accent); }
.dsf-countdown__progress progress::-webkit-progress-bar { background: var(--dsf-color-border); }
.dsf-countdown__progress progress::-webkit-progress-value { background: var(--dsf-color-accent); }
.dsf-countdown__progress progress::-moz-progress-bar { background: var(--dsf-color-accent); }
.dsf-countdown__notice { max-inline-size: var(--dsf-measure); margin: var(--dsf-space-3) auto 0; color: var(--dsf-color-primary); font-size: var(--dsf-text-small); }
.dsf-countdown__source { margin-block-start: var(--dsf-space-3); color: var(--dsf-color-muted); font-size: var(--dsf-text-small); }
.dsf-countdown__note { max-inline-size: var(--dsf-measure); margin: var(--dsf-space-4) auto 0; color: var(--dsf-color-muted); font-size: var(--dsf-text-small); text-align: center; }
.dsf-countdown__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dsf-space-2) var(--dsf-space-4); margin-block-start: var(--dsf-space-3); }
.dsf-countdown__links a { display: inline-flex; align-items: center; min-block-size: 2.75rem; border-radius: var(--dsf-radius-small); padding-inline: var(--dsf-space-2); font-weight: 600; transition: color var(--dsf-duration-fast) var(--dsf-ease), background-color var(--dsf-duration-fast) var(--dsf-ease); }
.dsf-countdown__links a:hover { background: var(--dsf-color-tint); }
.dsf-countdown.is-celebrating .dsf-countdown__icon { animation: dsf-countdown-cheer 600ms var(--dsf-ease) 1; }
.dsf-countdown ::selection { background: var(--cd-yellow); color: var(--dsf-color-primary); }
@keyframes dsf-countdown-wave { from { transform: rotate(-10deg); } to { transform: rotate(0); } }
@keyframes dsf-countdown-cheer { 40% { transform: translateY(-4px) rotate(10deg); } }

@media (max-width: 60rem) {
  .dsf-countdown__field--state { grid-column: 1 / -1; }
  .dsf-countdown__field--type { grid-column: span 8; }
  .dsf-countdown__field--year { grid-column: span 4; }
  .dsf-countdown__period { grid-column: 1 / -1; }
  .dsf-countdown--school .dsf-countdown__field--state,
  .dsf-countdown--school .dsf-countdown__period { grid-column: span 6; }
  .dsf-countdown__form button { grid-column: 1 / -1; justify-self: start; margin-block-start: 0; }
  .dsf-countdown__digits strong { font-size: clamp(2rem, 6vw, 3.5rem); }
}
@media (max-width: 40rem) {
  .dsf-countdown__hero { padding-block: calc(var(--dsf-space-4) + 100px); }
  .dsf-countdown__heading { gap: var(--dsf-space-3); }
  .dsf-countdown__hero h1 { font-size: clamp(1.5rem, 5.5vw, 1.875rem); text-align: start; }
  .dsf-countdown__hero p { font-size: var(--dsf-text-small); }
  .dsf-countdown__icon { inline-size: 2.5rem; block-size: 2.5rem; padding: var(--dsf-space-2); }
  .dsf-countdown__decor { opacity: 0.55; }
  .dsf-countdown__form { gap: var(--dsf-space-3); padding: var(--dsf-space-4); }
  .dsf-countdown__field--state,
  .dsf-countdown--school .dsf-countdown__field--state,
  .dsf-countdown--school .dsf-countdown__period { grid-column: 1 / -1; }
  .dsf-countdown__field--type { grid-column: span 7; }
  .dsf-countdown__field--year { grid-column: span 5; }
  .dsf-countdown__selection-caption[data-cd-caption='state'],
  .dsf-countdown__selection-caption[data-cd-caption='type'] { display: block; }
  .dsf-countdown__form button { inline-size: 100%; }
  .dsf-countdown__feedback { padding-inline: var(--dsf-space-4); font-size: 0.75rem; }
  .dsf-countdown__result { padding: var(--dsf-space-4); }
}
@media (max-width: 36rem) {
  .dsf-countdown__digits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsf-space-2); }
  .dsf-countdown__digits > div { padding: var(--dsf-space-4) var(--dsf-space-2); }
  .dsf-countdown__digits strong { font-size: clamp(1.875rem, 8vw, 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .dsf-countdown__icon,
  .dsf-countdown.is-celebrating .dsf-countdown__icon { animation: none; }
  .dsf-countdown__form button,
  .dsf-countdown__field select,
  .dsf-countdown__links a { transition: none; }
  .dsf-countdown__form button:not(:disabled):hover { transform: none; }
}
@media (forced-colors: active) {
  .dsf-countdown__field select { appearance: auto; -webkit-appearance: auto; padding-inline-end: var(--dsf-space-4); border-color: ButtonText; }
  .dsf-countdown__field::after { display: none; }
  .dsf-countdown__field select:focus-visible,
  .dsf-countdown__form button:focus-visible { outline-color: Highlight; }
  .dsf-countdown__digits > div { border-color: CanvasText; }
  .dsf-countdown--school .dsf-countdown__digits > div:first-child :where(strong, span) { color: CanvasText; }
}
@media print {
  .dsf-countdown__form,
  .dsf-countdown__decor { display: none; }
  .dsf-countdown__hero,
  .dsf-countdown__result,
  .dsf-countdown__digits > div { background: none; }
  .dsf-countdown--school .dsf-countdown__digits > div:first-child :where(strong, span) { color: var(--dsf-color-primary); }
}