/**
 * Group ([role="group"], [role="search"])
 */
[role=search],
[role=group] {
  display: inline-flex;
  position: relative;
  width: var(--toddyi-size-100pct);
  margin-bottom: var(--pico-spacing);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-group-box-shadow, 0 0 0 transparent);
  vertical-align: middle;
  transition: box-shadow var(--pico-transition);
}
[role=search] > *,
[role=search] input:not([type=checkbox], [type=radio]),
[role=search] select,
[role=group] > *,
[role=group] input:not([type=checkbox], [type=radio]),
[role=group] select {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 0;
}
[role=search] > *:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=search] select:not(:first-child),
[role=group] > *:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) {
  margin-inline-start: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
[role=search] > *:not(:last-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=search] select:not(:last-child),
[role=group] > *:not(:last-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
[role=group] select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
[role=search] > *:focus,
[role=search] input:not([type=checkbox], [type=radio]):focus,
[role=search] select:focus,
[role=group] > *:focus,
[role=group] input:not([type=checkbox], [type=radio]):focus,
[role=group] select:focus {
  z-index: 2;
}
[role=search] button:not(:first-child),
[role=search] [type=submit]:not(:first-child),
[role=search] [type=reset]:not(:first-child),
[role=search] [type=button]:not(:first-child),
[role=search] [role=button]:not(:first-child),
[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=search] select:not(:first-child),
[role=group] button:not(:first-child),
[role=group] [type=submit]:not(:first-child),
[role=group] [type=reset]:not(:first-child),
[role=group] [type=button]:not(:first-child),
[role=group] [role=button]:not(:first-child),
[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
[role=group] select:not(:first-child) {
  margin-inline-start: calc(var(--pico-border-width) * -1);
}
[role=search] button,
[role=search] [type=submit],
[role=search] [type=reset],
[role=search] [type=button],
[role=search] [role=button],
[role=group] button,
[role=group] [type=submit],
[role=group] [type=reset],
[role=group] [type=button],
[role=group] [role=button] {
  width: auto;
}
@supports selector(:has(*)) {
  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
  }
  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
    border-color: transparent;
  }
  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
    --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
  }
  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
    --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
    --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
  }
  [role=search] button:focus,
  [role=search] [type=submit]:focus,
  [role=search] [type=reset]:focus,
  [role=search] [type=button]:focus,
  [role=search] [role=button]:focus,
  [role=group] button:focus,
  [role=group] [type=submit]:focus,
  [role=group] [type=reset]:focus,
  [role=group] [type=button]:focus,
  [role=group] [role=button]:focus {
    box-shadow: none;
  }
}

[role=search] > *:first-child {
  border-top-left-radius: var(--toddyi-size-5rem);
  border-bottom-left-radius: var(--toddyi-size-5rem);
}
[role=search] > *:last-child {
  border-top-right-radius: var(--toddyi-size-5rem);
  border-bottom-right-radius: var(--toddyi-size-5rem);
}

/**
 * Loading ([aria-busy=true])
 */
[aria-busy=true]:not(input, select, textarea, html, form) {
  white-space: nowrap;
}
[aria-busy=true]:not(input, select, textarea, html, form)::before {
  display: inline-block;
  width: var(--toddyi-size-1em);
  height: var(--toddyi-size-1em);
  background-image: var(--pico-icon-loading);
  background-size: 1em auto;
  background-repeat: no-repeat;
  content: "";
  vertical-align: var(--toddyi-size-neg-0-125em);
}
[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
  margin-inline-end: calc(var(--pico-spacing) * 0.5);
}
[aria-busy=true]:not(input, select, textarea, html, form):empty {
  text-align: center;
}

button[aria-busy=true],
[type=submit][aria-busy=true],
[type=button][aria-busy=true],
[type=reset][aria-busy=true],
[role=button][aria-busy=true],
a[aria-busy=true] {
  pointer-events: none;
}

/* ===== Waiting =====
 *
 * Turbo drives every page navigation and draws a progress bar for the slow
 * ones. Unstyled it is Turbo's default blue, a colour that appears nowhere else
 * in the product — so on the one occasion the application admits it is working,
 * it does so in someone else's brand. (#328)
 */
.turbo-progress-bar {
  height: var(--toddyi-size-3px);
  background: var(--pico-primary);
}

/* Pico draws the busy spinner as a background-image: a data-URI SVG with
 * stroke='rgb(136, 145, 164)' baked in. A background image cannot inherit
 * currentColor, so that slate grey is the colour it is everywhere — including
 * on the contrast button, where grey on a dark fill is very nearly invisible,
 * and beside terracotta text, where it is the same foreign colour Turbo's blue
 * was. Its 4-unit stroke on a radius of 10 also renders as a blob once scaled
 * down to 1em.
 *
 * Drawn in CSS instead, because a border does inherit currentColor: the same
 * ring is dark on light, light on dark, and terracotta wherever the text is,
 * with nothing to keep in sync. (#328)
 */
[aria-busy=true]:not(input, select, textarea, html, form)::before {
  box-sizing: border-box;
  border: var(--toddyi-size-2px) solid currentColor;
  /* One quarter left open is what makes the rotation visible at all. */
  border-block-start-color: transparent;
  border-radius: var(--toddyi-size-50pct);
  background-image: none;
  opacity: 0.55;
  animation: toddyi-spin 0.7s linear infinite;
}

@keyframes toddyi-spin {
  to { transform: rotate(360deg); }
}

/* Pico also sets white-space: nowrap on whatever is busy, which is right for a
   button and wrong for a grid: the calendar is a container, and holding its
   contents on one line while it loads collapses the month. The ring is all that
   is wanted there. */
.calendar-wrap[aria-busy=true] {
  white-space: normal;
}

/* A thing that spins forever is the case this query exists for. The ring still
   has to say "working", so it breathes instead of turning. */
@media (prefers-reduced-motion: reduce) {
  [aria-busy=true]:not(input, select, textarea, html, form)::before {
    animation: toddyi-pulse 1.4s ease-in-out infinite;
  }

  @keyframes toddyi-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.7; }
  }
}

/* ===== The loading overlay =====
 * Turbo's bar is three pixels tall and waits half a second; between a click and
 * the next screen the application showed nothing at all. This is the thing a
 * person actually sees. (#328)
 */
/* display: flex on an element that is hidden by attribute is the exact trap
   hidden_attribute_test exists for — author display beats the user-agent
   [hidden] rule whatever the specificity, so the overlay would be on screen
   from first paint and el.hidden would do nothing. Said again here, beside the
   display that would otherwise win. (#278) */
.app-loading[hidden] {
  display: none;
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: var(--toddyi-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Readable over whatever page is still on screen behind it, in either theme. */
  background: color-mix(in srgb, var(--pico-background-color) 82%, transparent);
  backdrop-filter: blur(var(--toddyi-size-2px));
}

.app-loading__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--toddyi-size-0-75rem);
}

/* He bobs rather than spins: an otter rotating on his own axis reads as a
   glitch, and the ring below is already saying "turning". */
.app-loading__otter {
  width: var(--toddyi-size-120px);
  height: auto;
  animation: toddyi-bob 1.6s ease-in-out infinite;
}

.app-loading__ring {
  width: var(--toddyi-size-1-5rem);
  height: var(--toddyi-size-1-5rem);
  box-sizing: border-box;
  border: var(--toddyi-size-2px) solid var(--pico-primary);
  border-block-start-color: transparent;
  border-radius: var(--toddyi-size-50pct);
  animation: toddyi-spin 0.7s linear infinite;
}

.app-loading__text {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: var(--toddyi-size-0-8rem);
}

@keyframes toddyi-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-1 * var(--toddyi-size-6px))); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__otter { animation: none; }
  .app-loading__ring  { animation: toddyi-pulse 1.4s ease-in-out infinite; }
}