/* ==========================================================================
   Round twenty-one (2026-08-21): the daily coins for logging in.

   Built to the house style at
   businesses/chat-app/artifacts/augh-yahh-house-style.css and to the mockup
   at artifacts/round-twentyone-daily-login-plan.html. Every colour comes
   from style.css; nothing new is declared here except the placeholder rings
   for the three avatars, which are art and are marked as such below.
   ========================================================================== */

/* ---- the sheet, over a dimmed Home ---- */
.d-veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .72);
  opacity: 0; transition: opacity .22s ease;
}
.d-veil.in { opacity: 1; }

.d-sheet {
  position: fixed; left: 50%; bottom: 0; z-index: 61;
  width: 100%; max-width: 432px; transform: translate(-50%, 100%);
  background: var(--panel);
  border-radius: var(--r) var(--r) 0 0;
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s cubic-bezier(.2, .9, .3, 1);
  max-height: 92vh; overflow-y: auto;
}
.d-sheet.in { transform: translate(-50%, 0); }

.d-handle { width: 38px; height: 4px; border-radius: 999px; background: #3a3a42; margin: 0 auto 14px; }
.d-eyebrow { font-size: .75rem; font-weight: 700; color: var(--text-2); text-align: center; margin: 0; }
.d-sheet h2 {
  font-family: var(--round); font-weight: 800; font-size: 1.19rem;
  text-align: center; margin: 3px 0 14px;
}

/* ---- the seven days ---- */
.d-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 15px; }
.d-day {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 7px 0 6px; text-align: center;
}
.d-day .dn { font-size: .58rem; color: var(--text-3); font-weight: 500; }
.d-day .dv { font-size: .75rem; font-weight: 700; color: var(--text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.d-day .dc {
  width: 16px; height: 16px; border-radius: 50%; margin: 3px auto 0;
  background: radial-gradient(circle at 40% 30%, #FFF0A8, var(--gold) 60%, #C9A200);
}
.d-day .dt { font-size: .7rem; color: var(--gold); opacity: .6; line-height: 1; margin: 3px 0 0; }
.d-day.got { border-color: rgba(255, 215, 0, .28); }
.d-day.got .dv { color: var(--gold); opacity: .5; }
.d-day.now {
  border-color: var(--gold);
  background: radial-gradient(circle at 50% 0%, rgba(255, 215, 0, .22), var(--panel-2) 75%);
  box-shadow: 0 0 16px rgba(255, 215, 0, .35);
}
.d-day.now .dn { color: var(--gold); font-weight: 700; }
.d-day.now .dv { color: var(--gold); font-size: .81rem; }
/* Day 7 is the one worth turning up for, so it is marked -- but NOT in
   --brand: pink is "what you press" everywhere in this app and this tile is
   not pressable. --brand-2 is the house style's border-and-glow colour, which
   is exactly this job. Caught looking at the real screen, 2026-08-21. */
.d-day.last { border-color: rgba(138, 43, 226, .75); }
.d-day.last .dv { color: var(--violet); }
.d-day.last.now { border-color: var(--gold); }
.d-day.last.now .dv { color: var(--gold); }

/* ---- the 7 / 15 / 30 day avatar strip ---- */
.d-mile-wrap { margin-bottom: 14px; }
.d-mile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.d-mile-head .t { font-family: var(--round); font-weight: 800; font-size: .81rem; }
.d-mile-head .r { font-size: .7rem; color: var(--text-2); white-space: nowrap; }
.d-mile-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.d-mile {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 4px 8px; text-align: center;
}
.d-mile .lb { font-size: .62rem; font-weight: 700; color: var(--text); }
.d-mile .ex { font-size: .56rem; color: var(--text-3); margin-top: 1px; }
.d-mile.locked .d-av { filter: grayscale(1); opacity: .42; }
.d-mile.locked .lb { color: var(--text-2); }
.d-mile.on { border-color: var(--gold); background: rgba(255, 215, 0, .07); }
.d-mile.on .ex { color: var(--gold); font-weight: 700; }

/* ART. The three placeholder rings. Martin's call 2026-08-21: the avatars
   themselves are a later round, so what is drawn is a lit ring and a shape,
   one look per milestone, sized like the frames it will sit beside. These are
   the only colours in this file that are not house-style tokens. */
.d-av {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 6px;
  background: #232329; border: 2px solid #3a3a42;
  display: flex; align-items: center; justify-content: center;
  font-size: .94rem; color: var(--text-3);
}
.d-av.st7  { border-color: #C77DFF; box-shadow: 0 0 10px rgba(199, 125, 255, .35); background: radial-gradient(circle at 40% 30%, #4a2d63, #1e1526); color: #E0B8FF; }
.d-av.st15 { border-color: #4FD1FF; box-shadow: 0 0 10px rgba(79, 209, 255, .35); background: radial-gradient(circle at 40% 30%, #17475c, #0d1f28); color: #A8E8FF; }
.d-av.st30 { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 215, 0, .45); background: radial-gradient(circle at 40% 30%, #5c4a12, #241d06); color: #FFE98A; }

/* the big win-an-avatar circle */
.d-win-av {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
  border: 3px solid #3a3a42; background: #232329; color: var(--text-3);
}
.d-win-av.st7  { border-color: #C77DFF; box-shadow: 0 0 34px rgba(199, 125, 255, .6); background: radial-gradient(circle at 40% 30%, #4a2d63, #1e1526); color: #E0B8FF; }
.d-win-av.st15 { border-color: #4FD1FF; box-shadow: 0 0 34px rgba(79, 209, 255, .6); background: radial-gradient(circle at 40% 30%, #17475c, #0d1f28); color: #A8E8FF; }
.d-win-av.st30 { border-color: var(--gold); box-shadow: 0 0 34px rgba(255, 215, 0, .6); background: radial-gradient(circle at 40% 30%, #5c4a12, #241d06); color: #FFE98A; }
.d-art-note {
  font-size: .58rem; color: var(--text-3); text-align: center;
  border: 1px dashed #3a3a42; border-radius: var(--r-sm);
  padding: 4px 8px; margin: 0 auto 12px; max-width: 250px;
}

/* ---- the amount and the button ---- */
.d-take { text-align: center; margin-bottom: 13px; }
.d-take .amt {
  font-family: var(--round); font-weight: 800; font-size: 2.75rem; line-height: 1;
  color: var(--gold); text-shadow: 0 0 26px rgba(255, 215, 0, .5);
  font-variant-numeric: tabular-nums;
}
.d-take .amt span { font-size: 1.5rem; }
.d-take .why { font-size: .78rem; color: var(--text-2); margin: 5px 0 0; }
.d-take .why b { color: var(--text); }
.d-take .pts { font-size: .7rem; color: var(--text-3); margin: 3px 0 0; }

.d-go {
  display: block; width: 100%; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-radius: 999px; padding: 14px; min-height: 46px;
  font-family: var(--round); font-weight: 800; font-size: .94rem; color: #fff;
}
.d-go:disabled { opacity: .6; cursor: default; }
.d-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.d-foot { text-align: center; font-size: .68rem; color: var(--text-3); margin: 10px 0 0; }
.d-err { text-align: center; font-size: .78rem; color: var(--red); margin: 10px 0 0; }

/* the streak broke */
.d-broke {
  border: 1px solid rgba(255, 154, 60, .45); background: rgba(255, 154, 60, .07);
  border-radius: var(--r-sm); padding: 8px 11px; margin-bottom: 13px;
  font-size: .72rem; color: var(--amber); text-align: center; font-weight: 500;
}

/* ---- what lands on the screen after the tap ---- */
.d-burst {
  position: fixed; left: 0; right: 0; top: 34%; z-index: 62;
  text-align: center; pointer-events: none;
  animation: d-pop .45s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.d-burst.out { animation: d-fade .4s ease-in forwards; }
.d-burst .amt {
  font-family: var(--round); font-weight: 800; font-size: 3.25rem;
  color: var(--gold); text-shadow: 0 0 34px rgba(255, 215, 0, .75);
  font-variant-numeric: tabular-nums;
}
.d-burst .lb { font-size: .81rem; color: var(--text); font-weight: 700; margin-top: 4px; }
@keyframes d-pop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes d-fade { to { opacity: 0; transform: translateY(-24px); } }

/* the coins flying to the balance */
.d-fly {
  position: fixed; z-index: 63; width: 16px; height: 16px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 40% 30%, #FFF0A8, var(--gold) 60%, #C9A200);
  box-shadow: 0 0 10px rgba(255, 215, 0, .8);
}

/* the balance chip it flies into */
.d-balance {
  position: fixed; z-index: 62; right: 16px; top: 10px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 999px;
  padding: 5px 12px 5px 8px; display: flex; align-items: center; gap: 6px;
  font-family: var(--round); font-weight: 800; font-size: .81rem; color: var(--gold);
  box-shadow: 0 0 18px rgba(255, 215, 0, .4);
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .2s ease;
}
.d-balance.in { opacity: 1; }
.d-balance .c {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #FFF0A8, var(--gold) 60%, #C9A200);
}

/* ---- the quiet row on Home for the rest of the day ---- */
.d-row {
  background: var(--panel); border-radius: var(--r); padding: 11px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 13px; width: 100%; border: 0; text-align: left; cursor: pointer;
  color: var(--text); font-family: var(--sans);
}
.d-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.d-row .lft { display: flex; align-items: center; gap: 9px; min-width: 0; }
.d-row .c {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: radial-gradient(circle at 40% 30%, #FFF0A8, var(--gold) 60%, #C9A200);
  opacity: .45;
}
.d-row .l { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.d-row .r { font-size: .72rem; color: var(--text-2); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .d-veil, .d-sheet { transition: none; }
  .d-burst, .d-burst.out { animation: none; }
  .d-fly { display: none; }
}

/* ---- round twenty-one: the streak avatar's clock on the Profile ---------
   Shown only while one is actually running. Its last day turns amber, which
   is this app's colour for a gate and for anything you cannot take back --
   never red, because nothing has broken and nobody did anything wrong. */
.d-timer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel); border: 1px solid #C77DFF; border-radius: var(--r);
  padding: 10px 13px; margin: 0 0 11px;
}
.d-timer.warn { border-color: var(--amber); }
.d-timer-l { min-width: 0; }
.d-timer-l b { display: block; font-size: .78rem; font-weight: 700; }
.d-timer-l small { display: block; font-size: .68rem; color: var(--text-2); }
.d-timer-r {
  font-family: var(--round); font-weight: 800; font-size: .81rem;
  color: #C77DFF; white-space: nowrap;
}
.d-timer.warn .d-timer-r { color: var(--amber); }