/* Layaqa — marketing site design system
   Dark, athletic-luxury theme. One accent color (lime) drives every action. */

:root {
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    --bg: #070a08;
    --bg-alt: #0c100d;
    --bg-elevated: #10140f;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);

    --ink: #f5f7f1;
    --ink-dim: rgba(245, 247, 241, 0.72);
    --muted: #92a096;

    --lime: #c7f464;
    --lime-strong: #ddff7f;
    --lime-ink: #0f1a0c;
    --coral: #f4785d;

    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;

    --shadow-soft: 0 30px 80px rgba(0, 0, 0, 0.45);
    --shadow-lime: 0 18px 44px rgba(199, 244, 100, 0.12);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    /* An app, not a document: a quick second tap (a calendar day, a card)
       shouldn't zoom the page. Pinch-to-zoom stays for accessibility. */
    touch-action: manipulation;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

svg {
    fill: currentColor;
}

h1, h2, h3, h4, p {
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
    font-weight: 600;
}

::selection {
    background: var(--lime);
    color: var(--lime-ink);
}

/* Layout helpers */

.container {
    width: min(1200px, calc(100% - 40px));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 128px 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-head {
    max-width: 720px;
    margin-bottom: 56px;
}

.section-head.center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 4px rgba(199, 244, 100, 0.16);
}

h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
    line-height: 1.08;
}

h3 {
    font-size: 1.3rem;
    line-height: 1.25;
}

.lede {
    margin-top: 18px;
    max-width: 620px;
    color: var(--ink-dim);
    font-size: 1.1rem;
    line-height: 1.7;
}

.section-head.center .lede {
    margin-inline: auto;
}

/* Buttons — one action color, everywhere */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease);
}

.btn-primary {
    background: var(--lime);
    color: var(--lime-ink);
    box-shadow: var(--shadow-lime);
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.015);
    background: var(--lime-strong);
    box-shadow: 0 22px 54px rgba(199, 244, 100, 0.18);
}

.btn-primary:active {
    transform: translateY(0) scale(0.99);
}

/* Disabled state: reads as clearly unavailable until a choice is made. Applies
   to any .btn carrying the disabled attribute (e.g. onboarding "Continue"). */
.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-primary:disabled,
.btn-primary[disabled] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--muted);
    box-shadow: none;
}

.btn-ghost:disabled,
.btn-ghost[disabled],
.btn-ghost:disabled:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border);
    color: var(--muted);
    opacity: 0.6;
}

/* Some browsers still fire :hover on a disabled control — keep it inert. */
.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}

.btn-primary:disabled:hover {
    background: rgba(255, 255, 255, 0.08);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    border: 1px solid var(--border-strong);
    backdrop-filter: blur(20px);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 44px;
    padding: 0 20px;
    font-size: 0.9rem;
}

.cta-micro {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.cta-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Reveal-on-scroll */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 900ms var(--ease), transform 900ms var(--ease);
    transition-delay: var(--delay, 0ms);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Header */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 22px 0;
    transition: padding 280ms var(--ease), background 280ms var(--ease), border-color 280ms var(--ease);
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    padding: 14px 0;
    background: rgba(7, 10, 8, 0.72);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 2;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    color: var(--ink-dim);
    font-size: 0.92rem;
    font-weight: 600;
}

.nav-links a {
    position: relative;
    transition: color 200ms ease;
}

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

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-login {
    color: var(--ink-dim);
    font-size: 0.92rem;
    font-weight: 600;
}

.nav-login:hover {
    color: var(--ink);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
}

.nav-toggle .icon-close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    width: min(320px, 84vw);
    height: 100vh;
    padding: 110px 28px 28px;
    background: rgba(10, 13, 10, 0.97);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 320ms var(--ease);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.mobile-nav.is-open {
    transform: translateX(0);
}

.mobile-nav a:not(.btn) {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-dim);
}

.mobile-nav a:not(.btn):hover {
    color: var(--ink);
}

.mobile-nav .btn {
    margin-top: 8px;
}

/* Hero */

.hero {
    position: relative;
    padding: 168px 0 96px;
    isolation: isolate;
    overflow: hidden;
}

.mesh {
    position: absolute;
    inset: -10%;
    z-index: -1;
    filter: blur(60px);
}

.mesh span {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    animation: meshFloat 22s ease-in-out infinite alternate;
}

.mesh span:nth-child(1) {
    top: 8%;
    left: 8%;
    width: 42vw;
    height: 42vw;
    background: radial-gradient(circle, rgba(199, 244, 100, 0.18), transparent 70%);
    animation-duration: 26s;
}

.mesh span:nth-child(2) {
    top: 30%;
    right: 4%;
    width: 34vw;
    height: 34vw;
    background: radial-gradient(circle, rgba(244, 120, 93, 0.09), transparent 70%);
    animation-duration: 30s;
    animation-delay: -6s;
}

.mesh span:nth-child(3) {
    bottom: -10%;
    left: 30%;
    width: 38vw;
    height: 38vw;
    background: radial-gradient(circle, rgba(199, 244, 100, 0.08), transparent 70%);
    animation-duration: 34s;
    animation-delay: -12s;
}

@keyframes meshFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(6%, 8%) scale(1.12); }
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.86fr);
    align-items: center;
    gap: 56px;
}

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

h1 {
    font-size: clamp(2.9rem, 5.6vw, 4.7rem);
    line-height: 1.02;
    margin-bottom: 24px;
}

h1 em {
    font-style: normal;
    color: var(--lime);
}

.hero-copy .lede {
    font-size: 1.2rem;
}

.hero-copy .cta-group {
    margin-top: 36px;
}

/* Hero dashboard mockup */

.dash {
    position: relative;
    width: min(100%, 480px);
    justify-self: end;
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(24px);
    box-shadow: var(--shadow-soft);
    animation: floatY 7s ease-in-out infinite;
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.dash-top p {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-top strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(199, 244, 100, 0.14);
    color: var(--lime);
    font-weight: 800;
    font-size: 0.86rem;
}

.dash-chart {
    margin: 18px 0 14px;
    padding: 16px 14px 10px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}

.dash-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.dash-chart-head span {
    color: var(--muted);
    font-weight: 700;
}

.dash-chart-head strong {
    color: var(--lime);
}

.dash-chart svg {
    width: 100%;
    height: 108px;
    overflow: visible;
}

.chart-line {
    fill: none;
    stroke: var(--lime);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawLine 2.2s var(--ease) forwards 0.3s;
}

.chart-fill {
    opacity: 0;
    animation: fadeIn 1.2s var(--ease) forwards 1.6s;
}

.chart-dot {
    fill: var(--lime);
    animation: dotPulse 2.4s ease-in-out infinite 2s;
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes dotPulse {
    0%, 100% { r: 4; opacity: 1; }
    50% { r: 6.5; opacity: 0.65; }
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.dash-stats div {
    padding: 12px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}

.dash-stats span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dash-stats strong {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.dash-stats strong.up { color: var(--lime); }
.dash-stats strong.down { color: var(--coral); }

.dash-streak {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(199, 244, 100, 0.06);
    border: 1px dashed rgba(199, 244, 100, 0.3);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink-dim);
}

.streak-dots {
    display: flex;
    gap: 4px;
}

.streak-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(199, 244, 100, 0.25);
}

.streak-dots span.on {
    background: var(--lime);
}

/* Proof strip */

.proof {
    padding: 64px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-alt);
}

.proof-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.proof-counter {
    flex: 0 0 auto;
}

.proof-counter strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--lime);
    line-height: 1;
}

.proof-counter span {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.92rem;
}

.proof-counter-hint {
    display: block;
    font-style: normal;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--muted);
    opacity: 0.75;
    margin-top: 2px;
}

.proof-logos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 480px;
}

.logo-pill {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-dim);
    font-weight: 700;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 200ms ease, color 200ms ease;
}

.logo-pill:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

/* Problem section */

.problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1fr);
    gap: 56px;
    align-items: center;
}

.compare {
    display: grid;
    gap: 14px;
}

.compare-card {
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

.compare-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.86rem;
    font-weight: 700;
}

.compare-card.bad header { color: var(--muted); }
.compare-card.good header { color: var(--lime); }

.compare-card svg {
    width: 100%;
    height: 70px;
}

.compare-card.bad path {
    fill: none;
    stroke: var(--muted);
    stroke-width: 2.5;
}

.compare-card.good path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 3;
    stroke-linecap: round;
}

.compare-card footer {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.82rem;
}

.punchline {
    margin-top: 28px;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
}

/* Value props */

.value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    gap: 64px;
    align-items: center;
}

.value-row + .value-row {
    margin-top: 120px;
}

.value-row.reverse {
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr);
}

.value-row.reverse .value-copy {
    order: 2;
}

.value-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
    font-family: var(--font-display);
    font-weight: 700;
}

.value-copy h3 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin-bottom: 14px;
}

.value-copy p {
    color: var(--ink-dim);
    line-height: 1.75;
    font-size: 1.03rem;
}

.value-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.value-tags span {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.value-visual {
    padding: 26px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-soft);
    transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.value-visual:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

/* Log form mockup */

.log-rows {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.log-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.9rem;
    font-weight: 700;
}

.log-row span {
    color: var(--muted);
    font-weight: 600;
}

.log-row input-mock {
    display: inline-block;
}

.log-field {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
    min-width: 64px;
    text-align: center;
}

/* Quiz teaser mockup */

.quiz-mini {
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.quiz-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    margin-bottom: 18px;
}

.quiz-progress span {
    display: block;
    height: 100%;
    width: 40%;
    background: var(--lime);
    border-radius: 999px;
}

.quiz-mini p.q {
    font-weight: 700;
    margin-bottom: 14px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink-dim);
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.chip.selected {
    border-color: var(--lime);
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
}

/* Calorie dial mockup */

.dial-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.dial {
    position: relative;
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--lime) 0deg 265deg, rgba(255, 255, 255, 0.08) 265deg 360deg);
    display: grid;
    place-items: center;
}

.dial::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--bg-elevated);
}

.dial strong {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.dial-label span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.dial-label strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.sync-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-dim);
}

.sync-badge svg {
    width: 13px;
    height: 13px;
    color: var(--lime);
}

/* Trend / streak mockup */

.spark-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.spark-card {
    padding: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.spark-card span {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.spark-card svg {
    width: 100%;
    height: 32px;
}

.spark-card path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.spark-card.up path { stroke: var(--lime); }
.spark-card.down path { stroke: var(--coral); }

.heat-grid {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
}

.heat-grid span {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(199, 244, 100, 0.12);
}

.heat-grid span.l1 { background: rgba(199, 244, 100, 0.3); }
.heat-grid span.l2 { background: rgba(199, 244, 100, 0.55); }
.heat-grid span.l3 { background: var(--lime); }

/* Onboarding preview */

.quiz-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.quiz-card {
    padding: 26px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform 280ms var(--ease), border-color 280ms var(--ease);
}

.quiz-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
}

.quiz-card .q-num {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.quiz-card h4 {
    font-size: 1.08rem;
    margin-bottom: 18px;
    line-height: 1.4;
}

.quiz-card .chip-row {
    flex-direction: column;
}

.quiz-card .chip {
    text-align: left;
}

/* Integrations */

.integ-wheel {
    position: relative;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.integ-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(199, 244, 100, 0.12), transparent 70%), var(--bg-elevated);
    border: 1px solid var(--border-strong);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(199, 244, 100, 0.08), 0 30px 70px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.integ-hub span {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    margin-top: 4px;
}

.integ-spoke {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(199, 244, 100, 0.35), transparent);
    transform-origin: left center;
    z-index: 0;
}

.integ-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--ink-dim);
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: border-color 200ms ease, color 200ms ease;
}

.integ-node:hover {
    border-color: var(--lime);
    color: var(--ink);
}

.integ-copy {
    max-width: 460px;
}

.integ-copy .lede {
    max-width: 100%;
}

/* Testimonials */

.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.testi-card {
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}

.testi-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-soft);
}

.testi-quote-mark {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--lime);
    line-height: 1;
}

.testi-card p.quote {
    color: var(--ink-dim);
    line-height: 1.7;
    font-size: 1.01rem;
}

.testi-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(199, 244, 100, 0.06);
    font-weight: 700;
    font-size: 0.92rem;
}

.testi-stat .arrow {
    color: var(--lime);
}

.testi-attrib {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

/* Pricing */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 860px;
    margin: 0 auto;
    align-items: center;
}

.price-card {
    position: relative;
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}

.price-card.featured {
    border-color: var(--lime);
    background: linear-gradient(165deg, rgba(199, 244, 100, 0.1), rgba(255, 255, 255, 0.02));
    box-shadow: 0 30px 90px rgba(199, 244, 100, 0.08);
    transform: scale(1.035);
}

.price-badge {
    position: absolute;
    top: -14px;
    left: 32px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--lime);
    color: var(--lime-ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.price-tier {
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.price-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    font-family: var(--font-display);
}

.price-amount strong {
    font-size: 2.6rem;
}

.price-amount span {
    color: var(--muted);
    font-weight: 600;
}

.price-sub {
    color: var(--ink-dim);
    font-size: 0.92rem;
    margin-bottom: 24px;
}

.price-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.price-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-dim);
    font-size: 0.92rem;
    line-height: 1.4;
}

.price-list svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--lime);
}

.pricing-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 44px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.pricing-trust div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-trust svg {
    width: 16px;
    height: 16px;
    color: var(--lime);
}

/* FAQ */

.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: none;
    border: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.02rem;
    text-align: left;
    cursor: pointer;
}

.faq-q .plus {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--lime);
    transition: transform 280ms var(--ease), background 280ms var(--ease);
}

.faq-item.is-open .faq-q .plus {
    transform: rotate(45deg);
    background: rgba(199, 244, 100, 0.14);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 380ms var(--ease);
}

.faq-item.is-open .faq-a {
    grid-template-rows: 1fr;
}

.faq-a-inner {
    overflow: hidden;
}

.faq-a-inner p {
    padding: 0 24px 22px;
    color: var(--ink-dim);
    line-height: 1.7;
}

/* Final CTA */

.final-cta {
    position: relative;
    text-align: center;
    padding: 140px 0;
    overflow: hidden;
    isolation: isolate;
}

.final-cta::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(199, 244, 100, 0.1), transparent 65%);
}

.final-cta h2 {
    max-width: 780px;
    margin: 0 auto 20px;
}

.final-cta .lede {
    margin-inline: auto;
    max-width: 560px;
    font-size: 1.1rem;
}

.final-cta .cta-group {
    justify-content: center;
    margin-top: 40px;
}

.final-cta .cta-micro {
    margin-top: 16px;
}

/* Footer */

.site-footer {
    padding: 72px 0 32px;
    border-top: 1px solid var(--border);
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr));
    gap: 40px;
    padding-bottom: 56px;
}

.footer-brand p {
    margin-top: 14px;
    max-width: 320px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: border-color 200ms ease, color 200ms ease;
}

.footer-social a:hover {
    border-color: var(--lime);
    color: var(--lime);
}

.footer-social svg {
    width: 16px;
    height: 16px;
}

.footer-col h4 {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.footer-col a {
    color: var(--ink-dim);
    font-size: 0.94rem;
    transition: color 200ms ease;
}

.footer-col a:hover {
    color: var(--lime);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.82rem;
}

.footer-disclaimer {
    max-width: 620px;
    line-height: 1.6;
}

/* Responsive */

@media (max-width: 1080px) {
    .hero-grid,
    .problem-grid,
    .value-row,
    .value-row.reverse {
        grid-template-columns: 1fr;
    }

    .value-row.reverse .value-copy {
        order: 0;
    }

    .dash,
    .value-visual {
        justify-self: stretch;
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }

    .value-row + .value-row {
        margin-top: 80px;
    }

    .quiz-cards,
    .testi-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .nav-links {
        display: none;
    }

    .nav-login,
    .nav-actions .btn-primary {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .section {
        padding: 88px 0;
    }

    .proof-inner {
        justify-content: center;
        text-align: center;
    }

    .proof-logos {
        justify-content: center;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .price-card.featured {
        transform: none;
        order: -1;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 560px) {
    .hero {
        padding-top: 128px;
    }

    .cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-group .btn {
        width: 100%;
    }

    .dash-stats,
    .spark-grid {
        grid-template-columns: 1fr 1fr;
    }

    .proof-inner {
        flex-direction: column;
    }

    .integ-wheel {
        max-width: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesh span,
    .dash,
    .chart-dot {
        animation: none !important;
    }

    .chart-line,
    .chart-fill {
        animation: none !important;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    html {
        scroll-behavior: auto;
    }

    dialog.modal,
    dialog.modal::backdrop {
        transition: none !important;
    }
}

/* ==========================================================================
   Auth pages (login / register)
   ========================================================================== */

/* The signed-out screens wear the app's look: a flat page under an app bar,
   one card of content, top-aligned on phones and centred on bigger screens. */
.auth-shell {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: start center;
    padding: calc(56px + env(safe-area-inset-top) + 20px) 16px calc(32px + env(safe-area-inset-bottom));
    isolation: isolate;
    overflow: hidden;
}

@media (min-width: 560px) {
    .auth-shell {
        place-items: center;
    }
}

.auth-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: calc(56px + env(safe-area-inset-top));
    /* Full-width backing; the brand and back link line up with a 640px column */
    padding: env(safe-area-inset-top) max(16px, calc((100% - var(--pwa-max, 640px)) / 2 + 16px)) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(7, 10, 8, 0.82);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.auth-topbar-brand {
    display: inline-flex;
    align-items: center;
}

.auth-topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-dim);
    font-size: 0.84rem;
    font-weight: 700;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}

.auth-topbar-back:hover {
    color: var(--ink);
    border-color: var(--border-strong);
    background: var(--surface-strong);
}

.auth-topbar-back svg {
    width: 15px;
    height: 15px;
}

html[dir=rtl] .auth-topbar-back svg {
    transform: scaleX(-1);
}

.auth-shell .mesh {
    position: fixed;
}

.auth-back {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
    transition: color 200ms ease;
}

.auth-back:hover {
    color: var(--ink);
}

.auth-back svg {
    width: 16px;
    height: 16px;
}

.auth-wrap {
    width: min(100%, 440px);
    z-index: 1;
}

/* Legal pages (privacy policy): the auth shell, with a readable column of
   text in place of the centred card. */

.legal-shell { place-items: start center; padding-block: 96px 64px; }

.legal {
    z-index: 1;
    width: min(100%, 720px);
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(16, 20, 15, 0.82);
    backdrop-filter: blur(12px);
    color: var(--ink-dim);
    line-height: 1.7;
}

.legal-nav {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 22px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.legal .legal-nav a {
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.legal .legal-nav a:hover { color: var(--ink); }
.legal .legal-nav a[aria-current="page"] { background: var(--lime); color: var(--lime-ink); }

.legal h1 { margin: 0; color: var(--ink); font-size: clamp(2rem, 5vw, 2.6rem); }
.legal-updated { margin: 6px 0 28px; color: var(--muted); font-size: 0.9rem; }
.legal h2 { margin: 36px 0 10px; color: var(--ink); font-size: 1.2rem; }
.legal p, .legal ul { margin: 0 0 14px; }
.legal ul { padding-inline-start: 20px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; }

@media (max-width: 560px) {
    .legal-shell { padding-top: 76px; }
}

.auth-card {
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}

@media (min-width: 560px) {
    .auth-card {
        padding: 32px;
    }
}

.auth-card h1 {
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.08;
}

.auth-card > p {
    margin-bottom: 24px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.auth-card > p strong {
    color: var(--ink);
}

/* A card about one person (a friend invite) centres on their avatar. */
.auth-card-center {
    text-align: center;
}

.auth-field {
    margin-top: 16px;
}

.auth-field:first-of-type {
    margin-top: 0;
}

.auth-field label {
    display: block;
    margin: 0 2px 8px;
    color: var(--ink-dim);
    font-size: 0.84rem;
    font-weight: 700;
}

.auth-input-wrap {
    position: relative;
}

/* Password requirement checklist */

.password-reqs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.password-reqs li {
    position: relative;
    padding-left: 24px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 200ms ease;
}

/* Unmet: hollow circle. Met: lime check. */
.password-reqs li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    box-sizing: border-box;
    transition: border-color 200ms ease, background 200ms ease;
}

.password-reqs li.is-met {
    color: var(--ink-dim);
}

.password-reqs li.is-met::before {
    border-color: var(--lime);
    background: var(--lime);
}

.password-reqs li.is-met::after {
    content: "";
    position: absolute;
    left: 5px;
    top: calc(0.15em + 3px);
    width: 4px;
    height: 8px;
    border: solid var(--lime-ink);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.auth-input {
    width: 100%;
    height: 50px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    padding: 0 16px;
    color: var(--ink);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.auth-input::placeholder {
    color: rgba(146, 160, 150, 0.6);
}

.auth-input:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.14);
}

.auth-input-wrap .auth-input {
    padding-right: 46px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.password-toggle:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

.password-toggle .icon-hide {
    display: none;
}

.password-toggle.is-visible .icon-show {
    display: none;
}

.password-toggle.is-visible .icon-hide {
    display: block;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 4px;
    color: var(--ink-dim);
    font-size: 0.92rem;
    font-weight: 600;
}

.auth-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--lime);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 4px;
}

.auth-row .auth-check {
    margin: 0;
}

.auth-inline-link {
    color: var(--lime);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.auth-card .btn {
    margin-top: 28px;
}

.auth-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-social .btn {
    margin-top: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-link {
    margin: 24px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.94rem;
}

.auth-link a {
    color: var(--lime);
    font-weight: 700;
}

.auth-legal {
    margin: 18px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.auth-legal a {
    color: var(--ink-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-legal a:hover { color: var(--ink); }

.auth-errors {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(244, 120, 93, 0.3);
    background: rgba(244, 120, 93, 0.1);
    color: #ffb7a3;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-errors strong {
    display: block;
    margin-bottom: 6px;
    color: var(--coral);
}

.auth-errors ul {
    margin: 0;
    padding-left: 18px;
}

/* Email verification screen */

.auth-note {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(199, 244, 100, 0.28);
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime-strong);
    font-size: 0.9rem;
    font-weight: 600;
}

.verify-hint {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.88rem;
}

.verify-logout {
    margin-top: 18px;
    text-align: center;
}

.auth-link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease;
}

.auth-link-btn:hover {
    color: var(--ink);
}

/* Not found (errors/404): the auth card, centred, under a tape measure that
   rolls in from the side and stops on 404. */

.not-found {
    text-align: center;
}

.nf-tape {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    overflow: hidden;
    /* The tape runs off both edges of the card */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.nf-tape-scale rect {
    fill: var(--lime);
}

.nf-tape-scale line {
    stroke: var(--lime-ink);
    stroke-width: 1.5;
}

.nf-tape-scale text,
.nf-tape-marker text {
    fill: var(--lime-ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.nf-tape-marker line {
    stroke: var(--coral);
    stroke-width: 3;
    stroke-linecap: round;
}

.nf-tape-marker circle,
.nf-tape-marker rect {
    fill: var(--coral);
}

.nf-tape-scale {
    animation: nfTapeRoll 1.6s var(--ease) both;
}

.nf-tape-marker {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: nfMarkerDrop 500ms var(--ease) 1.1s both;
}

@keyframes nfTapeRoll {
    from { transform: translateX(-160px); }
    to { transform: translateX(0); }
}

@keyframes nfMarkerDrop {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

.nf-code {
    margin: 0 0 6px;
    color: var(--lime);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.not-found > p:not(.nf-code):not(.auth-link) {
    margin-inline: auto;
    max-width: 34ch;
}

.nf-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.nf-actions .btn {
    flex: 1 1 160px;
    margin-top: 0;
}

/* Reads as the lime text link it sits beside in the other auth cards */
.nf-report {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lime);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nf-report:hover {
    color: var(--lime-strong);
}

.nf-reported {
    color: var(--lime-strong);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .nf-tape-scale,
    .nf-tape-marker {
        animation: none;
    }
}

/* ==========================================================================
   Measurement dashboard
   ========================================================================== */

.app-shell {
    min-height: 100vh;
    padding-bottom: 80px;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 18px 0;
    background: rgba(7, 10, 8, 0.78);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.app-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.app-header .brand {
    font-size: 1.05rem;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-main {
    padding-top: 48px;
}

.app-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.app-intro h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 8px;
}

.app-intro p {
    color: var(--ink-dim);
    font-size: 1.02rem;
}

.btn-icon-danger {
    background: rgba(244, 120, 93, 0.1);
    color: #ffb7a3;
    border: 1px solid rgba(244, 120, 93, 0.24);
}

.btn-icon-danger:hover {
    background: rgba(244, 120, 93, 0.18);
    border-color: rgba(244, 120, 93, 0.4);
    color: #ffd6c9;
    transform: translateY(-1px);
}

.notice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
}

.notice svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.notice-success {
    background: rgba(199, 244, 100, 0.1);
    border: 1px solid rgba(199, 244, 100, 0.28);
    color: var(--lime);
}

.notice-error {
    align-items: flex-start;
    background: rgba(244, 120, 93, 0.1);
    border: 1px solid rgba(244, 120, 93, 0.28);
    color: #ffb7a3;
}

.notice-error ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-weight: 500;
}

.metric-note {
    font-weight: 700;
    color: var(--ink-dim);
}

.metric-note-healthy,
.metric-note-normal {
    color: var(--lime);
}

.metric-note-elevated,
.metric-note-overweight,
.metric-note-underweight {
    color: #f4c95d;
}

.metric-note-high,
.metric-note-obese {
    color: var(--coral);
}

/* Shared dashboard panel */

.panel {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    margin-bottom: 24px;
}

.panel-pad {
    padding: 30px;
}

.panel-head {
    margin-bottom: 22px;
}

.panel-head h2 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.panel-head p {
    color: var(--muted);
    font-size: 0.94rem;
}

/* Settings panel */

.settings-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    flex-wrap: wrap;
}

.settings-copy h2 {
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.settings-copy p {
    color: var(--muted);
    font-size: 0.9rem;
}

.settings-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.select-wrap select {
    appearance: none;
    min-height: 48px;
    min-width: 220px;
    padding: 0 40px 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color 200ms ease;
}

.select-wrap select:focus {
    border-color: var(--lime);
}

.select-wrap select option {
    background: var(--bg-elevated);
    color: var(--ink);
}

/* Measurement form */

.measure-group {
    margin: 0 0 24px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.measure-group:last-of-type {
    margin-bottom: 0;
}

.measure-group legend {
    padding: 0 10px;
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.field-grid > div label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.field-grid input {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.field-grid input::placeholder {
    color: rgba(146, 160, 150, 0.45);
}

/* Custom date picker: replaces the browser-native calendar so it matches the
   app's dark/lime theme instead of the OS default. */
.date-field {
    position: relative;
}

.date-field-trigger {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 14px;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.98rem;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.date-field-trigger:focus-visible,
.date-field.is-open .date-field-trigger {
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(199, 244, 100, 0.12);
    outline: none;
}

.date-field-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--muted);
}

.date-field-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max(260px, 100%);
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

.date-field-panel[hidden] {
    display: none;
}

.date-field-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.date-field-month {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
}

.date-field-nav {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.date-field-nav:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
}

.date-field-nav svg {
    width: 16px;
    height: 16px;
}

.date-field-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.date-field-weekdays span {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
}

.date-field-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-field-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-dim);
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.date-field-day:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink);
}

.date-field-day.is-outside {
    color: rgba(146, 160, 150, 0.4);
}

.date-field-day.is-today {
    box-shadow: inset 0 0 0 1px var(--lime);
}

.date-field-day.is-selected {
    background: var(--lime);
    color: var(--lime-ink);
}

.date-field-today {
    width: 100%;
    margin-top: 12px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink-dim);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.date-field-today:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink);
}

.field-grid input:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(199, 244, 100, 0.12);
}

.form-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* Trends ledger: one row per measurement, styled after the landing page
   ledger (home.css). Rows open the trend sheet below. */

.tl {
    container-type: inline-size;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
}

.tl table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tl th,
.tl td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    text-align: end;
    white-space: nowrap;
}

.tl thead th {
    padding-block: 15px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
}

.tl thead th:first-child,
.tl tbody th { text-align: start; }

.tl td em,
.tl-value em,
.tl-list em {
    margin-inline-start: 3px;
    font-style: normal;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--muted);
}

.tl-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.tl-row:hover { background: rgba(236, 238, 230, 0.04); }

.tl-open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tl-open:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 4px;
    border-radius: 4px;
}

.tl-open svg {
    width: 15px;
    height: 15px;
    fill: var(--muted);
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s var(--ease);
}

.tl-row:hover .tl-open svg {
    opacity: 1;
    transform: translateX(2px);
}

html[dir=rtl] .tl-open svg { transform: scaleX(-1); }
html[dir=rtl] .tl-row:hover .tl-open svg { transform: scaleX(-1) translateX(2px); }

.tl-group th {
    padding-bottom: 2px;
    border-bottom: 0;
    font-weight: 600;
}

.tl-sub th { padding-inline-start: 40px; }
.tl-sub .tl-open { font-weight: 500; color: var(--ink-dim); }

.tl-tag {
    display: inline-block;
    margin-inline-start: 10px;
    padding: 2px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted);
    vertical-align: 2px;
}

.tl-chg { font-weight: 600; }

.tl .tl-spark {
    width: 24%;
    padding-block: 8px;
}

.tl-spark svg {
    display: block;
    width: 100%;
    min-width: 56px;
    height: 30px;
    overflow: visible;
}

.tl-spark path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.tl-foot {
    margin: 0;
    padding: 16px 20px;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Replays each time the tab opens, like the leaderboard's entrance. */
.pwa-screen.is-active .tl tbody tr {
    animation: tlRowIn 0.6s var(--ease) both;
    animation-delay: calc(var(--r, 0) * 45ms + 0.1s);
}

.pwa-screen.is-active .tl-spark svg {
    animation: tlSparkIn 0.9s var(--ease) both;
    animation-delay: calc(var(--r, 0) * 45ms + 0.3s);
}

@keyframes tlRowIn {
    from { opacity: 0; transform: translateX(-18px); }
}

@keyframes tlSparkIn {
    from { clip-path: inset(-4px 100% -4px 0); }
    to { clip-path: inset(-4px 0 -4px 0); }
}

html[dir=rtl] .pwa-screen.is-active .tl tbody tr { animation-name: tlRowInRtl; }

@keyframes tlRowInRtl {
    from { opacity: 0; transform: translateX(18px); }
}

@container (max-width: 560px) {
    .tl .tl-w1, .tl-tag { display: none; }
    .tl th, .tl td { padding-inline: 14px; }
    .tl-sub th { padding-inline-start: 28px; }
}

@container (max-width: 400px) {
    .tl th, .tl td { padding-inline: 10px; font-size: 0.875rem; }
    .tl-sub th { padding-inline-start: 20px; }
    .tl .tl-spark { width: 22%; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-screen.is-active .tl tbody tr,
    .pwa-screen.is-active .tl-spark svg { animation: none; }
}

/* Trend sheet: one measurement in full */

.tl-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.tl-figure {
    display: none;
    flex: 0 0 auto;
    width: 116px;
    height: 155px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}

.has-figure .tl-figure { display: block; }
.tl-figure .loop { cursor: default; }

.tl-hero-text { flex: 1 1 auto; min-width: 0; }

.tl-kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.tl-value {
    margin: 6px 0 4px;
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tl-delta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.tl-delta span { font-weight: 700; color: var(--ink); }

.tl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 8px;
    margin: 14px 0 0;
}

.tl-facts div {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.tl-facts dt {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
}

.tl-facts dd {
    margin: 2px 0 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tl-chart { margin-bottom: 22px; }

.tl-list-head {
    margin: 0 0 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.tl-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tl-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 64px;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}

.tl-list li:last-child { border-bottom: 0; }
.tl-list span { color: var(--ink-dim); }
.tl-list b { font-weight: 600; }
.tl-list li:first-child b { color: var(--lime); }

.tl-list i {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: end;
}

/* Daily ratings in Trends: a ledger under the measurements, and a sheet
   charting each one by week, month or year */

.tl-section {
    margin: 28px 4px 12px;
    font-size: 1.1rem;
}

.tl-wellness .wl-row-energy,
.wl-energy { --tint: #f6d26b; }
.tl-wellness .wl-row-mood,
.wl-mood { --tint: var(--lime); }
.tl-wellness .wl-row-sleep,
.wl-sleep { --tint: #b4c2ff; }

.tl-wellness .tl-spark path { stroke: var(--tint); }

.wl-range {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.wl-range-glider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: calc(4px + var(--idx) * (100% - 8px) / 3);
    width: calc((100% - 8px) / 3);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tint) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 40%, transparent);
    transition: inset-inline-start 320ms var(--ease);
}

.wl-range button {
    position: relative;
    padding: 8px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease;
}

.wl-range button.is-active { color: var(--ink); }
.wl-range button:active { transform: scale(0.97); }

.wl-hero { margin-bottom: 16px; }

.wl-detail .tl-value span { color: var(--tint); }

.wl-word {
    margin-inline-start: 6px;
    color: var(--ink-dim);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
}

.tl-delta.is-up span { color: var(--lime); }
.tl-delta.is-down span { color: #ffb29e; }

.wl-chart svg { height: 180px; }

.wl-bar {
    fill: var(--tint);
    transform-box: fill-box;
    transform-origin: bottom;
    animation: wlGrow 520ms var(--ease) both;
}

.wl-bar.is-empty {
    fill: rgba(255, 255, 255, 0.08);
    animation: none;
}

.wl-avg {
    stroke: var(--ink);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.55;
    animation: hmFade 400ms 300ms ease both;
}

.wl-list li { grid-template-columns: minmax(0, 1fr) auto 84px; }
.wl-list li:first-child b { color: var(--tint); }

@keyframes wlGrow {
    from { transform: scaleY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wl-bar,
    .wl-avg { animation: none; }
    .wl-range-glider { transition: none; }
}

/* Trend charts */

.trend-card {
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    transition: transform 260ms var(--ease), border-color 260ms var(--ease);
}

.trend-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.trend-card strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.trend-latest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex: 0 0 auto;
}

.trend-latest-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

.trend-latest-value em {
    margin-left: 3px;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted);
}

.trend-delta {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.trend-card svg {
    display: block;
    width: 100%;
    height: 172px;
    margin-top: 6px;
    overflow: visible;
}

.trend-card polyline {
    fill: none;
    stroke: var(--lime);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-area {
    stroke: none;
}

.trend-card circle {
    fill: var(--lime);
    stroke: var(--bg);
    stroke-width: 2;
    transition: r 200ms ease;
}

.trend-card circle.is-last {
    stroke: rgba(199, 244, 100, 0.28);
    stroke-width: 4;
}

.trend-card circle:hover {
    r: 7;
}

.chart-grid-line {
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 1;
}

.chart-axis-y,
.chart-axis-x {
    fill: var(--muted);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
}

.chart-value {
    fill: var(--ink-dim);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 600;
}

.chart-value.is-last {
    fill: var(--lime);
    font-size: 11px;
    font-weight: 700;
}

.empty-note {
    padding: 6px 30px 30px;
    color: var(--muted);
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-dim);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-strong);
    color: var(--ink);
    transform: translateY(-1px);
}

.icon-btn svg {
    width: 16px;
    height: 16px;
}

.icon-btn-danger {
    border-color: rgba(244, 120, 93, 0.24);
    background: rgba(244, 120, 93, 0.08);
    color: #ffb7a3;
}

.icon-btn-danger:hover {
    background: rgba(244, 120, 93, 0.18);
    border-color: rgba(244, 120, 93, 0.4);
    color: #ffd6c9;
}

/* Modals */

.btn-danger {
    background: var(--coral);
    color: #2a0d06;
    box-shadow: 0 18px 40px rgba(244, 120, 93, 0.12);
}

.btn-danger:hover {
    background: #ff8a68;
    transform: translateY(-2px);
}

dialog.modal {
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--ink);
    width: min(720px, calc(100% - 40px));
    max-height: min(86vh, 900px);
    box-shadow: var(--shadow-soft);
    opacity: 1;
    transform: scale(1);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease), overlay 220ms var(--ease) allow-discrete, display 220ms var(--ease) allow-discrete;
}

dialog.modal:not([open]) {
    opacity: 0;
    transform: scale(0.96);
}

@starting-style {
    dialog.modal[open] {
        opacity: 0;
        transform: scale(0.96);
    }
}

dialog.modal::backdrop {
    background: rgba(3, 5, 4, 0.72);
    backdrop-filter: blur(6px);
    transition: background 220ms ease, overlay 220ms ease allow-discrete, display 220ms ease allow-discrete;
}

@starting-style {
    dialog.modal[open]::backdrop {
        background: rgba(3, 5, 4, 0);
    }
}

dialog.modal-sm {
    width: min(440px, calc(100% - 40px));
}

.modal-card {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    border-bottom: 1px solid var(--border);
}

.modal-head h2 {
    font-size: 1.2rem;
}

.modal-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease;
}

.modal-close:hover {
    color: var(--ink);
    border-color: var(--border-strong);
}

.modal-close svg {
    width: 16px;
    height: 16px;
}

.modal-body {
    padding: 22px 26px;
    overflow-y: auto;
}

.modal-body p {
    color: var(--ink-dim);
    line-height: 1.6;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 26px;
    border-top: 1px solid var(--border);
}

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

    .settings-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-intro {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .field-grid {
        grid-template-columns: 1fr;
    }

    .auth-card {
        padding: 28px 22px;
    }

    .panel-pad,
    .settings-panel {
        padding: 22px;
    }
}

/* ==========================================================================
   Onboarding slideshow
   Four steps in the app's own look: a flat page under an app bar with a
   segmented progress strip, grouped rows like Settings, and the action
   pinned to the bottom of the screen.
   ========================================================================== */

.onb-body {
    height: 100vh;
    height: 100dvh; /* excludes mobile browser chrome so the layout can't jump */
    overflow: hidden;
    background: var(--bg);
}

.onb-shell {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.onb-topbar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 20;
    width: min(var(--pwa-max, 640px), 100%);
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
}

.onb-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}

.onb-back[hidden] {
    display: none;
}

.onb-back:hover {
    background: var(--surface-strong);
    border-color: var(--border-strong);
}

.onb-back:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.onb-back svg {
    width: 18px;
    height: 18px;
}

html[dir=rtl] .onb-back svg {
    transform: scaleX(-1);
}

/* One segment per step, like the week strip on Home */
.onb-progress {
    flex: 1 1 auto;
    display: flex;
    gap: 6px;
}

.onb-progress-seg {
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.onb-progress-seg::after {
    content: '';
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--lime);
    transition: width 420ms var(--ease);
}

.onb-progress-seg.is-current::after {
    width: 50%;
}

.onb-progress-seg.is-done::after {
    width: 100%;
}

.onb-progress-count {
    flex: 0 0 auto;
    min-width: 2.2em;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.onb-viewport {
    position: relative;
    height: 100vh;
    height: 100dvh;
}

.onb-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding-top: calc(56px + env(safe-area-inset-top));
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    transition: transform 380ms var(--ease), opacity 260ms ease;
}

html[dir=rtl] .onb-slide {
    transform: translateX(-28px);
}

.onb-slide.is-prev {
    transform: translateX(-28px);
}

html[dir=rtl] .onb-slide.is-prev {
    transform: translateX(28px);
}

.onb-slide.is-active,
html[dir=rtl] .onb-slide.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* The content scrolls; the foot stays put at the bottom of the screen. */
.onb-slide-inner {
    flex: 1 1 auto;
    min-height: 0;
    width: min(var(--pwa-max, 640px), 100%);
    margin-inline: auto;
    padding: 20px 16px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.onb-eyebrow {
    margin-bottom: 6px;
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onb-question {
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 6.6vw, 2.2rem);
    line-height: 1.08;
}

.onb-sub {
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.onb-slide-foot {
    flex: 0 0 auto;
    width: min(var(--pwa-max, 640px), 100%);
    margin-inline: auto;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid transparent;
}

.onb-slide-foot .btn {
    width: 100%;
    justify-content: center;
}

/* Goal cards */

.onb-goal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.onb-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 68px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    text-align: start;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--ease);
}

.onb-card:hover {
    border-color: var(--border-strong);
}

.onb-card:active {
    transform: scale(0.98);
}

.onb-card:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.onb-card.is-selected {
    border-color: rgba(199, 244, 100, 0.6);
    background: rgba(199, 244, 100, 0.08);
}

.onb-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime);
    transition: background 200ms ease, color 200ms ease;
}

.onb-card.is-selected .onb-card-icon {
    background: var(--lime);
    color: var(--lime-ink);
}

.onb-card-icon svg {
    width: 18px;
    height: 18px;
}

.onb-card-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.onb-card-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
}

.onb-card-hint {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.onb-card-check {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    transform: scale(0);
    transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onb-card.is-selected .onb-card-check {
    transform: scale(1);
}

.onb-card-check svg {
    width: 12px;
    height: 12px;
}

/* Grouped rows, like Settings */

.onb-list {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.onb-list > :not(:first-child),
#onb-tape-rows > .onb-row {
    border-top: 1px solid var(--border);
}

/* The tape rows' wrapper draws no line of its own; each row brings one. */
.onb-list > #onb-tape-rows {
    border-top: 0;
}

.onb-row {
    width: 100%;
    min-height: 64px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: start;
}

.onb-row-text {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.onb-row-label {
    font-weight: 700;
    font-size: 0.95rem;
}

.onb-row-hint {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.onb-list-label {
    margin: 24px 4px 10px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.onb-list-label[hidden] {
    display: none;
}

/* Two-way choice inside a row */
.onb-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
}

.onb-seg {
    padding: 7px 13px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.onb-seg:hover {
    color: var(--ink);
}

.onb-seg.is-selected {
    background: var(--lime);
    color: var(--lime-ink);
}

.onb-seg:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

/* Number field with its unit, sitting at the end of a row */
.onb-num {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 44px;
    padding-inline-end: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.onb-num:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.14);
}

.onb-num-input {
    width: 76px;
    height: 100%;
    padding: 0 4px 0 12px;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: end;
    outline: none;
    -moz-appearance: textfield;
}

.onb-num-input::-webkit-outer-spin-button,
.onb-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.onb-num-input::placeholder {
    color: rgba(146, 160, 150, 0.45);
}

.onb-num-unit {
    min-width: 1.6em;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.onb-date-input {
    flex: 0 0 auto;
    height: 44px;
    max-width: 100%;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--ink);
    color-scheme: dark;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.onb-date-input:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.14);
}

/* Step 3 — tape rows and the chips that add more */

.onb-tip-btn {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(146, 160, 150, 0.4);
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 160ms ease;
}

.onb-tip-btn:hover,
.onb-tip-btn[aria-expanded="true"] {
    color: var(--lime);
}

.onb-remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    margin-inline-end: -6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

/* Holds the remove button's place on the weight row, which can't be removed */
.onb-remove-spacer {
    width: 32px;
    flex: 0 0 auto;
    margin-inline-end: -6px;
}

.onb-remove:hover {
    background: rgba(244, 120, 93, 0.12);
    color: var(--coral);
}

.onb-remove:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 0;
}

.onb-remove svg {
    width: 14px;
    height: 14px;
}

.onb-tip {
    flex: 1 0 100%;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms var(--ease);
}

.onb-tip.is-open {
    grid-template-rows: 1fr;
}

.onb-tip-inner {
    overflow: hidden;
}

.onb-tip p {
    padding-block: 2px;
    padding-inline-start: 10px;
    border-inline-start: 2px solid rgba(199, 244, 100, 0.4);
    color: var(--ink-dim);
    font-size: 0.84rem;
    line-height: 1.5;
}

.onb-tape-row.is-new {
    animation: onbRowIn 420ms var(--ease);
}

@keyframes onbRowIn {
    from { opacity: 0; transform: translateY(-6px); background: rgba(199, 244, 100, 0.08); }
    to { opacity: 1; transform: none; background: transparent; }
}

.onb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.onb-chips[hidden] {
    display: none;
}

.onb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 9px 11px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: none;
    color: var(--ink-dim);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.onb-chip:hover {
    border-color: var(--lime);
    border-style: solid;
    color: var(--ink);
    background: rgba(199, 244, 100, 0.06);
}

.onb-chip:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.onb-chip svg {
    width: 14px;
    height: 14px;
    color: var(--lime);
}

/* Step 4 — pace choices */

.onb-choice {
    cursor: pointer;
    transition: background 160ms ease;
}

.onb-choice:hover {
    background: rgba(255, 255, 255, 0.035);
}

.onb-choice:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: -2px;
}

.onb-choice.is-selected {
    background: rgba(199, 244, 100, 0.07);
}

.onb-radio {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    color: transparent;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.onb-radio svg {
    width: 13px;
    height: 13px;
    transform: scale(0);
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onb-choice.is-selected .onb-radio {
    border-color: var(--lime);
    background: var(--lime);
    color: var(--lime-ink);
}

.onb-choice.is-selected .onb-radio svg {
    transform: scale(1);
}

.onb-wellness {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    border: 1px dashed var(--border);
}

.onb-wellness p {
    color: var(--ink-dim);
    font-size: 0.86rem;
    line-height: 1.5;
}

.onb-wellness-dots {
    display: flex;
    flex: 0 0 auto;
}

.onb-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    background: var(--tint);
}

.onb-dot + .onb-dot {
    margin-inline-start: -5px;
}

.onb-dot-energy { --tint: #f6d26b; }
.onb-dot-mood { --tint: var(--lime); }
.onb-dot-sleep { --tint: #b4c2ff; }

/* Completion */

.onb-slide-complete .onb-slide-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.onb-slide-complete .onb-sub {
    max-width: 34ch;
}

.onb-complete-badge {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    box-shadow: var(--shadow-lime);
}

.onb-slide-complete.is-active .onb-complete-badge {
    animation: onbBadgePop 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onb-complete-badge svg {
    width: 32px;
    height: 32px;
}

@keyframes onbBadgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

@keyframes onbShake {
    10%, 90% { transform: translateX(-4px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-8px); }
    40%, 60% { transform: translateX(8px); }
}

.onb-slide.is-active.onb-shake .onb-slide-inner {
    animation: onbShake 420ms ease;
}

/* Desktop: the column centres in the window */
@media (min-width: 720px) {
    .onb-slide-inner {
        padding-top: 48px;
    }

    .onb-goal-grid {
        gap: 12px;
    }

    .onb-card {
        min-height: 76px;
        padding: 14px 16px;
    }

    .onb-slide-foot {
        padding-bottom: 32px;
    }
}

/* Narrow phones: stack a row's control under its label */
@media (max-width: 360px) {
    .onb-row:not(.onb-tape-row):not(.onb-choice) .onb-segmented,
    .onb-date-input {
        flex: 1 1 100%;
    }

    .onb-seg {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .onb-slide {
        transition: opacity 200ms ease !important;
        transform: none !important;
    }

    .onb-complete-badge,
    .onb-tape-row.is-new {
        animation: none !important;
    }
}

/* ==========================================================================
   Mobile-first app shell (authenticated PWA)
   ========================================================================== */

:root {
    --pwa-appbar-h: 56px;
    --pwa-tabbar-h: 64px;
    --pwa-max: 640px;
}

.pwa-body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
}

.pwa-app {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

/* App bar */

.pwa-appbar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: min(var(--pwa-max), 100%);
    height: calc(var(--pwa-appbar-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(7, 10, 8, 0.82);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.pwa-appbar-brand {
    display: inline-flex;
    align-items: center;
}

/* The full wordmark: chalk letters, lime L */
.auth-topbar-brand .wordmark,
.pwa-appbar-brand .wordmark {
    display: block;
    height: auto;
    color: var(--ink);
}

/* Phones swap the wordmark for the reversed icon */
.auth-topbar-brand .logo-icon,
.pwa-appbar-brand .logo-icon {
    display: none;
}

@media (max-width: 640px) {
    .auth-topbar-brand .wordmark,
    .pwa-appbar-brand .wordmark {
        display: none;
    }

    .auth-topbar-brand .logo-icon,
    .pwa-appbar-brand .logo-icon {
        display: block;
        margin-inline: 6px;
    }
}

.pwa-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms ease;
}

.pwa-avatar:hover {
    background: rgba(199, 244, 100, 0.2);
    transform: scale(1.05);
}

/* Scroll region + screens */

.pwa-scroll {
    width: min(var(--pwa-max), 100%);
    margin-inline: auto;
    padding: calc(var(--pwa-appbar-h) + env(safe-area-inset-top) + 20px) 16px
             calc(var(--pwa-tabbar-h) + env(safe-area-inset-bottom) + 28px);
}

.pwa-screen {
    display: none;
}

.pwa-screen.is-active {
    display: block;
    animation: pwaScreenIn 360ms var(--ease);
}

@keyframes pwaScreenIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pwa-screen-head {
    margin-bottom: 22px;
}

.pwa-screen-head h1 {
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    margin-bottom: 6px;
}

.pwa-screen-head p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.pwa-subnav {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: fit-content;
}

.pwa-subtab {
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: calc(var(--radius-sm) - 4px);
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease;
}

.pwa-subtab:hover {
    color: var(--ink);
}

.pwa-subtab.is-active {
    color: var(--ink);
    background: rgba(199, 244, 100, 0.14);
}

/* ==========================================================================
   Home: this week, the numbers at a glance, and the latest check-in. Entrances replay each time the tab opens, like the other
   tabs, but hold until the loading splash has lifted.
   ========================================================================== */

.hm-head {
    margin-bottom: 18px;
}

.hm-date {
    margin-bottom: 6px;
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hm-head h1 {
    font-size: clamp(1.8rem, 7vw, 2.3rem);
    line-height: 1.05;
}

.hm-wave {
    display: inline-block;
    transform-origin: 70% 80%;
}

.hm-grid,
.hm-col {
    display: grid;
    gap: 14px;
    align-content: start;
}

.hm-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
}

/* This week */

.hm-week {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    border-color: rgba(199, 244, 100, 0.22);
    overflow: hidden;
}

.hm-week-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hm-flame {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(146, 160, 150, 0.12);
    color: var(--muted);
}

.hm-flame svg { width: 25px; height: 25px; }

.hm-week.is-lit .hm-flame {
    background: rgba(244, 120, 93, 0.16);
    color: var(--coral);
}

.hm-week-count {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    min-width: 40px;
    line-height: 1;
}

.hm-week-count strong {
    font-family: var(--font-display);
    font-size: 1.9rem;
}

.hm-week-count small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hm-week-hint {
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--border);
    color: var(--ink-dim);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}

.hm-periods .fr-weeks { gap: 6px; }
.hm-periods .fr-week { height: 26px; }

/* Best streak and banked savers, side by side */

.hm-streak-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.hm-streak-facts div {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
}

.hm-streak-facts dt {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hm-streak-facts dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-weight: 700;
}

.hm-savers { display: inline-flex; gap: 3px; }

.hm-savers svg {
    width: 16px;
    height: 16px;
    fill: transparent;
    stroke: var(--muted);
    stroke-width: 1.8;
}

.hm-savers svg.is-on {
    fill: var(--lime);
    stroke: var(--lime);
}

.hm-savers-note {
    margin: -6px 2px 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

/* The log button inside the week card */

.hm-log {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px 12px 12px;
    border: 1px solid var(--lime);
    border-radius: var(--radius-md);
    background: rgba(199, 244, 100, 0.1);
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: scale 200ms var(--ease), box-shadow 220ms var(--ease), background 220ms ease;
}

html[dir=rtl] .hm-log { padding: 12px 12px 12px 16px; }

/* Once the week is logged it steps back, so it reads as "done" not "due". */
.hm-week.is-done .hm-log {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.04);
}

.hm-log-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--lime);
    color: var(--lime-ink);
}

.hm-log-icon svg {
    width: 22px;
    height: 22px;
    transition: transform 320ms var(--ease);
}

.hm-log-copy {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.hm-log-copy strong {
    font-family: var(--font-display);
    font-size: 1.04rem;
}

.hm-log-copy small {
    color: var(--muted);
    font-size: 0.82rem;
}

.hm-log-arrow {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--lime);
    transition: transform 220ms var(--ease);
}

html[dir=rtl] .hm-log-arrow { transform: scaleX(-1); }

@media (hover: hover) {
    .hm-log:hover { box-shadow: 0 16px 38px rgba(199, 244, 100, 0.08); }
    .hm-log:hover .hm-log-icon svg { transform: rotate(90deg); }
    .hm-log:hover .hm-log-arrow { transform: translateX(3px); }
    html[dir=rtl] .hm-log:hover .hm-log-arrow { transform: scaleX(-1) translateX(3px); }
}

.hm-log:active { scale: 0.985; }

/* At a glance */

.hm-glance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hm-glance.is-single { grid-template-columns: 1fr; }

.hm-stat {
    position: relative;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 16px 16px 0;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    text-align: start;
    overflow: hidden;
}

button.hm-stat {
    cursor: pointer;
    transition: border-color 200ms ease, translate 200ms var(--ease), scale 160ms var(--ease);
}

@media (hover: hover) {
    button.hm-stat:hover { border-color: var(--border-strong); translate: 0 -2px; }
}

button.hm-stat:active { scale: 0.98; }

.hm-stat-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.hm-stat-head span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hm-stat-head small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-stat-value {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hm-stat-value em,
.hm-metric strong em {
    margin-inline-start: 3px;
    color: var(--muted);
    font-size: 0.55em;
    font-style: normal;
    font-weight: 600;
}

.hm-chg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-dim);
}

.hm-chg small,
.hm-chg-none {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.hm-chg-flat { color: var(--muted); }

/* Full-bleed sparkline along the bottom edge of the card */
.hm-spark {
    position: relative;
    display: block;
    height: 34px;
    margin: 4px -16px 0;
}

.hm-stat:not(:has(.hm-spark)) { padding-bottom: 16px; }

.hm-spark svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hm-spark path {
    fill: none;
    stroke: var(--lime);
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hm-spark i {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.2);
}

/* When the next check-in is due */

.hm-nudge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -2px 2px -4px;
    color: var(--ink-dim);
    font-size: 0.82rem;
    font-weight: 600;
}

.hm-nudge svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.hm-nudge.is-urgent,
.hm-nudge.is-urgent svg { color: #ffb29e; }

/* Since start: the headline change on each number tile */

.hm-since {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
}

.hm-since b {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Toward the user's goal reads lime, away from it coral. */
.hm-since.is-good b { background: rgba(199, 244, 100, 0.14); color: var(--lime); }
.hm-since.is-bad b { background: rgba(244, 120, 93, 0.14); color: #ffb29e; }
.hm-chg.is-good > span { color: var(--lime); }
.hm-chg.is-bad > span { color: #ffb29e; }

.hm-since small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.hm-since-none small {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--ink-dim);
    font-weight: 700;
}

/* How are you feeling today: onboarding-style sliders */

.hm-feel {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.hm-journey-head .hm-feel-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--lime);
    font-weight: 700;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 240ms ease, transform 240ms var(--ease);
}

.hm-journey-head .hm-feel-saved span { color: inherit; font-weight: inherit; }
.hm-feel-saved svg { width: 15px; height: 15px; }

.hm-feel-saved.is-shown {
    opacity: 1;
    transform: none;
}

.hm-feel-saved.is-shown svg { animation: lbPop 420ms var(--ease); }

.hm-feel-list {
    display: grid;
    gap: 16px;
}

.hm-rate {
    --tint: #f6d26b;
    --tint-soft: rgba(246, 210, 107, 0.13);
    display: grid;
    gap: 10px;
}

.hm-rate-mood { --tint: var(--lime); --tint-soft: rgba(199, 244, 100, 0.13); }
.hm-rate-sleep { --tint: #b4c2ff; --tint-soft: rgba(160, 180, 255, 0.14); }

.hm-rate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hm-rate-head label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
}

.hm-feel-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--tint-soft);
    color: var(--tint);
}

.hm-feel-icon svg { width: 18px; height: 18px; }

.hm-rate-head strong {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--tint);
    transition: color 200ms ease;
}

.hm-rate.is-unset .hm-rate-head strong {
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.82rem;
}

/* The onboarding demo's slider, filled up to the thumb in each rating's colour */
.hm-rate input[type="range"] {
    width: 100%;
    height: 6px;
    margin: 6px 0;
    border-radius: 999px;
    background: linear-gradient(to right, var(--tint) var(--fill, 50%), rgba(255, 255, 255, 0.1) var(--fill, 50%));
    appearance: none;
    outline: none;
    cursor: pointer;
}

html[dir=rtl] .hm-rate input[type="range"] {
    background: linear-gradient(to left, var(--tint) var(--fill, 50%), rgba(255, 255, 255, 0.1) var(--fill, 50%));
}

.hm-rate.is-unset input[type="range"] { background: rgba(255, 255, 255, 0.1); }

.hm-rate input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tint) 22%, transparent);
    transition: transform 160ms ease, background 200ms ease;
}

.hm-rate input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: var(--tint);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tint) 22%, transparent);
}

.hm-rate.is-unset input[type="range"]::-webkit-slider-thumb {
    background: var(--ink-dim);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.hm-rate.is-unset input[type="range"]::-moz-range-thumb {
    background: var(--ink-dim);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.hm-rate input[type="range"]:hover::-webkit-slider-thumb,
.hm-rate input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.hm-rate input[type="range"]:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }

.hm-feel-more { justify-self: start; }

.hm-rate-note {
    min-height: 1em;
    margin-top: -4px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.hm-rate[data-trend="up"] .hm-rate-note { color: var(--lime); }
.hm-rate[data-trend="down"] .hm-rate-note { color: #ffb29e; }

/* Body metric explainer sheet */

.mx-hero {
    display: grid;
    justify-items: start;
    gap: 2px;
    margin-bottom: 18px;
}

.mx-hero .tl-value { margin-bottom: 6px; }

.mx-scale { margin-bottom: 22px; }

.mx-track {
    position: relative;
    display: flex;
    gap: 3px;
    height: 10px;
}

.mx-seg {
    flex-basis: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

/* A zero-width rail placed at the value, so nothing reaches past the track
   (a full-width rail shifted along made the sheet scroll sideways). */
.mx-rail {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: var(--pos);
    width: 0;
    animation: mxSlide 700ms 200ms var(--ease) backwards;
    pointer-events: none;
}

.mx-marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 3px solid var(--bg-elevated);
    border-radius: 50%;
    background: var(--ink);
}

.mx-ticks {
    position: relative;
    height: 18px;
    margin-top: 6px;
}

.mx-ticks span {
    position: absolute;
    transform: translateX(-50%);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mx-block { margin-bottom: 18px; }

.mx-block h3 {
    margin-bottom: 6px;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mx-block p {
    color: var(--ink-dim);
    font-size: 0.92rem;
    line-height: 1.55;
}

.mx-block .mx-how {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.84rem;
}

.mx-ranges {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.mx-ranges li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.mx-ranges li + li { border-top: 1px solid var(--border); }
.mx-ranges li.is-you { background: rgba(255, 255, 255, 0.05); }
.mx-ranges strong { font-weight: 700; }
.mx-ranges span:not(.mx-dot) { color: var(--ink-dim); }

.mx-ranges em {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.mx-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.mx-note,
.mx-disclaimer {
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.mx-disclaimer {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

html[dir=rtl] .mx-ticks span { transform: translateX(50%); }

@keyframes mxSlide { from { inset-inline-start: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .mx-rail { animation: none; }
}

/* Your journey */

.hm-journey {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.hm-journey-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
}

.hm-journey-head h2 { font-size: 1.1rem; }

.hm-journey-head span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.hm-journey-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
}

.hm-journey-stats > div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 12px 6px;
    text-align: center;
}

.hm-journey-stats > div + div { border-inline-start: 1px solid var(--border); }

.hm-journey-stats strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.hm-journey-stats small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Counts up from zero on entry; the number itself lives in --n. */
@property --hm-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.hm-count {
    --hm-n: var(--n);
    counter-reset: hm-n var(--hm-n);
}

.hm-count::after { content: counter(hm-n); }

.hm-win {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(199, 244, 100, 0.2);
    border-radius: var(--radius-md);
    background: rgba(199, 244, 100, 0.05);
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: border-color 200ms ease, scale 160ms var(--ease);
}

@media (hover: hover) {
    .hm-win:hover { border-color: rgba(199, 244, 100, 0.4); }
    .hm-win:hover .hm-go { transform: translateX(3px); }
}

.hm-win:active { scale: 0.985; }

.hm-win-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--lime);
    color: var(--lime-ink);
}

.hm-win-icon svg { width: 22px; height: 22px; }

.hm-win.is-neutral,
.hm-win.is-bad {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.03);
}

.hm-win-icon.is-neutral { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
.hm-win-icon.is-bad { background: rgba(244, 120, 93, 0.18); color: #ffb29e; }
.hm-win.is-neutral .hm-win-text strong b { color: var(--ink); }
.hm-win.is-bad .hm-win-text strong b { color: #ffb29e; }
.hm-win-down svg { transform: scaleY(-1); }

.hm-win-text {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 0;
}

.hm-win-text small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hm-win-text strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.hm-win-text strong b { color: var(--lime); }

.hm-win-text em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 600;
}

.hm-milestone {
    display: grid;
    gap: 6px;
}

.hm-milestone-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.82rem;
}

.hm-milestone-row span { color: var(--muted); font-weight: 600; }
.hm-milestone-row b { font-weight: 800; }

.hm-milestone-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.hm-milestone-bar span {
    display: block;
    width: max(calc(var(--p) * 100%), 8px);
    height: 100%;
    border-radius: inherit;
    background: var(--lime);
    transform-origin: left;
}

html[dir=rtl] .hm-milestone-bar span { transform-origin: right; }

.hm-milestone small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

/* Nudged by friends */

.hm-nudged {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(246, 210, 107, 0.35);
    border-radius: var(--radius-md);
    background: rgba(246, 210, 107, 0.08);
}

.hm-nudged-faces {
    display: flex;
    flex: 0 0 auto;
}

.hm-nudged-faces .lb-avatar-face {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    border: 2px solid var(--bg);
}

.hm-nudged-faces .lb-avatar-face + .lb-avatar-face { margin-inline-start: -10px; }

.hm-nudged p {
    flex: 1 1 180px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}

.hm-nudged-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}

.hm-nudged-actions form { margin: 0; }

.hm-nudged-dismiss {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.hm-nudged-dismiss:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.hm-nudged-dismiss svg { width: 18px; height: 18px; fill: currentColor; }

body:not(.is-splashing) .hm.is-active .hm-nudged {
    animation: lbRowIn 520ms 80ms var(--ease) backwards;
}

body:not(.is-splashing) .hm.is-active .hm-nudged-faces .lb-avatar-face {
    animation: lbPop 420ms calc(var(--n) * 90ms + 300ms) var(--ease) both;
}

/* Getting started */

.hm-setup {
    padding: 18px;
}

.hm-setup-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hm-setup-head h2 { font-size: 1.1rem; }

.hm-setup-head span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.hm-setup-bar {
    display: block;
    height: 6px;
    margin: 12px 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.hm-setup-bar span {
    display: block;
    width: calc(var(--done) * 100%);
    height: 100%;
    border-radius: inherit;
    background: var(--lime);
    transform-origin: left;
}

html[dir=rtl] .hm-setup-bar span { transform-origin: right; }

.hm-setup-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-setup-step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: background 200ms ease;
}

.hm-setup-step:disabled { cursor: default; }

@media (hover: hover) {
    .hm-setup-step:not(:disabled):hover { background: rgba(255, 255, 255, 0.04); }
    .hm-setup-step:not(:disabled):hover .hm-go { transform: translateX(3px); }
}

.hm-setup-check {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 50%;
}

.hm-setup-check svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--lime-ink);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.hm-setup-step.is-done .hm-setup-check {
    border: 0;
    background: var(--lime);
}

.hm-setup-step.is-done .hm-setup-check svg { stroke-dashoffset: 0; }

.hm-setup-text {
    display: grid;
    flex: 1 1 auto;
    gap: 1px;
    min-width: 0;
}

.hm-setup-text strong {
    font-size: 0.92rem;
    font-weight: 700;
}

.hm-setup-step.is-done .hm-setup-text strong {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(146, 160, 150, 0.5);
}

.hm-setup-text small {
    color: var(--muted);
    font-size: 0.78rem;
}

.hm-go {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform 200ms var(--ease);
}

.hm-go svg { width: 18px; height: 18px; }

html[dir=rtl] .hm-go svg,
html[dir=rtl] .hm-link svg { transform: scaleX(-1); }

/* Section heads for the latest check-in and body metrics */

.hm-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 8px 4px 10px;
}

.hm-section-head h2 { font-size: 1.1rem; }

.hm-section-head p {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 0.82rem;
}

.hm-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lime);
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.hm-link svg {
    width: 16px;
    height: 16px;
    transition: translate 200ms var(--ease);
}

.hm-link:hover svg { translate: 2px 0; }

/* Body metrics */

.hm-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hm-metric {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: border-color 200ms ease, translate 200ms var(--ease), scale 160ms var(--ease);
}

@media (hover: hover) {
    .hm-metric:hover { border-color: var(--border-strong); translate: 0 -2px; }
    .hm-metric:hover .hm-metric-info { color: var(--ink); }
}

.hm-metric:active { scale: 0.98; }

.hm-metric-info {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: color 200ms ease;
}

.hm-metric-label {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hm-metric strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.15;
}

.hm-metric small {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
}

.hm-metric-note {
    justify-self: start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.7rem;
    font-weight: 800;
}

/* Desktop: two columns, the week and numbers beside the details */

@media (min-width: 1024px) {
    .hm-head { margin-bottom: 24px; }

    .hm-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .hm-col { gap: 16px; }

    .hm-week { gap: 20px; padding: 22px; }
    .hm-stat-value { font-size: 1.8rem; }
    .hm-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .hm-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
    .hm-glance { grid-template-columns: 1fr; }
    .hm-week-hint { font-size: 0.8rem; }
}

/* Motion */

body:not(.is-splashing) .hm.is-active .hm-card,
body:not(.is-splashing) .hm.is-active .hm-section-head,
body:not(.is-splashing) .hm.is-active .hm-metrics {
    animation: lbRowIn 520ms calc(var(--i, 0) * 60ms + 60ms) var(--ease) backwards;
}

body:not(.is-splashing) .hm.is-active .hm-wave {
    animation: hmWave 1.4s 0.3s ease-in-out both;
}

body:not(.is-splashing) .hm.is-active .hm-week-count strong {
    animation: lbPop 520ms 160ms var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-week.is-done .hm-flame svg {
    animation: lbFlicker 2.4s 0.8s ease-in-out infinite;
}

body:not(.is-splashing) .hm.is-active .hm-spark svg {
    animation: tlSparkIn 900ms calc(var(--i, 0) * 60ms + 300ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-spark i {
    animation: lbPop 420ms calc(var(--i, 0) * 60ms + 1000ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-since b {
    animation: lbPop 460ms calc(var(--i, 0) * 60ms + 420ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-count {
    animation: hmCount 1.1s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body:not(.is-splashing) .hm.is-active .hm-win {
    animation: hmFade 500ms 0.55s var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-win-icon {
    animation: lbPop 520ms 0.75s var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-milestone-bar span {
    animation: lbGrow 900ms 0.6s var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-week:not(.is-done) .hm-nudge.is-urgent svg {
    animation: hmTick 1.6s 1s ease-in-out infinite;
}

body:not(.is-splashing) .hm.is-active .hm-rate {
    animation: hmFade 420ms calc(var(--f) * 90ms + 380ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-chg {
    animation: hmFade 400ms calc(var(--i, 0) * 60ms + 500ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-setup-bar span {
    animation: lbGrow 800ms 300ms var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-setup-step.is-done .hm-setup-check {
    animation: lbPop 420ms calc(var(--s) * 90ms + 300ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-setup-step.is-done .hm-setup-check svg {
    animation: hmDraw 420ms calc(var(--s) * 90ms + 520ms) var(--ease) both;
}

body:not(.is-splashing) .hm.is-active .hm-metric {
    animation: lbRowIn 460ms calc(var(--m) * 50ms + 480ms) var(--ease) backwards;
}

@keyframes hmWave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(14deg); }
    20%, 40% { transform: rotate(-8deg); }
}

@keyframes hmCount {
    from { --hm-n: 0; }
}

@keyframes hmTick {
    0%, 70%, 100% { transform: rotate(0); }
    80% { transform: rotate(-14deg); }
    90% { transform: rotate(10deg); }
}

@keyframes hmFade {
    from { opacity: 0; transform: translateY(4px); }
}

@keyframes hmDraw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hm *,
    .hm *::before,
    .hm *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* Empty states */

.pwa-empty {
    text-align: center;
}

.pwa-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 4px auto 16px;
    border-radius: 16px;
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime);
}

.pwa-empty-icon svg { width: 28px; height: 28px; }

.pwa-empty h2 { margin-bottom: 8px; }

.pwa-empty p {
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 340px;
    margin-inline: auto;
}

/* Settings */



/* Settings list
   One pattern for every setting: a group of rows, each with an icon tile, a
   label with its current value underneath, and a trailing control. Forms open
   in place under their row, one at a time. */

.set-label {
    margin: 28px 4px 10px;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pwa-screen-head + .set-label {
    margin-top: 8px;
}

.set-group {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.set-group > :not(:first-child) {
    border-top: 1px solid var(--border);
}

.set-group-danger {
    margin-top: 28px;
    margin-bottom: 28px;
}

.set-row {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    background: none;
    color: var(--ink);
    text-align: start;
    font: inherit;
    list-style: none;
    transition: background 160ms ease;
}

.set-row::-webkit-details-marker {
    display: none;
}

button.set-row,
a.set-row,
summary.set-row {
    cursor: pointer;
}

button.set-row:hover,
a.set-row:hover,
summary.set-row:hover {
    background: rgba(255, 255, 255, 0.035);
}

.set-row:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: -2px;
}

.set-row-wrap {
    flex-wrap: wrap;
}

.set-row-wrap form {
    margin-inline-start: 50px;
}

.set-tile {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime);
}

.set-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Some app-wide svg rules paint icons solid; these are outlines. */
.pwa-app .set-icon,
.pwa-app .set-icon * {
    fill: none;
    stroke: currentColor;
}

.set-row .set-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    overflow: hidden;
}

.set-text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.set-text strong {
    font-size: 0.96rem;
    font-weight: 700;
}

.set-text small {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.set-chevron {
    color: var(--muted);
    transition: transform 200ms var(--ease);
}

.set-item[open] > summary .set-chevron {
    transform: rotate(180deg);
}

html[dir="rtl"] .set-chevron:not(.set-item .set-chevron) {
    transform: scaleX(-1);
}

/* Destructive rows: coral, no lime anywhere near them */

.set-group-danger .set-row {
    color: #ffb7a3;
}

.set-group-danger .set-tile {
    background: rgba(244, 120, 93, 0.12);
    color: var(--coral);
}

.set-group-danger button.set-row:hover {
    background: rgba(244, 120, 93, 0.08);
}

.set-group-danger .set-text small {
    color: rgba(255, 183, 163, 0.7);
}

/* A short line of context that belongs to the row above it */

.set-note {
    padding: 0 16px 14px 66px;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.set-group > .set-note {
    border-top: 0;
    margin-top: -6px;
}

html[dir="rtl"] .set-note {
    padding: 0 66px 14px 16px;
}

/* Units: a two-way toggle saves itself, so it needs no button */

.set-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
}

.set-segmented label {
    position: relative;
    cursor: pointer;
}

.set-segmented input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.set-segmented span {
    display: block;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    transition: background 160ms ease, color 160ms ease;
}

.set-segmented input:checked + span {
    background: var(--lime);
    color: var(--lime-ink);
}

.set-segmented input:focus-visible + span {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.set-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 28px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    appearance: none;
    cursor: pointer;
    transition: background 200ms ease;
}

.set-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink);
    transition: translate 220ms var(--ease);
}

.set-switch:checked { background: var(--lime); }
.set-switch:checked::after { background: var(--lime-ink); translate: 18px 0; }
html[dir=rtl] .set-switch:checked::after { translate: -18px 0; }

.set-switch:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

/* Expanded panel under a row */

.set-item > .set-body {
    border-top: 1px solid var(--border);
}

.set-body,
.set-body-form {
    display: grid;
    gap: 16px;
}

.set-body {
    padding: 18px 16px 18px;
    background: rgba(0, 0, 0, 0.14);
}

.set-hint {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.set-body div > label[for]:not(.btn) {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.set-body :is(input[type="text"], input[type="password"]) {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    padding: 0 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.set-body :is(input[type="text"], input[type="password"])::placeholder {
    color: rgba(146, 160, 150, 0.45);
}

.set-body :is(input[type="text"], input[type="password"]):focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 4px rgba(199, 244, 100, 0.12);
}

.set-body .field-toggle-grid {
    margin-bottom: 0;
}

.set-body .auth-check {
    margin: 0;
}

.set-actions {
    display: flex;
    justify-content: flex-end;
}

/* Custom measurements already added */

.set-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.set-chips li {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 14px;
    border-radius: 999px;
    border: 1px solid rgba(199, 244, 100, 0.4);
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime-strong);
    font-size: 0.86rem;
    font-weight: 700;
}

html[dir="rtl"] .set-chips li {
    padding: 4px 14px 4px 4px;
}

.set-chips small {
    color: var(--muted);
    font-weight: 600;
}

.set-chips button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.set-chips button:hover {
    background: rgba(244, 120, 93, 0.18);
    color: #ffb7a3;
}

.set-chips .set-icon {
    width: 14px;
    height: 14px;
}

/* Language choices */

.set-options {
    display: grid;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.14);
}

.set-options a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px 0 66px;
    font-weight: 600;
    color: var(--ink-dim);
}

html[dir="rtl"] .set-options a {
    padding: 0 66px 0 16px;
}

.set-options a + a {
    border-top: 1px solid var(--border);
}

.set-options a:hover {
    background: rgba(255, 255, 255, 0.035);
}

.set-options a.is-active {
    color: var(--lime);
}

@media (max-width: 380px) {
    .set-segmented span {
        padding: 7px 10px;
    }
}

.pwa-account {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pwa-account-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
}

.pwa-account strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.pwa-account span {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Profile form */

.pwa-account-avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
    overflow: hidden;
}

.pwa-account-avatar img,
.pwa-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pwa-avatar { overflow: hidden; padding: 0; }



.pwa-profile-photo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pwa-profile-photo-actions {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.pwa-profile-photo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The real file input is visually hidden, so its <label> is the control the
   user sees and clicks. */
.pwa-profile-photo-actions label.btn {
    cursor: pointer;
}

.pwa-profile-photo-actions small {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.pwa-photo-remove {
    color: #ffb7a3;
    border-color: rgba(244, 120, 93, 0.24);
}

.pwa-photo-remove:hover {
    border-color: rgba(244, 120, 93, 0.4);
    background: rgba(244, 120, 93, 0.14);
}

/* The input is sr-only but still focusable, so mirror its focus ring onto the
   label that stands in for it. */
.pwa-profile-photo-buttons:has(~ input:focus-visible) label.btn {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.field-grid-stack {
    grid-template-columns: minmax(0, 1fr);
}

/* Leaderboard
   Every entrance animation hangs off .pwa-screen.is-active, so it replays each
   time the tab is opened (display:none -> block restarts CSS animations). */

.lb-screen {
    --lb-gold: #f6d26b;
    --lb-silver: #cfd8d2;
    --lb-bronze: #e3a57a;
}

/* Your standing */

.lb-standing {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(199, 244, 100, 0.22);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(199, 244, 100, 0.09), transparent 60%),
        var(--surface);
    overflow: hidden;
}

html[dir="rtl"] .lb-standing {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(199, 244, 100, 0.09), transparent 60%),
        var(--surface);
}

.lb-standing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
    transform: translateX(-100%);
    pointer-events: none;
}

.pwa-screen.is-active .lb-standing::after {
    animation: lbSheen 1.4s 0.35s var(--ease) both;
}

.lb-standing-rank {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    min-width: 76px;
    line-height: 1;
}

.lb-standing-rank small,
.lb-standing-rank span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lb-standing-rank strong {
    margin: 6px 0 4px;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--lime);
}

.pwa-screen.is-active .lb-standing-rank strong {
    animation: lbPop 520ms 120ms var(--ease) both;
}

.lb-standing-note {
    margin: 0;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--border);
    color: var(--ink-dim);
    font-size: 0.92rem;
    line-height: 1.5;
}

.lb-standing-tag {
    display: inline-block;
    margin-inline-end: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--lime);
    color: var(--lime-ink);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

/* Board */

.lb-board {
    padding: 8px;
}

.lb-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lb-row {
    position: relative;
    display: grid;
    grid-template-columns: 28px 46px minmax(0, 1fr) auto;
    grid-template-areas:
        "rank avatar who streak"
        ".    .      bar bar"
        ".    .      trends trends";
    align-items: center;
    column-gap: 12px;
    padding: 12px 12px 14px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-lg) - 8px);
    transition: background 220ms ease, border-color 220ms ease, transform 220ms var(--ease);
}

.pwa-screen.is-active .lb-row,
.pwa-screen.is-active .lb-gap {
    animation: lbRowIn 520ms calc(var(--i, 0) * 60ms + 80ms) var(--ease) backwards;
}

@media (hover: hover) {
    .lb-row:hover {
        background: rgba(255, 255, 255, 0.035);
        transform: translateX(2px);
    }

    html[dir="rtl"] .lb-row:hover {
        transform: translateX(-2px);
    }
}

.lb-row.is-you {
    background: rgba(199, 244, 100, 0.07);
    border-color: rgba(199, 244, 100, 0.26);
}

.pwa-screen.is-active .lb-row.is-you {
    animation:
        lbRowIn 520ms calc(var(--i, 0) * 60ms + 80ms) var(--ease) backwards,
        lbYouGlow 1.6s calc(var(--i, 0) * 60ms + 500ms) ease-out;
}

.lb-rank {
    grid-area: rank;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
}

.lb-row.is-rank-1 .lb-rank { --medal: var(--lb-gold); }
.lb-row.is-rank-2 .lb-rank { --medal: var(--lb-silver); }
.lb-row.is-rank-3 .lb-rank { --medal: var(--lb-bronze); }

.lb-row.is-top .lb-rank {
    color: var(--medal);
    background: color-mix(in srgb, var(--medal) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--medal) 35%, transparent);
}

.lb-avatar {
    grid-area: avatar;
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
}

.lb-avatar-face {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
}

.lb-avatar-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lb-row.is-top .lb-avatar-face {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--medal) 70%, transparent);
}

.lb-crown {
    position: absolute;
    top: -13px;
    left: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    color: var(--lb-gold);
    filter: drop-shadow(0 2px 6px rgba(246, 210, 107, 0.25));
    transform-origin: 50% 100%;
}

.pwa-screen.is-active .lb-crown {
    animation:
        lbCrownDrop 640ms 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
        lbCrownBob 3.2s 1.2s ease-in-out infinite;
}

.lb-who {
    grid-area: who;
    display: grid;
    gap: 3px;
    min-width: 0;
}

.lb-name {
    overflow: hidden;
    font-weight: 700;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.lb-status i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
}

.lb-status.is-good { color: var(--lime); }

.lb-status.is-good i {
    background: var(--lime);
    animation: lbPing 2.4s ease-out infinite;
}

.lb-streak {
    grid-area: streak;
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-family: var(--font-display);
}

.lb-streak svg {
    width: 15px;
    height: 15px;
    align-self: center;
    margin-inline-end: 2px;
}

.lb-streak strong {
    font-size: 1.05rem;
    font-weight: 700;
}

.lb-streak small {
    font-size: 0.7rem;
    font-weight: 600;
}

.lb-streak.is-lit {
    background: rgba(244, 120, 93, 0.12);
    color: var(--coral);
}

.lb-streak.is-live svg {
    transform-origin: 50% 90%;
    animation: lbFlicker 1.8s ease-in-out infinite;
}

.lb-bar {
    grid-area: bar;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.lb-bar span {
    display: block;
    width: max(var(--fill), 4px);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(244, 120, 93, 0.55), var(--coral));
    transform-origin: left center;
}

html[dir="rtl"] .lb-bar span {
    background: linear-gradient(-90deg, rgba(244, 120, 93, 0.55), var(--coral));
    transform-origin: right center;
}

.lb-row.is-you .lb-bar span {
    background: linear-gradient(90deg, rgba(199, 244, 100, 0.5), var(--lime));
}

html[dir="rtl"] .lb-row.is-you .lb-bar span {
    background: linear-gradient(-90deg, rgba(199, 244, 100, 0.5), var(--lime));
}

.pwa-screen.is-active .lb-bar span {
    animation: lbGrow 900ms calc(var(--i, 0) * 60ms + 260ms) var(--ease) both;
}

.lb-trends {
    grid-area: trends;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.lb-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink-dim);
    font-size: 0.7rem;
    font-weight: 700;
}

.lb-trend-arrow {
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    line-height: 1;
}

.lb-trend-flat { color: var(--muted); }

/* "…" between the top four and you */

.lb-gap {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 4px 0;
}

.lb-gap span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border-strong);
}

/* Board with only you on it */

.lb-solo {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
    text-align: center;
}

.lb-solo p {
    max-width: 280px;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.lb-solo-ghosts {
    display: flex;
}

.lb-solo-ghosts span {
    width: 34px;
    height: 34px;
    margin-inline-start: -8px;
    border: 2px dashed var(--border-strong);
    border-radius: 50%;
    background: var(--bg);
}

.lb-solo-ghosts span:first-child { margin-inline-start: 0; }

.pwa-screen.is-active .lb-solo-ghosts span {
    animation: lbGhost 2.4s ease-in-out infinite;
}

.lb-solo-ghosts span:nth-child(2) { animation-delay: 0.2s !important; }
.lb-solo-ghosts span:nth-child(3) { animation-delay: 0.4s !important; }

/* Share card button, under the board */

.lb-share-card {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}

.lb-share-card svg {
    width: 18px;
    height: 18px;
}

/* Share card preview sheet: the drawn PNG, sized to fit above the actions. */

.pwa-sheet.sc-sheet .pwa-sheet-body {
    padding-bottom: 16px;
}

.sc-frame {
    --sc-max-h: calc(min(86dvh, 780px) - 230px);
    width: min(100%, calc(var(--sc-max-h) * 0.8));
    aspect-ratio: 1080 / 1350;
    margin-inline: auto;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: #070a08;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.sc-preview {
    display: block;
    width: 100%;
    height: 100%;
}

/* Until the card is drawn, keep the empty frame instead of a broken image. */
.sc-preview:not([src]) {
    visibility: hidden;
}

.sc-note {
    margin-top: 12px;
    text-align: center;
}

.sc-sheet .pwa-sheet-actions .btn {
    flex: 1 1 0;
}

.sc-sheet .pwa-sheet-actions .btn[hidden] {
    display: none;
}

.pwa-sheet-actions [data-share-send] svg {
    width: 18px;
    height: 18px;
}

[data-share-send]:disabled,
[data-share-save]:disabled {
    opacity: 0.6;
}

/* Friends */

.lb-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 34px 0 14px;
}

.lb-section-head h2 {
    margin: 0;
    font-size: 1.3rem;
}

.lb-count {
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(199, 244, 100, 0.14);
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
}

.lb-invite {
    display: grid;
    gap: 16px;
    margin-bottom: 12px;
    padding: 20px;
}

.lb-invite-copy {
    display: flex;
    gap: 14px;
}

.lb-invite-copy h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.lb-invite-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.lb-invite-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(199, 244, 100, 0.12);
    color: var(--lime);
}

.lb-invite-icon svg {
    width: 22px;
    height: 22px;
}

.lb-invite-row {
    display: flex;
    gap: 8px;
}

.invite-link-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink-dim);
    font-size: 0.85rem;
}

.lb-copy {
    gap: 6px;
    padding-inline: 16px;
}

.lb-copy svg,
.lb-share svg {
    width: 17px;
    height: 17px;
}

html[dir="rtl"] .lb-invite-row .btn svg {
    transform: none;
}

.lb-copy .lb-check-icon { display: none; }
.lb-copy.is-copied .lb-copy-icon { display: none; }

.lb-copy.is-copied .lb-check-icon {
    display: block;
    animation: lbPop 420ms var(--ease) both;
}

.lb-share {
    flex: 0 0 auto;
    width: 44px;
    padding: 0;
}

.lb-section-head .fr-summary {
    margin-inline-start: auto;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Friend cards */

/* Search, sort and filter */

.fr-tools {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.fr-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    transition: border-color 200ms ease;
}

.fr-search:focus-within { border-color: var(--lime); }
.fr-search svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--muted); }

.fr-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    outline: none;
}

.fr-search input::placeholder { color: var(--muted); }

.fr-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fr-sort {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
}

.fr-sort button,
.fr-filter {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.fr-sort button.is-active {
    background: var(--lime);
    color: var(--lime-ink);
}

.fr-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
}

.fr-filter em {
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(244, 120, 93, 0.16);
    color: #ffb29e;
    font-style: normal;
}

.fr-filter[aria-pressed="true"] {
    border-color: #ffb29e;
    background: rgba(244, 120, 93, 0.12);
    color: #ffb29e;
}

.fr-empty {
    margin: 18px 4px 0;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

.fr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.fr-card {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    transition: border-color 220ms ease, translate 220ms var(--ease), scale 160ms var(--ease);
}

.fr-card[hidden] { display: none; }

.fr-card.is-logged { border-color: rgba(199, 244, 100, 0.22); }

.pwa-screen.is-active .fr-card {
    animation: lbRowIn 520ms calc(var(--i, 0) * 70ms + 250ms) var(--ease) backwards;
}

@media (hover: hover) {
    .fr-card:hover { border-color: var(--border-strong); translate: 0 -2px; }
}

.fr-card:has(.fr-open:active) { scale: 0.985; }

/* The whole card opens the profile: a button stretched over it, with the
   nudge raised above so it stays its own tap target. */
.fr-open {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    border-radius: inherit;
    background: none;
    cursor: pointer;
}

.fr-open:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.fr-nudge-form {
    position: relative;
    z-index: 2;
    margin: 0;
    flex: 0 0 auto;
}

.fr-nudge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(246, 210, 107, 0.4);
    border-radius: 999px;
    background: rgba(246, 210, 107, 0.1);
    color: #f6d26b;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms ease, scale 160ms var(--ease);
}

.fr-nudge svg { width: 16px; height: 16px; transform-origin: 70% 90%; }
.fr-nudge:hover:not(:disabled) svg { animation: hmWave 900ms ease-in-out; }
.fr-nudge:active:not(:disabled) { scale: 0.95; }

.fr-nudge.is-sent {
    border-color: var(--border);
    background: none;
    color: var(--muted);
    cursor: default;
}

.fr-go { flex: 0 0 auto; color: var(--muted); }
.fr-go svg { width: 20px; height: 20px; }
html[dir=rtl] .fr-go svg { transform: scaleX(-1); }

.fr-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fr-avatar {
    position: relative;
    flex: 0 0 auto;
    padding: 3px;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}

.fr-card.is-logged .fr-avatar {
    border: 2px solid var(--lime);
    box-shadow: 0 0 18px rgba(199, 244, 100, 0.14);
}

.fr-avatar .lb-avatar-face {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
}

.fr-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-elevated);
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
}

html[dir="rtl"] .fr-badge { right: auto; left: -2px; }

.fr-badge svg { width: 12px; height: 12px; }

.pwa-screen.is-active .fr-badge {
    animation: lbPop 520ms calc(var(--i, 0) * 70ms + 600ms) var(--ease) backwards;
}

.fr-id {
    flex: 1 1 auto;
    min-width: 0;
}

.fr-name {
    overflow: hidden;
    margin: 0;
    font-size: 1.08rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 4px 0 0;
}

.fr-meta .lb-status.is-good i { animation: none; }

.fr-since {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

/* Card: a compact strip of the last 8 weeks beside the streak */

.fr-weeks-mini {
    flex: 1 1 96px;
    max-width: 140px;
    margin-inline-start: auto;
    gap: 3px;
}

.fr-weeks-mini .fr-week { height: 14px; border-radius: 4px; }

/* Friend profile (bottom card) */

.fr-profile-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.fr-avatar-lg .lb-avatar-face {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

.fr-avatar-lg.is-logged {
    border: 2px solid var(--lime);
}

.fr-profile-top .fr-since {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.8rem;
}

.fr-facts { margin: 0 0 12px; }
.fr-facts dd small { color: var(--muted); font-weight: 600; }

.fr-profile-vs {
    display: inline-block;
    margin-bottom: 20px;
}

.fr-profile .lb-trends { margin: 0; }

.fr-actions {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.fr-actions form { margin: 0; }
.fr-actions .btn { width: 100%; gap: 8px; }
.fr-actions .btn svg { width: 18px; height: 18px; }
.fr-remove { color: #ffb7a3; }

/* Streak vs you */

.fr-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fr-vs {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-dim);
    font-size: 0.78rem;
    font-weight: 700;
}

.fr-vs-ahead { color: #ffcf8a; background: rgba(246, 210, 107, 0.1); }
.fr-vs-behind { color: var(--lime); background: rgba(199, 244, 100, 0.1); }

/* Last 8 weeks */

.fr-weeks {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
}

.fr-week {
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.fr-week.is-logged {
    background: var(--lime);
}

/* A missed period a streak saver covered: kept the streak, didn't grow it */
.fr-week.is-saved {
    background: repeating-linear-gradient(-45deg, rgba(199, 244, 100, 0.6) 0 3px, rgba(199, 244, 100, 0.18) 3px 6px);
}

.fr-week.is-current:not(.is-logged) {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px rgba(199, 244, 100, 0.45);
    animation: frPulse 2s ease-in-out infinite;
}

.fr-week.is-current.is-logged {
    box-shadow: 0 0 12px rgba(199, 244, 100, 0.25);
}

.pwa-screen.is-active .fr-week {
    animation: lbPop 420ms calc(var(--i, 0) * 70ms + var(--w, 0) * 45ms + 380ms) var(--ease) backwards;
}

.pwa-screen.is-active .fr-week.is-current:not(.is-logged) {
    animation:
        lbPop 420ms calc(var(--i, 0) * 70ms + var(--w, 0) * 45ms + 380ms) var(--ease) backwards,
        frPulse 2s 1.4s ease-in-out infinite;
}

.fr-weeks-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

@keyframes frPulse {
    50% { box-shadow: inset 0 0 0 1.5px rgba(199, 244, 100, 0.9); }
}

/* .lb-trends places itself in the leaderboard row's "trends" area; the friend
   card has no such area, and naming one there would split the card into columns. */
.fr-trends { grid-area: auto; margin-top: 0; }

@media (max-width: 420px) {
    .fr-card { padding: 16px; }
    .fr-avatar .lb-avatar-face { width: 46px; height: 46px; }
}

@media (max-width: 420px) {
    .lb-row {
        grid-template-columns: 24px 40px minmax(0, 1fr) auto;
        column-gap: 10px;
        padding-inline: 8px;
    }

    .lb-avatar,
    .lb-row .lb-avatar-face {
        width: 40px;
        height: 40px;
    }

    .lb-rank { width: 24px; }

    .lb-standing { gap: 14px; padding: 16px; }
    .lb-standing-note { padding-inline-start: 14px; font-size: 0.86rem; }
}

@keyframes lbRowIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lbGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes lbPop {
    0% { opacity: 0; transform: scale(0.6); }
    60% { opacity: 1; transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes lbSheen {
    to { transform: translateX(100%); }
}

@keyframes lbYouGlow {
    0% { box-shadow: 0 0 0 0 rgba(199, 244, 100, 0.35); }
    100% { box-shadow: 0 0 0 10px rgba(199, 244, 100, 0); }
}

@keyframes lbCrownDrop {
    from { opacity: 0; transform: translateY(-10px) rotate(-18deg) scale(0.6); }
    to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes lbCrownBob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-2px) rotate(-6deg); }
}

@keyframes lbFlicker {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.08, 0.94) rotate(-4deg); }
    50% { transform: scale(0.96, 1.08) rotate(3deg); }
    75% { transform: scale(1.04, 0.98) rotate(-2deg); }
}

@keyframes lbPing {
    0% { box-shadow: 0 0 0 0 rgba(199, 244, 100, 0.5); }
    70%, 100% { box-shadow: 0 0 0 6px rgba(199, 244, 100, 0); }
}

@keyframes lbGhost {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .lb-screen *,
    .lb-screen *::before,
    .lb-screen *::after {
        animation: none !important;
        transition: none !important;
    }
}

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    opacity: 1;
    transition: opacity 300ms var(--ease, ease);
}

.splash-screen.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-mark {
    display: flex;
    color: var(--lime);
    animation: splashPulse 1.4s ease-in-out infinite;
}

.splash-mark svg {
    width: 56px;
    height: 56px;
}

@keyframes splashPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .splash-mark {
        animation: none;
    }
}




.field-error {
    display: block;
    margin-top: 4px;
    color: #ffb7a3;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---- Account deletion ---- */


.pwa-deletion-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(244, 120, 93, 0.32);
    background: rgba(244, 120, 93, 0.1);
    color: #ffd6c9;
    font-size: 0.9rem;
}

.pwa-deletion-banner p {
    margin: 0;
}

.pwa-deletion-banner form {
    flex-shrink: 0;
}

/* ---- Progress photo: check-in picker ---- */

.photo-field {
    display: flex;
    align-items: center;
    gap: 14px;
}

.photo-field-thumb {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.photo-field-thumb svg {
    width: 24px;
    height: 24px;
    color: var(--muted);
}

.photo-field-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-field-body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.photo-field-body label.btn {
    cursor: pointer;
    justify-self: start;
}

.photo-field-disabled {
    opacity: 0.6;
}

.photo-field-disabled .btn {
    cursor: not-allowed;
    justify-self: start;
}

.photo-field-body small {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}




.field-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 22px;
}

.field-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.field-toggle:hover {
    border-color: var(--border-strong);
}

.field-toggle:has(input:checked) {
    border-color: rgba(199, 244, 100, 0.4);
    background: rgba(199, 244, 100, 0.1);
    color: var(--lime-strong);
}

.field-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--lime);
}







.pwa-version {
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

/* FAB */

.pwa-fab {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + var(--pwa-tabbar-h) - 34px);
    transform: translateX(-50%);
    z-index: 62;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-ink);
    box-shadow: 0 12px 30px rgba(199, 244, 100, 0.2);
    cursor: pointer;
    transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}

.pwa-fab svg { width: 26px; height: 26px; }

/* Label only surfaces on desktop, where the FAB becomes an extended pill */
.pwa-fab-label { display: none; }

.pwa-fab:hover {
    transform: translateX(-50%) translateY(-3px) scale(1.04);
    box-shadow: 0 18px 40px rgba(199, 244, 100, 0.24);
}

.pwa-fab:active {
    transform: translateX(-50%) scale(0.96);
}

/* Tab bar */

.pwa-tabbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 60;
    width: min(var(--pwa-max), 100%);
    height: calc(var(--pwa-tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr;
    align-items: center;
    background: rgba(7, 10, 8, 0.9);
    backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid var(--border);
}

.pwa-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding-top: 10px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 200ms ease;
}

.pwa-tab svg {
    width: 23px;
    height: 23px;
    transition: transform 220ms var(--ease);
}

.pwa-tab.is-active {
    color: var(--lime);
}

.pwa-tab.is-active svg {
    transform: translateY(-2px) scale(1.05);
}

.pwa-tab-gap { display: block; }

/* Log sheet */

.pwa-sheet {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    inset: 0;
    color: var(--ink);
    overflow: hidden;
}

.pwa-sheet::backdrop {
    background: rgba(3, 5, 4, 0.6);
    backdrop-filter: blur(4px);
}

.pwa-sheet-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--pwa-max);
    height: 100%;
    margin-inline: auto;
    background: var(--bg-elevated);
    transform: translateY(100%);
    transition: transform 340ms var(--ease);
}

.pwa-sheet[open] .pwa-sheet-card {
    transform: translateY(0);
}

@starting-style {
    .pwa-sheet[open] .pwa-sheet-card {
        transform: translateY(100%);
    }
}

.pwa-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: calc(env(safe-area-inset-top) + 18px) 20px 18px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.pwa-sheet-head h2 { font-size: 1.2rem; }

.pwa-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

.pwa-sheet-body .measure-group { margin-bottom: 16px; }

.pwa-sheet .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pwa-sheet-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px calc(env(safe-area-inset-bottom) + 16px);
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
}

.pwa-sheet-actions .btn { flex: 1 1 auto; }
.pwa-sheet-actions .btn-ghost { flex: 0 0 auto; }

/* Toast */

.pwa-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(var(--pwa-max), calc(100% - 24px));
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.92rem;
    box-shadow: var(--shadow-soft);
    animation: pwaToastIn 320ms var(--ease);
}

.pwa-toast svg { width: 18px; height: 18px; flex: 0 0 auto; }

.pwa-toast.is-hiding {
    animation: pwaToastOut 300ms var(--ease) forwards;
}

.pwa-toast-success {
    background: #14351f;
    border: 1px solid rgba(199, 244, 100, 0.4);
    color: var(--lime);
}

.pwa-toast-error {
    background: #3a1712;
    border: 1px solid rgba(244, 120, 93, 0.4);
    color: #ffb7a3;
}

@keyframes pwaToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes pwaToastOut {
    to { opacity: 0; transform: translateX(-50%) translateY(-16px); }
}

/* Desktop: present the sheet as a centered rounded modal instead of full-screen */

@media (min-width: 700px) {
    /* Scoped to [open] so the closed dialog keeps the UA's display:none —
       an unscoped display would render the sheet as a ghost panel. */
    .pwa-sheet[open] {
        width: 100vw;
        display: grid;
        place-items: center;
        background: transparent;
    }

    .pwa-sheet-card {
        height: auto;
        max-height: 86vh;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
    }

    .pwa-sheet-head {
        padding: 20px 24px;
    }

    .pwa-sheet-actions {
        padding: 16px 24px;
    }
}

/* Bottom card: the metric explainer rises from the bottom edge as a rounded
   card on every screen size. app.js slides it in and out (the Web Animations
   API, which iOS Safari runs reliably, unlike @starting-style in a dialog),
   adds .is-closing to fade the backdrop, and moves it with the finger. */

.pwa-sheet.mx-sheet[open] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: transparent;
}

.pwa-sheet.mx-sheet::backdrop {
    opacity: 1;
    transition: opacity 320ms ease;
}

@starting-style {
    .pwa-sheet.mx-sheet[open]::backdrop { opacity: 0; }
    .pwa-sheet.mx-sheet[open] .pwa-sheet-card { transform: none; }
}

.pwa-sheet.mx-sheet.is-closing::backdrop { opacity: 0; }

.pwa-sheet.mx-sheet .pwa-sheet-card {
    width: 100%;
    max-width: 560px;
    height: auto;
    max-height: min(86dvh, 780px);
    margin: 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: transform 380ms var(--ease), padding-bottom 300ms var(--ease);
}

.pwa-sheet.mx-sheet.is-dragging .pwa-sheet-card { transition: none; }

.mx-grab {
    display: grid;
    place-items: center;
    height: 22px;
    flex: 0 0 auto;
    cursor: grab;
    touch-action: none;
}

.mx-grab::before {
    content: '';
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-strong);
}

.pwa-sheet.mx-sheet .pwa-sheet-head {
    padding: 0 20px 14px;
    touch-action: none;
}

.pwa-sheet.mx-sheet .pwa-sheet-body {
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
    overflow-x: hidden;
    overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-sheet.mx-sheet .pwa-sheet-card,
    .pwa-sheet.mx-sheet::backdrop { transition: none; }
}

/* ==========================================================================
   Desktop app shell (>= 1024px)
   The mobile shell pins every region to a 640px centered column. Here the tab
   bar becomes a left sidebar, the app bar spans the viewport, and the content
   column widens so the grids can breathe instead of stretching the phone view.
   ========================================================================== */

@media (min-width: 1024px) {
    :root {
        --pwa-appbar-h: 64px;
        --pwa-sidebar-w: 248px;
        --pwa-gutter: 32px;
        --pwa-content-max: 1180px;
    }

    /* App bar: full width, brand sitting over the sidebar column */

    .pwa-appbar {
        left: 0;
        width: 100%;
        transform: none;
        height: var(--pwa-appbar-h);
        padding: 0 var(--pwa-gutter) 0 24px;
    }

    .pwa-appbar-brand {
        flex: 0 0 auto;
        width: calc(var(--pwa-sidebar-w) - 24px);
    }

    /* Tab bar -> sidebar */

    .pwa-tabbar {
        top: var(--pwa-appbar-h);
        bottom: 0;
        left: 0;
        transform: none;
        width: var(--pwa-sidebar-w);
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px 12px;
        background: rgba(7, 10, 8, 0.6);
        border-top: 0;
        border-right: 1px solid var(--border);
    }

    .pwa-tab {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        height: auto;
        padding: 12px 14px;
        border-radius: var(--radius-sm);
        font-size: 0.92rem;
        transition: color 200ms ease, background 200ms ease;
    }

    .pwa-tab svg { width: 20px; height: 20px; }

    .pwa-tab:hover {
        color: var(--ink);
        background: rgba(255, 255, 255, 0.04);
    }

    .pwa-tab.is-active {
        background: rgba(199, 244, 100, 0.12);
    }

    .pwa-tab.is-active svg { transform: none; }

    .pwa-tab-gap { display: none; }

    /* Content column */

    .pwa-scroll {
        width: auto;
        max-width: none;
        margin-inline: 0;
        margin-left: var(--pwa-sidebar-w);
        padding: calc(var(--pwa-appbar-h) + 32px) var(--pwa-gutter) 104px;
    }

    .pwa-screen {
        max-width: var(--pwa-content-max);
        margin-inline: auto;
    }

    /* Settings reads as a form, not a full-width wall. Left-aligned so its
       content edge matches the other screens when switching tabs. */

    .pwa-screen[data-screen="settings"] {
        max-width: 760px;
        margin-inline: 0;
    }



    /* FAB -> extended pill, bottom right */

    .pwa-fab {
        left: auto;
        right: var(--pwa-gutter);
        bottom: var(--pwa-gutter);
        transform: none;
        grid-auto-flow: column;
        gap: 10px;
        width: auto;
        height: 52px;
        padding: 0 22px;
        border-radius: 999px;
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
    }

    .pwa-fab svg { width: 20px; height: 20px; }

    .pwa-fab-label { display: block; }

    .pwa-fab:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(199, 244, 100, 0.24);
    }

    .pwa-fab:active {
        transform: scale(0.97);
    }

    /* Wider sheet so the measurement fields get a third column */

    .pwa-sheet-card { max-width: 760px; }

    .pwa-sheet .field-grid,
    .modal .field-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}



@media (prefers-reduced-motion: reduce) {
    .pwa-screen.is-active,
    .pwa-toast {
        animation: none;
    }

    .pwa-sheet-card {
        transition: none;
    }
}

/* Language switcher */
.lang-switcher {
    position: relative;
}

.lang-switcher-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-dim);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.lang-switcher-toggle:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.lang-switcher-caret {
    transition: transform 0.15s ease;
}

.lang-switcher.is-open .lang-switcher-caret {
    transform: rotate(180deg);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 40;
}

.lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher-menu a {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-dim);
}

.lang-switcher-menu a:hover {
    background: var(--surface-strong);
    color: var(--ink);
}

.lang-switcher-menu a.active {
    background: var(--lime);
    color: var(--lime-ink);
}

html[dir="rtl"] .lang-switcher-menu {
    right: auto;
    left: 0;
}

.mobile-nav .lang-switcher {
    align-self: flex-start;
    margin: 8px 0;
    width: 100%;
}

.mobile-nav .lang-switcher-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin-top: 6px;
    box-shadow: none;
}

.mobile-nav .lang-switcher.is-open .lang-switcher-menu {
    display: flex;
}

/* RTL (Arabic) support */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .btn-primary svg,
html[dir="rtl"] .btn-ghost svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .faq-a-inner,
html[dir="rtl"] .lede,
html[dir="rtl"] .quote {
    text-align: right;
}

/* Log check-in: "how to measure" figure (resources/js/body-figure.js).
   Phones get a sticky strip that zooms to the focused point; wide screens
   get a sticky side column with the whole figure. */
.log-guide {
    position: sticky;
    top: -20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 -20px 16px;
    padding: 12px 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

/* Keep fields scrolled into view clear of the pinned strip on phones */
.log-measure input { scroll-margin-top: 140px; }

.log-guide-figure {
    flex: 0 0 72px;
    height: 96px;
    border-radius: var(--radius-sm);
    background: radial-gradient(60% 45% at 50% 40%, rgba(199, 244, 100, 0.04), transparent), var(--bg-alt);
    cursor: pointer;
}

.log-guide-text { min-width: 0; }

.log-guide-kicker {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.log-guide-title {
    margin-top: 2px;
    font-weight: 700;
    font-size: 0.98rem;
}

.log-guide-steps {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-dim);
    font-size: 0.82rem;
    line-height: 1.45;
}

.log-guide-steps li { display: inline; }
.log-guide-steps li + li::before { content: " "; }

.log-guide-mistake { display: none; }

.log-guide.is-swapping .log-guide-text { animation: logGuideIn 0.4s var(--ease); }

@keyframes logGuideIn {
    from { opacity: 0; transform: translateY(4px); }
}

:is(.log-guide, .hx-map, .tl-figure) .loop { cursor: pointer; }
:is(.log-guide, .hx-map, .tl-figure) .loop .hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; }
:is(.log-guide, .hx-map, .tl-figure) .loop .back { fill: none; stroke: rgba(236, 238, 230, 0.16); stroke-width: 1.2; stroke-dasharray: 3 4; }
:is(.log-guide, .hx-map, .tl-figure) .loop .front { fill: none; stroke: rgba(236, 238, 230, 0.34); stroke-width: 1.5; stroke-dasharray: 3 4; transition: stroke 0.2s; }
:is(.log-guide, .hx-map, .tl-figure) .loop:hover .front { stroke: rgba(236, 238, 230, 0.75); }
:is(.log-guide, .hx-map, .tl-figure) .loop .draw,
:is(.log-guide, .hx-map, .tl-figure) .loop .ping,
:is(.log-guide, .hx-map, .tl-figure) .loop .end { opacity: 0; }
:is(.log-guide, .hx-map, .tl-figure) .loop .draw { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgba(199, 244, 100, 0.3)); }
:is(.log-guide, .hx-map, .tl-figure) .loop .ping { fill: none; stroke: var(--lime); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
:is(.log-guide, .hx-map, .tl-figure) .loop .end { fill: var(--lime); }
:is(.log-guide, .hx-map, .tl-figure) .loop.on .front { stroke: transparent; }
:is(.log-guide, .hx-map, .tl-figure) .loop.on .back { stroke: rgba(199, 244, 100, 0.5); stroke-dasharray: 4 4; }
:is(.log-guide, .hx-map, .tl-figure) .loop.on .draw { opacity: 1; animation: logGuideDraw 0.8s var(--ease) both; }
:is(.log-guide, .hx-map, .tl-figure) .loop.on .end { opacity: 1; transition: opacity 0.3s 0.5s; }
:is(.log-guide, .hx-map, .tl-figure) .loop.on .ping { animation: logGuideRing 2.2s var(--ease) 0.6s infinite; }

@keyframes logGuideDraw { from { stroke-dashoffset: 1; } }
@keyframes logGuideRing {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5, 2.6); }
}

@media (min-width: 1024px) {
    .log-measure {
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }

    .log-guide {
        top: 0;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.02);
        /* Room left in the sheet after its header, footer and padding */
        max-height: calc(100dvh - 200px);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .log-guide-figure {
        flex: none;
        width: 100%;
        height: min(34vh, 330px);
    }

    .log-guide-steps {
        display: grid;
        gap: 6px;
        margin-top: 8px;
        padding-inline-start: 18px;
        list-style: decimal;
    }

    .log-guide-steps li { display: list-item; }
    .log-guide-steps li + li::before { content: none; }

    .log-guide-mistake:not([hidden]) {
        display: block;
        margin-top: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(244, 120, 93, 0.28);
        border-radius: var(--radius-sm);
        background: rgba(244, 120, 93, 0.08);
        color: #f2cdc5;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .log-guide-mistake b { color: #ff8e78; }

    .log-measure input { scroll-margin-top: 0; }

    .pwa-sheet .log-measure .field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.log-guide, .hx-map, .tl-figure) .loop.on .draw,
    :is(.log-guide, .hx-map, .tl-figure) .loop.on .ping,
    .log-guide.is-swapping .log-guide-text { animation: none; }
}

/* ==========================================================================
   History: month strip, calendar, check-in cards, and the check-in page
   ========================================================================== */

.hx-delta { font-style: normal; font-weight: 700; white-space: nowrap; }
.hx-delta small { color: var(--muted); font-weight: 600; }
/* Neutral on purpose: up is progress for an arm and a setback for a waist. */
.hx-delta-up,
.hx-delta-down { color: var(--ink-dim); }
.hx-delta-flat { color: var(--muted); }

/* Month strip */

.hx-months {
    display: flex;
    gap: 8px;
    margin: -10px -16px 6px;
    /* A scrolling strip clips whatever pokes out of it, so the padding has
       to make room for the count badge sitting above each chip's corner. */
    padding: 10px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.hx-months::-webkit-scrollbar { display: none; }

.hx-month {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 64px;
    padding: 10px 12px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-dim);
    font-family: var(--font-sans);
    cursor: pointer;
    scroll-snap-align: start;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms var(--ease);
}

.hx-month:hover { border-color: var(--border-strong); color: var(--ink); }

.hx-month-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.hx-month-year {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.hx-month-count {
    position: absolute;
    top: -6px;
    inset-inline-end: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    font-size: 0.68rem;
    font-weight: 800;
}

.hx-month.is-active {
    border-color: rgba(199, 244, 100, 0.5);
    background: rgba(199, 244, 100, 0.12);
    color: var(--ink);
}

.hx-month.is-active .hx-month-name { color: var(--lime); }

.hx-month.is-active .hx-month-count {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--lime-ink);
}

/* Calendar */

/* Only the selected month's calendar shows; on phones the same goes for its cards. */
.hx-cal:not(.is-active) { display: none; }

.hx-feed-head { display: none; }

@media (max-width: 1023px) {
    .hx-feed-month:not(.is-active) { display: none; }
    .hx-feed-month.is-active { animation: pwaScreenIn 320ms var(--ease); }
}

.hx-cal {
    padding: 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(199, 244, 100, 0.03), transparent 60%),
        var(--bg-elevated);
}

.hx-cal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hx-cal-title { flex: 1; min-width: 0; text-align: center; }

.hx-cal-title h2 {
    font-size: 1.12rem;
    margin-bottom: 2px;
}

.hx-cal-title p {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.hx-cal-nav {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink-dim);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.hx-cal-nav svg { width: 18px; height: 18px; fill: currentColor; }
.hx-cal-nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.hx-cal-nav:disabled { opacity: 0.3; cursor: default; }

[dir="rtl"] .hx-cal-nav svg,
[dir="rtl"] .hx-back svg,
[dir="rtl"] .hx-card-go svg { transform: scaleX(-1); }

.hx-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.hx-cal-dow {
    padding-bottom: 4px;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-cal-day {
    position: relative;
    display: grid;
    place-items: center;
    height: 40px;
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--ink-dim);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
}

.hx-cal-day.is-future { color: rgba(146, 160, 150, 0.45); }

.hx-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }

.hx-cal-day.is-logged {
    background: rgba(199, 244, 100, 0.16);
    color: var(--lime);
    font-weight: 800;
    cursor: pointer;
    transition: background 200ms ease, transform 200ms var(--ease);
}

.hx-cal-day.is-logged:hover { background: rgba(199, 244, 100, 0.28); transform: scale(1.06); }

/* A little dot marks days that came with a photo */
.hx-cal-day.has-photo::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

/* Check-in cards */

.hx-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pwa-screen.is-active .hx-list li {
    animation: lbRowIn 460ms calc(var(--i, 0) * 50ms + 60ms) var(--ease) backwards;
}

.hx-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--ease);
}

.hx-card:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.06);
}

.hx-card:active { transform: scale(0.99); }

.hx-card-date {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    align-content: center;
    width: 52px;
    height: 56px;
    border-radius: 14px;
    background: rgba(199, 244, 100, 0.1);
    border: 1px solid rgba(199, 244, 100, 0.2);
}

.hx-card-date strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--lime);
}

.hx-card-date small {
    margin-top: 3px;
    color: var(--ink-dim);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-card-body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 8px;
}

.hx-card-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
}

.hx-card-when {
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 600;
}

.hx-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.hx-card-stat { display: grid; gap: 1px; }

.hx-card-stat small {
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hx-card-stat b {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}

.hx-card-stat b em,
.hx-row-value em,
.hx-stat strong em {
    margin-inline-start: 2px;
    color: var(--muted);
    font-size: 0.7em;
    font-style: normal;
    font-weight: 600;
}

.hx-card-stat .hx-delta { font-size: 0.7rem; }

.hx-card-meta {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.hx-card-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    background: var(--bg-elevated);
}

.hx-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hx-card-thumb-badge {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(7, 10, 8, 0.75);
    color: var(--lime);
}

.hx-card-thumb-badge svg { width: 12px; height: 12px; fill: currentColor; }

.hx-card-go {
    flex: 0 0 auto;
    color: var(--muted);
}

.hx-card-go svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Check-in page */

.hx-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: -6px 0 14px -8px;
    padding: 6px 12px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-dim);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

[dir="rtl"] .hx-back { margin: -6px -8px 14px 0; padding: 6px 6px 6px 12px; }

.hx-back svg { width: 20px; height: 20px; fill: currentColor; }
.hx-back:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }

.hx-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.hx-entry-kicker {
    margin-bottom: 4px;
    color: var(--lime);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hx-entry-head h1 {
    font-size: clamp(1.4rem, 5.4vw, 1.9rem);
    margin-bottom: 4px;
}

.hx-entry-sub {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.hx-entry-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.hx-entry-actions .btn svg { width: 15px; height: 15px; fill: currentColor; }
.hx-entry-actions .btn { gap: 6px; }

.hx-entry-top {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
}

.hx-entry-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 62vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-elevated);
    cursor: zoom-in;
}

.hx-entry-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hx-entry-photo-hint {
    position: absolute;
    bottom: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(7, 10, 8, 0.72);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 700;
}

.hx-entry-photo-hint svg { width: 13px; height: 13px; fill: currentColor; }

.hx-entry-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

/* Two summary boxes share the first row; weight, height and body fat the second. */
.hx-stat { grid-column: span 3; }
.hx-stat-basic {
    grid-column: span 2;
    min-width: 0;
    padding: 12px;
    container-type: inline-size;
}

/* These boxes run narrow (a third of the stats column, which shares its row
   with the photo on tablets), so the number scales with the box itself. */
.hx-stat.hx-stat-basic strong {
    font-size: clamp(0.92rem, 19cqi, 1.3rem);
    white-space: nowrap;
}

.hx-stat {
    display: grid;
    gap: 3px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.hx-stat > span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-stat strong {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.15;
}

.hx-stat small {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.hx-group { margin-bottom: 20px; }

.hx-group h2 {
    margin-bottom: 10px;
    color: var(--ink-dim);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hx-rows {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.hx-row {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
}

.hx-row + .hx-row { border-top: 1px solid var(--border); }

.hx-row-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hx-row-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
}

.hx-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(199, 244, 100, 0.14);
    color: var(--lime);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-row-value {
    font-family: var(--font-display);
    font-size: 1.12rem;
    white-space: nowrap;
}

.hx-row-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.78rem;
}

.hx-range {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.hx-range-track {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.hx-range-dot {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--pos);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.2);
    transform: translate(-50%, -50%);
}

[dir="rtl"] .hx-range-dot { transform: translate(50%, -50%); }

/* Check-in body map: the log sheet's figure, with loops on the spots measured.
   Phones pin it as a strip under the app bar; desktop gives it a column. */
.hx-map {
    position: sticky;
    top: calc(var(--pwa-appbar-h) + env(safe-area-inset-top));
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 -16px 18px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-block: 1px solid var(--border);
}

.hx-map-figure {
    flex: 0 0 72px;
    height: 96px;
    border-radius: var(--radius-sm);
    background: radial-gradient(60% 45% at 50% 40%, rgba(199, 244, 100, 0.04), transparent), var(--bg-alt);
}

.hx-map-text { min-width: 0; }

.hx-map-kicker {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hx-map-title {
    margin-top: 2px;
    font-weight: 700;
    font-size: 0.98rem;
}

.hx-map-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.hx-map-value em {
    margin-inline-start: 2px;
    color: var(--muted);
    font-size: 0.7em;
    font-style: normal;
    font-weight: 600;
}

.hx-map .hx-row-facts { margin-top: 2px; font-size: 0.76rem; }

.hx-map-hint { display: none; }

.hx-map.is-swapping .hx-map-text > :not(.hx-map-kicker, .hx-map-hint) { animation: logGuideIn 0.4s var(--ease); }

/* Unmeasured spots stay as faint guides; measured ones carry a lime tape. */
.hx-map .loop:not(.is-logged) { pointer-events: none; opacity: 0.45; }
.hx-map .loop.is-logged .front { stroke: rgba(199, 244, 100, 0.55); stroke-dasharray: none; }
.hx-map .loop.is-logged .back { stroke: rgba(199, 244, 100, 0.22); }

.hx-row[data-body-field] { cursor: pointer; transition: background 200ms ease; }
.hx-row[data-body-field]:hover,
.hx-row.is-mapped { background: rgba(199, 244, 100, 0.05); }
.hx-row.is-mapped { box-shadow: inset 3px 0 0 var(--lime); }
[dir="rtl"] .hx-row.is-mapped { box-shadow: inset -3px 0 0 var(--lime); }

@media (max-width: 420px) {
    .hx-stat-basic { padding: 10px; }
    .hx-card { gap: 12px; padding: 12px; }
    .hx-card-date { width: 46px; height: 52px; }
    .hx-card-thumb { width: 54px; height: 70px; }
    .hx-card-go { display: none; }
}

@media (min-width: 700px) {
    .hx-entry-top.has-photo {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .hx-months { margin: 0 0 6px; padding-inline: 6px; }

    .pwa-screen[data-screen="entry"] {
        max-width: 860px;
        margin-inline: 0;
    }

    /* The History screen fills the viewport and holds still: only the feed of
       cards scrolls, beside the calendar in the start column. */
    .pwa-scroll:has(> [data-screen="history"].is-active) { padding-bottom: 32px; }

    .pwa-screen[data-screen="history"].is-active {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--pwa-appbar-h) - 64px);
        height: calc(100dvh - var(--pwa-appbar-h) - 64px);
    }

    .hx {
        flex: 1;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
        gap: 28px;
    }

    .hx-side {
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
    }

    .hx-side::-webkit-scrollbar { display: none; }


    .hx-cal { padding: 18px 20px; margin-bottom: 0; }
    .hx-cal-day { height: 42px; }

    .hx-feed {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: grid;
        align-content: start;
        gap: 28px;
        padding-inline-end: 8px;
        /* Room for the floating "Log check-in" button over the last card */
        padding-bottom: 72px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }

    .hx-entry-body.has-map {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .hx-map {
        top: calc(var(--pwa-appbar-h) + 24px);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 0;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    .hx-map-figure {
        flex: none;
        width: 100%;
        height: 380px;
    }

    .hx-map .loop.is-logged { cursor: pointer; }

    .hx-map-hint {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.74rem;
        line-height: 1.4;
    }

    .hx-feed-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border);
        transition: color 200ms ease;
    }

    .hx-feed-head h2 {
        font-size: 1.05rem;
        color: var(--ink-dim);
    }

    .hx-feed-head span {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
    }

    .hx-feed-month.is-active .hx-feed-head h2 { color: var(--lime); }

    /* Tall enough that even the oldest month can scroll up to the top of the
       feed, which is what hands the calendar over to it. */
    .hx-feed-month:last-child { min-height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-feed-month.is-active,
    .pwa-screen.is-active .hx-list li { animation: none; }
}

/* ==========================================================================
   Photos: tools, an iOS Photos–style library, the viewer, and the tool sheets
   ========================================================================== */

/* Tools */

.ph-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 26px;
}

.ph-tool {
    --tool: var(--lime);
    --tool-soft: rgba(199, 244, 100, 0.08);
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 90% at 0% 0%, var(--tool-soft), transparent 65%),
        var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    text-align: start;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms var(--ease);
}

.ph-tool-reel { --tool: #ffb29e; --tool-soft: rgba(244, 120, 93, 0.08); }
.ph-tool-add { --tool: var(--ink); --tool-soft: rgba(255, 255, 255, 0.06); }

.ph-tool:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-2px); }
.ph-tool:active:not(:disabled) { transform: scale(0.98); }
.ph-tool:disabled { cursor: default; opacity: 0.5; }

.ph-tool-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--tool-soft);
    color: var(--tool);
}

.ph-tool-icon svg { width: 22px; height: 22px; fill: currentColor; }

.ph-tool-text { display: grid; gap: 2px; min-width: 0; }

.ph-tool-text strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    line-height: 1.2;
}

.ph-tool-text small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Library */

.ph-library-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ph-library-head h2 { font-size: 1.15rem; }

.ph-library-head span {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Edge to edge on phones, with hairline gaps, like the Photos app */
.ph-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-inline: -16px;
}

.ph-thumb {
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: var(--bg-elevated);
    cursor: zoom-in;
    overflow: hidden;
}

.ph-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms var(--ease), filter 200ms ease;
}

.ph-thumb:hover img { filter: brightness(1.08); }
.ph-thumb:active img { transform: scale(0.97); }
.ph-thumb:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

/* Round icon buttons on photo surfaces */

.ph-round {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: var(--ink);
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
}

.ph-round:hover { background: rgba(255, 255, 255, 0.18); }
.ph-round svg { width: 20px; height: 20px; fill: currentColor; }

/* Viewer and reel: full screen, black like the Photos app */

.ph-viewer,
.ph-reel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    inset: 0;
    background: #000;
    color: var(--ink);
    overflow: hidden;
}

.ph-viewer[open],
.ph-reel[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    animation: phFadeIn 220ms ease;
}

.ph-viewer::backdrop,
.ph-reel::backdrop { background: #000; }

@keyframes phFadeIn { from { opacity: 0; } }

.ph-viewer-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
}

.ph-viewer-title {
    flex: 1;
    min-width: 0;
    display: grid;
    text-align: center;
}

.ph-viewer-title strong { font-family: var(--font-display); font-size: 1rem; }
.ph-viewer-title small { color: var(--muted); font-size: 0.75rem; font-weight: 600; }

.ph-viewer-spacer { width: 40px; flex: 0 0 auto; }

.ph-viewer-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    touch-action: pan-y pinch-zoom;
    user-select: none;
}

.ph-viewer-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
}

.ph-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.ph-viewer-nav.is-prev { inset-inline-start: 16px; }
.ph-viewer-nav.is-next { inset-inline-end: 16px; }
.ph-viewer-nav:disabled { opacity: 0; pointer-events: none; }
[dir="rtl"] .ph-viewer-nav svg { transform: scaleX(-1); }

/* Phones swipe instead */
@media (pointer: coarse) {
    .ph-viewer-nav { display: none; }
}

.ph-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px);
}

.ph-viewer-bar .btn { gap: 6px; }
.ph-viewer-bar .btn svg { width: 15px; height: 15px; fill: currentColor; }
.ph-viewer-delete { margin-inline-start: auto; }

/* Before & after */

.ph-compare-body {
    /* A flex column, not a grid: a grid row sizes itself before the photo
       frame's aspect ratio resolves, letting the frame spill over the strips. */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ph-compare-body > * { flex: 0 0 auto; min-width: 0; }

.ph-mode {
    align-self: center;
    margin-bottom: 0;
}

.ph-compare {
    position: relative;
    align-self: center;
    /* Capped by height too, so on short screens (a desktop's centred sheet)
       the photo pickers below stay in view */
    width: min(100%, 460px, 42dvh);
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #000;
    /* Before always sits on the left, whatever the reading direction */
    direction: ltr;
    user-select: none;
}

.ph-compare-pane {
    position: absolute;
    inset: 0;
    margin: 0;
}

.ph-compare-pane img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

.ph-compare.is-slider .is-before {
    z-index: 1;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ph-compare-pane figcaption {
    position: absolute;
    bottom: 12px;
    display: grid;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(7, 10, 8, 0.72);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
}

.ph-compare-pane figcaption b {
    color: var(--lime);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.is-before figcaption { left: 12px; }
.is-after figcaption { right: 12px; text-align: right; }

.ph-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    z-index: 2;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    pointer-events: none;
}

.ph-compare-handle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    max-width: none;
    height: 40px;
    padding: 9px;
    border-radius: 50%;
    background: #fff;
    fill: #0f1a0c;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* An invisible range over the whole photo: drag anywhere, and the keyboard
   and screen readers get a real slider for free. */
.ph-compare-range {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
}

.ph-compare:has(.ph-compare-range:focus-visible) .ph-compare-handle svg {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

.ph-compare.is-side {
    width: 100%;
    aspect-ratio: 8 / 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.ph-compare.is-side .ph-compare-pane { position: relative; }
.ph-compare.is-side .is-after figcaption { left: 12px; right: auto; text-align: left; }
.ph-compare.is-side .ph-compare-handle,
.ph-compare.is-side .ph-compare-range { display: none; }

.ph-compare-facts {
    color: var(--ink-dim);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
}

.ph-pick h3 {
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ph-pick-strip {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 4px 4px 6px;
    margin-inline: -4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ph-pick-strip::-webkit-scrollbar { display: none; }

.ph-pick-thumb {
    flex: 0 0 64px;
    display: grid;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    cursor: pointer;
}

.ph-pick-thumb img {
    width: 64px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-alt);
    transition: outline-color 200ms ease, opacity 200ms ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
    opacity: 0.7;
}

.ph-pick-thumb span {
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-pick-thumb:hover img { opacity: 1; }
.ph-pick-thumb.is-picked img { outline-color: var(--lime); opacity: 1; }
.ph-pick-thumb.is-picked span { color: var(--lime); }

.ph-sheet .pwa-sheet-actions .btn { gap: 8px; }
.ph-sheet .pwa-sheet-actions .btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Progress reel */

.ph-reel-stage {
    position: relative;
    min-height: 0;
}

.ph-reel-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 420ms ease;
}

.ph-reel-frame.is-on { opacity: 1; }

.ph-reel-date {
    position: absolute;
    inset-inline-start: 16px;
    bottom: 16px;
    z-index: 1;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(7, 10, 8, 0.72);
    backdrop-filter: blur(8px);
}

.ph-reel-date strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.ph-reel-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px calc(env(safe-area-inset-bottom) + 16px);
}

.ph-reel-play { background: var(--lime); color: var(--lime-ink); }
.ph-reel-play:hover { background: var(--lime-strong); }
.ph-reel .ph-icon-play,
.ph-reel.is-paused .ph-icon-pause { display: none; }
.ph-reel.is-paused .ph-icon-play { display: block; }

.ph-reel-scrub {
    flex: 1;
    min-width: 0;
    accent-color: var(--lime);
}

.ph-reel-speed {
    min-width: 48px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: none;
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
}

/* Add photo */

.ph-add-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 200ms ease, background 200ms ease;
}

.ph-add-drop:hover { border-color: var(--lime); background: rgba(199, 244, 100, 0.04); }
.ph-add-drop:has(+ input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }

.ph-add-preview {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 88px;
    height: 110px;
    border-radius: 12px;
    background: var(--bg-alt);
    color: var(--muted);
    overflow: hidden;
}

.ph-add-preview svg { width: 28px; height: 28px; fill: currentColor; }
.ph-add-preview img { width: 100%; height: 100%; object-fit: cover; }

.ph-add-copy { display: grid; gap: 4px; }
.ph-add-copy strong { font-family: var(--font-display); font-size: 1rem; }
.ph-add-copy small { color: var(--muted); font-size: 0.8rem; }

.ph-add-date { margin-top: 18px; }

/* One row per chosen photo: thumbnail, its own date, upload state, remove. */
.ph-add-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.ph-add-list:empty { display: none; }

.ph-add-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 200ms ease, opacity 200ms ease;
}

.ph-add-thumb {
    width: 56px;
    height: 70px;
    border-radius: 10px;
    background: var(--bg-alt);
    overflow: hidden;
}

.ph-add-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ph-add-item-body { display: grid; gap: 4px; min-width: 0; }
.ph-add-item-label { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.ph-add-item-note { color: var(--lime); font-size: 0.72rem; font-weight: 600; }
.ph-add-item-error { color: var(--coral); font-size: 0.75rem; font-weight: 600; }
.ph-add-item-note[hidden], .ph-add-item-error[hidden] { display: none; }

.ph-add-remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.ph-add-remove:hover { background: var(--surface-strong); color: var(--ink); }
.ph-add-remove svg { width: 16px; height: 16px; fill: currentColor; }

.ph-add-item-state { width: 18px; height: 18px; }

.ph-add-item.is-uploading .ph-add-item-state {
    border: 2px solid var(--border-strong);
    border-top-color: var(--lime);
    border-radius: 50%;
    animation: phAddSpin 0.8s linear infinite;
}

.ph-add-item.is-done { opacity: 0.6; }
.ph-add-item.is-done .ph-add-item-state {
    background: var(--lime);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ph-add-item.is-error { border-color: rgba(244, 120, 93, 0.45); }
.ph-add-item.is-uploading .ph-add-remove,
.ph-add-item.is-done .ph-add-remove { visibility: hidden; }

@keyframes phAddSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ph-add-item.is-uploading .ph-add-item-state { animation-duration: 2.4s; }
}

.ph-add-date-note {
    display: block;
    margin-top: 6px;
    color: var(--lime);
    font-size: 0.78rem;
    font-weight: 600;
}

.ph-add-date-note[hidden] { display: none; }

.ph-add-note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Photo guide */

.ph-guide-intro {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ph-guide-tips {
    display: grid;
    gap: 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ph-guide-tips li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ph-guide-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(110, 180, 255, 0.14);
    color: #9fd4ff;
}

.ph-guide-icon svg { width: 22px; height: 22px; fill: currentColor; }

.ph-guide-text { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.ph-guide-text strong { font-family: var(--font-display); font-size: 0.95rem; }
.ph-guide-text small { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

.ph-guide .pwa-sheet-actions .btn { flex: 1; }

.ph-guide-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lime);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ph-add .ph-guide-link { margin-top: 10px; }

.photo-field-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

@media (min-width: 640px) {
    .ph-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
}

@media (min-width: 1024px) {
    .ph-tool {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
    }

    .ph-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 4px;
        margin-inline: 0;
        border-radius: var(--radius-md);
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .ph-tools { gap: 8px; }
    .ph-tool { padding: 12px; }
    .ph-tool-icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-viewer[open],
    .ph-reel[open] { animation: none; }
    .ph-reel-frame { transition: none; }
}

/* ==========================================================================
   History ⇄ Photos: shared header with a sliding two-way switch
   ========================================================================== */

.pg-head { margin-bottom: 22px; }

.pg-head h1 {
    margin-bottom: 14px;
    font-size: clamp(1.7rem, 6vw, 2.1rem);
}

.pg-switch {
    --dir: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
}

[dir="rtl"] .pg-switch { --dir: -1; }

/* The highlight: half the track, moved across for Photos */
.pg-switch-glider {
    position: absolute;
    top: 5px;
    bottom: 5px;
    inset-inline-start: 5px;
    width: calc(50% - 5px);
    border: 1px solid rgba(199, 244, 100, 0.32);
    border-radius: 12px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(199, 244, 100, 0.11), transparent 70%),
        rgba(199, 244, 100, 0.08);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.pg-switch[data-active="photos"] .pg-switch-glider {
    transform: translateX(calc(100% * var(--dir)));
}

/* Arriving from the other screen, the highlight starts where it was */
.pg-switch.is-sliding[data-active="photos"] .pg-switch-glider { animation: pgToPhotos 400ms var(--ease); }
.pg-switch.is-sliding[data-active="history"] .pg-switch-glider { animation: pgToHistory 400ms var(--ease); }

@keyframes pgToPhotos { from { transform: translateX(0); } }
@keyframes pgToHistory { from { transform: translateX(calc(100% * var(--dir))); } }

.pg-switch-tab {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 250ms ease;
}

.pg-switch-tab:hover { color: var(--ink); }
.pg-switch-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

.pg-switch-tab svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: currentColor;
    transition: color 250ms ease;
}

.pg-switch-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-switch-tab em {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-dim);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    transition: background 250ms ease, color 250ms ease;
}

.pg-switch-tab.is-active { color: var(--ink); }
.pg-switch-tab.is-active svg { color: var(--lime); }
.pg-switch-tab.is-active em { background: var(--lime); color: var(--lime-ink); }

/* Switching between the two, the header holds still and the content below
   it animates in, rather than the whole screen sliding up */
.pwa-screen.is-active.is-sibling-switch { animation: none; }
.pwa-screen.is-sibling-switch > :not(.pg-head) { animation: pwaScreenIn 360ms var(--ease); }

@media (min-width: 1024px) {
    .pg-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .pg-head h1 { margin-bottom: 0; }

    .pg-switch { flex: 0 1 420px; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-switch.is-sliding .pg-switch-glider,
    .pwa-screen.is-sibling-switch > :not(.pg-head) { animation: none; }
}

/* ==========================================================================
   App tour: a spotlight on one real control at a time, with a tip beside it
   ========================================================================== */

.tour {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
}

.tour::backdrop { background: transparent; }

/* The hole's huge shadow is the dimmed screen around the spotlight. */
.tour-hole {
    position: absolute;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(3, 5, 4, 0.82);
    outline: 2px solid var(--lime);
    outline-offset: 0;
    pointer-events: none;
    transition: left 380ms var(--ease), top 380ms var(--ease), width 380ms var(--ease), height 380ms var(--ease);
}

.tour.is-centred { background: rgba(3, 5, 4, 0.82); }

/* Switching screens mid-tour: the dim stays, the tip and outline wait. */
.tour.is-moving .tour-tip { opacity: 0; pointer-events: none; }
.tour.is-moving .tour-hole { outline-color: transparent; }
.tour.is-centred .tour-hole { display: none; }

.tour-tip {
    position: absolute;
    width: min(320px, calc(100vw - 32px));
    padding: 18px 18px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    transition: left 380ms var(--ease), top 380ms var(--ease), opacity 200ms ease;
}

.tour-tip h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
}

.tour-tip p {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.tour-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.tour-foot small {
    margin-inline-end: auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.tour-skip {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.tour-skip:hover { color: var(--ink); }
.tour-skip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tour-hole,
    .tour-tip { transition: none; }
}

/* ==========================================================================
   Reduce motion (Settings). Set on <html> for users who turned it on; the
   device's own prefers-reduced-motion is handled by each component above.
   Animations jump to their end state, so nothing is left hidden or mid-way.
   ========================================================================== */

html[data-motion="reduce"],
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
}

/* On its own: a browser that rejects ::backdrop here drops only this rule. */
html[data-motion="reduce"] ::backdrop {
    transition-duration: 0.01ms !important;
}