/* Two faces: a pixel face for the cat's world (names, numbers, headlines) and Montserrat for reading. */
@font-face { font-family: "Jersey 15"; src: url("fonts/Jersey15.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

/* The hadithguessr design: near-black purple, lilac, square corners, thin rules. */
:root {
  /* Theme colours: these are the Lavender defaults; theme.js overwrites them. */
  --bg: radial-gradient(70vmax 50vmax at 10% 35%, #2a1150 0%, transparent 72%), radial-gradient(60vmax 40vmax at 100% 105%, #1d0b3a 0%, transparent 70%), #09060f;
  --lilac-rgb: 205, 184, 245;
  --on-paper-rgb: 21, 10, 41;
  --glow-rgb: 150, 100, 255;
  --black: #09060f;
  --panel: #0f0919;
  --violet: #7b4fd0;
  --lilac: #cdb8f5;
  --paper: #e4d9fb;
  --on-paper: #150a29;
  --text: #f1edf8;
  --mute: #93889f;
  --rule: rgba(var(--lilac-rgb), .14);
  --wash: rgba(var(--lilac-rgb), .06);
  --line: rgba(var(--lilac-rgb), .32);
  --wrong: #f09ab0;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --sans: "Montserrat", system-ui, sans-serif;
  --pixel: "Jersey 15", "Montserrat", monospace;
  --glow: 0 0 28px rgba(var(--glow-rgb), .5);
  /* Side margin: roomier than the old 16px, so nothing runs edge to edge. */
  --page: clamp(22px, 6.5vw, 32px);
  --section: 32px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  color: var(--text); background: var(--black);
  font: 400 14.5px/1.5 var(--sans);
  -webkit-tap-highlight-color: transparent;
}
/* A separate fixed layer, because fixed page backgrounds are unreliable on phones. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    var(--bg);
  transition: background .4s;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: start; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
canvas { image-rendering: pixelated; display: block; }

.page {
  width: 100%; max-width: 540px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) var(--page) calc(env(safe-area-inset-bottom) + 48px);
  display: flex; flex-direction: column; gap: var(--section);
}
.page.center { min-height: 100dvh; justify-content: space-between; }

/* ---- Surfaces: outlined boxes and paper fills, no rounding ---- */
.glass { border: 1px solid var(--line); background: none; transition: box-shadow .2s, background .2s; }
.glass.paper { color: var(--on-paper); background: var(--paper); border-color: var(--paper); }
.press:hover:not(:disabled) { box-shadow: var(--glow); }
.glass.press:hover:not(:disabled):not(.paper) { background: var(--wash); }
@media (hover: none) { .press:hover:not(:disabled) { box-shadow: none; } .glass.press:hover:not(.paper) { background: none; } }

/* ---- Type ---- */
/* Small labels in plain sentence case, at a readable size. */
.eyebrow { margin: 0; color: var(--mute); font: 500 13px/1.4 var(--sans); }
/* Pixel icons: one em tall, so they sit in the text like a letter. */
.pxi { display: inline-block; height: .9em; width: auto; vertical-align: -.05em; flex: none; }
.chip.icon .pxi { height: .45em; }
.wordmark { font: 700 17px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.wordmark span { color: var(--lilac); }
.mute { color: var(--mute); }

/* ---- Top bar ---- */
.bar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 16px; }
.bar .gap { flex: 1; }
/* 44px tall at least, so every chip is an easy tap on a phone. */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.chip.icon { letter-spacing: .1em; }

/* ---- Hero ---- */
.hero { display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 8px; }
/* The name sits dead centre; the pencil hangs off to its right without pushing it over. */
.name { position: relative; display: inline-block; min-height: 44px; font: 700 clamp(40px, 11vw, 56px)/1.05 var(--sans); letter-spacing: -.04em; }
.name small { position: absolute; left: calc(100% + 6px); bottom: .35em; font-size: 13px; color: var(--mute); opacity: .7; letter-spacing: 0; }
.name:hover small { color: var(--lilac); }
/* ---- Pinned bar: one fixed size, slides down as one piece once the cat and its cards have scrolled away.
   The scene and the three lines are one group, centred in the bar with the same space all round. ---- */
.pinbar {
  position: fixed; z-index: 5; inset: 0 0 auto; height: calc(env(safe-area-inset-top) + 112px);
  display: flex; align-items: center; justify-content: center; text-align: start;
  padding: env(safe-area-inset-top) var(--page) 0;
  background: var(--panel); border-bottom: 1px solid var(--line);
  /* A soft fade with a small drift, not a slide: in gently, out a little quicker. */
  transform: translateY(-10px); opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .26s ease-in, transform .26s ease-in, visibility 0s linear .26s;
}
.pinned .pinbar { transform: none; opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .42s ease-out, transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
/* The words follow a beat behind the cat. */
.pintext { opacity: 0; transition: opacity .2s; }
.pinned .pintext { opacity: 1; transition: opacity .45s ease-out .12s; }
.pingroup { display: flex; align-items: center; gap: 18px; min-width: 0; max-width: 100%; }
/* The scene pops up just after the bar lands. */
.pincat { flex: none; display: flex; }
.pincat { align-items: center; justify-content: center; }
.pincat canvas { transform: scale(.92); opacity: 0; transition: transform .2s, opacity .15s; }
.pinned .pincat canvas { transition: transform .45s cubic-bezier(.34, 1.3, .64, 1) .06s, opacity .35s ease-out .06s; }
.pinned .pincat canvas { transform: none; opacity: 1; }
.pintext { min-width: 0; display: grid; gap: 6px; }
.pinname { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pinname strong { font: 700 19px/1.1 var(--sans); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinname small { flex: none; color: var(--mute); font-size: 13px; }
.pinline { color: var(--text); font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinline.got { color: var(--lilac); }
.pinstats { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; color: var(--mute); font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pinstats .soon { color: var(--lilac); font-weight: 600; }
@media (max-width: 359px) { .pingroup { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .pinbar, .pincat canvas { transition: none; } }
/* Pixel confetti, over everything and never in the way. */
.confetti { position: fixed; inset: 0; z-index: 30; width: 100vw; height: 100vh; pointer-events: none; }
/* Food on its way from the row to the cat. */
.flyfood { position: fixed; z-index: 8; top: 0; left: 0; pointer-events: none; image-rendering: pixelated; will-change: transform; }
/* Level up: the new coat on the left in its own tinted square, the level and the next goal beside it. */
.dialog .levelup { max-width: 400px; gap: 20px; }
.levelup .lv { display: grid; grid-template-columns: 116px 1fr; gap: 18px; align-items: center; }
.levelup .lvcat { display: grid; place-items: center; aspect-ratio: 1; background: var(--wash); }
.levelup .lvcat canvas { width: 92px; height: 92px; animation: up .5s var(--ease); }
.levelup .lvtext { display: grid; gap: 6px; }
.dialog .levelup h3 { font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--lilac); }
.levelup p { margin: 0; font-size: 15px; line-height: 1.35; }
.levelup small { color: var(--mute); font-size: 13px; }
.levelup .buttons { margin-top: 0; }
.levelup .buttons .wide { grid-column: 1 / -1; }
.stage { position: relative; width: 220px; height: 200px; margin: 4px 0; }
.stage canvas { width: 100%; height: 100%; }
#stage { cursor: pointer; }
.stage.sick canvas { filter: saturate(.35); }
.stage.decor { width: 280px; aspect-ratio: 28 / 20; height: auto; }
.compact .top .stage.decor { width: 100%; aspect-ratio: 28 / 20; }
.meow, .reward {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; color: var(--on-paper); background: var(--paper);
  font: 600 13px/1.3 var(--sans);
}
.meow { padding: 4px 10px 5px; border-radius: 10px; margin-bottom: 6px; font-weight: 700; animation: bob 1s steps(2) infinite; }
/* Tail at the bottom-left corner, pointing down at the cat. */
.meow::after { content: ""; position: absolute; left: 0; bottom: -6px; border-style: solid; border-width: 6px 12px 0 0; border-color: var(--paper) transparent transparent transparent; }
.reward { top: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; animation: rise .5s var(--ease); }
.reward canvas, .fishicon { width: 20px; height: 13px; }
.reward .dateicon, .dateicon { width: 13px; height: 13px; }
/* Shelter (Muslimah mode) */
.sheltericon { width: 15px; height: 15px; }
.bigshelter { width: 30px; height: 30px; flex: none; }
.qada-card, .iftar-card { flex-wrap: wrap; }
.qada-card .chip, .iftar-card .chip { margin-left: auto; }
.iftar-card { border-color: rgba(var(--lilac-rgb), .5); }
.shelter-chip:disabled { opacity: .5; }
.shelter-card { border-color: rgba(244, 143, 177, .5); background: rgba(244, 143, 177, .08); flex-wrap: wrap; }
.shelter-card .chip { margin-left: auto; }
.row.excused small { color: #f48fb1; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }
.line { font-size: 17px; color: var(--mute); }

/* ---- Tiles & cards (the "Today's five / Play alone" grid) ---- */
.stack { display: grid; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid2 .tile + .tile { border-left: 0; }
.stack > .grid2 .tile { border-bottom: 0; }
.tile { padding: 16px 24px; display: grid; gap: 8px; min-height: 80px; }
.tile b { font: 600 22px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.fishes { display: flex; gap: 4px; height: 14px; }
.fishes canvas { width: 22px; height: 14px; }
.segments { display: flex; gap: 4px; height: 14px; align-items: center; }
.segments i { flex: 1; height: 2px; background: var(--rule); }
.segments i.on { background: var(--lilac); }

.card { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 80px; padding: 16px 16px 16px 24px; }
.card .text { flex: 1; display: grid; }
.card strong { font-weight: 500; font-size: 16px; }
.card small { font-size: 12.5px; opacity: .65; }
.card .bigfish { width: 34px; height: 22px; flex: none; }
.arrow { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: rgba(var(--on-paper-rgb), .14); }
.countdown { font: 600 26px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--lilac); }
.stack > * + .hint { border-top: 0; }

/* ---- Lists (section title with a rule, rows split by faint rules) ---- */
.section { display: grid; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 0; font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; }
.section-head span { color: var(--mute); font-size: 12px; font-weight: 500; }
.list { border: 0; }
/* Prayers and treats sit in a softly tinted box. */
.list.tinted { margin-top: 12px; padding: 0 16px; border: 1px solid var(--rule); background: rgba(var(--lilac-rgb), .06); }
.list.tinted .row:last-child { border-bottom: 0; }
.row { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--rule); transition: background .2s; }
.row .text { flex: 1; min-width: 0; display: grid; }
.row .text strong { font-weight: 500; transition: color .2s, text-shadow .2s; }
.row .text small { color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .note { color: var(--mute); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row.hot .text strong, .row.hot .note { color: var(--lilac); }
.row.dim { opacity: .45; }
/* Not yours yet: full colour so you can see it, with the price or level in grey. Tap to try it on. */
.row.locked .note { color: var(--mute); }
/* The row being tried on: a soft tint behind the whole row, and "Trying on" in the accent where the price was. */
.row.trying { --tint: rgba(var(--lilac-rgb), .1); background: var(--tint); box-shadow: -12px 0 0 var(--tint), 12px 0 0 var(--tint); }
.row.trying .note { color: var(--lilac); font-weight: 600; }
.row.trying .text strong { color: var(--text); }
.row.missed small { color: var(--wrong); }
.row .pic { width: 40px; height: 40px; flex: none; }
.row .datepic { width: 18px; height: 18px; flex: none; margin: 0 4px; }
.tick { flex: none; width: 16px; height: 16px; border: 1px solid var(--mute); transition: border-color .2s, box-shadow .2s; }
.tick.on { border-color: var(--lilac); background: var(--lilac); box-shadow: inset 0 0 0 3px var(--black); }
@media (hover: hover) {
  button.row:hover:not(:disabled) .text strong { color: var(--lilac); text-shadow: 0 0 16px rgba(var(--glow-rgb), .9); }
  button.row:hover:not(:disabled) .tick:not(.on) { border-color: var(--lilac); box-shadow: 0 0 12px rgba(var(--glow-rgb), .7); }
}

.big-button { display: block; width: 100%; min-height: 48px; padding: 12px 24px; text-align: center; font-weight: 500; }
.hint { padding: 16px 24px; display: grid; gap: 2px; width: 100%; }
.hint strong { font-weight: 500; font-size: 16px; }
.hint span { font-size: 12.5px; }

/* ---- Sheets ---- */
.scrim {
  position: fixed; inset: 0; z-index: 10; background: rgba(5, 3, 10, .7);
  display: flex; align-items: flex-end; justify-content: center;
}
.scrim.enter { animation: fade .2s; }
.sheet {
  width: 100%; max-width: 540px; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--page) calc(env(safe-area-inset-bottom) + 48px);
  display: flex; flex-direction: column; gap: var(--section);
  background: var(--panel); border: 1px solid var(--rule); border-bottom: 0;
}
.sheet.enter { animation: up .3s var(--ease); }
.sheet-head { display: grid; gap: 8px; }
.sheet-head h1 { margin: 0; font: 600 30px/1.15 var(--sans); letter-spacing: -.03em; }
.wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 24px; }
.wallet canvas.wide { width: 150px; height: 108px; }
.tryon { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; }
.tryon > span:first-child { flex-basis: 100%; }
.tryon .gap { flex: 1; }
.wallet canvas { width: 112px; height: 112px; }
.wallet .amount { margin-left: auto; text-align: end; }
.wallet .amount b { display: block; font: 700 56px/1 var(--sans); letter-spacing: -.03em; color: var(--lilac); }

/* Easy / Medium / Hard */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 0; }
.segmented button { min-height: 48px; padding: 8px 4px; border: 1px solid var(--line); text-align: center; font-weight: 500; transition: box-shadow .2s, background .2s; }
.segmented button + button { border-left: 0; }
.segmented button.on { color: var(--on-paper); font-weight: 600; background: var(--paper); border-color: var(--paper); }
@media (hover: hover) { .segmented button:hover:not(.on) { position: relative; z-index: 1; background: var(--wash); box-shadow: var(--glow); } }
.under { padding-top: 12px; color: var(--mute); font-size: 13px; }

.field { width: 100%; min-height: 48px; margin-top: 12px; padding: 12px 16px; color: var(--text); background: none; font: 500 16px var(--sans); border: 1px solid var(--line); outline: none; transition: box-shadow .2s, border-color .2s; }
.field:focus { border-color: var(--lilac); box-shadow: inset 0 0 32px rgba(var(--glow-rgb), .16); }
.field::placeholder { color: var(--mute); }

.dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--page); background: rgba(5, 3, 10, .7); animation: fade .2s; }
.dialog .box { width: 100%; max-width: 380px; padding: 24px; display: grid; gap: 12px; background: var(--panel); }
.dialog h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dialog p { margin: 0; color: var(--mute); font-size: 13.5px; }
.dialog .field { margin-top: 4px; }
.dialog .buttons { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.dialog .buttons button { min-height: 48px; text-align: center; font-weight: 500; }
.dialog .buttons button + button { border-left: 0; }
.menu { position: fixed; z-index: 15; top: calc(env(safe-area-inset-top) + 64px); right: var(--page); background: var(--panel); animation: fade .15s; }
.menu button { display: block; padding: 12px 16px; font-weight: 500; }
.menu button:hover { background: var(--wash); color: var(--lilac); }

/* ---- Vet ---- */
.progress { display: flex; gap: 4px; padding-top: 24px; }
.progress i { flex: 1; height: 2px; background: var(--rule); }
.progress i.on { background: var(--text); }
.speech { padding: 24px; display: grid; gap: 12px; background: var(--panel); }
.speech p { margin: 0; font-size: 18px; line-height: 1.6; animation: rise2 .35s var(--ease); }
.speech cite { font-style: normal; font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--lilac); }
@keyframes rise2 { from { opacity: 0; transform: translateY(8px); } }
.sad { color: var(--wrong); }
.center-text { text-align: center; display: grid; justify-items: center; gap: 8px; }
.center-text h1 { margin: 0; font: 700 clamp(36px, 10vw, 48px)/1.05 var(--sans); letter-spacing: -.04em; }

@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Theme picker */
.swatch { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); }
.colors { display: flex; gap: 8px; }
.colors input { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; }
.colors input::-webkit-color-swatch-wrapper { padding: 0; }
.colors input::-webkit-color-swatch { border: 0; }

/* Compact mode: the cat on the left, health, xp and the prayer card stacked beside it, and tighter lists.
   Normal mode keeps the stacked layout with the cat on top. */
.top { display: grid; gap: var(--section); }
.compact { --section: 22px; }
.compact .top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.compact .top .hero { padding-top: 0; }
.compact .top .name { font-size: clamp(28px, 8.5vw, 52px); }
.compact .top .stage { width: min(220px, 100%); height: auto; aspect-ratio: 22 / 20; }
.compact .top .line { font-size: 14px; }
.compact .top .grid2 { grid-template-columns: 1fr; }
.compact .top .tile { min-height: 0; }
.compact .top .card { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; min-height: 0; }
.compact .top .card .arrow { display: none; }
.compact .top .countdown { font-size: 22px; }
.compact .row { gap: 12px; padding: 7px 0; }
.compact .row .text strong { font-size: 14.5px; }
.compact .row .text small, .compact .row .note { font-size: 12px; }
.compact .row .pic { width: 32px; height: 32px; }
.compact .row .datepic { width: 16px; height: 16px; margin: 0 4px; }
.compact .list.tinted { margin-top: 8px; padding: 0 12px; }
.compact .section-head { padding-bottom: 8px; }
.compact .section-head h2 { font-size: 21px; }
.compact .sheet { gap: 22px; }
.compact .wallet { padding: 12px 16px; }
.compact .wallet canvas { width: 84px; height: 84px; }
.compact .wallet .amount b { font-size: 40px; }
.compact .segmented button { min-height: 40px; }
.compact .hint { padding: 12px 16px; }
@media (min-width: 760px) {
  .compact .page:has(> .top) { max-width: 960px; }
  .compact .top { gap: 48px; }
  .compact .top .line { font-size: 17px; }
  .compact .top .grid2 { grid-template-columns: 1fr 1fr; }

  .compact .top .card { flex-wrap: nowrap; padding: 16px 16px 16px 24px; }
  .compact .top .card .arrow { display: grid; }
  .compact .top .countdown { font-size: 26px; }
}

/* ---- Landing: the split stage. The cat never moves on the left; the story scrolls on the right. ---- */
/* The split is its own box, so the pinned stage lets go once the story is told. */
.lsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* Sections' parts rise in as they arrive (the global reduced-motion rule turns this into a plain appear). */
.landing section > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.landing section.in > * { opacity: 1; transform: none; }
.landing section.in > *:nth-child(2) { transition-delay: .06s; }
.landing section.in > *:nth-child(3) { transition-delay: .12s; }
.landing section.in > *:nth-child(n+4) { transition-delay: .18s; }
.lstage { position: sticky; top: 0; height: 100svh; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--panel); }
.lstage canvas { width: min(36vw, 460px); aspect-ratio: 22 / 20; cursor: pointer; }
.lcaption { min-height: 1.4em; margin: 0; color: var(--lilac); font-weight: 500; }
.lread { display: grid; gap: 136px; padding: 40px clamp(24px, 6vw, 96px) 120px; font-size: 17px; line-height: 1.55; }
.lread section { display: grid; gap: 18px; max-width: 52ch; }
.lread p { margin: 0; color: var(--text); }
.lhead { display: flex; align-items: center; justify-content: space-between; }
.llink { color: var(--text); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.lhero { padding-top: 12vh; }
.lhero h1 { margin: 0; font: 700 clamp(44px, 4.6vw, 68px)/1.02 var(--sans); letter-spacing: -.045em; }
.lhero p { font-size: 19px; color: var(--text); max-width: 34ch; }
.lhero .big-button { width: auto; justify-self: start; padding: 14px 28px; font-size: 17px; }
.lhero small, .lform small { color: var(--mute); font-size: 14px; }
.lhero p { font-size: 19px; }
.landing h2 { margin: 0; font: 700 clamp(30px, 3vw, 42px)/1.08 var(--sans); letter-spacing: -.03em; }
.landing h3 { margin: 0 0 8px; font-size: 19px; }
/* The five prayers, big: each one is eaten as it passes the middle of the screen. */
.lprayers { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 28px; }
.lprayers li { display: flex; align-items: center; gap: 18px; font: 700 clamp(30px, 3vw, 42px)/1.1 var(--sans); letter-spacing: -.03em; }
.lprayers .fishicon { width: 44px; height: 28px; }
.ltreats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ltreats li { display: flex; align-items: center; gap: 14px; }
.ltreats span { display: grid; }
.ltreats small { color: var(--mute); font-size: 14px; }
.lcoats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lcoat { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; text-align: center; background: var(--wash); font-size: 14px; min-height: 44px; }
.lcoat canvas { width: 56px; height: 56px; }
.lcoat small { color: var(--mute); font-size: 14px; }
.loutfits { width: 100%; border-collapse: collapse; font-size: 17px; }
.loutfits td { padding: 12px 8px 12px 0; vertical-align: top; }
.loutfits td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--lilac); }
.loutfits tr { cursor: pointer; }
.loutfits tr:hover td:first-child, .loutfits tr:focus td:first-child { color: var(--lilac); }
/* Full width: breaks the split once the story is told. */
.linstall, .lcta, .lfoot { grid-column: 1 / -1; padding: 96px clamp(24px, 6vw, 96px); }
.linstall { display: grid; gap: 28px; background: var(--wash); }
.lsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.lsteps ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 17px; }
.lcta { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 48px; align-items: end; min-height: 70svh; background: var(--paper); color: var(--on-paper); }
@media (max-width: 1000px) { .lcta { grid-template-columns: 1fr; } }
.lcta h2 { font-size: clamp(48px, 7vw, 104px); line-height: .94; letter-spacing: -.05em; }
.lform { display: grid; gap: 12px; }
.lform label { font-weight: 600; }
.lform .field { color: var(--on-paper); border-color: rgba(var(--on-paper-rgb), .3); font-size: 20px; font-weight: 600; }
.lform .big-button { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); }
.lform small { color: rgba(var(--on-paper-rgb), .7); }
.lfoot { display: flex; justify-content: space-between; gap: 16px; padding-top: 40px; padding-bottom: calc(env(safe-area-inset-bottom) + 32px); font-size: 14px; }
@media (max-width: 760px) {
  .lsplit { grid-template-columns: 1fr; }
  /* On a phone the stage is a strip pinned to the top, so the cat still acts out what you read. */
  .lstage { z-index: 3; height: 34svh; padding-top: env(safe-area-inset-top); }
  .lstage canvas { width: auto; height: 24svh; }
  .lread { gap: 96px; padding: 28px 20px 80px; }
  .lhero { padding-top: 0; }
  .lhero .big-button { width: 100%; }
  .linstall, .lcta { padding: 64px 20px; }
  .lcta { grid-template-columns: 1fr; min-height: auto; }
  .lfoot { flex-direction: column; padding: 32px 20px calc(env(safe-area-inset-bottom) + 24px); }
}
.ltreats .datepic { width: 24px; height: 24px; flex: none; }

/* ---- The cat's world in the cat's own type: names, numbers and headlines in the pixel face. ---- */
.wordmark, .name, .tile b, .countdown, .wallet .amount b, .dialog .levelup h3, .pinname strong,
.section-head h2, .sheet-head h1, .center-text h1, .lhero h1, .landing h2, .lprayers li, .lcta h2 { font-family: var(--pixel); letter-spacing: 0; }
.wordmark { font-size: 19px; font-weight: 600; }
.name { font-weight: 600; }
.section-head h2 { font-size: 19px; font-weight: 600; }
.sheet-head h1 { font-size: 28px; font-weight: 600; }
.lhero h1 { font-size: clamp(44px, 5.2vw, 84px); font-weight: 600; line-height: 1; }
.landing h2 { font-weight: 600; }
.lprayers li { font-weight: 600; }
.lcta h2 { font-weight: 600; letter-spacing: 0; }

/* ---- Fewer boxes. Chrome is quiet, the prayer card leads, lists are rows on the page. ---- */
.bar .glass.chip, .hero .glass.chip { border-color: transparent; background: var(--wash); }
.bar .glass.chip.paper { background: var(--paper); }
.stack { gap: 28px; }
.stack > .grid2 { gap: 24px; }
/* Both stats are the same three lines: the number, its row of fish or its bar, and a short note. */
.stack > .grid2 .tile, .grid2 .tile + .tile { border: 0; padding: 0; min-height: 0; gap: 12px; align-content: start; }
.tile b { font-size: 30px; font-weight: 600; line-height: 1; }
.fishes, .meter { height: 14px; }
.meter { display: flex; align-items: center; background: linear-gradient(var(--rule), var(--rule)) center / 100% 6px no-repeat; }
.meter i { display: block; height: 6px; background: var(--lilac); }
.tilenote { color: var(--mute); font-size: 13px; line-height: 1.2; }
.stack .card:not(.paper):not(.shelter-card):not(.iftar-card):not(.qada-card) { border-color: transparent; background: var(--wash); }
.stack .card { padding: 18px 20px; min-height: 0; }
.stack .card.paper { min-height: 80px; }
.stack .card.paper strong { font-size: 18px; font-weight: 600; }
.next-card strong { font-size: 16px; font-weight: 500; }
.countdown { font-size: 22px; font-weight: 400; }
.list.glass, .list.tinted { border: 0; background: none; padding: 0; margin-top: 0; }
.tick.none { visibility: hidden; }
/* Compact: the same look as normal, just tighter: the cat and its stats side by side, the cards full width under them. */
.compact .top { row-gap: 12px; }
.compact .top .stack { display: contents; }
.compact .top .stack > .grid2 { grid-column: 2; grid-row: 1; align-self: center; }
.compact .top .stack > :not(.grid2) { grid-column: 1 / -1; }
.compact .top .stack .card .arrow { display: grid; }
.compact .top .grid2 { gap: 18px; }
.compact .top .stack > *, .compact .top .grid2 .tile { width: 100%; min-width: 0; box-sizing: border-box; }
.compact .top .grid2 .tile { gap: 8px; }
.compact .top .grid2 .tile b { font-size: 30px; }
.compact .top .stack .card { padding: 16px 18px; }
.compact .top .stack .card.paper strong { font-size: 17px; }
/* Compact: the top bar's buttons are just their icons, at a full 44px tap size. */
.compact .bar .blabel { display: none; }
.compact .bar .chip:has(.pxi) { width: 44px; padding: 0; justify-content: center; }
.compact .bar .chip .pxi { height: 16px; }
.compact .top .hero { align-self: center; gap: 8px; }
.compact .list.tinted { padding: 0; margin-top: 0; }

/* ---- Prayer and treat lists: each row is its fish (or date), the name and one short line, then the time.
   Names and times are in the pixel face; the status line is Montserrat. ---- */
.plist { display: grid; }
.prow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.prow:last-child { border-bottom: 0; }
.pfish { width: 34px; height: 22px; justify-self: center; }
.pdate { width: 24px; height: 24px; justify-self: center; }
.ptext { display: grid; gap: 3px; min-width: 0; }
.ptext strong { font: 600 20px/1.1 var(--pixel); }
.ptext small { color: var(--mute); font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptime { font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--mute); }
/* Done: full fish, the name stays bright. Coming up: quieter. The next one counts down in the accent. */
.prow.prayed .ptext small, .prow.excused .ptext small { color: var(--text); opacity: .7; }
.prow.upcoming .ptext strong { color: rgba(var(--lilac-rgb), .75); }
.prow.next .ptext strong, .prow.next .ptime { color: var(--text); }
.prow.next .ptext small { color: var(--lilac); font-weight: 600; }
.prow.missed .ptext small { color: var(--wrong); }
.prow.beforeInstall { opacity: .45; }
.prow.excused .ptext small { color: #f48fb1; opacity: 1; }
/* Open now: the row lights up and taps to feed. */
.prow.open { margin: 0 -12px; padding: 10px 12px; width: calc(100% + 24px); background: var(--wash); box-shadow: inset 3px 0 0 var(--lilac); }
.prow.open .ptext strong, .prow.open .ptime { color: var(--lilac); }
.prow.open .ptext small { color: var(--text); }
/* Sunrise is a marker, not a prayer. */
.prow.sunrise { min-height: 0; padding: 8px 0; }
.psun { justify-self: center; color: var(--mute); font-size: 15px; }
.prow.sunrise .ptext small { font-weight: 500; }
.prow.sunrise .ptime { font-size: 13px; }
/* Treats read as text, so their names stay in Montserrat. */
.prow.treat .ptext strong { font: 500 15px/1.25 var(--sans); }
.tnote { color: var(--mute); font-size: 13px; font-weight: 500; white-space: nowrap; }
.prow.treat.available .tnote { padding: 8px 14px; color: var(--on-paper); background: var(--paper); font-weight: 600; }
.prow.treat.later, .prow.treat.closed, .prow.treat.paused { opacity: .5; }
.prow.treat.given .tnote { color: var(--lilac); }
@media (hover: hover) {
  button.prow:not(:disabled):hover .ptext strong { color: var(--lilac); text-shadow: 0 0 16px rgba(var(--glow-rgb), .9); }
}
.compact .prow { min-height: 52px; padding: 6px 0; }
.compact .ptext strong { font-size: 17px; }
.tnext { margin: 12px 0 0; color: var(--mute); font-size: 13px; }
.tnext.alone { margin-top: 0; }

/* ---- Menus, sheets, dialogs and adoption follow the same rules: pixel titles, filled buttons, no outlines. ---- */
button.glass:not(.paper):not(.card), .glass.wallet { border-color: transparent; background: var(--wash); }
@media (hover: hover) { button.glass:not(.paper):not(.card):hover:not(:disabled) { background: rgba(var(--lilac-rgb), .13); } }
.glass.segmented { gap: 4px; border-color: transparent; }
.segmented button { border-color: transparent; background: var(--wash); }
.segmented button + button { border-left: 0; }
.segmented button.on { background: var(--paper); border-color: var(--paper); }
.sheet-head .bar { padding-top: 12px; }
.sheet-head .bar h1 { font: 600 28px/1.1 var(--pixel); margin: 0; }
.dialog .box { border-color: var(--rule); gap: 14px; }
.dialog h3 { font: 600 22px/1.15 var(--pixel); }
.dialog .buttons { gap: 8px; }
.dialog .buttons button + button { border-left: 0; }
.menu { border-color: var(--rule); }
.menu button { font-size: 14px; }
.speech { border: 0; }
.deal h1 { margin: 0 0 8px; font: 600 30px/1.1 var(--pixel); }
.deal .list.tinted .row { padding: 14px 0; }
/* The pixel face has one weight: never fake a bold over its pixels. */
.wordmark, .name, .tile b, .countdown, .wallet .amount b, .dialog .levelup h3, .pinname strong, .section-head h2, .sheet-head h1,
.center-text h1, .lhero h1, .landing h2, .lprayers li, .lcta h2, .ptext strong, .dialog h3, .deal h1, .sheet-head .bar h1 { font-weight: 400; font-synthesis: none; }
.prow.treat .ptext strong { font-weight: 500; }

/* ---- One button language: paper-filled for the main action, softly filled for everything else. ---- */
.chip .pxi { height: .95em; }
.textlink { justify-self: center; min-height: 44px; padding: 0 8px; color: var(--mute); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--lilac); }

/* ---- Settings: four groups, one line per setting (label left, control right), notes only where needed. ---- */
.sheet { gap: 28px; }
.group { display: grid; }
.group > h2 { margin: 0 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 400 20px/1.1 var(--pixel); font-synthesis: none; }
.sline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 54px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.group > .sline:last-child { border-bottom: 0; }
.sname { flex: 1; min-width: 0; font-weight: 500; }
.sval { color: var(--mute); font-size: 14px; }
.slink { min-height: 40px; padding: 0 12px; background: var(--wash); color: var(--lilac); font-size: 13px; font-weight: 600; }
.slink.sad { color: var(--wrong); }
@media (hover: hover) { .slink:hover { background: rgba(var(--lilac-rgb), .13); } }
.snote { flex-basis: 100%; color: var(--mute); font-size: 12.5px; line-height: 1.35; padding-bottom: 2px; }
.sfield { width: 62%; max-width: 260px; min-height: 40px; margin: 0; padding: 8px 12px; font-size: 14px; border-color: transparent; background: var(--wash); }
.sfield:focus { border-color: var(--lilac); }
.select.sfield { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px; text-overflow: ellipsis; background: var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 7px; }
.select option { color: #111; }
.segmented.small { gap: 3px; }
.segmented.small button { min-height: 40px; padding: 6px 14px; font-size: 13px; }
.iqamas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 4px 0 10px; border-bottom: 1px solid var(--rule); }
.iq { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.iq span { flex: 1; }
.iq .chip { min-height: 32px; min-width: 32px; padding: 0; }
.iq b { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 0 4px; }
.tswatch { display: grid; gap: 5px; justify-items: center; padding: 5px 3px 7px; font-size: 11.5px; font-weight: 500; text-align: center; background: var(--wash); }
.tswatch span { width: 100%; height: 26px; }
.tswatch.on { box-shadow: inset 0 0 0 2px var(--lilac); color: var(--lilac); font-weight: 600; }
.colors input { width: 36px; height: 36px; }
.chip .pxi { height: .95em; }
.textlink { justify-self: center; min-height: 44px; padding: 0 8px; color: var(--mute); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--lilac); }
/* Two panels, two buttons, side by side in the top bar. */
.bar { gap: 8px; }
.bar .chip { padding: 8px 12px; }
.bar .wordmark { margin-right: auto; }
.bar .gap { display: none; }
.sheet-head .bar h1 { margin-right: auto; }
@media (max-width: 359px) { .blabel { display: none; } }
/* Three buttons in the top bar: icons only on a phone. */
@media (max-width: 520px) {
  .bar .chip:has(.blabel) { width: 44px; padding: 0; justify-content: center; }
  .bar .chip .blabel { display: none; }
  .bar .chip:has(.blabel) .pxi { height: 16px; }
}
/* Jersey 15 draws a size smaller than most faces, so its sizes step up. */
.wordmark { font-size: 22px; }
.name { font-size: clamp(46px, 13vw, 64px); }
.tile b { font-size: 36px; }
.countdown { font-size: 28px; }
.section-head h2, .group > h2 { font-size: 25px; }
.ptext strong { font-size: 24px; line-height: 1; }
.sheet-head .bar h1 { font-size: 34px; }
.dialog h3 { font-size: 27px; }
.pinname strong { font-size: 23px; }
.wallet .amount b { font-size: 64px; }
/* Muslimah mode: the prayer card and the shelter square share one row. */
.cardrow { display: flex; gap: 8px; align-items: stretch; }
.cardrow > .card { flex: 1; min-width: 0; }
.shelter-sq { flex: none; width: 84px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px 4px; text-align: center;
  color: #f48fb1; font-size: 13px; font-weight: 600; background: rgba(244, 143, 177, .12); }
.shelter-sq .sqicon { width: 26px; height: 26px; }
.shelter-sq.off { color: var(--mute); font-weight: 500; background: var(--wash); }
.shelter-sq.off .sqicon { opacity: .55; }
@media (hover: hover) { button.shelter-sq:hover { background: rgba(244, 143, 177, .2); } }
/* Beside the shelter square the next-prayer card stacks: the time, then the countdown under it. */
.cardrow:has(.shelter-sq) .next-card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.cardrow:has(.shelter-sq) .next-card strong { white-space: nowrap; }
.cardrow:has(.shelter-sq) .card.paper { gap: 12px; padding-right: 14px; }

/* ---- Computers: the home screen uses the full width. The cat, its stats and the prayer card stay put on
   the left; the prayer and treat lists run down the right. The pinned bar isn't needed, since the cat
   never scrolls away. ---- */
@media (min-width: 960px) {
  .page:has(> .top), .compact .page:has(> .top) {
    max-width: 1320px; padding-left: clamp(32px, 4vw, 64px); padding-right: clamp(32px, 4vw, 64px);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 6vw, 112px); row-gap: 40px; align-items: start;
  }
  .page:has(> .top) > .bar { grid-column: 1 / -1; }
  .page:has(> .top) > .top { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: 32px; }
  .page:has(> .top) > section { grid-column: 2; }
  .page:has(> .top) .pinbar { display: none; }
  .compact .page:has(> .top) .top { grid-template-columns: 1fr; gap: var(--section); }
  .page:has(> .top) .stage { width: 260px; height: auto; aspect-ratio: 22 / 20; }
  .page:has(> .top) .stage.decor { width: 330px; aspect-ratio: 28 / 20; }
}


/* ---- Forgot to log: an honest way out of the vet, offered first on the sick screen and on missed rows. ---- */
/* How to heal: the honest "prayed but didn't log" sits small and quiet at the bottom, not as a button. */
.dialog .buttons.one { grid-template-columns: 1fr; }
.heal .quiet { justify-self: center; margin-top: 2px; padding: 6px 8px; color: var(--mute); font-size: 12.5px; opacity: .75; }
.heal .quiet:hover { opacity: 1; }
.dialog .box p + p { margin-top: 0; }

/* ---- Adoption steps: one centred column with one rhythm. The progress bar, the step and its buttons stay
   together; the kitten is the same size on every step. On a phone the buttons sit at the bottom for your
   thumb; on a computer the whole column sits in the middle of the screen. ---- */
.page.ob { max-width: 480px; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: 32px; }
.obbody { display: grid; align-content: center; }
.ob .center-text { gap: 24px; }
.ob .center-text h1 { font-size: clamp(30px, 7vw, 40px); line-height: 1.08; max-width: 16ch; text-wrap: balance; }
.ob .obcat { width: 198px; height: 180px; }
.ob .under, .ob .line { margin: 0; padding: 0; max-width: 36ch; text-wrap: pretty; }
.obpick { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.obpick button { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; min-height: 112px; font-weight: 500; }
.obpick button canvas { width: 48px; height: 48px; }
.obpick button.paper { font-weight: 600; }
.obseg { width: 100%; }
.obbuttons { display: flex; gap: 12px; }
.obbuttons .back { width: auto; padding: 12px 22px; }
@media (min-width: 700px) {
  .page.ob { grid-template-rows: auto auto auto; align-content: center; gap: 48px; padding-top: 48px; padding-bottom: 48px; }
  .ob .obcat { width: 264px; height: 240px; }
}

/* ---- Home: the Treats / Goals switch in the section head ---- */
.headswitch { grid-auto-columns: auto; }
.headswitch button { min-height: 36px; padding: 6px 16px; font-size: 13px; }
.section-head:has(.headswitch) { align-items: center; }
.picon { display: grid; place-items: center; color: var(--lilac); }
.picon .pxi { height: 14px; }
.pillnote { padding: 8px 14px; color: var(--on-paper); background: var(--paper); font-weight: 600; }
.linkline { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: start; }
.linkline .pxi { height: 10px; }
.headlink { min-height: 0; padding: 0; background: none; font-size: 12px; font-weight: 500; }
.headlink .pxi { height: 8px; margin-left: 2px; }

/* ---- Journey ---- */
.jstats { display: grid; grid-template-columns: repeat(3, 1fr); }
.jstats .jstat + .jstat { border-left: 0; }
.jstat { display: grid; align-content: start; gap: 4px; padding: 14px 16px; }
.jstat b { font: 400 32px/1 var(--pixel); font-synthesis: none; }
.jstat b.hot { color: var(--lilac); }
.jstat small { color: var(--mute); font-size: 12px; line-height: 1.3; }
.calhead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.calhead h2 { margin: 0; font: 400 20px/1.1 var(--pixel); font-synthesis: none; }
.calhead .gap { flex: 1; }
.calhead .chip.icon { width: 40px; min-height: 40px; padding: 0; }
.calhead .chip.icon .pxi { height: 12px; }
.calhead .chip:disabled { opacity: .35; }
.hgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hgrid .wd { text-align: center; color: var(--mute); font-size: 11px; font-weight: 600; padding: 4px 0; }
.hday { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 52px; border: 1px solid transparent; }
.hday b { font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.hday small { color: var(--mute); font-size: 9px; }
.hday .dots { display: flex; gap: 2px; height: 4px; }
.hday .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text); opacity: .7; }
.hday .dot.goal { background: #f09ab0; opacity: 1; }
.hday.full { background: var(--lilac); color: var(--on-paper); }
.hday.full small { color: var(--on-paper); opacity: .7; }
.hday.some { background: rgba(var(--lilac-rgb), .3); }
.hday.some.s4 { background: rgba(var(--lilac-rgb), .5); }
.hday.missed { background: rgba(255, 110, 130, .25); }
.hday.today { border: 2px solid var(--lilac); }
.hday.future { opacity: .4; }
@media (hover: hover) { .hday:not(:disabled):hover { border-color: var(--lilac); } }
.legend { display: flex; gap: 14px; padding-top: 10px; color: var(--mute); font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; }
.legend i.full { background: var(--lilac); }
.legend i.some { background: rgba(var(--lilac-rgb), .4); }
.legend i.missed { background: rgba(255, 110, 130, .5); }
.goals { display: grid; }
.goalrow { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-align: start; }
.goalrow .ptext strong { font: 500 15px/1.25 var(--sans); }
.ring { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--mute); border-radius: 50%; color: var(--mute); font-size: 10px; font-weight: 700; }
.ring.done { border-color: var(--lilac); color: var(--lilac); }
.arrowsm { color: var(--mute); }
.arrowsm .pxi { height: 10px; }
@media (hover: hover) { .goalrow:hover .ptext strong { color: var(--lilac); } }
.fastrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; }
.fastrow .ptext { flex: 1; }
.fastrow .ptext strong { font: 500 15px/1.25 var(--sans); }
.stepper { grid-auto-columns: 44px; }
.stepper button { min-height: 40px; font-size: 18px; }
.stepper button:disabled { opacity: .35; }
.wideb { width: 100%; min-height: 44px; text-align: center; font-weight: 600; }
.wideb:disabled { opacity: .55; }

/* ---- Goal editor, add-a-goal and day details ---- */
.goaledit .wdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.goaledit .wdays button { min-height: 40px; padding: 0; text-align: center; font-weight: 600; }
.goaledit .gtimes { font: 400 24px/1 var(--pixel); color: var(--lilac); min-width: 24px; text-align: center; }
.goaledit .quiet, .addgoal .quiet { justify-self: center; padding: 6px 8px; font-size: 13px; }
.quiet.sad { color: var(--wrong); }
.goaledit button:disabled { opacity: .45; }
.addgoal .ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.addgoal .ideas .chip { min-height: 38px; padding: 6px 12px; font-size: 13px; }
.addgoal > .paper { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.addgoal .sline { border-bottom: 0; }
.dayd .prow { min-height: 46px; padding: 4px 0; }
.dayd .ptime.bad { color: var(--wrong); }