/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide undefined custom elements until they're registered (prevents FOUC) */
:not(:defined) {
  visibility: hidden;
}

/*
 * Cally calendar theming.
 * Cally exposes two coarse-grained CSS custom properties for color, plus parts
 * for the navigation buttons. We map those to Web Awesome's brand tokens so the
 * calendar inherits the app's accent in both light and dark mode.
 * Migration note: drop this block once Web Awesome ships <wa-date-picker>.
 */
calendar-date {
  --color-accent: var(--wa-color-brand-fill-loud);
  --color-text-on-accent: var(--wa-color-brand-on-loud);
  color: var(--wa-color-text-normal);
  font: inherit;
}

calendar-date::part(button) {
  color: var(--wa-color-text-normal);
}

calendar-date::part(button):hover {
  background: var(--wa-color-surface-raised);
}

/* On the smallest phones (iPhone SE-class, 375px) the popover auto-flips
   above the trigger because the full-size calendar doesn't fit below.
   Shrink the calendar uniformly via `zoom` so the popover also tracks
   the new size (transform: scale would leave layout at full size).
   iPhone XR (414px) and up have enough room and use the default sizing.
   `zoom` is used here because Cally's <table> in shadow DOM sets its
   own font-size, so host font-size doesn't propagate. */
@media (max-width: 400px) {
  calendar-date {
    zoom: 0.85;
  }
}

/*
 * Results-callout watermark.
 * Recolor the PageMark mark to a faint brand tint so it reads as background
 * texture behind the result, via the logo's single --pm-logo-ink hook. The ink
 * is an *opaque* light blue so each sheet occludes the ones behind it — like the
 * logo — instead of showing through; the logo's own color-mix derives the edge a
 * step darker so the individual sheets and dog-ear stay legible. The mark is
 * shown large here, so we also thin the stroke: the logo's stroke-width of 6 is
 * a hairline at the header's ~28px but a heavy line at this size.
 *
 * Subtlety comes from a modest element opacity on the <svg> in the view
 * (opacity-30), applied *on top of* this opaque, high-contrast treatment. That
 * order matters: opacity alone on the original solid mark scaled fill and stroke
 * down together and collapsed their contrast into one blurred mass — but once
 * the sheets are defined by opaque fills and a darker edge, fading the whole
 * mark just softens it without losing that definition.
 */
.results-watermark {
  --pm-logo-ink: color-mix(in srgb, var(--wa-color-brand-fill-loud) 26%, white);
  stroke-width: 2;
}