/* ==========================================================================
   Getchup UI (refined 2026) — the mobile app, rebuilt in HTML/CSS
   Same screens, features, copy and data as the team's 2024 Figma design;
   cleaner spacing, calmer hierarchy, consistent components.
   Brand: Work Sans (headings) + Archivo (body) · Green #006655 · Mint #AFCFCC ·
   Pink #F1938E · Red #E3281C · cool-tone gradient to calm users down.

   Scaling: screens are authored at 390 × 844 design px (24.375em × 52.75em,
   1em = 16 design px) and scale to their container with cqw units.
   Mockups are decorative (role="img" + aria-label on the frame).
   ========================================================================== */

/* ---------- Phone frame ---------- */
.gux-phone { container-type: inline-size; position: relative; }
.gux-phone__body {
  position: relative;
  padding: 2.6cqw;
  border-radius: 15cqw;
  background: #16191A;
  box-shadow:
    inset 0 0 0 0.6cqw #2E3436,
    0 2px 4px rgba(10, 30, 26, 0.06),
    0 40px 70px -34px rgba(10, 40, 34, 0.5);
}
.gux-phone__screen { position: relative; overflow: hidden; border-radius: 12.6cqw; background: #fff; }
.gux-phone__island { position: absolute; z-index: 5; top: 2.7cqw; left: 50%; width: 29cqw; height: 8.2cqw; translate: -50% 0; border-radius: 99px; background: #0B0E0F; }
.gux-screen { container-type: inline-size; }
.gux-screen > .gux { font-size: calc(100cqw / 24.375); width: 24.375em; height: 52.75em; }
.gux-fit { container-type: inline-size; }
.gux-fit > .gux { font-size: calc(100cqw / var(--w, 24)); width: calc(var(--w, 24) * 1em); }

/* ---------- Tokens + base ---------- */
.gux {
  --k-green: #006655;
  --k-green-2: #0C7A67;
  --k-mint: #AFCFCC;
  --k-mint-50: #EAF4F2;
  --k-mint-100: #D6EAE6;
  --k-pink: #F1938E;
  --k-pink-50: #FDECEA;
  --k-red: #E3281C;
  --k-yellow: #F3D95B;
  --k-yellow-50: #FCF6D8;
  --k-blue: #92B4EE;
  --k-ink: #191C1D;
  --k-ink-2: #444A4D;
  --k-muted: #7C8386;
  --k-line: #ECEFEF;
  --k-line-2: #D9DEDF;
  --k-card: #FFFFFF;
  --k-shadow: 0 0 0 1px rgba(25, 28, 29, 0.05), 0 0.4em 1.2em -0.5em rgba(0, 60, 50, 0.12);
  --k-wash:
    radial-gradient(90% 60% at 0% 0%, #FBF6C9 0%, rgba(251, 246, 201, 0) 60%),
    radial-gradient(80% 60% at 100% 10%, #D7ECF6 0%, rgba(215, 236, 246, 0) 60%),
    radial-gradient(70% 55% at 10% 55%, #EFE3F7 0%, rgba(239, 227, 247, 0) 65%),
    radial-gradient(80% 60% at 95% 70%, #CFE0F8 0%, rgba(207, 224, 248, 0) 65%),
    #F4F8F6;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--k-wash);
  color: var(--k-ink);
  font-family: "Archivo", system-ui, sans-serif;
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.gux *, .gux *::before, .gux *::after { box-sizing: border-box; }
.gux--plain { background: #fff; }
.gux--clear { background: transparent; overflow: visible; }
.gux .k-i { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gux .k-i--fill { fill: currentColor; stroke: none; }
.gux svg.k-art { display: block; flex: none; }

.k-h1, .k-h2, .k-h3, .k-brand { font-family: "Work Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
.k-brand { font-size: 1.375em; font-weight: 700; letter-spacing: -0.03em; }
.k-h1 { font-size: 1.625em; font-weight: 700; line-height: 1.15; }
.k-h2 { font-size: 1.1875em; font-weight: 700; line-height: 1.2; }
.k-h3 { font-size: 0.9375em; font-weight: 600; line-height: 1.25; }
.k-sub { font-size: 0.8125em; color: var(--k-ink-2); }
.k-small { font-size: 0.75em; color: var(--k-muted); }
.k-tiny { font-size: 0.6875em; color: var(--k-muted); }
.k-row { display: flex; align-items: center; gap: 0.7em; }
.k-between { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; }

/* ---------- Chrome ---------- */
.k-status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 3.4em; padding: 0.5em 1.9em 0; font-size: 0.9375em; font-weight: 600; color: var(--k-ink); }
.k-status__icons { display: flex; align-items: center; gap: 0.35em; }
.k-status__icons svg { height: 0.8em; width: auto; fill: currentColor; }
.k-bar { flex: none; display: flex; align-items: center; gap: 0.8em; height: 3.4em; padding: 0 1.3em; }
.k-bar__title { font-family: "Work Sans", sans-serif; font-size: 1.0625em; font-weight: 700; letter-spacing: -0.02em; }
.k-bar__side { font-size: 0.8125em; font-weight: 500; color: var(--k-ink-2); }
.k-bar__side--go { color: var(--k-green); font-weight: 600; }
.k-body { flex: 1; min-height: 0; overflow: hidden; padding: 0.4em 1.1em 6.6em; display: flex; flex-direction: column; gap: 0.85em; }
.k-nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 0.7em 0.6em 1.9em; background: rgba(255, 255, 255, 0.97); box-shadow: 0 -1px 0 var(--k-line);
}
.k-nav span { display: grid; justify-items: center; gap: 0.25em; font-size: 0.625em; font-weight: 500; color: var(--k-muted); }
.k-nav span .k-i { width: 2.1em; height: 2.1em; }
.k-nav span.is-on { color: var(--k-red); }
.k-nav .k-nav__add { align-self: center; }
.k-nav .k-nav__add i { display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: 50%; background: var(--k-green); color: #fff; box-shadow: 0 0.4em 0.9em -0.3em rgba(0, 102, 85, 0.6); }
.k-nav .k-nav__add i .k-i { width: 1.35em; height: 1.35em; stroke-width: 2.2; }
.k-nav::after, .k-home::after { content: ""; position: absolute; left: 50%; bottom: 0.55em; width: 8.5em; height: 0.3em; translate: -50% 0; border-radius: 9px; background: var(--k-ink); }
.k-home { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5em; }

/* ---------- Cards + controls ---------- */
.k-card { background: var(--k-card); border-radius: 1.1em; box-shadow: var(--k-shadow); padding: 1em; }
.k-card--mint { background: var(--k-mint-50); box-shadow: none; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; height: 3em; padding: 0 1.3em; border-radius: 0.9em; font-family: "Work Sans", sans-serif; font-size: 0.875em; font-weight: 600; white-space: nowrap; }
.k-btn .k-i { width: 1.25em; height: 1.25em; }
.k-btn--green { background: var(--k-green); color: #fff; }
.k-btn--line { background: #fff; color: var(--k-green); box-shadow: inset 0 0 0 1.5px var(--k-green); }
.k-btn--soft { background: var(--k-mint-50); color: var(--k-green); }
.k-btn--block { display: flex; width: 100%; }
.k-round { display: grid; place-items: center; width: 4.2em; height: 4.2em; border-radius: 50%; font-family: "Work Sans", sans-serif; font-size: 0.875em; font-weight: 600; color: #fff; }
.k-round--red { background: var(--k-red); box-shadow: 0 0.5em 1.2em -0.4em rgba(227, 40, 28, 0.6); }
.k-round--green { background: var(--k-green); box-shadow: 0 0.5em 1.2em -0.4em rgba(0, 102, 85, 0.55); }
.k-field { display: grid; gap: 0.4em; }
.k-label { font-size: 0.75em; font-weight: 600; color: var(--k-ink-2); }
.k-input { display: flex; align-items: center; gap: 0.5em; height: 2.9em; padding: 0 0.9em; border-radius: 0.8em; background: #fff; box-shadow: inset 0 0 0 1px var(--k-line-2); font-size: 0.8125em; color: var(--k-ink); }
.k-input--focus { box-shadow: inset 0 0 0 1.5px var(--k-green), 0 0 0 0.3em rgba(175, 207, 204, 0.5); }
.k-link { font-size: 0.75em; font-weight: 600; color: var(--k-green); text-decoration: underline; text-underline-offset: 0.25em; }
.k-toggle { position: relative; width: 2.5em; height: 1.45em; border-radius: 99em; background: var(--k-line-2); flex: none; }
.k-toggle::after { content: ""; position: absolute; top: 0.2em; left: 0.2em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.15); }
.k-toggle.is-on { background: var(--k-green); }
.k-toggle.is-on::after { left: auto; right: 0.2em; }
.k-seg { display: flex; padding: 0.22em; border-radius: 0.8em; background: #EEF1F1; }
.k-seg span { flex: 1; display: grid; place-items: center; height: 2.15em; border-radius: 0.6em; font-size: 0.75em; font-weight: 500; color: var(--k-muted); }
.k-seg span.is-on { background: var(--k-green); color: #fff; font-weight: 600; }
.k-tabs { display: flex; gap: 1.4em; box-shadow: inset 0 -1px 0 var(--k-line); }
.k-tabs span { padding: 0.6em 0 0.75em; font-size: 0.8125em; font-weight: 500; color: var(--k-muted); }
.k-tabs span.is-on { color: var(--k-green); font-weight: 600; box-shadow: inset 0 -0.15em 0 var(--k-green); }
.k-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.k-steps i { height: 0.35em; border-radius: 9px; background: var(--k-line); }
.k-steps i.is-on { background: var(--k-mint); }
.k-steps i.is-done { background: var(--k-green); }
.k-meter { height: 0.5em; border-radius: 9px; background: var(--k-line); overflow: hidden; }
.k-meter i { display: block; height: 100%; border-radius: 9px; background: var(--k-green); }

/* ---------- Home ---------- */
.k-hello { position: relative; padding: 0.2em 0.2em 0.4em; min-height: 7.2em; }
.k-hello .k-h1 { max-width: 9em; }
.k-hello .k-sub { margin-top: 0.4em; }
.k-hello .k-art { position: absolute; right: 0; top: -0.4em; width: 6.2em; height: 6.2em; }
.k-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-top: 0.7em; }
.k-week span { display: grid; gap: 0.25em; padding: 0.45em 0; border-radius: 0.75em; font-size: 0.625em; color: var(--k-muted); }
.k-week span b { font-family: "Work Sans", sans-serif; font-size: 1.55em; font-weight: 600; color: var(--k-ink); }
.k-week span.is-on { background: var(--k-mint); color: var(--k-green); }
.k-week span.is-on b { color: var(--k-green); }
.k-task { display: grid; grid-template-columns: 0.3em auto 1fr auto; gap: 0.75em; align-items: center; padding: 0.75em 0; box-shadow: inset 0 -1px 0 var(--k-line); }
.k-task:last-child { box-shadow: none; }
.k-task > i { align-self: stretch; border-radius: 9px; background: var(--c, var(--k-mint)); }
.k-check { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--k-line-2); color: #fff; }
.k-check.is-on { background: var(--k-green); box-shadow: none; }
.k-check .k-i { width: 0.9em; height: 0.9em; stroke-width: 2.6; }
.k-task__t { font-size: 0.875em; font-weight: 600; }
.k-task__s { margin-top: 0.15em; font-size: 0.6875em; color: var(--k-muted); }
.k-task__time { align-self: start; margin-top: 0.15em; font-size: 0.6875em; font-weight: 500; color: var(--k-muted); }
.k-task.is-done .k-task__t { color: var(--k-muted); text-decoration: line-through; font-weight: 500; }

/* ---------- Lists (new task, library, profile, notifications) ---------- */
.k-list > div { display: flex; align-items: center; gap: 0.75em; padding: 0.85em 0.2em; box-shadow: inset 0 -1px 0 var(--k-line); font-size: 0.8125em; color: var(--k-ink-2); }
.k-list > div:last-child { box-shadow: none; }
.k-list > div .k-i { color: var(--k-green); }
.k-list > div.is-title { font-family: "Work Sans", sans-serif; font-size: 0.9375em; font-weight: 600; color: var(--k-ink); }
.k-list .k-end { margin-left: auto; color: var(--k-muted); }
.k-or { display: flex; align-items: center; gap: 0.8em; font-size: 0.625em; font-weight: 600; letter-spacing: 0.08em; color: var(--k-muted); }
.k-or::before, .k-or::after { content: ""; flex: 1; height: 1px; background: var(--k-line); }
.k-libgroup { font-size: 0.6875em; font-weight: 600; color: var(--k-muted); margin: 0.3em 0 -0.2em; }
.k-libitem { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.8em; border-radius: 0.8em; background: #fff; box-shadow: var(--k-shadow); font-size: 0.8125em; font-weight: 500; }
.k-libitem .k-i { color: var(--k-green); }
.k-libitem.is-on { background: var(--k-mint-50); box-shadow: inset 0 0 0 1.5px var(--k-green); }
.k-libitem .k-end { margin-left: auto; font-size: 0.85em; color: var(--k-muted); }

/* ---------- Focus mode ---------- */
.k-focus { display: grid; justify-items: center; text-align: center; gap: 0.2em; }
.k-focus .k-art { width: 10em; height: 10em; margin: 0.4em 0 0.2em; }
.k-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
.k-controls > span:first-child { justify-self: start; font-size: 0.8125em; color: var(--k-muted); }
.k-controls > span:last-child { justify-self: end; font-size: 0.8125em; font-weight: 600; color: var(--k-green); }
.k-timer { font-family: "Work Sans", sans-serif; font-size: 2em; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Progress ---------- */
.k-avatar { width: 3.6em; height: 3.6em; border-radius: 50%; flex: none; overflow: hidden; background: var(--k-mint-100); }
.k-avatar svg { width: 100%; height: 100%; display: block; }
.k-legend { display: flex; gap: 1em; font-size: 0.6875em; color: var(--k-muted); }
.k-legend i { display: inline-block; width: 0.65em; height: 0.65em; border-radius: 50%; margin-right: 0.35em; vertical-align: 0; }
.k-chart svg { display: block; width: 100%; height: auto; }
.k-chart text { font-family: "Archivo", sans-serif; fill: var(--k-muted); }
.k-stat { display: flex; justify-content: space-between; padding: 0.7em 0.1em; box-shadow: inset 0 -1px 0 var(--k-line); font-size: 0.8125em; color: var(--k-ink-2); }
.k-stat:last-child { box-shadow: none; }
.k-stat b { color: var(--k-ink); font-weight: 600; }

/* ---------- Calendar ---------- */
.k-month { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.35em; text-align: center; }
.k-month b { font-size: 0.625em; font-weight: 500; color: var(--k-muted); padding-bottom: 0.4em; }
.k-month span { position: relative; display: grid; place-items: center; height: 2.3em; font-size: 0.8125em; color: var(--k-ink-2); }
.k-month span.is-done::before { content: ""; position: absolute; width: 2.1em; height: 2.1em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--k-mint); }
.k-month span.is-today { color: #fff; font-weight: 600; }
.k-month span.is-today::before { content: ""; position: absolute; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--k-red); z-index: -1; }
.k-month span.has::after { content: ""; position: absolute; bottom: -0.05em; width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--k-muted); opacity: 0.5; }
.k-month span.is-today { z-index: 0; }

/* ---------- Notifications ---------- */
.k-note { display: grid; grid-template-columns: auto 1fr auto; gap: 0.25em 0.6em; padding: 0.85em 1em; border-radius: 1em; background: #fff; box-shadow: var(--k-shadow); }
.k-note.is-new { background: var(--k-mint-50); box-shadow: inset 0 0 0 1px var(--k-mint); }
.k-note .k-i { color: var(--k-red); grid-row: 1 / 3; margin-top: 0.1em; }
.k-note__t { font-family: "Work Sans", sans-serif; font-size: 0.875em; font-weight: 600; color: var(--k-ink); }
.k-note__time { font-size: 0.6875em; color: var(--k-muted); }
.k-note p { grid-column: 2 / 4; font-size: 0.75em; line-height: 1.45; color: var(--k-ink-2); }
.k-note .k-link { grid-column: 2 / 4; margin-top: 0.2em; font-size: 0.6875em; }

/* ---------- Survey + sign in ---------- */
.k-option { display: grid; place-items: center; height: 3em; border-radius: 99em; box-shadow: inset 0 0 0 1.5px var(--k-green); font-size: 0.875em; font-weight: 500; color: var(--k-ink); }
.k-option.is-on { background: var(--k-green); color: #fff; box-shadow: none; font-weight: 600; }
.k-blobs { position: absolute; left: 0; right: 0; bottom: 0; height: 8em; overflow: hidden; }
.k-blobs i { position: absolute; bottom: -4.5em; width: 10em; height: 10em; border-radius: 50%; }

/* ---------- Wireframe mode (lo-fi, greyscale) ---------- */
.gux--wire {
  --k-green: #3A3A3A; --k-green-2: #555; --k-mint: #D2D2D2; --k-mint-50: #F1F1F1; --k-mint-100: #E5E5E5;
  --k-pink: #BDBDBD; --k-pink-50: #EFEFEF; --k-red: #6B6B6B; --k-yellow: #CFCFCF; --k-yellow-50: #F1F1F1; --k-blue: #A9A9A9;
  --k-ink: #1E1E1E; --k-ink-2: #4A4A4A; --k-muted: #8A8A8A; --k-line: #E3E3E3; --k-line-2: #BDBDBD;
  --k-shadow: 0 0 0 1px #D4D4D4;
  --k-wash: #FFFFFF;
  font-family: "Archivo", sans-serif;
}
.gux--wire .k-h1, .gux--wire .k-h2, .gux--wire .k-h3, .gux--wire .k-brand, .gux--wire .k-bar__title { font-family: "Archivo", sans-serif; }
.gux--wire .k-art, .gux--wire .k-hello .k-art { display: none; }
.gux--wire .k-task > i { background: #BDBDBD; }
.gux--wire .k-nav .k-nav__add i { box-shadow: none; }
.k-ph { display: grid; place-items: center; border-radius: 0.8em; background: #EDEDED; color: #A5A5A5; }
.k-ph svg { width: 2em; height: 2em; fill: none; stroke: currentColor; stroke-width: 1.4; }
.k-wbar { height: 0.55em; border-radius: 9px; background: #E2E2E2; }