/* The early depositor drip, on the Rewards tab (drip.js): the schedule as four stepped bars on a tape, the claim, the
   wallet's multipliers and the lock form. Built from the shop's own pieces (card, facts, field, help); only what they
   lack is here. */

.dr-card { margin-top: 24px; }
.dr-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dr-head h2 { margin-bottom: 4px; }
.dr-sticker {
  display: inline-block; font-family: var(--hand); font-size: 20px; line-height: 1.1; color: var(--ink);
  background: var(--mint); border-radius: 999px; padding: 6px 14px; transform: rotate(-3deg);
  box-shadow: 0 2px 0 rgba(22, 22, 43, .25);
}

/* The schedule: four stretches of 26 weeks, each bar half the height of the one before. Let out: mint; the stretch
   running now: pink, with how far into it the drip is on the strip under its label. */
.dr-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 18px 0 6px; padding: 12px 12px 10px;
  background: var(--tape); border-radius: 8px;
}
.dr-step { display: grid; gap: 8px; min-width: 0; }
.dr-well { display: flex; align-items: flex-end; height: 104px; border-bottom: 2px solid rgba(251, 248, 239, .2); }
.dr-bar {
  display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--tape-edge);
  box-shadow: inset 0 0 0 1px rgba(251, 248, 239, .16);
}
.dr-step:nth-child(1) .dr-bar { height: 100%; }
.dr-step:nth-child(2) .dr-bar { height: 50%; }
.dr-step:nth-child(3) .dr-bar { height: 25%; }
.dr-step:nth-child(4) .dr-bar { height: 12.5%; }
.dr-step.past .dr-bar { background: var(--mint); box-shadow: none; }
.dr-step.now .dr-bar { background: var(--neon); box-shadow: none; }
.dr-steps.stopped .dr-step:not(.past) .dr-bar { background: transparent; box-shadow: inset 0 0 0 1px rgba(251, 248, 239, .22); }
.dr-label {
  display: grid; gap: 1px; background: var(--label); color: var(--ink); border-radius: 3px; padding: 6px 8px;
  border-left: 6px solid var(--tape-edge); min-width: 0;
}
.dr-step.past .dr-label { border-left-color: var(--mint); }
.dr-step.now .dr-label { border-left-color: var(--neon); }
.dr-label b { font-size: 14px; line-height: 1.25; }
.dr-label small { font-size: 12px; color: var(--ink-2, #55557a); }
.dr-track { display: block; height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(22, 22, 43, .1); overflow: hidden; }
.dr-fill { display: block; height: 100%; width: 0; background: var(--ink); }
.dr-status {
  margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(255, 216, 58, .32); color: var(--ink);
  font-weight: 600; font-size: 15px;
}

/* Where the schedule stands, in a strip under it. */
.dr-stats {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0 0; padding: 0;
  border-top: 1px solid rgba(22, 22, 43, .12); border-bottom: 1px solid rgba(22, 22, 43, .12);
}
.dr-stats li { display: grid; align-content: start; gap: 2px; padding: 12px 14px; min-width: 0; }
.dr-stats li + li { border-left: 1px dashed rgba(22, 22, 43, .18); }
.dr-stats span { font-size: 13px; color: var(--ink-2, #55557a); }
.dr-stats b { font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.dr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 4px; align-items: start; }
.card .dr-mult h3 { margin-top: 20px; }

/* The claim: a tape label with the amount on it and the button at its end. */
.dr-claim {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; margin-top: 18px;
  padding: 16px 18px; background: var(--tape); color: var(--label); border-radius: 10px; border-left: 10px solid var(--neon);
}
.dr-claim.dim { border-left-color: var(--tape-edge); }
.dr-amount { min-width: 0; }
.dr-amount .hand { display: block; font-family: var(--hand); font-size: 21px; line-height: 1.1; color: var(--sticker); }
.dr-amount b {
  display: block; font-weight: 900; font-stretch: 120%; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.05;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.dr-claim .c-unit { color: var(--label); }
.card .dr-claim .btn { margin-top: 0; }
.dr-claim p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; color: var(--muted, #a6a6d2); }

/* Each position the keeper counted: its share, loyalty times lock, and how long it has been kept in. */
.dr-pos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.dr-pos li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 9px 12px;
  border-radius: 8px; background: rgba(22, 22, 43, .05); box-shadow: inset 0 0 0 1px rgba(22, 22, 43, .08);
}
.dr-tag b {
  display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--ink); color: var(--label);
  font-size: 13px; letter-spacing: .02em;
}
.dr-x { font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dr-pos small { grid-column: 2; color: var(--ink-2, #55557a); font-size: 13px; }
.dr-pos li.dr-empty { display: block; padding: 0; background: none; box-shadow: none; color: var(--ink-2, #55557a); font-size: 14.5px; }

/* The lock form: what it is, then the form and its preview beside the warning and the buttons. */
.dr-lock {
  margin-top: 24px; padding: 2px 20px 16px; border-radius: 10px; background: rgba(22, 22, 43, .035);
  box-shadow: inset 0 0 0 1px rgba(22, 22, 43, .12);
}
.dr-lock-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.dr-preview { margin-top: 10px; }
.dr-seg {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 12px; padding: 4px;
  border-radius: 999px; background: rgba(22, 22, 43, .06); box-shadow: inset 0 0 0 1px rgba(22, 22, 43, .14);
}
.dr-seg button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.dr-seg button:hover { background: rgba(22, 22, 43, .08); }
.dr-seg button[aria-checked="true"] { background: var(--ink); color: var(--label); }
.dr-warn {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 216, 58, .32);
  border-left: 4px solid #b3124f; font-size: 14px; line-height: 1.45; color: var(--ink);
}
.dr-warn b { display: block; }
.card .dr-lock .row-btns .btn { margin-top: 14px; }

@media (max-width: 760px) {
  .dr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-stats li { padding: 10px 10px; }
  .dr-stats li:nth-child(3) { border-left: 0; }
  .dr-stats li:nth-child(n+3) { border-top: 1px dashed rgba(22, 22, 43, .18); }
  .dr-stats b { font-size: 15px; }
  .dr-cols, .dr-lock-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dr-steps { gap: 5px; padding: 8px 8px 6px; }
  .dr-well { height: 72px; }
  .dr-label { padding: 5px 6px; border-left-width: 4px; }
  .dr-label b { font-size: 12px; }
  .dr-label small { font-size: 11px; }
  .dr-lock { padding: 2px 12px 14px; }
  .dr-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 14px; }
  .dr-seg button { border-radius: 10px; }
}