/* Treatly Glass — black glass, with the old app's colour and clarity.
 * The pastel commitment colours (rose, lavender, sand, sage, sky) and the
 * spectral gradient come from the original Treatly; so do the fonts. */

:root {
  --bg: #000;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.62);
  --ink-3: rgba(255, 255, 255, 0.38);
  --glass: rgba(255, 255, 255, 0.075);
  --glass-hi: rgba(255, 255, 255, 0.16);
  --rim: rgba(255, 255, 255, 0.14);
  --danger: #ff453a;
  --amber: #ffb547;
  --rose: #f2a7c3;
  --lavender: #b9a7f5;
  --sand: #edcf8e;
  --sage: #8fd8b0;
  --sky: #8ec9f2;
  /* was a pastel rainbow; Treatly is white on black glass: a cool silver sheen instead */
  --spectral: linear-gradient(120deg, #ffffff 0%, #f1f1f4 40%, #d6d6dc 100%);
  --spectral-ring: conic-gradient(from 200deg, #ffffff, #bdbdc4, #ffffff, #8e8e96, #ffffff);
  --blur-treats: 14px;
  --r-card: 30px;
  /* the Android app (Capacitor 8) passes the bars' heights as --safe-area-inset-*,
   * because its WebView may report env() as 0 under the status bar */
  --safe-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --bar-h: 64px;
  --bar-gap: 14px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Figtree', 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
  color: var(--ink);
}

.gi {
  display: block;
  flex: none;
}

:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

#g-app {
  position: relative;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  /* black, with a breath of the old spectral colour at the top */
  background:
    radial-gradient(55% 32% at 12% -6%, rgba(242, 167, 195, 0.13), transparent 70%),
    radial-gradient(50% 30% at 88% -4%, rgba(143, 216, 176, 0.1), transparent 70%),
    radial-gradient(120% 60% at 50% -10%, #111116 0%, #000 60%);
}
h1,
h2,
h3,
.g-stat strong {
  font-family: var(--font-display);
}

/* ---------- the material ---------- */

.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.05);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.05);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.06),
    inset 0 0 22px rgba(255, 255, 255, 0.035),
    0 12px 32px rgba(0, 0, 0, 0.55);
}

/* the specular rim: bright where light hits the top-left and bottom-right */
.glass::before,
.gcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.03) 60%,
    rgba(255, 255, 255, 0.3)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.g-btn {
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s;
}
.g-btn:active {
  transform: scale(0.88);
}
.g-btn--round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.g-btn--solid {
  background: var(--spectral);
  color: #17171a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 24px rgba(185, 167, 245, 0.28);
}
.g-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- screens ---------- */

#g-screens {
  position: absolute;
  inset: 0;
}

/* switching tabs: a quick fade and settle. No blur: blurring a whole screen
   of glass cards every frame is what made switching lag on phones */
.g-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity 0.18s ease,
    transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1),
    visibility 0s 0.18s;
}
.g-screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.18s ease,
    transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.g-screen.is-asleep {
  content-visibility: hidden;
}
/* the fade runs on the compositor: the screen is painted once, then moved */
.g-screen:not(.is-asleep) {
  will-change: opacity, transform;
}

.g-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: max(22px, calc(var(--safe-t) - 12px)) 16px calc(var(--safe-b) + var(--bar-h) + var(--bar-gap) + 40px);
}
.g-scroll::-webkit-scrollbar {
  display: none;
}

.g-head {
  padding: 0 6px 12px;
}
.g-head h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.g-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.g-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.g-head-actions {
  display: flex;
  gap: 10px;
}

.g-edge {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 20;
}
.g-edge--top {
  top: 0;
  /* just behind the status bar's own text, so the heading under it stays bright */
  height: max(10px, calc(var(--safe-t) - 14px));
  background: linear-gradient(#000 55%, rgba(0, 0, 0, 0));
}
.g-edge--bottom {
  bottom: 0;
  height: calc(var(--safe-b) + 110px);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
}

.g-list {
  /* not positioned: cards measure offsetTop from the scroller itself */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.g-section {
  padding: 22px 8px 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.g-empty {
  padding: 60px 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

/* ---------- task cards: sealed glass boxes ---------- */

.wob {
  position: relative;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: height 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), margin 0.45s;
}

.gcard {
  --accent: var(--sky);
  --rim: 1;
  --beat: 1s;
  position: relative;
  height: 158px;
  border-radius: var(--r-card);
  overflow: hidden;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 30px rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.gcard--friend {
  height: 176px;
}

/* a slight lift under the pointer; `scale` stays clear of the transform
   the drop and vanish animations own */
@media (hover: hover) and (pointer: fine) {
  .gcard {
    transition: scale 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  }
  .gcard:not(.is-open):not(.is-vanishing):hover {
    scale: 1.03;
  }
}

.gcard-treats {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(var(--blur-treats)) saturate(1.3);
  transform: scale(1.04);
  transition: filter 1.2s ease;
  z-index: 0;
}

/* frosted pane in front of the treats: grain + a cool sheen */
.gcard-frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.07) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
  opacity: 0.55;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.gcard::after {
  /* glass thickness: darker at the floor of the box so the text can sit on it */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* the old app's colour bar down the left of every commitment */
.gcard-bar {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
/* a colour that means nothing is noise: only a run of days keeps its bar */
.gcard:not(.gcard--run) .gcard-bar {
  display: none;
}

/* ---------- time pressure, in glass (see glass-pressure.js) ---------- */

/* final hour: light runs round the rim and drains like a timer */
.gcard-rim {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  padding: 2.5px;
  --rim-c: rgba(255, 255, 255, 0.75);
  background: conic-gradient(from 0deg, var(--rim-c) 0turn calc(var(--rim) * 1turn), rgba(255, 255, 255, 0.05) 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rim-c) 60%, transparent));
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.gcard[data-phase='rim'] .gcard-rim,
.gcard[data-phase='crack'] .gcard-rim,
.gcard[data-phase='final'] .gcard-rim {
  opacity: 1;
}
.gcard[data-phase='crack'] .gcard-rim {
  --rim-c: var(--amber);
}
.gcard[data-phase='final'] .gcard-rim {
  --rim-c: var(--danger);
}

/* final ten minutes: hairline cracks creep in from the edges */
.gcard-cracks {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* broken glass: a dark line under a bright edge, and a fine web between */
.gcard-cracks .gcr-shade {
  fill: rgba(0, 0, 0, 0.45);
}
.gcard-cracks .gcr-lit {
  fill: rgba(255, 255, 255, 0.92);
}
.gcard-cracks .gcr-web {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gcard-cracks .gcr-bruise {
  fill: rgba(255, 255, 255, 0.16);
}

/* final minute: the card beats, faster as it closes on zero */
.gcard[data-phase='final'] {
  animation: gHeart var(--beat) ease-in-out infinite;
}
.gcard[data-phase='final']::after {
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(255, 69, 58, 0.22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
}
@keyframes gHeart {
  0%,
  40%,
  100% {
    transform: none;
  }
  12% {
    transform: scale(1.014);
  }
  26% {
    transform: scale(1.006);
  }
}

.gcard-body {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.gcard-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
.gcard-sub {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.gcard-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  padding-right: 58px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gcard-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px 0 8px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.25);
}
.g-pill[hidden] {
  display: none;
}
.g-pill .gi {
  width: 16px;
  height: 16px;
}
.gcard[data-phase='rim'] .gcard-time {
  color: var(--amber);
}
.gcard[data-phase='crack'] .gcard-time {
  color: var(--amber);
}
.gcard[data-phase='final'] .gcard-time {
  color: #fff;
  background: rgba(255, 69, 58, 0.85);
  animation: gPulse var(--beat) ease-in-out infinite;
}
.gcard-count.is-fading {
  color: var(--amber);
}
.gcard[data-phase='final'] .gcard-count.is-fading {
  color: #ff8a80;
}
@keyframes gPulse {
  50% {
    opacity: 0.45;
  }
}

.gcard-check {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0);
  /* no backdrop blur: what's behind it is already frosted, and re-blurring
     a moving canvas every frame is what made scrolling heavy */
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 2.5px rgba(255, 255, 255, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1),
    background 0.3s,
    color 0.3s;
}
.gcard-check:active {
  transform: scale(0.86);
}
.gcard.is-done .gcard-check,
.gcard.is-opening .gcard-check {
  background: var(--sage);
  color: #0d2a1b;
  box-shadow: 0 0 24px rgba(143, 216, 176, 0.5);
}

/* finished: the glass takes the hit, breaks, and the treats come out.
   Once shattered the canvas draws its own per-treat haze, so the card's
   blur and frost go at once, with no fade to give the trick away. */
.gcard.is-opening {
  animation: gImpact 0.26s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes gImpact {
  35% {
    transform: scale(0.975);
  }
}
.gcard.is-shattered .gcard-treats,
.gcard.is-done .gcard-treats {
  filter: blur(0) saturate(1.1);
}
.gcard.is-shattered .gcard-treats,
.gcard.is-shattered .gcard-frost {
  transition: none;
}
.gcard.is-shattered .gcard-frost {
  opacity: 0;
}
.gcard.is-done .gcard-frost {
  opacity: 0.15;
}
.gcard.is-shattered,
.gcard.is-done {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.6);
}

.g-shatter {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 90;
}
.gcard.is-done .gcard-title {
  color: var(--ink-2);
}
.gcard.is-done .gcard-check {
  width: 36px;
  height: 36px;
  margin-top: -18px;
  pointer-events: none;
}
.gcard.is-done .gcard-check .gi {
  width: 20px;
  height: 20px;
}

.gcard.is-dropping {
  animation: gDrop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes gDrop {
  30% {
    transform: scale(0.985) translateY(2px);
  }
}

/* the end: black, then gone */
.gcard.is-vanishing {
  animation: gVanish 1.3s cubic-bezier(0.5, 0, 0.7, 0.4) forwards;
  pointer-events: none;
}
.gcard.is-vanishing .gcard-body,
.gcard.is-vanishing .gcard-check {
  animation: gFade 0.3s forwards;
}
.gcard.is-broken {
  visibility: hidden;
}
@keyframes gVanish {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(0);
    transform: scale(1.01);
  }
  100% {
    filter: brightness(0) blur(14px);
    transform: scale(0.86) translateY(-10px);
    opacity: 0;
  }
}
@keyframes gFade {
  to {
    opacity: 0;
  }
}

.g-avatar {
  --h: 200;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) 72% 78%), hsl(var(--h) 45% 46%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.5);
  flex: none;
}

/* ---------- the zoomed card ---------- */

#g-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.g-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#g-overlay.is-open {
  pointer-events: auto;
}
#g-overlay.is-open .g-overlay-bg {
  opacity: 1;
}
.g-overlay-close {
  position: absolute;
  z-index: 3;
  top: calc(var(--safe-t) + 14px);
  right: max(16px, calc(50% - 280px + 16px));
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#g-overlay.is-open .g-overlay-close {
  opacity: 1;
  transform: none;
}

.gcard.is-open {
  position: fixed;
  z-index: 2;
  margin: 0;
  cursor: crosshair;
  touch-action: none;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 0 50px rgba(255, 255, 255, 0.05),
    0 40px 90px rgba(0, 0, 0, 0.8);
}
.gcard.is-open .gcard-title {
  font-size: 30px;
  -webkit-line-clamp: 3;
}
.gcard.is-open .gcard-check {
  top: 18px;
  margin-top: 0;
}
.gcard.is-open .gcard-body {
  padding: 24px 24px 22px;
}
/* drawings: a whiteboard over the frost, never blurred */
.gcard-sharp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
/* writing: pen stuck to the card, over the frost and the drawings */
.gcard-pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.gcard-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  display: none;
}
.gcard.is-open .gcard-ink {
  display: block;
}

.g-tools {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* on top of the keyboard when one is up (glass-app.js sets --kb) */
  bottom: calc(var(--safe-b) + 18px + var(--kb, 0px));
  transform: translate(-50%, 30px);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100% - 32px, 440px);
  transition:
    opacity 0.3s,
    bottom 0.25s ease,
    transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1);
}
#g-overlay.is-open .g-tools {
  opacity: 1;
  transform: translate(-50%, 0);
}
.g-toolrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 30px;
}
.g-toolrow[hidden] {
  display: none;
}
.g-ink-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.g-ink-dot i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-ink-dot.is-on i {
  transform: scale(1.3);
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px var(--c);
}
.g-tool-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.18);
  margin: 0 4px;
}
.g-treat-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 27px;
  display: grid;
  place-items: center;
  transition: transform 0.25s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.g-treat-btn:active {
  transform: scale(0.75) translateY(4px);
}
.g-note-row {
  width: 100%;
  padding: 6px 6px 6px 18px;
}
.g-note-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 17px;
  font-weight: 600;
}
.g-note-row input::placeholder {
  color: var(--ink-3);
}

/* ---------- floating tab bar ---------- */

.g-tabbar {
  position: absolute;
  z-index: 40;
  left: 16px;
  right: 16px;
  /* low, like Instagram's: into the home-bar strip, not floating above it */
  bottom: max(8px, calc(var(--safe-b) - 14px));
  height: var(--bar-h);
  border-radius: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 5px;
  transform-origin: 50% 100%;
  transition:
    transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1),
    opacity 0.3s;
  touch-action: none;
}
.g-tabbar.is-compact {
  transform: scale(0.9) translateY(4px);
}
.g-tabbar button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-tabbar button .gi {
  width: 27px;
  height: 27px;
}
.g-tabbar button[aria-selected='true'] {
  color: #fff;
}
.g-lens {
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 27px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.35);
  will-change: transform;
}
.g-tabbar.is-dragging .g-lens {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.1));
}
/* on Profile (opened from the header photo) no tab is lit */
.g-tabbar.no-lens .g-lens {
  opacity: 0;
}

/* the + sits in the middle of the bar: a white glyph in its own ring */
.g-tabbar .g-tab-add {
  color: #fff;
}
.g-tab-add::before {
  content: '';
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.g-tabbar .g-tab-add .gi {
  position: relative;
  width: 26px;
  height: 26px;
}
.g-tab-add:active {
  transform: scale(0.86);
}

/* your photo in the header, where Profile's tab used to be */
.g-head-me .g-avatar {
  width: 38px;
  height: 38px;
  font-size: 15px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.22);
}
.g-head--row > :first-child {
  min-width: 0;
}
.g-head--row > .g-head-actions {
  flex: none;
}
/* "September" and three buttons share a phone's width */
@media (max-width: 759px) {
  .g-cal-head h1 {
    font-size: clamp(26px, 7.6vw, 38px);
  }
}

/* ---------- calendar ---------- */

.g-cal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(22px, calc(var(--safe-t) - 12px)) 16px 0;
}
.g-cal-head {
  padding-bottom: 14px;
}
.g-cal-today {
  font-size: 16px;
  font-weight: 800;
}
.g-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-radius: 26px;
  padding: 6px;
  flex: none;
  touch-action: pan-y;
  z-index: 5;
}
.g-week[hidden] {
  display: none;
}
.g-wd {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0 7px;
  border-radius: 20px;
  transition: background 0.25s;
}
.g-wd b {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-wd span {
  font-size: 19px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.g-wd.is-today span {
  color: var(--danger);
}
.g-wd.is-sel {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.g-wd.is-sel.is-today {
  background: var(--rose);
  box-shadow: 0 6px 20px rgba(242, 167, 195, 0.3);
}
.g-wd.is-sel.is-today b,
.g-wd.is-sel.is-today span {
  color: #17171a;
}
.g-dots {
  display: flex;
  gap: 3px;
  height: 5px;
}
.g-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--h) 85% 65%);
}

.g-cal-scroll {
  position: relative;
  inset: auto;
  flex: 1;
  margin: 10px -16px 0;
  padding-top: 8px;
}
.g-day {
  position: relative;
  margin-left: 50px;
}
.g-hour {
  position: relative;
  height: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.g-hour span {
  position: absolute;
  left: -50px;
  top: -8px;
  width: 42px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.g-now {
  position: absolute;
  left: -6px;
  right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 3;
  box-shadow: 0 0 10px rgba(255, 69, 58, 0.6);
}
.g-now::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
}
.g-ev {
  --h: 200;
  position: absolute;
  z-index: 2;
  border-radius: 14px;
  padding: 7px 10px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* the same colour the task's card wears */
  --accent: var(--sky);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 4px 0 0 var(--accent),
    0 8px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-ev:active {
  transform: scale(0.96);
}
.g-ev-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.g-ev-top .g-avatar {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.g-ev-title {
  font-size: 14px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-ev-time {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.g-ev.is-done {
  opacity: 0.45;
}
.g-ev.is-done .g-ev-title {
  text-decoration: line-through;
}

.g-month {
  flex: 1;
  overflow-y: auto;
  margin: 10px -16px 0;
  padding: 4px 16px calc(var(--safe-b) + var(--bar-h) + 60px);
}
.g-month[hidden] {
  display: none;
}
.g-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.g-md {
  aspect-ratio: 1 / 1.25;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding-top: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-md:active {
  transform: scale(0.92);
}
.g-md span {
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.g-md.is-out {
  opacity: 0.28;
}
.g-md.is-today span {
  color: var(--danger);
}
.g-md.is-sel {
  background: rgba(242, 167, 195, 0.22);
  box-shadow: inset 0 0 0 1.5px rgba(242, 167, 195, 0.6);
}
.g-md .g-dots {
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
  max-width: 30px;
}
.g-md-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  padding: 6px 0 8px;
}

/* ---------- profile ---------- */

.g-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
.g-profile .g-avatar {
  width: 104px;
  height: 104px;
  font-size: 40px;
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.5),
    0 20px 60px hsl(var(--h) 80% 40% / 0.45);
}
.g-profile h2 {
  margin: 18px 0 2px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.g-handle {
  color: var(--ink-3);
  font-weight: 650;
}
.g-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 28px 0 10px;
}
.g-stat {
  border-radius: 24px;
  padding: 16px 8px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.g-stat .gi {
  width: 24px;
  height: 24px;
}
.g-stat strong {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.g-stat small {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-stat--flame .gi {
  color: var(--sand);
}
.g-stat--kept .gi {
  color: var(--sage);
}
.g-stat--treats .gi {
  color: var(--rose);
}
.g-profile .g-section {
  align-self: stretch;
}
.g-bank {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  cursor: default;
}
.g-bank .gcard-treats {
  filter: none;
}
.g-bank .gcard-frost {
  opacity: 0.12;
}

/* ---------- sheets ---------- */

.g-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.g-sheet-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s;
}
.g-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(var(--safe-b) + 8px);
  max-width: 544px;
  margin: 0 auto;
  border-radius: 38px;
  padding: 10px 18px 18px;
  /* fully below the screen, however short the sheet (an empty one peeked) */
  transform: translateY(calc(100% + var(--safe-b) + 24px));
  transition: transform 0.5s cubic-bezier(0.2, 1.1, 0.3, 1);
  background: linear-gradient(180deg, rgba(40, 40, 46, 0.72), rgba(20, 20, 24, 0.78));
}
.g-sheet-wrap.is-open {
  pointer-events: auto;
}
.g-sheet-wrap.is-open .g-sheet-bg {
  opacity: 1;
}
.g-sheet-wrap.is-open .g-sheet {
  transform: none;
}
.g-grabber {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  margin: 0 auto 16px;
}
#add-title {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  padding: 6px 4px 14px;
}
#add-title::placeholder {
  color: var(--ink-3);
}
.g-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.g-chip {
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-chip:active {
  transform: scale(0.92);
}
.g-chip[aria-checked='true'] {
  background: var(--spectral);
  color: #17171a;
}
.g-sheet-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}
.g-sheet-actions .g-btn--round {
  width: 54px;
  height: 54px;
}

.g-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
  border-radius: 23px;
  color: var(--ink-3);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.g-search .gi {
  width: 20px;
  height: 20px;
}
.g-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  font-size: 17px;
  font-weight: 600;
}
.g-people {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  max-height: 50vh;
  overflow-y: auto;
}
.g-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
}
.g-person .g-avatar {
  width: 44px;
  height: 44px;
  font-size: 17px;
}
.g-person-name {
  flex: 1;
  min-width: 0;
}
.g-person-name strong {
  display: block;
  font-size: 17px;
  font-weight: 750;
}
.g-person-name small {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-3);
}
.g-person .g-btn--round.is-added {
  background: #fff;
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .g-screen,
  .g-sheet,
  .wob {
    transition-duration: 0.01s !important;
  }
}

/* ======================================================================
   Laptop: a control room for the day.
   An icon rail on the left; Today as a dashboard (the numbers that matter,
   the most urgent task large, the rest in a grid); Friends as a filtered
   grid; a real week calendar; and on wide screens a live panel of friends
   racing their own clocks. Phones never see any of it.
   ====================================================================== */

.g-rail,
.g-aside,
.g-desk-only,
.g-dash,
.g-filter {
  display: none;
}

/* sixteen weeks of kept days (every size) */
.g-heat {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 14px);
  grid-auto-columns: 14px;
  gap: 4px;
  justify-content: start;
  padding: 4px 6px 0;
}
.g-heat i {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}
.g-heat i[data-n='1'] {
  background: rgba(143, 216, 176, 0.3);
}
.g-heat i[data-n='2'] {
  background: rgba(143, 216, 176, 0.52);
}
.g-heat i[data-n='3'] {
  background: rgba(143, 216, 176, 0.76);
}
.g-heat i[data-n='4'] {
  background: var(--sage);
  box-shadow: 0 0 10px rgba(143, 216, 176, 0.45);
}
.g-heat i.is-future {
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.g-profile .g-heat-label,
.g-profile .g-heat {
  align-self: stretch;
}

@media (min-width: 760px) {
  :root {
    --rail: 84px;
    --main-max: 1120px;
  }
  #g-app {
    --panel: 0px;
    max-width: none;
  }
  .g-tabbar,
  .g-head-me,
  .g-edge--bottom {
    display: none;
  }
  .g-desk-only {
    display: grid;
  }
  #g-screens {
    left: var(--rail);
    right: var(--panel);
    transition: right 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
  }
  .g-scroll {
    padding: 38px max(32px, calc((100% - var(--main-max)) / 2)) 90px;
  }
  .g-head {
    padding: 0 4px 22px;
  }
  .g-head h1 {
    font-size: 44px;
  }
  .g-head--row {
    align-items: center;
  }
  #head-new {
    width: 52px;
    height: 52px;
  }
  #head-new .gi {
    width: 24px;
    height: 24px;
  }

  /* ---- rail: the page's own black at rest, opening out on hover ---- */
  .g-rail {
    position: absolute;
    z-index: 45;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 26px 16px 22px;
    overflow: hidden;
    /* no panel of its own: it is the page, until it opens */
    background: transparent;
    transition:
      width 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
      background 0.25s,
      box-shadow 0.3s;
  }
  .g-rail:hover,
  .g-rail:has(:focus-visible) {
    width: 236px;
    background: #000;
    box-shadow: 40px 0 70px 10px rgba(0, 0, 0, 0.85);
    transition-delay: 0.12s;
  }
  .g-rail-logo {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 11px;
    margin-bottom: 22px;
    color: #fff;
  }
  .g-rail-logo .gi {
    flex: none;
  }
  .g-rail-word {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .g-rail button {
    position: relative;
    height: 52px;
    width: 100%;
    flex: none;
    border-radius: 17px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 13px;
    color: rgba(255, 255, 255, 0.5);
    transition:
      background 0.2s,
      color 0.2s,
      transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  .g-rail button .gi {
    flex: none;
    width: 26px;
    height: 26px;
  }
  .g-rail-word,
  .g-rail-label,
  .g-rail kbd {
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition:
      opacity 0.18s,
      transform 0.25s;
  }
  .g-rail:hover .g-rail-word,
  .g-rail:hover .g-rail-label,
  .g-rail:hover kbd,
  .g-rail:has(:focus-visible) .g-rail-word,
  .g-rail:has(:focus-visible) .g-rail-label,
  .g-rail:has(:focus-visible) kbd {
    opacity: 1;
    transform: none;
    transition-delay: 0.16s;
  }
  .g-rail-label {
    flex: 1;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
  }
  .g-rail kbd {
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }
  .g-rail button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }
  .g-rail button:active {
    transform: scale(0.96);
  }
  .g-rail button[aria-current='page'] {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35);
  }
  /* the current tab, a thin spectral bar at the page's edge */
  .g-rail button[aria-current='page']::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 2px;
    background: var(--spectral);
  }
  .g-rail .g-rail-me {
    margin-top: auto;
  }
  .g-rail-me .g-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* ---- Today: the strip of numbers ---- */
  .g-dash {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 12px;
  }
  .g-tile {
    position: relative;
    border-radius: 24px;
    padding: 18px 20px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    overflow: hidden;
  }
  .g-tile .gi {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 13px;
    color: var(--sky);
    background: rgba(142, 201, 242, 0.14);
  }
  .g-tile strong {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .g-tile strong em {
    font-style: normal;
    font-size: 18px;
    color: var(--ink-3);
  }
  .g-tile small {
    font-size: 13px;
    font-weight: 650;
    color: var(--ink-3);
  }
  .g-tile.is-hot .gi {
    color: #fff;
    background: var(--danger);
    box-shadow: 0 0 20px rgba(255, 69, 58, 0.45);
  }
  .g-tile.is-hot strong {
    color: #ff8a80;
  }
  .g-tile--done .gi {
    color: var(--sage);
    background: rgba(143, 216, 176, 0.14);
  }
  .g-tile--streak .gi {
    color: var(--sand);
    background: rgba(237, 207, 142, 0.14);
  }
  .g-tile--treats .gi {
    color: var(--rose);
    background: rgba(242, 167, 195, 0.14);
  }
  .g-tile-bar {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 10px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .g-tile-bar b {
    display: block;
    height: 100%;
    background: var(--sage);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
  }

  /* ---- the grid of glass boxes ---- */
  .g-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
  }
  .g-list > .g-section,
  .g-list > .g-empty,
  .g-list > .wob--hero {
    grid-column: 1 / -1;
  }
  .g-list > .g-section {
    padding: 24px 6px 0;
  }
  .wob .gcard {
    height: 238px;
  }
  .wob--hero .gcard {
    height: 330px;
  }
  .wob--hero .gcard-title {
    font-size: 34px;
    -webkit-line-clamp: 2;
  }
  .wob--hero .gcard-sub {
    font-size: 15px;
  }

  /* ---- Friends: filter by person ---- */
  .g-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 6px;
  }
  .g-fchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 8px;
    border-radius: 19px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-2);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition:
      background 0.2s,
      color 0.2s;
  }
  .g-fchip:first-child {
    padding-left: 14px;
  }
  .g-fchip:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .g-fchip .g-avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .g-fchip b {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    background: rgba(255, 255, 255, 0.12);
  }
  .g-fchip.is-on {
    color: #17171a;
    background: var(--spectral);
  }
  .g-fchip.is-on b {
    background: rgba(0, 0, 0, 0.15);
  }

  /* ---- calendar and profile ---- */
  .g-cal {
    padding: 38px max(32px, calc((100% - var(--main-max)) / 2)) 0;
  }
  .g-scroll.g-cal-scroll {
    margin: 10px 0 0;
    padding: 8px 0 60px;
  }
  #s-profile .g-scroll {
    padding-left: max(32px, calc((100% - 935px) / 2));
    padding-right: max(32px, calc((100% - 935px) / 2));
  }
  .g-profile {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 30px;
    align-items: center;
    padding-top: 30px;
  }
  .g-profile > .g-avatar {
    grid-row: 1 / 4;
    justify-self: center;
    width: 150px;
    height: 150px;
    font-size: 58px;
  }
  .g-profile h2 {
    margin: 0;
    align-self: end;
  }
  .g-profile .g-handle {
    align-self: start;
  }
  .g-profile > .g-profile-face {
    grid-row: 1 / 5;
  }
  .g-profile .g-profile-edit {
    grid-column: 2;
    justify-self: start;
    margin: 10px 0 0;
  }
  .g-profile .g-stats {
    grid-column: 2;
    margin: 14px 0 0;
    max-width: 480px;
  }
  .g-profile .g-account {
    grid-column: 1 / -1;
  }
  .g-profile .g-section,
  .g-profile .g-bank,
  .g-profile .g-heat {
    grid-column: 1 / -1;
  }
  .g-profile .g-heat-label {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .g-heat {
    grid-template-rows: repeat(7, 18px);
    grid-auto-columns: 18px;
    gap: 5px;
  }
  .g-bank {
    height: 460px;
  }

  /* ---- sheets become centred windows ---- */
  .g-sheet {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    max-width: 480px;
    opacity: 0;
    /* hidden, not just transparent: a transparent sheet with a backdrop
       filter still paints over the zoomed card's own backdrop in Chrome */
    visibility: hidden;
    transform: translateY(-46%) scale(0.95);
    transition:
      transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1),
      opacity 0.2s,
      visibility 0s 0.45s;
  }
  .g-sheet-wrap.is-open .g-sheet {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition:
      transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1),
      opacity 0.2s;
  }
  .g-grabber {
    visibility: hidden;
  }
  .g-sheet-bg {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .g-dash {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- a real week, once there is room for seven columns ---- */
@media (min-width: 980px) {
  .is-weekview .g-cal-head h1 span {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: -0.01em;
  }
  .g-day.is-week {
    margin-left: 52px;
  }
  .g-wk-head {
    position: sticky;
    top: -8px;
    z-index: 6;
    height: 62px;
    /* reach over the hour gutter so labels slide under it too */
    margin-left: -52px;
    padding-left: 52px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: linear-gradient(#000 70%, rgba(0, 0, 0, 0));
  }
  .g-wk-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 6px;
  }
  .g-wk-day b {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .g-wk-day span {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
  }
  .g-wk-day.is-today b {
    color: var(--rose);
  }
  .g-wk-day.is-today span {
    background: var(--rose);
    color: #17171a;
    box-shadow: 0 6px 18px rgba(242, 167, 195, 0.35);
  }
  .g-wk-cols {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    height: calc(24 * 60px);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .g-wk-col {
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  .g-wk-col.is-today {
    background: linear-gradient(180deg, rgba(242, 167, 195, 0.05), rgba(242, 167, 195, 0.02));
  }
  .g-wk-col .g-ev {
    padding: 6px 8px;
    border-radius: 11px;
  }
  .g-wk-col .g-ev-title {
    font-size: 12.5px;
  }
  .g-wk-col .g-now {
    left: 0;
  }
}

/* ---- wide: the live panel of friends ---- */
@media (min-width: 1240px) {
  #g-app {
    --panel: 344px;
  }
  #g-app[data-tab='calendar'],
  #g-app[data-tab='profile'] {
    --panel: 0px;
  }
  .g-aside {
    display: block;
    position: absolute;
    z-index: 30;
    top: 0;
    right: 0;
    bottom: 0;
    width: 344px;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 34px 22px 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--bg);
    transition:
      transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1),
      opacity 0.25s;
  }
  #g-app[data-tab='calendar'] .g-aside,
  #g-app[data-tab='profile'] .g-aside {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
  }
  .g-pn-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 26px 0 10px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .g-pn-head:first-child {
    margin-top: 0;
  }
  .g-pn-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    color: #17171a;
    background: var(--rose);
    letter-spacing: 0;
  }
  .g-pn-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    margin: 0 -10px;
    border-radius: 18px;
    transition: background 0.2s;
  }
  .g-pn-row:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  /* each friend's clock: a ring that drains over their final hour */
  .g-pn-ring {
    --p: 1;
    --rc: var(--accent);
    position: relative;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .g-pn-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(var(--rc) calc(var(--p) * 1turn), rgba(255, 255, 255, 0.1) 0);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .g-pn-ring[data-phase='crack'] {
    --rc: var(--amber);
  }
  .g-pn-ring[data-phase='final'] {
    --rc: var(--danger);
    animation: gPulse 1s ease-in-out infinite;
  }
  .g-pn-ring .g-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .g-pn-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .g-pn-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 14.5px;
  }
  .g-pn-line strong {
    font-weight: 750;
  }
  .g-pn-line em {
    font-style: normal;
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .g-pn-ring[data-phase='crack'] + .g-pn-text em {
    color: var(--amber);
  }
  .g-pn-ring[data-phase='final'] + .g-pn-text em {
    color: #ff8a80;
  }
  .g-pn-task {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* treats straight into their box, without opening it */
  .g-pn-quick {
    position: absolute;
    right: 8px;
    top: 50%;
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 18px;
    background: rgba(28, 28, 34, 0.92);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 8px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translate(6px, -50%);
    pointer-events: none;
    transition:
      opacity 0.18s,
      transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .g-pn-row:hover .g-pn-quick,
  .g-pn-row:focus-within .g-pn-quick {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
  }
  .g-pn-quick button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 17px;
    display: grid;
    place-items: center;
  }
  .g-pn-quick button:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .g-pn-empty {
    padding: 8px 0;
    font-size: 14px;
    color: var(--ink-3);
  }
  .g-pn-more {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
  }
  .g-pn-more:hover {
    color: #fff;
  }
  .g-pn-agenda {
    display: flex;
    flex-direction: column;
  }
  .g-pn-ag {
    display: grid;
    grid-template-columns: 48px 10px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 14px;
    text-align: left;
    font-size: 14px;
  }
  .g-pn-ag:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .g-pn-ag time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }
  .g-pn-ag i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  .g-pn-ag span {
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .g-pn-ag small {
    font-size: 12.5px;
    color: var(--ink-3);
  }
  .g-pn-person {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
  }
  .g-pn-person .g-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  .g-pn-who {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .g-pn-who strong {
    font-size: 14.5px;
    font-weight: 750;
  }
  .g-pn-who small {
    font-size: 13px;
    color: var(--ink-3);
  }
  .g-pn-add {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
    box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35);
  }
  .g-pn-add.is-added {
    background: var(--sage);
    color: #0d2a1b;
  }
}

/* ---------- real treats: tray, GIF picker, viewer ---------- */

#tool-treats {
  justify-content: space-between;
  gap: 2px;
}
#tool-treats .g-treat-btn,
#tool-treats .g-btn--round {
  width: 42px;
  height: 42px;
  font-size: 24px;
}
.g-mic.is-recording {
  background: var(--danger);
  color: #fff;
  animation: gRec 1.1s ease-in-out infinite;
}
@keyframes gRec {
  50% {
    box-shadow: 0 0 0 7px rgba(255, 69, 58, 0.25);
  }
}

.g-sheet--tall {
  display: flex;
  flex-direction: column;
}
.g-gifs {
  margin-top: 12px;
  height: min(52vh, 440px);
  overflow-y: auto;
  scrollbar-width: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 104px;
  gap: 6px;
  border-radius: 18px;
}
.g-gifs::-webkit-scrollbar {
  display: none;
}
.g-gifs.is-loading {
  opacity: 0.45;
}
.g-gifs .g-empty {
  grid-column: 1 / -1;
}
.g-gif {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-gif:hover {
  transform: scale(1.04);
}
.g-gif:active {
  transform: scale(0.94);
}
.g-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the treat panel: one treat at a time, swiped or scrolled through */
.g-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.g-viewer-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  opacity: 0;
  transition: opacity 0.3s;
}
.g-viewer.is-open {
  pointer-events: auto;
}
.g-viewer.is-open .g-viewer-bg {
  opacity: 1;
}
.g-viewer-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  opacity: 0;
  transform: scale(0.94) translateY(16px);
  transition:
    opacity 0.25s,
    transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.g-viewer-track::-webkit-scrollbar {
  display: none;
}
.g-viewer.is-open .g-viewer-track {
  opacity: 1;
  transform: none;
}
.g-slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: calc(var(--safe-t) + 96px) 16px calc(var(--safe-b) + 40px);
}
.g-viewer-card {
  position: relative;
  width: min(100vw - 32px, 460px);
  border-radius: 32px;
  padding: 12px;
  opacity: 0.45;
  transform: scale(0.9);
  transition:
    transform 0.4s cubic-bezier(0.2, 1.2, 0.3, 1),
    opacity 0.3s;
}
.g-slide.is-active .g-viewer-card {
  opacity: 1;
  transform: none;
}
.g-viewer-top {
  position: absolute;
  z-index: 2;
  top: calc(var(--safe-t) + 18px);
  left: 72px;
  right: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-viewer.is-open .g-viewer-top {
  opacity: 1;
}
.g-viewer-dots {
  width: min(100%, 420px);
  display: flex;
  gap: 4px;
}
.g-viewer-dots i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.25s;
}
.g-viewer-dots i.is-on {
  background: var(--spectral);
}
.g-viewer-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}
.g-viewer-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.g-viewer-close {
  position: absolute;
  z-index: 3;
  top: calc(var(--safe-t) + 16px);
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-viewer.is-open .g-viewer-close {
  opacity: 1;
}
.g-viewer-nav {
  display: none;
  position: absolute;
  z-index: 3;
  top: 50%;
  margin-top: -22px;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-viewer-prev {
  left: max(24px, calc(50% - 320px));
}
.g-viewer-next {
  right: max(24px, calc(50% - 320px));
}
.g-viewer-nav:disabled {
  opacity: 0 !important;
  pointer-events: none;
}
@media (min-width: 760px) {
  .g-viewer-nav {
    display: grid;
  }
  .g-viewer.is-open .g-viewer-nav {
    opacity: 1;
  }
}
.g-viewer.is-single .g-viewer-nav,
.g-viewer.is-single .g-viewer-dots {
  display: none;
}
.g-viewer-media {
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.35);
}
.g-viewer-media img,
.g-viewer-media video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
}
.g-viewer-media.is-photo img {
  background: #f5f3ef;
  padding: 10px 10px 34px;
}
.g-viewer-media.is-doodle img,
.g-viewer-media.is-drawing img {
  width: auto;
  max-width: 80%;
  image-rendering: auto;
  padding: 30px;
}
.g-viewer-emoji {
  font-size: 120px;
  padding: 40px 0;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* a note, the way it was written on the glass */
.g-viewer-note {
  margin: 56px 28px;
  color: hsl(var(--h) 95% 82%);
  font-family: Caveat, 'Segoe Print', cursive;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow:
    0 0 18px hsl(var(--h) 95% 60% / 0.7),
    0 0 2px hsl(var(--h) 95% 90%);
}
.g-viewer-media.is-voice {
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 26px 22px;
  min-height: 0;
  background: linear-gradient(180deg, rgba(242, 167, 195, 0.2), rgba(242, 167, 195, 0.08));
}
.g-voice-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--rose);
  color: #17171a;
  box-shadow: 0 8px 26px rgba(242, 167, 195, 0.35);
}
.g-voice-bars {
  justify-self: stretch;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.g-voice-bars i {
  flex: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: 50% 50%;
}
.g-viewer-media.is-playing .g-voice-bars i {
  background: var(--rose);
  animation: gWave 0.9s ease-in-out infinite;
}
.g-viewer-media.is-playing .g-voice-bars i:nth-child(3n) {
  animation-delay: -0.3s;
}
.g-viewer-media.is-playing .g-voice-bars i:nth-child(3n + 1) {
  animation-delay: -0.6s;
}
@keyframes gWave {
  50% {
    transform: scaleY(0.45);
  }
}
.g-voice-len {
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.g-viewer-from {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 6px 2px;
  font-size: 15px;
  color: var(--ink-2);
}
.g-viewer-from strong {
  color: var(--ink);
}

/* ---------- new: one-off, commitment, for a friend ---------- */

.g-btn[hidden] {
  display: none;
}
.g-new {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--safe-t) - 40px);
  padding-bottom: 14px;
}
.g-new-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}
.g-new-head h2 {
  margin: 0;
  grid-column: 2;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.g-new-head #add-cancel {
  grid-column: 3;
}
.g-new-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.g-new-body::-webkit-scrollbar {
  display: none;
}
.g-new-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
}
.g-new-go {
  width: 58px;
  height: 58px;
}

/* the three ways in */
.g-kind {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  border-radius: 22px;
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transition:
    background 0.2s,
    transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-kind:hover {
  background: rgba(255, 255, 255, 0.1);
}
.g-kind:active {
  transform: scale(0.97);
}
.g-kind i {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #17171a;
  background: linear-gradient(135deg, var(--sand), var(--rose));
}
.g-kind:nth-child(2) i {
  background: linear-gradient(135deg, var(--sage), var(--sky));
}
.g-kind:nth-child(3) i {
  background: linear-gradient(135deg, var(--rose), var(--lavender));
}
.g-kind span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-kind strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}
.g-kind small {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.g-kind > .gi {
  color: var(--ink-3);
}

.g-new-title {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  padding: 6px 4px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.g-new-title::placeholder {
  color: rgba(255, 255, 255, 0.28);
}
.g-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.g-field-label {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-field-hint {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.g-field .g-chips {
  flex-wrap: wrap;
}
.g-chip em {
  font-style: normal;
  margin-right: 6px;
}
.g-chip .gi {
  display: inline-block;
  vertical-align: -3px;
  margin-right: 6px;
}
/* a segmented choice: one track, the chosen one lit */
.g-chips.g-seg {
  flex-wrap: nowrap;
  gap: 4px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.g-seg .g-chip {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  background: none;
}
.g-seg .g-chip[aria-checked='true'] {
  background: rgba(255, 255, 255, 0.92);
  color: #17171a;
}
.g-chip--person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-left: 6px;
}
.g-chip--person .g-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.g-chip--person[aria-pressed='true'],
.g-chip--person[aria-checked='true'] {
  background: var(--spectral);
  color: #17171a;
}
.g-chip--time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.g-chip--time .gi {
  margin: 0 0 0 4px;
  opacity: 0.6;
}
.g-chips--emoji .g-chip {
  font-size: 22px;
  padding: 0 10px;
}
.g-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.g-inline--times span {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-num,
.g-time,
.g-date,
.g-new-note {
  height: 40px;
  border-radius: 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-weight: 700;
  color-scheme: dark;
}
.g-num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 4px;
}
.g-num input {
  width: 58px;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  text-align: right;
  font-weight: 800;
  color-scheme: dark;
}
.g-num span {
  font-size: 13px;
  color: var(--ink-3);
}
.g-time,
.g-date {
  padding: 0 12px;
}
.g-date {
  align-self: flex-start;
}
.g-time--add {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 999px rgba(255, 255, 255, 0.02);
}
.g-new-note {
  padding: 0 14px;
  font-family: Caveat, cursive;
  font-size: 24px;
}
.g-num:focus-within,
.g-time:focus,
.g-date:focus,
.g-new-note:focus {
  box-shadow: inset 0 0 0 1.5px rgba(242, 167, 195, 0.7);
}
.g-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
}
.g-toggle span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-toggle strong {
  font-size: 15.5px;
  font-weight: 750;
}
.g-toggle small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
/* an iOS switch, in the app's spectral */
.g-toggle i {
  position: relative;
  flex: none;
  width: 48px;
  height: 29px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s;
}
.g-toggle i::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.g-toggle.is-on i {
  background: var(--sage);
}
.g-toggle.is-on i::after {
  transform: translateX(19px);
}
.g-treat-preview {
  width: 120px;
  height: 90px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.g-treat-preview img,
.g-treat-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* a running timer: the check is start/pause, the time a ring round it */
.gcard-check {
  --tp: 0;
}
.gcard.is-running .gcard-check,
.gcard-check[aria-label='Start timer'] {
  color: #fff;
}
.gcard.is-running .gcard-check,
.gcard-check[aria-label='Start timer'] {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.35) 58%, transparent 60%),
    conic-gradient(var(--accent) calc(var(--tp) * 1turn), rgba(255, 255, 255, 0.14) 0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.gcard.is-running .gcard-check {
  animation: gTick 2s ease-in-out infinite;
}
@keyframes gTick {
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}

@media (min-width: 760px) {
  .g-new {
    max-width: 520px;
    max-height: min(760px, 90vh);
  }
}

/* ---------- new: one small question at a time ---------- */

.g-new-body {
  min-height: 300px;
}
.g-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-step-twin {
  margin-top: 22px;
  transition: opacity 0.25s ease;
}
.g-step-twin.is-waiting {
  opacity: 0.45;
}
.g-ask h3 {
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.g-ask p,
.g-ask-hint {
  margin: 4px 0 0;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}
/* what you've said so far */
.g-said {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.g-said-pill {
  max-width: 100%;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2, rgba(255, 255, 255, 0.7));
  background: rgba(255, 255, 255, 0.07);
  animation: g-said-in 0.35s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.g-said-pill:active {
  transform: scale(0.94);
}
@keyframes g-said-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
}
/* big answers: one tap and you're on */
.g-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-answers--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.g-answers--3 {
  grid-template-columns: repeat(3, 1fr);
}
.g-answers--wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.g-answer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.2);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-answer:hover {
  background: rgba(255, 255, 255, 0.11);
}
.g-answer:active {
  transform: scale(0.95);
}
.g-answer.is-on {
  background: var(--spectral);
  color: #17171a;
}
.g-answer em {
  font-style: normal;
  font-size: 20px;
}
.g-answer--person {
  justify-content: flex-start;
  padding-left: 10px;
}
.g-answer--person .g-avatar {
  width: 36px;
  height: 36px;
  flex: none;
}
.g-answer--date {
  cursor: pointer;
  color: var(--ink-3);
  background: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-answer--date .g-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.g-answer--time {
  min-height: 44px;
  font-size: 15px;
}
.g-answers--wrap .g-time--add {
  height: 44px;
}
.g-answers--emoji {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.g-answers--emoji .g-answer {
  font-size: 28px;
}
/* a glass menu: press and slide, a bubble follows the finger */
.g-pal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  padding: 6px;
  border-radius: 28px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.g-pal-lens {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s, background 0.2s, box-shadow 0.2s;
  will-change: transform;
}
.g-pal.no-sel .g-pal-lens {
  opacity: 0;
}
/* pressed: the bubble lifts off the menu */
.g-pal.is-dragging .g-pal-lens {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.6),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.14),
    0 12px 30px rgba(0, 0, 0, 0.45);
}
.g-pal-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 14px;
  text-align: left;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s;
}
.g-pal-item .g {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-pal-item .g .gi {
  width: 24px;
  height: 24px;
}
.g-pal-item .t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.g-pal-item .t b {
  font-size: 17px;
  font-weight: 700;
}
.g-pal-item .t small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.g-money-glyph,
.g-pal-item .g-money-glyph {
  font-size: 24px;
  line-height: 1;
}
.g-pal-emo {
  font-size: 24px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.g-pal-item[aria-checked='true'],
.g-pal-item.is-hover {
  color: #fff;
}
.g-pal--menu .g-pal-item + .g-pal-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 58px;
  right: 14px;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}
.g-pal.is-dragging .g-pal-item.is-hover .g {
  transform: scale(1.15);
}

/* a grid of treats, like the emoji keyboard */
.g-pal--grid {
  gap: 2px;
}
.g-pal--grid .g-pal-item {
  justify-content: center;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
}
.g-pal--emoji .g-pal-item .g {
  width: auto;
  height: auto;
  font-size: 30px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* under the finger, the treat pops up big above it */
.g-pal.is-dragging.g-pal--grid .g-pal-item.is-hover .g {
  transform: scale(0.8);
  opacity: 0.3;
}
.g-pal-bubble {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.g-pal-pop {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 76px;
  height: 84px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 50px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.6),
    0 14px 34px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) translateY(20px) scale(0.4);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.3, 1.5, 0.5, 1),
    opacity 0.16s;
}
.g-pal.is-dragging .g-pal-pop {
  transform: translateX(-50%) translateY(0) scale(1);
  opacity: 1;
}
.g-step > .g-pal--emoji {
  margin-top: 4px;
}

/* every kind of treat, as a grid of glass tiles */
.g-pal--treats {
  gap: 0;
}
.g-pal--treats .g-pal-item {
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  aspect-ratio: auto;
  height: 76px;
  padding: 0;
  text-align: center;
}
.g-pal--treats .g-pal-item .t b {
  font-size: 13px;
  font-weight: 700;
}
.g-pal--treats .g-pal-item .g .gi {
  width: 26px;
  height: 26px;
}
.g-pal--treats .g-pal-pop {
  width: 84px;
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: inherit;
  color: #fff;
}
.g-pal-pop .g {
  display: grid;
  place-items: center;
}
.g-pal-pop .g .gi {
  width: 36px;
  height: 36px;
}
.g-pal-pop .g-money-glyph {
  font-size: 36px;
}
.g-pal-pop small {
  font-size: 13px;
  font-weight: 800;
}
.g-pal-item.g-mic.is-recording {
  background: none;
  animation: none;
  box-shadow: none;
}
.g-pal--treats .g-pal-item.is-recording .g {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--danger);
  animation: gRec 1.1s ease-in-out infinite;
}
.g-pal--treats .g-pal-item.is-recording .g .gi {
  width: 20px;
  height: 20px;
}
/* on a friend's open card: the grid is the tray */
#tool-treats {
  width: 100%;
}
#tool-treats[hidden] {
  display: none;
}
#tool-treats .g-pal--treats .g-pal-item {
  height: 64px;
}
/* typing an answer */
.g-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-typing:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(242, 167, 195, 0.6);
}
.g-typing .g-new-title {
  flex: 1;
  min-width: 0;
  font-size: 21px;
}
.g-typing--times {
  padding: 8px;
  justify-content: space-between;
}
.g-typing--times span {
  font-weight: 700;
  color: var(--ink-3);
}
.g-typing--times .g-time {
  flex: 1;
  height: 46px;
  font-size: 17px;
}
.g-next {
  flex: none;
  width: 48px;
  height: 48px;
  transition:
    opacity 0.2s,
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-next:disabled {
  opacity: 0.25;
}
.g-other {
  display: flex;
  align-items: center;
  gap: 10px;
}
.g-other-label {
  padding-left: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-other .g-num {
  align-self: auto;
  height: 48px;
  flex: 1;
}
.g-other .g-num input {
  flex: 1;
  text-align: left;
  padding-left: 10px;
  font-size: 17px;
}
.g-step-foot {
  display: flex;
  justify-content: flex-end;
}
/* the summary */
.g-review-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  text-align: left;
}
.g-review-title em {
  font-style: normal;
  font-size: 30px;
}
.g-review-title span {
  flex: 1;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.g-review-title .gi {
  color: var(--ink-3);
}
.g-review {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.g-review-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.g-review-row + .g-review-row {
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
}
.g-review-row span {
  flex: 1;
}
.g-review-row .gi {
  color: var(--ink-3);
}
.g-review-row:active {
  background: rgba(255, 255, 255, 0.06);
}
.g-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-extra {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px 0 13px;
  border-radius: 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-extra:active {
  transform: scale(0.94);
}
.g-extra.is-on {
  color: #17171a;
  background: var(--spectral);
  box-shadow: none;
}

/* pills on a card sit on frost already: tint, don't re-blur (see .gcard-check) */
.gcard .g-pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(0, 0, 0, 0.42);
}
.g-typing--search {
  padding: 4px 14px;
}
.g-typing--search > .gi {
  flex: none;
  color: var(--ink-3);
}
.g-typing--search .g-new-title {
  height: 48px;
}
.g-typing--search + .g-answers:empty {
  display: none;
}
.g-task-search {
  margin: 0 0 14px;
}
.g-task-search input::-webkit-search-cancel-button {
  filter: invert(1) opacity(0.5);
}
.g-empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* hovering the check: the circle fills from the centre in the card's
   colour, the tick fades in, and a ring pulses out - so it's obvious this
   is the thing that finishes the task */
.gcard-check .gi {
  position: relative;
  z-index: 1;
  transition:
    color 0.25s,
    transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.gcard-check::before,
.gcard-check::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.gcard-check::before {
  background: var(--accent);
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.4s cubic-bezier(0.2, 1.2, 0.3, 1),
    opacity 0.2s;
}
.gcard-check::after {
  box-shadow: 0 0 0 2px var(--accent);
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .gcard:not(.is-done):not(.is-opening):not(.is-running) .gcard-check:not([aria-label='Start timer']):hover::before {
    transform: scale(1);
    opacity: 0.92;
  }
  .gcard:not(.is-done):not(.is-opening):not(.is-running) .gcard-check:not([aria-label='Start timer']):hover {
    color: #17171a;
  }
  .gcard:not(.is-done):not(.is-opening) .gcard-check:hover .gi {
    transform: scale(1.12);
  }
  .gcard:not(.is-done):not(.is-opening) .gcard-check:hover::after {
    animation: gCheckPulse 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
  }
}
@keyframes gCheckPulse {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard-check:hover::after {
    animation: none !important;
  }
}

/* ---------- commitments: the run and the streak ---------- */

.gcard-run {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 750;
  color: var(--ink-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.gcard-days {
  display: flex;
  gap: 4px;
}
.gcard-days i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.gcard-days i.is-kept {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.gcard-days i.is-missed {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}
.gcard-days i.is-today {
  background: transparent;
  /* a still glow: a pulsing shadow repainted the card every frame */
  box-shadow:
    inset 0 0 0 2px var(--accent),
    0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
.gcard-days i.is-before {
  opacity: 0;
}
@keyframes gToday {
  50% {
    box-shadow:
      inset 0 0 0 2px var(--accent),
      0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
  }
}
.gcard-streak {
  color: #ffb347;
}
.gcard-streak.is-hot {
  color: #1b1206;
  background: linear-gradient(135deg, #ffd166, #ff8a3d);
  box-shadow: 0 0 16px rgba(255, 138, 61, 0.45);
}
/* how far through the run: a line along the foot of the card */
.gcard-progress {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--run, 0) * 100%);
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gcard-days i.is-today {
    animation: none;
  }
}

/* ---------- in-app alerts: a stack of glass cards at the top ---------- */

.g-toasts {
  position: fixed;
  z-index: 95;
  left: 50%;
  top: calc(var(--safe-t) + 10px);
  width: min(100vw - 20px, 420px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.g-toast {
  --tone: rgba(255, 255, 255, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 11px;
  border-radius: 22px;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  background: linear-gradient(180deg, rgba(44, 44, 52, 0.86), rgba(24, 24, 30, 0.9));
  opacity: 0;
  transform: translateY(-24px) scale(0.96);
  transition:
    transform 0.45s cubic-bezier(0.2, 1.2, 0.3, 1),
    opacity 0.3s;
}
.g-toast.is-in {
  opacity: 1;
  transform: none;
}
.g-toast.is-out {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition-duration: 0.3s;
}
/* older ones sit back a little */
.g-toast + .g-toast {
  scale: 0.97;
  filter: brightness(0.85);
}
.g-toast.is-urgent {
  --tone: #ff453a;
}
.g-toast.is-good {
  --tone: #ff9f43;
}
.g-toast.is-friend {
  --tone: var(--rose);
}
.g-toast.is-urgent,
.g-toast.is-good,
.g-toast.is-friend {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 3px 0 0 var(--tone),
    0 12px 32px rgba(0, 0, 0, 0.55);
}
.g-toast-mark {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--tone);
  background: rgba(0, 0, 0, 0.55);
}
.g-toast.is-urgent .g-toast-mark {
  color: #fff;
  background: #ff453a;
  animation: gPulse 1.2s ease-in-out infinite;
}
.g-toast.is-good .g-toast-mark {
  color: #1b1206;
  background: linear-gradient(135deg, #ffd166, #ff8a3d);
}
.g-toast-mark.is-person {
  border-radius: 50%;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 62%), hsl(calc(var(--h) + 40) 70% 48%));
}
.g-toast-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.g-toast-text strong {
  font-size: 15px;
  font-weight: 800;
}
.g-toast-text small {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.g-toast-act {
  flex: none;
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  color: #17171a;
  background: var(--spectral);
}
.g-toast-x {
  flex: none;
  align-self: flex-start;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
}
.g-toast-x:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 760px) {
  .g-toasts {
    left: auto;
    right: 24px;
    top: 24px;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-toast,
  .g-toast.is-out {
    transition-duration: 0.01s;
  }
  .g-toast.is-urgent .g-toast-mark {
    animation: none;
  }
}

/* a sealed card's treats come pre-blurred (glass-treatbox.js), so the canvas
   itself needs no filter: nothing is re-blurred as they move */
.gcard .gcard-treats.is-baked {
  filter: none;
}

/* times of day: the label, and the clock time under it */
.g-answers--times .g-answer {
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.g-answer small {
  font-family: var(--font-body, inherit);
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.6;
}
.g-other .g-time--exact {
  flex: 1;
  height: 48px;
  font-size: 17px;
}

/* ---------- a card at a glance: what, how long, and icons ---------- */

.gcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gcard-head .g-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.gcard-head .g-avatar:hover {
  transform: scale(1.12);
}
.gcard-head .gcard-title {
  flex: 1;
  min-width: 0;
}
/* the countdown: the loudest thing on the card after the title */
.gcard-clock {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  transition: color 0.4s;
}
.gcard-clock[hidden] {
  display: none;
}
.gcard[data-tier='1'] .gcard-clock {
  color: #fff;
}
/* One ladder, one signal per step. Quiet until it matters:
 *   under an hour      amber numbers, a thin rim of light draining
 *   under ten minutes  red numbers, cracks creep in (no pulsing)
 *   the last minute    the only thing on the screen that moves */
.gcard[data-tier='2'] .gcard-clock {
  color: var(--amber);
}
.gcard[data-tier='3'] .gcard-clock {
  color: #ff5a4a;
  text-shadow:
    0 0 16px rgba(255, 59, 48, 0.45),
    0 2px 14px rgba(0, 0, 0, 0.6);
}
.gcard[data-tier='3'] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 59, 48, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.6);
}
/* the last minute: white on a red plate, beating with the card */
.gcard[data-phase='final'] .gcard-clock {
  width: fit-content;
  margin-top: 6px;
  padding: 3px 11px 4px;
  border-radius: 12px;
  color: #fff;
  background: #ff3b30;
  text-shadow: none;
  box-shadow: 0 0 26px rgba(255, 59, 48, 0.8);
  animation: gAlarm var(--beat) ease-in-out infinite;
}
@keyframes gAlarm {
  50% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}
@keyframes gAlarmRim {
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(255, 59, 48, 1),
      inset 0 0 44px rgba(255, 59, 48, 0.34),
      0 0 44px rgba(255, 59, 48, 0.5),
      0 18px 40px rgba(0, 0, 0, 0.6);
  }
}
.gcard-clock {
  transform-origin: left center;
}
/* the last minute keeps its heartbeat as well as the red rim */
.gcard[data-phase='final'] {
  animation: gHeart var(--beat) ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .gcard[data-tier='3'],
  .gcard[data-tier='3'] .gcard-clock,
  .gcard[data-phase='final'] .gcard-clock {
    animation: none;
  }
}
/* the icon row: small, quiet, only what applies */
.gcard .gcard-meta {
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.gcard .gcard-meta .g-pill {
  flex: none;
  height: 26px;
  padding: 0 9px 0 7px;
  gap: 4px;
  font-size: 13px;
}
.gcard .gcard-meta .g-pill[hidden] {
  display: none;
}
.gcard-runpill {
  gap: 7px !important;
}
.gcard-runpill .gcard-days i {
  width: 6px;
  height: 6px;
}
.gcard-runpill .gcard-days {
  gap: 3px;
}
.gcard-runpill b {
  font-weight: 750;
  color: var(--ink-2);
}
.gcard-timer.is-running {
  color: var(--accent);
}
.gcard-from {
  padding: 0 8px !important;
  color: var(--ink-2);
}
.gcard.is-done .gcard-meta .gcard-count {
  color: var(--sage);
}

/* drawing a new task on the calendar */
#cal-day {
  cursor: crosshair;
}
#cal-day .g-ev {
  cursor: pointer;
}
#cal-day.is-drawing {
  user-select: none;
  -webkit-user-select: none;
}
.g-ev--ghost {
  left: 2px;
  right: 6px;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  --accent: var(--rose);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    0 8px 24px color-mix(in srgb, var(--accent) 30%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: gGhostIn 0.2s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.g-ev--ghost .g-ev-time {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.g-ev--ghost.is-past {
  --accent: #ff453a;
  opacity: 0.8;
}
@keyframes gGhostIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* which days: seven round toggles in a row */
.g-answers--week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.g-answers--week .g-answer {
  min-height: 48px;
  padding: 0;
  border-radius: 16px;
  font-size: 14px;
}
/* a commitment's days still to come, on the calendar */
.g-ev.is-planned {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-style: dashed;
  opacity: 0.85;
}
.g-ev.is-planned::before {
  opacity: 0.5;
}
.g-toast-mark.is-logo {
  background: none;
}
.g-toast-mark.is-logo .gi {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}
/* the rail's logo tile sits a little proud, like an app icon */
.g-rail-logo .gi {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}
/* a timer's play button carries its time: the icon, and the minutes under it */
.gcard-check .gcard-check-t {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  z-index: 1;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.gcard-check:has(.gcard-check-t:not(:empty)) .gi {
  transform: translateY(-5px);
}
.gcard .gcard-meta {
  gap: 5px;
}

/* ---------- getting in: welcome, sign up, the code, sign in ---------- */

.g-ob-lock,
.g-ob-lock body {
  overflow: hidden;
}
.g-ob {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.g-ob.is-open {
  pointer-events: auto;
  opacity: 1;
}
.g-ob-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(242, 167, 195, 0.18), transparent 70%),
    radial-gradient(50% 45% at 85% 90%, rgba(142, 201, 242, 0.16), transparent 70%),
    rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.g-ob-panel {
  position: relative;
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  border-radius: 36px;
  padding: 16px 22px 26px;
  background: linear-gradient(180deg, rgba(40, 40, 46, 0.78), rgba(18, 18, 22, 0.86));
  transform: translateY(16px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.g-ob.is-open .g-ob-panel {
  transform: none;
}
.g-ob-top {
  height: 44px;
}
.g-ob-back[hidden] {
  display: none;
}
.g-ob-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-ob-logo {
  align-self: center;
  margin-top: 4px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}
.g-ob-hero {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.g-ob-lead {
  margin: -6px 0 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
}
.g-ob-ask h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.g-ob-ask p {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
}
.g-ob-ask strong {
  color: #fff;
}
.g-ob-acts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-ob-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  transition:
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1),
    opacity 0.2s,
    background 0.2s;
}
.g-ob-btn:active {
  transform: scale(0.97);
}
.g-ob-go {
  color: #17171a;
  background: var(--spectral);
  box-shadow: 0 10px 30px rgba(185, 167, 245, 0.25);
}
.g-ob-go:disabled {
  opacity: 0.35;
  box-shadow: none;
}
.g-ob-go.is-busy {
  color: transparent;
  position: relative;
}
.g-ob-go.is-busy::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid rgba(23, 23, 26, 0.25);
  border-top-color: #17171a;
  animation: gSpin 0.8s linear infinite;
}
@keyframes gSpin {
  to {
    transform: rotate(1turn);
  }
}
.g-ob-ghost {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-ob-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
}
.g-ob-g {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  color: #17171a;
  background: #fff;
}
.g-ob-link {
  align-self: center;
  min-height: 40px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  background: none;
}
.g-ob-link:hover {
  color: #fff;
}
.g-ob-link:disabled {
  opacity: 0.5;
}
.g-ob-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.g-ob-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-ob-field:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(242, 167, 195, 0.7);
}
.g-ob-field input {
  flex: 1;
  min-width: 0;
  height: 56px;
  border: 0;
  outline: 0;
  background: none;
  font-size: 18px;
  font-weight: 650;
  color: #fff;
}
.g-ob-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.g-ob-eye {
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-2);
}
.g-ob-eye:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* password strength: four bars that fill and warm up */
.g-ob-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: -4px;
}
.g-ob-meter i {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.25s;
}
.g-ob-meter[data-score='0'] i:nth-child(-n + 1) {
  background: #ff453a;
}
.g-ob-meter[data-score='1'] i:nth-child(-n + 1) {
  background: #ff9f43;
}
.g-ob-meter[data-score='2'] i:nth-child(-n + 2) {
  background: var(--amber);
}
.g-ob-meter[data-score='3'] i:nth-child(-n + 3) {
  background: var(--sage);
}
.g-ob-meter[data-score='4'] i {
  background: var(--sage);
}
.g-ob-tip,
.g-ob-fine,
.g-ob-msg {
  margin: -4px 2px 0;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink-3);
}
.g-ob-fine {
  text-align: center;
}
.g-ob-fine a,
.g-ob-inline {
  color: var(--ink-2);
  font: inherit;
  text-decoration: underline;
}
.g-ob-msg:empty {
  display: none;
}
.g-ob-msg {
  color: var(--ink-2);
}
.g-ob-msg.is-bad {
  color: #ff7b72;
}
.g-ob-mail {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  color: #17171a;
  background: var(--spectral);
  box-shadow: 0 12px 30px rgba(242, 167, 195, 0.25);
}
/* the code: six boxes over one real input */
.g-ob-code {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 6), 1fr);
  gap: 6px;
  cursor: text;
}
.g-ob-code input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  font-size: 16px; /* no zoom on iOS */
  caret-color: transparent;
}
.g-ob-cell {
  display: grid;
  place-items: center;
  height: 54px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition:
    box-shadow 0.2s,
    background 0.2s;
}
.g-ob-cell.is-here {
  box-shadow: inset 0 0 0 2px rgba(242, 167, 195, 0.9);
}
.g-ob-code.is-busy .g-ob-cell {
  animation: gPulse 0.9s ease-in-out infinite;
}
.g-ob-code.is-ok .g-ob-cell {
  background: rgba(143, 216, 176, 0.2);
  box-shadow: inset 0 0 0 1.5px var(--sage);
}
.g-ob-code.is-wrong {
  animation: gShake 0.4s;
}
@keyframes gShake {
  20%,
  60% {
    transform: translateX(-8px);
  }
  40%,
  80% {
    transform: translateX(8px);
  }
}

/* the account, at the foot of the profile */
.g-account {
  margin: 26px 0 10px;
  padding: 18px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-account-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.g-account-who small {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-3);
}
.g-account-who strong {
  font-size: 16px;
  font-weight: 800;
  word-break: break-all;
}
.g-account-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-account-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.08);
}
.g-account-btn:hover {
  background: rgba(255, 255, 255, 0.13);
}
.g-account-btn.is-main {
  color: #17171a;
  background: var(--spectral);
}
.g-account-del {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: #ff7b72;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .g-ob,
  .g-ob-panel {
    transition-duration: 0.01s;
  }
}

/* who can see it */
.g-answers--vis .g-answer--row {
  justify-content: flex-start;
  gap: 12px;
  padding: 0 18px;
}
.g-vis-people[hidden],
.g-step-foot[hidden] {
  display: none;
}
.g-sheet--vis .g-step {
  gap: 14px;
}
.gcard .gcard-meta .gcard-vis {
  pointer-events: auto;
  cursor: pointer;
  color: var(--ink-2);
}
.gcard .gcard-meta .gcard-vis:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.g-overlay-vis {
  right: auto;
  left: max(16px, calc(50% - 280px + 16px));
}
.g-overlay-vis[hidden] {
  display: none;
}

/* the logo has no background of its own: white loops wherever it sits */
.g-toast-mark.is-logo,
.g-rail-logo,
.g-ob-logo {
  color: #fff;
}
.g-toast-mark.is-logo .gi {
  width: 34px;
  height: 34px;
}
.g-rail-logo .gi {
  filter: drop-shadow(0 0 12px rgba(142, 201, 242, 0.25));
}

/* the wordmark: Poppins Bold, like the headings (Proxima Nova once there's
   a licensed copy to load) */
.g-rail-word,
.g-ob-hero {
  font-family: 'Poppins', var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- tasks friends set you ---------- */

.g-requests {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.g-requests[hidden] {
  display: none;
}
.g-req {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 24px;
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.55);
  animation: gReqIn 0.45s cubic-bezier(0.2, 1.2, 0.3, 1);
}
@keyframes gReqIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
  }
}
.g-req > .g-avatar {
  flex: none;
  width: 40px;
  height: 40px;
}
.g-req-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.g-req-text small {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-req-text strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-req-text span {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-req-acts {
  flex: none;
  display: flex;
  gap: 8px;
}
.g-req-acts .g-btn {
  width: 42px;
  height: 42px;
}
.g-req-no {
  background: rgba(255, 255, 255, 0.08);
}
.g-req-yes {
  color: #0d2a1b;
  background: var(--sage);
  box-shadow: 0 6px 18px rgba(143, 216, 176, 0.35);
}
/* who set it: their face, with a little arrow */
.gcard-head .gcard-setter {
  position: relative;
  width: 26px;
  height: 26px;
  font-size: 11px;
}
.gcard-setter i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #17171a;
  background: #fff;
}
.gcard-setter i .gi {
  width: 9px;
  height: 9px;
}
/* a task sent to a friend, waiting for them to say yes */
.gcard.is-waiting {
  opacity: 0.6;
}
.gcard.is-waiting .gcard-clock {
  font-size: 18px;
  color: var(--ink-2);
}

/* a friend's calendar block: what's waiting inside it */
.g-ev-gift {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #17171a;
  background: var(--accent);
}
.g-ev-gift .gi {
  width: 12px;
  height: 12px;
}

/* ---------- settings ---------- */

.g-set {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-set.is-open {
  pointer-events: auto;
  opacity: 1;
}
.g-set-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.g-set-panel {
  position: relative;
  width: min(100%, 560px);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0d0d10, #070709);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateX(24px);
  transition: transform 0.45s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.g-set.is-open .g-set-panel {
  transform: none;
}
.g-set-head {
  flex: none;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(var(--safe-t) + 12px) 16px 10px;
}
.g-set-head h2 {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}
.g-set-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px calc(var(--safe-b) + 40px);
  scrollbar-width: none;
}
.g-set-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.g-set-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  text-align: left;
}
.g-set-me > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-set-me strong {
  font-size: 18px;
  font-weight: 800;
}
.g-set-me small {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink-3);
}
.g-set-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  background-color: hsl(205 45% 46%);
  background-image: radial-gradient(circle at 30% 25%, hsl(205 72% 78%), hsl(205 45% 46%));
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.g-set-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-set-group h3 {
  margin: 0;
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-set-list {
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.g-set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 16px;
  text-align: left;
  width: 100%;
}
.g-set-row + .g-set-row {
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}
button.g-set-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.g-set-row > i {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.g-set-row > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-set-row strong {
  font-size: 15.5px;
  font-weight: 700;
}
.g-set-row small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.g-set-row > .gi {
  flex: none;
  color: var(--ink-3);
}
.g-set-row.is-bad strong,
.g-set-row.is-bad > i {
  color: #ff7b72;
}
.g-set-row.is-plain > i {
  background: none;
}
.g-set-info b {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-2);
  max-width: 60%;
  text-align: right;
  word-break: break-all;
}
/* switches and radios */
.g-set-toggle em {
  position: relative;
  flex: none;
  width: 48px;
  height: 29px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.25s;
}
.g-set-toggle em::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.g-set-toggle.is-on em {
  background: var(--sage);
}
.g-set-toggle.is-on em::after {
  transform: translateX(19px);
}
.g-set-radio em {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.2s;
}
.g-set-radio.is-on em {
  box-shadow:
    inset 0 0 0 2px var(--sage),
    inset 0 0 0 6px #0d0d10,
    inset 0 0 0 12px var(--sage);
}
.g-set-note,
.g-set-lead {
  margin: 0;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-3);
}
.g-set-lead {
  font-size: 15px;
  color: var(--ink-2);
}
.g-set-note code {
  font-size: 12px;
  word-break: break-all;
  color: #fff;
}
.g-set-times .g-time {
  width: 110px;
  height: 38px;
}
.g-set-to {
  flex: none !important;
  color: var(--ink-3);
  font-weight: 700;
}
.g-set-person .g-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.g-set-pill {
  flex: none;
  height: 34px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.09);
}
.g-set-pill.is-bad {
  color: #ff7b72;
}
/* edit profile */
.g-set-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.g-set-face .g-set-avatar {
  width: 96px;
  height: 96px;
  font-size: 38px;
}
.g-set-link {
  font-size: 15px;
  font-weight: 750;
  color: var(--sky);
}
.g-set-link.is-bad {
  font-size: 13px;
  color: #ff7b72;
}
.g-set-link[hidden] {
  display: none;
}
.g-set-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-set-field > span {
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-3);
}
.g-set-field input,
.g-set-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  outline: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  resize: vertical;
}
.g-set-field textarea {
  min-height: 90px;
}
.g-set-field input:focus,
.g-set-field textarea:focus {
  box-shadow: inset 0 0 0 1.5px rgba(242, 167, 195, 0.7);
}
.g-set-field .g-set-at {
  padding-left: 34px;
}
.g-set-field:has(.g-set-at)::before {
  content: '@';
  position: absolute;
  left: 16px;
  top: 38px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-set-field small {
  padding: 0 4px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-3);
}
.g-set-field small.is-bad {
  color: #ff7b72;
}
.g-set-qr {
  align-self: center;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
}
.g-set-qr img {
  display: block;
  width: 180px;
  height: 180px;
}
.g-ob-btn.is-bad {
  color: #ff7b72;
}
.g-ob-go.is-bad {
  color: #fff;
  background: #ff453a;
  box-shadow: none;
}
/* are you sure? */
.g-set-confirm {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
}
.g-set-confirm-card {
  width: min(100%, 360px);
  padding: 22px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-set-confirm-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
}
.g-set-confirm-card p {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
}
.g-set-confirm-card > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* sign-up: the age and terms box */
.g-ob-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}
.g-ob-agree input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #8fd8b0;
}
.g-ob-agree a {
  color: #fff;
}

/* the profile: gear, photo, bio */
#profile {
  position: relative;
}
.g-profile-gear {
  position: absolute;
  top: 6px;
  right: 0;
}
.g-profile-face {
  cursor: pointer;
}
.g-avatar.has-photo {
  background-size: cover;
  background-position: center;
}
.g-bio {
  margin: 6px auto 0;
  max-width: 340px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: pre-line;
}
.g-profile-edit {
  display: block;
  margin: 12px auto 0;
}

/* accessibility */
.g-large-text .gcard-body,
.g-large-text .g-sheet,
.g-large-text .g-set-panel,
.g-large-text .g-profile,
.g-large-text .g-requests,
.g-large-text .g-toasts {
  zoom: 1.12;
}
.g-reduce-motion *,
.g-reduce-motion *::before,
.g-reduce-motion *::after {
  animation-duration: 0.01s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01s !important;
}

/* GIPHY's API terms ask for this wherever its GIFs are picked */
.g-giphy {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-set-me > .g-set-avatar {
  flex: none;
  display: grid;
}

/* a timer's play button: the icon and its time as one centred stack */
.gcard-check:has(.gcard-check-t:not(:empty)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.gcard-check:has(.gcard-check-t:not(:empty)) .gi {
  width: 17px;
  height: 17px;
  transform: none;
}
.gcard-check:has(.gcard-check-t:not(:empty)) .gcard-check-t {
  position: static;
  font-size: 10.5px;
  letter-spacing: -0.01em;
}
/* the play triangle's weight sits left of its box; nudge it to look centred */
.gcard-check[aria-label='Start timer'] .gi {
  translate: 1.5px 0;
}
.gcard:not(.is-done):not(.is-opening) .gcard-check:has(.gcard-check-t:not(:empty)):hover .gi {
  transform: scale(1.08);
}

/* headings are set in Poppins (the Treatly wordmark keeps its own face) */
:root {
  --font-head: 'Poppins', var(--font-display);
}
:is(h1, h2, h3):not(.g-ob-hero),
.g-review-title span {
  font-family: var(--font-head) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h1:not(.g-ob-hero) {
  font-weight: 700;
}

/* The "Treatly" wordmark (gWordmark in glass-icons.js): Figtree Bold as a shape.
 * Now: the letters are as tall as the logo's drawing, font-size = 1.127 x logo size. */
/* (older note) The "Treatly" wordmark: Figtree Bold as a shape.
 * The box holds only the letters (top of the "T"/"l" to the baseline); the "y"
 * tail hangs outside, so flex-centring lines the letters up with the logo.
 * Lockup proportions: letters 51% of the logo's visible height, gap 25% of it
 * (the logo's drawing fills 83% of its box). font-size = 0.577 x logo size. */
.g-word {
  display: inline-block;
  flex: none;
  height: 0.75em;
  width: 3.29em;
  vertical-align: 0;
  overflow: visible;
}
.g-rail-logo { gap: 6px; }
.g-rail-logo .g-word { font-size: 30px; }
.g-ob-brand .g-word { font-size: 49.6px; }
.g-ob-mark { gap: 3px; }
.g-ob-mark .g-word { font-size: 22.5px; }
.g-cheque-brand .g-word { font-size: 15px; margin-left: -3.5px; }

/* ---------- report and block: on a treat, and on a person ---------- */
.g-viewer-report {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.07);
}
.g-personbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 22px;
}
.g-personbar strong {
  flex: 1;
  font-size: 16px;
}
.g-personbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
}
.g-pal--treats .g-pal-pop .g {
  height: 38px;
  line-height: 0;
  font-size: 0;
}
.g-pal--treats .g-pal-pop .g .g-money-glyph {
  font-size: 36px;
  line-height: 1;
}

/* ---------- the bell and its list ---------- */
.g-bell {
  position: relative;
  color: #fff;
}
.g-bell .gi {
  width: 26px;
  height: 26px;
}
.g-bell-dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3040;
  box-shadow: 0 0 0 2px #000;
  font-size: 0;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-bell.has-new .g-bell-dot {
  transform: scale(1);
}
.g-sheet--inbox {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - var(--safe-t, 0px) - 70px);
  padding-bottom: 8px;
}
.g-inbox-title {
  margin: 0 4px 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.g-inbox {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -18px;
  padding: 0 18px 10px;
}
.g-inbox-h {
  margin: 14px 4px 6px;
  font-size: 15px;
  font-weight: 800;
}
.g-inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-radius: 18px;
}
.g-inbox-row.is-new {
  background: rgba(255, 255, 255, 0.05);
}
.g-inbox-face {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}
.g-inbox-face .g-avatar {
  width: 44px;
  height: 44px;
  font-size: 17px;
}
.g-inbox-face > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
/* what happened, as a small badge on the face */
.g-inbox-face em {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  box-shadow: 0 0 0 2px #1a1a1e;
}
.g-inbox-face em .gi {
  width: 12px;
  height: 12px;
}
.g-inbox-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.g-inbox-text b {
  font-weight: 800;
  color: #fff;
}
.g-inbox-text span {
  color: rgba(255, 255, 255, 0.7);
}
.g-inbox-text time {
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.g-inbox-act {
  flex: none;
  height: 34px;
  padding: 0 16px;
  border-radius: 12px;
  background: #fff;
  color: #000;
  font-weight: 800;
  font-size: 14px;
}
.g-inbox-act:disabled {
  opacity: 0.5;
}
.g-inbox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px 40px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.g-inbox-empty i {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.g-inbox-empty b {
  color: #fff;
  font-size: 18px;
}

/* ---------- Friends as a feed ---------- */
/* not positioned: cards still measure offsetTop from the scroller */
.g-post {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-list > .g-post + .g-post,
.g-list > .g-post + .g-section,
.g-list > .g-section + .g-post {
  margin-top: 14px;
}
.g-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  text-align: left;
  color: #fff;
}
.g-post-head .g-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
/* "Maya  3:00 left" on one line */
.g-post-who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.g-post-who b {
  font-size: 15px;
  font-weight: 800;
}
.g-post-who small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
/* the post already says whose it is */
.g-post .gcard-head > .g-avatar:not(.gcard-setter) {
  display: none;
}
.g-post .gcard--friend {
  height: 150px;
}
.g-post-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  min-height: 34px;
}
.g-post-meta {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-post-meta b {
  color: #fff;
  font-weight: 700;
}
.g-post-give {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
}
.g-post-give .gi {
  width: 22px;
  height: 22px;
}
.g-post-give:active {
  transform: scale(0.88);
}

/* searching Friends: people first */
.g-people-hits[hidden] {
  display: none;
}
.g-people-hits {
  margin-bottom: 12px;
}
.g-people-list {
  border-radius: 24px;
  padding: 4px 10px;
}
.g-people-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.g-people-hit + .g-people-hit {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.g-people-who {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: #fff;
}
.g-people-who > span:not(.g-avatar) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.g-people-who strong {
  font-size: 15px;
}
.g-people-who small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* the leaderboard's own sheet */
.g-sheet--board .gh-board {
  margin: 0;
  background: none;
  box-shadow: none;
}

/* several tasks set for you: one row, open on a tap */
.g-req-sum {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  border-radius: 22px;
  text-align: left;
  color: #fff;
}
.g-req-faces {
  display: flex;
  flex: none;
}
.g-req-faces .g-avatar {
  width: 30px;
  height: 30px;
  font-size: 12px;
  box-shadow: 0 0 0 2px #111;
}
.g-req-faces .g-avatar + .g-avatar {
  margin-left: -10px;
}
.g-req-sum-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.g-req-sum-text strong {
  font-size: 15px;
}
.g-req-sum-text small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-req-sum-go {
  display: grid;
  transition: transform 0.25s;
  color: rgba(255, 255, 255, 0.5);
}
.g-req-sum.is-open .g-req-sum-go {
  transform: rotate(90deg);
}

/* friends stories row: room for the streak rings */
#s-friends .gh-duos {
  padding-top: 6px;
}
/* the faces get the same breathing room as the gap between two posts */
#s-friends .gh-duos-host {
  margin-bottom: 16px;
}

/* ---------- laptop: Friends is one centred feed column, like Instagram on the web ---------- */
#friend-filter[hidden] {
  display: none;
}
@media (min-width: 760px) {
  #s-friends .g-head,
  #s-friends .gh-duos-host,
  #s-friends .g-task-search,
  #s-friends .g-people-hits,
  #s-friends .g-livenow,
  #s-friends .gwel-host,
  #s-friends #gh-gate,
  #s-friends .g-list {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  #s-friends .g-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  #s-friends .g-list > .g-post + .g-post {
    margin-top: 28px;
  }
  #s-friends .gh-duos-host {
    margin-bottom: 28px;
  }
  #s-friends .g-post .gcard--friend {
    height: 220px;
  }
  #s-friends .g-post-head .g-avatar {
    width: 36px;
    height: 36px;
  }
  #s-friends .g-head {
    padding-top: 18px;
  }
}

/* Friends has no search box: people are found from Add friends (the
   hidden input still narrows the feed to one person after a face tap) */
#s-friends .g-task-search,
#s-friends .g-people-hits {
  display: none;
}
.g-personbar-close {
  width: 34px;
  height: 34px;
  flex: none;
}
.g-personbar:has(.g-personbar-close) {
  gap: 8px;
}
.g-personbar:has(.g-personbar-close) strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-personbar:has(.g-personbar-close) .g-personbar-btn {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.g-personbar:has(.g-personbar-close) .g-personbar-btn span {
  display: none;
}

/* ---------- card text that never clips ----------
   Titles are Poppins, whose capitals, accents and tails (g, y, p) reach
   past a 1.15 line. The two-line clamp hides overflow, so they were shaved
   at the top and bottom. A little room inside the clamp (padding), given
   back outside it (negative margin), keeps the layout where it was. */
.gcard-title {
  line-height: 1.2;
  /* the shadow is drawn around the clipped title, not inside it, so it
     fades out softly instead of ending in a hard-edged band */
  text-shadow: none;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  padding-top: 0.1em;
  padding-bottom: 0.14em;
  margin-top: -0.1em;
  margin-bottom: -0.14em;
}
.gcard-clock {
  line-height: 1.08;
}
/* a title on two lines: the card grows so the clock and the icons below
   it keep their room (glass-app.js sets the class) */
.gcard.is-two {
  height: 190px;
}
.gcard--friend.is-two {
  height: 206px;
}

/* ---------- giving: the throw, combos ---------- */

/* the treat in flight: the outer carries x, the inner the arc */
.g-fly {
  position: fixed;
  z-index: 70;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}
.g-flyer {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  border-radius: 22px;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  will-change: transform;
}
.g-flyer--note {
  padding: 0 14px;
  font: 700 22px/1 Caveat, 'Segoe Print', cursive;
  white-space: nowrap;
  text-shadow: 0 0 12px hsla(var(--h), 100%, 70%, 0.9);
}
.g-flyer--gif,
.g-flyer--photo {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
}
.g-flyer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* where it hits the glass */
.g-hit {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}
.g-hit i {
  position: absolute;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 18px rgba(255, 255, 255, 0.35);
  animation: gHit 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.g-hit i + i {
  animation-delay: 0.1s;
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
@keyframes gHit {
  from {
    transform: scale(0.15);
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.g-hit b {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px rgba(255, 220, 140, 0.8);
  opacity: 0;
  animation: gSpark 0.65s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}
@keyframes gSpark {
  0% {
    transform: rotate(var(--a)) translateX(4px) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a)) translateX(var(--d)) scale(0.2);
    opacity: 0;
  }
}

.gcard-count.is-bump {
  animation: gBump 0.5s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes gBump {
  30% {
    transform: scale(1.3);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
  }
}

/* x2, x3 ... over the card */
.g-combo {
  position: fixed;
  z-index: 71;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    0 8px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translate(-50%, 10px) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.g-combo b {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.g-combo span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.g-combo.is-on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  animation: gComboPop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.g-combo.is-hot b {
  text-shadow: 0 0 14px rgba(255, 220, 140, 0.9);
}
@keyframes gComboPop {
  0% {
    transform: translate(-50%, 0) scale(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard-count.is-bump,
  .g-combo.is-on {
    animation: none;
  }
}

/* ---------- the treat window: a page per kind, swiped sideways ---------- */

.g-tw {
  --glow: 255, 255, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 6px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
}
/* a soft light in the colour of the page you're on */
.g-tw-glow {
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  top: -60px;
  height: 120px;
  border-radius: 50%;
  background-color: rgba(var(--glow), 0.22);
  filter: blur(36px);
  transition: background-color 0.45s;
  pointer-events: none;
}
.g-tw-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  height: 54px;
}
.g-tw-lens {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(100% / var(--n));
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(var(--glow), 0.3);
  transition: box-shadow 0.45s;
  will-change: transform;
  pointer-events: none;
}
.g-tw-tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s;
}
.g-tw-tab .g {
  display: grid;
  place-items: center;
  height: 26px;
  transition:
    transform 0.4s cubic-bezier(0.3, 1.7, 0.5, 1),
    filter 0.3s;
}
.g-tw-tab .g-money-glyph {
  font-size: 22px;
}
.g-tw-tab small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.g-tw-tab[aria-selected='true'] {
  color: #fff;
}
.g-tw-tab[aria-selected='true'] .g {
  transform: translateY(-1px) scale(1.14);
  filter: drop-shadow(0 0 8px rgba(var(--glow), 0.8));
}

.g-tw-pages {
  height: 204px;
  overflow: hidden;
  border-radius: 24px;
  /* up and down stay with the page; sideways is the pager's */
  touch-action: pan-y;
}
.g-tw-track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.g-tw-page {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 6px 6px 4px;
}

.g-tw-slip {
  position: relative;
  flex: 1;
  display: flex;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: text;
  transition: box-shadow 0.25s, background 0.25s;
}
.g-tw-slip:focus-within {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px hsla(var(--h), 90%, 70%, 0.6);
}
.g-tw-slip.is-sent {
  animation: gTwSent 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes gTwSent {
  35% {
    transform: scale(0.97);
  }
}
.g-tw-write {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 22px;
  border: 0;
  background: none;
  outline: none;
  resize: none;
  font: 600 19px/1.35 var(--sys, -apple-system, system-ui, sans-serif);
  color: hsl(var(--h), 100%, 88%);
  caret-color: hsl(var(--h), 100%, 72%);
}
.g-tw-write:focus,
.g-tw-write:focus-visible {
  outline: none;
  box-shadow: none;
}
.g-tw-write::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.g-tw-left {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.g-tw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
}
.g-tw-hues {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.g-tw-hue {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  opacity: 0.75;
  transition:
    transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1),
    opacity 0.2s;
}
.g-tw-hue.is-on {
  opacity: 1;
  transform: scale(1.25);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px #fff,
    0 0 14px var(--c);
}
.g-tw-send {
  flex: none;
  width: 44px;
  height: 44px;
  transition: transform 0.3s cubic-bezier(0.3, 1.8, 0.5, 1), opacity 0.2s;
}
.g-tw-send:disabled {
  opacity: 0.35;
  transform: scale(0.88);
}

/* gif: search, a few moods, and a wall of them moving */
.g-tw-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-tw-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: #fff;
  font-size: 15px;
}
.g-tw-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.g-tw-topics {
  flex: none;
  display: flex;
  gap: 6px;
  margin: -8px;
  padding: 8px;
  overflow: hidden;
}
.g-tw-topic {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.2s, background 0.2s, box-shadow 0.3s;
}
.g-tw-topic.is-on {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    0 0 14px rgba(var(--glow), 0.4);
}
.g-tw-gifs {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 74px;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  border-radius: 16px;
  transition: opacity 0.2s;
}
.g-tw-gifs::-webkit-scrollbar {
  display: none;
}
.g-tw-gifs.is-loading {
  opacity: 0.45;
}
.g-tw-gif {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 70%) 0 0 / 300% 100%;
  animation:
    gTwPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both,
    gTwShimmer 1.2s linear infinite;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-tw-gif.is-ready {
  animation: gTwPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.g-tw-gif:active {
  transform: scale(0.92);
}
.g-tw-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s;
}
.g-tw-gif.is-ready img {
  opacity: 1;
}
.g-tw-gif.is-sent {
  box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(var(--glow), 0.6);
}
@keyframes gTwPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes gTwShimmer {
  to {
    background-position: -300% 0;
  }
}
.g-tw-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* photo: two big doors */
.g-tw-sources {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.g-tw-source {
  --c: 80, 180, 255;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 24px;
  cursor: pointer;
  color: #fff;
  background: radial-gradient(90% 70% at 50% 30%, rgba(var(--c), 0.18), transparent 70%), rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-tw-source.is-cam {
  --c: 255, 80, 190;
}
.g-tw-source:active {
  transform: scale(0.95);
}
.g-tw-source .g {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    0 0 26px rgba(var(--c), 0.45);
  animation: gTwBob 3.2s ease-in-out infinite;
}
.g-tw-source.is-cam .g {
  animation-delay: -1.6s;
}
.g-tw-source b {
  font-size: 15px;
  font-weight: 700;
}
@keyframes gTwBob {
  50% {
    transform: translateY(-5px) rotate(-3deg);
  }
}

/* voice: one big button that listens */
.g-tw-voice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.g-tw-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
}
.g-tw-bars i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  transform: scaleY(0.12);
  transition: transform 0.08s linear;
}
.g-tw-voice:not(.is-rec) .g-tw-bars i {
  animation: gTwWave 1.6s ease-in-out infinite;
}
.g-tw-voice.is-rec .g-tw-bars i {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 90, 90, 0.8);
}
.g-tw-bars i:nth-child(3n) {
  animation-delay: -0.4s;
}
.g-tw-bars i:nth-child(3n + 1) {
  animation-delay: -0.8s;
}
.g-tw-bars i:nth-child(4n) {
  animation-delay: -1.2s;
}
@keyframes gTwWave {
  50% {
    transform: scaleY(0.4);
  }
}
.g-tw-rec {
  --lv: 0;
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 50% 35%, #ff6b6b, #e02f3d);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 8px 26px rgba(224, 47, 61, 0.5);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-tw-rec:active {
  transform: scale(0.92);
}
.g-tw-rec .g {
  position: relative;
  z-index: 1;
}
.g-tw-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 100, 100, 0.55);
  animation: gTwRing 2.4s ease-out infinite;
  pointer-events: none;
}
.g-tw-ring + .g-tw-ring {
  animation-delay: -1.2s;
}
@keyframes gTwRing {
  from {
    transform: scale(0.95);
    opacity: 0.9;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
.g-tw-voice.is-rec .g-tw-rec {
  transform: scale(calc(1 + var(--lv) * 0.12));
  transition: transform 0.08s linear;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 calc(20px + var(--lv) * 40px) rgba(255, 70, 80, 0.75);
}
.g-tw-voice.is-rec .g-tw-ring {
  animation-duration: 1.1s;
}
.g-tw-time {
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.6);
}
.g-tw-voice.is-rec .g-tw-time {
  color: #fff;
}

/* money */
.g-tw-page--money {
  align-items: center;
  justify-content: center;
}
.g-tw-coin {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe7a8, #e0a23a 60%, #a8701c);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 2px rgba(255, 255, 255, 0.6),
    0 0 30px rgba(255, 196, 80, 0.45);
  animation: gTwCoin 4s ease-in-out infinite;
}
.g-tw-coin b {
  font-size: 32px;
  font-weight: 800;
  color: #6b4410;
}
@keyframes gTwCoin {
  0%,
  100% {
    transform: rotateY(0) translateY(0);
  }
  50% {
    transform: rotateY(180deg) translateY(-4px);
  }
}
.g-tw-moneytxt {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.g-tw-moneygo {
  height: 42px;
  padding: 0 22px;
  border-radius: 21px;
  font-size: 15px;
  font-weight: 700;
  color: #000;
  background: #fff;
}

.g-tw--sheet {
  margin-top: 4px;
}
/* in a sheet the sheet is the glass: no second panel inside it */
.g-tw.glass.g-tw--sheet {
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.g-tw.g-tw--sheet::before,
.g-tw--sheet .g-tw-glow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .g-tw-gif,
  .g-tw-source .g,
  .g-tw-voice:not(.is-rec) .g-tw-bars i,
  .g-tw-ring,
  .g-tw-coin {
    animation: none;
  }
}
#tool-treats {
  width: 100%;
}

/* Writing sits just behind the front pane until the task is done: you can
   tell something's written there (colour, the shape of the words), but not
   read it. Finishing wipes the glass clear. */
.gcard-sharp,
.gcard-pen {
  filter: blur(3.4px) saturate(1.4) brightness(1.15);
  opacity: 0.9;
  transition:
    filter 0.9s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.9s;
}
.gcard.is-open .gcard-sharp,
.gcard.is-open .gcard-pen {
  filter: blur(5px) saturate(1.4) brightness(1.15);
}
.gcard.is-done .gcard-sharp,
.gcard.is-done .gcard-pen {
  filter: none;
  opacity: 1;
}

/* ---------- the + in the bar: a dark core in a turning ring of colour ---------- */
.g-tab-add::before {
  display: none;
}
.g-tab-add .g-add-aura,
.g-tab-add .g-add-core {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.g-tab-add .g-add-aura {
  width: 50px;
  height: 50px;
  background: conic-gradient(from 0deg, #ff4d6d, #ffd166, #80ffdb, #4cc9f0, #c77dff, #ff4d6d);
  animation: gAddSpin 6s linear infinite;
}
/* the same ring, blurred into a glow that breathes */
.g-tab-add .g-add-aura::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  filter: blur(12px);
  opacity: 0.45;
  animation: gAddBreathe 3.2s ease-in-out infinite;
}
.g-tab-add .g-add-core {
  width: 44px;
  height: 44px;
  background: radial-gradient(circle at 50% 28%, #2c2c36, #0b0b0f 70%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px rgba(0, 0, 0, 0.5);
}
.g-tabbar .g-tab-add .gi {
  z-index: 1;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
  transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.g-tab-add:active .gi {
  transform: rotate(90deg) scale(0.9);
}
.g-tab-add:active .g-add-aura {
  animation-duration: 1.2s;
}
/* tapped: the plus spins, the core flashes, a ring of light goes out */
.g-tab-add.is-pop .gi {
  animation: gAddTwist 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.g-tab-add.is-pop .g-add-core::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.6);
  animation: gAddRing 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes gAddSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes gAddBreathe {
  50% {
    opacity: 0.85;
    transform: scale(1.12);
  }
}
@keyframes gAddTwist {
  from {
    transform: rotate(-90deg) scale(0.7);
  }
}
@keyframes gAddRing {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-tab-add .g-add-aura,
  .g-tab-add .g-add-aura::after,
  .g-tab-add.is-pop .gi,
  .g-tab-add.is-pop .g-add-core::after {
    animation: none;
  }
}

/* ---------- the treat window as real glass ----------
   No grey slab: the same clear glass as the pen row, with coloured light
   moving slowly inside it (tinted by the page you're on), and every field
   inside cut into the glass rather than painted on. */
.g-tw.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.08);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 30px rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.55);
}
.g-tw.glass.g-tw--sheet {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* light inside the glass: one in the page's colour, one cool, drifting */
.g-tw-glow {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  height: auto;
  border-radius: inherit;
  background: none;
  filter: none;
  overflow: hidden;
}
.g-tw-glow::before,
.g-tw-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  will-change: transform;
}
.g-tw-glow::before {
  width: 70%;
  height: 160px;
  top: -70px;
  left: 15%;
  background: rgb(var(--glow));
  opacity: 0.28;
  transition: background-color 0.5s;
  animation: gTwDriftA 14s ease-in-out infinite alternate;
}
.g-tw-glow::after {
  width: 55%;
  height: 150px;
  bottom: -80px;
  left: -10%;
  background: linear-gradient(90deg, #4cc9f0, #c77dff);
  opacity: 0.2;
  animation: gTwDriftB 18s ease-in-out infinite alternate;
}
@keyframes gTwDriftA {
  to {
    transform: translate(18%, 12px) scale(1.15);
  }
}
@keyframes gTwDriftB {
  to {
    transform: translate(110%, -14px) scale(0.9);
  }
}

/* fields cut into the glass */
.g-tw-slip,
.g-tw-search,
.g-tw-topic,
.g-tw-source {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.g-tw-slip:focus-within {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1.5px hsla(var(--h), 95%, 72%, 0.55),
    0 0 26px hsla(var(--h), 95%, 62%, 0.22);
}
.g-tw-write::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.g-tw-topic.is-on {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    0 0 16px rgba(var(--glow), 0.45);
}
.g-tw-source {
  background: radial-gradient(90% 70% at 50% 30%, rgba(var(--c), 0.2), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.03));
}
.g-tw-gif {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* ink dots: little glass beads */
.g-tw-hue {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 45%), var(--c);
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    0 0 10px var(--c);
}
.g-tw-hue.is-on {
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(0, 0, 0, 0.6),
    0 0 0 4px #fff,
    0 0 16px var(--c);
}
/* send: a clear bead until there's something to send, then it lights in the ink */
.g-tw-send.g-btn--solid {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.g-tw-send.g-btn--solid:not(:disabled) {
  background: radial-gradient(circle at 50% 30%, hsl(var(--h), 95%, 72%), hsl(var(--h), 85%, 50%));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.6),
    0 0 22px hsla(var(--h), 95%, 60%, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .g-tw-glow::before,
  .g-tw-glow::after {
    animation: none;
  }
}

/* ---------- the + as a glass bead (replaces the rainbow ring) ----------
   Clear glass like the rest of the app, with the same drifting violet and
   blue light inside it, a fine iridescent rim and a gloss on top. */
.g-tab-add .g-add-aura {
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(199, 125, 255, 0.28);
  animation: none;
}
/* the light inside: violet and blue, slowly turning */
.g-tab-add .g-add-aura::before {
  content: '';
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(199, 125, 255, 0.85), transparent 45%),
    radial-gradient(circle at 72% 70%, rgba(76, 201, 240, 0.7), transparent 45%),
    radial-gradient(circle at 75% 25%, rgba(255, 77, 109, 0.35), transparent 40%);
  filter: blur(7px);
  opacity: 0.75;
  animation: gAddSpin 9s linear infinite;
}
/* a fine iridescent rim */
.g-tab-add .g-add-aura::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, 0.7), rgba(199, 125, 255, 0.5), rgba(76, 201, 240, 0.5), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: none;
  opacity: 1;
  animation: none;
  transform: none;
}
/* the gloss on top of the bead */
.g-tab-add .g-add-core {
  width: 50px;
  height: 50px;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, 0.38), transparent 55%);
  box-shadow: none;
}
.g-tabbar .g-tab-add .gi {
  filter: drop-shadow(0 1px 6px rgba(199, 125, 255, 0.7));
}
.g-tab-add:active .g-add-aura {
  transform: scale(0.92);
}
.g-tab-add:active .g-add-aura::before {
  animation-duration: 2s;
}
@media (prefers-reduced-motion: reduce) {
  .g-tab-add .g-add-aura::before {
    animation: none;
  }
}

/* glassy black: the treat window is smoked glass, like the pen row, with
   only a faint white sheen moving inside, no colour */
.g-tw.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)), rgba(8, 8, 10, 0.55);
}
.g-tw-glow::before {
  background: #fff;
  opacity: 0.06;
}
.g-tw-glow::after {
  display: none;
}
.g-tw-slip:focus-within {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* black glass, for real: near-black with a thin sheen across the top edge
   and the bright rim, no milky grey. The pen row matches. */
.g-tw.glass,
#tool-ink.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 38%), rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.32),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.07),
    0 18px 40px rgba(0, 0, 0, 0.6);
}
.g-tw.glass.g-tw--sheet {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.g-tw-glow::before {
  opacity: 0.04;
}
.g-tw-slip,
.g-tw-search,
.g-tw-topic,
.g-tw-source {
  background: rgba(0, 0, 0, 0.42);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.g-tw-slip:focus-within {
  background: rgba(0, 0, 0, 0.36);
}
.g-tw-source {
  background: radial-gradient(90% 70% at 50% 30%, rgba(var(--c), 0.16), transparent 70%), rgba(0, 0, 0, 0.42);
}
.g-tw-lens {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

/* ---------- black, like the card ----------
   The treat window and the pen row are the card's own black: near-solid,
   with the same diagonal sheen, and no blur, so nothing grey shows through
   whatever is behind them (and on every performance tier). */
#tools .g-tw.glass,
#tools #tool-ink.glass {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0.045) 100%),
    #050506;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.7);
}
#tools .g-tw-glow {
  display: none;
}

/* ---------- the +: an obsidian bead ----------
   Deep black with a hard gloss on top, and a thin line of light that runs
   slowly round its edge, like light catching polished stone. */
.g-tab-add .g-add-aura {
  background: radial-gradient(circle at 50% 115%, #26262c, #050506 62%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 -3px 8px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-tab-add .g-add-aura::before {
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0.95) 80%, rgba(255, 255, 255, 0.15) 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: none;
  opacity: 1;
  animation: gAddSpin 4.5s linear infinite;
}
.g-tab-add .g-add-aura::after {
  background: conic-gradient(from 200deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.28));
}
.g-tab-add .g-add-core {
  background: radial-gradient(70% 42% at 50% 12%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 60%, transparent 72%);
}
.g-tabbar .g-tab-add .gi {
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

/* ---------- quick add: one line, or one tap ---------- */
.g-qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.g-qa-ask {
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.g-qa-sub {
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.g-qa.is-chat .g-qa-sub {
  display: none;
}
.g-qa-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.25s;
}
.g-qa-line:focus-within {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 24px rgba(255, 255, 255, 0.06);
}
.g-qa-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 11px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  color: #fff;
  font: 600 18px/1.3 var(--sys, system-ui, sans-serif);
}
.g-qa-input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.g-qa-go {
  flex: none;
  width: 44px;
  height: 44px;
  color: #000;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.2s;
}
.g-qa-go b {
  font-size: 16px;
  font-weight: 800;
}
.g-qa-go:disabled {
  opacity: 0.25;
  transform: scale(0.88);
}
.g-qa-hint {
  margin: -2px 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
}
.g-qa-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-qa-preview:empty {
  display: none;
}
.g-qa-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: gQaIn 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes gQaIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}
.g-qa-item-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-qa-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
}
.g-qa-chip--link {
  color: var(--sky, #4cc9f0);
}
.g-qa-more-n {
  padding: 0 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.g-qa-label {
  margin: 8px 4px -2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.g-qa-sugg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.g-qa-s {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: gQaIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: background 0.2s, box-shadow 0.25s;
}
.g-qa-s:active {
  background: rgba(255, 255, 255, 0.1);
}
.g-qa-s > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3);
  transition: background 0.25s, color 0.25s;
}
.g-qa-s > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-qa-s b {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-qa-s small {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g-qa-s .g-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.g-qa-s.is-added {
  background: rgba(143, 216, 176, 0.08);
  box-shadow: inset 0 0 0 1px rgba(143, 216, 176, 0.3);
}
.g-qa-s.is-added > i {
  color: #0d2a1b;
  background: var(--sage, #8fd8b0);
}
.g-qa-s--series small,
.g-qa-s--week small {
  color: rgba(255, 255, 255, 0.62);
}
.g-qa-s--week {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-qa-askset {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.g-qa-faces {
  display: flex;
  flex: none;
}
.g-qa-faces .g-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
  box-shadow: 0 0 0 2px #0b0b0d;
}
.g-qa-faces .g-avatar + .g-avatar {
  margin-left: -9px;
}
.g-qa-askset-t {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-qa-askset-t b {
  font-size: 15px;
}
.g-qa-askset-t small {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.g-qa-more {
  margin-top: 6px;
}
.g-qa-kinds {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.g-qa-kind {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.g-qa-kind:active {
  transform: scale(0.96);
}

/* this week like last week */
.g-qa-weeklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 14px;
}
.g-qa-wk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s;
}
.g-qa-wk.is-on {
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}
.g-qa-wk > i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}
.g-qa-wk.is-on > i {
  color: #000;
  background: #fff;
  box-shadow: none;
}
.g-qa-wk span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-qa-wk b {
  font-size: 15px;
}
.g-qa-wk small {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.g-qa-weekgo {
  width: 100%;
  height: 52px;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 800;
  color: #000;
  background: #fff;
}
.g-qa-weekgo:disabled {
  opacity: 0.3;
}

/* set me one: what kind of thing */
.gh-setkinds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}
.gh-setkind {
  height: 32px;
  padding: 0 13px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}
.gh-setkind.is-on {
  color: #000;
  background: #fff;
}

/* a task with a link on it */
.gcard-link {
  gap: 4px;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .g-qa-item,
  .g-qa-s {
    animation: none;
  }
}
.g-qa-input:focus,
.g-qa-input:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ---------- home page: the Treatly name on top, like Instagram ----------
 * Phones only (the laptop rail already carries the logo). The name takes
 * the place of the big "Today"; the date sits under it. */
.g-brand-head {
  display: none;
}
@media (max-width: 759px) {
  #s-today .g-head--row {
    align-items: flex-start;
  }
  .g-brand-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    color: var(--ink);
  }
  .g-brand-head .gi {
    width: 34px;
    height: 34px;
  }
  /* the letters as tall as the logo's drawing (T top to baseline = its height) */
  .g-brand-head .g-word {
    font-size: 38.3px;
  }
  #s-today .g-kicker {
    margin: 6px 0 0 2px;
  }
  #s-today .g-today-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- an empty day on Today (renderFill) ---------- */
.g-fill[hidden] {
  display: none;
}
.g-fill {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}
.g-fill-card {
  position: relative;
  border-radius: 26px;
  padding: 20px 20px 18px;
  overflow: hidden;
}
.g-fill-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-fill-h {
  margin: 6px 0 14px;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.g-fill-h3 {
  margin: 6px 0 4px;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
}
.g-fill-p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-2);
}
/* a soft light behind the question, so the card isn't flat black */
.g-fill-start::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 92, 168, 0.22), rgba(120, 90, 255, 0.12) 55%, transparent);
  pointer-events: none;
}
.g-fill-line {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 5px 5px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-fill-line:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}
.g-fill-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 10px 0;
}
.g-fill-input::placeholder {
  color: var(--ink-3);
}
.g-fill-go {
  width: 42px;
  height: 42px;
  flex: none;
  background: #fff;
  color: #000;
}
.g-fill-ideas {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.g-fill-idea {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px 0 11px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.g-fill-idea .gi {
  color: var(--ink-3);
}
.g-fill-idea:hover {
  background: rgba(255, 255, 255, 0.14);
}
.g-fill-idea:active {
  transform: scale(0.95);
}

.g-fill-fr {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 8px 8px 6px;
  border: 0;
  border-radius: 18px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}
.g-fill-fr:hover {
  background: rgba(255, 255, 255, 0.06);
}
.g-fill-fr-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.g-fill-fr-t b {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-fill-fr-t small {
  font-size: 13px;
  color: var(--ink-3);
}
.g-fill-fr-go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  color: var(--accent, #fff);
  background: color-mix(in srgb, var(--accent, #fff) 16%, transparent);
}
.g-fill-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.g-fill-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}
.g-fill-face:hover {
  transform: translateY(-2px);
}
.g-fill-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  background: #fff;
  cursor: pointer;
}

.g-fill-wall-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 6px 10px;
}
.g-fill-wall-head span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-fill-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 4px;
}
.g-fill-strip::-webkit-scrollbar {
  display: none;
}
.g-fill-tr {
  position: relative;
  flex: none;
  width: 132px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: pointer;
  color: #fff;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.g-fill-tr:hover {
  transform: translateY(-3px) rotate(-1deg);
}
.g-fill-media {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.g-fill-media img,
.g-fill-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-fill-media.is-doodle img,
.g-fill-media.is-drawing img {
  object-fit: contain;
  padding: 12px;
}
.g-fill-media.is-note {
  padding: 14px 12px 40px;
  background: hsl(var(--h) 70% 20%);
}
.g-fill-note {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: hsl(var(--h) 90% 88%);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-fill-tr-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 8px 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.g-fill-tr-cap .g-avatar {
  flex: none;
}
.g-fill-tr-cap span:last-child {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 760px) {
  .g-fill {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 16px;
    margin: 6px 0 30px;
  }
  .g-fill-card {
    padding: 28px 28px 24px;
  }
  .g-fill-h {
    font-size: 34px;
    margin-bottom: 20px;
  }
  .g-fill-wall {
    grid-column: 1 / -1;
  }
  .g-fill-strip {
    margin: 0;
    padding: 0 0 4px;
  }
  .g-fill-tr {
    width: 168px;
  }
  /* one card on its own (the usual case now): the full width, lined up with the
     tiles above and the grid below, with a sensibly sized line to type in */
  .g-fill > .g-fill-card:only-child {
    grid-column: 1 / -1;
  }
  .g-fill > .g-fill-card:only-child .g-fill-line,
  .g-fill > .g-fill-card:only-child .g-fill-or {
    max-width: 720px;
  }
}

/* ---------- "Update Treatly": an old version that must update (js/glass-config.js) ---------- */
.g-update {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.25s;
}
.g-update.is-in {
  opacity: 1;
}
.g-update-card {
  width: min(340px, 100%);
  padding: 30px 24px 22px;
  border-radius: 32px;
  text-align: center;
  color: #fff;
}
.g-update-card img {
  display: block;
  margin: 0 auto 14px;
}
.g-update-card h2 {
  margin: 0 0 8px;
  font: 800 24px/1.15 'Figtree', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.g-update-card p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.5;
}
.g-update-go {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 999px;
  color: #000;
  background: #fff;
  font: 700 16px 'Figtree', system-ui, sans-serif;
}

/* ---------- Today's feed (renderFeed) ----------
 * Friends' moments are solid glass; suggestions are dashed and tinted, with
 * a "Suggested" tag, so a suggestion never passes for a real task. */
.g-feed[hidden] {
  display: none;
}
.g-fill-or {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.g-fd-heading {
  margin-top: 26px;
}
.g-fd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.g-fd {
  position: relative;
  border-radius: 24px;
  padding: 16px 16px 14px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  animation: g-fd-in 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes g-fd-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-fd {
    animation: none;
  }
}
.g-fd-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.g-fd-who {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.g-fd-who b {
  font-size: 14px;
}
.g-fd-who small {
  font-size: 12px;
  color: var(--ink-3);
}
.g-fd-who em {
  font-style: normal;
}
.g-fd-title {
  margin: 12px 0 4px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.g-fd-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.g-fd-meta b {
  color: var(--ink);
}
.g-fd-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.g-fd-acts .g-avatar {
  margin-left: auto;
}
.g-fd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 15px 0 12px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.g-fd-btn:active {
  transform: scale(0.94);
}
.g-fd-btn.is-main {
  background: #fff;
  color: #000;
}
.g-fd-btn.is-ghost {
  background: rgba(255, 255, 255, 0.09);
  color: var(--ink);
}
.g-fd-btn.is-ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}
.g-fd-btn.is-added {
  background: #3ddc84;
  color: #04210f;
}
.g-fd-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9b6ff;
}
.g-fd-tag.is-clutch {
  margin-top: 10px;
  color: #ffb340;
}

/* a suggestion: dashed and tinted, never solid like a real task */
.g-fd-sugg {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(140, 100, 255, 0.2), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(255, 80, 170, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.02);
  box-shadow: none;
  border: 1.5px dashed rgba(201, 182, 255, 0.45);
}
.g-fd-sugg .g-fd-title {
  margin-top: 8px;
}
.g-fd-sugg.is-added {
  border-style: solid;
  border-color: rgba(61, 220, 132, 0.6);
}

/* a friend racing a clock: their colour, and a bar that fills as time runs */
.g-fd-live {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #fff) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent, #fff) 16%, transparent), rgba(255, 255, 255, 0.03) 60%);
  cursor: pointer;
}
.g-fd-live.is-close {
  box-shadow: inset 0 0 0 1.5px #ff4d4d, 0 0 30px -8px rgba(255, 77, 77, 0.6);
}
.g-fd-live.is-close .g-fd-who em {
  color: #ff6b6b;
  font-weight: 700;
}
.g-fd-bar {
  display: block;
  height: 5px;
  margin: 10px 0 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.g-fd-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #fff);
  transition: width 1s linear;
}
.g-fd-live.is-close .g-fd-bar b {
  background: #ff4d4d;
}

.g-fd-done {
  background: linear-gradient(170deg, rgba(61, 220, 132, 0.12), rgba(255, 255, 255, 0.03) 55%);
  box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.28);
}
.g-fd-gone {
  background:
    linear-gradient(125deg, transparent 46%, rgba(255, 255, 255, 0.12) 47%, transparent 48%),
    linear-gradient(35deg, transparent 62%, rgba(255, 255, 255, 0.08) 63%, transparent 64%),
    linear-gradient(170deg, rgba(255, 77, 77, 0.12), rgba(255, 255, 255, 0.03) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.28);
}
.g-fd-mem {
  background: linear-gradient(170deg, rgba(255, 196, 80, 0.1), rgba(255, 255, 255, 0.03) 55%);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 80, 0.22);
}
.g-fd-nudge {
  background: rgba(255, 255, 255, 0.03);
}

.g-fd-proof {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.05);
}
.g-fd-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.g-fd-thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.g-fd-thumb {
  position: relative;
  width: 72px;
  height: 96px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.g-fd-thumb .g-fill-media.is-note {
  padding: 8px;
}
.g-fd-thumb .g-fill-note {
  font-size: 11px;
  -webkit-line-clamp: 6;
}
.g-fd-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}
.g-fd-end {
  height: 1px;
}

@media (min-width: 760px) {
  /* columns, not a grid: cards of different heights stack without gaps */
  .g-fd-grid {
    display: block;
    columns: 3 300px;
    column-gap: 16px;
  }
  .g-fd-grid > .g-fd {
    break-inside: avoid;
    margin-bottom: 16px;
  }
  .g-fd {
    padding: 20px 20px 18px;
  }
}

/* ---------- whose task it is, by colour ----------
 * Yours: plain glass. A friend set it: blue. Treatly suggested it: violet
 * (the same violet as suggestions in the feed). A stripe down the left,
 * a tinted rim, and a word under the title. */
.gcard--by-friend {
  --src: #4da3ff;
}
.gcard--by-treatly {
  --src: #b18cff;
}
.gcard--by-friend,
.gcard--by-treatly {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--src) 55%, transparent),
    inset 0 0 40px color-mix(in srgb, var(--src) 14%, transparent),
    0 18px 40px rgba(0, 0, 0, 0.6);
}
.gcard-src {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--src);
  pointer-events: none;
}
.g-pill.gcard-srctag {
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--src);
  background: color-mix(in srgb, var(--src) 16%, transparent);
}
/* the feed's friend moments wear the friend blue too */
.g-fd-tag.is-friend {
  color: #4da3ff;
}

.g-fd-dare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.g-fd-dare-row .g-fd-title {
  margin: 0;
}
.g-fd-big {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-top: 12px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.g-fd-big .g-fill-media.is-note {
  padding: 22px;
}
.g-fd-big .g-fill-note {
  font-size: 22px;
}

/* ---------- delete a task you set yourself (next to "who can see this") ---------- */
.g-overlay-del {
  right: auto;
  left: max(76px, calc(50% - 280px + 76px));
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1),
    width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
    color 0.2s;
}
.g-overlay-del.is-solo {
  left: max(16px, calc(50% - 280px + 16px));
}
.g-overlay-del[hidden] {
  display: none;
}
.g-overlay-del.is-armed {
  width: auto;
  border-radius: 999px;
  gap: 6px;
  padding: 0 16px 0 13px;
  color: #ff6b61;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 69, 58, 0.7),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.25);
  font: 700 15px/1 var(--font);
  display: inline-flex;
  align-items: center;
}

/* ===================== classy black glass: sheets, fields, the go button =====================
 * No coloured focus rings on text fields (the caret says where you are; the
 * field's rim just brightens), no pastel fills: buttons are black glass with
 * a white icon, tiles are glass with a specular rim. */
input:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
}
.g-btn--solid {
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(40, 40, 46, 0.95), rgba(10, 10, 12, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.55);
}
.g-btn--solid:not(:disabled):hover {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.6);
}

/* the sheet itself: deeper glass, a light rim along the top */
.g-sheet {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(28, 28, 32, 0.82), rgba(8, 8, 10, 0.9));
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.7);
}

/* the line you type into: glass, and it just brightens when you're in it */
.g-typing {
  padding: 5px 5px 5px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.2s, background 0.2s;
}
.g-typing:focus-within {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.g-new-title {
  caret-color: #fff;
}
.g-next:disabled {
  opacity: 0.35;
}

/* the choices: glass tiles with a rim; a pressed one lights up white */
.g-answer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
}
.g-answer:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  color: #fff;
}
.g-answer:active {
  transform: scale(0.97);
}
.g-answer small {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 600;
}
.g-answer.is-on {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  color: #fff;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
/* "For yourself / For a friend": black glass icon tiles, white icons */
.g-kind i,
.g-kind:nth-child(2) i,
.g-kind:nth-child(3) i {
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(44, 44, 50, 0.95), rgba(12, 12, 14, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* quick add: a pasted list, and asking when for the lines with no date */
.g-qa-preview {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.g-qa-preview::-webkit-scrollbar {
  display: none;
}
button.g-qa-chip {
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.g-qa-chip--ask {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.g-qa-item.is-ask .g-qa-item-t {
  color: rgba(255, 255, 255, 0.75);
}
.g-qa-askhead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-qa-askhead.is-nudged {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}
.g-qa-when {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 4px 4px;
}
.g-qa-when-b {
  border: 0;
  padding: 7px 12px;
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(44, 44, 50, 0.95), rgba(14, 14, 16, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-qa-when-b:hover {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.g-qa-when-b:active {
  transform: scale(0.95);
}

/* the add sheet, decluttered: typing hides everything but what you typed;
 * the other ways are one quiet row of glass pills */
.g-qa.is-typing .g-qa-label,
.g-qa.is-typing .g-qa-sugg,
#add-body:has(.g-qa.is-typing) .g-qa-more {
  display: none;
}
.g-qa-hint:empty {
  display: none;
}
.g-qa-more {
  margin-top: 6px;
}
.g-qa-kinds {
  display: flex;
  gap: 8px;
}
.g-qa-kind {
  flex: 1;
  flex-direction: row !important;
  justify-content: center;
  gap: 7px !important;
  min-height: 0 !important;
  height: 40px;
  padding: 0 12px !important;
  border-radius: 20px !important;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.g-qa-kind:hover {
  color: #fff;
}

/* ---------- Notifications: a page, like Instagram's, not a sheet ---------- */
#sheet-inbox .g-sheet-bg,
#sheet-person .g-sheet-bg,
#sheet-friends .g-sheet-bg {
  display: none;
}
#sheet-inbox .g-sheet.g-sheet--page,
#sheet-person .g-sheet.g-sheet--page,
#sheet-friends .g-sheet.g-sheet--page {
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(var(--safe-t, 0px) + 10px) 18px 0;
  border-radius: 0;
  background: #000 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1),
    visibility 0s 0.32s;
}
#sheet-inbox.is-open .g-sheet.g-sheet--page,
#sheet-person.is-open .g-sheet.g-sheet--page,
#sheet-friends.is-open .g-sheet.g-sheet--page {
  visibility: visible;
  transform: none;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.g-page-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin: 0 -6px 4px;
}
.g-page-head .g-inbox-title {
  margin: 0;
}
.g-page-back {
  flex: none;
  background: none !important;
  box-shadow: none !important;
}
#sheet-inbox .g-inbox {
  flex: 1;
  padding-bottom: calc(var(--safe-b, 0px) + 24px);
}
/* on a laptop: a column in the middle, the page behind still dark */
@media (min-width: 760px) {
  #sheet-person .g-sheet.g-sheet--page,
  #sheet-inbox .g-sheet.g-sheet--page,
  #sheet-friends .g-sheet.g-sheet--page {
    top: 0;
    padding-left: max(18px, calc(50% - 300px));
    padding-right: max(18px, calc(50% - 300px));
  }
}
/* a line about a task: its treat as a small square on the right */
.g-inbox-thumb {
  position: relative;
  contain: strict;
  flex: none;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.g-inbox-thumb > * {
  position: absolute !important;
  inset: 0 !important;
  transform: none !important;
  font-size: 9px;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
}

/* ---------- the in-app camera ---------- */
.g-cam {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  background: #000;
}
.g-cam.is-open {
  display: block;
}
.g-cam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-cam-video.is-mirror {
  transform: scaleX(-1);
}
.g-cam.is-flash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0.7;
}
.g-cam-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
}
.g-cam-close {
  position: absolute;
  top: calc(var(--safe-t, 0px) + 14px);
  left: 16px;
}
.g-cam-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-b, 0px) + 28px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
}
.g-cam-shutter {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #fff;
}
.g-cam-shutter i {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.12s;
}
.g-cam-shutter:active i {
  transform: scale(0.88);
}

/* ===================== adding by talking it through ===================== */
.g-qa.is-chat .g-qa-label,
.g-qa.is-chat .g-qa-sugg,
.g-qa.is-chat .g-qa-preview,
.g-qa.is-chat .g-qa-hint,
#add-body:has(.g-qa.is-chat) .g-qa-more {
  display: none !important;
}
.g-qa-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(48vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}
.g-qa-chat::-webkit-scrollbar {
  display: none;
}
.g-qa-b {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}
.g-qa-b b {
  font-weight: 800;
}
/* Treatly: glass on the left */
.g-qa-b--t {
  align-self: flex-start;
  border-bottom-left-radius: 7px;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* you: lit glass on the right */
.g-qa-b--me {
  align-self: flex-end;
  border-bottom-right-radius: 7px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(60, 60, 68, 0.95), rgba(26, 26, 30, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-qa-b.is-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}
.g-qa-b.is-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: gTypeDot 1s ease-in-out infinite;
}
.g-qa-b.is-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.g-qa-b.is-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes gTypeDot {
  0%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.g-qa-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0 4px;
}
.g-qa-reply {
  border: 0;
  padding: 9px 14px;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(40, 40, 46, 0.9), rgba(14, 14, 16, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: gQaIn 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.g-qa-reply:hover {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.g-qa-reply:active {
  transform: scale(0.95);
}
.g-fill-input[readonly] {
  cursor: text;
}
.g-qa.is-chat .g-qa-ask {
  display: none;
}
/* the send button on the add line and the Home line: black glass, never white */
.g-qa-go,
.g-fill-go {
  color: #fff !important;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.95), rgba(14, 14, 16, 0.95)) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

/* ---------- a friend's profile page ---------- */
#sheet-person {
  z-index: 75;
}
#sheet-person .g-sheet--page {
  display: flex;
  flex-direction: column;
}
.g-prof {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -18px;
  padding: 6px 18px calc(var(--safe-b, 0px) + 32px);
}
.g-prof-top {
  display: flex;
  align-items: center;
  gap: 22px;
}
.g-prof-top > .g-avatar {
  flex: none;
  width: 88px !important;
  height: 88px !important;
  font-size: 34px;
}
.g-prof-nums {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.g-prof-num b {
  display: block;
  font: 800 21px/1.1 var(--font-display);
  color: #fff;
}
.g-prof-num small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.g-prof-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 2px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.g-prof-line .gi {
  width: 14px;
  height: 14px;
}
.g-prof-line > span {
  color: rgba(255, 255, 255, 0.35);
}
.g-prof-acts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: 16px 0 6px;
}
.g-prof-act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.g-prof-act.is-main {
  color: #000;
  background: #fff;
}
.g-prof-act .gi {
  width: 16px;
  height: 16px;
}
.g-prof-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-prof-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  text-align: left;
}
.g-prof-task-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-prof-task-t b {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.g-prof-task-t small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.g-prof-task-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 800;
  font-size: 13px;
}
.g-prof-task-n .gi {
  width: 14px;
  height: 14px;
}
.g-prof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 0 -18px;
}
.g-prof-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  contain: strict;
  background: rgba(255, 255, 255, 0.06);
}
.g-prof-cell > :not(.g-prof-cell-t) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  transform: none !important;
  object-fit: cover;
}
.g-prof-cell-t {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 8px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.g-prof-empty {
  margin: 4px 4px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
.g-prof-safe {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}
.g-prof-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}
.g-prof-quiet .gi {
  width: 14px;
  height: 14px;
}
@media (min-width: 760px) {
  .g-prof-grid {
    margin: 0;
  }
}

/* who put treats in: their faces, overlapping, beside the treat count */
.gcard .gcard-meta .gcard-givers {
  display: inline-flex !important;
  flex: none;
  align-items: center;
  padding-left: 2px;
}
.gcard .gcard-meta .gcard-givers[hidden] {
  display: none !important;
}
.gcard-givers .g-avatar {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75);
}
.gcard-givers .g-avatar + .g-avatar {
  margin-left: -7px;
}
.gcard-givers-more {
  margin-left: 5px;
  font: 800 12px/1 var(--font-display);
  color: rgba(255, 255, 255, 0.75);
}
/* a friend's profile uses your profile's layout; their buttons sit where your
   "Edit profile" does */
.g-profile--friend .g-prof-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.g-profile--friend .g-prof-acts .g-account-btn {
  margin: 0;
}
.g-profile--friend .g-account-btn.is-main {
  color: #000;
  background: #fff;
}
.g-profile--friend .g-prof-line {
  justify-content: center;
}
.g-profile--friend .g-prof-list,
.g-profile--friend .g-prof-grid,
.g-profile--friend .g-prof-empty {
  text-align: left;
}
.g-profile--friend .g-prof-grid {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
}
.g-profile--friend .g-prof-list {
  width: 100%;
  align-self: stretch;
}
.g-profile--friend .g-prof-task {
  width: 100%;
}

/* ===================== Treatly's orb: the add box is a conversation =====================
 * A sphere of liquid glass with light moving inside it, all white and silver
 * (no pastel). Waiting: it breathes. You type: it quickens and pulses with
 * each key. It thinks: a ring of light runs round it and the light inside
 * swirls fast. Done: it brightens and settles. */
.g-qa-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0 8px;
  text-align: center;
}
.g-qa-hero .g-qa-ask {
  font-size: 22px;
  line-height: 1.2;
}
.g-orb {
  --orb: 76px;
  --spin: 9s;
  position: relative;
  width: var(--orb);
  height: var(--orb);
  flex: none;
}
.g-orb-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(200, 215, 230, 0.07) 55%, transparent);
  will-change: transform;
  animation: g-orb-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
.g-orb-ball {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(circle at 50% 50%, #17181c, #050506 72%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 2px 1px rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px rgba(255, 255, 255, 0.1),
    0 12px 30px rgba(0, 0, 0, 0.6);
  animation: g-orb-breathe 4.5s ease-in-out infinite;
  isolation: isolate;
}
/* the light inside: three soft lobes turning at different speeds */
.g-orb-ball i {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(9px);
  animation: g-orb-spin var(--spin) linear infinite;
}
.g-orb-a {
  background: radial-gradient(34% 26% at 30% 35%, rgba(255, 255, 255, 0.95), transparent 70%);
}
.g-orb-b {
  background: radial-gradient(30% 22% at 68% 60%, rgba(185, 205, 225, 0.85), transparent 70%);
  animation-duration: calc(var(--spin) * 0.7) !important;
  animation-direction: reverse !important;
}
.g-orb-c {
  background: radial-gradient(26% 34% at 45% 75%, rgba(225, 215, 200, 0.7), transparent 70%);
  animation-duration: calc(var(--spin) * 1.35) !important;
}
/* the glass on top: a bright window highlight and a rim */
.g-orb-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(38% 26% at 34% 20%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.08) 60%, transparent 72%),
    radial-gradient(60% 60% at 50% 50%, transparent 62%, rgba(255, 255, 255, 0.12) 74%, transparent 80%);
  z-index: 2;
  pointer-events: none;
}
/* a ring of light that runs round it while it thinks */
.g-orb-halo {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 255, 255, 0.9) 70%, transparent 82%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0;
  transition: opacity 0.3s;
  will-change: transform;
  animation: g-orb-spin 1.1s linear infinite;
}
.g-orb--venom .g-orb-halo {
  background: conic-gradient(from 0deg, transparent 0 50%, rgba(255, 255, 255, 0.35) 62%, rgba(255, 255, 255, 1) 72%, transparent 84%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 4px), #000 calc(100% - 1.5px), transparent);
  mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 4px), #000 calc(100% - 1.5px), transparent);
}
.g-qa.is-listening .g-orb {
  --spin: 3.6s;
}
.g-qa.is-listening .g-orb-glow {
  opacity: 1;
}
.g-qa.is-thinking .g-orb {
  --spin: 1.4s;
}
.g-qa.is-thinking .g-orb-halo {
  opacity: 1;
}
.g-qa.is-thinking .g-orb-glow {
  animation-duration: 1.2s;
}
.g-qa.is-done .g-orb-ball {
  animation: g-orb-done 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
@keyframes g-orb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes g-orb-breathe {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.04;
  }
}
@keyframes g-orb-done {
  40% {
    transform: scale(1.12);
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1);
    filter: brightness(1.15);
  }
}
/* in the conversation the orb stays, smaller, at the top */
.g-qa.is-chat .g-qa-hero {
  padding: 0 0 4px;
}
.g-qa.is-chat .g-orb {
  --orb: 44px;
}
.g-qa.is-chat .g-qa-hero .g-qa-ask {
  display: none;
}
/* Treatly's bubbles appear out of a blur, like they're being thought */
.g-qa-b--t:not(.is-typing) {
  animation: g-qa-think-in 0.45s cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes g-qa-think-in {
  from {
    filter: blur(8px);
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
}
/* the 'Just add it' reply is quieter than the real answers */
.g-qa-replies .g-qa-reply:last-child:not(:only-child) {
  color: rgba(255, 255, 255, 0.6);
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
@media (prefers-reduced-motion: reduce) {
  .g-orb *,
  .g-orb-ball,
  .g-orb-glow {
    animation: none !important;
  }
}
/* the orb, brighter: more light inside, a moving streak, a caustic at the foot */
.g-qa-hero .g-orb {
  --orb: 92px;
}
.g-orb-ball i {
  filter: blur(6px);
}
.g-orb-a {
  background: radial-gradient(36% 28% at 30% 35%, #fff, rgba(255, 255, 255, 0.35) 45%, transparent 72%);
}
.g-orb-b {
  background: radial-gradient(32% 24% at 68% 60%, rgba(205, 222, 240, 0.95), rgba(160, 185, 210, 0.3) 50%, transparent 72%);
}
.g-orb-c {
  background: radial-gradient(28% 36% at 45% 75%, rgba(240, 232, 220, 0.85), transparent 70%);
}
.g-orb-ball::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 1;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, 0.55) 28%, transparent 36% 62%, rgba(255, 255, 255, 0.35) 70%, transparent 78%);
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: g-orb-spin calc(var(--spin) * 0.55) linear infinite;
}
.g-orb-ball::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 22%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(4px);
  animation: g-orb-breathe 3s ease-in-out infinite;
}
.g-orb-glow {
  inset: -55%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.26), rgba(190, 210, 230, 0.08) 55%, transparent);
}

/* ---------- the venom mark (replaces the orb ball) ---------- */
.g-orb--venom .g-orb-glow {
  inset: -45%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, transparent);
}
/* the mark is drawn once; only transforms move, so it never stutters */
.g-venom-spin {
  position: absolute;
  inset: -6%;
  will-change: transform;
  backface-visibility: hidden;
  animation: g-orb-breathe 4.5s ease-in-out infinite;
}
.g-venom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* the shadow it casts: a soft dark disc, no per-frame drop-shadow */
.g-orb-shade {
  position: absolute;
  inset: -4% -4% -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.25) 55%, transparent);
  pointer-events: none;
}
/* a light sliding over the body: a gradient moving under a mask shaped like the mark */
.g-venom-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
}
.g-venom-sheen::before {
  content: '';
  position: absolute;
  inset: -60% -120%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.55) 52%, transparent 62%);
  will-change: transform;
  animation: g-venom-sheen 5.2s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes g-venom-sheen {
  0% {
    transform: translate3d(-42%, 0, 0);
  }
  55%,
  100% {
    transform: translate3d(42%, 0, 0);
  }
}
.g-qa.is-thinking .g-venom-sheen::before {
  animation-duration: 1.3s;
}
.g-qa.is-done .g-venom-spin {
  animation: g-orb-done 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.g-orb--venom .g-orb-halo {
  inset: -4px;
}
@media (prefers-reduced-motion: reduce) {
  .g-venom,
  .g-venom-spin,
  .g-venom-sheen::before {
    animation: none !important;
  }
}

/* ---------- the add conversation: easy and alive ---------- */
.g-qa-sub {
  margin: -6px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
/* the example in the box fades out and the next fades in */
.g-qa-input::placeholder {
  transition: opacity 0.22s;
}
.g-qa-input.is-swap::placeholder {
  opacity: 0;
}
/* what you typed, flying into the mark */
.g-qa-fly {
  position: fixed;
  z-index: 500;
  max-width: 70vw;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
/* replies arrive one after another */
.g-qa-replies .g-qa-reply {
  animation: g-qa-chip-in 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.g-qa-replies .g-qa-reply:nth-child(2) { animation-delay: 0.05s; }
.g-qa-replies .g-qa-reply:nth-child(3) { animation-delay: 0.1s; }
.g-qa-replies .g-qa-reply:nth-child(4) { animation-delay: 0.15s; }
.g-qa-replies .g-qa-reply:nth-child(5) { animation-delay: 0.2s; }
.g-qa-replies .g-qa-reply:nth-child(6) { animation-delay: 0.25s; }
@keyframes g-qa-chip-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    filter: blur(4px);
  }
}
.g-qa-reply {
  transition: transform 0.15s;
}
.g-qa-reply:active {
  transform: scale(0.92);
}
/* the mic: black glass like send; while it hears you, a ring breathes round it */
.g-qa-mic {
  flex: none;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.9), rgba(14, 14, 16, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-qa.is-hearing .g-qa-mic {
  color: #000;
  background: #fff;
  animation: g-qa-hear 1.1s ease-in-out infinite;
}
@keyframes g-qa-hear {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0);
  }
}
.g-qa.is-hearing .g-venom-spin {
  animation-duration: 5s;
}
.g-qa.is-hearing .g-orb-glow {
  animation-duration: 1s;
}
/* a new card: a sheen runs across it as it lands */
.gcard-sheen {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.22) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: g-arrive-sheen 1.1s 0.35s ease-out both;
}
@keyframes g-arrive-sheen {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -40% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-qa-replies .g-qa-reply,
  .gcard-sheen {
    animation: none !important;
  }
}

/* the add box, minimal: the mark, the question, the line; setting a friend
   a task is a quiet line of text under it */
.g-qa-kind.g-qa-kind--quiet {
  width: auto;
  min-height: 0;
  margin: 4px auto 0;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  background: none !important;
  box-shadow: none !important;
}
.g-qa-kinds:has(.g-qa-kind--quiet) {
  display: flex;
  justify-content: center;
}
.g-qa-hero {
  padding: 18px 0 14px;
}
/* the living mark in white: a brighter glow behind it */
.g-orb--venom .g-orb-glow {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06) 55%, transparent);
}
.g-orb--venom .g-orb-shade {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 55%, transparent);
}

/* ===================== the add sheet: a floating pane of glass =====================
 * Not a slab stuck to the bottom: a pane floating 10px off the edges, deeply
 * frosted, lit along its top edge, a sheen crossing it as it rises on a
 * spring, and the page behind blurring away. No "New" title on the first
 * screen: the mark and the question say it. */
#sheet-add .g-sheet-bg {
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: opacity 0.35s ease;
}
#sheet-add .g-sheet.g-new {
  overflow: hidden;
  border-radius: 42px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(44, 44, 50, 0.55), rgba(12, 12, 15, 0.78)) !important;
  -webkit-backdrop-filter: blur(42px) saturate(1.9) !important;
  backdrop-filter: blur(42px) saturate(1.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 40px 90px rgba(0, 0, 0, 0.65) !important;
}
/* the sheen that crosses it once as it opens */
#sheet-add .g-sheet.g-new::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.12) 47%, transparent 58%);
  background-size: 260% 100%;
  background-position: 130% 0;
}
#sheet-add.is-open .g-sheet.g-new::after {
  animation: g-pane-sheen 1.3s 0.18s cubic-bezier(0.3, 0.6, 0.3, 1) both;
}
@keyframes g-pane-sheen {
  to {
    background-position: -40% 0;
  }
}
#sheet-add .g-sheet.g-new > * {
  position: relative;
  z-index: 1;
}
#form-add:has(.g-qa) #add-heading {
  opacity: 0;
}
#sheet-add .g-new-head .g-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35) !important;
}
@media (max-width: 759px) {
  #sheet-add .g-sheet.g-new {
    left: 10px;
    right: 10px;
    bottom: calc(var(--safe-b) + 10px);
    transform: translateY(calc(100% + var(--safe-b) + 40px)) scale(0.94);
    transition: transform 0.6s cubic-bezier(0.2, 1.18, 0.3, 1);
  }
  #sheet-add.is-open .g-sheet.g-new {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sheet-add.is-open .g-sheet.g-new::after {
    animation: none;
  }
}

/* ===================== the add pane, maxed out =====================
 * Glass only looks like glass when there's light behind it and on it:
 *  - behind: the page sinks into a deep blur, and a soft column of white
 *    light rises behind the pane, breathing, so the frost has something to
 *    catch;
 *  - the rim: a 1.5px edge where a light slowly travels round (brighter on
 *    the corners it passes), the way real glass catches a lamp;
 *  - the body: near-black glass with fine frost grain, a bright band along
 *    the top, and the living mark lighting it from inside;
 *  - the line: a pill of darker glass set into it, lit when you type. */
@property --rim {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
#sheet-add .g-sheet-bg {
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(255, 255, 255, 0.16), transparent 70%),
    radial-gradient(40% 30% at 50% 78%, rgba(255, 255, 255, 0.1), transparent 70%),
    rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.4) brightness(0.8) !important;
  backdrop-filter: blur(26px) saturate(1.4) brightness(0.8) !important;
}
#sheet-add.is-open .g-sheet-bg {
  animation: g-pane-light 6s ease-in-out infinite;
}
@keyframes g-pane-light {
  50% {
    background-position: 0 0, 0 -14px, 0 0;
  }
}
#sheet-add .g-sheet.g-new {
  border-radius: 44px;
  background:
    /* the mark's light, from inside, top centre */
    radial-gradient(60% 34% at 50% 18%, rgba(255, 255, 255, 0.13), transparent 70%),
    /* a bright band along the top edge */
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 64px, transparent 140px),
    /* frost grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
    /* the glass itself: smoky black, see-through */
    linear-gradient(165deg, rgba(58, 58, 66, 0.5), rgba(18, 18, 22, 0.62) 45%, rgba(6, 6, 8, 0.82)) !important;
  -webkit-backdrop-filter: blur(48px) saturate(2) brightness(1.1) !important;
  backdrop-filter: blur(48px) saturate(2) brightness(1.1) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(255, 255, 255, 0.05),
    inset 0 30px 60px -40px rgba(255, 255, 255, 0.18),
    0 0 0 0.5px rgba(255, 255, 255, 0.14),
    0 -10px 60px rgba(255, 255, 255, 0.07),
    0 50px 100px rgba(0, 0, 0, 0.75) !important;
}
/* the rim with a travelling light */
#sheet-add .g-sheet.g-new::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--rim),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.12) 18%,
    rgba(255, 255, 255, 0.05) 32%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.06) 68%,
    rgba(255, 255, 255, 0.14) 84%,
    rgba(255, 255, 255, 0.95)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: g-rim-run 9s linear infinite;
}
@keyframes g-rim-run {
  to {
    --rim: 360deg;
  }
}
/* the line: a pill of darker glass set into the pane */
#sheet-add .g-qa-line {
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35)),
    rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.06);
}
#sheet-add .g-qa-line:focus-within {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 4px rgba(255, 255, 255, 0.05),
    0 0 28px rgba(255, 255, 255, 0.1);
}
/* send and mic: pearls of glass */
#sheet-add .g-qa-go,
#sheet-add .g-qa-mic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff !important;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.04) 55%),
    linear-gradient(180deg, rgba(60, 60, 68, 0.9), rgba(10, 10, 12, 0.95)) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.7),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.55) !important;
}
#sheet-add .g-qa-go:not(:disabled) {
  color: #000 !important;
  background:
    radial-gradient(120% 100% at 30% 0%, #fff, rgba(255, 255, 255, 0.85) 45%, rgba(210, 210, 216, 0.9)) !important;
  box-shadow:
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
#sheet-add .g-qa-hero .g-qa-ask {
  font-size: 24px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the question rises in after the pane */
#sheet-add.is-open .g-qa-hero .g-qa-ask {
  animation: g-ask-in 0.7s 0.2s cubic-bezier(0.2, 1, 0.3, 1) both;
}
#sheet-add.is-open .g-orb {
  animation: g-orb-in 0.9s 0.05s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}
#sheet-add.is-open .g-qa-line {
  animation: g-ask-in 0.7s 0.32s cubic-bezier(0.2, 1, 0.3, 1) both;
}
@keyframes g-ask-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
}
@keyframes g-orb-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
    filter: blur(10px);
  }
}
/* the bubbles: glass, Treatly's lit from the left, yours pearl */
#sheet-add .g-qa-b--t {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
#sheet-add .g-qa-b--me {
  color: #000 !important;
  background: radial-gradient(120% 100% at 30% 0%, #fff, rgba(232, 232, 236, 0.92)) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 255, 255, 0.15) !important;
}
#sheet-add .g-qa-reply {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
@media (prefers-reduced-motion: reduce) {
  #sheet-add .g-sheet.g-new::before,
  #sheet-add.is-open .g-sheet-bg,
  #sheet-add.is-open .g-qa-hero .g-qa-ask,
  #sheet-add.is-open .g-orb,
  #sheet-add.is-open .g-qa-line {
    animation: none !important;
  }
}
/* darker, blacker glass with a corner glint and a bevelled edge */
#sheet-add .g-sheet.g-new {
  background:
    radial-gradient(55% 30% at 50% 17%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 18%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.06), transparent 16%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 90px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"),
    linear-gradient(170deg, rgba(30, 30, 36, 0.62), rgba(6, 6, 8, 0.86) 50%, rgba(0, 0, 0, 0.92)) !important;
  -webkit-backdrop-filter: blur(48px) saturate(1.6) brightness(0.85) !important;
  backdrop-filter: blur(48px) saturate(1.6) brightness(0.85) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 0 4px rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 -12px 50px rgba(255, 255, 255, 0.06),
    0 50px 100px rgba(0, 0, 0, 0.8) !important;
}
#sheet-add .g-qa-hero .g-qa-ask {
  font-size: 22px;
  white-space: nowrap;
}

/* ---------- max contrast: black behind, black glass, white light only on edges ---------- */
#sheet-add .g-sheet-bg {
  background: rgba(0, 0, 0, 0.9) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  animation: none !important;
}
#sheet-add .g-sheet.g-new {
  background:
    radial-gradient(40% 22% at 50% 15%, rgba(255, 255, 255, 0.07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0b0b0d, #000 60%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 0.5px rgba(255, 255, 255, 0.12),
    0 40px 90px rgba(0, 0, 0, 0.9) !important;
}
#sheet-add .g-sheet.g-new::after {
  display: none;
}
#sheet-add .g-qa-hero .g-qa-ask {
  background: none;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#sheet-add .g-qa-line {
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#sheet-add .g-qa-line:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 22px rgba(255, 255, 255, 0.08);
}
#sheet-add .g-qa-b--t,
#sheet-add .g-qa-reply {
  background: #0d0d10 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
#sheet-add .g-qa-mic,
#sheet-add .g-qa-go:disabled {
  background: #111114 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
#sheet-add .g-orb--venom .g-orb-glow {
  opacity: 0.7;
}

/* ---------- Add friends: a page, like Instagram's ----------
 * Search, an invite row on glass, then people: face, name, handle and
 * mutuals, and a white "Add" pill that turns to glass once requested. */
#sheet-friends .g-sheet--page {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#sheet-friends .g-search {
  flex: none;
  margin: 0 0 14px;
  height: 46px;
  border-radius: 23px;
}
.g-af-invite {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px 14px 14px;
  border: 0;
  border-radius: 22px;
  text-align: left;
  color: #fff;
  font: inherit;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 10px 30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  transition: transform 0.15s ease;
}
.g-af-invite:active {
  transform: scale(0.98);
}
.g-af-invite-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #000;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}
.g-af-invite-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.g-af-invite-text b {
  font-size: 16px;
  font-weight: 750;
}
.g-af-invite-text small {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
}
.g-af-invite-go {
  flex: none;
  color: rgba(255, 255, 255, 0.45);
}
.g-af-head {
  flex: none;
  margin: 26px 2px 6px;
  font-size: 16px;
  font-weight: 750;
  color: #fff;
}
#sheet-friends .g-af-list {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: calc(var(--safe-b, 0px) + 28px);
  overflow: visible;
  max-height: none;
}
.g-person.g-af-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 2px;
  border: 0;
  background: none;
}
.g-af-row .g-avatar {
  flex: none;
  width: 52px !important;
  height: 52px !important;
}
.g-af-row .g-person-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-af-row .g-person-name strong {
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-af-row .g-person-name small {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-af-btn {
  flex: none;
  min-width: 96px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 750;
  color: #000;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease;
}
.g-af-btn:active {
  transform: scale(0.95);
}
.g-af-btn.is-added {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-af-btn:disabled {
  cursor: default;
  color: rgba(255, 255, 255, 0.6);
}
.g-af-empty {
  margin: 18px 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}

/* writing and notes on a sealed card: blurred enough that you can see
 * something's written, never what, until it's done */
.gcard-sharp,
.gcard-pen {
  filter: blur(7.5px) saturate(1.4) brightness(1.15);
  opacity: 0.85;
}
.gcard.is-open .gcard-sharp,
.gcard.is-open .gcard-pen {
  filter: blur(9px) saturate(1.4) brightness(1.15);
}
.gcard.is-done .gcard-sharp,
.gcard.is-done .gcard-pen {
  filter: none;
  opacity: 1;
}

/* the add pane rides on top of the keyboard (glass-app.js sets --kb) */
@media (max-width: 759px) {
  .has-kb #sheet-add .g-sheet.g-new {
    bottom: calc(var(--kb, 0px) + 8px);
    max-height: calc(100dvh - var(--kb, 0px) - var(--safe-t, 0px) - 16px);
    overflow: hidden;
    transition:
      transform 0.6s cubic-bezier(0.2, 1.18, 0.3, 1),
      bottom 0.25s ease-out;
  }
  /* the treat sheet too: typing a note or a GIF search lifts it above the keyboard */
  .has-kb #sheet-give .g-sheet {
    bottom: calc(var(--kb, 0px) + 8px);
    max-height: calc(100dvh - var(--kb, 0px) - var(--safe-t, 0px) - 16px);
    transition:
      transform 0.5s cubic-bezier(0.2, 1.1, 0.3, 1),
      bottom 0.25s ease-out;
  }
  /* the tab bar stays under the keyboard, out of the way */
  .has-kb .g-tabbar {
    visibility: hidden;
  }
}

/* the add pane doesn't scroll inside itself: a swipe down puts it away */
#sheet-add .g-sheet.g-new {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
#sheet-add .g-qa-input,
#sheet-add .g-qa-chat,
#sheet-add .g-qa-preview,
#sheet-add .g-step input,
#sheet-add .g-step textarea,
#sheet-add .g-answers,
#sheet-add .g-people,
#sheet-add .gp-list {
  touch-action: pan-y;
}

/* ---------- Settings → Connect to Claude: the link, shown once ---------- */
.g-ai-new:empty {
  display: none;
}
.g-ai-new {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0 8px;
}
.g-ai-link {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
.g-ai-link code {
  display: block;
  font: 600 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}
.g-ob-btn.g-ai-btn {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: 0;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 750;
  color: #000;
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.14);
}
.g-ob-btn.g-ai-btn:disabled {
  opacity: 0.4;
}
.g-ob-btn.g-ai-btn.is-ghost {
  margin-top: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ---------- steps inside a task (glass-app.js paintSteps) ---------- */
.g-steps {
  width: 100%;
  border-radius: 24px;
  padding: 8px;
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.g-steps[hidden] {
  display: none;
}
.g-steps-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.g-steps-add:active {
  background: rgba(255, 255, 255, 0.06);
}
.g-steps-head {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.g-steps-head b {
  color: var(--ink);
  font-weight: 700;
}
.g-steps-head span {
  font-variant-numeric: tabular-nums;
}
.g-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.g-step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 6px;
}
.g-step-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  background: transparent;
  color: #000;
  cursor: pointer;
}
.g-step-tick:disabled {
  cursor: default;
}
.g-step-row.is-done .g-step-tick {
  border-color: #fff;
  background: #fff;
}
.g-step-text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.g-step-row.is-done .g-step-text {
  color: var(--ink-3);
  text-decoration: line-through;
}
.g-step-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.g-step-new {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 2px 2px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}
.g-step-new input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.g-step-new input::placeholder {
  color: var(--ink-3);
}
.g-step-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
}
.gcard-steps.is-all {
  color: #000;
  background: #fff;
}

/* Home: says plainly what the list is */
.g-mytasks { margin: 14px 6px 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 1240px) { #g-app[data-tab='today'] #sc-today > .g-mytasks { margin-top: 4px; margin-bottom: 0; font-size: 22px; } #list-today > .g-section:first-child { padding-top: 10px; } }

/* the calendar is a tab: no back button on it */
.g-cal-back { display: none !important; }
.g-head-cal { color: #fff; background: none; box-shadow: none; }

/* ---------- a pasted to-do list: one card, or separate tasks ---------- */
.g-qa-paste {
  align-self: center;
  margin: 2px auto 0;
  gap: 6px;
}
.g-qa.is-typing .g-qa-paste {
  display: none;
}
.g-qa-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin: 0 0 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.g-qa-seg-b {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  text-align: left;
  font: inherit;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.g-qa-seg-b b {
  font-size: 14.5px;
  font-weight: 750;
}
.g-qa-seg-b small {
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.75;
}
.g-qa-seg-b.is-on {
  color: #000;
  background: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.14);
}
.g-qa-steps {
  list-style: none;
  margin: -4px 0 8px;
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.g-qa-steps li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-qa-steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.g-qa-steps li.is-more {
  color: rgba(255, 255, 255, 0.45);
}
.g-qa-steps li.is-more::before {
  display: none;
}
/* a list's pill: the count, then what the tick does next */
.gcard-steps span {
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- done, with proof: the timelapse (or photo) fills the card ---------- */
.gcard-proofbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.gcard-proofbg > video,
.gcard-proofbg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}
/* the words stay readable over any picture */
.gcard-proofbg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent 55%);
}
/* the proof is the picture now: the treat pile, the frost and the colour
 * step aside (the treats are still a tap away on the gift pill) */
.gcard.has-proofbg > :is(.gcard-aura, .gcard-treats, .gcard-frost, .gcard-sharp) {
  display: none;
}

/* on a laptop the side rail stays put when a full page opens (Add friends,
   Notifications, a profile, the leaderboard): the page fills the space to
   its right, and the rail stays on top so it can still open out on hover */
@media (min-width: 760px) {
  #sheet-inbox,
  #sheet-person,
  #sheet-friends,
  #sheet-board {
    left: var(--rail, 84px);
  }
  #g-app:has(#sheet-inbox.is-open, #sheet-person.is-open, #sheet-friends.is-open, #sheet-board.is-open) .g-rail {
    z-index: 75;
  }
}

/* "Set a friend a task" on the new-task screen: the same raised dark glass
   as the mic and send buttons, not a blue card of its own */
.g-qa-kind.g-qa-kind--friend {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: center;
  gap: 12px !important;
  width: 100%;
  height: auto;
  min-height: 64px !important;
  padding: 8px 14px 8px 8px !important;
  border: 0;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(40, 40, 46, 0.85), rgba(14, 14, 16, 0.85)) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s;
}
.g-qa-kind.g-qa-kind--friend:hover {
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.9), rgba(18, 18, 20, 0.9)) !important;
}
.g-qa-kind.g-qa-kind--friend:active {
  transform: scale(0.98);
}
.g-qa-kind-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.9), rgba(14, 14, 16, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-qa-kind--friend > span:not(.g-qa-kind-faces) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-qa-kind--friend b {
  font-size: 16px;
  font-weight: 600;
}
.g-qa-kind--friend small {
  font-size: 13px;
  color: var(--ink-2);
}
.g-qa-kind-faces {
  display: flex;
  flex: none;
}
.g-qa-kind-faces .g-avatar + .g-avatar {
  margin-left: -10px;
}

/* Friends: a + on the right, level with each friend's face, to set them a task */
.g-post-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-post-row > .g-post-head {
  flex: 1;
  min-width: 0;
}
.g-btn.g-post-plus {
  flex: none;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  margin-right: 2px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
.g-btn.g-post-plus .gi {
  width: 18px;
  height: 18px;
}
.g-btn.g-post-plus:active {
  transform: scale(0.92);
}

/* the small print under the money amounts when setting a friend a task */
.g-add-fine { margin: 14px 8px 0; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); text-align: center; }

/* ---------- smooth: nothing animates where nobody can see it ----------
 * Hidden things kept animating (the treat window's voice bars and coin, the
 * add orb, closed pages): each one restyles the page every frame. Paused
 * until they're shown, they cost nothing and pick up where they left off. */
#g-overlay:not(.is-open) *,
.g-sheet-wrap:not(.is-open) *,
.g-screen:not(.is-active) *,
[hidden] * {
  animation-play-state: paused !important;
}

/* ---------- Swipe: a deck of tasks to say yes or no to ---------- */
@media (min-width: 760px) { .g-phone-only { display: none !important; } }
@media (max-width: 759px) { .g-cal-back { display: inline-flex !important; } }
.gs {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + 104px);
  overflow: hidden;
  touch-action: none;
}
.gs-head { flex: none; align-items: center; }
.gs-count {
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: rgba(47, 210, 122, 0.18);
  box-shadow: inset 0 0 0 1px rgba(47, 210, 122, 0.45);
}
/* who it's for: tap as many faces as you like */
.gs-for {
  flex: none;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 6px 16px 10px;
  touch-action: pan-x;
}
.gs-for::-webkit-scrollbar { display: none; }
.gs-who {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gs-who-face { position: relative; display: block; border-radius: 50%; }
.gs-who-face .g-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
  opacity: 0.55;
  filter: saturate(0.6);
  transition: opacity 0.2s, filter 0.2s, box-shadow 0.25s;
}
.gs-who-name {
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 800 13px/1.1 'Figtree', 'Inter', sans-serif;
  letter-spacing: -0.005em;
}
.gs-who.is-on { color: #fff; }
.gs-who.is-on .g-avatar { opacity: 1; filter: none; box-shadow: 0 0 0 2.5px #000, 0 0 0 5px #2fd27a; }
.gs-who-tick {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #000;
  background: #2fd27a;
  box-shadow: 0 0 0 2.5px #000;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.gs-who-tick .gi { stroke-width: 3; }
.gs-who.is-on .gs-who-tick { transform: scale(1); }
.gs-who-plus {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* "Swiping for Maya and Leo": plain and big, so you always know where a yes goes */
.gs-target {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px auto 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.gs-target-faces { display: flex; flex: none; }
.gs-target-faces .g-avatar { flex: none; width: 26px; height: 26px; box-shadow: 0 0 0 2px #111; }
.gs-target-faces .g-avatar + .g-avatar { margin-left: -9px; }
.gs-target-txt { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: #fff; }
.gs-target-txt small { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.gs-target-txt b { font: 800 17px/1.2 'Figtree', 'Inter', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-deck {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

/* the card: a pane of tinted glass. A pool of the top card's colour glows
   behind the deck, so the glass has something to bend */
.gs-deck::before {
  content: '';
  position: absolute;
  inset: 8% -6% 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c, #3d7bff), transparent);
  opacity: 0.55;
  filter: blur(40px);
  transition: background 0.5s;
  pointer-events: none;
}
.gs-card {
  position: absolute;
  inset: 0 6px 34px;
  display: flex;
  flex-direction: column;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform-origin: 50% 90%;
  border-radius: 34px;
  will-change: transform;
  /* solid underneath: the cards behind never show through */
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 30%, #16161c), #0c0c10 70%);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gs-card.is-top { cursor: grab; }
.gs-card.is-dragging { cursor: grabbing; }
.gs-face {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--c) 55%, transparent), transparent 65%),
    radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(10, 10, 14, 0.5));
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.5),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 40px color-mix(in srgb, var(--c) 25%, transparent);
}
/* the category's icon, huge and faint, behind the glass */
.gs-mark {
  position: absolute;
  right: -60px;
  bottom: -40px;
  color: var(--c);
  opacity: 0.22;
  transform: rotate(-14deg);
  filter: blur(1px);
  pointer-events: none;
}
/* the light catching the glass as you move it */
.gs-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.04) 52%, transparent 62%);
  background-size: 260% 100%;
  background-position: var(--sx, 50%) 0;
}
.gs-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gs-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  font: 800 12px/1 'Figtree', 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--c) 70%, transparent);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.4), 0 6px 16px -6px var(--c);
}
.gs-no { font: 700 13px/1 'Figtree', 'Inter', sans-serif; color: rgba(255, 255, 255, 0.7); }
.gs-title {
  position: relative;
  margin: 0;
  font: 800 32px/1.04 'Figtree', 'Inter', sans-serif;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.gs-why { position: relative; margin: 8px 0 0; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }
.gs-stub { position: relative; display: flex; gap: 8px; margin-top: 14px; }
.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gs-chip .gi { color: color-mix(in srgb, var(--c) 60%, #fff); }

/* each kind has its own picture */
.gs-hero {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gs-hero-cap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 800 13px/1 'Figtree', 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.gs-big-word { font: 800 15px/1 'Figtree', 'Inter', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
/* timer: a dial */
.gs-hero--timer { display: grid; place-items: center; }
.gs-dial { grid-area: 1 / 1; width: min(150px, 22vh); height: min(150px, 22vh); transform: rotate(-90deg); overflow: visible; }
.gs-dial-bg { fill: rgba(0, 0, 0, 0.22); stroke: rgba(255, 255, 255, 0.2); stroke-width: 7; }
.gs-dial-fg { fill: none; stroke: color-mix(in srgb, var(--c) 45%, #fff); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)); animation: gs-dial 6s ease-in-out infinite alternate; }
.gs-dial line { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; stroke-linecap: round; }
@keyframes gs-dial { to { stroke-dashoffset: 0; } }
.gs-dial-n { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gs-dial-n b { font: 800 48px/0.9 'Figtree', 'Inter', sans-serif; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.gs-dial-n small { font: 800 12px/1 'Figtree', 'Inter', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; margin-top: 4px; }
/* habit: a grid of the days, the first one waiting */
.gs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.gs-days i { width: 22px; height: 22px; border-radius: 7px; background: rgba(0, 0, 0, 0.24); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25); }
.gs-days i.is-first { background: color-mix(in srgb, var(--c) 40%, #fff); box-shadow: 0 0 14px rgba(255, 255, 255, 0.8); animation: gs-pulse 1.6s ease-in-out infinite; }
@keyframes gs-pulse { 50% { transform: scale(0.82); opacity: 0.75; } }
/* commitment: the number of days, huge */
.gs-commit { display: flex; align-items: baseline; gap: 6px; }
.gs-commit b { font: 800 112px/0.8 'Figtree', 'Inter', sans-serif; letter-spacing: -0.06em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.gs-commit small { font: 800 18px/1 'Figtree', 'Inter', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
/* photo proof: a viewfinder */
.gs-finder { position: relative; display: grid; place-items: center; width: 150px; height: 112px; }
.gs-finder i { position: absolute; width: 26px; height: 26px; border: 0 solid #fff; }
.gs-finder i:nth-child(1) { left: 0; top: 0; border-width: 4px 0 0 4px; border-radius: 10px 0 0 0; }
.gs-finder i:nth-child(2) { right: 0; top: 0; border-width: 4px 4px 0 0; border-radius: 0 10px 0 0; }
.gs-finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 4px 4px; border-radius: 0 0 0 10px; }
.gs-finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 4px 4px 0; border-radius: 0 0 10px 0; }
.gs-finder em { position: absolute; top: 10px; right: 14px; display: flex; align-items: center; gap: 5px; font: 800 11px/1 'Figtree', 'Inter', sans-serif; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.gs-finder em b { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gs-pulse 1.2s ease-in-out infinite; }
/* quick: a sticker */
.gs-sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%);
  transform: rotate(-10deg);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.45);
  animation: gs-wiggle 3.2s ease-in-out infinite;
}
.gs-sticker b { font: 800 64px/0.85 'Figtree', 'Inter', sans-serif; letter-spacing: -0.05em; color: #fff; }
.gs-sticker small { font: 800 12px/1.2 'Figtree', 'Inter', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
@keyframes gs-wiggle { 50% { transform: rotate(-4deg) scale(1.04); } }
/* one-off and again: a big round mark */
.gs-once,
.gs-again {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--c) 50%, #fff);
  background: color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 0 30px -4px var(--c);
}
.gs-again .gi { animation: gs-spin 5s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

.gs-stamp {
  position: absolute;
  top: 64px;
  z-index: 3;
  padding: 6px 14px;
  border: 4px solid;
  border-radius: 14px;
  font: 900 36px/1 'Figtree', 'Inter', sans-serif;
  letter-spacing: 0.04em;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.35);
}
.gs-stamp--yes { left: 18px; color: #2fd27a; transform: rotate(-14deg) scale(calc(0.6 + var(--yes, 0) * 0.4)); opacity: var(--yes, 0); }
.gs-stamp--no { right: 18px; color: #ff4d4d; transform: rotate(14deg) scale(calc(0.6 + var(--no, 0) * 0.4)); opacity: var(--no, 0); }
/* the ticket's edge glows the way it's going */
.gs-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 4px rgba(47, 210, 122, var(--yes, 0)),
    inset 0 0 70px rgba(47, 210, 122, calc(var(--yes, 0) * 0.45)),
    inset 0 0 0 4px rgba(255, 77, 77, var(--no, 0)),
    inset 0 0 70px rgba(255, 77, 77, calc(var(--no, 0) * 0.4));
}
.gs-ctrl {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.gs-btn {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 1.6, 0.4, 1), box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.gs-btn:active { transform: scale(0.88); }
.gs-btn--undo {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.gs-btn--no {
  width: 66px;
  height: 66px;
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.12);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.25), inset 0 0 0 1.5px rgba(255, 77, 77, 0.55), 0 10px 30px -10px rgba(255, 77, 77, 0.6);
}
.gs-btn--yes {
  width: 78px;
  height: 78px;
  background: radial-gradient(circle at 35% 30%, #5cf0a0, #20c46b 60%, #15944f);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.5), 0 14px 36px -8px rgba(47, 210, 122, 0.85);
}
.gs-spark { position: fixed; z-index: 9999; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; }
.gs-ring { position: fixed; z-index: 9998; width: 120px; height: 120px; border: 4px solid; border-radius: 50%; pointer-events: none; }
@media (max-height: 740px) {
  .gs-title { font-size: 27px; }
  .gs-commit b { font-size: 86px; }
  .gs-sticker { width: 104px; height: 104px; }
  .gs-sticker b { font-size: 50px; }
  .gs-days i { width: 17px; height: 17px; border-radius: 5px; }
}
@media (min-width: 760px) {
  .gs { padding: 28px 24px 32px; }
  .gs-for { justify-content: center; }
  .gs-deck { max-height: 660px; }
}
@media (prefers-reduced-motion: reduce) {
  .gs-dial-fg, .gs-days i.is-first, .gs-finder em b, .gs-sticker, .gs-again .gi { animation: none; }
}

/* phone Home: the calendar sits between the streak and the bell, plain like the bell */
@media (max-width: 759px) {
  #g-app #s-today .g-head.g-head--row { grid-template-columns: 1fr auto auto auto; column-gap: 4px; }
  #s-today .g-head-actions > #head-cal { grid-column: 3 !important; color: #fff; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #s-today .g-head-actions > .g-btn.g-bell { grid-column: 4 !important; }
}

/* Home: asking for notifications, until they're on */
.g-pushask { margin: 0 0 14px; }
.g-pushask-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.22), rgba(77, 163, 255, 0.08));
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(77, 163, 255, 0.4);
}
.g-pushask-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #4da3ff; color: #fff; }
.g-pushask-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: #fff; }
.g-pushask-txt b { font: 800 15px/1.2 'Figtree', 'Inter', sans-serif; }
.g-pushask-txt small { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.75); }
.g-pushask-txt small .gi { width: 13px; height: 13px; vertical-align: -2px; transform: rotate(-45deg); }
.g-pushask-txt em { font-style: normal; font-weight: 700; color: #fff; }
.g-pushask-on { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: 800 14px/1 'Figtree', 'Inter', sans-serif; color: #000; background: #fff; cursor: pointer; }
.g-pushask-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); cursor: pointer; }

/* Home: no dead space between the faces and "My tasks". A host with nothing
   in it takes no room, and the faces sit close to the list. */
#sc-today > div:empty,
#sc-today > #fill-today:not(:has(> :not(.g-fill-start))) { display: none !important; }
#sc-today > .gh-duos-host--home { margin-bottom: 6px !important; }
#sc-today > .gh-duos-host--home .gh-duos { padding-bottom: 2px !important; }
#sc-today > .g-mytasks { margin-top: 6px !important; }

/* the calendar on Today is a plain icon in the header, like the bell: no circle round it */
#head-cal,
#head-cal::before,
#head-cal::after {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#head-cal { color: #fff; }

/* an open friend's card: the treat window starts folded to its tabs, so the
   card is big enough to draw on; a tab opens its page */
.g-tw.is-folded .g-tw-pages { display: none; }
.g-tw.is-folded .g-tw-lens { opacity: 0; }
.g-tw.is-folded .g-tw-tab[aria-selected='true'] { color: inherit; }
.g-tw.is-folded .g-tw-tab[aria-selected='true'] .g { transform: none; filter: none; }

/* pull past the top: a strip exactly as tall as the gap above the page's top
   edge (set from js), clipped, so the flower rises out from behind that edge
   like Snapchat's ghost and never sits on top of the page */
.g-pull {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  /* a fixed size, clipped at the page's top edge: nothing here ever needs layout */
  height: 240px;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(0 0 calc(100% - var(--edge, 0px)) 0);
  contain: strict;
}
.g-pull.is-on { visibility: visible; }
.g-pull-face {
  position: absolute;
  left: 50%;
  top: 0;
  will-change: transform;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  display: grid;
  place-items: center;
  color: #fff;
  /* hidden just under the edge; up into view as the gap opens, 10px clear at most */
  /* its bottom at the page's edge, hidden just under it, up into view as the gap opens: all transform */
  transform: translateY(calc(var(--edge, 0px) - min(var(--gap, 0px), 44px))) rotate(calc(var(--k, 0) * 180deg)) scale(calc(0.6 + var(--k, 0) * 0.4));
  transform-origin: 50% 50%;
}
.g-pull-face .gi { width: 34px; height: 34px; transform-origin: 50% 50%; transform-box: view-box; }
.g-pull.is-armed .g-pull-face { animation: g-pull-pop 0.38s cubic-bezier(0.3, 1.5, 0.5, 1); }
.g-pull.is-busy .g-pull-face .gi { animation: g-pull-spin 0.9s linear infinite; }
/* ready to let go: one soft pop, no swinging */
@keyframes g-pull-pop {
  45% { scale: 1.16; }
}
@keyframes g-pull-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@media (min-width: 760px) and (hover: hover) { .g-pull { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .g-pull-face .gi, .g-pull.is-armed .g-pull-face { animation: none; }
}



/* Home: section labels (Up next, Done, Lost) line up with "My tasks" and the cards' edge */
#g-app #sc-today .g-list > .g-section { padding-left: 0 !important; padding-right: 0 !important; }

/* Lost: tasks that ran out this week, each with Revive */
.g-lost { border-radius: 26px; padding: 4px 14px; display: flex; flex-direction: column; }
.g-lost-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 0; }
.g-lost-row + .g-lost-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.g-lost-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.g-lost-txt b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.g-lost-txt small { font-size: 12.5px; color: var(--ink-3); }
.g-lost-go {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-lost-go .gi { width: 16px; height: 16px; }
.g-lost-go.is-on { background: rgba(255, 255, 255, 0.18); }
.g-lost-when { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.g-lost-when[hidden] { display: none; }
.g-lost-chip {
  height: 34px; padding: 0 16px; border-radius: 17px; font: inherit; font-size: 13.5px; font-weight: 700; color: #111;
  background: #fff;
}
.g-lost-chip:active { transform: scale(0.96); }

/* a long title cut to one line: the box is exactly one line tall, so the tops of
   the next line's letters (a "(" or "1") don't peek out under it as a white mark */
.wob .gcard:not(.is-open) .gcard-title,
.wob--hero .gcard:not(.is-open) .gcard-title {
  line-height: 1.25 !important;
  max-height: 1.25em !important;
  overflow: hidden !important;
}

/* "My tasks" is a label like "Done" and "Suggested": small, caps, grey */
/* (time-based Treatly) "Your day" is a heading again, like "Join a friend";
   On now / Later today / Tomorrow are the small grey labels under it */
#g-app #sc-today > .g-mytasks {
  margin: 14px 0 0 !important;
  padding: 0 6px 2px;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
/* right under it, a first "Up next" would say the same thing twice */
#sc-today > .g-mytasks + #list-today > .g-section:first-child { padding-top: 0 !important; }

/* ---------- smooth on phones: no filters on every card ----------
   A filter (drop-shadow, blur) makes the browser draw that part of the card
   into its own picture and then paint it again, for every card, every
   frame it changes. On a phone that is what made scrolling stutter. Text
   gets a plain shadow instead, and the rim and cracks only exist once a
   deadline is close enough to show them. */
.gcard-title {
  filter: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.gcard:not([data-phase='rim']):not([data-phase='crack']):not([data-phase='final']) .gcard-rim {
  display: none;
}
@media (hover: none) and (pointer: coarse) {
  .gcard-rim,
  .gcard-cracks {
    filter: none;
  }
  /* the last-minute pulse moves only the card (compositor), not its shadow */
  .gcard[data-phase='final'] {
    animation: gHeart var(--beat) ease-in-out infinite;
  }
}

/* calmer cards (2026-10-20) */
/* go live sits on the card you open, not on every card in the list */
.gcard:not(.is-open):not(.is-next) .gcard-golive { display: none !important; }
/* a card with nothing inside yet: plain glass, a faint hint of its colour */
.gcard.is-empty:not(.is-open) .gcard-aura i { opacity: 0.16 !important; }
.gcard.has-golive:not(.is-open):not(.is-next) .gcard-title { padding-right: 64px !important; }

/* the one-time "Go live" tip under the button on an open card */
.g-live-tip {
  position: fixed; z-index: 80; max-width: 230px; padding: 11px 14px 12px; border-radius: 18px;
  display: flex; flex-direction: column; gap: 3px; color: #111; background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); font-size: 13.5px; line-height: 1.35;
  animation: g-tip-in 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) both; pointer-events: none;
}
.g-live-tip b { font-size: 15px; }
.g-live-tip::before {
  content: ''; position: absolute; top: -6px; right: 24px; width: 14px; height: 14px; background: #fff;
  transform: rotate(45deg); border-radius: 3px;
}
.g-live-tip.is-gone { opacity: 0; transform: translateY(-4px); transition: 0.2s; }
@keyframes g-tip-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }

/* a money treat, opened */
.g-viewer-media.is-money {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(230, 176, 40, 0.3), transparent 70%),
    linear-gradient(180deg, #15110a, #070604);
}
.g-viewer-money {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.g-viewer-money-coin {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 30px/1 var(--font-display);
  color: #5a3c00;
  background: linear-gradient(160deg, #fff1b8 0%, #f5c842 35%, #d49a12 70%, #f3cf5a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 0 rgba(120, 80, 0, 0.35),
    0 10px 30px rgba(230, 170, 30, 0.45);
}
.g-viewer-money strong {
  font: 800 64px/1 var(--font-display);
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff3c4, #f5c842 55%, #d49a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.g-viewer-money small {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* a friend's profile on a wide screen: photo on the left, name, buttons and
   numbers beside it, and everything below (the treats line, on now, the 16
   weeks, what they've finished) across the full width, left aligned */
@media (min-width: 760px) {
  .g-profile--friend {
    grid-template-columns: 180px 1fr;
    align-items: start;
    row-gap: 0;
  }
  .g-profile--friend > .g-avatar {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: center;
    width: 140px;
    height: 140px;
  }
  .g-profile--friend > h2,
  .g-profile--friend > .g-handle,
  .g-profile--friend > .g-bio,
  .g-profile--friend > .g-prof-acts,
  .g-profile--friend > .g-stats {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .g-profile--friend > h2 { align-self: end; margin-top: 6px; }
  .g-profile--friend > .g-prof-acts { justify-content: flex-start; margin: 12px 0 0; }
  .g-profile--friend > .g-stats { width: 100%; max-width: 480px; margin: 14px 0 0; }
  .g-profile--friend > :not(.g-avatar):not(h2):not(.g-handle):not(.g-bio):not(.g-prof-acts):not(.g-stats) {
    grid-column: 1 / -1;
  }
  .g-profile--friend > .g-prof-line {
    justify-content: flex-start;
    margin-top: 22px;
  }
}

/* ---------- phones: far fewer layers ----------
   will-change and 3D transforms each make the browser keep that element as
   its own picture in memory and re-upload it every frame it changes. On a
   phone the list doesn't wobble and cards don't tilt, so none of that is
   needed: Home went from ~160 such pictures to a handful. */
@media (hover: none) and (pointer: coarse) {
  .wob {
    will-change: auto;
  }
  .g-fd-art {
    will-change: auto;
    transform: none;
    transition: box-shadow 0.35s;
  }
}

/* ---------- closed sheets and pages don't exist, as far as drawing goes ----------
   Every sheet (add, who can watch, a person, the leaderboard…), the open-card
   overlay, the viewer, Settings and the sign-up screens sit full-screen behind
   everything even when closed: translated off or at opacity 0, but still laid
   out, still composited, still blurring whatever's under them. That was
   seven full-screen pictures kept in memory and refreshed on every frame.
   Hidden until opened (the open animation still plays: visibility switches
   on at once, and off only after the close animation). */
.g-sheet-wrap:not(.is-open),
#g-overlay:not(.is-open),
.g-viewer:not(.is-open),
.g-set:not(.is-open),
.g-ob:not(.is-open) {
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}
.g-sheet-wrap.is-open,
#g-overlay.is-open,
.g-viewer.is-open,
.g-set.is-open,
.g-ob.is-open {
  visibility: visible;
  transition: visibility 0s;
}

/* the keyboard is up inside an open card (a note, a GIF search): the pen row
   goes, the treat window keeps only what fits above the keyboard, and the
   card behind shrinks to a strip (glass-app.js, fitOpenToKeyboard) */
.has-kb #g-overlay.is-open #tool-ink {
  display: none;
}
.has-kb #g-overlay.is-open .g-tw-pages {
  height: min(204px, calc(100dvh - var(--kb, 0px) - 230px));
  min-height: 96px;
}

/* ---------- the day: who's in on each task, and tasks with no time yet ---------- */
.g-ev-faces {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
}
/* the bottom line of a block: faces, then treats */
.g-ev-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.g-ev:not(.g-ev--chip) .g-ev-foot {
  margin-top: auto;
}
.g-ev-foot .g-ev-gift {
  position: static;
  margin: 0;
}
.g-ev-faces {
  margin-top: 0;
}
/* a short block: the faces sit at the right, and the title stops before them */
.g-ev.is-short {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.g-ev.is-short .g-ev-top {
  flex: 1;
  min-width: 0;
}
.g-ev.is-short .g-ev-foot {
  margin: 0;
  flex: none;
}
.g-ev.has-join .g-ev-top {
  padding-right: 74px;
}
.g-ev-faces .g-avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
  box-shadow: 0 0 0 1.5px #0b0b0d;
}
.g-ev-faces .g-avatar + .g-avatar {
  margin-left: -6px;
}
.g-ev-more {
  margin-left: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-2);
}
.g-ev--chip .g-ev-faces {
  margin: 0 0 0 6px;
}
.g-unplanned {
  flex-wrap: wrap;
}
.g-unplanned .g-allday-label {
  line-height: 1.15;
}
.g-placer {
  flex-basis: 100%;
  margin: 8px 0 0 52px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18);
  animation: g-placer-in 0.28s cubic-bezier(0.2, 1, 0.3, 1);
}
@keyframes g-placer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.g-placer-q {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 750;
  color: #fff;
}
.g-placer-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-placer-slot,
.g-placer-pick {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  font: 700 14px var(--font);
  color: #000;
  background: #fff;
}
.g-placer-pick {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

/* ---------- joining a friend's task ---------- */
.gcard .gcard-meta .gcard-join {
  pointer-events: auto;
  gap: 5px;
  color: #000;
  background: #fff;
  font-weight: 800;
}
.gcard .gcard-meta .gcard-join.is-in {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.gcard .gcard-meta .gcard-joined {
  gap: 5px;
}
.g-ev-join {
  position: absolute;
  right: 8px;
  top: 7px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 800;
  color: #000;
  background: #fff;
}
.g-ev-join.is-in {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.g-ev.is-joined {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 4px 0 0 var(--accent),
    0 0 0 1.5px rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.g-joinable {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 0;
  border-radius: 20px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18);
}
.g-joinable span {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.g-joinable b {
  font-size: 15.5px;
}
.g-joinable small {
  font-size: 12.5px;
  color: var(--ink-2);
}
.g-joinable i {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s;
}
.g-joinable i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.g-joinable.is-on i {
  background: #34c759;
}
.g-joinable.is-on i::after {
  transform: translateX(18px);
}

/* ---------- your other calendars on the day ---------- */
.g-gev {
  position: absolute;
  z-index: 1;
  left: 2px;
  right: 6px;
  padding: 4px 9px;
  overflow: hidden;
  border-radius: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.55);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, rgba(255, 255, 255, 0.025) 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-gev span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 700;
}
.g-gev small {
  flex: none;
  font-size: 11px;
  opacity: 0.8;
}
.g-calbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}
.g-calbar-go {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.2);
}
.g-calbar-go span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-calbar-go b {
  font-size: 14.5px;
}
.g-calbar-go small {
  font-size: 12px;
  color: var(--ink-2);
}
.g-calbar-x {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- time-based cards: when it starts, then Now, then Late ---------- */
.gcard-clock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.gcard-when {
  font-family: var(--font-text, inherit);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.gcard-when:empty {
  display: none;
}
.gcard-clock[data-phase='soon'] > span:first-child {
  letter-spacing: -0.03em;
}
.gcard-clock[data-phase='now'] > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
}
.gcard-clock[data-phase='now'] > span:first-child::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
  animation: gcard-on 1.6s ease-out infinite;
  transform: translateY(-2px);
}
.gcard-clock[data-phase='now'] .gcard-when {
  color: rgba(255, 255, 255, 0.82);
}
.gcard-clock[data-phase='late'] > span:first-child,
.gcard-clock[data-phase='late'] .gcard-when {
  color: #ff6b5e;
}
.gcard[data-tier='3'] .gcard-clock[data-phase='now'] {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
@keyframes gcard-on {
  50% {
    opacity: 0.35;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gcard-clock[data-phase='now'] > span:first-child::before {
    animation: none;
  }
}

.g-section--now {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4cd964;
}
.g-section--now::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  animation: gcard-on 1.6s ease-out infinite;
}

/* ---------- calendar: your day, and friends' open sessions as ghosts ---------- */
.g-calwho {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(260px, 70%);
  margin: 4px auto 12px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-calwho::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  transform: translateX(calc(var(--i, 0) * 100%));
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(52, 52, 58, 0.95), rgba(22, 22, 26, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.g-calwho-b {
  position: relative;
  z-index: 1;
  height: 32px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.2s;
}
.g-calwho-b.is-on {
  color: #fff;
}
/* someone else's open session: see-through, dashed, there to join */
.g-ev.is-open {
  background: color-mix(in srgb, var(--accent) 7%, rgba(10, 10, 12, 0.35));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.g-ev.is-open::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 6px, transparent 6px 12px);
}
.g-ev.is-open .g-ev-title {
  color: rgba(255, 255, 255, 0.85);
}
/* yours, with friends in it: a soft glow so together reads at a glance */
.g-ev.is-crewed {
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 4px 0 0 var(--accent),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 8px 24px color-mix(in srgb, var(--accent) 22%, rgba(0, 0, 0, 0.45));
}
.g-calwho-host {
  flex: none;
}
.g-calwho-host[hidden] {
  display: none;
}
.g-calwho-host .g-calwho {
  margin: 10px auto 0;
}

/* add sheet: Paste a list and Friends can join, side by side */
.g-qa-tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.g-qa-kind.g-qa-joinable {
  gap: 8px;
}
.g-qa-sw {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background 0.25s;
}
.g-qa-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.g-qa-joinable.is-on {
  color: var(--ink);
}
.g-qa-joinable.is-on .g-qa-sw {
  background: #34c759;
}
.g-qa-joinable.is-on .g-qa-sw::after {
  transform: translateX(12px);
}
.g-qa-tools .g-qa-kind {
  margin: 4px 0 0;
  white-space: nowrap;
}
/* Join sits bottom-right on the block, under the title, never over it */
.g-ev.has-join .g-ev-join {
  top: auto;
  bottom: 6px;
  right: 6px;
}
.g-ev.has-join .g-ev-gift,
.g-ev.has-join .g-ev-more {
  display: none;
}
.g-ev.has-join .g-ev-title {
  padding-right: 0;
}
.g-ev.has-join .g-ev-top {
  padding-right: 0;
}

/* ---------- joining, on the card itself ----------
   A friend's task at a time that's open: Join on the right (where your own
   cards have their tick), the faces of who's in under it. */
.gcard.has-joinside .gcard-title {
  padding-right: 92px;
}
.gcard-joinside {
  position: absolute;
  z-index: 5;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gcard-joinside[hidden] {
  display: none;
}
.gcard-joinside-b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 16px 0 12px;
  border-radius: 19px;
  font-size: 15px;
  font-weight: 800;
  color: #000;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.25s, color 0.25s;
}
.gcard-joinside:active .gcard-joinside-b {
  transform: scale(0.92);
}
.gcard-joinside.is-in .gcard-joinside-b {
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
    inset 0 0 0 1.5px rgba(76, 217, 100, 0.85);
}
.gcard-joinside.is-in .gcard-joinside-b svg {
  color: #4cd964;
}
.gcard-joinside-who {
  display: flex;
  align-items: center;
  min-height: 18px;
}
.gcard-joinside-who .g-avatar {
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
}
.gcard-joinside-who .g-avatar + .g-avatar {
  margin-left: -6px;
}
.gcard-joinside-who small {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
/* you're in it with them: the card wears a green rim */
.gcard.is-joinedme {
  outline: 1.5px solid rgba(76, 217, 100, 0.75);
  outline-offset: 1.5px;
}

/* ---------- Today and Friends as a timeline ----------
   Times down the left, each card slotted in beside when it happens, a line
   at now. The time lives in the gutter, so the cards carry fewer numbers. */
.g-list.is-timeline {
  position: relative;
}
.g-tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
}
/* the rail: one thin line from time to time */
.g-tl-row::before {
  content: '';
  position: absolute;
  left: 61px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.g-tl-time {
  position: relative;
  padding-top: 22px;
  text-align: right;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.92);
}
.g-tl-time b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.g-tl-time small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}
.g-tl-row.is-loose .g-tl-time small:first-child {
  margin: 0 0 2px;
}
.g-tl-row.is-loose .g-tl-time b {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
/* a dot on the rail at each start */
.g-tl-time::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0c0c0e;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
.g-tl-row.is-loose .g-tl-time::after {
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}
.g-tl-row.is-now .g-tl-time {
  color: #4cd964;
}
.g-tl-row.is-now .g-tl-time::after {
  background: #34c759;
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.25);
}
.g-tl-row.is-past .g-tl-time {
  color: rgba(255, 255, 255, 0.4);
}
.g-tl-slot {
  min-width: 0;
}
.g-tl-slot > .wob {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.g-tl-day {
  padding: 22px 0 4px 70px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* now: a red line across, like a calendar */
.g-tl-now {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
  margin: 2px 0;
}
.g-tl-now span {
  width: 54px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ff453a;
}
.g-tl-now i {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: #ff453a;
  box-shadow: 0 0 10px rgba(255, 69, 58, 0.45);
}
.g-tl-now i::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff453a;
}

/* the cards on it: the title, who's on it, and only the time that matters */
.is-timeline .gcard-clock {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  gap: 6px;
}
.is-timeline .gcard-clock[data-phase='soon'] {
  display: none;
}
.is-timeline .gcard-clock[data-phase='now'] > span:first-child::before {
  width: 8px;
  height: 8px;
  transform: none;
}
.is-timeline .gcard-clock[data-phase='now'] > span:first-child {
  gap: 7px;
}
/* a "by" with time to spare: the gutter says by when; under an hour, it counts */
.is-timeline .gcard:not([data-tier='2']):not([data-tier='3']) .gcard-clock[data-phase='due'] {
  display: none;
}
.is-timeline .gcard-clock[data-phase='due'] .gcard-when {
  display: none;
}
.is-timeline .gcard-count,
.is-timeline .gcard-streak,
.is-timeline .gcard-day,
.is-timeline .gcard-joinside-who small,
.is-timeline .gcard-joined span {
  display: none !important;
}
.is-timeline .gcard-title {
  font-size: 20px;
}
.is-timeline .gcard-title {
  -webkit-line-clamp: 2;
  max-height: none;
}
/* on the timeline a title can take two lines rather than cut off */
.is-timeline .wob .gcard:not(.is-open) .gcard-title {
  max-height: 2.5em !important;
  -webkit-line-clamp: 2;
  white-space: normal;
}
/* the cards are a fixed height: a second line only when there's no time line under it */
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='soon']) .gcard-title,
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='due']):not([data-tier='2']):not([data-tier='3']) .gcard-title {
  -webkit-line-clamp: 2 !important;
}
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='now']) .gcard-title,
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='late']) .gcard-title {
  max-height: 1.25em !important;
}

/* ---------- Treats ---------- */
.gtr {
  padding-bottom: 140px;
}
.gtr-sealed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.gtr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 16px 10px 10px;
  border: 0;
  border-radius: 22px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(120% 120% at 0% 50%, color-mix(in srgb, var(--accent, #4da3ff) 18%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(36, 36, 42, 0.75), rgba(14, 14, 16, 0.8));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.15s;
}
.gtr-row:active {
  transform: scale(0.98);
}
/* the treats inside, sealed: a little stack, blurred, with a lock */
.gtr-pile {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
}
.gtr-pile .g-fill-media {
  position: absolute;
  inset: auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  filter: blur(5px) saturate(1.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}
.gtr-pile .g-fill-media:nth-child(1) {
  left: 0;
  top: 0;
  transform: rotate(-8deg);
}
.gtr-pile .g-fill-media:nth-child(2) {
  left: 10px;
  top: 6px;
  transform: rotate(6deg);
}
.gtr-pile .g-fill-media:nth-child(3) {
  left: 6px;
  top: 12px;
}
.gtr-pile .g-fill-note {
  display: none;
}
.gtr-lock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(20, 20, 24, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.gtr-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gtr-row-text b {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtr-row-text small {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtr-row-n {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #000;
  background: #fff;
}
.gtr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 10px;
}
@media (min-width: 700px) {
  .gtr-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.gtr-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.gtr-tile > .g-avatar {
  position: absolute;
  left: 7px;
  bottom: 7px;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.5);
}
.gtr-tile .g-fill-media.is-note {
  padding: 10px 9px 30px;
}
.gtr-tile .g-fill-note {
  font-size: 12px;
  -webkit-line-clamp: 4;
}
.gtr-empty {
  margin: 10px 6px 0;
  font-size: 14px;
  color: var(--ink-3);
}
.gtr-store {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 196, 77, 0.16), transparent 60%),
    radial-gradient(90% 140% at 0% 100%, rgba(255, 90, 160, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(36, 36, 42, 0.75), rgba(14, 14, 16, 0.8));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.gtr-store > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gtr-store b {
  font-size: 16px;
  font-weight: 700;
}
.gtr-store small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.gtr-store-ic {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.9), rgba(14, 14, 16, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.gtr-soon {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* tasks at the same time: side by side in one row, swipe across */
.g-tl-stack {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-right: -16px;
  padding-right: 16px;
}
.g-tl-stack::-webkit-scrollbar {
  display: none;
}
.g-tl-cell {
  flex: 0 0 calc(100% - 34px);
  min-width: 0;
  scroll-snap-align: start;
}
.g-tl-cell > .wob {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.g-tl-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: -2px 0 6px;
}
.g-tl-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s, width 0.2s;
}
.g-tl-dots i.is-on {
  width: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
}
.g-tl-count {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.45);
}
@media (min-width: 900px) {
  /* room for two at once on a laptop */
  .g-tl-cell {
    flex-basis: calc(50% - 4px);
  }
  .g-tl-stack {
    margin-right: 0;
    padding-right: 0;
  }
}
/* a card that's gone leaves no empty slot behind while the list catches up */
.g-tl-cell:not(:has(.wob)) {
  display: none;
}
.g-tl-row:not(:has(.wob)) {
  display: none;
}
/* on now: the gutter says until when, the card just shows the title */
.is-timeline .gcard-clock[data-phase='now'],
.is-timeline .gcard-clock[data-phase='late'] {
  display: none;
}
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='now']) .gcard-title,
.is-timeline .wob .gcard:not(.is-open):has(.gcard-clock[data-phase='late']) .gcard-title {
  -webkit-line-clamp: 2 !important;
  max-height: 2.5em !important;
}
.g-tl-until,
.g-tl-late {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #4cd964;
}
.g-tl-late {
  color: #ff6b5e;
}
.g-tl-row.is-now .gcard {
  outline: 1.5px solid rgba(76, 217, 100, 0.55);
  outline-offset: 1px;
}
.gtr-pile .g-fill-media {
  filter: blur(2.5px) saturate(1.2);
}

/* ---------- one type scale, one rhythm ----------
   Screen title 32 / section heading 20 / small caps label 13, all the same
   family and weight steps; the same gaps under the header and the faces row
   on every tab. */
.g-screen .g-head h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
#g-app #sc-today > .g-mytasks,
.g-sec-h {
  margin: 18px 0 10px !important;
  padding: 0 4px !important;
  font-family: var(--font-head, 'Poppins', var(--font-display)) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
.gtr > .g-sec-h:first-child {
  margin-top: 6px !important;
}
.gh-duos-host {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
.g-tl-day {
  padding: 20px 0 8px 70px;
}
.wob .gcard-title,
.wob--hero .gcard-title {
  font-family: var(--font-head, 'Poppins', var(--font-display)) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: -0.015em !important;
}
.gtr-row-text b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-weight: 600;
}

/* ---------- the same time: one session, stacked ---------- */
.g-tl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px 8px;
  margin: 4px 0 8px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-tl-group.is-on {
  box-shadow: inset 0 0 0 1.5px rgba(76, 217, 100, 0.45);
  background: rgba(52, 199, 89, 0.05);
}
.g-tl-group > .wob {
  margin: 0 !important;
}
.g-tl-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 2px;
  min-width: 0;
}
.g-tl-group-faces {
  display: flex;
  flex: none;
}
.g-tl-group-faces .g-avatar + .g-avatar {
  margin-left: -7px;
}
.g-tl-group-faces .g-avatar {
  box-shadow: 0 0 0 2px #0b0b0d;
}
.g-tl-group-t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.g-tl-group-t b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.g-tl-group.is-on .g-tl-group-t b {
  color: #4cd964;
}
.g-tl-group-t small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the gutter of a group lines up with its first card, under the header */
.g-tl-row:has(.g-tl-group) .g-tl-time {
  padding-top: 64px;
}
.g-tl-row:has(.g-tl-group) .g-tl-time::after {
  top: 69px;
}
.g-tl-row.is-now:has(.g-tl-group) .gcard,
.g-tl-group .gcard {
  outline: none !important;
}

/* a friend's task you joined, on your day */
.g-tl-mate {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 6px 0;
  padding: 10px 12px 10px 10px;
  border: 0;
  border-radius: 22px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  background:
    radial-gradient(120% 140% at 0% 50%, hsla(var(--h), 80%, 60%, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.18);
}
.g-tl-group .g-tl-mate {
  margin: 0;
}
.g-tl-mate-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-tl-mate-t b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-tl-mate-t small {
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-tl-mate-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(76, 217, 100, 0.7);
}
.g-tl-mate-go svg {
  color: #4cd964;
}
.g-tl-mate-go i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff453a;
}
.g-tl-mate .g-tl-mate-go:has(i) {
  box-shadow: inset 0 0 0 1.5px rgba(255, 69, 58, 0.7);
}

/* hold and drag: the card lifts, a line shows where it'll go */
.is-timeline .wob.is-lifted {
  position: relative;
  z-index: 30;
  transition: none !important;
}
.is-timeline .wob.is-lifted .gcard {
  transform: scale(1.03);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.g-list.is-dragging {
  user-select: none;
  -webkit-user-select: none;
}
.g-list.is-dragging .wob:not(.is-lifted) {
  opacity: 0.75;
}
.g-tl-drop {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 25;
  pointer-events: none;
}
.g-tl-drop span {
  position: absolute;
  left: 62px;
  top: -13px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #000;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.g-tl-drop i {
  position: absolute;
  left: 62px;
  right: 0;
  top: 0;
  height: 2px;
  border-radius: 1px;
  background: #fff;
  opacity: 0.6;
}
.g-tl-drop span + i {
  left: 160px;
}
.is-timeline .wob {
  -webkit-touch-callout: none;
}
.g-tl-row:has(.wob.is-lifted) {
  z-index: 40;
}
.g-tl-drop.is-home span {
  color: #fff;
  background: rgba(40, 40, 46, 0.95);
}
.g-tl-drop.is-home i {
  display: none;
}
#g-app .gcard .gcard-title {
  font-family: var(--font-head, 'Poppins', var(--font-display)) !important;
  font-weight: 600 !important;
}
#g-app .wob .gcard:not(.is-open) .gcard-title {
  font-size: 20px !important;
}
#list-friends > .g-sec-h:first-child {
  margin-top: 12px !important;
}
.gtr > .g-sec-h:first-child {
  margin-top: 14px !important;
}

/* no "Your day" heading: the timeline starts with its first day's label */
#g-app #sc-today > .g-mytasks {
  display: none !important;
}
.g-tl-day {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 20px 0 8px 70px;
}
.g-tl-day.is-today {
  padding-top: 14px;
}
.g-tl-day span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.35);
}
.g-list.is-timeline > .g-tl-day:first-child {
  padding-top: 12px;
}

/* the join sheet */
.g-join-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 14px;
}
.g-join-head-t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.g-join-head-t b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 20px;
  font-weight: 600;
}
.g-join-head-t small {
  font-size: 13px;
  color: var(--ink-2);
}
.g-join-q {
  margin: 6px 4px 8px;
  font-size: 15px;
  font-weight: 700;
}
.g-join-line {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-join-input {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.g-join-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 21px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #000;
  background: #fff;
  cursor: pointer;
}
.g-join-go:disabled {
  opacity: 0.35;
}
.g-join-same {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-join-same b {
  color: var(--ink);
}
.g-join-note {
  margin: 14px 4px 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ---------- the timeline, Instagram-clean ----------
   No gutter: full-width cards with the same margin both sides; each one a
   post with a header line (who, when, a status on the right), one even gap
   between posts. */
.g-list.is-timeline .g-tl-row {
  display: block;
  margin: 0 0 14px;
}
.g-list.is-timeline .g-tl-row::before,
.g-tl-time {
  display: none !important;
}
.g-tl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 6px 7px;
}
.g-tl-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.g-tl-who b {
  font-size: 14px;
  font-weight: 700;
}
.g-tl-who + .g-tl-when::before {
  content: '·';
  margin-right: 8px;
  color: var(--ink-3);
}
.g-tl-when {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.g-tl-row.is-past .g-tl-when {
  color: var(--ink-3);
}
.g-tl-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-tl-tag.is-now {
  color: #4cd964;
  box-shadow: inset 0 0 0 1px rgba(76, 217, 100, 0.5);
}
.g-tl-tag.is-now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  animation: gcard-on 1.6s ease-out infinite;
}
.g-tl-tag.is-late {
  color: #ff6b5e;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 94, 0.45);
}
.g-tl-day {
  padding: 18px 6px 10px !important;
}
.g-list.is-timeline > .g-tl-day:first-child,
.g-list.is-timeline > .g-need:first-child + .g-tl-day {
  padding-top: 6px !important;
}
.g-tl-now {
  height: 18px;
  margin: 0 0 12px;
  gap: 0;
}
.g-tl-now span {
  width: auto;
  padding: 2px 8px;
  border-radius: 9px;
  font-size: 11px;
  color: #fff;
  background: #ff453a;
  text-align: center;
}
.g-tl-now i::before {
  display: none;
}
.g-tl-row.is-now .gcard {
  outline: none !important;
}
.g-tl-group {
  margin: 0;
}
.g-tl-drop span {
  left: 6px;
}
.g-tl-drop i {
  left: 6px;
}
.g-tl-drop span + i {
  left: 150px;
}

/* yours with no time yet: one strip, opened to give them times */
.g-need {
  margin: 4px 0 6px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.g-need-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.g-need-bar > svg {
  flex: none;
  color: var(--amber, #ffb340);
}
.g-need-bar > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-need-bar b {
  font-size: 15px;
  font-weight: 700;
}
.g-need-bar small {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-need-chev {
  display: grid;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform 0.25s;
}
.g-need.is-open .g-need-chev {
  transform: rotate(-90deg);
}
.g-need-list {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 12px;
}
.g-need.is-open .g-need-list {
  display: flex;
}
.g-need-list .g-placer {
  margin: 0;
}
/* the header says whose it is: no second face inside the card */
#list-friends.is-timeline .gcard-head > .g-avatar:not(.gcard-setter) {
  display: none;
}
/* cards as tall as what's on them */
#g-app .is-timeline .wob .gcard:not(.is-open) {
  height: auto !important;
  min-height: 96px;
}
#g-app .is-timeline .wob .gcard:not(.is-open) .gcard-body {
  min-height: 96px;
}
.g-list.is-timeline .g-tl-row {
  margin-bottom: 12px;
}
.g-tl-head {
  padding-bottom: 6px;
}
#g-app .is-timeline .wob .gcard:not(.is-open) .gcard-body {
  position: relative;
  inset: auto;
  gap: 10px;
}
.g-need-list .g-placer {
  padding: 12px 12px 10px;
  border-radius: 18px;
}
.g-need-list .g-placer-q {
  font-size: 14px;
}
.g-need-list .g-placer-slots {
  gap: 6px;
  margin-top: 8px;
}
.g-need-list .g-placer-slot,
.g-need-list .g-placer-pick {
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  border-radius: 17px !important;
}
.g-tl-day {
  padding-bottom: 4px !important;
}
.g-join-sub {
  margin: -4px 4px 12px;
  font-size: 13px;
  color: var(--ink-3);
}
.g-join-mine {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-join-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.g-join-pick + .g-join-pick {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.g-join-pick:active {
  background: rgba(255, 255, 255, 0.06);
}
.g-join-pick > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-join-pick b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-join-pick small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.g-join-pick > svg {
  flex: none;
  color: var(--ink-3);
}
.g-join-or {
  margin: 14px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

/* ---------- tighter rhythm ---------- */
.g-list.is-timeline .g-tl-row {
  margin-bottom: 8px;
}
.g-tl-head {
  min-height: 22px;
  padding: 0 6px 4px;
}
.g-tl-day {
  padding: 12px 6px 6px !important;
}
.g-tl-now {
  margin: 2px 0 8px;
}

/* a day with nothing on it: one slim line */
.g-tl-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.g-tl-empty b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--ink-2);
}

/* suggestions between posts */
.g-sg {
  margin: 4px 0 12px;
  padding: 10px 12px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.g-sg-label {
  padding: 0 2px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-sg-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-sg-ic {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(48, 48, 54, 0.9), rgba(14, 14, 16, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-sg-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-sg-t b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-sg-t small {
  font-size: 13px;
  color: var(--ink-3);
}
.g-sg-btn {
  flex: none;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #000;
  background: #fff;
  cursor: pointer;
}
.g-sg-btn.is-sent {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.g-tl-more {
  height: 1px;
}
/* the timeline runs on forever (with suggestions in it), so the old feed
   under it would never be reached */
#list-today.is-timeline ~ #feed-today,
#list-friends.is-timeline ~ #feed-friends {
  display: none !important;
}

/* go live: a fine link in the post header, on every task of yours */
.g-tl-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin-left: auto;
  padding: 0 2px 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: color 0.2s;
}
.g-tl-live svg {
  color: #ff6259;
}
.g-tl-live:hover,
.g-tl-live:active {
  color: #fff;
}
.g-tl-tag + .g-tl-live {
  margin-left: 12px;
}
.g-tl-live.is-on {
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  color: #fff;
  background: #ff3b30;
}
.g-tl-live.is-on svg {
  color: #fff;
}
/* the card itself no longer carries a live button */
.is-timeline .gcard-golive {
  display: none !important;
}
.is-timeline .gcard.has-golive .gcard-title {
  padding-right: 58px !important;
}

/* a suggestion that looks like a post: its time on top, a see-through card */
.g-sgp-tag {
  color: var(--ink-2);
}
.g-sgp-tag svg {
  color: #ffd66b;
}
.g-sgp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 14px 14px 20px;
  border-radius: 28px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 214, 107, 0.08), transparent 55%),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.16);
}
.g-sgp-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.g-sgp-t b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.86);
}
.g-sgp-t small {
  font-size: 13px;
  color: var(--ink-3);
}
.g-sgp-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 15px 0 12px;
  border: 0;
  border-radius: 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #000;
  background: #fff;
  cursor: pointer;
}
.g-sgp-add:active {
  transform: scale(0.95);
}

/* a lecture or event from your calendar, on your day */
.g-tl-ev {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.28);
}
.g-tl-ev svg {
  flex: none;
  color: var(--ink-3);
}
.g-tl-ev b {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-tl-ev span {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.g-tl-ev.is-now {
  box-shadow: inset 3px 0 0 #4cd964;
}

/* moved by the assistant: a small spark in the header */
.g-tl-sorted {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #ffd66b;
}
/* the assistant at work: the feed shimmers; holding the logo presses it in */
#today-brand {
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
  -webkit-touch-callout: none;
  user-select: none;
}
#today-brand.is-pressing {
  transform: scale(0.94);
}
body.is-sorting #today-brand svg {
  animation: g-assist-spin 1.4s linear infinite;
}
body.is-sorting #list-today {
  animation: g-assist-pulse 1.6s ease-in-out infinite;
}
@keyframes g-assist-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes g-assist-pulse {
  50% {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-sorting #today-brand svg,
  body.is-sorting #list-today {
    animation: none;
  }
}

/* ---------- Ask Treatly: the one bar ---------- */
.g-ask {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}
.g-ask-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.25s;
}
.g-ask-panel {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-t, 0px) + 10px);
  width: min(620px, calc(100% - 20px));
  max-height: calc(100% - var(--safe-t, 0px) - 30px);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -16px) scale(0.98);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s;
}
.g-ask.is-open {
  pointer-events: auto;
}
.g-ask.is-open .g-ask-bg {
  opacity: 1;
}
.g-ask.is-open .g-ask-panel {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
.g-ask-line {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 6px 0 14px;
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.08), transparent 55%),
    rgba(28, 28, 32, 0.92);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.5);
}
.g-ask-mark {
  flex: none;
  display: grid;
  color: #fff;
}
.g-ask.is-busy .g-ask-mark svg {
  animation: g-assist-spin 1.4s linear infinite;
}
.g-ask-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}
.g-ask-input::-webkit-search-cancel-button {
  display: none;
}
.g-ask-mic,
.g-ask-go {
  flex: none;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-ask-go {
  color: #000;
  background: #fff;
}
.g-ask-mic.is-on {
  color: #000;
  background: #ff6259;
}
.g-ask-reply {
  flex: none;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: rgba(28, 28, 32, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-ask-reply[hidden] {
  display: none;
}
.g-ask-reply p {
  margin: 0;
}
.g-ask-reply ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 14px;
}
.g-ask-undo,
.g-ask-pro {
  margin-top: 10px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.g-ask-pro {
  margin: 0 0 0 6px;
  color: #000;
  background: #fff;
}
.g-ask-dots {
  display: inline-flex;
  gap: 5px;
}
.g-ask-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: g-ask-dot 1s ease-in-out infinite;
}
.g-ask-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.g-ask-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes g-ask-dot {
  50% {
    opacity: 0.25;
    transform: translateY(-3px);
  }
}
.g-ask-results {
  margin-top: 10px;
  overflow-y: auto;
  border-radius: 22px;
  background: rgba(28, 28, 32, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 6px 0;
}
.g-ask-results:empty {
  display: none;
}
.g-ask-h {
  padding: 10px 16px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.g-ask-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.g-ask-row:active,
.g-ask-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.g-ask-ic {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.07);
}
.g-ask-row.is-ask .g-ask-ic {
  color: #ffd66b;
}
.g-ask-t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.g-ask-t b {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-ask-t small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.g-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 14px 10px;
}
.g-ask-chip {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* the search / ask button: plain like the bell, before the calendar */
@media (max-width: 759px) {
  #g-app #s-today .g-head.g-head--row {
    grid-template-columns: 1fr auto auto auto auto;
  }
  #s-today .g-head-actions > #head-ask {
    grid-column: 3 !important;
  }
  #s-today .g-head-actions > #head-cal {
    grid-column: 4 !important;
  }
  #s-today .g-head-actions > .g-btn.g-bell {
    grid-column: 5 !important;
  }
}
#head-ask,
#head-ask::before,
#head-ask::after {
  color: #fff;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- hold the +: Treatly Pro ---------- */
#fab.is-holding {
  transform: scale(1.12);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.g-pw {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}
.g-pw-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0;
  transition: opacity 0.25s;
}
.g-pw-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b, 0px) + 96px);
  width: min(440px, calc(100% - 20px));
  max-height: calc(100% - 140px);
  overflow-y: auto;
  padding: 16px 12px 12px;
  border-radius: 32px;
  transform: translate(-50%, 24px) scale(0.94);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.1), opacity 0.2s;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
    rgba(24, 24, 28, 0.94);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 80px rgba(0, 0, 0, 0.6);
}
.g-pw.is-open {
  pointer-events: auto;
}
.g-pw.is-open .g-pw-bg {
  opacity: 1;
}
.g-pw.is-open .g-pw-card {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
.g-pw-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 12px;
}
.g-pw-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(180deg, rgba(52, 52, 58, 0.95), rgba(14, 14, 16, 0.95));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-pw-head > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-pw-head b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 19px;
  font-weight: 600;
}
.g-pw-head small {
  font-size: 13px;
  color: var(--ink-3);
}
.g-pw-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-pw-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border: 0;
  border-radius: 18px;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.g-pw-row:hover,
.g-pw-row:active {
  background: rgba(255, 255, 255, 0.06);
}
.g-pw-row > svg {
  flex: none;
  color: var(--ink-3);
}
.g-pw-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-pw-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-pw-t b {
  font-size: 15.5px;
  font-weight: 650;
}
.g-pw-t small {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-3);
}
.g-pw-row.is-locked .g-pw-t b::after {
  content: 'Pro';
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffd66b;
  box-shadow: inset 0 0 0 1px rgba(255, 214, 107, 0.5);
  vertical-align: 1px;
}
.g-pw-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 0;
  padding: 5px 5px 5px 14px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-pw-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.g-pw-go {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #000;
  background: #fff;
  cursor: pointer;
}
.g-pw-q {
  margin: 4px 10px 8px;
  font-size: 15px;
  font-weight: 700;
}
.g-pw-note {
  margin: 4px 10px;
  color: var(--ink-3);
}
.g-pw-pro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 4px);
  height: 46px;
  margin: 10px 2px 0;
  border: 0;
  border-radius: 23px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #000;
  background: #fff;
  cursor: pointer;
}

/* bring your calendar in: the first thing on your day until it's connected */
.g-cc {
  position: relative;
  margin: 4px 0 12px;
  padding: 14px 14px 12px;
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(77, 163, 255, 0.14), transparent 55%),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.g-cc > .g-cc-ic,
.g-cc-ic {
  float: left;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.g-join-head .g-cc-ic {
  float: none;
  margin: 0;
}
.g-cc-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
  padding-right: 26px;
}
.g-cc-t b {
  font-family: var(--font-head, 'Poppins', var(--font-display));
  font-size: 16px;
  font-weight: 600;
}
.g-cc-t small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.g-cc-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.g-cc-btns {
  clear: both;
  display: flex;
  gap: 8px;
  padding-top: 12px;
}
.g-cc-btn {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-cc-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-cc-btn.is-main {
  color: #000;
  background: #fff;
  box-shadow: none;
}
.g-cc-g {
  font-weight: 800;
  background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: visible !important;
}
.g-cl-how {
  margin: 0 4px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.g-cl-how p {
  margin: 0 0 8px;
}
.g-cl-how b {
  display: block;
  color: var(--ink);
}
.g-cl-how i {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.g-cc-btns + .g-tl-day,
.g-cc + .g-tl-day {
  padding-top: 4px !important;
}
.g-cs-ic {
  flex: none !important;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid !important;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.g-join-pick.is-on small {
  color: #4cd964;
}
.g-cs-on {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #000;
  background: #4cd964;
}

/* ---------- Notes: a plain notepad ---------- */
.gn {
  padding-bottom: 160px;
}
.gn-pad {
  min-height: 50vh;
  padding: 6px 0 40px;
  cursor: text;
}
.gn-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px 0 6px;
  border-radius: 12px;
  transition: background 0.4s;
}
.gn-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.3s, box-shadow 0.3s;
}
.gn-in {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  outline: none;
  caret-color: #fff;
}
.gn-in::placeholder {
  color: var(--ink-3);
}
/* a line that's on your day: lit, with its time, a link to the task */
.gn-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.gn-field .gn-in {
  position: relative;
  z-index: 1;
  width: 100%;
}
.gn-hl {
  position: absolute;
  left: 0;
  top: 50%;
  max-width: 100%;
  overflow: hidden;
  transform: translateY(-50%);
  white-space: pre;
  font-size: 17px;
  line-height: 1.3;
  color: transparent;
  pointer-events: none;
  border-radius: 3px;
}
.gn-row.is-task .gn-in,
.gn-row.is-task .gn-hl {
  font-weight: 600;
}
.gn-row.is-task .gn-hl {
  background: linear-gradient(transparent 58%, rgba(255, 214, 107, 0.3) 58%, rgba(255, 214, 107, 0.3) 94%, transparent 94%);
}
.gn-row.is-task .gn-in {
  text-decoration: underline;
  text-decoration-color: rgba(255, 214, 107, 0.0);
}
.gn-row.is-task .gn-dot {
  background: #ffd66b;
  box-shadow: 0 0 10px rgba(255, 214, 107, 0.6);
}
.gn-row.is-done .gn-in {
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: line-through;
}
.gn-row.is-done .gn-hl {
  background: none;
}
.gn-row.is-done .gn-dot {
  background: #4cd964;
  box-shadow: none;
}
.gn-row.is-lit {
  animation: gn-lit 1.4s ease-out;
}
@keyframes gn-lit {
  0% {
    background: rgba(255, 214, 107, 0.28);
  }
  100% {
    background: transparent;
  }
}
.gn-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffd66b;
  cursor: pointer;
  background: rgba(255, 214, 107, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 107, 0.35);
  white-space: nowrap;
}
.gn-chip[hidden] {
  display: none;
}
.gn-row.is-done .gn-chip {
  color: #4cd964;
  background: rgba(76, 217, 100, 0.08);
  box-shadow: inset 0 0 0 1px rgba(76, 217, 100, 0.35);
}
.gn-tip {
  margin: 8px 6px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

/* ---------- Notes writes back: Treatly's ink ----------
 * Its lines are handwritten, a little warmer than yours, and each letter
 * soaks up out of the page, like a diary answering. */
.gn-row.is-under {
  padding-left: 26px;
}
.gn-row.is-under .gn-dot {
  width: 5px;
  height: 5px;
}
.gn-row.is-ask .gn-in {
  font-weight: 700;
}
.gn-row.is-ask .gn-dot {
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.gn-ink {
  align-items: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 4px 6px 8px 26px;
  cursor: pointer;
  transition: opacity 0.3s, filter 0.3s;
}
.gn-ink.is-gone {
  opacity: 0;
  filter: blur(4px);
}
.gn-pen {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0;
  border-radius: 50%;
  color: #fff;
  opacity: 0.7;
}
.gn-say {
  flex: 1;
  min-width: 0;
  margin: 0;
  font: 400 15.5px/1.4 var(--font);
  color: #fff;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.gn-ch {
  animation: gn-soak 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes gn-soak {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(2px);
  }
}
/* a step it suggests: tap to keep */
.gn-ink.is-sugg .gn-say {
  font-size: 15px;
  opacity: 0.82;
}
.gn-ink.is-sugg .gn-say::before {
  content: '– ';
}
.gn-take,
.gn-undo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  margin-top: 1px;
  padding: 0 10px;
  border-radius: 13px;
  font: 700 12.5px/1 var(--font);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.gn-take:active,
.gn-undo:active {
  transform: scale(0.94);
}
.gn-ink.is-thinking .gn-say {
  height: 25px;
}
.gn-dots {
  display: inline-flex;
  gap: 5px;
  padding-top: 10px;
}
.gn-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: gn-dot 1.1s ease-in-out infinite;
}
.gn-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.gn-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes gn-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.g-reduce-motion .gn-ch,
.g-reduce-motion .gn-dots i {
  animation: none;
}

/* ---------- Notes: the words it understood ----------
 * Under each line that's a task: its name marked like a highlighter, the
 * words that set its time underlined like a link. Faint until you confirm
 * (or tick it); then the ink dries. */
.gn-row.is-task .gn-hl {
  background: none;
}
.gn-hl mark {
  color: transparent;
  border-radius: 3px;
  background: linear-gradient(transparent 58%, rgba(255, 214, 107, 0.17) 58%, rgba(255, 214, 107, 0.17) 94%, transparent 94%);
  transition: background 0.4s;
}
.gn-row.is-ok .gn-hl mark {
  background: linear-gradient(transparent 58%, rgba(255, 214, 107, 0.34) 58%, rgba(255, 214, 107, 0.34) 94%, transparent 94%);
}
.gn-hl u {
  text-decoration: underline;
  text-decoration-color: rgba(142, 201, 242, 0.85);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-style: dotted;
}
.gn-row.is-ok .gn-hl u {
  text-decoration-style: solid;
}
.gn-row.is-done .gn-hl mark,
.gn-row.is-done .gn-hl u {
  background: none;
  text-decoration: none;
}
.gn-row.is-task:not(.is-ok):not(.is-done) .gn-chip {
  box-shadow: inset 0 0 0 1px rgba(255, 214, 107, 0.35);
  background: transparent;
  border: 1px dashed transparent;
}

/* what it understood, under the line */
.gn-card {
  margin: 2px 4px 10px 22px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: gn-card-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes gn-card-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.gn-card-say {
  margin: 0;
  font: 600 15.5px/1.35 var(--font);
  color: #fff;
}
.gn-card-when {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.gn-card-when input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  font: 600 14px/1 var(--font);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}
.gn-card-len {
  display: flex;
  gap: 6px;
}
.gn-card-len button,
.gn-card-do button {
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  font: 700 13px/1 var(--font);
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.07);
}
.gn-card-len button.is-on {
  color: #000;
  background: #fff;
}
.gn-card-do {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gn-card-do .gn-card-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000;
  background: #ffd66b;
}
.gn-card-do .gn-card-no {
  margin-left: auto;
  color: var(--ink-3);
  background: none;
}

/* something pasted: kept whole, folded */
.gn-clip {
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
  padding: 10px 8px 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.gn-clip-t {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gn-clip.is-open .gn-clip-t {
  display: block;
}
.gn-clip-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.06);
}

/* "How many?": the numbers sit under the question, a tap each */
.gn-ink:has(.gn-take) {
  flex-wrap: wrap;
  row-gap: 8px;
}
.gn-ink:has(.gn-take) .gn-say {
  flex: 1 1 calc(100% - 40px);
}
.gn-ink:has(.gn-take) .gn-pen + .gn-say ~ .gn-take:first-of-type {
  margin-left: 28px;
}
.gn-ink .gn-take {
  min-width: 36px;
  justify-content: center;
}