/* Themes (Settings → Theme). Classic is the black glass and needs nothing here.
 * The colour themes re-tint the same glass; Minimal strips the colour out;
 * Paper and Drawing turn the whole app light by inverting the dark design once,
 * at the root, then turning photos back so faces still look like faces. */

/* ---------- the colour themes: same glass, tinted ---------- */
html[data-look='midnight'] {
  --bg: #0c1736;
  --glass: rgba(150, 180, 255, 0.08);
  --glass-hi: rgba(160, 190, 255, 0.17);
  --rim: rgba(160, 190, 255, 0.18);
  --tint-glow: #2a52c4;
  --spectral: linear-gradient(120deg, #eaf1ff 0%, #b9ccff 45%, #7f9df0 100%);
  --spectral-ring: conic-gradient(from 200deg, #eaf1ff, #7f9df0, #eaf1ff, #4b6fd6, #eaf1ff);
}
html[data-look='forest'] {
  --bg: #0a2016;
  --glass: rgba(140, 230, 180, 0.075);
  --glass-hi: rgba(150, 235, 190, 0.16);
  --rim: rgba(150, 235, 190, 0.16);
  --tint-glow: #1f8a57;
  --spectral: linear-gradient(120deg, #eafff2 0%, #b6eccd 45%, #6fcf9b 100%);
  --spectral-ring: conic-gradient(from 200deg, #eafff2, #6fcf9b, #eafff2, #2f9a63, #eafff2);
}
html[data-look='sunset'] {
  --bg: #24101d;
  --glass: rgba(255, 170, 190, 0.08);
  --glass-hi: rgba(255, 180, 200, 0.17);
  --rim: rgba(255, 180, 200, 0.18);
  --tint-glow: #e0607e;
  --spectral: linear-gradient(120deg, #fff1ec 0%, #ffc3b0 45%, #f08aa4 100%);
  --spectral-ring: conic-gradient(from 200deg, #fff1ec, #f08aa4, #fff1ec, #c8506e, #fff1ec);
}
html:is([data-look='midnight'], [data-look='forest'], [data-look='sunset']) :is(body, #g-app) {
  background:
    radial-gradient(120% 55% at 50% -12%, color-mix(in srgb, var(--tint-glow) 42%, transparent), transparent 66%),
    var(--bg);
}

/* the pages that paint their own black follow the theme's background */
html[data-look] :is(#sheet-inbox, #sheet-person, #sheet-friends, #sheet-board) .g-sheet.g-sheet--page,
html[data-look] #sheet-add .g-qa-line {
  background: var(--bg) !important;
}
html[data-look] .g-rail:hover,
html[data-look] .g-rail:has(:focus-visible) {
  background: var(--bg);
}

/* ---------- Minimal: no colour, no glow, just the words ---------- */
html[data-look='minimal'] {
  --rose: #d6d6d6;
  --lavender: #d6d6d6;
  --sand: #d6d6d6;
  --sage: #d6d6d6;
  --sky: #d6d6d6;
  --amber: #e6e6e6;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-hi: rgba(255, 255, 255, 0.12);
  --spectral: #fff;
  --spectral-ring: #fff;
}
html[data-look='minimal'] body * {
  text-shadow: none !important;
}
html[data-look='minimal'] .gcard {
  --accent: #d6d6d6 !important;
}
html[data-look='minimal'] .gcard > :is(.gcard-aura, .gcard-treats) {
  display: none !important;
}
html[data-look='minimal'] #g-app {
  background: var(--bg);
}
html[data-look='minimal'] :is(.gcard-vis, .gcard-proofbg, .gcard-bar) {
  opacity: 0.35;
}

/* ---------- Paper & Drawing: the light themes ---------- */
/* One inversion at the root turns black glass into white paper and keeps each colour's hue;
 * a touch of sepia warms the white to cream. The canvas behind the page isn't filtered,
 * so it gets the cream directly. */
html:is([data-look='paper'], [data-look='drawing']) {
  filter: invert(1) hue-rotate(180deg) sepia(0.14);
  background: #f5efe2;
  color-scheme: light;
}
/* photos, video and the camera go back the right way round */
html:is([data-look='paper'], [data-look='drawing'])
  :is(img, video, canvas, picture, iframe, .g-cam, .g-look-b i, .gcard-aura, .g-avatar, [style*='background-image']) {
  filter: hue-rotate(180deg) invert(1);
}
/* ...but not a photo inside something already turned back */
html:is([data-look='paper'], [data-look='drawing'])
  :is(.g-cam, .g-avatar, [style*='background-image']) :is(img, video, canvas, .g-avatar) {
  filter: none;
}
/* blur through paper reads as frosted paper, not smoke */
html:is([data-look='paper'], [data-look='drawing']) .tabbar,
html:is([data-look='paper'], [data-look='drawing']) .g-tabbar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

/* Drawing: lined paper, handwritten titles, cards drawn in pen */
html[data-look='drawing'] {
  --font-head: 'Caveat', 'Segoe Print', cursive;
}
html[data-look='drawing'] body {
  /* pre-inversion: black page, faint grey rules → white page, faint blue-grey rules */
  background: repeating-linear-gradient(180deg, #000 0 31px, #1d1a12 31px 32px);
  background-attachment: local;
}
html[data-look='drawing'] :is(.gcard-title, .g-tl-day, .g-head h1, .g-title, h1, h2) {
  font-family: 'Caveat', 'Segoe Print', cursive !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html[data-look='drawing'] .gcard-title {
  font-size: 1.32em !important;
  line-height: 1.05 !important;
}
html[data-look='drawing'] .gcard {
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px !important;
  box-shadow: inset 0 0 0 1.6px rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}
html[data-look='drawing'] .gcard:nth-child(even) {
  border-radius: 18px 225px 18px 255px / 255px 18px 225px 18px !important;
}
html[data-look='drawing'] :is(.gcard-vis, .gcard-proofbg, .gcard-bar) {
  opacity: 0.18;
}

/* ---------- the picker (Settings → Theme) ---------- */
.g-look {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 12px;
}
.g-look-b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 10px 12px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--rim);
  text-align: left;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.2s;
}
.g-look-b:active {
  transform: scale(0.96);
}
.g-look-b.is-on {
  box-shadow: inset 0 0 0 2px var(--ink);
}
.g-look-b i {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 13px;
  margin-bottom: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.g-look-b strong {
  font: 700 15px/1.2 var(--font);
  color: var(--ink);
}
.g-look-b small {
  font: 500 12px/1.3 var(--font);
  color: var(--ink-3);
}

/* the post header: the time gives way (…) before "Go live" does */
.g-tl-head .g-tl-when {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-tl-head :is(.g-tl-live, .g-tl-tag) {
  flex: none;
  white-space: nowrap;
}

/* The Treatly logo and wordmark never move: no spin, tilt, pulse, bounce
 * or press, anywhere (the header, the side rail, pull to refresh, the
 * assistant at work). */
.gi-logo,
.gi-logo *,
.g-word,
.g-word *,
#today-brand,
#today-brand *,
.g-rail-logo,
.g-rail-logo *,
.g-rail-word {
  animation: none !important;
  transition: none !important;
}
.gi-logo,
.g-word,
#today-brand,
#today-brand.is-pressing,
.g-pull-face,
.g-pull-face .gi-logo {
  transform: none !important;
  rotate: none !important;
  scale: none !important;
}
.g-venom-sheen::before {
  animation: none !important;
}
/* the + button's ring turns on the compositor alone, not repainted each frame */
.g-add-aura {
  will-change: transform;
}
/* the feed's posts off screen aren't laid out or painted until you scroll near them */
.g-list.is-timeline > .g-tl-row,
.g-list.is-timeline > .g-sgp,
.g-list.is-timeline > .g-tl-day {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}
.g-list.is-timeline > .g-tl-day {
  contain-intrinsic-size: auto 40px;
}