/**
 * Fall Pattern Analysis — styling.
 *
 * Everything is scoped under `.toch-fpa` so it cannot leak into the rest of
 * the WordPress theme, and the theme is less likely to leak in. The `!important`
 * flags are deliberate: WordPress themes style bare h1/h2/p aggressively and
 * would otherwise override the tool's own type scale.
 *
 * Sections, in order:
 *   1. palette and scoped reset
 *   2. site header      (delete with the matching block in analyzer.php)
 *   3. hero
 *   4. the entry form
 *   5. results: heatmap, conclusion, interventions
 *   6. site footer      (delete with the matching block in analyzer.php)
 *   7. responsive + reduced motion
 *
 * Colours live in the custom properties at the top. Change them there once
 * rather than hunting through the file.
 */

/* ---------------------------------------------------------------------------
 * 1. Palette and scoped reset
 * ------------------------------------------------------------------------ */

.toch-fpa {
    --fpa-navy: #0b1f3a;
    --fpa-blue: #4b9be8;
    --fpa-blue-deep: #277bc6;
    --fpa-amber: #ffb52e;
    --fpa-amber-soft: #ffd478;
    --fpa-ink: #172b42;
    --fpa-muted: #637386;
    --fpa-line: #dfe7ef;
    --fpa-soft: #f6f9fc;
    --fpa-charcoal: #252525;

    /* Body copy. */
    --fpa-font: "Open Sans", "Segoe UI", Arial, sans-serif;

    /* Small labels: column headers, section kickers, footer headings, heatmap
       axis labels. Change this one value to restyle all of them at once. */
    --fpa-label-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Gold scale for the heatmap and the intervention list, keyed off the
       amber in "Plan safer care." Light to dark; the two text tones are for
       sitting on the light fills and on white. */
    --fpa-gold-soft: #fff0cf;
    --fpa-gold-mid: #f8dda2;
    /* Deep enough that white text on it, and it on white, both clear 4.5:1.
       A lighter gold looked better but failed contrast at these text sizes. */
    --fpa-gold-strong: #ffcf6b;
    --fpa-gold-ink: #684500;

    /* ---------------------------------------------------------------------
     * ROLLBACK: the blue values these replaced, as of v2.3.0. To revert the
     * heatmap and intervention colours, paste these back over the rules
     * marked "gold scale" below and delete the four properties above.
     *
     *   .toch-fpa__heat-cell.intensity-1 { color: #285e8f; background: #dcecf9; }
     *   .toch-fpa__heat-cell.intensity-2 { color: #123f69; background: #88bee9; }
     *   .toch-fpa__heat-cell.intensity-3 { color: #fff;    background: #286fae; }
     *   .toch-fpa__heat-cell.intensity-3 span { color: rgba(255, 255, 255, .72); }
     *   .toch-fpa__intervention-number { color: #72aee2; }
     *   .toch-fpa__intervention li::before { background: var(--fpa-blue); }
     * ------------------------------------------------------------------- */

    width: 100%;
    color: var(--fpa-ink);
    font-family: var(--fpa-font);
    line-height: 1.5;
}

/* Every small label shares this treatment: normal capitalisation, a plain
   face, and only a touch of tracking. */
.toch-fpa__eyebrow,
.toch-fpa__kicker,
.toch-fpa__event-header,
.toch-fpa__event-number small,
.toch-fpa__mobile-label,
.toch-fpa__heat-corner,
.toch-fpa__heat-label strong,
.toch-fpa__heat-cell span,
.toch-fpa__signal > span,
.toch-fpa__footer-inner h3 {
    font-family: var(--fpa-label-font);
    text-transform: none;
    letter-spacing: .01em;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Contact calls to action
 *
 * One class, three placements: under the hero copy, beside the results
 * heading, and full width above the clinical review note. A medium gold-orange
 * so they read as the same offer wherever they appear, distinct from the amber
 * "Start analysis" button, which is the tool's own action rather than a link
 * off the page.
 * ------------------------------------------------------------------------ */

.toch-fpa {
    --fpa-cta: #ffd478;
    --fpa-cta-hover: #ffd478;

    /* Warmer and rounder than the body face, to make the invitation feel like
       an invitation. Trebuchet is humanist with open apertures and is present
       on Windows and macOS; the rest of the stack degrades politely. Swap this
       one value for a webfont such as Nunito or Poppins if you add one — none
       is loaded by the plugin today, so a system face is what will actually
       render. */
    --fpa-cta-font: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif;
}

/* Written as `.toch-fpa .toch-fpa__cta` on purpose: the scoped reset sets
   `.toch-fpa a { color: inherit }`, which outranks a single class and would
   otherwise leave each button taking its colour from whatever surrounds it —
   white in the hero, ink in the results. Navy on this gold measures 6.4:1;
   white measured 2.5:1. */
.toch-fpa .toch-fpa__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 0;
    border-radius: 10px;
    color: var(--fpa-navy);
    background: var(--fpa-cta);
    font-family: var(--fpa-cta-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
    text-align: center;
    box-shadow: 0 8px 20px rgba(180, 115, 8, .22);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.toch-fpa .toch-fpa__cta:hover {
    color: var(--fpa-navy);
    background: var(--fpa-cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(180, 115, 8, .3);
}
.toch-fpa__cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 2px; }

/* These two must match the base rule's specificity or they lose to it and the
   button silently stays at its default size — which is exactly what happened
   when the base was raised to `.toch-fpa .toch-fpa__cta` to win the colour. */

/* In the hero, sitting under the lede. */
.toch-fpa .toch-fpa__cta--hero { margin-top: 8px; padding: 18px 32px; font-size: 17px; }

/* Above the clinical review note: one long bar across the results column,
   around half again as tall as the others so it reads as the closing offer. */
.toch-fpa .toch-fpa__cta--wide {
    width: 100%;
    margin-top: 24px;
    padding: 23px 32px;
    border-radius: 12px;
    font-size: 19px;
}

.toch-fpa *, .toch-fpa *::before, .toch-fpa *::after { box-sizing: border-box; }
.toch-fpa button, .toch-fpa input, .toch-fpa select { font: inherit; }
.toch-fpa button { cursor: pointer; }
.toch-fpa a { color: inherit; text-decoration: none; }
.toch-fpa__sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * 2. Site header — placeholder for the Toch SleepSense chrome
 * ------------------------------------------------------------------------ */

.toch-fpa__site-header {
    height: 92px;
    padding: 0 clamp(24px, 4.5vw, 76px);
    display: flex;
    align-items: center;
    gap: 34px;
    position: relative;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid rgba(15, 42, 70, .08);
}
.toch-fpa__brand { flex: 0 0 auto; }
.toch-fpa__brand img { display: block; width: 145px; height: auto; }
.toch-fpa__site-header nav { margin-left: auto; display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.toch-fpa__site-header nav a {
    position: relative;
    color: #737b84;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    transition: color .2s ease;
}
.toch-fpa__site-header nav a:hover { color: var(--fpa-blue-deep); }
.toch-fpa__site-header nav a:first-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 2px;
    background: var(--fpa-blue);
}
.toch-fpa__demo {
    flex: 0 0 auto;
    padding: 13px 23px;
    border-radius: 9px;
    color: var(--fpa-navy);
    background: linear-gradient(135deg, #ffc14e, #f4a619);
    font-weight: 700;
    box-shadow: 0 7px 18px rgba(223, 148, 14, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.toch-fpa__demo:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(223, 148, 14, .27); }

/* ---------------------------------------------------------------------------
 * 3. Hero
 * ------------------------------------------------------------------------ */

.toch-fpa__hero {
    position: relative;
    min-height: 430px;
    padding: clamp(48px, 6vw, 80px) clamp(28px, 6.5vw, 92px);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 8% 30%, rgba(102, 181, 246, .34), transparent 28%),
        linear-gradient(122deg, #3f90db 0%, #68abe9 38%, #d8e8f5 100%);
}

/* Faint grid, fading out to the right. */
.toch-fpa__hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.toch-fpa__hero-copy, .toch-fpa__signal { position: relative; z-index: 1; }
.toch-fpa__eyebrow, .toch-fpa__kicker {
    margin: 0 0 12px !important;
    color: var(--fpa-blue-deep);
    font-size: 14px !important;
}
.toch-fpa__eyebrow { display: flex; align-items: center; gap: 10px; color: #fff; }
.toch-fpa__eyebrow span { width: 24px; height: 3px; border-radius: 2px; background: var(--fpa-amber); }
.toch-fpa__hero h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(43px, 5.4vw, 72px) !important;
    line-height: .99 !important;
    letter-spacing: -.047em;
    font-weight: 800 !important;
}
.toch-fpa__hero h1 em { color: var(--fpa-amber-soft); font-style: normal; }
.toch-fpa__lede { max-width: 680px; margin: 25px 0 !important; color: #fff; font-size: clamp(16px, 1.45vw, 20px) !important; line-height: 1.58; font-weight: 600; }
.toch-fpa__hero-points { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; font-weight: 700; }
.toch-fpa__hero-points span { display: inline-flex; gap: 7px; }

/* The "pattern signal" card. Decorative and aria-hidden: the bars are fixed,
   not derived from the entered data. */
.toch-fpa__signal {
    width: min(100%, 380px);
    justify-self: center;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .67);
    border-radius: 28px;
    color: var(--fpa-navy);
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 25px 70px rgba(28, 93, 151, .22);
    backdrop-filter: blur(16px);
    transform: rotate(-2deg);
}
.toch-fpa__signal > span { display: block; margin-bottom: 8px; color: var(--fpa-blue-deep); font-size: 13px; }
.toch-fpa__signal > strong { display: block; font-size: 34px; line-height: 1.2; letter-spacing: -.03em; }
.toch-fpa__signal > small { color: #65778a; font-size: 12px; font-weight: 600; }
.toch-fpa__signal-bars { height: 100px; display: flex; align-items: flex-end; gap: 10px; margin: 25px 0 16px; }
.toch-fpa__signal-bars i { flex: 1; min-height: 20px; border-radius: 7px 7px 2px 2px; background: #c5dff5; }
.toch-fpa__signal-bars i:nth-child(1) { height: 28%; }
.toch-fpa__signal-bars i:nth-child(2) { height: 42%; }
.toch-fpa__signal-bars i:nth-child(3) { height: 34%; }
.toch-fpa__signal-bars i:nth-child(4) { height: 62%; background: #78b7ed; }
.toch-fpa__signal-bars i:nth-child(5) { height: 100%; background: linear-gradient(#ffc65f, #f2a81f); }

/* ---------------------------------------------------------------------------
 * 4. The entry form
 * ------------------------------------------------------------------------ */

.toch-fpa__workspace, .toch-fpa__results { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.toch-fpa__workspace { padding: 72px 0 64px; }
.toch-fpa__heading, .toch-fpa__results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.toch-fpa__heading h2, .toch-fpa__results h2 {
    margin: 0 !important;
    color: var(--fpa-navy) !important;
    font-size: clamp(31px, 4vw, 46px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em;
}
.toch-fpa__heading > div > p:last-child { max-width: 730px; margin: 14px 0 0 !important; color: var(--fpa-muted); font-size: 15px; line-height: 1.65; }
.toch-fpa__heading-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; }
.toch-fpa__sample, .toch-fpa__reset { flex: 0 0 auto; padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: 14px; font-weight: 700; }
.toch-fpa__sample { color: var(--fpa-blue-deep); }
/* Quieter than "Use sample data" — it throws work away, so it should not be
   the thing the eye lands on. */
.toch-fpa__reset { color: var(--fpa-muted); }
.toch-fpa__reset:hover { color: var(--fpa-navy); }

/* Deliberately not `overflow: hidden` — that would clip an open combo list.
   The rounded corners come from the header and last row instead. */
.toch-fpa__event-table { border: 1px solid var(--fpa-line); border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(16, 43, 78, .06); }
.toch-fpa__event-header { border-radius: 17px 17px 0 0; }
.toch-fpa__event-row:last-child { border-radius: 0 0 17px 17px; }
.toch-fpa__event-header, .toch-fpa__event-row {
    display: grid;
    grid-template-columns: 76px minmax(150px, 1fr) minmax(226px, .76fr) minmax(256px, .82fr) 44px;
    gap: 16px;
    align-items: center;
}
.toch-fpa__event-header { padding: 14px 24px; color: rgba(255, 255, 255, .82); background: var(--fpa-navy); font-size: 13px; }
.toch-fpa__event-row { min-height: 100px; padding: 18px 24px; border-bottom: 1px solid var(--fpa-line); }
.toch-fpa__event-row:last-child { border-bottom: 0; }
.toch-fpa__event-number { display: flex; flex-direction: column; align-items: flex-start; }
.toch-fpa__event-number span { color: var(--fpa-blue-deep); font-size: 24px; font-weight: 800; line-height: 1; }
.toch-fpa__event-number small { margin-top: 4px; color: #9aa8b6; font-size: 12px; }
/* --- Fields ---------------------------------------------------------------
 *
 * Every control in a row — the location and AM/PM dropdowns and the typed
 * time and date boxes — shares one look: same height, font, padding and
 * chevron. Only the width differs.
 *
 * The chevron is drawn by us rather than by the browser. A <select> and an
 * <input list> otherwise render two different arrows, and the one the browser
 * puts inside an input also eats about 21px of the field's own content box,
 * which is what used to clip "MM" and "Day". Ours is a background image, so it
 * costs exactly the padding we choose.
 */

.toch-fpa {
    --fpa-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237b8b9c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.toch-fpa__combo { position: relative; }
.toch-fpa__combo input {
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0 26px 0 10px;
    border: 1px solid #d6e0e9;
    border-radius: 9px;
    color: var(--fpa-ink);
    font: inherit;
    text-align: left;
    background-color: #f9fbfd;
    background-image: var(--fpa-chevron);
    background-repeat: no-repeat;
    background-position: right 9px center;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Fields you can type into get a text caret; choose-only ones do not. */
.toch-fpa__combo input:not([readonly]) { cursor: text; }
.toch-fpa__combo input::placeholder { color: #a3b1bf; }
.toch-fpa__combo input:focus::placeholder { color: transparent; }
.toch-fpa__combo input:focus { border-color: var(--fpa-blue); background-color: #fff; box-shadow: 0 0 0 3px rgba(75, 155, 232, .14); }
.toch-fpa__combo.is-open input { border-color: var(--fpa-blue); background-color: #fff; }

/* The list. This is ours, not the browser's, which is the whole point: a
   native <select> popup and a native <datalist> popup look nothing alike and
   the datalist one cannot be styled. Drawing it means every field matches. */
.toch-fpa__combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    /* 12 rows: each option is 42px, plus the 4px padding top and bottom. */
    max-height: 512px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #d6e0e9;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 43, 78, .16);
}
.toch-fpa__combo-option {
    padding: 9px 11px;
    border-radius: 6px;
    color: var(--fpa-ink);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.toch-fpa__combo-option:hover { background: #eef5fc; }
.toch-fpa__combo-option.is-active { color: #fff; background: var(--fpa-blue-deep); }

.toch-fpa__field-group { display: flex; align-items: center; gap: 6px; }
.toch-fpa__field-group > .toch-fpa__combo { flex: 1; min-width: 0; }
.toch-fpa__field-group b { color: #99a7b6; }

/* Widths = the widest text the field ever shows, plus 10px left padding and
   the 26px chevron gutter. The measured text widths at 16px Open Sans are
   "Month" 49, "Select…" 57, "2026" 37, "Min" 28, "Day" 29, "PM" 24, "Hr" 18.
   Undersize any of these and the label clips — that was the "Month" bug. */
.toch-fpa__time > .toch-fpa__combo { flex: 0 0 60px; }                 /* Hr    18 + 36 */
.toch-fpa__time > .toch-fpa__combo:nth-of-type(2) { flex: 0 0 70px; }  /* Min   28 + 36 */
.toch-fpa__time > .toch-fpa__combo.toch-fpa__meridiem { flex: 0 0 66px; }  /* PM 24 + 36 */
.toch-fpa__date > .toch-fpa__combo:nth-of-type(1) { flex: 0 0 92px; }  /* Month 49 + 36 */
.toch-fpa__date > .toch-fpa__combo:nth-of-type(2) { flex: 0 0 70px; }  /* Day   29 + 36 */
.toch-fpa__date > .toch-fpa__combo:nth-of-type(3) { flex: 0 0 78px; }  /* Year  37 + 36 */
.toch-fpa__remove {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: #9ba8b5;
    background: transparent;
    font-size: 24px;
    line-height: 1;
}
.toch-fpa__remove:hover:not(:disabled) { color: #c34949; background: #fff0f0; }
.toch-fpa__remove:disabled { opacity: .25; cursor: not-allowed; }
.toch-fpa__mobile-label { display: none; }

.toch-fpa__actions { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 24px; }
.toch-fpa__add, .toch-fpa__analyze { display: inline-flex; align-items: center; justify-content: center; border: 0; font-weight: 700; }
.toch-fpa__add { gap: 8px; padding: 13px 3px; color: var(--fpa-blue-deep); background: transparent; }
.toch-fpa__add span { font-size: 20px; }
.toch-fpa__submit-wrap { display: flex; align-items: center; }
.toch-fpa__analyze { min-width: 226px; gap: 10px; padding: 16px 23px; border-radius: 11px; color: var(--fpa-navy); background: linear-gradient(135deg, #ffc65b, #f3a51c); box-shadow: 0 12px 27px rgba(218, 143, 7, .2); transition: transform .18s ease, box-shadow .18s ease; }
.toch-fpa__analyze:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 15px 33px rgba(218, 143, 7, .3); }
.toch-fpa__analyze.is-loading .toch-fpa__spark { animation: fpa-spin .8s linear infinite; }
.toch-fpa__analyze:disabled { opacity: .72; cursor: wait; }
@keyframes fpa-spin { to { transform: rotate(360deg); } }
.toch-fpa__error { margin-top: 18px; padding: 13px 16px; border: 1px solid #efc5c5; border-radius: 9px; color: #a13232; background: #fff6f6; font-size: 14px; }

/* ---------------------------------------------------------------------------
 * 5. Results
 * ------------------------------------------------------------------------ */

.toch-fpa__results { padding: 54px 0 76px; scroll-margin-top: 24px; }
.toch-fpa__results-heading { align-items: center; }
.toch-fpa__card { border: 1px solid var(--fpa-line); border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(16, 43, 78, .055); }
.toch-fpa__heatmap-card { overflow: hidden; }
.toch-fpa__card-heading { display: flex; align-items: center; gap: 14px; padding: 24px 28px; }
.toch-fpa__heatmap-card > .toch-fpa__card-heading { border-bottom: 1px solid var(--fpa-line); }
.toch-fpa__card-heading h3 { margin: 0 !important; color: var(--fpa-navy) !important; font-size: 19px !important; line-height: 1.25; }
.toch-fpa__card-heading p { margin: 3px 0 0 !important; color: var(--fpa-muted); font-size: 13px; }

/* The heatmap is one CSS grid; the column count is set inline by the script. */
.toch-fpa__heatmap-scroll { overflow-x: auto; }
.toch-fpa__heatmap { display: grid; min-width: 850px; }
.toch-fpa__heat-corner, .toch-fpa__heat-label, .toch-fpa__location-label, .toch-fpa__heat-cell {
    min-height: 78px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--fpa-line);
    border-bottom: 1px solid var(--fpa-line);
}
.toch-fpa__heat-corner, .toch-fpa__heat-label { min-height: 70px; background: #f7fafc; }
.toch-fpa__heat-corner { justify-content: flex-start; color: #82909e; font-size: 12px; }
.toch-fpa__heat-label { flex-direction: column; text-align: center; }
.toch-fpa__heat-label strong { color: #3f5368; font-size: 13px; }
.toch-fpa__heat-label small { margin-top: 3px; color: #92a0ad; font-size: 11px; }
.toch-fpa__location-label { justify-content: flex-start; color: var(--fpa-navy); font-size: 13px; font-weight: 700; }
.toch-fpa__heat-cell { flex-direction: column; color: var(--fpa-ink); background: #f6f9fc; }
.toch-fpa__heat-cell strong { font-size: 20px; }
/* Grey only on the empty cells; on any filled cell it follows the cell's own
   text colour, because grey on gold does not carry enough contrast. */
.toch-fpa__heat-cell span { color: #8a9aa9; font-size: 11px; }
.toch-fpa__heat-cell.intensity-1 span,
.toch-fpa__heat-cell.intensity-2 span,
.toch-fpa__heat-cell.intensity-3 span { color: inherit; }

/* Gold scale. intensity-0 keeps the plain background; 1-3 deepen as counts
   rise. See the ROLLBACK block at the top of this file for the blue original.
   Only the fill changes: the text is one dark tone at every level, so there is
   never light text on a light fill to go unreadable. */
.toch-fpa__heat-cell.intensity-1,
.toch-fpa__heat-cell.intensity-2,
.toch-fpa__heat-cell.intensity-3 { color: var(--fpa-gold-ink); }
.toch-fpa__heat-cell.intensity-1 { background: var(--fpa-gold-soft); }
.toch-fpa__heat-cell.intensity-2 { background: var(--fpa-gold-mid); }
.toch-fpa__heat-cell.intensity-3 { background: var(--fpa-gold-strong); }

.toch-fpa__analysis-columns { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; margin-top: 24px; }
.toch-fpa__insight, .toch-fpa__interventions { padding-bottom: 24px; }
.toch-fpa__conclusion { margin: 0 28px 22px !important; color: #46596c; font-size: 15px; line-height: 1.7; }
.toch-fpa__patterns, .toch-fpa__intervention ul { margin: 0; padding: 0; list-style: none; }
.toch-fpa__patterns { padding: 0 28px; }
.toch-fpa__patterns li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--fpa-line); }
.toch-fpa__patterns li > span { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--fpa-amber); }
/* Matched to the intervention list so the two cards read at the same size. */
.toch-fpa__patterns p { margin: 0 !important; color: #56687a; font-size: 14px; line-height: 1.6; }
.toch-fpa__intervention { display: grid; grid-template-columns: 38px 1fr; gap: 14px; margin: 0 28px; padding: 20px 0; border-top: 1px solid var(--fpa-line); }
.toch-fpa__intervention-number { color: var(--fpa-gold-strong); font-size: 14px; font-weight: 800; }
.toch-fpa__intervention h4 { margin: -3px 0 6px !important; color: var(--fpa-navy) !important; font-size: 17px !important; }
.toch-fpa__intervention p { margin: 0 0 9px !important; color: #617284; font-size: 14px; line-height: 1.6; }
.toch-fpa__intervention li { position: relative; margin: 5px 0; padding-left: 15px; color: #475d72; font-size: 14px; line-height: 1.55; }
.toch-fpa__intervention li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--fpa-gold-strong); }
.toch-fpa__safety { display: flex; gap: 18px; margin-top: 24px; padding: 18px 22px; border-left: 4px solid var(--fpa-amber); color: #536678; background: #fff9ec; font-size: 12px; line-height: 1.55; }
.toch-fpa__safety strong { flex: 0 0 auto; color: var(--fpa-navy); }
.toch-fpa__safety p { margin: 0 !important; }

.toch-fpa__loading { min-height: 240px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.toch-fpa__loading h2 { margin: 0 !important; color: var(--fpa-navy) !important; font-size: 30px !important; }
.toch-fpa__loading p:last-child { color: var(--fpa-muted); }
.toch-fpa__loading-orb { flex: 0 0 auto; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: var(--fpa-navy); background: var(--fpa-amber); font-size: 28px; animation: fpa-pulse 1.5s ease-in-out infinite; }
@keyframes fpa-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 15px rgba(255, 181, 46, .13); } }

/* ---------------------------------------------------------------------------
 * 6. Site footer — placeholder for the Toch SleepSense chrome
 * ------------------------------------------------------------------------ */

.toch-fpa__site-footer { color: #9c9c9c; background: var(--fpa-charcoal); }
.toch-fpa__footer-inner {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 62px 0 55px;
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr;
    gap: 70px;
}
.toch-fpa__footer-inner > div { display: flex; flex-direction: column; align-items: flex-start; }
.toch-fpa__footer-brand img { width: 150px; filter: grayscale(1) brightness(2); opacity: .75; }
.toch-fpa__footer-brand p { margin: 18px 0 0 !important; line-height: 1.7; }
.toch-fpa__footer-inner h3 { margin: 0 0 18px !important; color: #8a8a8a !important; font-size: 13px !important; }
.toch-fpa__footer-inner a, .toch-fpa__footer-inner p { margin: 0 0 11px !important; font-size: 13px; line-height: 1.55; }
.toch-fpa__footer-inner a:hover { color: #fff; }
.toch-fpa__footer-inner p strong { color: #d6d6d6; }
.toch-fpa__footer-bottom {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
    padding: 23px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #343434;
    color: #666;
    font-size: 10px;
}

/* ---------------------------------------------------------------------------
 * 7. Responsive + reduced motion
 * ------------------------------------------------------------------------ */

@media (max-width: 1050px) {
    .toch-fpa__hero { grid-template-columns: 1fr .65fr; }
    .toch-fpa__site-header nav { display: none; }
    .toch-fpa__demo { margin-left: auto; }
}

/* Below this the table cannot hold all five columns, so each fall becomes a
   stacked card. It is also why the table never scrolls sideways: a scroll
   container would clip the combo lists. */
@media (max-width: 900px) {
    .toch-fpa__site-header { height: 78px; padding: 0 20px; }
    .toch-fpa__brand img { width: 128px; }
    .toch-fpa__demo { padding: 10px 13px; font-size: 13px; }
    .toch-fpa__hero { min-height: auto; padding: 54px 24px 62px; grid-template-columns: 1fr; }
    .toch-fpa__signal { display: none; }
    .toch-fpa__hero h1 { font-size: clamp(41px, 12vw, 58px) !important; }
    .toch-fpa__workspace, .toch-fpa__results { width: min(100% - 28px, 1180px); }
    .toch-fpa__workspace { padding: 52px 0; }
    .toch-fpa__heading, .toch-fpa__results-heading { align-items: flex-start; flex-direction: column; gap: 17px; }

    /* Each fall becomes a stacked card instead of a table row. */
    .toch-fpa__event-table { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .toch-fpa__event-header { display: none; }
    .toch-fpa__event-row, .toch-fpa__event-row:last-child { min-width: 0; padding: 20px; margin-bottom: 13px; grid-template-columns: 48px 1fr 38px; gap: 15px 12px; border: 1px solid var(--fpa-line); border-radius: 14px; background: #fff; }
    .toch-fpa__event-number { grid-column: 1; grid-row: 1; }
    .toch-fpa__location { grid-column: 2; grid-row: 1; }
    .toch-fpa__remove { grid-column: 3; grid-row: 1; }
    .toch-fpa__time, .toch-fpa__date { grid-column: 1 / -1; }
    .toch-fpa__time { grid-row: 2; }
    .toch-fpa__date { grid-row: 3; }
    .toch-fpa__mobile-label { display: block; width: 58px; flex: 0 0 auto; color: #82909e; font-size: 12px; }
    /* The location sits beside the fall number, which already labels the row. */
    .toch-fpa__location .toch-fpa__mobile-label { display: none; }

    /* Let the fields grow to share the width, but never shrink below what they
       hold — on a very narrow screen they wrap onto a second line instead. */
    .toch-fpa__field-group { flex-wrap: wrap; }
    .toch-fpa__time > .toch-fpa__combo,
    .toch-fpa__time > .toch-fpa__combo:nth-of-type(2),
    .toch-fpa__date > .toch-fpa__combo:nth-of-type(1),
    .toch-fpa__date > .toch-fpa__combo:nth-of-type(2),
    .toch-fpa__date > .toch-fpa__combo:nth-of-type(3) { flex: 1 1 70px; }
    .toch-fpa__time > .toch-fpa__combo.toch-fpa__meridiem { flex: 0 0 80px; }

    .toch-fpa__actions { align-items: stretch; flex-direction: column; }
    .toch-fpa__add { align-self: flex-start; }
    .toch-fpa__submit-wrap { align-items: stretch; flex-direction: column; }
    .toch-fpa__analyze { width: 100%; }
    .toch-fpa__analysis-columns { grid-template-columns: 1fr; }
    .toch-fpa__safety { flex-direction: column; gap: 6px; }
    .toch-fpa__loading { flex-direction: column; text-align: center; gap: 18px; }
    .toch-fpa__footer-inner { grid-template-columns: 1fr; gap: 35px; padding: 48px 0; }
    .toch-fpa__footer-bottom { gap: 15px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .toch-fpa *, .toch-fpa *::before, .toch-fpa *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}