/* Habits, Journal, Goals, School, Health pages. Colours only from theme tokens (styles.css). */

/* ---------- shared bits ---------- */
.chip.hb-static { cursor: default; }
.chip.hb-static:hover { box-shadow: none; }
.chip.on.hb-static:hover { box-shadow: var(--glow); }
.hb-tip { margin: calc(var(--gap) * -.4) 0 var(--gap); }

/* ---------- habits: hero ---------- */
.hb-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; overflow: hidden; }
.hb-hero > .grow { min-width: 220px; }
@media (max-width: 520px) { .hb-hero { justify-content: center; } }
.hb-headline { font-size: calc(24px * var(--text-k)); font-weight: 600; letter-spacing: -.01em; margin: 4px 0 2px; }
.hb-hero.perfect { border-color: var(--a1); box-shadow: var(--glow), var(--shadow); }
.hb-hero.perfect::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--a3) 16%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: hbShine 3.2s ease-in-out infinite; }
@keyframes hbShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.hb-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 300px; }
.hb-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hb-day i { width: 26px; height: 26px; border-radius: 50%; display: block;
  background: conic-gradient(var(--a1) calc(var(--p) * 1%), color-mix(in srgb, var(--a1) 14%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%); mask: radial-gradient(circle, transparent 52%, #000 55%); }
.hb-day.full i { -webkit-mask: none; mask: none; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 0 calc(10px * var(--glow-k)) color-mix(in srgb, var(--a1) 60%, transparent); }
.hb-day small { font: 600 10px var(--mono); color: var(--faint); }
.hb-day.now small { color: var(--a1); }

/* ---------- habits: groups + rows ---------- */
.hb-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--gap); margin-top: var(--gap); align-items: start; }
.hb-group .tag.hb-tag-done { background: color-mix(in srgb, var(--a1) 20%, transparent); }
.hb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--edge-2); border-radius: 12px; background: transparent; transition: background .25s, opacity .25s; }
.hb-row:last-child { border-bottom: 0; }
.hb-row .handle { padding: 10px 4px; font-size: 15px; }
.hb-row.rest { opacity: .55; }
.hb-row.just { animation: hbFlash .7s ease-out; }
@keyframes hbFlash { 0% { background: color-mix(in srgb, var(--a1) 18%, transparent); } 100% { background: transparent; } }
.hb-main { display: flex; align-items: center; gap: 11px; background: none; border: 0; color: inherit; text-align: left; padding: 4px; min-width: 0; width: 100%; cursor: pointer; border-radius: 12px; }
span.hb-main { cursor: default; }
.hb-emoji { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: var(--glass-2); border: 1px solid var(--edge-2); transition: box-shadow .3s, border-color .3s; }
.hb-row.done .hb-emoji { border-color: var(--a1); box-shadow: 0 0 calc(12px * var(--glow-k)) color-mix(in srgb, var(--a1) 40%, transparent); }
.hb-text { display: flex; flex-direction: column; min-width: 0; }
.hb-name { font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.hb-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.hb-flame { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.hb-flame b { font: 700 12.5px var(--mono); color: var(--a3); }
.hb-flame.bump { animation: hbBump .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes hbBump { 0% { transform: scale(1); } 35% { transform: scale(1.55) rotate(-8deg); filter: drop-shadow(0 0 8px var(--a1)); } 100% { transform: scale(1); } }
.hb-dots { display: inline-flex; gap: 3px; align-items: center; }
.hb-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; border: 1px solid var(--edge-2); }
.hb-dots i.done { background: var(--a1); border-color: var(--a1); box-shadow: 0 0 6px color-mix(in srgb, var(--a1) 70%, transparent); }
.hb-dots i.miss { background: color-mix(in srgb, var(--bad) 35%, transparent); border-color: transparent; }
.hb-dots i.today { border-color: var(--a1); }
.hb-dots i.off { opacity: .5; }

/* the big round tick */
.hb-tick { width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; margin-left: 4px; background: none; cursor: pointer; flex: none; display: grid; place-items: center; transition: transform .15s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.hb-tick:active { transform: scale(.88); }
.hb-tick svg { width: 100%; height: 100%; overflow: visible; }
.hb-tick .t { fill: color-mix(in srgb, var(--a1) 6%, transparent); stroke: color-mix(in srgb, var(--a1) 32%, transparent); stroke-width: 2.5; }
.hb-tick .f { fill: none; stroke: var(--a3); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 24px 24px; }
.hb-tick .c { fill: none; stroke: var(--faint); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hb-tick:not(.on) .f { visibility: hidden; }
.hb-tick:hover .t { stroke: var(--a1); }
.hb-tick.on { background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: var(--glow); }
.hb-tick.on .t { fill: none; stroke: transparent; }
.hb-tick.on .f { stroke-dashoffset: 0; }
.hb-tick.on .c { stroke: var(--bg); }
.hb-row.just .hb-tick { animation: hbPop .5s cubic-bezier(.2, .8, .2, 1); }
.hb-row.just .hb-tick .f { animation: hbDraw .45s ease-out both; }
.hb-row.just .hb-tick .c { animation: hbDraw .32s .14s ease-out both; }
@keyframes hbDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hbPop { 0% { transform: scale(.82); } 55% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* sheets: stats, heatmap, emoji picker */
.hb-stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.hb-stat-row .stat, .hl-stats .stat, .jn-home-row .stat { min-width: 0; }
.hb-heat-wrap { display: flex; gap: 6px; }
.hb-heat-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; font: 500 10px var(--mono); color: var(--faint); align-items: center; }
.hb-heat { flex: 1; min-width: 0; display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.hb-heat i, .hb-key { display: block; aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--a1) 7%, transparent); }
.hb-key { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; }
.hb-heat i.done, .hb-key.done { background: var(--a1); box-shadow: 0 0 6px color-mix(in srgb, var(--a1) 50%, transparent); }
.hb-heat i.miss, .hb-key.miss { background: color-mix(in srgb, var(--bad) 30%, transparent); }
.hb-heat i.off, .hb-key.off { background: none; border: 1px solid var(--edge-2); }
.hb-heat i.pre, .hb-heat i.future { opacity: .4; }
.hb-heat i.today { outline: 1.5px solid var(--a1); outline-offset: 1px; }
.hb-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.hb-emoji-grid button { height: 40px; border-radius: 11px; border: 1px solid var(--edge-2); background: none; font-size: 20px; cursor: pointer; padding: 0; transition: transform .15s, border-color .2s; }
.hb-emoji-grid button:hover { transform: scale(1.08); }
.hb-emoji-grid button.on { border-color: var(--a1); background: color-mix(in srgb, var(--a1) 18%, transparent); box-shadow: var(--glow); }
.chip.hb-daychip { min-width: 38px; text-align: center; font-family: var(--mono); font-weight: 600; }
.hb-home .chips { gap: 6px; }
.hb-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- journal ---------- */
.jn-wiz, .jn-feel { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; width: 100%; }
.jn-progress { margin-top: 0; height: 5px; }
.jn-question { font-size: calc(22px * var(--text-k)); font-weight: 600; letter-spacing: -.01em; text-align: center; margin: 6px 0 0; text-wrap: balance; }
.jn-hint { text-align: center; margin: 0; }
.jn-q { display: flex; flex-direction: column; gap: 12px; }
.jn-q.fwd { animation: jnInR .32s cubic-bezier(.2, .8, .2, 1); }
.jn-q.back { animation: jnInL .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes jnInR { from { opacity: 0; transform: translateX(26px); } }
@keyframes jnInL { from { opacity: 0; transform: translateX(-26px); } }
.jn-word { text-align: center; font-weight: 600; font-size: calc(17px * var(--text-k)); color: var(--a1); min-height: 1.4em; }
.jn-word.small { font-size: 13px; color: var(--muted); font-weight: 500; }
.jn-faces { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.jn-face { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--edge-2); background: var(--glass); font-size: 25px; cursor: pointer; padding: 0; display: grid; place-items: center; transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .2s; }
.jn-face:hover { transform: translateY(-2px); }
.jn-face.on { border-color: var(--a1); background: color-mix(in srgb, var(--a1) 18%, transparent); box-shadow: var(--glow); transform: scale(1.12); }
@media (max-width: 400px) { .jn-faces { gap: 6px; } .jn-face { width: 44px; height: 44px; font-size: 22px; } }
.jn-wiz .dial:focus-visible { outline-offset: 6px; border-radius: 28px; }
.jn-faces.big .jn-face { width: 62px; height: auto; border-radius: 16px; padding: 10px 0 8px; gap: 4px; font-size: 30px; }
.jn-faces.big .jn-face small { font: 500 10.5px var(--mono); color: var(--muted); }
.jn-chips { justify-content: center; }
.chip.jn-bigchip { font-size: calc(14.5px * var(--text-k)); padding: 10px 16px; }
.jn-note { max-width: 460px; width: 100%; margin: 0 auto; }
.jn-nav { margin-top: 4px; }
.jn-nav .btn { min-width: 104px; }
@media (hover: none) { .jn-keys { display: none; } }
.jn-badge { width: 78px; height: 78px; border-radius: 50%; margin: 6px auto 0; display: grid; place-items: center; font: 700 36px var(--font); color: var(--bg); background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: var(--glow); animation: hbPop .55s cubic-bezier(.2, .8, .2, 1); }
.jn-today.done { border-color: var(--a1); }
.jn-big { font-size: calc(22px * var(--text-k)); font-weight: 600; margin-top: 4px; letter-spacing: -.01em; }
.jn-start { min-height: 48px; padding: 12px 20px; font-size: 16px; }
.jn-streak-n { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 26px; }
.jn-streak-n b { font-size: 40px; }
.jn-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }
@media (min-width: 1000px) { .jn-sleepbars { grid-column: span 2; } }
.jn-trend svg { margin-top: 10px; display: block; }
.jn-hist { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: inherit; text-align: left; padding: 2px 0; cursor: pointer; min-width: 0; border-radius: 10px; }
.jn-hist:hover .grow { color: var(--text); }
.jn-moodbig { font-size: 24px; flex: none; }
.jn-thinking { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 0; }
.jn-home.todo { border-color: var(--a1); box-shadow: var(--glow), var(--shadow); }
.jn-home-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.jn-home-row .stat { padding: 8px; }
.jn-home-row .stat b { font-size: calc(14px * var(--text-k)); white-space: nowrap; }

/* ---------- goals ---------- */
.gl-cats { gap: 6px; }
.gl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gl-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px; padding: 12px 14px 12px 4px; transition: border-color .2s, box-shadow .2s; }
.gl-card:hover { border-color: var(--a1); }
.gl-card .handle { padding: 12px 6px; }
.gl-card.s-done { opacity: .72; }
.gl-card.s-paused { opacity: .82; }
.gl-open { display: flex; align-items: center; gap: 14px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; padding: 0; min-width: 0; width: 100%; }
.gl-ring { position: relative; flex: none; }
.gl-em { position: absolute; right: -4px; bottom: -4px; font-size: 20px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)); }
.gl-title { display: block; font-weight: 600; font-size: calc(16px * var(--text-k)); overflow-wrap: anywhere; line-height: 1.25; }
.gl-next { display: block; color: var(--muted); margin-top: 6px; }
.gl-late { color: var(--bad); }
.gl-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gl-ms li { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 2px; border-radius: 12px; background: var(--glass); border: 1px solid var(--edge-2); transition: background .25s; }
.gl-ms li .handle { padding: 4px; }
.gl-ms li label { cursor: pointer; min-width: 0; }
.gl-ms li input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; }
.gl-ms li span.grow { overflow-wrap: anywhere; }
.gl-ms li.done span.grow { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--a1); }
.gl-check { cursor: pointer; }
.gl-check input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; flex: none; }
.gl-hero > * + * { margin-top: 16px; }
.gl-hero-title { font-size: calc(clamp(22px, 5vw, 32px) * var(--text-k)); margin: 4px 0; letter-spacing: -.015em; overflow-wrap: anywhere; }
.gl-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.gl-unit { text-align: center; padding: 10px 2px; border-radius: 14px; background: color-mix(in srgb, var(--a1) 6%, transparent); border: 1px solid var(--edge-2); min-width: 0; }
.gl-unit b { display: block; font-weight: 600; font-size: calc(24px * var(--text-k)); line-height: 1.1; }
.gl-count.big .gl-unit { padding: 14px 2px; }
.gl-count.big .gl-unit b { font-size: calc(clamp(30px, 9vw, 68px) * var(--text-k)); text-shadow: 0 0 calc(18px * var(--glow-k)) color-mix(in srgb, var(--a1) 60%, transparent); }
.gl-unit small { display: block; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.gl-date { flex: none; width: 48px; text-align: center; border-radius: 12px; border: 1px solid var(--edge); padding: 4px 0; background: color-mix(in srgb, var(--a1) 6%, transparent); }
.gl-date b { display: block; font-size: 18px; line-height: 1.1; }
.gl-date small { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.gl-home .gl-count { margin: 10px 0; }

/* ---------- health ---------- */
.hl-ring { position: relative; flex: none; --z: var(--faint); }
.z-good { --z: var(--good); } .z-warn { --z: var(--warn); } .z-bad { --z: var(--bad); } .z-none { --z: var(--faint); }
.hl-ring svg { transform: rotate(-90deg); display: block; }
.hl-ring .bg { fill: none; stroke: color-mix(in srgb, var(--z) 16%, transparent); }
.hl-ring .fg { fill: none; stroke: var(--z); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 calc(7px * var(--glow-k)) var(--z)); }
.hl-ring-val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hl-ring-val b { display: block; line-height: 1; color: var(--z); }
.hl-ring-val small { display: block; font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--muted); margin-top: 4px; }
.hl-zone { color: var(--z); font-weight: 600; text-align: center; }
.hl-whoop-main { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.hl-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 8px; flex: 1; min-width: min(100%, 230px); }
.hl-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hl-stats .stat b { font-size: calc(18px * var(--text-k)); }
.hl-home .hl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.hl-home .hl-stats .stat { padding: 7px 9px; }
.hl-home .hl-stats .stat b { font-size: calc(15px * var(--text-k)); }
.hl-setup { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; }
.hl-setup-em { font-size: 34px; line-height: 1; }
.hl-tonight { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--edge-2); background: var(--glass); }
.hl-tonight.on { border-color: var(--a1); box-shadow: var(--glow); }
.hl-tonight-em { font-size: 28px; flex: none; }
.hl-rpe { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid var(--edge); background: color-mix(in srgb, var(--a2) calc(var(--r) * 7%), transparent); }

/* ---------- calm motion: no flourishes ---------- */
:root[data-motion="calm"] :is(.hb-row.just, .hb-row.just .hb-tick, .hb-row.just .hb-tick .f, .hb-row.just .hb-tick .c, .hb-flame.bump, .jn-q, .jn-badge) { animation: none !important; }
:root[data-motion="calm"] .hb-hero.perfect::after { animation: none; display: none; }
:root[data-motion="calm"] :is(.hl-ring .fg, .hb-tick, .jn-face) { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .hb-hero.perfect::after { display: none; } .jn-face.on { transform: none; } }
@media (max-width: 400px) { .jn-faces.big .jn-face { width: 54px; font-size: 26px; } }