/* ==========================================================================
   css/pro.css — the Pro layer, in Lantern.

   Loaded two ways:
     - js/pro/index.js injects it on any page with a timer
     - /pro and /pro/thanks link it directly

   Every colour is a token from css/styles.css. Nothing here defines a colour
   that only exists in a media query or a .night block, because the token set
   already swaps for night. Nothing has a border: cards are lifted by
   --lift, fields are wells, buttons are pills.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Panels (custom pattern, your practice, soundscapes)
   -------------------------------------------------------------------------- */
.pro-panel {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--lift);
    padding: 1.35rem 1.4rem 1.15rem;
    margin: 0 0 1.25rem;
    text-align: left;
}

.pro-panel-title {
    font-family: var(--ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.35rem;
}

.pro-panel-help {
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--graphite);
    margin: 0 0 0.75rem;
}

.pro-panel-status {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--graphite);
    margin: 0.5rem 0 0;
    min-height: 1.2em;
}

.pro-panel-status.is-error {
    color: var(--bad);
}

.pro-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Buttons and the Pro pill
   -------------------------------------------------------------------------- */
.pro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--hit);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--well);
    color: var(--ink);
    font-family: var(--ui);
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.pro-btn:hover:not(:disabled) {
    background: var(--line);
}

.pro-btn:disabled {
    color: var(--graphite);
    opacity: 0.6;
    cursor: not-allowed;
}


.prose a.pro-btn { color: var(--ink); }

/* `.prose a` (0,1,1) would otherwise out-rank these (0,1,0) selectors and paint
   the label green on a green button: the invisible-CTA bug of 2026-09-10. */
.pro-btn-primary,
.prose a.pro-btn-primary {
    background: var(--action);
    color: var(--on-action);
    font-weight: 600;
}

.pro-btn-primary:hover:not(:disabled) {
    background: var(--action);
    opacity: 0.88;
}

.pro-pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--well);
    border: 0;
    color: var(--graphite);
    font-family: var(--mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.5;
}

.tool-btn .pro-pill {
    margin-left: 0.4rem;
}

.tools-row .tool-btn.is-on {
    color: var(--ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pattern builder
   -------------------------------------------------------------------------- */
.slider-grid {
    display: grid;
    gap: 0.6rem;
}

.slider-row {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr 3rem;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--hit);
}

.slider-label {
    font-size: var(--fs-small);
    color: var(--graphite);
}

.slider-value {
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-align: right;
}

.pro-panel input[type='range'] {
    width: 100%;
    /* The native control's box is 16px tall, which is the whole pointer target.
       Giving it the full hit height keeps a finger on the thumb; the track and
       thumb stay centred inside the taller transparent box. */
    height: var(--hit);
    margin: 0;
    accent-color: var(--green);
    background: transparent;
    cursor: pointer;
}

.pro-panel input[type='range']:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 4px;
}

.pattern-preview {
    font-family: var(--ui);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    color: var(--ink);
    margin: 0.9rem 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    background: var(--well);
    border: 0;
}

.pattern-name-row {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.pro-panel input[type='text'] {
    width: 100%;
    min-height: var(--hit);
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius);
    border: 0;
    background: var(--well);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 0.875rem;
}

.pro-panel input::placeholder {
    color: var(--graphite);
}

.share-url {
    margin-top: 0.6rem;
}

/* Presets */
.preset-heading {
    font-family: var(--ui);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
    margin: 1.1rem 0 0.5rem;
}

.preset-items,
.preset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.preset-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius);
    background: var(--well);
    border: 0;
}

.preset-load {
    flex: 1 1 12rem;
    text-align: left;
    min-height: var(--hit);
    padding: 0.35rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--ui);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: var(--radius);
}

.preset-load:hover {
    text-decoration: underline;
}

.preset-action {
    min-height: var(--hit);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--surface);
    color: var(--graphite);
    font-family: var(--ui);
    font-size: var(--fs-micro);
    cursor: pointer;
}

.preset-action:hover {
    color: var(--ink);
    background: var(--line);
}

/* --------------------------------------------------------------------------
   Your practice: stats, heatmap, breakdown
   -------------------------------------------------------------------------- */
.practice-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.6rem;
    margin: 0.75rem 0 0.25rem;
}

.practice-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.8rem 0.4rem;
    border-radius: var(--radius);
    background: var(--well);
    border: 0;
}

.practice-stat-value {
    font-family: var(--mono);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.practice-stat-label {
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
    color: var(--graphite);
    text-align: center;
}

.heatmap {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-columns: 1fr;
    gap: 3px;
    margin: 0.25rem 0 0.5rem;
}

.heatmap-cell {
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: var(--track);
}

.heatmap-cell.level-1 { background: color-mix(in srgb, var(--rim) 28%, var(--track)); }
.heatmap-cell.level-2 { background: color-mix(in srgb, var(--rim) 52%, var(--track)); }
.heatmap-cell.level-3 { background: color-mix(in srgb, var(--rim) 76%, var(--track)); }
.heatmap-cell.level-4 { background: var(--rim); }

/* Browsers without color-mix() still show a usable ramp. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .heatmap-cell.level-1 { background: var(--track); }
    .heatmap-cell.level-2 { background: var(--rule); }
    .heatmap-cell.level-3 { background: var(--edge); }
    .heatmap-cell.level-4 { background: var(--rim); }
}

.heatmap-teaser {
    position: relative;
}

/* A locked heatmap is dimmed, not blurred: the brand carries no blur. */
.heatmap.is-teaser {
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.heatmap-teaser .pro-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: var(--surface);
    box-shadow: var(--lift-high);
}

.technique-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--graphite);
}

/* --------------------------------------------------------------------------
   Offer and capture cards (extend .post-session-card from styles.css)
   -------------------------------------------------------------------------- */
/* This card renders inside [data-slot="post-session"], which lives in
   .breathing-section. BRAND.md sections 1 and 8 keep --clay off the timer
   screen, so the on-timer offer speaks in the neutral voice: ink price, green
   button. --clay stays on /pro. */
.paywall-card .paywall-price {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin-bottom: 0.85rem;
}

.paywall-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.paywall-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hit);
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 0;
    background: var(--action);
    color: var(--on-action);
    font-family: var(--ui);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 180ms ease;
}

.paywall-buy:hover {
    opacity: 0.88;
}

.paywall-more {
    font-size: 0.875rem;
    color: var(--link);
    text-decoration: underline;
}

.capture-card .capture-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.5;
}

.capture-card .capture-consent input[type='checkbox'] {
    margin-top: 0.15rem;
    accent-color: var(--green);
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.post-session-card .form-error.form-success {
    color: var(--ok);
}


/* --------------------------------------------------------------------------
   Night mode. Every token is already swapped by css/styles.css when
   body.night is set; the only thing left to say here is that ads go.
   -------------------------------------------------------------------------- */
body.night .ad-slot {
    display: none;
}

/* --------------------------------------------------------------------------
   /pro — the plan
   One card, two intervals, everything listed once. The price is the biggest
   thing on the page, in mono, in ink; the button is the black pill.
   -------------------------------------------------------------------------- */
.plan {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: 2.5rem 3.5rem;
    align-items: start;
    margin: 0.5rem 0 3rem;
}

.plan-card {
    position: sticky;
    top: 1.5rem;
    padding: 1.6rem;
    background: var(--surface);
    border: 0;
    border-radius: 24px;
    box-shadow: var(--lift);
    text-align: left;
}

.plan-toggle {
    display: flex;
    margin: 0 0 1.35rem;
    padding: 4px;
    background: var(--well);
    border: 0;
    border-radius: var(--radius-pill);
}

.plan-interval {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 52px;
    padding: 0.5rem 0.75rem;
    font-family: var(--ui);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--graphite);
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.plan-interval:hover { color: var(--ink); }

.plan-interval.is-active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 27, 30, 0.08);
    font-weight: 600;
}

.plan-save {
    font-family: var(--mono);
    font-size: var(--fs-micro);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

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

.plan-price .price-figure {
    font-size: 3.25rem;
    letter-spacing: -0.03em;
    line-height: 1;
}

.plan-price .price-period {
    font-size: var(--fs-small);
    margin-top: 0.35rem;
}

.plan-trial {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--graphite);
    background: var(--well);
    border: 0;
    border-radius: var(--radius);
}

.plan-trial strong { color: var(--ink); }

.plan-card .checkout-btn { font-size: 1rem; min-height: 52px; }

.plan-fine {
    margin: 0.85rem 0 0;
    font-size: var(--fs-micro);
    line-height: 1.6;
    color: var(--graphite);
}

.plan-included > h2 { margin-top: 0.25rem; }

.plan-included > p { color: var(--graphite); max-width: 52ch; }

.included-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 2.5rem;
    border-top: 1px solid var(--line);
}

.included-list li {
    margin: 0;
    padding: 0.85rem 0 0.9rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.included-list li strong {
    display: block;
    font-family: var(--ui);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.15rem;
}

.included-list li span {
    display: block;
    font-size: var(--fs-small);
    color: var(--graphite);
}

@media (max-width: 800px) {
    .plan { grid-template-columns: 1fr; gap: 2rem; }
    .plan-card { position: static; }
}

/* --------------------------------------------------------------------------
   /pro and /pro/thanks page furniture
   -------------------------------------------------------------------------- */
.pro-page .founding-counter {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    background: var(--well);
    border: 0;
    font-family: var(--mono);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.pro-page .restore-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.75rem;
    max-width: 34rem;
}

.pro-page .restore-form input[type='text'] {
    flex: 1 1 16rem;
    min-height: var(--hit);
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius);
    border: 0;
    background: var(--well);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 0.9375rem;
}

.pro-page .restore-domains-note {
    max-width: var(--measure);
    margin: 1.5rem 0 0.6rem;
    font-size: var(--fs-small);
    color: var(--graphite);
}

.pro-page .restore-status {
    flex: 1 1 100%;
    font-size: 0.875rem;
    color: var(--graphite);
    margin: 0.25rem 0 0;
    min-height: 1.2em;
}

.pro-page .restore-status.is-error {
    color: var(--bad);
}

/* --------------------------------------------------------------------------
   Motion and focus
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pro-btn,
    .paywall-buy,
    .tools-row .tool-btn {
        transition: none;
    }
}

.pro-panel button:focus-visible,
.post-session-card button:focus-visible,
.pro-page .restore-form button:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 3px;
}