/*
 * 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;
}

/*
 * Calculator layout.
 * Default (no book loaded): inputs | results side by side on md+.
 * Book loaded (.has-book, added by calculator#applyBook): a fixed cover rail on
 * the left with the calculator stacked in a single column on the right. Both
 * states collapse to one column on mobile. The cover rail is display:none until
 * a book is present, so no JS needs to toggle its visibility.
 */
.calc-layout { display: grid; gap: 1.5rem; }
.calc-body   { display: grid; gap: 1.5rem; }
.book-rail   { display: none; }
.calc-layout.has-book .book-rail { display: flex; gap: 1.25rem; align-items: center; }

@media (min-width: 768px) {
  .calc-body { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .calc-layout.has-book { grid-template-columns: 300px 1fr; gap: 2.25rem; align-items: start; }
  .calc-layout.has-book .calc-body { grid-template-columns: 1fr; }
  .calc-layout.has-book .book-rail { display: block; }
}

/*
 * Clear-book button. The outline stays hidden and fades in on hover/focus, so it
 * reads as a quiet affordance next to the "Now planning" label. On touch/no-hover
 * devices there's no hover state, so the outline is always shown to keep it
 * discoverable.
 */
/* Outer ::part rules override Web Awesome's own (non-important) base-part
   declarations by cascade, so no !important is needed. We hold the background
   transparent in every state to suppress WA's hover fill, and animate only the
   border-color so the outline fades in on its own. */
.clear-btn::part(base) {
  border-color: transparent;
  background-color: transparent;
  transition: border-color 250ms ease;
}
.clear-btn:hover::part(base),
.clear-btn:focus-visible::part(base) {
  border-color: var(--wa-color-surface-border);
}
@media (hover: none) {
  .clear-btn::part(base) { border-color: var(--wa-color-surface-border); }
}

/*
 * Edit-book dialog footer. Web Awesome's dialog footer ships with no separator
 * and no top padding, so the action buttons crowd the body. Add a full-width
 * divider and breathing room above them (matches the header's own rule).
 */
.edit-dialog::part(footer) {
  border-top: var(--wa-panel-border-width, 1px) solid var(--wa-color-surface-border);
  padding-top: 1.25rem;
}