UpdateReminderDialog.module.css

.panel {
  width: 420px;
  padding: var(--spacing-18, 18px);
  gap: 0;
}

/* Frosted sheet over the page — a translucent glass shape that carries the
   blur (per the Liquid Glass material tokens), not a raw blur of the view. */
.backdrop.backdrop {
  background: var(--glass-regular);
  backdrop-filter: blur(var(--glass-regular-blur, 28px));
  -webkit-backdrop-filter: blur(var(--glass-regular-blur, 28px));
}

/* The cover sits inset as its own card, at the image's natural aspect ratio. */
.cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md, 8px);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10, 10px);
  padding: var(--spacing-18, 18px) 0 0;
}

.title {
  margin: 0;
  font-size: var(--font-size-20, 20px);
  font-weight: 600;
  color: var(--text-strong);
}

.notesLabel {
  margin: 0;
  font-size: var(--font-size-13, 13px);
  color: var(--text-muted);
}

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10, 10px);
}

.note {
  display: flex;
  align-items: center;
  gap: var(--spacing-10, 10px);
  font-size: var(--font-size-13, 13px);
  line-height: 1.45;
  color: var(--text);
}

.noteDot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circular, 50%);
  background: var(--text-strong);
}

.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8, 8px);
  padding: var(--spacing-20, 20px) 0 0;
}

/* Doubled selectors out-rank the shared Button variant classes regardless of
   stylesheet injection order. */
.cancel.cancel {
  border-radius: var(--radius-pill, 999px);
}

/* Dark solid fill comes from the shared primary variant; the brand green
   lands on the label and icon via currentColor. */
.confirm.confirm {
  color: var(--brand);
}

.confirmIcon {
  width: 16px;
  height: 16px;
}

/* Collapsed rail strip: icon-only round button pinned to the right, above the
   nav rail's account row; while updating a progress readout stacks above it. */
.stripWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-6, 6px);
}

.strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: var(--brand);
  /* Fixed dark in both themes: the icon sits on brand green either way. */
  color: #202020;
  cursor: pointer;
  transition: background-color var(--duration-ultra-fast, 50ms) var(--curve-easy-ease, ease);
}

.strip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--brand) 86%, #202020);
}

.strip:disabled {
  cursor: default;
}

/* Progress ring around the round button while updating. The host reserves the
   5px ring band on every side so the button never shifts when the ring
   mounts; the SVG overlays that band, rotated so the arc grows from 12
   o'clock. */
.stripRingHost {
  position: relative;
  display: inline-flex;
  padding: 5px;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.ringTrack {
  fill: none;
  stroke: var(--bg-subtle);
  stroke-width: 2.5;
}

.ringFill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--duration-normal, 200ms) var(--curve-easy-ease, ease);
}

.strip:focus-visible {
  outline: var(--stroke-thin, 1px) solid var(--blue);
  outline-offset: 2px;
}

.stripIcon {
  flex: none;
  width: 15px;
  height: 15px;
}

/* Updating face: the bare percent number replaces the rocket inside the
   button. Sized so "100" still clears the 34px circle. */
.stripPercent {
  font-size: var(--font-size-11, 11px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}