/* Update notice (src/update/). Paper color matches the pencil art's own
   background so the drawings bleed into the screen with no frame. */
:root {
  --us-paper: #fdfcff;
  --us-mark: #bdeccf;
}

/* ---------- Full-screen "historias" ---------- */
.us {
  position: fixed;
  inset: 0;
  z-index: 9500;
  width: 100%;
  max-width: 480px; /* same column as the app shell on desktop */
  margin: 0 auto;
  background: var(--us-paper);
  color: var(--color-ink);
  font-family: var(--font-main);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.us.is-open { transform: none; }

.us-bars { display: flex; gap: 4px; padding: calc(14px + env(safe-area-inset-top)) 20px 0; }
.us-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(8, 20, 47, 0.12); overflow: hidden; }
.us-bars b { display: block; height: 100%; background: var(--color-ink); transform-origin: left; transform: scaleX(0); }
.us-bars i.is-done b { transform: scaleX(1); }
.us-bars i.is-now b { animation: us-fill var(--us-page-ms, 4200ms) linear forwards; }
@keyframes us-fill { to { transform: scaleX(1); } }

.us-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 0; }
.us > .us-head:first-child { padding-top: calc(16px + env(safe-area-inset-top)); }
.us-logo { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; }
.us-x { border: none; background: none; color: var(--color-ink); width: 36px; height: 36px; margin-right: -8px; display: grid; place-items: center; cursor: pointer; }
.us-x svg { width: 18px; height: 18px; }

.us-stage { flex: 1; position: relative; min-height: 0; }
.us-page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 22px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.us-page.is-on { opacity: 1; visibility: visible; }
.us-art { flex: 1; min-height: 0; margin: 0 -22px; display: grid; place-items: center; overflow: hidden; }
.us-art picture { width: 100%; }
.us-art img { width: 100%; aspect-ratio: 12 / 5; object-fit: contain; display: block; transform: scale(1.3); transform-origin: 50% 60%; pointer-events: none; }

.us-copy > * { transform: translateY(14px); opacity: 0; transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.4s; }
.us-page.is-on .us-copy > * { transform: none; opacity: 1; }
.us-page.is-on .us-copy > :nth-child(2) { transition-delay: 0.07s; }
.us-page.is-on .us-copy > :nth-child(3) { transition-delay: 0.14s; }
.us-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-mint-dark); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.us-title { font-size: 36px; line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 14px; }
.us-mk {
  background: linear-gradient(transparent 60%, var(--us-mark) 60%, var(--us-mark) 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: background-size 0.7s 0.35s cubic-bezier(0.6, 0, 0.2, 1);
  padding: 0 2px;
  margin: 0 -2px;
}
.us-page.is-on .us-mk { background-size: 100% 100%; }
.us-text { font-size: 15px; line-height: 1.5; color: #3d4a63; font-weight: 500; max-width: 320px; margin: 0 0 4px; }

/* Tap the right side for next, left for previous (like stories) */
.us-tap { position: absolute; top: 0; bottom: 0; border: none; background: none; padding: 0; z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.us-tap--prev { left: 0; width: 35%; }
.us-tap--next { right: 0; width: 65%; }

.us-foot { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; position: relative; z-index: 3; }
.us-update {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 17px 18px; border: none; border-radius: 16px;
  background: var(--color-ink); color: #fff; font: 700 15px var(--font-main); cursor: pointer;
  transition: background 0.25s, transform 0.12s;
}
.us-update:active { transform: scale(0.985); }
.us-update svg { width: 20px; height: 20px; }
.us-update.is-busy { background: var(--color-mint-dark); cursor: progress; }
.us-update.is-busy svg { animation: us-nudge 0.9s ease-in-out infinite; }
@keyframes us-nudge { 50% { transform: translateX(4px); } }
.us-later { border: none; background: none; color: var(--color-muted); font: 700 13px var(--font-main); padding: 12px; cursor: pointer; }
.us-note { font-size: 12px; color: var(--color-muted); text-align: center; margin: 10px 0 0; }

/* ---------- Small card ---------- */
.ut {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 9000;
  max-width: 440px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 12px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 12px 32px rgba(8, 20, 47, 0.16), 0 0 0 1px rgba(8, 20, 47, 0.05);
  font-family: var(--font-main);
  transform: translateY(calc(100% + 100px));
  transition: transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.ut.is-open { transform: none; }
.ut-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--color-mint-soft); color: var(--color-mint-dark); display: grid; place-items: center; }
.ut-ic svg { width: 20px; height: 20px; }
.ut-txt { flex: 1; min-width: 0; }
.ut-txt strong { display: block; font-size: 14px; font-weight: 800; color: var(--color-ink); }
.ut-txt small { display: block; font-size: 12px; font-weight: 500; color: var(--color-muted); margin-top: 2px; }
.ut-go { border: none; background: var(--color-ink); color: #fff; font: 700 13px var(--font-main); padding: 10px 14px; border-radius: 12px; cursor: pointer; flex-shrink: 0; }
.ut-x { position: absolute; top: -8px; right: -4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-line); background: #fff; color: var(--color-muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ut-x svg { width: 10px; height: 10px; }

@media (prefers-reduced-motion: reduce) {
  .us, .ut, .us-page, .us-copy > *, .us-mk { transition: none; }
  .us-bars i.is-now b { animation: none; transform: scaleX(1); }
  .us-update.is-busy svg { animation: none; }
}