/* The light line under the header (docs/brand.md, Signature effects; DES-09).
   Sky blue is used only here. */
.screen-light {
  position: relative;
  overflow: hidden;
  height: 2px;
  width: calc(100% - 80px);
  max-width: 1200px;
  margin: 0 auto 18px;
  background: linear-gradient(
    90deg,
    transparent,
    #38bdf877,
    #a7f3d0aa,
    #10b98177,
    transparent
  );
  box-shadow: 0 0 15px #34d39944;
  pointer-events: none;
}
.screen-light:after {
  content: "";
  position: absolute;
  inset: 0 auto;
  width: 32%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #a7f3d0, transparent);
  filter: blur(1px);
  opacity: 0;
  animation: screen-light-pass 5s ease-in-out infinite;
}
@keyframes screen-light-pass {
  0%,
  10% {
    transform: translateX(-110%);
    opacity: 0;
  }
  25%,
  75% {
    opacity: 0.85;
  }
  90%,
  100% {
    transform: translateX(420%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-light:after {
    animation: none;
  }
}
@media (max-width: 640px) {
  .screen-light {
    width: calc(100% - 40px);
  }
}

/* The one main button for every page, customer and admin (docs/brand.md,
   Buttons; DES-02). A screen sets where a button sits, such as its width and
   margin, and leaves how it looks to this rule. */
.primary,
.pr-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 11px 22px;
  border: 1px solid var(--text);
  border-radius: var(--corner-button);
  background: var(--text);
  color: var(--bg);
  font:
    600 var(--text-body) / 1.25 Manrope,
    system-ui,
    sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.primary.compact {
  min-height: 44px;
  padding-block: 9px;
}
:is(.primary, .pr-primary):hover {
  filter: brightness(0.96);
}

/* The one secondary button: anything beside a main action, and a row's own
   action. The same size on phones. */
.secondary,
.pr-secondary,
.walk-actions > button:not(.primary, [aria-pressed]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--corner-button);
  background: transparent;
  color: var(--text);
  font:
    500 var(--text-secondary) / 1.25 Manrope,
    system-ui,
    sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* The one expander: a chevron at the end of the row that flips when open
   (docs/design.md, Layout and controls). */
.expander {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.expander::-webkit-details-marker {
  display: none;
}
.expander::after,
.expander-chevron {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s;
}
details[open] > .expander::after,
[aria-expanded="true"] .expander-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* The one selector button (docs/design.md, Layout and controls). Add
   choice-group to the group, and is-filled for date ranges and views. A screen
   sets the group's layout and leaves the buttons to this rule. */
.choice-group > button {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--corner-choice);
  background: transparent;
  color: var(--muted);
  font:
    500 var(--text-secondary) / 1.25 Manrope,
    system-ui,
    sans-serif;
  cursor: pointer;
}
.choice-group > button[aria-pressed="true"] {
  border-color: var(--interactive);
  color: var(--interactive);
}
.choice-group.is-filled > button[aria-pressed="true"] {
  background: var(--interactive);
  color: var(--bg);
}