/* ======================================================================
   Variables
   Theme-specific styles live in themes/<id>/theme.css.
   ====================================================================== */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  --r: 16px;
  --head: Outfit,'Segoe UI',system-ui,sans-serif;
  --body: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* Fallback colors (Shadow Clan). js/themes.js sets these from the current theme. */
  --bg: #07070b;
  --panel: #15151d;
  --text: #f5f2f1;
  --muted: #b7b0b3;
  --accent: #ff6a4d;
  --accent2: #ffa57e;
  --on: #1a0803;
  --line: rgb(var(--tint) / .13);
  --glow: rgba(255,106,77,.33);
  /* "r g b" values: highlight overlays and bars (themes can change these). */
  --tint: 255 255 255;
  --shade: 14 14 20;
  --app-bg: var(--bg);
}

/* ======================================================================
   Base elements
   ====================================================================== */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: radial-gradient(900px 460px at 85% -5%,var(--glow),transparent 62%),var(--bg);
  color: var(--text);
  font: 1rem/1.65 var(--body);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--head);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 .7rem;
  letter-spacing: -.02em;
}

h1 {
  font-size: clamp(2.4rem,5.8vw,4.2rem);
  font-weight: 700;
  background: linear-gradient(95deg,var(--text) 35%,var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(1.8rem,4.2vw,2.8rem);
}

h3 {
  font-size: 1.3rem;
}

p {
  margin: 0 0 1rem;
  max-width: 58ch;
  color: var(--muted);
}

a {
  color: var(--accent2);
}

:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}

/* ======================================================================
   Layout helpers and top navigation
   ====================================================================== */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--on);
  padding: .6rem 1rem;
  z-index: 99;
}

.skip:focus {
  left: 0;
}

header {
  position: sticky;
  top: .7rem;
  z-index: 30;
  padding: 0 .8rem;
}

nav {
  max-width: 1100px;
  margin: .7rem auto 0;
  padding: .45rem .5rem .45rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgb(var(--shade) / .62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.logo {
  font: 700 1.35rem var(--head);
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
}

.logo span {
  color: var(--accent2);
}

/* "Beta" next to the logo: the stage DaySaga is at. */
.logo .beta-tag {
  display: inline-block;
  margin-left: .45rem;
  padding: .1rem .45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 600 .62rem/1.4 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: .7;
}

/* Google sign-in, greyed out until it's ready. */
.btn.google-soon:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.links {
  display: flex;
  gap: 1.3rem;
  margin-right: .6rem;
}

.links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
}

.links a:hover {
  color: var(--text);
}

/* ======================================================================
   Buttons
   ====================================================================== */

.btn {
  font: 600 .96rem var(--body);
  min-height: 46px;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .06);
  color: var(--text);
  cursor: pointer;
  transition: transform .2s,box-shadow .2s,background .2s;
}

.btn:hover {
  transform: translateY(-2px);
  background: rgb(var(--tint) / .11);
}

.btn.main {
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 8px 26px -8px var(--glow);
}

.btn.main:hover {
  box-shadow: 0 14px 34px -6px var(--glow);
}

.btn:disabled {
  opacity: .6;
  cursor: wait;
}

/* ======================================================================
   Hero: layout, headline, call to action
   ====================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -5.4rem;
  padding-top: 5.4rem;
  --hh: max(800px,min(100vh,920px));
  height: var(--hh);
  min-height: 0;
}

.hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72%;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 48%);
  mask-image: linear-gradient(90deg,transparent,#000 48%);
}

.hero-art svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(transparent,var(--bg));
  pointer-events: none;
  z-index: 1;
}

.hero .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 5rem;
}

.hero-copy {
  max-width: 540px;
}

.sub {
  font-size: 1.15rem;
  color: var(--text);
  opacity: .88;
  text-shadow: 0 2px 14px #000;
}

@keyframes up { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.hero-copy>* {
  animation: up .7s cubic-bezier(.2,.7,.2,1) both;
}

.hero-copy>:nth-child(2) {
  animation-delay: .1s;
}

.hero-copy>:nth-child(3) {
  animation-delay: .2s;
}

.hero-copy>:nth-child(4) {
  animation-delay: .3s;
}

.hero-copy>:nth-child(5) {
  animation-delay: .4s;
}

.pulse {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: .55 } }
@media(prefers-reduced-motion:reduce) {
  * {
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important;
  }
}

/* ======================================================================
   Landing page sections: why, how it works, themes, call to action, footer
   ====================================================================== */

section {
  padding: 4.5rem 0;
}

.head {
  max-width: 620px;
  margin-bottom: 2.2rem;
}

.glass {
  background: linear-gradient(180deg,rgb(var(--tint) / .075),rgb(var(--tint) / .025));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.7rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -28px #000,inset 0 1px 0 rgb(var(--tint) / .09);
  transition: transform .25s,border-color .25s;
}

.glass:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--tint) / .24);
}

.glass p:last-child {
  margin-bottom: 0;
}

textarea {
  width: 100%;
  min-height: 104px;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0,0,0,.3);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.sr {
  position: absolute;
  left: -999px;
}

.small {
  font-size: .88rem;
}

.banner {
  overflow: hidden;
  background: var(--panel);
  width: 100%;
  height: 120px;
  border-radius: 16px;
  margin-bottom: .6rem;
}

.banner svg {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-own {
  background: repeating-linear-gradient(135deg,rgb(var(--tint) / .08) 0 10px,rgb(var(--tint) / .03) 10px 20px);
}

.theme-card .ranks {
  margin: 0;
}

/* The theme currently in use. */
.theme-card.active {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2),0 24px 50px -28px #000;
}

.price {
  font: 600 1.7rem var(--head);
  color: var(--accent2);
  margin: .2rem 0;
}

.row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.cta {
  text-align: center;
  padding: 4.5rem 1.5rem;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: radial-gradient(600px 240px at 50% 0,var(--glow),transparent 70%),rgb(var(--tint) / .04);
}

.cta p {
  margin-inline: auto;
}

footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
  font-size: .92rem;
}

footer .wrap {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.btn.big {
  min-height: 54px;
  padding: .7rem 1.8rem;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.hero-trust {
  margin-top: 1rem;
  color: var(--text);
  opacity: .8;
  font-size: .95rem;
  text-shadow: 0 2px 10px #000;
}

.head .eyebrow {
  margin-bottom: .5rem;
}

/* Why log your day */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.1rem;
}

.why {
  display: flex;
  flex-direction: column;
}

.why h3 {
  margin-bottom: .5rem;
}

.why p {
  color: var(--text);
  opacity: .88;
}

.why .why-src {
  margin-top: auto;
  padding-top: .8rem;
  color: var(--muted);
  opacity: 1;
  font-size: .82rem;
}

/* How it works */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  font: 700 1.2rem var(--head);
}

.step p {
  color: var(--text);
  opacity: .88;
}

.cta .small {
  margin-top: 1rem;
  color: var(--muted);
}

/* Theme store page (themes/index.html) */
.store-page .store {
  padding-top: 3rem;
}

.store-page h1 {
  font-size: clamp(2.2rem,4.5vw,3.4rem);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 1.1rem;
}

.theme-grid .glass {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

/* Price and buttons line up at the bottom of every card. */
.theme-grid .price {
  margin-top: auto;
}

.theme-grid .row {
  gap: .4rem;
}

.theme-grid .btn {
  min-height: 40px;
  padding: .4rem .95rem;
  font-size: .88rem;
}

#smsg {
  margin-top: 1.2rem;
  color: var(--text);
}

@media (max-width: 860px) {
  .why-grid,
  .steps-row {
    grid-template-columns: minmax(0,1fr);
  }
}

/* ======================================================================
   Login dialog and form controls
   ====================================================================== */

dialog {
  max-height: calc(100vh - 2rem);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  box-shadow: 0 0 50px var(--glow);
  width: min(900px,calc(100vw - 2rem));
  padding: 0;
  overflow: hidden;
  border-color: var(--line);
}

dialog::backdrop {
  background: rgba(4,4,8,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

label {
  display: block;
  font-weight: 600;
  margin: .9rem 0 .3rem;
}

input {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border-radius: calc(var(--r)/2);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

input[aria-invalid=true] {
  border-color: #ff6b6b;
}

.err {
  color: #ff8a8a;
  font-size: .92rem;
  margin: .25rem 0 0;
  min-height: 1.2em;
}

/* Sign-up: a plain-words privacy notice above the consent boxes. */
.signup-notice {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

.signup-notice a,
.age-check a {
  color: inherit;
  text-decoration: underline;
}

/* "I'm 18 or older" and "I agree…" at sign-up */
.age-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1rem 0 0;
  font-weight: 600;
  cursor: pointer;
}

.age-check input {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: .1rem 0 0;
  accent-color: var(--accent);
}

.age-check input[aria-invalid=true] {
  outline: 2px solid #ff6b6b;
  outline-offset: 2px;
}

.pw {
  display: flex;
  gap: .4rem;
}

.pw .btn {
  padding: .4rem .7rem;
  font-size: .9rem;
}

.msg {
  margin: .8rem 0 0;
  padding: .6rem .8rem;
  border-radius: calc(var(--r)/2);
  border: 1px solid var(--accent);
  font-size: .95rem;
}

.msg:empty {
  display: none;
}

.sw {
  margin-top: 1rem;
  font-size: .95rem;
  color: var(--muted);
}

.sw button {
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}

.full {
  width: 100%;
  margin-top: .8rem;
}

.or {
  text-align: center;
  color: var(--muted);
  margin: .8rem 0 0;
  font-size: .9rem;
}

[hidden] {
  display: none!important;
}

/* ======================================================================
   App (after login): layout and field basics
   ====================================================================== */

#app {
  max-width: 1150px;
  margin: 0 auto;
  padding: 1rem 1.25rem 4rem;
  position: relative;
  z-index: 1;
}

.alay {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 1.6rem;
  margin-top: 1rem;
}

/* nav.side also matches the global nav rule above, so reset those styles here. */
.side {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: sticky;
  top: 6.5rem;
  align-self: start;
  padding: 0;
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.side button {
  text-align: left;
  min-height: 46px;
  padding: .5rem 1rem;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 600 .98rem var(--body);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  width: 100%;
}

.side button:hover {
  background: rgb(var(--tint) / .07);
  color: var(--text);
}

.side button[aria-current=page] {
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

#view:focus {
  outline: 0;
}

#view .fld {
  margin-top: 1rem;
}

.fld:hover {
  transform: none;
}

.bar2 {
  height: 6px;
  border-radius: 9px;
  background: rgb(var(--tint) / .12);
  overflow: hidden;
  margin-top: .7rem;
}

.bar2 i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
  transition: width .3s;
}

.arow {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}

/* ======================================================================
   Hero: shared pieces (canvas, fog) and responsive layout
   ====================================================================== */

/* Only Shadow Clan shows the painted image, its shading, and the dialog moon
   (see themes/shadow/theme.css). */
.stage-wrap,
.hero-shade,
.aa-moon {
  display: none;
}

@keyframes kb { from { transform: scale(1.02) } to { transform: scale(1.08) translate(-1.2%,.8%) } }
.fog {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 36%;
  mix-blend-mode: screen;
  filter: blur(14px);
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 50%,rgba(190,170,180,.17),transparent 60%),radial-gradient(ellipse at 75% 40%,rgba(170,150,175,.13),transparent 60%);
  animation: fogm 38s linear infinite alternate;
}

.f1 {
  top: 50%;
}

.f2 {
  top: 66%;
  animation-duration: 52s;
  animation-direction: alternate-reverse;
}

@keyframes fogm { to { transform: translateX(12%) } }
#fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.hero h1 {
  font-size: clamp(2.2rem,4.8vw,3.9rem);
}

@media(prefers-reduced-motion:reduce) {
  #fx {
    display: none;
  }
}

@media(max-width:820px) {
  .hero {
    height: auto;
    min-height: 760px;
  }
}

/* ======================================================================
   Login dialog: artwork panel
   ====================================================================== */

dialog[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  animation: dlgin .45s ease-out;
}

@keyframes dlgin { from { opacity: 0; transform: translateY(14px) scale(.97) } }
.x {
  position: absolute;
  top: .6rem;
  right: .6rem;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 5;
}

.auth-form {
  padding: 1.8rem 1.7rem;
  overflow: auto;
  max-height: calc(100vh - 2rem);
}

.auth-art {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background: #07070b;
}

.aa-img {
  position: absolute;
  inset: -4%;
  background: var(--app-bg);
  animation: kb 30s ease-in-out infinite alternate;
}

.aa-img svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aa-moon {
  left: 80%;
  top: 9%;
  width: 75%;
}

.auth-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 40%,rgba(7,7,11,.92)),linear-gradient(90deg,transparent 65%,var(--panel));
}

#fx2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.aa-text {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.6rem;
  z-index: 2;
}

.aa-q {
  font: 700 1.7rem/1.15 var(--head);
  margin: 0 0 .4rem;
  color: var(--text);
  text-shadow: 0 2px 14px #000;
}

.aa-s {
  margin: 0;
  color: var(--muted);
}

@media(max-width:820px) {
  dialog[open] {
    display: block;
    overflow: auto;
  }
  .auth-art {
    min-height: 0;
    height: 150px;
  }
  .aa-text {
    display: none;
  }
  .auth-form {
    max-height: none;
    padding: 1.3rem 1.2rem;
  }
  .aa-img {
    background-position: 50% 16%;
  }
}

@media(max-width:820px) {
  .alay {
    grid-template-columns: 1fr;
  }
  .side {
    flex-direction: row;
    overflow-x: auto;
  }
  .links {
    display: none;
  }
  .hero-art {
    width: 100%;
    opacity: .5;
    -webkit-mask-image: none;
    mask-image: none;
  }
  nav {
    padding-left: 1rem;
  }
  .btn {
    padding: .5rem 1.1rem;
  }
}

/* ======================================================================
   App: background, top bar, side menu
   ====================================================================== */

.appbg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--app-bg);
  animation: kb 40s ease-in-out infinite alternate;
}

#fx3 {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.hudbar {
  position: sticky;
  top: .7rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  border-radius: 22px;
  background: rgb(var(--shade) / .74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}

/* Your photo, or your initials on the theme's colors. */
.hav {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent),var(--accent2)) center/cover;
  color: var(--on);
  font: 700 1.15rem var(--head);
  letter-spacing: .02em;
  overflow: hidden;
}

.hav.has-photo {
  background-size: cover;
  background-position: center;
}

/* Photo at the top left, ringed by progress toward the next level. */
.me-photo {
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.me-ring {
  --p: 0;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--accent2) calc(var(--p)*1%),rgb(var(--tint) / .14) 0);
  box-shadow: 0 0 18px -4px var(--glow);
}

.me-photo:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

.hid {
  flex: 1;
  min-width: 0;
}

.me-name {
  display: block;
  overflow: hidden;
  font: 700 1.35rem var(--head);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hbar {
  height: 10px;
  border-radius: 9px;
  background: rgb(var(--tint) / .12);
  margin: .35rem 0;
  overflow: hidden;
}

.hbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 9px;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow: 0 0 12px var(--glow);
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}

.hstats {
  display: flex;
  gap: 1.1rem;
}

.hstat {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}

.hstat svg {
  align-self: center;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hstat b {
  font: 700 1.2rem var(--head);
}

.hstat small,
.hid small {
  color: var(--muted);
}

/* Your menu: small photo with an arrow; the list opens below it. */
.me-wrap {
  position: relative;
}

.me-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 44px;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .06);
  color: var(--text);
  cursor: pointer;
}

.me-btn:hover,
.me-btn[aria-expanded=true] {
  background: rgb(var(--tint) / .12);
}

.me-btn .hav {
  width: 36px;
  height: 36px;
  font-size: .85rem;
}

.me-btn > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.me-menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 40;
  min-width: 240px;
  padding: .5rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 50px -20px #000;
}

.me-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem .8rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}

.me-head .hav {
  width: 40px;
  height: 40px;
  font-size: .9rem;
}

.me-head b {
  display: block;
}

.me-head small {
  color: var(--muted);
}

.me-menu button {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: 500 .95rem var(--body);
  text-align: left;
  cursor: pointer;
}

.me-menu button:hover,
.me-menu button:focus-visible {
  background: rgb(var(--tint) / .08);
}

.me-menu #out2 {
  margin-top: .3rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  color: var(--muted);
}

.side .ic {
  font-size: 1.3rem;
  width: 1.8rem;
  text-align: center;
}

/* ======================================================================
   App: home view
   ====================================================================== */

.eyebrow {
  margin: 0 0 -.2rem;
  color: var(--accent2);
  font: 700 .78rem var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Your folders: one tile per section on the home page. Each opens its
   section, where that section's cards and items live. */
.folders-wrap {
  margin-top: 1.4rem;
}

.folders {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,13.5rem),1fr));
  gap: .8rem;
  margin-top: .8rem;
}

.folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  min-height: 8.6rem;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg,rgb(var(--tint) / .075),rgb(var(--tint) / .025));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}

.folder:hover,
.folder:focus-visible {
  border-color: var(--accent2);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .18);
}

.folder-ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: .3rem;
  border-radius: 13px;
  background: rgb(var(--tint) / .08);
}

.folder-ic svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
  fill-opacity: .16;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent2);
}

.folder-name {
  font: 700 1.08rem var(--head);
}

.folder-line {
  color: var(--muted);
  font-size: .9rem;
}

.folder.full .folder-line {
  color: var(--accent2);
}

.folder-bar {
  width: 100%;
  height: 7px;
  margin-top: .15rem;
  border-radius: 9px;
  background: rgb(var(--tint) / .1);
  overflow: hidden;
}

.folder-bar i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
}

/* What's inside, in small print at the bottom. */
.folder-inside {
  width: 100%;
  margin-top: auto;
  padding-top: .5rem;
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: .85;
}

@media (max-width: 560px) {
  .folders {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .6rem;
  }

  .folder {
    min-height: 7.6rem;
    padding: .9rem .85rem .8rem;
  }
}

/* Today's progress: one horizontal bar per section. */
.today-card {
  margin-top: 1rem;
}

.today-card:hover {
  transform: none;
}

.today-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1rem;
}

.today-head h3 {
  margin: 0;
}

.today-head span {
  color: var(--muted);
}

.today-head b {
  color: var(--text);
  font: 700 1.3rem var(--head);
}

.dbar-total {
  height: 10px;
  margin: .7rem 0 1rem;
  border-radius: 9px;
  background: rgb(var(--tint) / .1);
  overflow: hidden;
}

.dbar-total i,
.dbar-track i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
  transition: width .4s;
}

.dbars {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.dbar {
  display: grid;
  grid-template-columns: 8.5rem minmax(0,1fr) 3.2rem;
  align-items: center;
  gap: .9rem;
  min-height: 44px;
  padding: .3rem .5rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: 600 .95rem var(--body);
  text-align: left;
  cursor: pointer;
}

.dbar:hover {
  background: rgb(var(--tint) / .07);
}

.dbar-name {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.dbar-ic svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  fill-opacity: .16;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent2);
}

.dbar-track {
  height: 12px;
  border-radius: 9px;
  background: rgb(var(--tint) / .1);
  overflow: hidden;
}

.dbar-num {
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dbar.full .dbar-num {
  color: var(--accent2);
}

.today-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 1rem 0 0;
  color: var(--muted);
}

.today-next > span {
  margin-right: .3rem;
  font-weight: 600;
}

.next-chip {
  min-height: 36px;
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .06);
  color: var(--text);
  font: 500 .88rem var(--body);
  cursor: pointer;
}

.next-chip:hover {
  border-color: var(--accent2);
}

.today-note {
  margin-top: .8rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .dbar {
    grid-template-columns: 6.5rem minmax(0,1fr) 2.8rem;
    gap: .6rem;
  }
}

.bdg {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .6rem;
}

.bdg span {
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.bdg .on {
  border-color: var(--accent2);
  color: var(--text);
  box-shadow: 0 0 14px -4px var(--glow);
}

/* ======================================================================
   App: power-up animations and rank-up overlay
   ====================================================================== */

.rw {
  font: 600 .75rem var(--body);
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .08);
  color: var(--accent2);
  vertical-align: middle;
  margin-left: .5rem;
}

.fld.done {
  border-color: var(--accent2);
  box-shadow: 0 0 28px -8px var(--glow);
}

.pt {
  position: fixed;
  z-index: 60;
  transform: translate(-50%,0);
  font: 700 1.6rem var(--head);
  color: var(--accent2);
  text-shadow: 0 0 14px var(--accent);
  pointer-events: none;
  animation: flt 1.2s ease-out forwards;
}

@keyframes flt { to { transform: translate(-50%,-90px) scale(1.25); opacity: 0 } }
.sp {
  position: fixed;
  z-index: 60;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 8px var(--accent);
  pointer-events: none;
  animation: spk .8s ease-out forwards;
}

@keyframes spk { to { transform: translate(var(--x),var(--y)); opacity: 0 } }
#ru {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle,rgba(0,0,0,.45),rgba(0,0,0,.88));
  cursor: pointer;
}

.rub p {
  font: 700 1.2rem var(--head);
  letter-spacing: .4em;
  color: var(--accent2);
  margin: 0;
}

.rub h2 {
  font-size: clamp(3rem,12vw,7rem);
  margin: .2rem 0;
  text-shadow: 0 0 40px var(--accent);
}

.rub small {
  color: var(--muted);
}

#ru.go .rub {
  animation: pop .8s cubic-bezier(.2,1.5,.3,1) both;
}

@keyframes pop { from { transform: scale(.3); opacity: 0 } }
@media(prefers-reduced-motion:reduce) {
  .pt,
  .sp {
    display: none;
  }
}

@media(max-width:820px) {
  #app {
    padding-bottom: 6.5rem;
  }
  .hudbar {
    gap: .6rem;
    padding: .55rem .7rem;
  }
  .me-ring {
    width: 48px;
    height: 48px;
  }
  .me-ring .hav {
    width: 40px;
    height: 40px;
    font-size: .95rem;
  }
  .me-name {
    font-size: 1.1rem;
  }
  .hstats {
    flex-direction: column;
    gap: 0;
  }
  .hstat b {
    font-size: 1rem;
  }
  .hstat small {
    display: none;
  }
  .me-btn .hav {
    display: none;
  }
  .me-btn {
    padding: .25rem .5rem;
  }
  .side {
    position: fixed;
    top: auto;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    z-index: 20;
    flex-direction: row;
    justify-content: space-around;
    overflow: visible;
    padding: .35rem .25rem;
    border-radius: 22px;
    background: rgb(var(--shade) / .88);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
  }
  .side button {
    flex-direction: column;
    gap: 0;
    padding: .3rem 0;
    min-height: 54px;
    min-width: 0;
    font-size: .64rem;
    text-align: center;
    flex: 1;
    justify-content: center;
  }
  /* The bar has room for seven. Goals, History and Insights stay one tap
     away in the folders on Home, and show here while you're on them. */
  .side button[data-view=goal]:not([aria-current=page]),
  .side button[data-view=hist]:not([aria-current=page]),
  .side button[data-view=ins]:not([aria-current=page]) {
    display: none;
  }
  .side .lb {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ======================================================================
   App: field cards, mission board, custom field form
   ====================================================================== */

.ico {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex: none;
  color: var(--accent2);
  background: linear-gradient(160deg,rgb(var(--tint) / .14),rgb(var(--tint) / .03));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 14px rgb(var(--tint) / .05),0 0 18px -6px var(--glow);
}

.ico svg,
.side .ic svg,
.bi svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  fill-opacity: .16;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side .ic svg {
  width: 22px;
  height: 22px;
}

.bi {
  display: inline-block;
  vertical-align: -3px;
  margin-right: .4rem;
}

.bi svg {
  width: 16px;
  height: 16px;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(290px,1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.fc {
  padding: 1.3rem;
  animation: up .5s both;
  animation-delay: calc(var(--i)*60ms);
}

.fh {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.ft {
  flex: 1;
  min-width: 0;
}

.ft h3 {
  margin: 0;
  font-size: 1.15rem;
}

.ft small {
  color: var(--muted);
}

.rm2 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .05);
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.rm2:hover {
  color: var(--text);
}

.fv {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 1.1rem 0 .3rem;
  flex-wrap: wrap;
}

.cv {
  font: 700 2.6rem/1 var(--head);
}

.cg {
  color: var(--muted);
}

.pc {
  margin-left: auto;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .1);
  color: var(--accent2);
  font-weight: 700;
  font-size: .85rem;
}

.fa {
  display: flex;
  gap: .6rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}

.pill {
  min-height: 44px;
  padding: .5rem 1.3rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  font: 700 .95rem var(--body);
  cursor: pointer;
  transition: transform .15s;
  box-shadow: 0 8px 22px -10px var(--glow);
}

.pill:hover {
  transform: translateY(-2px);
}

.pill:active {
  transform: scale(.96);
}

.pill.ghost {
  background: rgb(var(--tint) / .08);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

.er {
  margin-top: .8rem;
}

.chkp {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.1rem 0 0;
  background: rgb(var(--tint) / .08);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
  position: relative;
}

.chkp input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
}

.chkp:has(input:checked) {
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

.chkp:has(input:checked) span::before {
  content: '✓ ';
}

.chkp:focus-within {
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}

.sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.sum:hover {
  transform: none;
}

.sn {
  font: 700 3.2rem/1 var(--head);
}

.sd {
  color: var(--muted);
  margin-left: .4rem;
}

.sr2 {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 200px;
  flex: 1;
  max-width: 320px;
}

.bh {
  margin-top: 2rem;
  margin-bottom: .2rem;
}

.tiles2 {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
  gap: .8rem;
}

.tile {
  position: relative;
  min-height: 116px;
  text-align: left;
  padding: .9rem;
  border-radius: 22px;
  border: 1px solid rgb(var(--tint) / .14);
  background: linear-gradient(160deg,hsl(var(--h) 38% 24%),hsl(var(--h) 34% 12%));
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .15rem;
  transition: transform .2s;
}

.tile:hover {
  transform: translateY(-4px);
}

.tile .ico {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 40px;
  height: 40px;
}

.tile b {
  font-size: 1rem;
}

.tile small {
  color: rgba(255,255,255,.68);
}

.forge {
  margin-top: 1.4rem;
}

.forge:hover {
  transform: none;
}

.ftypes {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .7rem;
}

.ftc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .9rem .6rem;
  text-align: center;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font: 600 .95rem var(--body);
  cursor: pointer;
}

.ftc[aria-pressed=true] {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2),0 0 24px -6px var(--glow);
  background: rgb(var(--tint) / .1);
}


/* ======================================================================
   Voice input and "Log your day"
   ====================================================================== */

.ql-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .9rem;
}

/* Microphone button: pulses while listening. */
.mic {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 46px;
  padding: .5rem 1.2rem .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .07);
  color: var(--text);
  font: 600 .96rem var(--body);
  cursor: pointer;
  transition: background .2s,border-color .2s;
}

.mic:hover {
  background: rgb(var(--tint) / .12);
}

.mic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mic[aria-pressed=true] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on);
  animation: mic-pulse 1.4s ease-out infinite;
}

@keyframes mic-pulse {
  0% { box-shadow: 0 0 0 0 var(--glow); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

.quicklog {
  margin-top: 1rem;
  border-color: var(--accent2);
}

.quicklog:hover {
  transform: none;
}

.quicklog textarea {
  min-height: 80px;
  margin-top: .3rem;
}

.ql-status:empty {
  display: none;
}

.ql-status {
  margin: .8rem 0 0;
  color: var(--text);
}

.ql-result {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ql-head {
  margin: 0 0 .5rem;
  color: var(--text);
  font-weight: 600;
}

.ql-result ul {
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.ql-result li {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  align-items: baseline;
  color: var(--text);
}

.ql-result li small {
  color: var(--muted);
}

.ql-done {
  margin: .8rem 0 0;
}

/* ======================================================================
   App: welcome, day plan, Body & BMI (js/daily.js)
   ====================================================================== */

.welcome,
.plan,
.bmi {
  margin-top: 1rem;
}

.welcome:hover,
.plan:hover,
.bmi:hover {
  transform: none;
}

.wl-hi {
  margin: 0;
  font: 700 clamp(1.5rem,3vw,2rem)/1.2 var(--head);
  color: var(--text);
}

.wl-q {
  margin: .3rem 0 .8rem;
  color: var(--muted);
}

.moods,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.mood,
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .06);
  color: var(--text);
  font: 600 .95rem var(--body);
  cursor: pointer;
  transition: transform .15s,background .2s;
}

.mood span {
  font-size: 1.25rem;
}

.mood:hover,
.chip-btn:hover {
  transform: translateY(-2px);
  background: rgb(var(--tint) / .11);
}

.mood[aria-pressed=true],
.chip-btn[aria-pressed=true],
.level[aria-pressed=true] {
  border-color: var(--accent2);
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

.wl-reply {
  margin: .8rem 0 0;
  color: var(--text);
}

.wl-quote {
  margin-top: 1.1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}

.wl-quote p {
  margin: 0;
  font: 600 1.15rem/1.4 var(--head);
  color: var(--text);
  max-width: none;
}

.linkish {
  margin-top: .3rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--accent2);
  font: inherit;
  font-size: .9rem;
  text-decoration: underline;
  cursor: pointer;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.plan-label {
  margin: .9rem 0 .5rem;
}

.plan-label.strong {
  margin-top: .9rem;
  font-weight: 600;
  color: var(--text);
}

.levels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

.level {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .8rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.level small {
  font-size: .78rem;
  opacity: .8;
}

.plan-progress {
  display: grid;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.plan-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 1rem;
  color: var(--text);
}

.plan-head span {
  color: var(--muted);
}

.plan-row.done .plan-head span {
  color: var(--accent2);
  font-weight: 600;
}

.plan-row .bar2 {
  margin-top: .5rem;
}

.plan-note {
  margin: 1rem 0 0;
}

select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border-radius: calc(var(--r)/2);
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.bmi-form {
  margin: 1rem 0 .8rem;
}

.bmi-result {
  margin-top: 1.1rem;
}

.bmi-value {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.bmi-value b {
  font: 700 2.6rem/1 var(--head);
  color: var(--text);
}

.bmi-tag {
  padding: .25rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
}

.bmi-tag.ok { background: rgba(80,200,120,.2); color: #8ef0ad; }
.bmi-tag.low { background: rgba(110,170,255,.2); color: #a9ccff; }
.bmi-tag.high { background: rgba(255,140,90,.2); color: #ffb08a; }

/* Scale from BMI 15 to 40: underweight, healthy, overweight, obese. */
.bmi-scale {
  position: relative;
  height: 10px;
  margin: 1rem 0 .4rem;
  border-radius: 9px;
  background: linear-gradient(90deg,#6eaaff 0 14%,#50c878 14% 40%,#ffb347 40% 60%,#ff6b6b 60% 100%);
}

.bmi-scale i {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 20px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 8px #000;
}

.bmi-legend {
  display: grid;
  grid-template-columns: 14fr 26fr 20fr 40fr;
  font-size: .72rem;
  color: var(--muted);
}

.bmi-goal {
  margin: 1.1rem 0 0;
  color: var(--text);
}

.bmi-goal .bar2 {
  margin: .5rem 0;
}

.bmi-history,
.bmi-note {
  margin: .8rem 0 0;
}

@media(max-width:820px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
  .bmi-legend {
    font-size: .62rem;
  }
}

/* ======================================================================
   Setup screen: About you + Build your dashboard (js/setup.js)
   ====================================================================== */

#app.setting-up .hudbar,
#app.setting-up .alay {
  display: none;
}

.setup {
  max-width: 980px;
  margin: 1rem auto 0;
  padding-bottom: 6rem;
}

.setup-card:hover {
  transform: none;
}

.setup-card h2:focus {
  outline: 0;
}

.steps {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

.steps button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .4rem 1.1rem .4rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--shade) / .6);
  color: var(--muted);
  font: 600 .95rem var(--body);
  cursor: pointer;
}

.steps span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgb(var(--tint) / .1);
}

.steps [aria-selected=true] {
  color: var(--text);
  border-color: var(--accent2);
}

.steps [aria-selected=true] span {
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

.optional {
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
}

.label-like {
  margin: 1rem 0 .5rem;
  font-weight: 600;
  color: var(--text);
}

.setup-actions {
  display: flex;
  gap: .6rem;
  margin-top: 1.5rem;
}

/* Step 2 layout: picker on the left, "On your dashboard" on the right. */
.build-lead {
  margin-bottom: 1rem;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.presets-label {
  margin-right: .3rem;
  font-weight: 600;
  color: var(--text);
}

.preset {
  min-height: 40px;
  padding: .4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font: 500 .9rem var(--body);
  cursor: pointer;
  transition: border-color .2s,background .2s;
}

.preset:hover {
  border-color: var(--accent2);
}

.preset[aria-pressed=true] {
  border-color: transparent;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  font-weight: 700;
}

.build-body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 250px;
  gap: 1.2rem;
  align-items: start;
  margin-top: 1.4rem;
}

.build-tools {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}

/* One row of tabs; on narrow screens it scrolls sideways. */
.su-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.su-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  min-height: 40px;
  padding: .35rem .7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 .88rem var(--body);
  cursor: pointer;
}

.su-tab:hover {
  color: var(--text);
  background: rgb(var(--tint) / .06);
}

.su-tab[aria-selected=true] {
  color: var(--text);
  background: rgb(var(--tint) / .12);
}

.su-tab-count {
  min-width: 1.4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  font-size: .75rem;
  line-height: 1.4rem;
  text-align: center;
}

.su-search {
  position: relative;
}

.su-search svg {
  position: absolute;
  left: .7rem;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.su-search input {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding-left: 2.2rem;
  border-radius: 999px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pick-panel {
  margin-top: 1rem;
  padding: 0;
}

/* The panel title is only needed while searching, when several panels show. */
.pick-panel-title {
  display: none;
  margin-bottom: .2rem;
  font-size: 1.05rem;
}

.searching .pick-panel-title {
  display: block;
}

.searching .pick-hint {
  display: none;
}

.pick-hint {
  margin-bottom: .8rem;
  color: var(--muted);
  font-size: .85rem;
}

.pick-group + .pick-group {
  margin-top: 1rem;
}

.pick-group h4 {
  margin-bottom: .5rem;
  color: var(--muted);
  font: 600 .78rem var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pick-empty {
  margin-top: 1.2rem;
  color: var(--muted);
}

/* "On your dashboard": what has been picked, with × to remove. */
.plate {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
}

.plate h3 {
  margin-bottom: .6rem;
  font-size: 1rem;
}

.plate-group + .plate-group {
  margin-top: .8rem;
}

.plate-group h4 {
  margin-bottom: .35rem;
  color: var(--muted);
  font: 600 .72rem var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.plate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.plate-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 32px;
  padding: .2rem .4rem .2rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .07);
  color: var(--text);
  font: 500 .82rem var(--body);
  cursor: pointer;
}

.plate-chip span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}

.plate-chip:hover {
  border-color: var(--accent2);
}

.plate-chip:hover span {
  background: rgb(var(--tint) / .14);
  color: var(--text);
}

.plate-note,
.plate-empty {
  margin-top: .8rem;
  color: var(--muted);
  font-size: .82rem;
}

.plate-clear {
  margin-top: .8rem;
  padding: .3rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 .82rem var(--body);
  text-decoration: underline;
  cursor: pointer;
}

.plate-clear:hover {
  color: var(--text);
}

@media (max-width: 860px) {
  .build-body {
    grid-template-columns: minmax(0,1fr);
  }

  .plate {
    position: static;
    max-height: none;
  }
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: .5rem;
}

/* One item to pick: tap to add (+) or remove (✓). */
.pick {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 56px;
  padding: .45rem .6rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s,background .2s;
}

.pick .ico {
  flex: none;
  width: 34px;
  height: 34px;
}


.pick-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pick-text b {
  font-size: .92rem;
  line-height: 1.25;
}

.pick-text small {
  color: var(--muted);
  font-size: .76rem;
}

.pick-add {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 1.1rem;
  line-height: 1;
}

.pick:hover {
  background: rgb(var(--tint) / .08);
}

.pick.on {
  border-color: var(--accent2);
  background: rgb(var(--tint) / .09);
}

.pick.on .pick-add {
  border-color: transparent;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
  font-size: .95rem;
  font-weight: 700;
}

/* Sticky bar with the count and the finish button. */
.setup-bar {
  position: sticky;
  bottom: .8rem;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 22px;
  background: rgb(var(--shade) / .88);
  color: var(--text);
}

.setup-bar:hover {
  transform: none;
}

.setup-bar-actions {
  display: flex;
  gap: .6rem;
}

/* ======================================================================
   Setup step 2: Your work (js/setup.js)
   ====================================================================== */

.work-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: .8rem;
  margin-top: 1.2rem;
}

.work-opt {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s,background .2s,transform .15s;
}

.work-opt:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
}

.work-opt.other {
  border-style: dashed;
  background: transparent;
}

.work-opt[aria-pressed=true] {
  border: 2px solid var(--accent2);
  background: rgb(var(--tint) / .1);
}

.work-top {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.work-top .ico {
  width: 42px;
  height: 42px;
}

.work-name {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.work-name small {
  color: var(--muted);
}

.work-check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: transparent;
  font-size: .85rem;
  font-weight: 700;
}

.work-opt[aria-pressed=true] .work-check {
  border-color: transparent;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

.work-gets {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.work-gets span {
  padding: .15rem .6rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .08);
  font-size: .8rem;
}

.work-gets.plain {
  color: var(--muted);
  font-size: .82rem;
}

/* ======================================================================
   App: work cards (js/work.js)
   ====================================================================== */

.wl-line {
  margin: .35rem 0 .2rem;
  color: var(--text);
  font-size: 1.05rem;
}

/* Half-width cards sit two to a row; an odd one out takes the full row. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}

.work-grid > .work-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.work-card {
  padding: 1.4rem;
}

.work-card:hover {
  transform: none;
}

#view > .work-card {
  margin-top: 1rem;
}

.wc-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .6rem;
}

.wc-head .ico {
  width: 40px;
  height: 40px;
}

.wc-head h3 {
  margin: 0;
}

.wc-head small {
  color: var(--muted);
}

.wc-note,
.wc-msg {
  margin: .6rem 0 0;
  color: var(--muted);
}

.wc-msg:empty {
  display: none;
}

.work-card label {
  font-size: .92rem;
}

/* Focus timer */
.focus-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.focus-ring {
  position: relative;
  width: 150px;
  height: 150px;
  flex: none;
}

.focus-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.focus-ring circle {
  fill: none;
  stroke-width: 9;
}

.focus-ring .track {
  stroke: rgb(var(--tint) / .12);
}

.focus-ring .prog {
  stroke: var(--accent2);
  stroke-linecap: round;
  transition: stroke-dashoffset .9s linear;
}

.focus-ring b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 2rem var(--head);
  color: var(--text);
}

.focus-side {
  flex: 1 1 200px;
  min-width: 0;
}

.focus-side label {
  margin-top: 0;
}

/* "Your own" timer length: minutes typed in. */
.focus-own {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin: .2rem 0 .7rem;
}

.focus-own label {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.focus-own input {
  width: 6rem;
}

.focus-side .chip-row {
  margin-top: .6rem;
}

.chip-btn:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}

/* Top 3 */
.top-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.top-row {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.top-row input[type=checkbox] {
  width: 22px;
  min-height: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--accent2);
}

.top-row.done input:not([type=checkbox]) {
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--accent2);
  color: var(--muted);
}

/* Key metric */
.metric-big {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin: .2rem 0 0;
}

.metric-big b {
  font: 700 3rem/1 var(--head);
  color: var(--accent2);
}

.metric-big span {
  color: var(--muted);
}

/* Today's money */
.money-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.2rem;
}

.money-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}

.money-nums div {
  display: flex;
  flex-direction: column;
}

.money-nums small {
  color: var(--muted);
}

.money-nums b {
  font: 700 1.9rem var(--head);
  color: var(--text);
}

.money-nums b.pos {
  color: var(--accent2);
}

.spark-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
}

.spark-wrap small {
  color: var(--muted);
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  width: 180px;
  height: 56px;
}

.spark i {
  flex: 1;
  border-radius: 4px;
  background: rgb(var(--tint) / .22);
}

.spark i.now {
  background: linear-gradient(180deg,var(--accent),var(--accent2));
}

.money-add,
.collect-add,
.idea-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin-top: 1rem;
}

.money-add > div {
  flex: 1 1 160px;
}

.collect-add > div {
  flex: 1 1 120px;
}

.money-add label,
.collect-add label {
  margin-top: 0;
}

.idea-add input {
  flex: 1 1 200px;
  width: auto;
}

/* Lists: payments, decisions, ideas */
.wc-list {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
}

.wc-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}

.wc-list li:last-child {
  border-bottom: 0;
}

.wl-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.wl-main small {
  color: var(--muted);
}

.due.late {
  color: #ffb36b;
  font-weight: 600;
}

.due.soon {
  color: var(--text);
}

.amt {
  white-space: nowrap;
}

.pill.mini {
  min-height: 36px;
  padding: .3rem .9rem;
  font-size: .85rem;
}

.x-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.x-btn:hover {
  background: rgb(var(--tint) / .1);
  color: var(--text);
}

.dec-tag {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dec-tag.pending {
  color: #ffb36b;
}

.dec-tag.decided {
  color: var(--accent2);
}

/* Writing practice */
.write-prompt {
  margin: 0 0 .7rem;
  font: 600 1.05rem/1.4 var(--head);
  color: var(--text);
}

.write-prompt small {
  display: block;
  margin-bottom: .2rem;
  font: 600 .72rem var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.write-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .8rem;
}

@media (max-width: 860px) {
  .work-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .spark-wrap {
    align-items: flex-start;
  }
}

/* ======================================================================
   Writing window (js/writer.js), journal previews, Dear diary card
   ====================================================================== */

dialog.writer[open],
dialog.todo-dlg[open] {
  display: flex;
  flex-direction: column;
  width: min(860px,calc(100vw - 2rem));
  height: min(760px,calc(100vh - 2rem));
  padding: 1.6rem 1.8rem 1.4rem;
  border-color: var(--line);
}

.writer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.writer-head h2 {
  margin: .1rem 0 0;
  font-size: clamp(1.6rem,3vw,2.2rem);
}

.writer-prompt {
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* The chosen journal font (js/writer.js sets these variables). */
#writer-text {
  flex: 1;
  min-height: 0;
  margin-top: .8rem;
  padding: 1.1rem 1.2rem;
  border-radius: 18px;
  font-family: var(--journal-font,var(--body));
  font-size: var(--journal-size,1.15rem);
  line-height: var(--journal-line,1.75);
  resize: none;
}

.writer-style {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: .8rem;
}

.writer-style .chip-btn {
  min-height: 38px;
  padding: .3rem .85rem;
  font-weight: 400;
}

.font-chip {
  font-size: 1.05rem;
}

/* Vintage paper: cream page, ruled lines that scroll with the text, and a
   red margin line, like an old notebook. */
dialog.writer.paper #writer-text {
  padding: 0 1.4rem 0 3.4rem;
  border: 1px solid #d9c9a3;
  color: #2d2418;
  background-color: #f3e9d2;
  background-image:
    linear-gradient(rgba(190,70,60,.45),rgba(190,70,60,.45)),
    linear-gradient(to bottom,transparent calc(var(--journal-line,1.75)*1em - 1px),rgba(110,90,60,.28) calc(var(--journal-line,1.75)*1em - 1px)),
    radial-gradient(ellipse at 50% 40%,rgba(255,250,235,.7),rgba(214,190,140,.35));
  background-size: 1.5px 100%,100% calc(var(--journal-line,1.75)*1em),100% 100%;
  background-position: -.9rem 0,0 0,0 0;
  background-repeat: repeat-y,repeat,no-repeat;
  background-origin: content-box,content-box,border-box;
  background-attachment: local,local,local;
  box-shadow: inset 0 0 40px rgba(120,85,30,.18);
}

dialog.writer.paper #writer-text::placeholder {
  color: rgba(70,55,35,.5);
}

dialog.writer.paper #writer-text:focus {
  outline-color: #b08a4a;
}

#writer-text:focus {
  outline: 2px solid var(--accent2);
  outline-offset: 0;
}

.writer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  margin-top: 1rem;
  color: var(--muted);
}

.writer-foot .btn {
  margin-left: auto;
}

.fld-preview {
  margin: .4rem 0 0;
  color: var(--text);
  opacity: .9;
  font-family: var(--journal-font,inherit);
  font-size: calc(var(--journal-size,1.15rem)*.85);
  line-height: var(--journal-line,1.55);
  white-space: pre-line;
}

.diary-card {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap: 1.4rem;
  margin-top: 1rem;
}

.diary-card:hover {
  transform: none;
}

.diary-main h3 {
  margin: .2rem 0 .4rem;
  font-size: 1.4rem;
}

.diary-main p {
  margin: 0 0 .6rem;
  color: var(--text);
}

.diary-today {
  opacity: .9;
  font-family: var(--journal-font,inherit);
  font-size: calc(var(--journal-size,1.15rem)*.9);
  line-height: var(--journal-line,1.55);
  white-space: pre-line;
}

.diary-main .diary-forever {
  color: var(--muted);
  font-style: italic;
}

.diary-memory {
  align-self: stretch;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px dashed var(--line);
  background: rgb(var(--tint) / .04);
}

.diary-memory small {
  color: var(--accent2);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.diary-memory p {
  margin: .5rem 0 0;
  color: var(--text);
  font-family: var(--journal-font,var(--head));
  font-size: calc(var(--journal-size,1.15rem)*.9);
  line-height: var(--journal-line,1.5);
}

.diary-memory.empty p {
  color: var(--muted);
  font: 400 .95rem/1.5 var(--body);
}

/* ======================================================================
   Add your own tracker (Forge)
   ====================================================================== */

.forge label:first-of-type {
  margin-top: 1rem;
}

.forge-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .6rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.forge-examples span {
  margin-right: .2rem;
}

.ftc small {
  color: var(--muted);
  font-weight: 400;
  font-size: .8rem;
}

.forge-num {
  margin-top: .4rem;
}

.forge-preview {
  margin: .4rem 0 1rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font-size: .95rem;
}

/* ======================================================================
   Insights: weekly column charts and a 7-day mini chart per tracker
   ====================================================================== */

.ins-week,
.ins-card {
  margin-top: 1rem;
}

.ins-week:hover,
.ins-card:hover {
  transform: none;
}

.wcharts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.wchart h4 {
  margin: 0 0 .6rem;
  color: var(--muted);
  font: 600 .85rem var(--body);
}

.wcols {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: .5rem;
  height: 170px;
}

.wcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 0;
}

.wval {
  min-height: 1.1rem;
  color: var(--text);
  font: 700 .85rem var(--body);
}

.wbar {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 34px;
  border-radius: 8px;
  background: rgb(var(--tint) / .07);
  overflow: hidden;
}

.wbar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  background: rgb(var(--tint) / .3);
  transition: height .4s;
}

.wcol.today .wbar i {
  background: linear-gradient(180deg,var(--accent2),var(--accent));
}

.wday {
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
}

.wcol.today .wday {
  color: var(--text);
  font-weight: 700;
}

.wempty {
  margin: .6rem 0 0;
  color: var(--muted);
}

.ins-note {
  margin-top: 1rem;
  color: var(--muted);
}

.ins-card h3 small {
  margin-left: .4rem;
  color: var(--muted);
  font: 400 .85rem var(--body);
}

.irow,
.ihead {
  display: grid;
  grid-template-columns: 10rem minmax(0,1fr) 8rem;
  align-items: center;
  gap: 1rem;
}

.irow {
  padding: .55rem 0;
  border-top: 1px solid var(--line);
  color: var(--text);
}

.iname {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

.iname small {
  color: var(--muted);
  font-weight: 400;
  font-size: .78rem;
}

.ival {
  color: var(--muted);
  font-size: .88rem;
  text-align: right;
}

.ichart,
.idays {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 6px;
}

.idays span {
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
}

.ichart {
  position: relative;
  align-items: end;
  height: 44px;
}

.ichart i {
  display: block;
  border-radius: 5px 5px 2px 2px;
  background: rgb(var(--tint) / .28);
}

.ichart i.hit {
  background: linear-gradient(180deg,var(--accent2),var(--accent));
}

.igoal {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--accent2);
  opacity: .6;
  pointer-events: none;
}

.ichart.dots {
  align-items: center;
  height: 22px;
}

.ichart.dots i {
  justify-self: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
}

.ichart.dots i.on {
  border-color: transparent;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
}

.itrack {
  height: 12px;
  border-radius: 9px;
  background: rgb(var(--tint) / .1);
  overflow: hidden;
}

.itrack i {
  display: block;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(90deg,var(--accent),var(--accent2));
}

@media (max-width: 860px) {
  .diary-card,
  .wcharts {
    grid-template-columns: minmax(0,1fr);
  }

  .irow,
  .ihead {
    grid-template-columns: 6.5rem minmax(0,1fr) 4.5rem;
    gap: .6rem;
  }

  .ival {
    font-size: .78rem;
  }

  dialog.writer[open],
  dialog.todo-dlg[open] {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 1.2rem 1rem;
  }
}

/* ======================================================================
   Your data (js/datapage.js)
   ====================================================================== */

.data-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.data-card:hover {
  transform: none;
}

.data-card h3 {
  margin-bottom: .6rem;
}

.data-card p {
  color: var(--text);
}

.data-wide {
  margin-top: 1rem;
}

.data-facts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.data-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}

.data-facts li:last-child {
  border-bottom: 0;
}

.data-facts span {
  color: var(--muted);
}

.data-facts b {
  text-align: right;
  overflow-wrap: anywhere;
}

.data-ok {
  color: var(--accent2);
}

.data-card .data-tip {
  margin-top: .8rem;
  color: var(--muted);
}

/* The restore button is a label wrapping a hidden file input. */
.data-file {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin: 0;
}

.data-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.data-file:focus-within {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.data-steps {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  color: var(--text);
}

.data-steps li {
  margin: .35rem 0;
}

.data-danger {
  border-color: rgba(255,120,100,.35);
}

@media (max-width: 860px) {
  .data-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

/* ======================================================================
   Profile (js/profile.js)
   ====================================================================== */

.wl-motto {
  margin: .2rem 0 0;
  color: var(--accent2);
  font-style: italic;
}

.prof-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: .6rem;
}

.prof-head:hover,
.prof-card:hover {
  transform: none;
}

.prof-avatar {
  width: 112px;
  height: 112px;
  font-size: 2.4rem;
  box-shadow: 0 0 0 4px var(--accent2),0 0 30px -6px var(--glow);
}

.prof-who {
  flex: 1 1 260px;
  min-width: 0;
}

.prof-who h2 {
  margin: 0;
}

.prof-who > p {
  margin: .2rem 0 0;
  color: var(--muted);
}

.prof-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.prof-stats span {
  display: flex;
  flex-direction: column;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: rgb(var(--tint) / .06);
}

.prof-stats b {
  color: var(--text);
}

.prof-stats small {
  color: var(--muted);
}

.prof-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}

.prof-card p {
  color: var(--text);
}

.prof-card label:first-of-type {
  margin-top: .4rem;
}

.prof-work {
  margin: 0;
}

.prof-account {
  margin-top: 1rem;
}

.prof-cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
}

.prof-inline {
  display: flex;
  gap: .5rem;
}

.prof-inline input {
  flex: 1;
  min-width: 0;
}

.prof-actions {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.btn.prof-danger {
  border-color: rgba(255,120,100,.45);
  color: #ffb4a6;
}

@media (max-width: 860px) {
  .prof-grid,
  .prof-cols {
    grid-template-columns: minmax(0,1fr);
  }

  .prof-avatar {
    width: 84px;
    height: 84px;
    font-size: 1.8rem;
  }
}

/* Writing practice box on the home page uses your journal font too. */
#write-text {
  font-family: var(--journal-font,inherit);
  font-size: calc(var(--journal-size,1.15rem)*.9);
  line-height: var(--journal-line,1.6);
}

/* ======================================================================
   "Other kinds of work": items and cards folded away (setup and the board)
   ====================================================================== */

details.other-work,
details.more-items {
  margin-top: 1rem;
}

details.other-work summary,
details.more-items summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3rem .9rem;
  border-radius: 999px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font: 600 .88rem var(--body);
  cursor: pointer;
  list-style: none;
}

details.other-work summary::-webkit-details-marker,
details.more-items summary::-webkit-details-marker {
  display: none;
}

details.other-work summary::before,
details.more-items summary::before {
  content: '+';
  margin-right: .5rem;
  font-size: 1.1rem;
}

details[open].other-work summary::before,
details[open].more-items summary::before {
  content: '–';
}

details.other-work .pick-grid,
details.more-items .tiles2 {
  margin-top: .8rem;
}

/* ======================================================================
   History (js/history.js)
   ====================================================================== */

.hist-cal {
  display: flex;
  gap: 1.6rem;
  margin-top: 1rem;
  overflow-x: auto;
}

.hist-cal:hover,
.hist-day:hover {
  transform: none;
}

.cal-month {
  flex: none;
}

.cal-month h4 {
  margin: 0 0 .6rem;
  font-size: .95rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7,32px);
  gap: 4px;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
}

.cal-day {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0;
  background: rgb(var(--tint) / .05);
  color: var(--muted);
  font: 500 .78rem var(--body);
}

.cal-day.outside {
  background: none;
  opacity: .35;
}

button.cal-day {
  cursor: pointer;
  color: var(--on);
  font-weight: 700;
}

.cal-day.l1 { background: color-mix(in srgb,var(--accent2) 35%,transparent); color: var(--text); }
.cal-day.l2 { background: color-mix(in srgb,var(--accent2) 60%,transparent); }
.cal-day.l3 { background: color-mix(in srgb,var(--accent2) 80%,transparent); }
.cal-day.l4 { background: var(--accent2); }

.cal-day.today {
  outline: 2px solid var(--text);
  outline-offset: 1px;
}

button.cal-day:hover {
  transform: scale(1.1);
}

.hist-search {
  display: block;
  max-width: 520px;
  margin-top: 1.4rem;
}

.hist-count {
  margin: 1rem 0 0;
  color: var(--muted);
}

.hist-day {
  margin-top: 1rem;
  scroll-margin-top: 7rem;
}

.hist-day.picked {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2),0 24px 50px -28px #000;
}

.hist-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}

.hist-head h3 {
  margin: 0;
}

.hist-head h3:focus {
  outline: 0;
}

.hist-head small {
  color: var(--muted);
}

.hist-mood {
  padding: .3rem .8rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .07);
  color: var(--text);
}

.hist-entry {
  margin-top: 1rem;
  padding: 0;
}

.hist-entry h4,
.hist-group h4 {
  margin: 0 0 .3rem;
  color: var(--muted);
  font: 700 .72rem var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hist-text {
  margin: 0;
  color: var(--text);
  font-family: var(--journal-font,inherit);
  font-size: var(--journal-size,1.15rem);
  line-height: var(--journal-line,1.6);
  white-space: pre-line;
}

.hist-tracked {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  margin-top: 1rem;
}

.hist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hist-chips li {
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .07);
  color: var(--text);
  font-size: .85rem;
}

.hist-extras {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--text);
}

.hist-extras li {
  margin: .25rem 0;
}

.hist-more {
  display: block;
  margin: 1.2rem auto 0;
}

.hist-empty {
  margin-top: 1rem;
  color: var(--muted);
}

/* ======================================================================
   Your world: theme picker in the setup screen (js/setup.js)
   ====================================================================== */

.worlds-pick {
  margin: .4rem 0 1.4rem;
}

.worlds-pick .presets-label {
  display: block;
  margin-bottom: .6rem;
}

.worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(170px,1fr));
  gap: .5rem;
}

.world-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .4rem .7rem .4rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .04);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s,background .2s;
}

.world-chip:hover {
  background: rgb(var(--tint) / .09);
}

.world-chip[aria-pressed=true] {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2);
  background: rgb(var(--tint) / .1);
}

.world-dot {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgb(var(--tint) / .2);
  background: radial-gradient(circle at 32% 30%,var(--sw2),var(--sw1) 45%,var(--sw3) 100%);
}

.world-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.world-name b {
  font-size: .9rem;
}

.world-name small {
  color: var(--muted);
  font-size: .72rem;
}

/* ======================================================================
   Today's list (js/todo.js): home card and the list window
   ====================================================================== */

.todo-preview {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
}

.todo-preview li {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 40px;
  color: var(--text);
  font-family: var(--todo-font,inherit);
  font-size: calc(var(--todo-size,1.15rem)*.85);
}

.todo-preview li.done span {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--accent2);
  animation: strike-in .35s ease-out;
}

/* Tapping a task's words on the card strikes it off too. */
.todo-preview li span[data-todo-toggle] {
  cursor: pointer;
}

.todo-star-mark {
  color: #d9a441;
}

/* Round tick box, filled when done. */
.todo-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.todo-check svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.todo-check[aria-pressed=true] {
  border-color: var(--accent2);
  background: var(--accent2);
  color: var(--on);
}

.todo-check[aria-pressed=true] svg {
  opacity: 1;
}

.todo-carry {
  margin: .6rem 0 0;
  color: var(--muted);
}

/* The list window is its own notepad, not the diary page: its own fonts
   (--todo-font), pads, and list marks, chosen in the window (js/todo.js).
   Each pad sets its ink, its faint ink, and the colour of the strike-off line. */
.todo-dlg {
  --ink: #2b2a22;
  --faint: rgba(43,42,34,.55);
  --strike: #e5484d;
  --hover: rgba(0,0,0,.05);
}

.todo-sheet {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: .8rem;
  padding: .5rem 1.2rem;
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--todo-font,var(--body));
  font-size: var(--todo-size,1.2rem);
  line-height: var(--todo-line,1.9);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.6);
}

/* Sticky note: warm yellow, a little curl of shade at the bottom. */
.pad-sticky .todo-sheet {
  background: linear-gradient(170deg,#fff6b8 0%,#ffef94 70%,#f6e27a 100%);
}

/* Grid paper: white with a faint blue grid, like a maths notebook. */
.pad-grid {
  --ink: #1d2a4a;
  --faint: rgba(29,42,74,.5);
  --strike: #e5484d;
}

.pad-grid .todo-sheet {
  background-color: #fbfcff;
  background-image: linear-gradient(rgba(70,120,200,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(70,120,200,.16) 1px,transparent 1px);
  background-size: 22px 22px;
  background-attachment: local;
}

/* Chalkboard: green slate, chalk-white words, yellow chalk to cross off. */
.pad-chalk {
  --ink: #f1efe4;
  --faint: rgba(241,239,228,.55);
  --strike: #f6d55c;
  --hover: rgba(255,255,255,.07);
}

.pad-chalk .todo-sheet {
  border: 8px solid #6b4a2e;
  background: radial-gradient(ellipse at 40% 30%,#3d5e4b,#2c463a 70%,#243b30);
}

/* Night: a dark pad with the theme's colour for crossing off. */
.pad-night {
  --ink: #eceaf2;
  --faint: rgba(236,234,242,.5);
  --strike: var(--accent);
  --hover: rgba(255,255,255,.06);
}

.pad-night .todo-sheet {
  border: 1px solid rgba(255,255,255,.08);
  background: #17161d;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.todo-row,
.todo-new {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: calc(var(--todo-line,1.9)*1em);
  border-radius: 6px;
}

.todo-row:focus-within,
.todo-new:focus-within {
  background: var(--hover);
}

.todo-text,
#todo-new,
[data-light] .todo-dlg .todo-text,
[data-light] .todo-dlg #todo-new {
  flex: 1;
  min-width: 0;
  width: auto;
  height: calc(var(--todo-line,1.9)*1em);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
}

#todo-new::placeholder {
  color: var(--faint);
}

.todo-text:focus,
#todo-new:focus {
  outline: none;
}

/* Crossed off: a thick line through the words, drawn in the pad's strike
   colour, and the words fade. */
.todo-row.done .todo-text {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-thickness: .14em;
  text-decoration-color: var(--strike);
  text-decoration-skip-ink: none;
  animation: strike-in .35s ease-out;
}

/* Striking a task off: the line fades in, so it's clear what happened. */
@keyframes strike-in {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: var(--strike); }
}

/* The mark at the start of each task: a circle, a number, or a bullet.
   Tapping it crosses the task off. */
.todo-dlg .todo-check {
  color: var(--faint);
}

.todo-dlg .todo-check[aria-pressed=true] {
  border-color: var(--strike);
  background: var(--strike);
  color: #fff;
}

.marks-number .todo-check,
.marks-bullet .todo-check {
  width: 2.2em;
  height: auto;
  border: 0;
  border-radius: 4px;
  color: var(--ink);
  font: inherit;
  text-align: right;
}

.marks-bullet .todo-check {
  width: 1.2em;
  text-align: center;
}

.marks-number .todo-check[aria-pressed=true],
.marks-bullet .todo-check[aria-pressed=true] {
  background: none;
  color: var(--strike);
  text-decoration: line-through;
  text-decoration-thickness: .12em;
}

.todo-hint {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.todo-plus {
  flex: none;
  width: 28px;
  color: var(--faint);
  font: 400 1.4rem/1 var(--body);
  text-align: center;
}

.marks-number .todo-plus {
  width: 2.2em;
  text-align: right;
}

.todo-star,
.todo-del {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--faint);
  font: 400 1.05rem/1 var(--body);
  cursor: pointer;
  opacity: .5;
}

.todo-row:hover .todo-star,
.todo-row:hover .todo-del,
.todo-row:focus-within .todo-star,
.todo-row:focus-within .todo-del,
.todo-star[aria-pressed=true] {
  opacity: 1;
}

.todo-star[aria-pressed=true] {
  color: #d9a441;
}

.todo-star:hover,
.todo-del:hover {
  background: var(--hover);
}

#todo-clear[hidden] {
  display: none;
}

/* The pickers above the pad, folded away under "Change the look". */
.todo-look {
  margin-top: .7rem;
}

.todo-look summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.todo-look summary::-webkit-details-marker {
  display: none;
}

.todo-look summary small {
  color: var(--muted);
  font-weight: 400;
}

.todo-look[open] summary {
  border-color: var(--accent);
}

.todo-style {
  display: grid;
  gap: .5rem;
  margin-top: .7rem;
}

.todo-style .chip-row {
  margin: 0;
}

.todo-style .mem-label {
  margin: .2rem 0 0;
}

.todo-font-chip {
  font-size: 1.05rem;
}

.pad-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.pad-chip i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.2);
}

/* Ashy paper: plain coffee-brown paper, no lines or margin, a soft darker
   edge and a faint grain, written in deep brown ink. */
dialog.writer.ashy #writer-text {
  border: 1px solid #8a6446;
  color: #23140b;
  background-color: #b48f6c;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17  0 0 0 0 .1  0 0 0 0 .05  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 42%,#cfab87 0%,#c09a76 45%,#a47d5b 85%,#9a7352 100%);
  background-attachment: local,local;
  box-shadow: inset 0 0 50px rgba(70,40,20,.35);
}

dialog.writer.ashy #writer-text::placeholder {
  color: rgba(35,20,11,.55);
}

dialog.writer.ashy #writer-text:focus {
  outline-color: #6b4a30;
}

/* "Your day" (js/feed.js): a wall of the day's moments in the Today folder.
   Each day is a header (date tile, month, weekday and count, +) over a
   column of entry cards, each with the time it happened. */
.feed-card {
  display: grid;
  gap: 1.6rem;
}

/* A long wall shouldn't lift on hover like the smaller cards. */
.feed-card:hover {
  transform: none;
}

.feed-day {
  display: grid;
  gap: .9rem;
}

.feed-day + .feed-day {
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.feed-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.feed-head > div {
  flex: 1;
  min-width: 0;
}

.feed-head h3 {
  margin: .1rem 0 0;
  font-size: 1.35rem;
}

.feed-head p {
  margin: .15rem 0 0;
  color: var(--muted);
  font-size: .92rem;
}

.feed-date {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--tint) / .06);
  color: var(--accent);
  font: 700 1.5rem/1 var(--body);
}

.feed-plus {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font: 400 1.6rem/1 var(--body);
  cursor: pointer;
}

.feed-plus[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent);
}

.feed-add-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.feed-add-menu label.chip-btn {
  margin: 0;
  cursor: pointer;
}

.feed-list {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed-entry {
  display: block;
  width: 100%;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgb(var(--tint) / .03);
  color: var(--text);
  font: inherit;
  text-align: left;
}

button.feed-entry {
  cursor: pointer;
  transition: border-color .2s;
}

button.feed-entry:hover {
  border-color: var(--accent);
}

.feed-entry h4 {
  margin: .55rem 0 .2rem;
  font-size: 1.05rem;
}

.feed-time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .07);
  color: var(--accent);
  font-size: .85rem;
  font-weight: 600;
}

.feed-time svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.feed-text {
  margin: .35rem 0 0;
  color: var(--muted);
  line-height: 1.55;
  white-space: pre-line;
}

.feed-diary {
  color: var(--text);
  font-family: var(--journal-font,inherit);
  font-size: var(--journal-size,1.1rem);
}

.feed-photo {
  max-width: 360px;
  margin: .7rem auto 0;
}

.feed-photo .poster {
  border-radius: 14px;
}

.feed-tasks {
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}

.feed-tasks li {
  padding: .15rem 0;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--accent2);
  text-decoration-thickness: 2px;
}

.feed-tasks li::before {
  content: '✓ ';
  color: var(--accent2);
  text-decoration: none;
  display: inline-block;
  margin-right: .3rem;
}

.feed-empty {
  margin: 0;
  color: var(--muted);
}

.feed-more {
  justify-self: center;
}

/* Photo memories (js/memories.js): the photo fills the cover and the words
   sit on top of it, like a book cover. Everything on the cover is sized from
   its own width (cqw), so a small cover on the card looks like the big one. */
.poster {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 6px;
  background: #1b1b1b;
  color: #fff;
  line-height: .9;
  text-align: left;
}

.poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-select: none;
}

.poster.tone-bw img {
  filter: grayscale(1) contrast(1.08) brightness(1.03);
}

.poster.tone-faded img {
  filter: sepia(.35) saturate(.7) contrast(.86) brightness(1.08);
}

/* A soft shade behind the words, so they read on any photo. */
.poster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --top: rgba(0,0,0,.32);
  --bottom: rgba(0,0,0,.32);
  background: linear-gradient(var(--top),transparent 34%,transparent 66%,var(--bottom));
}

.poster.shade-light::after {
  --top: rgba(255,255,255,.4);
  --bottom: rgba(255,255,255,.4);
}

.poster.shade-mixed::after {
  --bottom: rgba(255,255,255,.4);
}

.pw-top,
.pw-bottom {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  z-index: 1;
}

.pw-top {
  top: 5cqw;
}

.pw-bottom {
  bottom: 5cqw;
}

.poster [class^=pw-] > div,
.pw-title,
.pw-line,
.pw-name {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}

/* The words' colour (--ink, set on the cover); "Both" is white at the top
   and black at the bottom. */
.poster {
  color: var(--ink,#fff);
}

.ink-mixed .pw-bottom,
.ink-mixed .pw-box.placed[data-box=name] {
  color: #111;
}

/* Still: a clean, tight grotesque, like the cover in the reference. */
.look-still {
  font-family: 'Inter Tight','Helvetica Neue',Arial,sans-serif;
}

.look-still .pw-title,
.look-still .pw-name {
  font-size: calc(15cqw*var(--s,1));
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .88;
}

.look-still .pw-line {
  margin-top: calc(3.5cqw*var(--s,1));
  font-size: calc(4.4cqw*var(--s,1));
  font-weight: 500;
  line-height: 1.2;
}

/* Poster: tall capitals, centred. */
.look-poster {
  font-family: 'Anton',Impact,sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.look-poster .pw-title,
.look-poster .pw-name {
  font-size: calc(17cqw*var(--s,1));
  line-height: .92;
  letter-spacing: .01em;
}

.look-poster .pw-line {
  margin-top: calc(2.5cqw*var(--s,1));
  font-size: calc(4.6cqw*var(--s,1));
  letter-spacing: .18em;
  line-height: 1.3;
}

/* Magazine: a fine serif, with an italic line. */
.look-magazine {
  font-family: 'Instrument Serif',Georgia,serif;
  text-align: center;
}

.look-magazine .pw-title {
  font-size: calc(18cqw*var(--s,1));
  line-height: .86;
  letter-spacing: -.02em;
}

.look-magazine .pw-line {
  margin-top: calc(3cqw*var(--s,1));
  font-size: calc(6.4cqw*var(--s,1));
  font-style: italic;
  line-height: 1.15;
}

.look-magazine .pw-name {
  font-size: calc(10cqw*var(--s,1));
  font-style: italic;
  line-height: 1;
}

/* Archive: typed labels, like the back of an old print. */
.look-archive {
  font-family: 'Space Mono','Courier New',monospace;
}

.look-archive .pw-title {
  font-size: calc(8.6cqw*var(--s,1));
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.look-archive .pw-line {
  margin-top: calc(2.5cqw*var(--s,1));
  font-size: calc(4.2cqw*var(--s,1));
  line-height: 1.35;
}

.look-archive .pw-name {
  font-size: calc(5.2cqw*var(--s,1));
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
}

/* Bold: big, heavy, playful letters. */
.look-bold {
  font-family: 'Bricolage Grotesque','Arial Black',sans-serif;
  font-weight: 800;
}

.look-bold .pw-title,
.look-bold .pw-name {
  font-size: calc(16cqw*var(--s,1));
  line-height: .86;
  letter-spacing: -.05em;
}

.look-bold .pw-line {
  margin-top: calc(3cqw*var(--s,1));
  font-size: calc(5cqw*var(--s,1));
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* Words that were moved sit anywhere on the cover. --s is their size. */
.pw-box {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.look-poster .pw-box:not(.placed),
.look-magazine .pw-box:not(.placed) {
  margin-inline: auto;
}

.pw-box.placed {
  position: absolute;
  z-index: 2;
  max-width: 94%;
}

.pw-box.placed > div {
  margin-top: 0;
}

/* The handles, only while writing: ✥ moves the words, ⤡ resizes them. */
.pw-move,
.pw-size {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  color: #222;
  font: 700 15px/1 var(--body);
  touch-action: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}

.pw-move {
  top: -13px;
  left: -13px;
  cursor: grab;
}

.pw-size {
  right: -13px;
  bottom: -13px;
  cursor: nwse-resize;
}

.pw-box:hover > .pw-move,
.pw-box:hover > .pw-size,
.pw-box.active > .pw-move,
.pw-box.active > .pw-size,
.pw-box.dragging > .pw-move,
.pw-box.dragging > .pw-size {
  opacity: 1;
  pointer-events: auto;
}

.pw-box.active,
.pw-box.dragging {
  outline: 1px dashed currentColor;
  outline-offset: 4px;
}

.pw-box.dragging .pw-move {
  cursor: grabbing;
}

/* Word colours: round swatches. */
#mem-inks {
  gap: .45rem;
}

.ink-swatch {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid rgba(0,0,0,.25);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  cursor: pointer;
}

.ink-swatch.ink-both {
  background: linear-gradient(135deg,#fff 50%,#111 50%);
}

.ink-swatch[aria-pressed=true] {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.mem-reset {
  margin-left: auto;
  font-size: .88rem;
}

/* While writing: faint words show where to type. */
.poster [data-mem-word]:empty::before {
  content: attr(data-placeholder);
  opacity: .55;
}

.poster [data-mem-word] {
  cursor: text;
  border-radius: 2px;
}

.poster [data-mem-word]:focus {
  box-shadow: none;
}

/* The card: "+ New memory" and the covers, side by side. */
.mem-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(118px,1fr));
  gap: .8rem;
  margin-top: .9rem;
}

.mem-new,
.mem-thumb {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.mem-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  aspect-ratio: 2/3;
  border: 1.5px dashed var(--line);
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

.mem-new:hover,
.mem-new:focus-within {
  border-color: var(--accent);
  color: var(--text);
}

.mem-plus {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.mem-thumb .poster {
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.6);
  transition: transform .2s;
}

.mem-thumb:hover .poster {
  transform: translateY(-2px);
}

.mem-card-msg:empty {
  display: none;
}

.hist-mems {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .6rem 0;
}

.hist-mems .mem-thumb {
  width: 96px;
}

/* The window: the cover on the left (on top on phones), choices beside it. */
dialog.mem-dlg[open] {
  display: grid;
  grid-template-columns: auto minmax(260px,1fr);
  gap: 1.6rem;
  width: min(900px,calc(100vw - 2rem));
  padding: 1.4rem;
  overflow: auto;
}

.mem-stage .poster {
  width: min(400px,calc((100vh - 5rem)*2/3));
  border-radius: 8px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
}

.mem-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mem-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mem-top h2 {
  margin: 0;
}

.mem-hint {
  margin: .3rem 0 .4rem;
}

.mem-label {
  margin: 1rem 0 .4rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The style, small: tabs, then one row of choices (it scrolls sideways
   when it doesn't fit). */
.mem-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: .6rem;
  border-bottom: 1px solid var(--line);
}

.mem-tab {
  padding: .45rem .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: 600 .9rem var(--body);
  cursor: pointer;
}

.mem-tab[aria-selected=true] {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.mem-pick {
  flex-wrap: nowrap;
  align-items: center;
  min-height: 52px;
  margin: .5rem 0 0;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.mem-pick[hidden] {
  display: none;
}

.mem-pick .chip-btn {
  flex: none;
  min-height: 38px;
  padding: .3rem .85rem;
  font-size: .9rem;
}

#mem-looks .chip-btn {
  font-size: 1rem;
}

/* The story behind the photo: fills the space beside it. */
.mem-story-label {
  margin: .9rem 0 .35rem;
}

.mem-story {
  flex: 1;
  width: 100%;
  min-height: 9rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(var(--tint) / .04);
  color: var(--text);
  font: 1rem/1.6 var(--body);
  resize: none;
}

.mem-story:focus {
  outline: 2px solid var(--accent2);
  outline-offset: 0;
}

.mem-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: auto;
  padding-top: 1.4rem;
}

.mem-change {
  position: relative;
  margin: 0;
  cursor: pointer;
}

/* Delete and Done: the same size, side by side at the end. */
.mem-delete,
.mem-done {
  min-width: 7.5rem;
  text-align: center;
}

.mem-end {
  display: flex;
  gap: .6rem;
  margin-left: auto;
}

.mem-delete {
  border-color: rgba(229,72,77,.5);
  color: #e5484d;
}

.mem-delete.armed {
  border-color: #e5484d;
  background: #e5484d;
  color: #fff;
}

/* Only for news like "Adding your photo…"; hidden when there's none. */
.mem-msg {
  flex-basis: 100%;
  order: -1;
}

.mem-msg:empty {
  display: none;
}

/* While writing, the photo can be pinched to zoom and dragged to move. */
.mem-stage .poster {
  touch-action: none;
}

.mem-stage .poster img {
  cursor: grab;
}

.poster img {
  transform-origin: center;
}

@media (max-width: 700px) {
  dialog.mem-dlg[open] {
    grid-template-columns: minmax(0,1fr);
    gap: 1rem;
    padding: 1rem;
  }

  .mem-stage .poster {
    width: min(100%,calc((100vh - 18rem)*2/3));
    min-width: 220px;
    margin: 0 auto;
  }

  /* On phones: the heading, then the cover, then the choices. */
  .mem-side {
    display: contents;
  }

  .mem-top {
    order: -1;
  }

  .mem-hint,
  .mem-label {
    margin: 0;
  }

  dialog.mem-dlg[open] {
    gap: .55rem;
  }

  .mem-foot {
    padding-top: .8rem;
  }
}

/* "Your report" on the Your data page (js/report.js) */
.report-periods {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .9rem 0;
}

.report-private {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  cursor: pointer;
}

.report-private input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent2);
}

/* On vintage paper, list bullets and numbers hang in the margin, left of the
   red line (js/lists.js draws them here, over the page). */
.list-margin {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: #8a5a3c;
}

.list-margin span {
  position: absolute;
  left: 0;
  text-align: right;
  white-space: nowrap;
}

/* An invisible copy of the page, used to measure where each line sits. */
.list-mirror {
  position: absolute;
  top: 0;
  left: -10000px;
  box-sizing: border-box;
  border: 0 solid transparent;
  visibility: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}

/* Bullet and numbered list buttons above writing boxes (js/lists.js) */
.list-tools {
  display: flex;
  gap: .4rem;
  margin: .4rem 0;
}

.list-btn {
  min-height: 36px;
  padding: .25rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font: 600 .88rem var(--body);
  cursor: pointer;
}

.list-btn span {
  margin-right: .15rem;
  color: var(--accent2);
  font-weight: 700;
}

.list-btn:hover {
  border-color: var(--accent2);
}

/* ======================================================================
   A section's page: title, one list of tracked items as compact rows, the
   section's cards, and "+ Add something to track" (opens a window)
   ====================================================================== */
.mod-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.mod-head h2 {
  margin-bottom: .2rem;
}

.mod-head p {
  margin: 0;
  color: var(--muted);
}

.mod-edit {
  flex: none;
  min-height: 44px;
  padding: 0 .4rem;
}

.flist {
  margin-top: 1.1rem;
  padding: 1rem 1.2rem 1.1rem;
}

.flist:hover {
  transform: none;
}

/* Today's progress for the section, as one line and a thin bar. */
.flist .sum {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .3rem 1rem;
  margin: 0 0 .4rem;
  color: var(--muted);
}

.flist .sum .sn {
  font: 700 1.05rem var(--body);
  color: var(--text);
}

.flist .sum .pc {
  margin: 0;
}

.flist .sum .bar2 {
  grid-column: 1 / -1;
  margin: 0;
}

.flist .fgrid {
  display: block;
  margin: 0;
}

/* One tracked item: icon · name and value (with a thin bar) · quick action. */
#view .flist .fld {
  margin: 0;
}

.frow {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto auto;
  align-items: center;
  gap: .3rem .9rem;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
}

.frow .ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.frow .ico svg {
  width: 20px;
  height: 20px;
}

.frow .ft h3 {
  margin: 0;
  font: 600 1rem var(--body);
}

.frow .ft small {
  display: block;
  margin-top: .1rem;
}

.frow .rw {
  margin-left: .25rem;
  padding: 0;
  background: none;
  color: var(--accent2);
  font: 700 1rem var(--body);
}

.frow .rw:empty {
  display: none;
}

.frow.done {
  border-color: var(--line);
  box-shadow: none;
}

/* The value: tap it to type a number. */
.frow .fv {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  margin: .1rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
}

.frow .fv:hover .cv {
  text-decoration: underline;
}

.frow .cv {
  color: var(--text);
  font: 700 1rem var(--body);
}

.frow .pc {
  margin: 0 0 0 .3rem;
  padding: 0;
  background: none;
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
}

.frow .bar2 {
  height: 5px;
  margin-top: .4rem;
}

.row-plus {
  min-height: 40px;
  padding: .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--tint) / .07);
  color: var(--text);
  font: 600 .9rem var(--body);
  white-space: nowrap;
  cursor: pointer;
}

.row-plus:hover {
  border-color: var(--accent2);
}

/* A round tick for habits. */
.row-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.row-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.row-check i {
  width: 28px;
  height: 28px;
  border: 2px solid var(--muted);
  border-radius: 50%;
}

.row-check i {
  transition: background .2s;
}

.row-check:has(input:checked) i {
  border-color: var(--accent2);
  background: var(--accent2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

.row-check:focus-within i {
  outline: 3px solid var(--accent2);
  outline-offset: 2px;
}

/* Remove buttons only in Edit mode. */
.frow .rm2 {
  display: none;
}

.flist.editing .frow .rm2 {
  display: block;
}

.flist.editing .row-plus,
.flist.editing .row-check {
  display: none;
}

/* The number box, under the row when the value is tapped. */
.frow .er {
  grid-column: 2 / -1;
}

.frow .er input {
  width: 100%;
  max-width: 220px;
}

.frow .fld-preview {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(var(--journal-size,1.15rem)*.8);
}

.flist-empty {
  margin: .2rem 0 .6rem;
  color: var(--muted);
}

.add-open {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: .6rem;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: none;
  color: var(--accent2);
  font: 600 .95rem var(--body);
  cursor: pointer;
}

/* "+ Add something to track" and "+ Add a note", side by side. */
.add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}

@media (max-width: 420px) {
  .add-row {
    grid-template-columns: 1fr;
  }
  .add-row .add-open + .add-open {
    margin-top: 0;
  }
}

/* Notes under a section's list. */
.notes-card {
  margin-top: 1rem;
}

.notes-card:hover {
  transform: none;
}

.note-list {
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
}

.note-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-top: 1px solid var(--line);
}

.note {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.note small {
  color: var(--muted);
}

.note span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--journal-font,inherit);
  font-size: calc(var(--journal-size,1.15rem)*.85);
  line-height: 1.45;
  white-space: pre-line;
}

.note:hover span {
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.note-row .rm2 {
  display: none;
}

.notes-card.editing .note-row .rm2 {
  display: block;
}

.notes-all {
  margin-top: .4rem;
}

.add-open:hover {
  border-color: var(--accent2);
  background: rgb(var(--tint) / .05);
}

/* The catalog, in its own window. */
dialog.add-dlg {
  width: min(860px,calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}

dialog.add-dlg[open] {
  display: block;
  overflow: auto;
  padding: 1.4rem 1.6rem 1.6rem;
}

.add-top {
  position: sticky;
  top: -1.4rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1.4rem -1.6rem .4rem;
  padding: 1.2rem 1.6rem .8rem;
  background: var(--panel);
}

.add-top h2 {
  margin: 0;
  font-size: 1.5rem;
}

/* Compact tiles in the window: two or more to a row, even on phones. */
dialog.add-dlg .tiles2 {
  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap: .6rem;
}

dialog.add-dlg .tile {
  min-height: 82px;
  padding: .7rem .8rem;
  border-radius: 16px;
}

dialog.add-dlg .tile .ico {
  width: 30px;
  height: 30px;
}

@media (max-width: 560px) {
  dialog.add-dlg .tiles2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  dialog.add-dlg[open] {
    padding: 1.2rem 1rem 1.2rem;
  }
  .add-top {
    margin: -1.2rem -1rem .4rem;
    padding: 1rem 1rem .7rem;
  }
}

.bmi-sum .row-plus {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 40px;
}

@media (max-width: 560px) {
  .frow {
    grid-template-columns: 36px minmax(0,1fr) auto auto;
    gap: .25rem .7rem;
  }
  .frow .ico {
    width: 36px;
    height: 36px;
  }
  .flist {
    padding: .9rem 1rem 1rem;
  }
}

/* Body & BMI, folded to one line until it's opened. */
.bmi-box > summary {
  display: flex;
  align-items: center;
  gap: .9rem;
  list-style: none;
  cursor: pointer;
}

.bmi-box > summary::-webkit-details-marker {
  display: none;
}

.bmi-box[open] > summary {
  margin-bottom: 1rem;
}

.bmi-box[open] > summary .row-plus {
  visibility: hidden;
}

/* "What can I say?" under Log your day. */
.ql-help > summary {
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
}

.ql-help[open] > summary {
  margin-bottom: .6rem;
}

/* Inside the app, the theme's art stays, softened behind the cards. */
.appbg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--shade) / .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

[data-light] .appbg::after {
  background: rgb(var(--shade) / .3);
}

#fx3 {
  opacity: .45;
}

/* ======================================================================
   "Log your day" hints: greyed examples of what you can say (js/commands.js)
   ====================================================================== */
.ql-help {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--line);
}

.ql-help p {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .88rem;
}

.ql-tips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Quiet, grey suggestions; tapping one starts the line with it. */
.ql-tip {
  min-height: 34px;
  padding: .3rem .75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgb(var(--tint) / .05);
  color: var(--muted);
  font: italic 400 .86rem var(--body);
  text-align: left;
  cursor: pointer;
  transition: color .2s,border-color .2s,background .2s;
}

.ql-tip:hover,
.ql-tip:focus-visible {
  border-color: var(--line);
  background: rgb(var(--tint) / .09);
  color: var(--text);
}

/* ======================================================================
   Your week's story (js/story.js)
   ====================================================================== */
.story-card {
  margin-top: 1rem;
}

.story-new {
  display: inline-block;
  margin-left: .4rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--accent2);
  color: var(--on);
  font: 700 .72rem var(--body);
  letter-spacing: .04em;
  vertical-align: middle;
}

.story-title {
  margin: 1rem 0 .3rem;
  color: var(--text);
  font: italic 500 1.3rem/1.35 Georgia,'Times New Roman',serif;
}

.story-teaser {
  margin: 0 0 1rem;
  color: var(--muted);
}

.story-dots {
  display: flex;
  gap: .45rem;
  margin: 1rem 0 .8rem;
}

.story-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgb(var(--tint) / .12);
}

.story-dot.on {
  background: var(--accent2);
}

/* The story window: a book page. */
dialog.story-dlg {
  width: min(640px,calc(100vw - 2rem));
  border-radius: 24px;
}

dialog.story-dlg[open] {
  display: block;
  overflow: auto;
}

.story-page {
  padding: 2.2rem 2.2rem 1.8rem;
  background: #fbf7ef;
  color: #2d2620;
}

.story-eyebrow {
  margin: 0 0 .3rem;
  color: #8c6a2c;
  font: 700 .78rem var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.story-page h2 {
  outline: none;
  margin: 0 0 1.1rem;
  color: #2d2620;
  font: 600 clamp(1.6rem,5vw,2.2rem)/1.15 Georgia,'Times New Roman',serif;
  background: none;
  -webkit-text-fill-color: currentColor;
}

#story-body > p {
  margin: 0 0 .85rem;
  color: #2d2620;
  font: 1.08rem/1.7 Georgia,'Times New Roman',serif;
}

#story-body > p:first-child::first-letter {
  float: left;
  margin: .1rem .5rem 0 0;
  color: #8c6a2c;
  font: 600 3.1rem/.85 Georgia,'Times New Roman',serif;
}

.story-chart {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .5rem;
  height: 110px;
  margin: 1.3rem 0 1rem;
  padding: .8rem .8rem .4rem;
  border-radius: 14px;
  background: #f1eadc;
}

.story-chart div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .3rem;
}

.story-chart i {
  width: 70%;
  border-radius: 6px 6px 3px 3px;
  background: #8c6a2c;
}

.story-chart span {
  color: #7a6d5c;
  font-size: .78rem;
}

/* The week's numbers, folded away under the story. */
.story-numbers {
  margin: 1.2rem 0 1.4rem;
  padding: .7rem 1rem;
  border-radius: 14px;
  background: #f4ecdd;
  color: #4a4036;
}

.story-numbers summary {
  cursor: pointer;
  font-weight: 600;
}

.story-numbers[open] summary {
  margin-bottom: .4rem;
}

.story-highlights {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: #4a4036;
}

.story-highlights li {
  margin: .25rem 0;
}

.story-next {
  margin: 0 0 1.4rem;
  padding: .8rem 1rem;
  border-left: 3px solid #8c6a2c;
  background: #f4ecdd;
  color: #3a3028;
}

/* Every story so far, in History. */
.story-list {
  margin-top: 1rem;
}

.story-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(min(100%,15rem),1fr));
  gap: .7rem;
  margin-top: .8rem;
}

.story-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--tint) / .05);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.story-chip:hover {
  border-color: var(--accent2);
}

.story-chip span {
  font: italic 500 1.02rem Georgia,'Times New Roman',serif;
}

.story-chip small {
  color: var(--muted);
}

/* ======================================================================
   Welcome window after logging in (js/welcome.js)
   ====================================================================== */
dialog.hello-dlg {
  width: min(480px,calc(100vw - 2rem));
  border-radius: 28px;
}

/* One column (the sign-up dialog's two-column layout doesn't apply here). */
dialog.hello-dlg[open] {
  display: block;
  overflow: auto;
}

.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 0%,rgb(var(--tint) / .09),transparent 60%);
}

.hello-ic {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: linear-gradient(160deg,rgb(var(--tint) / .14),rgb(var(--tint) / .03));
  border: 1px solid var(--line);
  color: var(--accent2);
}

.hello-ic svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  fill-opacity: .18;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hello-date {
  margin: 0 0 .3rem;
  color: var(--accent2);
  font: 700 .78rem var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hello h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem,5vw,2.1rem);
}

.hello-wish {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.hello-quote {
  width: 100%;
  margin: 1.5rem 0 1rem;
  padding: 1.2rem 1.2rem 1.3rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.hello-quote figcaption {
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hello-quote blockquote {
  margin: 0;
  color: var(--text);
  font: italic 500 1.25rem/1.45 Georgia,'Times New Roman',serif;
}

.hello-day {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font-size: .9rem;
}

.hello .pill {
  min-width: 12rem;
}

/* ======================================================================
   Mindful moment, in Health (js/mindful.js)
   ====================================================================== */
.mindful {
  margin-top: 1rem;
}

.mf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.mf-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .06);
  color: var(--text);
  font: 600 .93rem var(--body);
  cursor: pointer;
  transition: transform .15s,background .2s;
}

.mf-chip span {
  font-size: 1.2rem;
}

.mf-chip:hover {
  transform: translateY(-2px);
  background: rgb(var(--tint) / .11);
}

.mf-chip[aria-pressed=true] {
  border-color: var(--accent2);
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  color: var(--on);
}

/* On phones the feelings sit three to a row, so the card stays short. */
@media (max-width: 560px) {
  .mf-chips {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: .4rem;
  }
  .mf-chip {
    justify-content: center;
    min-height: 40px;
    padding: .3rem .4rem;
    font-size: .85rem;
  }
  .mf-chip span {
    font-size: 1.05rem;
  }
}

/* The calming panel that opens under the feelings. */
.mf-panel {
  margin-top: 1.1rem;
  padding: 1.3rem 1.3rem 1.2rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: rgb(var(--tint) / .05);
  animation: mf-in .4s ease;
}

@keyframes mf-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.mf-title {
  margin: 0 0 .7rem;
  color: var(--text);
  font: 600 1.15rem/1.35 var(--head);
}

.mf-lines {
  display: grid;
  gap: .55rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.mf-lines li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text);
  line-height: 1.5;
}

.mf-lines li::before {
  content: '';
  position: absolute;
  left: .2rem;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: .7;
}

/* A circle to breathe with: grows for 4s (in), holds, shrinks for 4s (out). */
.mf-breathe {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 .9rem;
}

.mf-breathe p {
  margin: 0;
  color: var(--muted);
}

.mf-breathe b {
  color: var(--text);
}

.mf-circle {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle,var(--accent2),var(--accent));
  opacity: .75;
  animation: mf-breathe 10s ease-in-out infinite;
}

@keyframes mf-breathe {
  0%, 100% { transform: scale(.55); }
  40%, 55% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-circle {
    animation-duration: 16s;
  }
  .mf-panel {
    animation: none;
  }
}

.mf-try {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: rgb(var(--tint) / .06);
  color: var(--text);
}

.mf-note-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--muted);
  font-size: .9rem;
}

#mf-note {
  width: 100%;
  min-height: 3.2rem;
  resize: vertical;
}

.mf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}

.mf-msg:empty {
  display: none;
}

.mf-msg {
  margin: .8rem 0 0;
  color: var(--accent2);
}

.mf-today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.mf-today > span:first-child {
  font-weight: 700;
  color: var(--text);
}

.mf-past {
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgb(var(--tint) / .06);
}

.mf-hint {
  margin: 1rem 0 0;
  color: var(--muted);
}

/* ======================================================================
   Light themes (light: true in theme.js, e.g. Linen, Baby Blush): the few
   places written for dark backgrounds. Colors come from each theme.
   ====================================================================== */

/* Front page: headline text sits on a light page, so no dark text shadows. */
[data-light] .sub,
[data-light] .hero-trust,
[data-light] .hero h1 {
  text-shadow: none;
}

/* Sign-up and log-in dialog: the art fades into paper, not into black. */
[data-light] .auth-art::after {
  background: linear-gradient(180deg,transparent 45%,rgb(var(--shade) / .94)),linear-gradient(90deg,transparent 65%,var(--panel));
}

[data-light] .aa-q {
  text-shadow: none;
}

/* Soft shadows instead of the deep ones used on dark themes. */
[data-light] .glass {
  box-shadow: 0 10px 30px -18px rgb(var(--tint) / .45),inset 0 1px 0 rgba(255,255,255,.7);
}

[data-light] .folder:hover,
[data-light] .folder:focus-visible {
  box-shadow: 0 10px 26px -12px rgb(var(--tint) / .35);
}

[data-light] dialog::backdrop {
  background: rgb(var(--tint) / .25);
}

/* Inputs: white fields with dark text. */
[data-light] input,
[data-light] textarea,
[data-light] select {
  background: rgba(255,255,255,.8);
}

/* The diary window: "Dark page" stays a dark page on light themes. */
[data-light] dialog.writer:not(.paper):not(.ashy) #writer-text {
  border-color: transparent;
  background: #2a2428;
  color: #f4ede9;
}

[data-light] dialog.writer:not(.paper):not(.ashy) #writer-text::placeholder {
  color: rgba(244,237,233,.5);
}

/* The "Add more to track" tiles use colorful dark cards; keep them readable. */
[data-light] .tile {
  color: #fff;
}

/* Calendar days with entries: light text on the accent color. */
[data-light] button.cal-day {
  color: #fff;
}

[data-light] .cal-day.l1 {
  color: var(--text);
}

/* Panels that use a dark wash on dark themes: a light wash here. */
[data-light] .plate {
  background: rgb(var(--shade) / .7);
}