/* The limit: the one thing the opening leaves open. "You spend only what you use" — and then:
 * could an app run away with it? No: you set the limit, and an app can only spend within it.
 * One statement and one short picture that plays by itself when it scrolls into view (js/cap.js):
 * the glass track fills, reaches the limit and stops there — under three seconds, once. Most people
 * will not touch anything (owner, 2026-10-07); those who do can pick another limit or replay.
 * (Owner, 2026-10-07: three steps of "how it works" had too much to read and, cut down to three
 * words, no point. Signing in is the button's job; receipts are the next section's.)
 * Without the script, or with reduced motion, the picture simply stands at its end: at the limit. */
.cap .wrap {
  display: grid;
  gap: clamp(18px, 3.6vh, 36px);
}
.cap-demo {
  display: grid;
  gap: clamp(14px, 2.8vh, 26px);
}
.cap-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: clamp(16px, 0.85rem + 0.5vw, 21px);
}
.cap-ctl .sim-flag {
  margin: 0 0 0 auto;
}
/* The product's glass pill, as a control. */
.cap-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.6em;
  padding: 0 1.15em;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.25s var(--motion-ease),
    color 0.2s,
    opacity 0.2s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cap-pill:not(:disabled):hover {
  transform: translateY(-1px) scale(1.03);
}
.cap-pill:not(:disabled):active {
  transform: scale(0.97);
}
.cap-pill:disabled {
  opacity: 0.6;
  cursor: default;
}
.cap-pill:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
.cap-limit b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.cap-caret {
  width: 0.95em;
  height: 0.95em;
  margin-right: -0.3em;
  color: var(--muted);
}
/* Replay: there once the picture has reached the limit (it keeps its place while it plays). */
.cap-again {
  color: var(--muted-strong);
  transition:
    transform 0.25s var(--motion-ease),
    opacity 0.3s;
}
.cap-again[hidden] {
  display: none;
}
.cap-demo:not([data-state="capped"]) .cap-again {
  opacity: 0;
  pointer-events: none;
}
.cap-redo {
  width: 1em;
  height: 1em;
  margin-left: -0.2em;
}
/* The limit pill answers when a new limit is picked. */
.cap-limit.is-set {
  animation: cap-set 0.45s var(--motion-ease);
}
@keyframes cap-set {
  35% {
    scale: 1.08;
  }
}
/* The track: a long glass tube; what the app has used fills it from the left. */
.cap-meter {
  display: grid;
  gap: clamp(10px, 2vh, 18px);
}
.cap-track {
  display: block;
  height: clamp(20px, 3.4vh, 30px);
  border-radius: 999px;
}
.cap-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--accent) var(--glass-tint), transparent);
  /* (full unless the script says otherwise: the picture's resting state is "at the limit") */
  clip-path: inset(0 calc(100% - var(--fill, 1) * 100%) 0 0 round 999px);
  transition:
    clip-path 0.12s linear,
    background-color 0.3s;
}
.cap-demo[data-state="capped"] .cap-fill {
  background: var(--warning);
}
.cap-num {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cap-of {
  color: var(--muted-strong);
  font-weight: 400;
  white-space: pre;
}
.cap-flag {
  display: none;
  margin-left: 0.7em;
  padding: 6px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
  font-size: clamp(13px, 0.76rem + 0.24vw, 16px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.cap-demo[data-state="capped"] .cap-flag {
  display: inline-block;
  animation: cap-flag 0.4s var(--motion-ease) backwards;
}
@keyframes cap-flag {
  from {
    opacity: 0;
    scale: 0.85;
  }
}
.cap .aside {
  max-width: none;
  margin: 0;
  font-size: 13.5px;
  text-align: left;
}
@media (pointer: coarse) {
  .cap-pill {
    min-height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cap-pill,
  .cap-fill {
    transition: none;
  }
  .cap-demo[data-state="capped"] .cap-flag,
  .cap-limit.is-set {
    animation: none;
  }
}

/* Where the opening's stage ends (dark theme). The stage is #111315 and the page #17191c: two near-blacks
 * that met in one straight line under the opening and read as a mistake (owner, 2026-10-08: 「為什麼會這樣
 * 底色分色？」). The stage now dissolves into the page over the top of this section, so there is no line.
 * In the light theme the dark stage still ends as a block on pale paper; that contrast is meant. */
@media (prefers-color-scheme: dark) {
  .cap {
    background:
      linear-gradient(
        to bottom,
        #111315,
        rgb(17 19 21 / 78%) 20%,
        rgb(17 19 21 / 48%) 44%,
        rgb(17 19 21 / 20%) 70%,
        rgb(17 19 21 / 0%)
      )
      top / 100% min(360px, 70%) no-repeat;
  }
}