/* goodtings. for Meta Ray-Ban Display
   Additive display: black is see-through. Light only where it matters. */

@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("assets/fonts/figtree-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-display: swap; src: url("assets/fonts/figtree-latin-800-normal.woff2") format("woff2"); }

:root {
  --ink: #fff;
  --muted: rgba(255, 255, 255, .56);
  --faint: rgba(255, 255, 255, .24);
  --line: rgba(255, 255, 255, .16);
  --glass: rgba(255, 255, 255, .06);
  --green: #4AED80;
  --purple: #8B5CF6;
  --purple-light: #B79CFF;
  --heart: #FF5A6E;
  --r: 1rem;
  --gutter: 1.6rem;
}

* { box-sizing: border-box; }
html { font-size: clamp(14px, 3.4vmin, 28px); }  /* ≈20px on the 600 × 600 display */
html, body { inline-size: 100%; block-size: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* one scroller for the whole page */
.view {
  block-size: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.4rem var(--gutter) 2rem;
  scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }

:where(button, textarea):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- header ---------- */
.brand { display: grid; justify-items: center; gap: .45rem; margin-block-end: 1rem; }
.brand img { block-size: 1.9rem; display: block; }
.date {
  font-size: .58rem; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--muted); padding-inline-start: .34em;
}

.label-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-block-end: .6rem;
}
.label {
  font-size: .64rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .66);
}
.count { font-size: .7rem; font-weight: 800; color: rgba(255, 255, 255, .66); }
.count.full { color: var(--green); }

/* ---------- today's three ---------- */
.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.slot {
  aspect-ratio: 4 / 5;
  border-radius: var(--r);
  border: 0;
  background: transparent center / cover no-repeat;
  display: grid;
  place-items: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease;
}
.slot:focus-visible { transform: scale(1.04); }
.slot.photo:focus-visible, .slot.text:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.slot .plus { font-size: 2rem; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, .8); }
.slot.photo { border: 0; }
.slot.text {
  border: 1.5px solid rgba(74, 237, 128, .7);
  background-color: rgba(74, 237, 128, .12);
  place-items: start;
  padding: .65rem;
  text-align: start;
  font-size: .68rem; font-weight: 700; line-height: 1.25;
  overflow-wrap: anywhere;
}
.slot.big { box-shadow: inset 0 0 0 2px var(--purple); }
.slot.text.big { border-color: var(--purple); background-color: rgba(139, 92, 246, .2); box-shadow: none; }
.slot .badge {
  position: absolute; inset-inline-start: .45rem; inset-block-end: .45rem;
  font-size: .5rem; font-weight: 800; letter-spacing: .08em;
  padding: .18rem .45rem; border-radius: 99px;
  background: var(--purple); color: #fff;
}

/* ---------- the pulse (Threads-style frosted cards) ---------- */
.pulse { margin-block-start: 1.3rem; display: grid; gap: .85rem; }
.pulse .label-row { margin-block-end: 0; }

.post {
  /* whole card fits on the display: header + square photo + actions */
  inline-size: min(100%, calc(100vh - 8.4rem));
  justify-self: center;
  display: grid;
  gap: .55rem;
  padding: .8rem .85rem .7rem;
  text-align: start;
  content-visibility: auto;
  contain-intrinsic-size: auto 26rem;
}
.post.textonly { contain-intrinsic-size: auto 7rem; }
.post .media img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }

/* ---------- glass material (after Meta's default container material) ----------
   idle: soft fill + a radial glow stroke on the edge
   focus: radial light from the top, inner glow, slight lift                    */
.post, .reply, .pill-btn, .slot.empty {
  position: relative;
  border: 0;
  border-radius: 1.3rem;
  background-color: rgba(255, 255, 255, .085);
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}
.post::before, .reply::before, .pill-btn::before, .slot.empty::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(130% 90% at 30% 0%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .14) 55%, rgba(255, 255, 255, .32) 100%);
  -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: 1;
}
.post::after, .reply::after, .pill-btn::after, .slot.empty::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 0 1.4rem rgba(255, 255, 255, .16);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  z-index: -1;
}
.post:focus-visible, .reply:focus, .pill-btn:focus-visible, .slot.empty:focus-visible {
  outline: none;
  background-color: rgba(255, 255, 255, .13);
  transform: scale(1.025);
}
.post:focus-visible::after, .reply:focus::after, .pill-btn:focus-visible::after, .slot.empty:focus-visible::after { opacity: 1; }
.post:focus-visible::before, .reply:focus::before, .pill-btn:focus-visible::before, .slot.empty:focus-visible::before {
  background: radial-gradient(130% 90% at 30% 0%, #fff, rgba(255, 255, 255, .35) 55%, rgba(255, 255, 255, .6) 100%);
  padding: 2px;
}
/* never paint the page itself as selected */
html:focus, body:focus, .view:focus, .view:focus-visible { outline: none; }
.pair:focus, .hint:focus, .full:focus { outline: none; }

.who { display: flex; align-items: center; gap: .5rem; font-size: .74rem; min-inline-size: 0; }
.who b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .where { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.who .avatar {
  inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  font-size: .62rem; font-weight: 800; color: #000;
}
.post .cap {
  font-size: .86rem; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post.textonly .cap { -webkit-line-clamp: 4; font-size: .95rem; }
.post .media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: .9rem;
  background: #111 center / cover no-repeat;
}
.acts { display: flex; align-items: center; gap: 1.1rem; padding-inline-start: .1rem; }
.act { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 700; }
.act svg, .pill-btn svg { inline-size: 1.45rem; block-size: 1.45rem; fill: none; stroke: #fff; stroke-width: 2; }
.post.liked .act.like svg, .pill-btn.liked svg { fill: var(--heart); stroke: var(--heart); }
.post.liked .act.like { color: var(--heart); }

/* one post, opened */
.bar { display: flex; justify-content: center; gap: .7rem; margin-block-end: .9rem; }
.pill-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.15rem .6rem .9rem;
  font-size: .9rem; font-weight: 800;
}
.bar .pill-btn { border-radius: 99px; }
.pill-btn.liked { color: var(--heart); background-color: rgba(255, 90, 110, .16); }
@keyframes pop { 40% { transform: scale(1.35); } }
.pill-btn.pop svg { animation: pop .32s ease; }
.post.open { inline-size: min(100%, calc(100vh - 9rem)); margin-inline: auto; }
.post.open .cap { -webkit-line-clamp: unset; }
.replies-label { display: block; margin: 1rem auto .55rem; inline-size: min(100%, calc(100vh - 9rem)); }
.reply {
  display: grid; gap: .35rem;
  padding: .75rem .9rem;
  margin: 0 auto .6rem;
  inline-size: min(100%, calc(100vh - 9rem));
}
.reply.new { background-color: rgba(74, 237, 128, .16); }
.post.open:focus { outline: none; }
.reply p { margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.35; }

.caught-up { text-align: center; color: var(--muted); font-size: .65rem; font-weight: 600; margin-block-start: .4rem; }

/* ---------- sheets ---------- */
.sheet {
  border-radius: 1.2rem;
  border: 2px solid var(--green);
  padding: 1.1rem;
  display: grid; gap: .85rem;
}
.sheet.purple { border-color: var(--purple); }
.sheet h1 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.sheet h1 em { font-style: normal; color: var(--green); }
.sheet.purple h1 em { color: var(--purple-light); }

.field {
  inline-size: 100%; min-block-size: 5rem; resize: none;
  padding: .75rem .9rem; border-radius: .85rem;
  border: 1px solid var(--line); background: var(--glass);
  font-size: .85rem; font-weight: 600; line-height: 1.35;
}
.field::placeholder { color: var(--muted); }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55rem .9rem; border-radius: .85rem;
  background: var(--glass); border: 1px solid var(--line);
  font-size: .8rem; font-weight: 700;
}
.switch-row input {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0;
  inline-size: 2.6rem; block-size: 1.5rem; border-radius: 99px;
  background: rgba(255, 255, 255, .22); position: relative; transition: background .2s;
}
.switch-row input::after {
  content: ""; position: absolute; inset-block-start: .18rem; inset-inline-start: .18rem;
  inline-size: 1.14rem; block-size: 1.14rem; border-radius: 50%; background: #fff; transition: transform .2s;
}
.switch-row input:checked { background: var(--purple); }
.switch-row input:checked::after { transform: translateX(1.1rem); }
.switch-row input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.primary {
  padding: .8rem 1rem; border-radius: 99px; border: 0;
  background: var(--green); color: #000; font-weight: 800; font-size: .9rem;
}
.purple .primary { background: var(--purple); color: #fff; }

/* full view of a ting */
.full {
  border-radius: 1.2rem;
  background: #111 center / cover no-repeat;
  position: relative; overflow: hidden;
  display: grid; align-content: end;
  min-block-size: 100%;
}
.full::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.full.textonly { background: var(--glass); border: 1.5px solid var(--green); align-content: center; }
.full.textonly.big { border-color: var(--purple); }
.full.textonly::after { display: none; }
.full-body { position: relative; z-index: 1; padding: 1.1rem; display: grid; gap: .4rem; }
.full-body .meta { font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.full-body p { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.full-body button {
  justify-self: start; margin-block-start: .4rem;
  padding: .5rem 1rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .5);
  font-size: .7rem; font-weight: 700;
}
.view.fill { display: grid; padding: 1.2rem; }

/* ---------- toast ---------- */
.toast {
  position: fixed; inset-inline: 0; inset-block-end: 2.4rem; margin-inline: auto; z-index: 10;
  inline-size: max-content; max-inline-size: calc(100% - 4rem);
  padding: .7rem 1.3rem; border-radius: 99px;
  background: rgba(14, 14, 14, .94); border: 1.5px solid var(--green);
  box-shadow: 0 0 1.4rem rgba(74, 237, 128, .3);
  font-size: .9rem; font-weight: 800;
  animation: rise .25s ease;
}
.toast.purple { border-color: var(--purple); box-shadow: 0 0 1.4rem rgba(139, 92, 246, .35); }
@keyframes rise { from { transform: translateY(.6rem); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- pairing / loading / offline ---------- */
.view.center {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: .4rem;
}
.view.center .brand { margin-block-end: 1.4rem; }
.pair { display: grid; justify-items: center; gap: 1rem; }
.code { display: flex; gap: .45rem; }
.code span {
  inline-size: 2.6rem; block-size: 3.3rem;
  display: grid; place-items: center;
  border-radius: .8rem;
  border: 1.5px solid rgba(74, 237, 128, .75);
  background: rgba(74, 237, 128, .1);
  font-size: 1.7rem; font-weight: 800; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.hint { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.5; }
.hint strong { color: var(--ink); font-weight: 800; }
.primary.small { padding: .6rem 1.4rem; font-size: .8rem; margin-block-start: 1rem; }

.who .avatar { background-size: cover; background-position: center; }
.quiet {
  justify-self: center;
  margin-block-start: .2rem;
  padding: .45rem .9rem;
  border: 0; border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: .6rem; font-weight: 600;
}

/* ---------- add a photo (capture sheet) ---------- */
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.photo-row button {
  padding: .65rem .8rem; border-radius: .85rem;
  border: 1px solid var(--line); background: var(--glass);
  font-size: .78rem; font-weight: 700;
}
.preview { border-radius: .85rem; aspect-ratio: 1 / 1; inline-size: 7rem; background: #111 center / cover no-repeat; justify-self: start; }
.cam { position: fixed; inset: 0; background: #000; display: grid; place-items: center; z-index: 5; }
.cam video { max-inline-size: 100%; max-block-size: 100%; border-radius: 1rem; }
.cam button { position: absolute; inset-block-end: 1.2rem; }
.file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

/* capture sheet note */
.note { margin: -.1rem .2rem 0; font-size: .68rem; font-weight: 600; line-height: 1.45; color: rgba(255, 255, 255, .62); text-align: center; }
.sheet { gap: .75rem; }

/* ---------- daily affirmation (glass card under today's three) ---------- */
.affirm {
  margin-block-start: .9rem;
  padding: .8rem .95rem .85rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
  display: grid; gap: .55rem;
}
.affirm .label-row { margin: 0; }
.affirm.done { background: rgba(74, 237, 128, .1); box-shadow: inset 0 1px 0 rgba(74, 237, 128, .5), inset 0 0 0 1px rgba(74, 237, 128, .35); }
.affirm-text { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.3; }
.affirm-row { display: flex; gap: .6rem; align-items: center; }
.tick {
  inline-size: 2.2rem; block-size: 2.2rem; padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  background: transparent;
  display: grid; place-items: center;
  transition: transform .18s ease, background-color .18s;
}
.tick svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: #000; stroke-width: 3.2; opacity: 0; }
.tick.on { background: var(--green); border-color: var(--green); box-shadow: 0 0 .8rem rgba(74, 237, 128, .45); }
.tick.on svg { opacity: 1; }
.tick.listen { margin-inline-start: auto; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
.tick.listen svg { opacity: 1; stroke: #fff; stroke-width: 2; fill: none; inline-size: 1.2rem; block-size: 1.2rem; }
.tick:focus-visible { outline: 3px solid #fff; outline-offset: 3px; transform: scale(1.08); }

/* ---------- BIG ting picker ---------- */
.choices { display: grid; gap: .45rem; }
.choices[hidden] { display: none; }
.choices .label { margin: .1rem .2rem; }
.choice {
  text-align: start;
  padding: .6rem .85rem;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  font-size: .8rem; font-weight: 700;
}
.choice[aria-pressed="true"] { background: rgba(139, 92, 246, .3); border-color: var(--purple-light); }
.choice[aria-pressed="true"]::before { content: "✓ "; color: var(--purple-light); }
.choice:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.quiet .ver { display: block; margin-top: 4px; font-size: 11px; opacity: .45; letter-spacing: .04em; }