/* ============================================================================================================
   LOOK v5 "deep indigo, glass, one ring" (8 Oct 2026). Si: "Sweatcoin is beautiful."
   Taken from Sweatcoin's own App Store screens (not from memory): a deep indigo page with a violet glow at the top
   instead of flat black; cards that read as frosted glass with no hard outline; large round corners; one hero
   number in a ring; a tab bar that floats as a pill; white pill buttons on a violet card for the one thing to do.
   Kept from brand v4: the lime accent, the lime E, Plus Jakarta Sans, sentence case.

   This file sits on top of app.css and is linked from index.html after it. Screen stylesheets load later, so the
   rules here start with :root to win over them. To go back to brand v4, take the one <link> out of index.html.
   No blur on cards (it makes scrolling stutter on a phone): the glass is a gradient, the blur is on the tab bar only.
   ============================================================================================================ */
:root {
  --paper: #0d0b1f;
  --grey-1: #0d0b1f;
  --black: #120f2b;
  --white: #1c1942;
  --grey-2: #262354;
  --grey-3: #3b3772;
  --ink: #f5f4ff;
  --ink-2: #dcd9f5;
  --muted: #a9a5c9;
  --navy: #3a2a8f;
  --violet: #7c5cff;
  --violet-2: #a895ff;
  --sky: #62c8ff;
  --warm: #ffb14a;
  --violet-3: #b46cff;
  --grad-a: #6a4cff;
  --grad-b: #4a2fd0;
  --grad-c: #2b1c8c;
  --on-white: #17123c;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.16);
  --on-dark-muted: rgba(235,232,255,.64);
  --radius-m: 18px;
  --radius-l: 26px;
  --glass: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 34px rgba(6,4,26,.38);
}

/* the page: one fixed wash behind everything, so cards float on it and nothing repaints as you scroll */
html { background: #0d0b1f; }
body { background: transparent; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(124,92,255,.46), rgba(124,92,255,0) 62%),
    radial-gradient(70% 40% at 105% 28%, rgba(98,200,255,.14), rgba(98,200,255,0) 60%),
    linear-gradient(180deg, #17123c 0%, #0d0b1f 52%, #0a0918 100%); }
body::before { background: rgba(13,11,31,.8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root .section, :root .section.dark, :root .section.grey { background: transparent; }
.boot-wait, .auth .side, .boot-error { background: linear-gradient(180deg, #1b1546 0%, #0d0b1f 70%); }

/* glass: every card, and the tiles that behave like cards */
:root .card, :root .on-dark .metric, :root .ask, :root .lunch-card, :root .coach-card, :root .fb-row {
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--glass-edge);
}
:root .photo-card { border-radius: var(--radius-l); box-shadow: 0 16px 34px rgba(6,4,26,.45); }
:root .sheet { background: linear-gradient(180deg, #231f52 0%, #17143a 100%); box-shadow: 0 -18px 50px rgba(0,0,0,.5); }
:root .sheet-backdrop.open { background: rgba(8,6,24,.62); }
:root input, :root select, :root textarea { background: rgba(255,255,255,.07); border-color: var(--line-2); }
:root .chip { background: rgba(255,255,255,.07); border-color: transparent; }
:root .chip.on { background: #fff; color: var(--on-white); border-color: #fff; }
:root .pill { background: rgba(255,255,255,.12); }
:root .pill.blue { background: var(--blue); color: var(--on-accent); }
:root .bar { background: rgba(255,255,255,.10); }

/* the one lime button carries a soft glow; quiet buttons are glass */
:root .btn:not(.secondary):not(.quiet) { box-shadow: 0 10px 26px rgba(200,255,61,.22); font-weight: 700; }
:root .btn.secondary, :root .btn.quiet { background: rgba(255,255,255,.07); border-color: transparent; box-shadow: none; }
:root #toast { background: #fff; color: var(--on-white); box-shadow: 0 12px 30px rgba(0,0,0,.4); }

@media (max-width: 720px) {
  /* the logo row scrolls away with the page; the screen starts with its own content */
  :root { --nav-h: 52px; --tabbar-h: calc(74px + max(10px, env(safe-area-inset-bottom, 0px) - 8px)); }
  :root .nav { position: static; height: var(--nav-h); background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .nav .brand { font-size: 19px; }
  /* the mark is a lime E on black, blended into the page: the bar must not be its own layer or the black shows */
  :root .nav { view-transition-name: none; }
  :root .section { padding: 20px 0; }

  /* the tab bar floats: a glass pill clear of the edges, the lit tab sitting in its own soft pill */
  :root .tabbar { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom, 0px) - 8px); height: 64px; padding: 0 6px; align-items: center;
    border: 1px solid rgba(255,255,255,.10); border-radius: 26px; background: rgba(30,26,72,.72);
    -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px);
    box-shadow: 0 14px 36px rgba(4,3,20,.55), inset 0 1px 0 rgba(255,255,255,.10); }
  :root .tabbar a { min-height: 52px; margin: 0 2px; border-radius: 18px; }
  :root .tabbar a.active { background: rgba(200,255,61,.13); }
  :root .sticky-bar { background: rgba(20,17,50,.9); border-top-color: var(--line); }
}

/* the two tick boxes on "Create your account" */
.auth-agree { display: grid; gap: 4px; }
.auth-agree .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.auth-agree .check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--blue); }
.auth-agree .check a { text-decoration: underline; text-underline-offset: 3px; }
.auth-note { padding: 14px 16px; border-radius: var(--radius-m); background: rgba(200,255,61,.10); color: var(--ink); font-size: 14.5px; line-height: 1.45; }
.ai-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(8,6,24,.66); animation: jb-in .18s ease both; }
.ai-ask { display: grid; gap: 12px; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 22px 20px 18px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--grey-2) 0%, var(--white) 100%); box-shadow: 0 20px 60px rgba(0,0,0,.55); }
@media (min-width: 721px) { .ai-overlay { align-items: center; } }
.ai-ask p { font-size: 15px; line-height: 1.5; }
.ai-ask a { text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }

/* The daily pop-up (screens/today-idea.js): one card from the bottom, once a day. A check-in of four rows, each
   five segments that fill as far as the answer, then one idea with one button. */
.daily-overlay { position: fixed; inset: 0; z-index: 75; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(8,6,24,.62); animation: jb-in .2s ease both; }
.daily-overlay.closing { opacity: 0; transition: opacity .18s ease; }
.daily-card { display: grid; gap: 12px; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 22px 20px 16px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(110% 70% at 50% 0%, rgba(124,92,255,.34), rgba(124,92,255,0) 70%), linear-gradient(180deg, var(--grey-2) 0%, var(--white) 100%); box-shadow: 0 20px 60px rgba(0,0,0,.55); animation: daily-up .32s cubic-bezier(.2,.9,.2,1) both; }
@keyframes daily-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 721px) { .daily-overlay { align-items: center; } }
.daily-kicker { font-size: 13px; font-weight: 700; color: var(--blue); }
.daily-card h3 { font-size: 23px; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.daily-line { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.daily-actions { display: grid; gap: 8px; margin-top: 6px; }
.daily-actions .btn { min-height: 50px; }
.daily-foot { font-size: 12.5px; color: var(--muted); text-align: center; }
.daily-scales { display: grid; gap: 12px; margin-top: 2px; }
.daily-scale { display: grid; gap: 8px; }
.daily-scale-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.daily-scale-head span { font-size: 15px; font-weight: 600; }
.daily-scale-head i { font-style: normal; font-size: 13.5px; color: var(--blue); min-height: 18px; }
.daily-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.daily-dots button { height: 40px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); touch-action: manipulation; transition: background-color .16s ease, transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease; }
.daily-dots button:active { transform: scale(.94); }
.daily-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: -2px; }
.daily-dots button.pick { background: var(--blue); box-shadow: 0 0 14px rgba(200,255,61,.4); }
@media (prefers-reduced-motion: reduce) { .daily-card, .daily-overlay { animation: none; } }

/* "Tell me about your week" (screens/week-tell.js): a round lime microphone, a box to type in, then the list of what
   was understood, each row a tick. The microphone pulses while it is listening. */
.tell { display: grid; gap: 14px; padding: 18px; }
.tell-top { display: flex; align-items: center; gap: 14px; }
.tell-head h3 { font-size: 20px; letter-spacing: -0.02em; }
.tell-head p { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.tell-mic { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--blue); color: var(--on-accent); box-shadow: 0 10px 26px rgba(200,255,61,.26); touch-action: manipulation; transition: transform .14s cubic-bezier(.2,.8,.2,1), background-color .16s ease; }
.tell-mic:active { transform: scale(.94); }
.tell-mic:disabled { opacity: .5; }
.tell-mic.on { background: #fff; color: var(--on-white); animation: tell-pulse 1.4s ease-out infinite; }
@keyframes tell-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.tell textarea { width: 100%; min-height: 64px; resize: vertical; font-size: 16px; line-height: 1.45; }
.tell-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tell-actions .muted { font-size: 14px; }
#tellResult { scroll-margin-top: 16px; }
.tell-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tell-row { display: grid; grid-template-columns: auto 42px 1fr; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius-m); background: rgba(255,255,255,.06); cursor: pointer; }
.tell-row input { width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--blue); }
.tell-day { font-size: 13px; font-weight: 700; color: var(--blue); }
.tell-what { display: grid; gap: 2px; min-width: 0; }
.tell-what b { font-size: 15.5px; font-weight: 600; }
.tell-what i { font-style: normal; font-size: 13.5px; color: var(--muted); }
.tell-unclear { font-size: 14px; margin-top: 10px; }
.tell-yes { display: grid; gap: 8px; margin-top: 14px; }
.tell-yes .btn { min-height: 50px; }
.tell-said { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tell-said p { font-size: 14px; line-height: 1.45; }
.tell-said b { color: var(--ink-2); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tell-mic.on { animation: none; } }

/* Connecting a calendar (the sheet opened from the card above). */
.cal-sheet { display: grid; gap: 12px; }
.cal-sheet h3 { font-size: 22px; letter-spacing: -0.02em; }
.cal-sheet p { font-size: 15px; line-height: 1.5; }
.cal-on { color: var(--blue); font-weight: 600; }
.cal-field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.cal-field input { width: 100%; font-size: 16px; }
.cal-how { padding: 12px 14px; border-radius: var(--radius-m); background: rgba(255,255,255,.06); }
.cal-how summary { font-size: 15px; font-weight: 600; min-height: 32px; cursor: pointer; }
.cal-how p { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.tell-link { border: 0; background: none; padding: 8px 2px; min-height: 44px; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }