/* Shared countdown presentation; each style keeps its own visual treatment. */
#portal-duration:not(#x):not(#y).portal-countdown {
  --portal-clock-size: min(var(--portal-countdown-size), calc((min(100vw, 480px) - 2 * var(--portal-page-margin) - 2 * var(--portal-component-margin) - 72px) / var(--portal-clock-digits, 8)));
  --portal-clock-inset: 0px;
  display: grid;
  grid-template-columns: minmax(0, var(--portal-clock-days, 1fr)) repeat(3, minmax(0, 1fr));
  align-items: stretch;
  column-gap: 14px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}
#portal-duration:not(#x):not(#y).portal-countdown .portal-time-part {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}
#portal-duration:not(#x):not(#y).portal-countdown .portal-time-value {
  display: block;
  font-size: var(--portal-clock-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: inherit;
  text-shadow: none;
}
#portal-duration:not(#x):not(#y).portal-countdown .portal-time-unit {
  margin: 7px 0 0;
  color: var(--portal-muted);
  font-size: 0;
  line-height: 1.2;
  letter-spacing: .035em;
}
#portal-duration:not(#x):not(#y).portal-countdown .portal-time-unit::after {
  content: attr(data-unit-label);
  font-size: clamp(7px, calc(var(--portal-clock-size) * .3), 9px);
}
/* Fit to the countdown itself, not an estimated viewport. Two tabular digits
   need up to 1.45em across the supported font stacks, including Digital's wider D;
   reserve the three gaps and each card's horizontal inset.
   Days grow to two grid tracks; beyond four characters, their width sets the cap.
   Older engines retain the conservative viewport fallback above. */
@supports (width: 1cqw) {
  #portal-duration:not(#x):not(#y).portal-countdown {
    container-type: inline-size;
    --portal-clock-size: min(var(--portal-countdown-size), calc(((100cqw - 42px) * 2 / min(var(--portal-clock-digits, 8), 10) - var(--portal-clock-padding, 0px)) / max(1.45, calc((var(--portal-clock-digits, 8) - 6) * .3625))));
  }
  #portal-duration:not(#x):not(#y).portal-countdown .portal-time-unit::after {
    font-size: min(clamp(7px, calc(var(--portal-clock-size) * .3), 9px), calc(((100cqw - 42px) * 2 / min(var(--portal-clock-digits, 8), 10) - var(--portal-clock-padding, 0px)) / 6));
  }
}
#portal-duration:not(#x):not(#y):is([data-countdown-style="clean-colon"],[data-countdown-style="gradient-cards"],[data-countdown-style="digital-clock"]) .portal-time-part:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: var(--portal-clock-inset);
  right: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: var(--portal-clock-size);
  color: var(--portal-text);
  font-size: calc(var(--portal-clock-size) * .65);
  font-weight: 750;
  line-height: 1;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="gradient-cards"] {
  --portal-clock-inset: 8px;
  --portal-clock-padding: 6px;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="gradient-cards"] .portal-time-part {
  border: 1px solid var(--portal-border);
  border-radius: 10px;
  background: var(--portal-card-color);
}
#portal-duration:not(#x):not(#y)[data-countdown-style="gradient-cards"] .portal-time-value {
  padding: 8px 2px;
  border-radius: 9px 9px 0 0;
  color: var(--portal-insert-ink);
  background: var(--portal-insert-color);
  background: linear-gradient(150deg, color-mix(in srgb, var(--portal-insert-color), #fff 12%), color-mix(in srgb, var(--portal-insert-color), #000 12%));
}
#portal-duration:not(#x):not(#y)[data-countdown-style="gradient-cards"] .portal-time-unit {
  margin: 0;
  padding: 7px 1px;
  border-radius: 0 0 9px 9px;
  color: var(--portal-text);
  background: color-mix(in srgb, var(--portal-card-color), var(--portal-secondary) 8%);
}
#portal-duration:not(#x):not(#y)[data-countdown-style="minimal-dividers"] .portal-time-part:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background: var(--portal-border);
}
#portal-duration:not(#x):not(#y)[data-countdown-style="digital-clock"] .portal-time-unit {
  display: none;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="dark-tiles"] .portal-time-part {
  padding: 10px 3px;
  border: 1px solid #344256;
  border-radius: 10px;
  color: #fff;
  background: #18212f;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="dark-tiles"] {
  --portal-clock-padding: 8px;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="dark-tiles"] .portal-time-unit {
  color: #d8e2ef;
}
/* Classic keeps short inline units and the theme's colors, surface and type.
   Distribute whole number/unit pairs; reserve 12px per track for the short label
   and its 3px gap. Numeric pairs need less width than Digital's appended D,
   allowing a modest size increase while retaining a cap for wide fonts/days. */
#portal-duration:not(#x):not(#y)[data-countdown-style="jann-classic"] {
  --portal-classic-gap: clamp(8px, 2vw, 12px);
  --portal-classic-size: min(calc(var(--portal-countdown-size) * 1.12), calc((min(100vw, 440px) - 2 * var(--portal-page-margin) - 2 * var(--portal-component-margin) - 120px) / calc(var(--portal-clock-digits, 8) * .88)));
  display: grid;
  grid-template-columns: minmax(0, var(--portal-clock-days, 1fr)) repeat(3, minmax(0, 1fr));
  align-items: baseline;
  column-gap: var(--portal-classic-gap);
  width: 100%;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="jann-classic"] .portal-time-part {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  column-gap: 3px;
}
#portal-duration:not(#x):not(#y)[data-countdown-style="jann-classic"] .portal-time-value {
  font-size: var(--portal-classic-size);
}
#portal-duration:not(#x):not(#y)[data-countdown-style="jann-classic"] .portal-time-unit {
  flex: 0 0 auto;
  margin: 0;
}
@supports (width: 1cqw) {
  #portal-duration:not(#x):not(#y)[data-countdown-style="jann-classic"] {
    container-type: inline-size;
    --portal-classic-size: min(calc(var(--portal-countdown-size) * 1.12), calc(((100cqw - 3 * var(--portal-classic-gap)) * 2 / min(var(--portal-clock-digits, 8), 10) - 12px) / max(1.35, calc((var(--portal-clock-digits, 8) - 6) * .3375))));
  }
}