:root {
  --pico-form-element-spacing-vertical: 0.6rem;
}

/* Keep the toolbar handle clear of content on small screens. */
body > footer {
  padding-bottom: 3rem;
}

/* Weight is two boxes rather than one decimal input, so the phone keypad never
   has to show a separator key. See docs/plans/0007-split-weight-input.md.
   Pico gives every child of a [role=group] `flex: 1 1 auto`, which would size
   the point and the two boxes alike. */
.weight-group > .weight-separator {
  flex: 0 0 auto;
  align-self: center;
  padding-inline: 0.4rem;
  font-weight: bold;
}

/* The element part of the selector is load-bearing: Pico sizes group children
   through `[role=group] input:not([type=checkbox],[type=radio])`, which a bare
   class selector loses to. */
.weight-group > input.weight-fraction {
  flex: 0 1 5rem;
}

/* ---------------------------------------------------------------------------
   Network feedback. See docs/plans/0008-entry-ux.md.
   --------------------------------------------------------------------------- */

/* An indeterminate bar across the top of the viewport for the whole time any
   htmx request is in flight. Shown and hidden by static/js/network.js. */
#progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  block-size: 3px;
  overflow: hidden;
}

#progress[hidden] {
  display: none;
}

#progress::before {
  content: "";
  display: block;
  block-size: 100%;
  inline-size: 40%;
  background: var(--pico-primary);
  animation: progress-slide 1s linear infinite;
}

@keyframes progress-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

#net-error {
  margin-block-end: var(--pico-spacing);
  padding: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
  border: 1px solid var(--pico-form-element-invalid-border-color);
  border-radius: var(--pico-border-radius);
  color: var(--pico-form-element-invalid-active-border-color);
}

/* Pico paints its loading icon white on a solid button, but only when the
   button itself carries aria-busy. Ours is on a span inside the button, so the
   same correction has to be made here. */
button:not(.outline) > .htmx-indicator[aria-busy="true"]::before {
  filter: brightness(0) invert(1);
}

/* The refresh control is an icon, so it is sized by its SVG rather than by a
   line of text. */
#refresh {
  display: inline-flex;
  padding: calc(var(--pico-form-element-spacing-vertical) * 0.75);
}

#refresh > svg {
  inline-size: 1rem;
  block-size: 1rem;
}

/* A collapsed card is a single button, and Pico's <details> bottom margin
   would reserve a strip of empty card underneath it. */
article > details {
  margin-block-end: 0;
}