/* Treatly Glass — Today as one scrollable feed, like Instagram.
 *
 * One centred column on every screen size: stories along the top, a one-line
 * composer, your own tasks, then posts (friends finishing, running out of time,
 * on the clock; your past treats; the odd suggestion). Posts are flat, not
 * boxes: a header, one big picture, a row of actions, a caption, a hairline.
 * Loaded after glass-app.css; only the Today and Friends feeds change here.
 */

#s-today {
  --col: 600px;
}

/* ---------- one column ---------- */
#sc-today > * {
  width: 100%;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}
#sc-today > .g-dash {
  display: none; /* the four tiles: the streak lives in the header now */
}
#sc-today .g-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#sc-today .g-list > * {
  width: 100%;
}
@media (min-width: 760px) {
  #sc-today .g-list {
    display: flex;
    gap: 16px;
  }
  #sc-today .wob .gcard {
    height: 220px;
  }
  #sc-today .wob--hero .gcard {
    height: 300px;
  }
}

/* ---------- header: date, Today, streak, bell ---------- */
#s-today .g-head--row {
  align-items: center;
}
.g-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  font: 800 14px/1 var(--font-display);
}
.g-streak-chip .gi {
  color: var(--amber);
}
.g-streak-chip[hidden] {
  display: none;
}

/* ---------- stories ---------- */
.g-stories {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  margin-bottom: 14px;
  padding: 4px 6px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.g-stories::-webkit-scrollbar {
  display: none;
}
.g-stories[hidden] {
  display: none;
}
.g-story {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.g-story:active .g-story-ring {
  transform: scale(0.94);
}
.g-story-ring {
  --p: 100%;
  position: relative;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 0.15s;
}
/* the ring: a 3px band drawn under a black disc */
.g-story-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-mask: radial-gradient(circle, transparent 31.5px, #000 32px);
  mask: radial-gradient(circle, transparent 31.5px, #000 32px);
}
.g-story.is-friend .g-story-ring::before {
  /* a plain white ring: no pastel rainbow */
  background: rgba(255, 255, 255, 0.92);
}
.g-story.is-live .g-story-ring::before {
  background: conic-gradient(#ff453a, #ff7a59, #ff453a);
}
/* your tasks: the ring is the time left, going round like a clock */
.g-story.is-mine .g-story-ring::before {
  background: conic-gradient(var(--sage) var(--p), rgba(255, 255, 255, 0.14) 0);
}
.g-story.is-mine .g-story-ring.is-close::before {
  background: conic-gradient(var(--danger) var(--p), rgba(255, 255, 255, 0.14) 0);
}
.g-story .g-avatar {
  width: 62px !important;
  height: 62px !important;
  font-size: 22px;
  box-shadow: none;
}
.g-story-time {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  font: 800 15px/1 var(--font-display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.g-story-ring.is-close .g-story-time {
  color: #ff6b61;
}
.g-story-plus {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #000;
  background: #fff;
  box-shadow: 0 0 0 3px #000;
}
.g-story.is-new .g-story-ring::before {
  display: none;
}
.g-story.is-new .g-avatar {
  position: relative;
  overflow: visible;
}
.g-story-label {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.g-story.is-live .g-story-label::before {
  content: 'LIVE ';
  color: #ff6b61;
  font-weight: 800;
  font-size: 10px;
}

/* ---------- composer: "What are you putting off?" ---------- */
#sc-today .g-fill {
  display: block;
  margin-top: 0;
  margin-bottom: 18px;
}
#sc-today .g-compose {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#sc-today .g-compose::before,
#sc-today .g-compose::after {
  display: none;
}
#sc-today .g-compose .g-avatar {
  width: 40px !important;
  height: 40px !important;
}
#sc-today .g-compose .g-fill-line {
  flex: 1;
  min-width: 0;
  max-width: none !important;
  margin: 0;
}
#sc-today .g-compose .g-fill-input {
  font-size: 15px;
}

/* ---------- the feed: posts, not boxes ---------- */
#sc-today .g-fd-heading,
#sc-friends .g-fd-heading {
  display: none;
}
#sc-today .g-feed {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#sc-today .g-fd-grid,
#sc-friends .g-fd-grid {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  columns: auto !important;
  max-width: var(--col, 600px);
  margin: 0 auto;
}
#sc-today .g-fd,
#sc-friends .g-fd {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  padding: 4px 0 22px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#sc-today .g-fd + .g-fd,
#sc-friends .g-fd + .g-fd {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* order, top to bottom: tag, who, the picture, actions, caption, details */
.g-fd > .g-fd-tag {
  order: 0;
}
.g-fd > .g-fd-head {
  order: 1;
}
.g-fd > .g-fd-art,
.g-fd > .g-fd-proof,
.g-fd > .g-fd-big {
  order: 2;
}
.g-fd > .g-fd-thumbs {
  order: 3;
}
.g-fd > .g-fd-acts {
  order: 4;
}
.g-fd > .g-fd-title,
.g-fd > .g-fd-dare-row {
  order: 5;
}
.g-fd > .g-fd-meta {
  order: 6;
}

#sc-today .g-fd-head,
#sc-friends .g-fd-head {
  padding: 0 6px;
}
#sc-today .g-fd-who b,
#sc-friends .g-fd-who b {
  font-size: 14.5px;
}
#sc-today .g-fd-who small,
#sc-friends .g-fd-who small {
  font-size: 12.5px;
}

/* the picture: full column width, 4:5 like a post */
#sc-today .g-fd-big,
#sc-today .g-fd-proof,
#sc-today .g-fd-art,
#sc-friends .g-fd-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 70vh;
  margin: 12px 0 0;
  border-radius: 16px;
  overflow: hidden;
}
#sc-today .g-fd-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#sc-today .g-fd-big .g-fill-media {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* a post with no photo: the task itself, big, on its own glass */
.g-fd-art {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* (colour now comes from the aurora below) */
/* (colour now comes from the aurora below) */
/* (colour now comes from the aurora below) */
.g-fd-art-title {
  font: 800 clamp(30px, 7vw, 44px) / 1.02 var(--font-display);
  letter-spacing: -0.03em;
  color: #fff;
  overflow-wrap: anywhere;
}
.g-fd-art-line {
  font: 800 20px/1 var(--font-display);
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}
.g-fd-art.is-live .g-fd-art-line {
  color: #fff;
}
.g-fd-live.is-close .g-fd-art-line {
  color: #ff6b61;
}
.g-fd-art.is-gone .g-fd-art-line {
  color: #ff6b61;
}
.g-fd-art.is-done .g-fd-art-line,
.g-fd-art.is-mine .g-fd-art-line {
  color: var(--sage);
}
.g-fd-art-treats {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 800 14px/1 var(--font-display);
}
.g-fd-art .g-fd-bar {
  margin: 4px 0 0;
}
/* the art shows the title already; the caption doesn't repeat it */
.g-fd:has(> .g-fd-art) > .g-fd-title {
  display: none;
}

/* treats unlocked: a row of squares under the picture */
#sc-today .g-fd-thumbs,
#sc-friends .g-fd-thumbs {
  margin: 8px 0 0;
}

/* actions: a row of plain buttons under the picture, like ♡ 💬 ➤ */
#sc-today .g-fd-acts,
#sc-friends .g-fd-acts {
  margin: 10px 0 0;
  padding: 0 2px;
  gap: 4px;
}
#sc-today .g-fd-btn,
#sc-friends .g-fd-btn {
  min-height: 36px;
  padding: 0 10px 0 6px;
  border-radius: 10px;
  color: var(--ink);
  background: none !important;
  box-shadow: none !important;
  font-weight: 700;
  font-size: 14px;
}
#sc-today .g-fd-btn .gi,
#sc-friends .g-fd-btn .gi {
  width: 22px;
  height: 22px;
}
#sc-today .g-fd-btn:hover,
#sc-friends .g-fd-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
#sc-today .g-fd-btn.is-added,
#sc-friends .g-fd-btn.is-added {
  color: var(--sage);
}

/* caption */
#sc-today .g-fd-title,
#sc-friends .g-fd-title {
  margin: 6px 6px 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
#sc-today .g-fd-meta,
#sc-friends .g-fd-meta {
  margin: 4px 6px 0;
  font-size: 14px;
}
#sc-today .g-fd-tag,
#sc-friends .g-fd-tag {
  margin: 0 6px 8px;
}

/* suggestions, dares, people to add: short posts, no picture */
#sc-today .g-fd-sugg,
#sc-today .g-fd-nudge,
#sc-friends .g-fd-sugg,
#sc-friends .g-fd-nudge {
  background: none !important;
  border: 0 !important;
}
#sc-today .g-fd-sugg .g-fd-title,
#sc-friends .g-fd-sugg .g-fd-title,
#sc-today .g-fd-nudge .g-fd-title,
#sc-friends .g-fd-nudge .g-fd-title {
  font-size: 22px;
  letter-spacing: -0.015em;
}
#sc-today .g-fd-sugg > .g-fd-acts,
#sc-today .g-fd-nudge > .g-fd-acts,
#sc-friends .g-fd-sugg > .g-fd-acts,
#sc-friends .g-fd-nudge > .g-fd-acts {
  order: 7;
}
#sc-today .g-fd-sugg .g-fd-btn.is-main,
#sc-today .g-fd-nudge .g-fd-btn.is-main,
#sc-friends .g-fd-sugg .g-fd-btn.is-main,
#sc-friends .g-fd-nudge .g-fd-btn.is-main {
  padding: 0 16px 0 12px;
  border-radius: 999px;
  color: #000;
  background: #fff !important;
}
#sc-today .g-fd-sugg .g-fd-btn.is-main.is-added,
#sc-friends .g-fd-sugg .g-fd-btn.is-main.is-added {
  color: #000;
  background: var(--sage) !important;
}

/* the treats behind a post's title: scattered like on the task's own card */
.g-fd-art-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.g-fd-art-bg::after {
  /* keeps the title readable over the treats */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.72) 100%);
}
.g-fd-art-tr {
  position: absolute;
  width: 34%;
  aspect-ratio: 1 / 1;
  height: auto !important;
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.g-fd-art-tr img,
.g-fd-art-tr video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-fd-art-tr .g-fill-note {
  font-size: 15px;
}
/* sealed: you can tell there's something, not what */
.g-fd-art.is-live .g-fd-art-bg,
.g-fd-art.is-gone .g-fd-art-bg {
  filter: blur(var(--blur-treats, 14px)) saturate(1.3);
  transform: scale(1.06);
}
.g-fd-art.is-gone .g-fd-art-bg {
  filter: blur(var(--blur-treats, 14px)) grayscale(0.85) brightness(0.6);
}
.g-fd-art-title,
.g-fd-art-line,
.g-fd-art .g-fd-bar {
  position: relative;
  z-index: 1;
}
.g-fd-art-treats {
  z-index: 1;
}

/* ===================== living glass: every post picture =====================
 * Colour that drifts, a sheen that sweeps across the first time it's seen, a
 * highlight that follows your finger, and a gentle tilt. Only while on screen
 * (.is-on, set by js); still for reduced motion. */
.g-fd-art {
  --a1: #b9a7f5;
  --a2: #8ec9f2;
  --rx: 0deg;
  --ry: 0deg;
  --mx: 30%;
  --my: 20%;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1),
    box-shadow 0.35s;
  will-change: transform;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.34),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 60px rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.g-fd-art.is-live {
  --a1: #4da3ff;
  --a2: #f2a7c3;
}
.g-fd-art.is-done,
.g-fd-art.is-mine {
  --a1: #8fd8b0;
  --a2: #edcf8e;
}
.g-fd-art.is-gone {
  --a1: #ff453a;
  --a2: #b9a7f5;
}
/* the aurora: two big soft lights in the card's colours, slowly moving */
.g-fd-art::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 25% 30%, color-mix(in srgb, var(--a1) 75%, transparent), transparent 70%),
    radial-gradient(34% 30% at 75% 65%, color-mix(in srgb, var(--a2) 65%, transparent), transparent 70%),
    radial-gradient(30% 26% at 60% 15%, color-mix(in srgb, var(--a2) 35%, transparent), transparent 70%),
    #07070a;
  filter: blur(18px) saturate(1.25);
  opacity: 0.85;
  animation: g-aurora 16s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.g-fd-art.is-gone::before {
  opacity: 0.45;
}
.g-fd-art.is-on::before {
  animation-play-state: running;
}
@keyframes g-aurora {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(6%, -4%) rotate(14deg) scale(1.08);
  }
  100% {
    transform: translate(-5%, 5%) rotate(-10deg) scale(1.02);
  }
}
/* the light on the glass, where your finger or pointer is */
.g-fd-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(45% 40% at var(--mx) var(--my), rgba(255, 255, 255, 0.16), transparent 70%);
  mix-blend-mode: screen;
  transition: background-position 0.2s;
}
/* the sheen: one bright band, swept across the first time it comes on screen */
.g-fd-art-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.g-fd-art-sheen::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.28) 55%, transparent);
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
}
.g-fd-art.is-seen .g-fd-art-sheen::before {
  animation: g-sheen 1.3s cubic-bezier(0.3, 0.6, 0.2, 1) 0.15s 1 both;
}
@keyframes g-sheen {
  0% {
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(420%);
  }
}
/* press: the glass gives a little */
.g-fd-art:active {
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) scale(0.985);
}

/* the big icon: what the suggestion is about, floating, glowing */
.g-fd-art-icon {
  position: absolute;
  z-index: 1;
  top: 26px;
  right: 26px;
  width: 34%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 34%;
  color: #fff;
  background:
    radial-gradient(80% 70% at 30% 20%, rgba(255, 255, 255, 0.34), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--a1) 55%, transparent), color-mix(in srgb, var(--a2) 30%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  backdrop-filter: blur(16px) saturate(200%);
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.12),
    0 20px 50px color-mix(in srgb, var(--a1) 40%, transparent);
  animation: g-float 6s ease-in-out infinite;
  animation-play-state: paused;
}
.g-fd-art.is-on .g-fd-art-icon {
  animation-play-state: running;
}
.g-fd-art-icon .gi {
  width: 52%;
  height: 52%;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--a2) 80%, transparent));
}
@keyframes g-float {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}
.g-fd-art-why {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35);
  font: 700 13px/1 var(--font);
}
.g-fd-art > .g-avatar {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.5);
}

/* suggestions: shorter than a post, louder colour, the title huge */
#sc-today .g-fd-art.is-sugg,
#sc-friends .g-fd-art.is-sugg {
  aspect-ratio: 5 / 4;
  background: none;
}
.g-fd-art.is-sugg::before {
  opacity: 1;
  filter: blur(14px) saturate(1.45);
}
.g-fd-art.is-sugg .g-fd-art-title {
  max-width: 85%;
  font-size: clamp(32px, 8vw, 50px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.g-fd-art.is-sugg .g-fd-art-line {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
}
.g-fd-sugg.is-added .g-fd-art {
  box-shadow:
    inset 0 0 0 2px var(--sage),
    0 0 40px color-mix(in srgb, var(--sage) 40%, transparent);
}

/* running out: the glass glows red and breathes */
.g-fd-live.is-close .g-fd-art {
  animation: g-urgent 1.6s ease-in-out infinite;
}
@keyframes g-urgent {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 69, 58, 0.55),
      0 0 0 rgba(255, 69, 58, 0),
      0 24px 60px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      inset 0 0 0 1.5px rgba(255, 69, 58, 0.9),
      0 0 46px rgba(255, 69, 58, 0.45),
      0 24px 60px rgba(0, 0, 0, 0.55);
  }
}
.g-fd-art-line {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* buttons under posts: clear glass, never a filled pastel */
#sc-today .g-fd-sugg .g-fd-btn.is-main,
#sc-today .g-fd-nudge .g-fd-btn.is-main,
#sc-friends .g-fd-sugg .g-fd-btn.is-main,
#sc-friends .g-fd-nudge .g-fd-btn.is-main {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)) !important;
  -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.4),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08) !important;
}
#sc-today .g-fd-sugg .g-fd-btn.is-main.is-added,
#sc-friends .g-fd-sugg .g-fd-btn.is-main.is-added {
  color: var(--sage);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 60%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .g-fd-art,
  .g-fd-art::before,
  .g-fd-art-icon,
  .g-fd-art-sheen::before,
  .g-fd-live.is-close .g-fd-art {
    animation: none !important;
    transform: none !important;
  }
}

/* a phone: the icon sits a little lower and smaller, clear of the label */
@media (max-width: 559px) {
  .g-fd-art-icon {
    top: 64px;
    right: 20px;
    width: 30%;
  }
  .g-fd-art-why {
    top: 20px;
    left: 20px;
  }
}

/* ===================== sizes: a picture only as big as what's in it =====================
 * Treats or a photo inside: a proper picture. Nothing inside: a short banner
 * with the title, not a big empty square. */
#sc-today .g-fd-art.is-bare,
#sc-friends .g-fd-art.is-bare,
#sc-today .g-fd-art.is-sugg,
#sc-friends .g-fd-art.is-sugg {
  aspect-ratio: auto;
  min-height: 0;
  height: auto;
  padding-top: 64px;
}
#sc-today .g-fd-art.is-some,
#sc-friends .g-fd-art.is-some {
  aspect-ratio: 16 / 9;
}
#sc-today .g-fd-art.is-full,
#sc-friends .g-fd-art.is-full {
  aspect-ratio: 4 / 3;
}
.g-fd-art.is-bare .g-fd-art-title,
.g-fd-art.is-sugg .g-fd-art-title {
  font-size: clamp(26px, 5.5vw, 34px) !important;
  max-width: 70%;
}
.g-fd-art.is-sugg .g-fd-art-icon {
  top: 50%;
  right: 22px;
  width: 92px;
  max-width: none;
  transform: translateY(-50%);
  animation-name: g-float-mid;
}
@keyframes g-float-mid {
  0%,
  100% {
    transform: translateY(-50%) rotate(-4deg);
  }
  50% {
    transform: translateY(calc(-50% - 8px)) rotate(3deg);
  }
}
.g-fd-art.is-sugg > .g-avatar {
  right: auto;
  left: auto;
  top: 18px;
  right: 22px;
  bottom: auto;
  width: 30px !important;
  height: 30px !important;
}
.g-fd-art.is-sugg .g-fd-art-why {
  top: 18px;
  left: 22px;
}
@media (max-width: 559px) {
  .g-fd-art.is-sugg .g-fd-art-icon {
    top: 50%;
    width: 72px;
  }
}

/* ===================== dares: clearly yours to send, not yours to do ===================== */
.g-fd-tag.is-dare {
  color: #ffb547;
}
.g-fd-art.is-dare {
  aspect-ratio: auto !important;
  padding: 26px 26px 24px 112px;
  min-height: 150px;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 181, 71, 0.07) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 181, 71, 0.5),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.3),
    0 20px 50px rgba(0, 0, 0, 0.5);
}
.g-fd-art.is-dare::before {
  opacity: 0.55;
}
.g-fd-art.is-dare .g-fd-art-title {
  font-size: clamp(22px, 4.8vw, 30px) !important;
  font-style: italic;
  max-width: none;
}
.g-fd-art.is-dare .g-fd-art-line {
  font-size: 15px;
  color: #ffcf85;
}
.g-fd-art.is-dare .g-fd-dare-face {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 50%;
  width: 64px !important;
  height: 64px !important;
  font-size: 24px;
  transform: translateY(-50%);
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px #ffb547;
}
.g-fd-art-why.is-dare {
  top: auto;
  bottom: 14px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
  background: #ffb547;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.g-fd-art-why.is-dare .gi {
  width: 11px;
  height: 11px;
}
@media (max-width: 559px) {
  .g-fd-art.is-dare {
    padding-left: 100px;
  }
}

/* ===================== Friends: the same single column ===================== */
#s-friends {
  --col: 600px;
}
#sc-friends > * {
  width: 100%;
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}
#sc-friends .g-list {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}
#sc-friends .g-list > * {
  width: 100%;
}
@media (min-width: 760px) {
  #sc-friends .wob .gcard {
    height: 220px;
  }
}

/* an opened treat, big: drawings and notes shown whole, not cropped */
#sc-today .g-fd-big {
  aspect-ratio: 1 / 1;
}
#sc-today .g-fd-big .g-fill-media.is-drawing img,
#sc-today .g-fd-big .g-fill-media.is-doodle img {
  object-fit: contain;
  padding: 8%;
}

/* ===================== wide screens: Instagram's layout, Instagram's sizes =====================
 * Measured off instagram.com on the same screen: stories 910px wide starting
 * ~63px from the left bar, 130px circles; posts 702px, centred under the
 * stories; the side column 430px, 139px to their right: you, "Suggested for
 * you · See all", 66px faces with a blue "Add"; a small footer. No page title:
 * the stories are at the top. Smaller windows get the same, scaled down. */
@media (min-width: 1240px) {
  #g-app[data-tab='today'],
  #g-app[data-tab='friends'] {
    --panel: 0px;
    --lane: 700px;
    --post: 560px;
    --lgap: 32px;
    --sgap: 60px;
    --side: 320px;
    --story: 66px;
    --story-font: 12px;
    --face: 52px;
    --pname: 16px;
    --psub: 14px;
  }
  #g-app[data-tab='today'] #sc-today,
  #g-app[data-tab='friends'] #sc-friends {
    padding: 32px 0 90px;
  }
  #g-app[data-tab='today'] #sc-today > *,
  #g-app[data-tab='friends'] #sc-friends > * {
    width: var(--post);
    max-width: var(--post);
    margin-left: calc(var(--lgap) + (var(--lane) - var(--post)) / 2);
    margin-right: 0;
  }
  #g-app[data-tab='today'] #sc-today > .g-stories-wrap {
    width: var(--lane);
    max-width: var(--lane);
    margin-left: var(--lgap);
  }
  #g-app[data-tab='today'] #sc-today .g-stories-wrap > .g-stories {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-bottom: 28px;
    padding: 0 0 6px;
    gap: calc(var(--story) / 5);
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* no page title on the web: the stories are the top of the page */
  #g-app[data-tab='today'] #sc-today > .g-head {
    display: none;
  }
  #g-app[data-tab='today'] .g-story {
    width: calc(var(--story) + 6px);
    gap: 8px;
  }
  #g-app[data-tab='today'] .g-story-ring {
    width: var(--story);
    height: var(--story);
  }
  #g-app[data-tab='today'] .g-story-ring::before {
    -webkit-mask: radial-gradient(circle, transparent calc(var(--story) / 2 - 4.5px), #000 calc(var(--story) / 2 - 4px));
    mask: radial-gradient(circle, transparent calc(var(--story) / 2 - 4.5px), #000 calc(var(--story) / 2 - 4px));
  }
  #g-app[data-tab='today'] .g-story .g-avatar,
  #g-app[data-tab='today'] .g-story-time {
    width: calc(var(--story) - 12px) !important;
    height: calc(var(--story) - 12px) !important;
    font-size: calc(var(--story) / 3);
  }
  #g-app[data-tab='today'] .g-story-time {
    font-size: calc(var(--story) / 5);
  }
  #g-app[data-tab='today'] .g-story-plus {
    width: calc(var(--story) / 4);
    height: calc(var(--story) / 4);
  }
  #g-app[data-tab='today'] .g-story-label {
    font-size: var(--story-font);
    font-weight: 500;
    color: var(--ink);
  }

  /* posts: Instagram's header */
  #g-app .g-fd-head .g-avatar {
    width: var(--face) !important;
    height: var(--face) !important;
    font-size: calc(var(--face) / 2.6);
  }
  #g-app .g-fd-head {
    gap: 14px;
  }
  #g-app #sc-today .g-fd-who b,
  #g-app #sc-friends .g-fd-who b {
    font-size: var(--pname);
  }
  #g-app #sc-today .g-fd-who small,
  #g-app #sc-friends .g-fd-who small {
    font-size: var(--psub);
  }
  #g-app #sc-today .g-fd + .g-fd,
  #g-app #sc-friends .g-fd + .g-fd {
    padding-top: 28px;
  }
  #g-app #sc-today .g-fd,
  #g-app #sc-friends .g-fd {
    padding-bottom: 28px;
  }
  #g-app #sc-today .g-fd-art,
  #g-app #sc-today .g-fd-big,
  #g-app #sc-today .g-fd-proof {
    margin-top: 16px;
    border-radius: 8px;
  }

  /* the side column */
  #g-app[data-tab='today'] .g-aside,
  #g-app[data-tab='friends'] .g-aside {
    width: var(--side);
    right: auto;
    left: calc(var(--rail) + var(--lgap) + var(--lane) + var(--sgap));
    padding: 34px 0 30px;
    border-left: 0;
    background: transparent;
  }
  .g-aside .g-pn-me,
  .g-aside .g-pn-person {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .g-aside .g-pn-me {
    margin: 0 0 30px;
  }
  .g-aside .g-pn-me .g-avatar,
  .g-aside .g-pn-person .g-avatar {
    width: var(--face) !important;
    height: var(--face) !important;
    font-size: calc(var(--face) / 2.6);
  }
  .g-aside .g-pn-me .g-avatar {
    width: calc(var(--face) * 1.27) !important;
    height: calc(var(--face) * 1.27) !important;
  }
  .g-aside .g-pn-who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .g-aside .g-pn-who strong {
    font-size: var(--pname);
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .g-aside .g-pn-who small {
    font-size: var(--psub);
    color: var(--ink-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .g-aside .g-pn-link,
  .g-aside .g-pn-add.g-pn-link {
    flex: none;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: #8c8cff;
    font: 700 var(--psub) / 1 var(--font);
    cursor: pointer;
  }
  .g-aside .g-pn-link:hover {
    color: #fff;
  }
  .g-aside .g-pn-add.g-pn-link.is-added {
    color: var(--ink-3);
  }
  .g-aside .g-pn-head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
    font-size: var(--pname);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
  }
  .g-aside .g-pn-all {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font: 700 var(--psub) / 1 var(--font);
    cursor: pointer;
  }
  .g-aside .g-pn-person {
    padding: 9px 0;
  }
  .g-aside .g-pn-foot {
    margin-top: 34px;
    color: var(--ink-3);
    font-size: calc(var(--psub) - 1px);
    line-height: 1.8;
  }
  .g-aside .g-pn-foot a {
    color: var(--ink-3);
    text-decoration: none;
  }
  .g-aside .g-pn-foot a:hover {
    text-decoration: underline;
  }

  /* the bell in the left bar, like Instagram's heart */
  #rail .g-rail-bell {
    display: flex;
  }
  #g-app[data-tab='today'] #sc-today .g-head .g-bell {
    display: none;
  }
}
@media (min-width: 1440px) {
  #g-app[data-tab='today'],
  #g-app[data-tab='friends'] {
    --lane: 800px;
    --post: 620px;
    --lgap: 48px;
    --sgap: 100px;
    --side: 380px;
    --story: 72px;
    --story-font: 12.5px;
    --face: 58px;
    --pname: 18px;
    --psub: 15.5px;
  }
}
@media (min-width: 1680px) {
  #g-app[data-tab='today'],
  #g-app[data-tab='friends'] {
    --lane: 910px;
    --post: 702px;
    --lgap: 63px;
    --sgap: 139px;
    --side: 430px;
    --story: 78px;
    --story-font: 13px;
    --face: 66px;
    --pname: 20px;
    --psub: 17px;
  }
}
/* below the wide layout the left-bar bell isn't needed: the page has its own */
.g-rail .g-rail-bell {
  display: none;
}

/* ===================== wide screens: no fades, a real input, no doubled suggestions ===================== */
@media (min-width: 1240px) {
  /* the stories row ends cleanly (a glass arrow scrolls it, like Instagram's) */
  #g-app[data-tab='today'] #sc-today > .g-stories-wrap {
    position: relative;
  }
  /* the box you type tasks into: Instagram-sized, not a footnote */
  #g-app[data-tab='today'] #sc-today .g-compose {
    gap: 16px;
    padding: 0;
  }
  #g-app[data-tab='today'] #sc-today .g-compose .g-avatar {
    width: var(--face) !important;
    height: var(--face) !important;
    font-size: calc(var(--face) / 2.6);
  }
  #g-app[data-tab='today'] #sc-today .g-compose .g-fill-line {
    min-height: calc(var(--face) + 4px);
    padding-left: 22px;
    border-radius: 999px;
  }
  #g-app[data-tab='today'] #sc-today .g-compose .g-fill-input {
    font-size: var(--pname);
    font-weight: 500;
  }
  #g-app[data-tab='today'] #sc-today .g-compose .g-fill-go {
    width: calc(var(--face) - 8px);
    height: calc(var(--face) - 8px);
  }
  #g-app[data-tab='today'] #sc-today > .g-fill {
    margin-bottom: 34px;
  }
  /* Friends: the side column already lists people you may know */
  #g-app[data-tab='friends'] #sc-friends .g-pymk-label,
  #g-app[data-tab='friends'] #sc-friends .g-pymk-list {
    display: none;
  }
}
.g-stories-next {
  position: absolute;
  z-index: 2;
  top: calc(var(--story, 70px) / 2 - 16px);
  right: 6px;
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #000;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.g-stories-prev {
  left: 6px;
  right: auto;
}
@media (min-width: 760px) {
  .g-stories-next.is-on {
    display: grid;
  }
}

.g-stories-wrap {
  position: relative;
}

/* ===================== stories: whole circles only =====================
 * The gap is worked out so an exact number of circles fills the row (like
 * Instagram's 6 in 910px), so the last one you see is never cut in half;
 * the rest are a swipe or an arrow away. */
.g-stories {
  --per: 4;
  --sw: 74px;
  padding-left: 0;
  padding-right: 0;
  gap: max(8px, calc((100% - var(--per) * var(--sw)) / (var(--per) - 1)));
}
.g-story {
  width: var(--sw);
}
@media (min-width: 480px) {
  .g-stories {
    --per: 5;
  }
}
@media (min-width: 760px) {
  .g-stories {
    --per: 6;
  }
}
@media (min-width: 1240px) {
  #g-app[data-tab='today'] #sc-today .g-stories-wrap > .g-stories {
    --per: 6;
    --sw: var(--story);
    gap: calc((100% - 6 * var(--story)) / 5);
    padding: 0 0 6px;
  }
  #g-app[data-tab='today'] .g-story {
    width: var(--story);
  }
}

/* Today: suggested cards are as wide as your tasks (702 on a laptop);
 * everything else in the feed keeps its size */
#sc-today .g-fd-grid {
  max-width: none !important;
  width: 100%;
}
#sc-today .g-fd-grid > :not(.g-fd-sugg) {
  width: 100%;
  max-width: var(--col, 600px);
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  align-self: center;
}

/* the left bar: bigger icons, same bar (still 84px, nothing else moves) */
@media (min-width: 760px) {
  .g-rail {
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
  }
  .g-rail button,
  #rail .g-rail-bell {
    height: 62px;
    padding: 0 15px;
    border-radius: 18px;
  }
  .g-rail button .gi,
  #rail .g-rail-bell .gi {
    width: 34px !important;
    height: 34px !important;
  }
  .g-rail-logo {
    padding-left: 13px;
  }
  .g-rail-logo .gi {
    width: 38px !important;
    height: 38px !important;
  }
  .g-rail-me .g-avatar {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Today on the web: your tasks, the line you type into and everything else in
 * the column are as wide as the stories row above them (feed posts keep theirs) */
@media (min-width: 1240px) {
  #g-app[data-tab='today'] #sc-today > * {
    width: var(--lane);
    max-width: var(--lane);
    margin-left: var(--lgap);
  }
}

/* ===================== phones: no "people you may know", a row that flies ===================== */
@media (max-width: 1239px) {
  .g-pymk-label,
  .g-pymk-list,
  .g-fd-person {
    display: none !important;
  }
}
/* the stories row: swipe it like Instagram's, momentum and all, no fade */
.g-stories {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  -webkit-mask-image: none;
  mask-image: none;
}
.g-story {
  scroll-snap-align: start;
}
/* the page itself: native momentum, no rubber-band fighting the tab bar */
.g-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ---------- phone Today: one 16px rhythm down the top of the page ----------
 * The streak and bell sit level with the Treatly name, the date sits under
 * it, and the faces, "tasks set for you", the task box and the cards are all
 * 16px apart. Your own face is the same size as everyone else's ring. */
@media (max-width: 759px) {
  #s-today .g-head--row > .g-head-actions {
    align-self: flex-start;
    height: 44px;
    margin-top: 0;
  }
  #s-today .g-stories {
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 4px;
  }
  #s-today .g-requests,
  #s-today .g-fill {
    margin-bottom: 16px;
  }
  #s-today .g-list {
    gap: 16px;
  }
  #s-today .g-story.is-new .g-avatar {
    width: 70px !important;
    height: 70px !important;
  }
}

/* ---------- suggestions and dares: the same shape as your own cards ----------
 * One card each, as tall and as round as a task card, 16px apart, no label
 * line above and no button row below: the add / send button sits where your
 * tick would, and a small cross skips it. */
:is(#sc-today, #sc-friends) .g-fd.g-fd-sugg {
  padding: 0 !important;
  border-top: 0 !important;
}
:is(#sc-today, #sc-friends) .g-fd + .g-fd.g-fd-sugg,
:is(#sc-today, #sc-friends) .g-fd.g-fd-sugg + .g-fd {
  margin-top: 16px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art {
  aspect-ratio: auto !important;
  max-height: none;
  height: auto;
  min-height: 158px;
  margin: 0;
  padding: 20px 76px 20px 22px;
  justify-content: center;
  gap: 6px;
  border-radius: var(--r-card);
  cursor: pointer;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-title {
  font-size: 26px;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-line {
  font-size: 15px;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon {
  display: none;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-why {
  position: static;
  align-self: flex-start;
  margin-top: 4px;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare {
  padding-left: 100px;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare .g-fd-dare-face {
  left: 20px;
}
:is(#sc-today, #sc-friends) .g-fd-art-why.is-dare {
  left: 26px;
  bottom: 12px;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare .g-fd-art-line {
  font-size: 13.5px;
  line-height: 1.3;
}
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-go {
  position: absolute;
  z-index: 3;
  right: 16px;
  top: 50%;
  width: 48px;
  min-height: 0;
  height: 48px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  color: #000 !important;
  background: #fff !important;
  transform: translateY(-50%);
}
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-go.is-added {
  background: var(--sage) !important;
}
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-go .gi {
  width: 20px;
  height: 20px;
}
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-skip {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 30px;
  min-height: 0;
  height: 30px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.55);
}
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-skip .gi {
  width: 14px;
  height: 14px;
}
:is(#sc-today, #sc-friends) :is(.g-fd-card-go, .g-fd-card-skip) span {
  display: none;
}
/* every post's picture is a task-card shape too, not a big square */
:is(#sc-today, #sc-friends) .g-fd:not(.g-fd-sugg) > .g-fd-art {
  aspect-ratio: auto !important;
  max-height: none;
  min-height: 158px;
  padding: 22px;
  border-radius: var(--r-card);
}
:is(#sc-today, #sc-friends) .g-fd:not(.g-fd-sugg) > .g-fd-art .g-fd-art-title {
  font-size: 26px;
}
:is(#sc-today, #sc-friends) .g-fd:not(.g-fd-sugg) > .g-fd-art .g-fd-art-line {
  font-size: 16px;
}
.g-fd-art.is-tap {
  cursor: pointer;
}
/* one task, one post: who, the card, a row of actions. The treat count is
   already on the card, so no extra line under it, and no rule between posts */
:is(#sc-today, #sc-friends) .g-fd:is(.g-fd-live, .g-fd-done, .g-fd-mem, .g-fd-gone) > .g-fd-meta {
  display: none;
}
:is(#sc-today, #sc-friends) .g-fd {
  padding-bottom: 0 !important;
}
:is(#sc-today, #sc-friends) .g-fd + .g-fd {
  margin-top: 20px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
:is(#sc-today, #sc-friends) .g-fd + .g-fd.g-fd-sugg,
:is(#sc-today, #sc-friends) .g-fd.g-fd-sugg + .g-fd.g-fd-sugg {
  margin-top: 16px !important;
}
:is(#sc-today, #sc-friends) .g-fd-art + .g-fd-acts,
:is(#sc-today, #sc-friends) .g-fd > .g-fd-acts {
  margin-top: 6px;
}
/* posts off screen aren't drawn; the feed ends with a full stop */
:is(#sc-today, #sc-friends) .g-fd {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.g-fd-end {
  height: auto;
  min-height: 1px;
}
.g-fd-fin {
  margin: 24px 0 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
}
/* nothing on from friends: a short note, then straight into the dares */
#sc-friends .g-pymk {
  margin-top: 0;
  gap: 16px;
}
#sc-friends .g-pymk-head {
  padding: 4px 12px 0;
}
#sc-friends .g-pymk-head .gi {
  display: none;
}
#sc-friends #feed-friends {
  margin-top: 16px;
}
#sc-friends .g-pymk-acts {
  margin-top: 0;
}

/* round corners that stay round on iPhones: Safari lets blurred, tilted
   children paint past overflow:hidden + border-radius, so clip explicitly */
:is(#sc-today, #sc-friends) .g-fd-art {
  clip-path: inset(0 round var(--r-card));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

/* ===================== suggested cards: glass, like your task cards ============== * See-through instead of a painted panel: a light rim along the top, a soft
 * sheen, the card's two colours glowing faintly behind frosted glass, and a
 * tilted glass tile with what kind of thing it is. */
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.5) !important;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare)::before {
  background:
    radial-gradient(34% 40% at 18% 70%, color-mix(in srgb, var(--a1) 70%, transparent), transparent 70%),
    radial-gradient(30% 36% at 82% 10%, color-mix(in srgb, var(--a2) 60%, transparent), transparent 70%) !important;
  filter: blur(34px) saturate(1.2);
  opacity: 0.55;
  mix-blend-mode: screen;
}
/* frost grain and a diagonal glare, over the colour, under the words */
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.015) 50%, transparent 58%),
    radial-gradient(120% 70% at 20% -10%, rgba(255, 255, 255, 0.1), transparent 55%);
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) > .g-fd-art-title,
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) > .g-fd-art-line,
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) > .g-fd-art-why {
  position: relative;
  z-index: 1;
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon {
  display: grid !important;
  place-items: center;
  position: absolute;
  z-index: 0;
  right: 78px;
  bottom: -38px;
  top: auto;
  left: auto;
  width: 132px;
  height: 132px;
  border-radius: 40px;
  transform: rotate(-12deg);
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  filter: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.35);
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon .gi {
  width: 74px !important;
  height: 74px !important;
  opacity: 0.55;
}

/* the add and send buttons on suggested and challenge cards: black glass, not white */
:is(#sc-today, #sc-friends) .g-fd-btn.g-fd-card-go:not(.is-added) {
  color: #fff !important;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(44, 44, 50, 0.92), rgba(12, 12, 14, 0.92)) !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 10px 24px rgba(0, 0, 0, 0.5) !important;
}
@media (max-width: 759px) {
  :is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon {
    right: -16px;
    bottom: -34px;
    width: 104px;
    height: 104px;
    border-radius: 30px;
  }
  :is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon .gi {
    width: 54px !important;
    height: 54px !important;
  }
}
:is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) > .g-fd-art-why {
  left: auto;
  top: auto;
}
@media (max-width: 759px) {
  :is(#sc-today, #sc-friends) .g-fd-sugg .g-fd-art:not(.is-dare) .g-fd-art-icon {
    display: none !important;
  }
}

/* Friends: one person, their tasks stacked under their name, then the next person */
#s-friends .g-list > .g-post + .g-post {
  margin-top: 28px !important;
}
#s-friends .g-list > .g-post + .g-post.is-more {
  margin-top: 10px !important;
}

/* ---------- phone Home header, like Instagram's ----------
 * Treatly (logo + name, a little smaller) top left with the date under it,
 * the streak and the bell on the right; a bit more room up top. */
@media (max-width: 759px) {
  #s-today .g-head.g-head--row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 10px;
    align-items: start;
    padding-top: 8px;
  }
  #s-today .g-head--row > :first-child {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #s-today .g-head--row > .g-head-actions {
    display: contents;
  }
  #s-today #today-streak {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
  }
  #s-today .g-head-actions > .g-btn {
    grid-column: 3;
    grid-row: 1;
  }
  #s-today .g-brand-head {
    gap: 7px;
  }
  #s-today .g-brand-head .gi {
    width: 28px;
    height: 28px;
  }
  /* still as tall as the logo's drawing */
  #s-today .g-brand-head .g-word {
    font-size: 31.5px;
  }
  #s-today .g-kicker {
    margin: 4px 0 0 2px;
    text-align: left;
  }
}

/* the streak: just the flame and the number, like the bell beside it, no pill */
.g-streak-chip {
  height: 44px;
  padding: 0 4px;
  gap: 2px;
  color: #fff;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font: 800 17px/1 var(--font-display);
}
.g-streak-chip .gi {
  width: 24px;
  height: 24px;
  color: #ffb547;
  filter: drop-shadow(0 0 6px rgba(255, 181, 71, 0.5));
}

/* ===================== challenge cards: glass too =====================
 * The same see-through glass as suggested cards (light rim on top, faint
 * glow of the friend's colour behind frost, a diagonal glare), not orange
 * stripes and an orange border. Their face keeps a thin white ring; the
 * 'Challenge' tag is a glass pill. */
:is(#sc-today, #sc-friends) .g-fd-art.is-dare {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.42),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.5) !important;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare::before {
  background:
    radial-gradient(36% 46% at 14% 55%, color-mix(in srgb, var(--a1) 70%, transparent), transparent 70%),
    radial-gradient(30% 36% at 86% 12%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 70%) !important;
  filter: blur(34px) saturate(1.2);
  opacity: 0.55 !important;
  mix-blend-mode: screen;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.015) 50%, transparent 58%),
    radial-gradient(120% 70% at 20% -10%, rgba(255, 255, 255, 0.1), transparent 55%);
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare > .g-fd-art-title,
:is(#sc-today, #sc-friends) .g-fd-art.is-dare > .g-fd-art-line {
  position: relative;
  z-index: 1;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare .g-fd-art-line {
  color: rgba(255, 255, 255, 0.7) !important;
}
:is(#sc-today, #sc-friends) .g-fd-art.is-dare .g-fd-dare-face {
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, 0.6),
    0 0 0 4.5px rgba(255, 255, 255, 0.85) !important;
}
:is(#sc-today, #sc-friends) .g-fd-art-why.is-dare {
  z-index: 2;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06)) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.45),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18) !important;
}

/* ---------- Friends: each person's tasks grouped on one glass panel ----------
 * Their name and photo on top, their cards inside 16px apart (the same gap as
 * your own cards on Home), then a clear gap before the next person. The panel
 * isn't positioned, so cards still measure from the scroller. */
#s-friends .g-list > .g-post-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 10px 10px;
  border-radius: calc(var(--r-card) + 10px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
#s-friends .g-list {
  gap: 20px !important;
}
#s-friends .g-list > .g-post-group + .g-post-group,
#s-friends .g-list > .g-post-group + .g-section,
#s-friends .g-list > .g-section + .g-post-group {
  margin-top: 0 !important;
}
#s-friends .g-post-group > .g-post + .g-post,
#s-friends .g-post-group > .g-post + .g-post.is-more {
  margin-top: 0 !important;
}
#s-friends .g-post-group .g-post-head {
  padding: 0 4px;
}

/* ---------- phones: every tab's header sits like Home's ----------
 * 8px more room on top, the title on the same 44px line as the round buttons,
 * and its letters as tall as the Treatly name on Home. */
@media (max-width: 759px) {
  :is(#s-friends, #s-calendar, #s-wallet) .g-head.g-head--row {
    align-items: flex-start;
    padding-top: 8px;
  }
  :is(#s-friends, #s-calendar, #s-wallet) .g-head.g-head--row h1 {
    height: 44px;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.03em;
  }
  #s-friends .g-head.g-head--row {
    padding-bottom: 10px;
  }
  #s-profile .g-profile {
    padding-top: 48px;
  }
}

/* suggested cards say so: a small glass 'Suggested' tag above the title */
.g-fd-sugg-tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}
.g-fd-sugg-tag .gi {
  width: 12px;
  height: 12px;
}

/* ---------- ideas with a shape: timers, habits, commitments, proof ----------
 * Each suggestion and challenge says what kind it is at a glance: a big
 * countdown for a timer, a week of dots and a rim for a habit, viewfinder
 * corners for photo proof. Small glass chips under the line, like your own
 * cards' pills. No colour beyond white on glass. */
.g-idea-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.g-idea-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: 13px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.g-idea-chip .gi {
  width: 13px;
  height: 13px;
  opacity: 0.9;
}
.g-idea-chip.is-strong {
  color: #000;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
}
.g-idea-chip.is-dare {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.g-idea-dots {
  gap: 3px;
  padding-left: 8px;
}
.g-idea-dots .gi {
  margin-right: 2px;
}
.g-idea-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.g-idea-dots i:first-of-type {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}
.g-idea-dots i {
  flex: none;
}
.g-idea-dots.is-strong i {
  background: rgba(0, 0, 0, 0.18);
}
.g-idea-dots.is-strong i:first-of-type {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #000;
}
.g-idea-dots span {
  margin-left: 3px;
}

/* a timer: the countdown, big, like a running timer card */
.g-idea-clock {
  position: relative;
  z-index: 2;
  display: block;
  margin: -2px 0 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
}
.g-fd-art.is-dare .g-idea-clock {
  font-size: 30px;
}
/* a ring round the clock card, slowly drawing itself */
@property --g-idea-p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.g-idea-ring {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.75) var(--g-idea-p), rgba(255, 255, 255, 0.06) 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.g-fd-art.is-on .g-idea-ring {
  animation: gIdeaRing 6s linear infinite;
}
@keyframes gIdeaRing {
  to {
    --g-idea-p: 100%;
  }
}

/* a habit or commitment: a lit rim down the left, like your own runs */
.g-idea-bar {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.25));
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* photo proof: viewfinder corners on the glass */
.g-idea-finder {
  position: absolute;
  z-index: 1;
  inset: 14px 14px 14px auto;
  width: 112px;
  pointer-events: none;
  opacity: 0.32;
}
.g-fd-art:not(.is-dare) .g-idea-finder {
  right: 74px;
  inset-block: 22px;
  width: 92px;
}
.g-idea-finder i {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid #fff;
}
.g-idea-finder i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; border-top-left-radius: 6px; }
.g-idea-finder i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; border-top-right-radius: 6px; }
.g-idea-finder i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 6px; }
.g-idea-finder i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 6px; }
.g-fd-art.is-dare .g-idea-finder {
  display: none;
}

/* challenges: the chips sit under the words, not pinned under the face */
:is(#sc-today, #sc-friends) .g-fd-art.is-dare .g-idea-chips {
  margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .g-fd-art.is-on .g-idea-ring {
    animation: none;
    --g-idea-p: 30%;
  }
}

/* ===================== the idea chips ("7 days · locked in"): glass, not a white pill ===================== */
.g-idea-chip {
  height: 28px;
  padding: 0 12px 0 9px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(30, 30, 34, 0.72), rgba(8, 8, 10, 0.72));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
.g-idea-chip.is-strong {
  color: #fff;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(44, 44, 50, 0.9), rgba(10, 10, 12, 0.9));
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 18px rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.g-idea-chip.is-strong .gi {
  opacity: 1;
}
/* the week as seven glass beads: today's is lit, the rest wait */
.g-idea-dots i,
.g-idea-dots.is-strong i {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}
.g-idea-dots i:first-of-type,
.g-idea-dots.is-strong i:first-of-type {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.g-idea-dots span {
  margin-left: 5px;
  letter-spacing: 0.01em;
}

/* Friends: every card the same width, at full width. A friend's glass frame
 * reaches 10px past the column on each side, so the tasks inside it are as
 * wide as the challenge and suggested cards below. */
@media (max-width: 1239px) {
  #s-friends .g-list > .g-post-group {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Friends: challenge and suggested cards as wide as a friend's glass frame,
 * edge to edge with it, at every size */
#sc-friends .g-feed .g-fd-grid {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 1239px) {
  #sc-friends .g-feed .g-fd-grid {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
}
#sc-friends .g-feed .g-fd-grid > .g-fd {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* "challenge a friend": a glass face with a + where a person's face was */
.g-fd-dare-anyone {
  display: grid !important;
  place-items: center;
  color: #fff;
  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(12, 12, 14, 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 0 0 3px #000,
    0 0 0 4.5px rgba(255, 255, 255, 0.35) !important;
}
.g-fd-dare-anyone .gi {
  width: 28px;
  height: 28px;
}

/* challenge cards: no face on the left, so the words start at the edge like every card */
:is(#sc-today, #sc-friends) .g-fd-art.is-dare {
  padding-left: 22px !important;
}

/* people you may know: one card, a row each */
.g-fd-people .g-fd-people-row {
  order: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}
.g-fd-people .g-fd-people-row + .g-fd-people-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.g-fd-people-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-fd-people-who strong {
  font: 700 16px/1.2 var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-fd-people-who small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.g-fd-people .g-fd-btn {
  flex: none;
}