/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Self-hosted Hanken Grotesk — the public/patient brand face. Warm, calm, and
   legible; served from the asset pipeline so no page requests a font CDN. */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/hanken-grotesk-latin-400-normal-1f96358d.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/hanken-grotesk-latin-500-normal-0da6d705.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/hanken-grotesk-latin-600-normal-2e88b567.woff2") format("woff2");
}
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/hanken-grotesk-latin-700-normal-36d7fd0b.woff2") format("woff2");
}

/* Source Serif 4 — the reading-body voice for long-form public pages only
   (About, Safety, Support, Privacy, Manual). Headings and all UI stay
   Hanken Grotesk. Self-hosted, so no page requests a font CDN. */
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/source-serif-4-latin-400-normal-9a523421.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/source-serif-4-latin-600-normal-6988c85a.woff2") format("woff2");
}
@font-face {
    font-family: "Source Serif 4";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/source-serif-4-latin-400-italic-e8438c2e.woff2") format("woff2");
}

dl {
    font-size: var(--text-sm);
    dt {
        font-weight: var(--font-weight-bold);
        margin-top: calc(var(--spacing)*4);
    }
}

/* ── Reading typography for public information pages ──────────────────────
   A scoped treatment for prose surfaces (About, Safety, Support, Privacy,
   and the Markdown-rendered Manual). It reads larger and calmer than the
   16px product body — a reading surface, not a control surface — and it
   gives the raw Markdown HTML a full type hierarchy that Tailwind Preflight
   otherwise strips. Colours reference theme tokens, so light and dark both
   work. The native-shared --text-* scale is deliberately left untouched. */
.prose-content {
    /* Reading scale — a dedicated public-prose type ramp, documented in
       DESIGN.md. Distinct from the native-shared --text-* product scale,
       which has no reading-body step above 16px. */
    --reading-body: 1.0625rem;  /* 17px — clean sans reading size (Castos-style) */
    --reading-lede: 1.1875rem;  /* 19px */
    --reading-meta: 0.9375rem;  /* 15px — dates, footnotes */
    --reading-h3:   1.3125rem;  /* 21px */
    --reading-h2:   1.5rem;     /* 24px */
    --reading-h1:   1.875rem;   /* 30px */

    /* Reading voice: a clean neutral sans (Helvetica Neue on Apple, Arial as
       the cross-platform fallback), for a Castos-style all-sans reading feel. */
    --reading-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* Headings: plain Helvetica (NOT Neue, NOT Hanken). */
    --heading-font: Helvetica, Arial, sans-serif;

    /* The reading content is a raised "sheet" of surface white floating on
       the warm cream canvas — the depth cue that separates it from the nav,
       and keeps the calm, flat public voice (a hairline and a whisper of
       shadow, not a dramatic float). Measure stays ~68ch inside the padding. */
    max-width: 54rem;
    margin-inline: auto;
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-hairline) 60%, transparent);
    border-radius: 0;
    box-shadow:
        -1px -1px 2px rgb(20 18 16 / 0.04),
        -18px -18px 44px -20px rgb(20 18 16 / 0.18);
    color: var(--color-ink);
    font-family: var(--reading-font);
    font-size: var(--reading-body);
    line-height: 1.6;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .prose-content { padding: 2rem 3rem 2.75rem; }
}

/* The "steady signal" — a small heartbeat mark at the head of every reading
   sheet. It is the product's own motif (the app is a heart-rate companion),
   so the info pages are recognisably myPotential rather than a generic
   document. Themed via two stroke colours; drawn once on arrival below. */
.prose-content::before {
    content: "";
    display: block;
    width: 60px;
    height: 22px;
    margin-bottom: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' fill='none'%3E%3Cpath d='M0 12 H18 l2 -3 l2 5 l3 -12 l3 16 l3 -8 l2 2 H64' stroke='%234A9B8E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center;
    background-size: contain;
}
[data-theme="dark"] .prose-content::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' fill='none'%3E%3Cpath d='M0 12 H18 l2 -3 l2 5 l3 -12 l3 16 l3 -8 l2 2 H64' stroke='%236FB8AB' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .prose-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' fill='none'%3E%3Cpath d='M0 12 H18 l2 -3 l2 5 l3 -12 l3 16 l3 -8 l2 2 H64' stroke='%236FB8AB' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

/* Arrival: the sheet settles in and the heartbeat draws across once, then
   rests. One calm authored moment — "ready when you are." Fully static and
   visible when reduced motion is requested. */
@media (prefers-reduced-motion: no-preference) {
    .prose-content { animation: prose-arrive 500ms var(--ease-calm) both; }
    .prose-content::before { animation: signal-draw 820ms var(--ease-calm) both; }
}

@keyframes prose-arrive {
    from { opacity: 0.5; transform: translateY(8px); }
    to   { opacity: 1;   transform: none; }
}

@keyframes signal-draw {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Headings use plain Helvetica (--heading-font); body carries Helvetica Neue
   (--reading-font). No Hanken on the reading sheet. */
.prose-content h1,
.prose-content h2,
.prose-content h3,
.prose-content .meta {
    font-family: var(--heading-font);
}

.prose-content > :first-child { margin-top: 0; }
.prose-content > :last-child  { margin-bottom: 0; }

.prose-content h1 {
    margin: 0 0 0.5em;
    color: var(--color-teal-ink);
    font-size: var(--reading-h1);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.prose-content h2 {
    margin: 2.25rem 0 0.6rem;
    color: var(--color-ink-strong);
    font-size: var(--reading-h2);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.prose-content h3 {
    margin: 1.75rem 0 0.4rem;
    color: var(--color-ink-strong);
    font-size: var(--reading-h3);
    font-weight: 600;
    line-height: 1.3;
}

.prose-content p { margin: 0 0 1.05em; }

.prose-content .lede {
    margin-bottom: 1.5rem;
    color: var(--color-ink);
    font-size: var(--reading-lede);
    line-height: 1.55;
}

.prose-content .meta { font-size: var(--reading-meta); color: var(--color-ink); }

.prose-content ul,
.prose-content ol {
    margin: 0 0 1.15em;
    padding-left: 1.5em;
}
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin: 0.35em 0; padding-left: 0.25em; }
.prose-content li::marker { color: var(--color-ink-muted); }
.prose-content li > ul,
.prose-content li > ol { margin: 0.35em 0 0.5em; }

.prose-content a {
    color: var(--color-teal-ink);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-teal-ink) 40%, transparent);
    text-underline-offset: 2px;
    text-decoration-thickness: 0.06em;
    transition: text-decoration-color 200ms var(--ease-calm);
}
.prose-content a:hover {
    text-decoration-color: currentColor;
}

.prose-content strong { font-weight: 600; color: var(--color-ink-strong); }
.prose-content em { font-style: italic; }

/* App screenshots are supporting figures, not page-width content. Keeping
   their native portrait shape preserves legibility without overwhelming the
   reading flow on narrow screens. */
.prose-content .manual-figure {
    margin: 1.75rem 0 2rem;
}
.prose-content .manual-figure img {
    display: block;
    width: min(100%, 26rem);
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-card);
}
.prose-content .manual-figure img.manual-device-shot {
    border-radius: 0;
    filter: drop-shadow(-0.8rem -0.8rem 1.4rem rgb(20 18 16 / 0.33));
}
.prose-content .manual-figure img.manual-phone-shot {
    width: min(100%, 19.5rem);
}
.prose-content .manual-figure img.manual-watch-shot {
    width: min(100%, 18.2rem);
}
.prose-content .manual-figure figcaption {
    max-width: 26rem;
    margin: 0.65rem auto 0;
    color: var(--color-ink-muted);
    font-family: var(--heading-font);
    font-size: var(--reading-meta);
    line-height: 1.45;
    text-align: center;
}

.prose-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: color-mix(in srgb, var(--color-ink) 8%, transparent);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-input);
}
.prose-content pre {
    margin: 0 0 1.15em;
    padding: 1rem 1.15rem;
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
    border-radius: var(--radius-card);
    overflow-x: auto;
    line-height: 1.5;
}
.prose-content pre code { background: none; padding: 0; font-size: 0.9em; }

.prose-content blockquote {
    margin: 1.3em 0;
    padding-left: 1rem;
    border-left: 2px solid var(--color-teal-ink);
    color: var(--color-ink);
    font-style: italic;
}

.prose-content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--color-hairline);
}

.prose-content table {
    width: 100%;
    margin: 0 0 1.15em;
    border-collapse: collapse;
    font-size: 0.975rem;
}
.prose-content th,
.prose-content td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-hairline);
    text-align: left;
}
.prose-content th { font-weight: 600; }

/* ---- Public nav ---------------------------------------------------------- */

/* A quiet shadow beneath the sticky top bar gives it gentle depth and
   explains "this sits above the content." Two-layer warm-dark falloff;
   restrained — public surfaces stay calm, not dramatic. */
.public-top-bar {
  box-shadow:
    0 4px 14px rgb(20 18 16 / 0.21),
    0 1px  3px rgb(20 18 16 / 0.09);
}

/* ---- Changelog ---------------------------------------------------------- */

/* Each release is a block separated by a hairline, newest first. The head
   pairs the version/build heading with a channel badge. */
.changelog-release {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--color-hairline);
}
.changelog-release:first-of-type {
    padding-top: 0;
    margin-top: 1.5rem;
    border-top: 0;
}

.changelog-release__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
}
.changelog-release__head h2 { margin: 0; }

.changelog-release__date {
    margin: 0.15rem 0 0.75rem;
    color: var(--color-ink);
}

/* Channel badge — teal for beta, neutral ink for production. Small, quiet,
   never an action. */
.changelog-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--heading-font);
    font-size: var(--reading-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
}
.changelog-badge--beta { color: var(--color-teal-ink); }
.changelog-badge--production { color: var(--color-ink); }

.prose-content .changelog-group {
    margin: 1.1rem 0 0.3rem;
    font-size: var(--reading-h3);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-teal-ink);
}
.changelog-release ul { margin: 0 0 0.75rem; }

/* Channel filter bar — pill-shaped links between the lede and first release. */
.changelog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0 0.75rem;
}
.changelog-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-family: var(--heading-font);
    font-size: var(--reading-meta);
    font-weight: 600;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: background-color 200ms var(--ease-calm), color 200ms var(--ease-calm);
}
.changelog-filter:hover {
    background: color-mix(in srgb, var(--color-teal-ink) 8%, transparent);
    color: var(--color-teal-ink);
}
.changelog-filter--active {
    background: color-mix(in srgb, var(--color-teal-ink) 12%, transparent);
    color: var(--color-teal-ink);
}

.changelog-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-hairline);
}
.changelog-pager__link { font-weight: 600; }

label:has(+ input:required):after {
    content: " *"
}

input:user-invalid, .field_with_errors input {
    border-color: var(--color-destructive);
}

label:has(+ input:user-invalid), .field_with_errors label {
    color: var(--color-destructive);
}