/* ===========================================================================
 * pepdosings.css
 *
 * Location on the server: /home1/tpat/pepdosings/pepdosings.css
 *
 * The single stylesheet for the PepDosings site. There is one file rather
 * than one per page because the site currently has one page, and splitting a
 * stylesheet before there is a second page to justify it buys nothing and
 * costs a second request.
 *
 * The presentation is carried over from the approved reference guide mockup
 * at version 3.10. Class names have been changed in one respect and one only:
 * the components that belong to the guide itself now carry an rg- prefix,
 * while the site shell keeps plain names. The shell is topbar, brand, mark,
 * mainnav, top-actions, iconbtn, hero, app, content and mobile-nav, and those
 * names will be reused by the landing page and by every later tool. The
 * narrow screen navigation added later uses a pd- prefix, because it is
 * shared chrome rather than mockup carryover: pd-nav-toggle, pd-drawer,
 * pd-drawer-panel, pd-drawer-head, pd-drawer-nav, pd-drawer-list, pd-scrim
 * and pd-nav-icon. The rg- prefixed rules belong to the reference guide and
 * nothing else may rely on them. Element identifiers are unchanged from the
 * mockup, because the script binds to them and renaming them would be churn
 * with no benefit.
 *
 * BREAKPOINTS
 *
 * The mockup accumulated thirteen media queries across seven breakpoints, at
 * 1050, 1024, 900, 700, 680, 640 and 600 pixels. That happened because each
 * revision added a query for the component it introduced rather than fitting
 * into the existing set, and the result is a layout that reflows seven times
 * on the way down with no single width at which the design is defined.
 *
 * This file uses three layout widths and no others.
 *
 *   Desktop   wider than 1024px   the full layout, no query
 *   Tablet     641px to 1024px    one query, max-width 1024px
 *   Mobile     640px and below    one query, max-width 640px
 *
 * There is one exception, and it is deliberate. The navigation switches at
 * 720 pixels rather than 640, because the topbar runs out of horizontal room
 * for the inline links about 80 pixels before the rest of the layout runs out
 * of room for its two column grids. Tying the two together would leave a
 * reader between 641 and 720 pixels with a topbar whose links had been
 * squeezed past legibility, or with no links and no bottom bar to replace
 * them. The 720 pixel line was already in the file for the theme toggle, so
 * no new breakpoint has been introduced, only a second use of an existing
 * one. Every rule that keys off it is grouped under the two headings named
 * "Narrow screen navigation" and "The bottom tab bar".
 *
 * The old widths map onto the new ones as follows, and each decision is
 * recorded because collapsing a breakpoint always changes behaviour at some
 * width and the change should be a choice rather than a side effect.
 *
 *   1050 to 1024  The navigation bar and the two column card grids collapse
 *                 24 pixels later than before. The bar holds four short links
 *                 beside a short brand and measured comfortably at 1050, so
 *                 it also fits at 1025.
 *   1024 to 1024  Unchanged.
 *    900 to 1024  The pharmacokinetic control and statistic grids drop to
 *                 fewer columns 124 pixels earlier. Six statistic tiles
 *                 across a tablet were cramped at 1000 pixels, so this is an
 *                 improvement rather than a compromise.
 *    700 to 1024  The two compound selectors stack 324 pixels earlier. They
 *                 are the most used controls on the page and a full width
 *                 target is easier to hit, so stacking earlier is the better
 *                 of the two behaviours.
 *    680 to  640  The compact top bar and the single column card layout begin
 *                 40 pixels later. Between 641 and 680 the page now keeps the
 *                 full height top bar and the two column grids, which is the
 *                 tablet treatment and is what that width should get.
 *    640 to  640  Unchanged.
 *    600 to  640  The pharmacokinetic panel goes to a single column 40 pixels
 *                 earlier, which matches every other panel at that width.
 *
 * WHAT IS NOT HERE
 *
 * The mockup carried rules for a sidebar, a search bar, a pair comparison
 * box, a mock data banner and a relationship list style, none of which appear
 * in the version 3.10 markup. They are left out rather than carried forward,
 * because dead rules in a stylesheet are read as live by the next person to
 * work on it. Dark theme rules live in the :root[data-theme="dark"] block above, because the mockup had none
 * either and the button that implied them did nothing.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Tokens
 *
 * Every colour in the file comes from here. The values are the approved
 * mockup values unchanged.
 * ------------------------------------------------------------------------ */

:root {
    --navy: #0b172a;
    --navy2: #12233d;
    --blue: #2f6fed;
    --blue2: #5b8ff9;
    --cyan: #27c2d1;
    --bg: #f3f6fa;
    --card: #fff;
    --text: #182235;
    --muted: #637087;
    --line: #dce3ed;
    --green: #18875f;
    --greenbg: #e8f7f0;
    --purple: #7255d9;
    --purplebg: #f0ecff;
    --red: #c53b4d;
    --redbg: #fff0f2;
    --amber: #b76a12;
    --amberbg: #fff6e6;
    --shadow: 0 8px 24px rgba(20, 42, 75, .08);

    /* The lifted shadow the home page tiles use on hover. It is a token rather
     * than a literal because the two themes need different opacities to read
     * as the same amount of lift. */
    --pd-home-card-hover-shadow: rgba(20, 42, 75, .16);

    /* The claim line colours are separate tokens rather than reuses of the
     * shared accent colours. Measured against the white card surface, the
     * shared blue reaches 4.55 to 1 and the shared green only 4.50 to 1, which
     * sits on the boundary of the WCAG AA requirement for body text at this
     * size. These darker variants clear the requirement with room to spare and
     * leave the shared accents untouched for the three tool pages. */
    --pd-home-claim-guide: #2a63d6;
    --pd-home-claim-macros: #12704f;
    --pd-home-claim-wire: #6146cc;

    --radius: 14px;
    --shell-max: 1480px;
    --topbar-h: 68px;
    --topbar-h-mobile: 60px;

    /* Navigation chrome for narrow screens. The bar height is referenced by
     * the bar itself and by the body padding that reserves room for it, so
     * the two can never drift apart. The drawer width is held here for the
     * same reason: the panel and the transform that hides it both read it. */
    --mobile-nav-h: 62px;
    --drawer-w: 300px;
    --scrim-bg: rgba(10, 22, 40, 0.5);

    --tdee-protein: #d64545;
    --tdee-carbs: #e0a91b;
    --tdee-fat: #7c5cd6;
    --tdee-protein-soft: #fdecec;
    --tdee-carbs-soft: #fbf1d4;
    --tdee-fat-soft: #efeaff;
    --on-inverse: #fff;
    --on-inverse-muted: #b9c9df;
    --on-inverse-nav: #aebbd0;
    --on-inverse-mobile-nav: #bcc8d9;
    --on-inverse-arrow: #9fb4d4;
    --on-inverse-glass-bg: #ffffff10;
    --on-inverse-glass-strong-bg: rgba(255, 255, 255, 0.08);
    --on-inverse-glass-border: #ffffff2f;
    --on-inverse-glass-border-strong: rgba(255, 255, 255, 0.14);
    --on-inverse-select-border: rgba(255, 255, 255, .42);
    --on-inverse-soft-text: rgba(255, 255, 255, 0.82);
    --on-inverse-dim-text: rgba(255, 255, 255, 0.7);
    --hero-gradient-end: #173561;
    --text-strong: #314158;
    --text-mid: #46566e;
    --text-soft: #4f5e74;
    --text-softer: #526078;
    --text-quiet: #67758b;
    --text-faint: #8b95a7;
    --accent-wash-1: #f7faff;
    --accent-wash-2: #f8fbff;
    --accent-wash-3: #f4f8ff;
    --accent-wash-4: #eef3fa;
    --accent-wash-5: #eef4ff;
    --accent-wash-6: #edf3ff;
    --accent-wash-7: #eaf1ff;
    --accent-wash-8: #f1f3f7;
    --accent-wash-9: #f1f4f9;
    --accent-text: #285fbf;
    --accent-text-2: #35557f;
    --accent-border: #d6e3fb;
    --rel-green-border: #c9e8d5;
    --rel-purple-border: #e2d6f7;
    --rel-red-border: #f5d2d2;
    --error-border: #f2c8ce;
    --error-text: #7a1f2a;
    --safety-border: #f3d29a;
    --safety-text: #7a4a15;
    --safety-icon: #b76a12;
    --pk-phase-stroke: #8b95a7;
    --pk-phase-fill: #526078;
    --topbar-shadow: #0003;
    --tdee-seg-shadow: rgba(20, 42, 75, 0.08);
    --tdee-compare-focus: rgba(47, 111, 237, 0.15);
    --tdee-submit-hover: #2560d8;
    --print-bg: #fff;
    --print-ink: #000;
    --print-line: #ddd;
    --toggle-hover-bg: var(--on-inverse-glass-bg);
    --toggle-focus-ring: var(--blue2);
    --toggle-icon-color: var(--on-inverse);
}

:root[data-theme="dark"] {
    --bg: #0d0f13;
    --card: #161a21;
    --text: #e6ebf2;
    --muted: #9ea9bb;
    --line: #2a303b;
    --shadow: 0 8px 24px rgba(0, 0, 0, .55);
    --pd-home-card-hover-shadow: rgba(0, 0, 0, .7);

    /* On the dark card surface the shared accents already measure between 5.6
     * and 8.8 to one, so the claim tokens simply defer to them here. */
    --pd-home-claim-guide: #5b8ff9;
    --pd-home-claim-macros: #3ecf99;
    --pd-home-claim-wire: #a99cf2;

    --blue: #5b8ff9;
    --blue2: #8ab4ff;
    --cyan: #5adfec;
    --green: #3ecf99;
    --greenbg: #0f2a20;
    --purple: #a99cf2;
    --purplebg: #211a3a;
    --red: #ff6b7c;
    --redbg: #3a0f13;
    --amber: #f0a24f;
    --amberbg: #2a1a08;
    --navy: #0b172a;
    --navy2: #0e1a2f;
    --hero-gradient-end: #0f1d38;
    --text-strong: #e6ebf2;
    --text-mid: #c3ccd9;
    --text-soft: #a8b3c2;
    --text-softer: #9ea9bb;
    --text-quiet: #8a94a5;
    --text-faint: #6f7889;
    --accent-wash-1: #141a24;
    --accent-wash-2: #141b26;
    --accent-wash-3: #151c28;
    --accent-wash-4: #161d29;
    --accent-wash-5: #182034;
    --accent-wash-6: #182137;
    --accent-wash-7: #1a253b;
    --accent-wash-8: #161a22;
    --accent-wash-9: #161a22;
    --accent-text: #8ab4ff;
    --accent-text-2: #a5c1ea;
    --accent-border: #2a3b57;
    --rel-green-border: #204d38;
    --rel-purple-border: #3b3157;
    --rel-red-border: #5a2530;
    --error-border: #5a2530;
    --error-text: #ff8b98;
    --safety-border: #5a3a12;
    --safety-text: #f0c98a;
    --safety-icon: #f0a24f;
    --pk-phase-stroke: #6f7889;
    --pk-phase-fill: #a8b3c2;
    --topbar-shadow: rgba(0, 0, 0, 0.6);
    --tdee-seg-shadow: rgba(0, 0, 0, 0.4);
    --tdee-compare-focus: rgba(139, 180, 255, 0.28);
    --tdee-submit-hover: #4c7ee0;
    --toggle-hover-bg: rgba(255, 255, 255, 0.12);
    --toggle-focus-ring: #8ab4ff;
    --toggle-icon-color: #fff;

    /* A heavier scrim in dark mode. The light scrim is calibrated to dim a
     * white page, and over an already dark page it barely reads, which
     * leaves the reader unsure whether the page behind is still live. */
    --scrim-bg: rgba(0, 0, 0, 0.66);
}


/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 Inter, "Segoe UI", Arial, sans-serif;
}

button, input, select { font: inherit }
button { cursor: pointer }

/* Anything focused by the keyboard gets a visible ring. The mockup relied on
 * the browser default, which several of the dark controls suppressed. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* Content that is present for a screen reader and not for the eye. Used for
 * the labels on controls that carry a visible label of their own elsewhere. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
 * Shell
 *
 * The frame the whole site sits in. No rule in this section refers to the
 * reference guide, so a later page can use the same markup and get the same
 * frame without importing anything guide specific.
 * ------------------------------------------------------------------------ */

.topbar {
    height: var(--topbar-h);
    background: var(--navy);
    color: var(--on-inverse);
    display: flex;
    align-items: center;
    padding: 0 28px;
    gap: 30px;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 12px var(--topbar-shadow);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
    font-size: 20px;
    white-space: nowrap;
}

/* The brand mark is drawn in CSS rather than loaded as an image, so it costs
 * no request and stays sharp at any density. */
.mark {
    width: 34px;
    height: 34px;
    border: 3px solid var(--cyan);
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}

.mark:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 4px;
    width: 3px;
    height: 19px;
    background: var(--on-inverse);
    transform: rotate(35deg);
    transform-origin: bottom;
}

.mark:after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--cyan);
    border-radius: 50%;
    left: 11px;
    top: 8px;
}

.mainnav {
    display: flex;
    gap: 26px;
    flex: 1;
    min-width: 0;
}

.mainnav a {
    color: var(--on-inverse-nav);
    text-decoration: none;
    font-weight: 650;
}

.mainnav a.active,
.mainnav a:hover { color: var(--on-inverse) }

/* The current page is marked with aria-current rather than a class when it is
 * not a link, so it needs its own rule. */
.mainnav [aria-current="page"] {
    color: var(--on-inverse);
    font-weight: 800;
}

.top-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.iconbtn {
    border: 1px solid var(--on-inverse-glass-border);
    background: var(--on-inverse-glass-bg);
    color: var(--on-inverse);
    border-radius: 9px;
    padding: 8px 11px;
}

/* The hero band runs the full width while its contents stay inside the shell
 * width, which is what the asymmetric padding achieves without a wrapper. */
.hero {
    background: linear-gradient(135deg, var(--navy2), var(--hero-gradient-end));
    color: var(--on-inverse);
    padding: 28px max(28px, calc((100vw - var(--shell-max)) / 2)) 25px;
}

.hero h1 {
    margin: 0 0 4px;
    font-size: 29px;
}

.hero p {
    margin: 0;
    color: var(--on-inverse-muted);
}

.app {
    max-width: var(--shell-max);
    margin: auto;
    display: block;
    min-height: calc(100vh - 195px);
}

.content {
    padding: 24px 28px 70px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Narrow screen navigation
 *
 * Three surfaces share one set of links, and which of them a reader sees is
 * decided entirely by viewport width.
 *
 *   Above 1024 pixels   the inline .mainnav links are the whole story. The
 *                       menu button, the drawer and the bottom bar are all
 *                       off, and the topbar looks exactly as it always has.
 *
 *   721 to 1024 pixels  the inline links stay, tightened so they fit, and the
 *                       menu button joins them. A tablet has the room for the
 *                       links and no room to waste on a bar across the foot
 *                       of a screen the reader is holding in landscape.
 *
 *   720 pixels and down the inline links step aside. The bottom bar carries
 *                       the primary tools where a thumb can reach them, and
 *                       the menu button opens the complete menu.
 *
 * The 720 pixel line is not arbitrary. The brand block measures 161 pixels,
 * the three links together measure 339, the gaps between them 52, and the
 * theme toggle 40. With the shell padding the full row needs roughly 698
 * pixels before anything is tightened, so 720 is the narrowest width at which
 * the inline arrangement can be made to hold without shrinking the type past
 * the point where it is comfortable to read. The theme toggle already had a
 * breakpoint at 720 before this change, so the line was in the file already.
 *
 * Everything below is off by default and switched on by its media query, so
 * a desktop reader downloads the rules and renders none of them.
 * ------------------------------------------------------------------------ */

.mobile-nav { display: none }
.pd-nav-toggle { display: none }

/* The drawer and the scrim carry the hidden attribute in the markup, which
 * keeps them out of the accessible tree and out of the tab order before the
 * script has run and at widths where they are never used. The script removes
 * the attribute to open and restores it to close. These two rules make sure
 * the attribute wins even against the display value the media query sets. */
.pd-drawer[hidden],
.pd-scrim[hidden] { display: none !important }

/* The scrim. Fixed to the viewport rather than the document so it covers the
 * page no matter how far down the reader has scrolled. It sits below the
 * panel and above everything else, including the sticky topbar at z-index 20
 * and the bottom bar at 30. */
.pd-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--scrim-bg);
    opacity: 0;
    transition: opacity .22s ease-out;
}

.pd-scrim.is-open { opacity: 1 }

/* The drawer. The wrapper is the full viewport so the panel can be pinned to
 * the right edge and run the full height without depending on the height of
 * anything around it. Pointer events are off on the wrapper and back on for
 * the panel, so a press on the empty area to the left of the panel lands on
 * the scrim underneath and closes the menu. */
.pd-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 41;
    pointer-events: none;
}

.pd-drawer-panel {
    pointer-events: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(var(--drawer-w), 86vw);
    background: var(--navy);
    color: var(--on-inverse);
    box-shadow: -8px 0 28px var(--topbar-shadow);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Off screen to the right when closed. The extra pixel clears the box
     * shadow, which would otherwise show as a dark seam down the edge of the
     * screen while the panel is meant to be out of sight. */
    transform: translateX(101%);
    transition: transform .24s ease-out;

    /* Clears the notch at the top and the home indicator at the foot on a
     * phone held in either orientation. */
    padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) 16px;
}

.pd-drawer.is-open .pd-drawer-panel { transform: translateX(0) }

.pd-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--on-inverse-glass-border);
}

.pd-drawer-title {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--on-inverse-nav);
}

.pd-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--on-inverse-glass-border);
    border-radius: 999px;
    background: var(--on-inverse-glass-bg);
    color: var(--on-inverse);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease-out;
}

.pd-drawer-close:hover { background: var(--on-inverse-glass-strong-bg) }
.pd-drawer-close:focus { outline: none }

.pd-drawer-close:focus-visible {
    outline: 2px solid var(--toggle-focus-ring);
    outline-offset: 2px;
}

.pd-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}

.pd-drawer-group-title {
    margin: 12px 0 6px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-inverse-nav);
}

.pd-drawer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pd-drawer-list a {
    display: flex;
    align-items: center;
    gap: 13px;

    /* A 48 pixel target. Anything smaller is a press a reader has to aim at,
     * and a menu is exactly where a missed press is most annoying. */
    min-height: 48px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--on-inverse-nav);
    text-decoration: none;
    font-weight: 650;
    font-size: 15px;
    transition: background-color .15s ease-out, color .15s ease-out;
}

.pd-drawer-list a:hover {
    background: var(--on-inverse-glass-bg);
    color: var(--on-inverse);
}

.pd-drawer-list a:focus { outline: none }

.pd-drawer-list a:focus-visible {
    outline: 2px solid var(--toggle-focus-ring);
    outline-offset: -2px;
}

.pd-drawer-list a[aria-current="page"] {
    background: var(--on-inverse-glass-strong-bg);
    color: var(--on-inverse);
    font-weight: 800;
}

.pd-drawer-list .pd-nav-icon { flex: 0 0 auto }

/* The menu button. Three bars drawn in CSS rather than an icon, so the cross
 * it becomes when the menu is open is the same three bars moved, and the
 * change reads as one object rather than two pictures swapped. */
.pd-nav-toggle {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 0;
    border: 1px solid var(--on-inverse-glass-border);
    border-radius: 999px;
    background: var(--on-inverse-glass-bg);
    color: var(--on-inverse);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease-out;
}

.pd-nav-toggle:hover { background: var(--on-inverse-glass-strong-bg) }
.pd-nav-toggle:focus { outline: none }

.pd-nav-toggle:focus-visible {
    outline: 2px solid var(--toggle-focus-ring);
    outline-offset: 2px;
}

.pd-nav-toggle-bars {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
}

.pd-nav-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease-out, opacity .15s ease-out;
}

.pd-nav-toggle-bars span:nth-child(1) { top: 0 }
.pd-nav-toggle-bars span:nth-child(2) { top: 5px }
.pd-nav-toggle-bars span:nth-child(3) { top: 10px }

/* Open state. The outer two bars travel to the middle and cross, and the
 * middle one fades out underneath them. The state is read from aria-expanded
 * rather than a class, because that attribute has to be correct for assistive
 * technology anyway and driving the visual from it means the two can never
 * disagree. */
.pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle-bars span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle-bars span:nth-child(2) {
    opacity: 0;
}

.pd-nav-toggle[aria-expanded="true"] .pd-nav-toggle-bars span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* Scroll lock. Set on the root element while the drawer is open so the page
 * behind cannot be scrolled by a drag that starts outside the panel. A class
 * rather than an inline style, because the policy this site sends forbids
 * inline style and the script would be writing one it could not apply. */
.pd-nav-open,
.pd-nav-open body { overflow: hidden }


/* ---------------------------------------------------------------------------
 * Guide: compound navigation in the hero
 * ------------------------------------------------------------------------ */

.rg-nav {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(240px, 1.15fr);
    gap: 10px;
    align-items: end;
    width: 100%;
    margin-top: 20px;
    background: transparent;
    color: inherit;
}

.rg-nav-field label {
    display: block;
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    color: inherit;
}

/* The selects sit on the dark hero, so they are styled dark rather than left
 * to the browser, which would render a white control against the gradient.
 * The arrow is drawn with two gradients because a background image would be
 * another request and an inline data URI would be refused by the content
 * security policy that the page sends. */
.rg-nav-field select {
    width: 100%;
    min-height: 40px;
    padding: 7px 34px 7px 10px;
    border: 1px solid var(--on-inverse-select-border);
    border-radius: 7px;
    background-color: var(--navy2);
    color: var(--on-inverse);
    font: inherit;
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--on-inverse-arrow) 50%),
        linear-gradient(135deg, var(--on-inverse-arrow) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.rg-nav-field select:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 1px;
}

.rg-nav-field select option,
.rg-nav-field select optgroup {
    background: var(--navy2);
    color: var(--on-inverse);
}

/* ---------------------------------------------------------------------------
 * Guide: the head card
 *
 * A three area grid. The name and category sit top left, the action column
 * sits top right, and the body spans the full width below. The first column
 * takes every pixel the second does not need, so a long compound name pushes
 * against the buttons rather than under them.
 * ------------------------------------------------------------------------ */

.rg-head {
    background: linear-gradient(120deg, var(--card), var(--accent-wash-1));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 23px 25px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    column-gap: 18px;
}

.rg-head-main { min-width: 0 }

/* The action column. The buttons align to the top of the row rather than to
 * its centre, so that they hold their place while the compound name grows
 * from one line to two. */
.rg-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.rg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text-strong);
    padding: 9px 12px;
    border-radius: 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.rg-btn:hover { border-color: var(--blue); color: var(--blue) }

.rg-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.rg-btn[aria-pressed="true"] {
    border-color: var(--blue);
    background: var(--accent-wash-5);
    color: var(--blue);
}

.rg-btn-mark { font-size: 14px; line-height: 1 }

/* What the action column has to say for itself, which is normally nothing.
 * It carries the confirmation after a share and the explanation when the
 * browser refuses local storage, and it takes the full width of the column so
 * that a sentence does not squeeze itself between two buttons. */
.rg-head-note {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: right;
}

.rg-head-note[hidden] { display: none }

.rg-eyebrow {
    color: var(--blue);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em;
}

.rg-head h2 {
    font-size: 31px;
    margin: 2px 0 4px;
    overflow-wrap: anywhere;
}

/* The description and chips run the full width beneath both columns above,
 * so a long first sentence is not squeezed into the narrow half of the card. */
.rg-head-body {
    min-width: 0;
    grid-column: 1 / -1;
}

/* The tagline is the first sentence of the compound description and is not
 * truncated. It runs from seventy to seven hundred and sixty three characters
 * across the catalogue, so this card is two lines tall for some compounds and
 * ten for others, and that is intended. A clamp here would hide the end of a
 * sentence, which reads as a fault rather than as a design.
 *
 * The measure is capped so that a long tagline breaks into readable lines on
 * a wide screen instead of running the full width of the card. */
.rg-tagline {
    color: var(--muted);
    font-size: 16px;
    overflow-wrap: anywhere;
    max-width: 78ch;
}

.rg-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.rg-chip {
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--accent-wash-4);
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 750;
}

/* ---------------------------------------------------------------------------
 * Guide: tabs and panels
 * ------------------------------------------------------------------------ */

.rg-tabs {
    position: sticky;
    top: var(--topbar-h);
    z-index: 10;
    background: var(--bg);
    display: flex;
    gap: 4px;
    padding: 16px 0 10px;
    overflow: auto;
    border-bottom: 1px solid var(--line);
}

.rg-tab {
    border: 0;
    background: transparent;
    color: var(--text-quiet);
    padding: 10px 13px;
    border-radius: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.rg-tab[aria-selected="true"] {
    background: var(--navy);
    color: var(--on-inverse);
}

.rg-panel { display: none }
.rg-panel.is-active { display: block }

.rg-section-title {
    font-size: 20px;
    margin: 22px 0 12px;
}

/* ---------------------------------------------------------------------------
 * Guide: cards, metrics and prose
 * ------------------------------------------------------------------------ */

.rg-quick {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.rg-metric,
.rg-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.rg-metric { padding: 15px; min-width: 0 }

.rg-metric span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
}

.rg-metric strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.rg-grid2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.rg-card { padding: 20px; min-width: 0 }

.rg-card h3 {
    margin: 0 0 9px;
    font-size: 16px;
}

.rg-card p {
    margin: 0 0 10px;
    color: var(--text-soft);
}

.rg-stack-gap { margin-top: 15px }

/*
 * The overview panel reads top to bottom as one wide card and then a pair.
 * The description runs to several paragraphs and earns the full width, while
 * receptor targets and administration are both short and sit level with each
 * other underneath it. The pair is given equal columns rather than the
 * weighted ratio the other panels use, because neither of the two carries more
 * text than the other, and they are allowed to stretch to a common height so
 * the row ends on a straight line.
 */
#overview .rg-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }

.rg-prose p {
    margin: 0 0 11px;
    line-height: 1.62;
}

.rg-prose p:last-child { margin-bottom: 0 }
.rg-prose strong { color: var(--text) }

.rg-tag {
    display: inline-block;
    background: var(--accent-wash-6);
    color: var(--accent-text);
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 750;
    margin: 3px;
}

.rg-tag-head { margin-top: 18px }

.rg-notice {
    border-left: 4px solid var(--blue);
    background: var(--accent-wash-5);
    border-radius: 9px;
    padding: 13px 15px;
    color: var(--accent-text-2);
}

.rg-warning {
    background: var(--amberbg);
    border-left: 4px solid var(--amber);
    padding: 14px;
    border-radius: 9px;
}

.rg-legal p {
    margin: 9px 0 0;
    line-height: 1.6;
}

.rg-legal p:first-of-type { margin-top: 7px }

.rg-note {
    font-size: 12px;
    color: var(--muted);
    margin-top: 18px;
}

.rg-count {
    font-size: 12px;
    font-weight: 750;
    color: var(--muted);
}

/* The statement shown in place of a figure that the source does not record.
 * It is deliberately a normal paragraph rather than a warning, because a
 * missing figure is a gap in the reference material and not a problem with
 * the compound or with the page. */
.rg-empty {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

.rg-list {
    margin: 0;
    padding-left: 19px;
}

.rg-list li {
    margin: 8px 0;
    line-height: 1.55;
}

.rg-select {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 10px 11px;
    border-radius: 9px;
    color: var(--text);
    margin-bottom: 13px;
}

/* ---------------------------------------------------------------------------
 * Guide: tables
 * ------------------------------------------------------------------------ */

.rg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rg-schedule {
    width: 100%;
    border-collapse: collapse;
}

.rg-schedule th,
.rg-schedule td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.rg-schedule th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
}

/* The narrow screen treatment of this table lives in the mobile block at the
 * foot of the file, with every other narrow screen rule, rather than here. */

/* ---------------------------------------------------------------------------
 * Guide: reconstitution, scoped to the dosing panel
 * ------------------------------------------------------------------------ */

#dosing .rg-recon-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    margin-top: 4px;
}

#dosing .rg-recon-field { min-width: 0 }

#dosing .rg-recon-field label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
    margin-bottom: 6px;
}

#dosing .rg-recon-field .rg-select,
#dosing .rg-recon-field input { margin-bottom: 0 }

#dosing .rg-recon-field input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--card);
    padding: 10px 11px;
    border-radius: 9px;
    color: var(--text);
}

#dosing .rg-recon-readout {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px 12px;
    background: var(--accent-wash-2);
    min-width: 0;
}

#dosing .rg-recon-readout span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
}

#dosing .rg-recon-readout strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

#dosing .rg-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#dosing .rg-card-head .rg-select {
    width: auto;
    margin: 0;
    min-width: 230px;
}

#dosing .rg-pull {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 750;
    color: var(--green);
}

#dosing .rg-pull.is-muted {
    color: var(--muted);
    font-weight: 650;
}

#dosing .rg-cost {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 750;
    color: var(--accent-text);
}

#dosing .rg-cost.is-muted {
    color: var(--muted);
    font-weight: 650;
}

/* ---------------------------------------------------------------------------
 * Guide: cycle forecast and supplies, scoped to the dosing panel
 * ------------------------------------------------------------------------ */

#dosing .rg-cycle-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 14px 0 16px;
}

#dosing .rg-cycle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

#dosing .rg-cycle-tile {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 11px 12px;
    background: var(--accent-wash-2);
    min-width: 0;
}

#dosing .rg-cycle-tile span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 800;
}

#dosing .rg-cycle-tile strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    overflow-wrap: anywhere;
}

#dosing .rg-cycle-tile.is-waiting strong {
    color: var(--muted);
    font-weight: 650;
    font-size: 14px;
}

#dosing .rg-cycle-msg {
    margin: 6px 0 0;
    color: var(--text-soft);
}

#dosing details.rg-card { padding: 0 }

#dosing details.rg-card > summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 16px;
}

#dosing details.rg-card > summary::-webkit-details-marker { display: none }

#dosing details.rg-card > summary .rg-hint {
    font-size: 12px;
    font-weight: 750;
    color: var(--blue);
    white-space: nowrap;
}

/* The word on the disclosure follows the state of the element, so the script
 * never has to keep it in step. */
#dosing details.rg-card > summary .rg-hint:after { content: "Show" }
#dosing details.rg-card[open] > summary .rg-hint:after { content: "Hide" }
#dosing details.rg-card[open] > summary { border-bottom: 1px solid var(--line) }

#dosing .rg-supplies-body { padding: 18px 20px 20px }

/* ---------------------------------------------------------------------------
 * Guide: safety notes
 * ------------------------------------------------------------------------ */

.rg-notelist {
    display: grid;
    gap: 11px;
}

.rg-cn {
    border-left: 3px solid var(--blue);
    background: var(--accent-wash-3);
    border-radius: 0 9px 9px 0;
    padding: 10px 13px;
}

.rg-cn.is-washout {
    border-left-color: var(--amber);
    background: var(--amberbg);
}

.rg-cn.is-general {
    border-left-color: var(--purple);
    background: var(--purplebg);
}

.rg-cn b {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 3px;
}

.rg-cn span {
    display: block;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * Guide: compatibility
 * ------------------------------------------------------------------------ */

/* A two column grid holding one child. That is how the approved mockup sizes
 * the statistic row, so the tiles occupy the narrower left column rather than
 * stretching across the panel, and it is kept rather than tidied. */
.rg-compat-top {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 15px;
    margin-top: 15px;
}

.rg-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.rg-stat {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px;
    background: var(--card);
    min-width: 0;
}

.rg-stat b {
    display: block;
    font-size: 22px;
}

.rg-stat span {
    font-size: 12px;
    color: var(--muted);
}

.rg-stat.is-green { border-top: 3px solid var(--green) }
.rg-stat.is-blue { border-top: 3px solid var(--blue) }
.rg-stat.is-purple { border-top: 3px solid var(--purple) }
.rg-stat.is-red { border-top: 3px solid var(--red) }

.rg-filters {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin: 16px 0 10px;
}

.rg-filter {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    padding: 7px 11px;
    color: var(--text-softer);
    font-weight: 700;
}

.rg-filter[aria-pressed="true"] {
    background: var(--navy);
    color: var(--on-inverse);
    border-color: var(--navy);
}

.rg-relgroup {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 15px 17px;
    margin: 9px 0;
}

.rg-relgroup header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.rg-relgroup h4 {
    margin: 0;
    font-size: 16px;
}

.rg-chipwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* A relationship entry. Every entry is plain text, which is what the approved
 * interface shows, so nothing here assumes it can be pressed. */
.rg-relchip {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    background: var(--accent-wash-7);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
}

.rg-relgroup[data-rel="green"] .rg-relchip {
    background: var(--greenbg);
    color: var(--green);
    border-color: var(--rel-green-border);
}

.rg-relgroup[data-rel="purple"] .rg-relchip {
    background: var(--purplebg);
    color: var(--purple);
    border-color: var(--rel-purple-border);
}

.rg-relgroup[data-rel="red"] .rg-relchip {
    background: var(--redbg);
    color: var(--red);
    border-color: var(--rel-red-border);
}

/* An entry that names something the catalogue does not hold. It is shown as
 * the source material wrote it, in a neutral colour and in italic, so that it
 * is visibly not a compound page you can open. */
.rg-relgroup .rg-relchip.is-free,
.rg-relchip.is-free {
    background: var(--accent-wash-8);
    color: var(--text-softer);
    border-color: var(--line);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Guide: pharmacokinetics
 * ------------------------------------------------------------------------ */

.rg-pk { margin: 22px 0 }

.rg-pk h2 {
    margin: 0 0 6px;
    font-size: 20px;
}

.rg-pk-sub {
    margin: 0;
    color: var(--muted);
}

.rg-pk-controls,
.rg-pk-stats,
.rg-pk-data {
    display: grid;
    gap: 12px;
}

.rg-pk-controls {
    grid-template-columns: repeat(4, 1fr);
    margin: 16px 0;
    align-items: end;
}

.rg-pk-field,
.rg-pk-stat,
.rg-pk-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    background: var(--accent-wash-2);
    min-width: 0;
}

.rg-pk-field label,
.rg-pk-stat small,
.rg-pk-card small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 5px;
}

.rg-pk-field input,
.rg-pk-field select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 7px;
    background: var(--card);
    color: var(--text);
}

.rg-pk-generate {
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: var(--on-inverse);
    font-weight: 800;
    padding: 12px 15px;
    align-self: end;
    min-height: 44px;
}

/* A control whose input is not used by the selected curve basis. It is dimmed
 * and disabled rather than removed, so the panel does not change shape when
 * the basis changes. */
.rg-pk-field-off { opacity: .45 }

.rg-pk-field-off input,
.rg-pk-field-off select { cursor: not-allowed }

.rg-pk-basis {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.rg-pk-chart {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: var(--card);
}

#pkCurve {
    width: 100%;
    height: auto;
    display: block;
}

#pkCurve .rg-pk-phase-line {
    stroke: var(--pk-phase-stroke);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .75;
}

#pkCurve .rg-pk-phase-label {
    fill: var(--pk-phase-fill);
    font-size: 12px;
    font-weight: 600;
}

.rg-pk-stats {
    grid-template-columns: repeat(6, 1fr);
    margin: 12px 0;
}

.rg-pk-stat b {
    font-size: 18px;
    overflow-wrap: anywhere;
}

.rg-pk-data {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 12px;
}

.rg-pk-card b {
    font-size: 16px;
    overflow-wrap: anywhere;
}

/* The wide card holds a table, so it is constrained explicitly. Without the
 * zero maximum width on the cells a long route name forces the table past
 * the card and the panel scrolls sideways. */
.rg-pk-card-wide {
    grid-column: span 2;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.rg-pk-card-wide .rg-pk-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.rg-pk-card-wide .rg-pk-table th,
.rg-pk-card-wide .rg-pk-table td {
    min-width: 0;
    max-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.rg-pk-card-wide .rg-pk-table th:first-child,
.rg-pk-card-wide .rg-pk-table td:first-child { width: 22% }

.rg-pk-table {
    width: 100%;
    border-collapse: collapse;
}

.rg-pk-table th,
.rg-pk-table td {
    text-align: left;
    border-bottom: 1px solid var(--line);
    padding: 8px;
}

.rg-pk-table th {
    font-size: 12px;
    color: var(--muted);
}

.rg-pk-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--accent-wash-7);
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
}

#pkNotes { overflow-wrap: anywhere }

#pkPhases { margin: 16px 0 4px }

#pkPhases h4 {
    margin: 0 0 9px;
    font-size: 15px;
    color: var(--navy);
}

.rg-pk-phase-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rg-pk-phase-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 560px;
}

.rg-pk-phase-table th {
    text-align: left;
    padding: 9px 12px;
    background: var(--accent-wash-9);
    color: var(--navy);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.rg-pk-phase-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--text);
}

.rg-pk-phase-table tbody tr:last-child td { border-bottom: 0 }

.rg-pk-range-note {
    display: block;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    margin-top: 2px;
}

/* ===========================================================================
 * Tablet, 641 to 1024 pixels
 *
 * The layout keeps the full top bar and the card frame, and gives up the
 * multi column grids that need more width than a tablet has.
 * ======================================================================== */

@media (max-width: 1024px) {

    /* The navigation links stay. They used to be hidden outright at this
     * width with nothing put in their place, which left a tablet reader on
     * one tool with no way to reach the other two. There is ample room for
     * the row here once the spacing is tightened, so tightening it is the
     * whole fix at this breakpoint. */
    .topbar {
        padding: 0 20px;
        gap: 18px;
    }

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

    .mainnav a { font-size: 14px }

    /* The menu button appears alongside the links rather than instead of
     * them. It is the way to anything in the secondary group, which never
     * appears in the topbar at any width. */
    .pd-nav-toggle { display: inline-flex }

    .rg-nav { grid-template-columns: 1fr }

    .rg-quick { grid-template-columns: repeat(3, 1fr) }

    .rg-grid2,
    .rg-compat-top { grid-template-columns: 1fr }

    .rg-stats { grid-template-columns: repeat(2, 1fr) }

    #dosing .rg-recon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }

    .rg-pk-controls { grid-template-columns: repeat(2, 1fr) }
    .rg-pk-stats { grid-template-columns: repeat(3, 1fr) }
    .rg-pk-data { grid-template-columns: repeat(2, 1fr) }
}

/* ===========================================================================
 * Mobile, 640 pixels and below
 *
 * Everything becomes one column, the top bar shortens, and the sticky tab
 * strip follows it up so there is no gap between the two.
 * ======================================================================== */

@media (max-width: 640px) {

    /* The schedule carries five columns, and on a narrow screen a table that is
     * allowed to fit the viewport does not fit it, it crushes. Every cell wraps
     * to one word per line, and a five row schedule turns into a tall column of
     * fragments that is harder to read than a scroll would be.
     *
     * The floor below keeps the columns legible and hands the overflow to the
     * .rg-table-wrap scroller, which is the same arrangement the approved
     * mockup already uses for the pharmacokinetic phase table. The figure is
     * the width at which the longest ordinary cell, the syringe pull readout,
     * stops breaking. */
    .rg-schedule { min-width: 620px }

    .rg-schedule th,
    .rg-schedule td {
        padding: 10px;
        white-space: nowrap;
    }

    /* The notes column is the one place where a sentence belongs, so it wraps
     * while the short factual columns hold their single line. */
    .rg-schedule td:last-child {
        white-space: normal;
        min-width: 200px;
    }

    .topbar {
        height: var(--topbar-h-mobile);
        padding: 0 14px;
        gap: 14px;
    }

    .brand { font-size: 17px }

    .hero { padding: 20px 16px }
    .hero h1 { font-size: 23px }

    /* The bottom padding here used to be 70 pixels, reserved for the bottom
     * bar that had not been built yet. That reservation has moved to the body
     * element, because the Calculator and the Wire both close with a footer
     * placed outside the main container and padding on the content could
     * never have protected it. What is left here is ordinary breathing room
     * under the last panel. */
    .content { padding: 14px 13px 24px }

    /* One column on a phone, with the action column moved below the
     * description. The reading order becomes name, description, then
     * controls, which is the order a reader needs them in when the card is
     * the whole width of the screen. */
    .rg-head {
        padding: 18px;
        grid-template-columns: minmax(0, 1fr);
    }

    .rg-head h2 { font-size: 27px }

    .rg-head-actions {
        grid-area: 3 / 1 / 4 / 2;
        justify-self: start;
        margin-top: 14px;
    }

    .rg-head-note { text-align: left }

    .rg-tabs { top: var(--topbar-h-mobile) }

    .rg-quick { grid-template-columns: repeat(2, 1fr) }

    .rg-grid2 { display: block }
    .rg-grid2 .rg-card { margin-bottom: 12px }

    .rg-legal p { font-size: 14px }

    .rg-relgroup header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    #dosing .rg-recon-grid,
    #dosing .rg-cycle-controls,
    #dosing .rg-cycle-grid { grid-template-columns: 1fr }

    #dosing .rg-card-head .rg-select {
        width: 100%;
        min-width: 0;
    }

    #dosing details.rg-card > summary { padding: 15px 14px }
    #dosing .rg-supplies-body { padding: 15px 14px 17px }

    .rg-pk-controls,
    .rg-pk-stats,
    .rg-pk-data { grid-template-columns: 1fr }

    .rg-pk-card-wide {
        grid-column: auto;
        overflow-x: auto;
    }

    .rg-pk-card-wide .rg-pk-table { min-width: 0 }

    /* The axis labels on the chart are drawn in the SVG coordinate space, so
     * they shrink with the chart. They are enlarged here to stay legible once
     * the chart is only a phone wide. */
    #pkCurve .rg-pk-phase-label { font-size: 15px }

    .rg-pk-phase-table {
        font-size: 13px;
        min-width: 520px;
    }

    .rg-pk-phase-table th,
    .rg-pk-phase-table td { padding: 8px 10px }

}

/* ---------------------------------------------------------------------------
 * The bottom tab bar
 *
 * On at 720 pixels and below, which is the same line at which the inline
 * links leave the topbar. It carries the primary tools and nothing else. The
 * drawer is the complete menu a reader opens on purpose, and this is the
 * layer they never have to open anything to use.
 *
 * It has its own media query rather than living inside the 640 pixel block,
 * because the navigation switches at 720 and the rest of the layout switches
 * at 640, and tying the two together would mean a reader at 700 pixels had a
 * topbar with no links and no bar to replace them.
 * ------------------------------------------------------------------------ */

@media (max-width: 720px) {

    /* Reserve the room the fixed bar occupies. This sits on the body rather
     * than on .content because the Calculator and the Wire both close with a
     * footer element placed outside the main container, and a bar fixed to
     * the foot of the viewport would otherwise cover their legal text with
     * no way for the reader to scroll past it. */
    body { padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) }

    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--navy);
        color: var(--on-inverse-mobile-nav);
        box-shadow: 0 -2px 12px var(--topbar-shadow);
        align-items: stretch;
        justify-content: space-around;
    }

    .mobile-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        color: inherit;
        text-decoration: none;
        font-size: 11px;
        font-weight: 650;
        line-height: 1.1;
        text-align: center;
        transition: color .15s ease-out;
    }

    /* The label is the one thing that must never wrap onto a second line,
     * because a two line label would push the icon out of the bar. The short
     * labels in the links array are chosen to fit, and this is the guard in
     * case a longer one is ever added. */
    .mobile-nav a > span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav a:focus { outline: none }

    .mobile-nav a:focus-visible {
        outline: 2px solid var(--toggle-focus-ring);
        outline-offset: -3px;
        border-radius: 8px;
    }

    /* The current tool. The bar is the reader's sense of where they are as
     * much as it is a way to move, so the active entry is brightened and
     * given a rule along the top edge that reads as a selected tab. */
    .mobile-nav a[aria-current="page"] {
        color: var(--on-inverse);
        font-weight: 800;
        box-shadow: inset 0 2px 0 0 var(--cyan);
    }

    .mobile-nav .pd-nav-icon {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
    }
}

/* A short viewport, which in practice means a phone turned on its side. The
 * bar would eat a serious share of the screen, so it shrinks and drops the
 * labels, leaving the icons and their accessible names. */
@media (max-width: 720px) and (max-height: 460px) {
    :root { --mobile-nav-h: 46px }

    .mobile-nav a > span { display: none }
    .mobile-nav .pd-nav-icon { width: 22px; height: 22px }
}

/* ===========================================================================
 * Reduced motion
 *
 * The only motion on the page is the smooth scroll set at the top of the
 * file, and a reader who has asked for less of it should not get it.
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }

    /* The drawer still opens and closes, it simply arrives rather than
     * travels. A panel that slides in from the edge of the screen is exactly
     * the kind of large moving surface that triggers vestibular symptoms, so
     * the transform transition comes off and the panel appears in place. */
    .pd-drawer-panel,
    .pd-scrim,
    .pd-nav-toggle-bars span {
        transition: none;
    }
}

/* ===========================================================================
 * Print
 *
 * A printed page has no navigation to offer and no tabs to press, so the
 * controls come out and every panel goes in. On screen a reader sees one
 * section at a time and moves between them. On paper they get all five at
 * once, each under its own heading, because a sheet they cannot click is only
 * useful if it holds everything.
 *
 * Backgrounds and shadows are dropped, since a tinted card costs ink and
 * carries no meaning once the colour is gone. The borders stay, because they
 * are what separates one card from the next. The legal statement stays for
 * the same reason it is on the screen.
 * ======================================================================== */

/* Screen side. The print summary is not part of the screen design and is only
 * revealed under print media below. */
.rg-print-summary {
    display: none;
}

/* The page box carries no margin, which is what suppresses the browser's own
 * header and footer, the document title, the page address, the date and the
 * page numbers. A readable margin is restored on the body instead. The paper
 * size is deliberately not set here, so the size chosen in the print dialogue
 * is respected. */
@page {
    margin: 0;
}

@media print {

    /* Theme neutralisation.
     *
     * Body text on this page resolves through --muted and the --text family
     * rather than through a literal colour, and every one of those tokens is
     * overridden to a light value by the dark theme root. Printing in dark
     * mode therefore produced pale grey on white. Redeclaring the tokens
     * themselves for both roots fixes every consumer at once without any of
     * the 42 --muted references being touched.
     *
     * The washes and card surfaces go white, because a tint costs ink and
     * carries no meaning once it is no longer next to its neighbours. The
     * semantic relationship colours are left alone, because green against red
     * is the whole point of the compatibility panel and losing it would lose
     * information rather than decoration. */
    :root,
    :root[data-theme="dark"] {
        --bg: #fff;
        --card: #fff;
        --text: #000;
        --text-strong: #000;
        --text-mid: #1a1a1a;
        --text-soft: #333;
        --text-softer: #333;
        --text-quiet: #444;
        --text-faint: #555;
        --muted: #333;
        --line: var(--print-line);
        --shadow: none;
        --accent-wash-1: #fff;
        --accent-wash-2: #fff;
        --accent-wash-3: #fff;
        --accent-wash-4: #fff;
        --accent-wash-5: #fff;
        --accent-wash-6: #fff;
        --accent-wash-7: #fff;
        --accent-wash-8: #fff;
        --accent-wash-9: #fff;
        --greenbg: #fff;
        --redbg: #fff;
        --purplebg: #fff;
        --amberbg: #fff;
        --navy: #fff;
        --navy2: #fff;
        --hero-gradient-end: #fff;
    }

    html, body {
        background: var(--print-bg);
        color: var(--print-ink);
    }

    /* The margin the empty page box gave up. The bottom bar is gone on paper,
     * so the room that was reserved for it goes with it. */
    body {
        padding: 0.5in;
    }

    /* Anything a reader cannot operate on paper. The class is applied in the
     * markup so that a control added later is opted out at the point it is
     * written, rather than requiring someone to remember to extend a selector
     * list in this file. The named selectors are kept as well so nothing
     * depends on the markup change alone. */
    .rg-print-hide,
    .topbar,
    .hero,
    .rg-nav,
    .rg-tabs,
    .rg-head-actions,
    .mobile-nav,
    .pd-nav-toggle,
    .pd-drawer,
    .pd-scrim {
        display: none !important;
    }

    .app, .content { padding: 0; max-width: none }

    /* The print summary. This is the first thing on the first sheet and it
     * replaces the head card, which carried three buttons that cannot be
     * pressed on paper and consumed a whole sheet on its own. */
    .rg-print-summary {
        display: block;
        margin: 0 0 16px;
    }

    .rg-print-brand {
        margin: 0 0 10px;
        padding-bottom: 6px;
        border-bottom: 2px solid var(--print-ink);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .rg-print-eyebrow {
        margin: 0 0 3px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .rg-print-name {
        margin: 0 0 5px;
        font-size: 26px;
        line-height: 1.15;
    }

    .rg-print-tagline {
        margin: 0 0 12px;
        max-width: 6.4in;
        font-size: 12px;
        line-height: 1.4;
    }

    .rg-print-config {
        border: 1px solid var(--print-ink);
        padding: 10px 12px;
        break-inside: avoid;
    }

    .rg-print-config-title {
        margin: 0 0 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .rg-print-dl { margin: 0 }

    .rg-print-row {
        display: flex;
        gap: 12px;
        padding: 3px 0;
        border-bottom: 1px solid var(--print-line);
        font-size: 11px;
        line-height: 1.35;
    }

    .rg-print-row:last-child { border-bottom: 0 }
    .rg-print-row dt { flex: 0 0 2.1in; margin: 0; font-weight: 700 }
    .rg-print-row dd { flex: 1 1 auto; margin: 0 }

    /* A row the script removed for a pre-mixed or non-injectable compound.
     * This has to come after the flex rule to win. */
    .rg-print-row[hidden] { display: none }

    /* Every panel, not only the active one. The hidden attribute is set by
     * the tab switcher and has to be overridden here, which is why these
     * rules are written against the element rather than the state class.
     *
     * break-inside is deliberately not set on the panel. It used to be, and
     * that was the cause of the blank sheets: a section too tall for the space
     * left was pushed forward whole and the space it vacated was abandoned.
     * The rule belongs on the cards inside, which is where it now sits. */
    .rg-panel {
        display: block;
        margin: 0 0 18px;
    }

    /* Each major section opens its own sheet. The overview follows the summary
     * on the first sheet, so it is left out of this list. */
    #dosing,
    #safety,
    #compatibility,
    #pk {
        break-before: page;
    }

    .rg-panel::before {
        content: attr(data-print-title);
        display: block;
        margin: 0 0 14px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--print-ink);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .rg-head,
    .rg-card,
    .rg-stat,
    .rg-metric,
    .rg-cn,
    .rg-cycle-tile,
    .rg-pk-card {
        background: var(--print-bg);
        box-shadow: none;
    }

    /* Only units that are certain to fit within a sheet. A card is not on this
     * list, because a card holding a titration table is taller than a sheet and
     * asking the engine not to break it forces the whole card forward and
     * abandons the space it came from. That is what produced the blank sheets. */
    .rg-stat,
    .rg-metric,
    .rg-cn,
    .rg-cycle-tile,
    .rg-pk-card,
    .rg-print-config {
        break-inside: avoid;
    }

    .rg-chip,
    .rg-tag,
    .rg-relchip,
    .rg-filter {
        background: var(--print-bg);
        box-shadow: none;
    }

    /* A table split across a sheet boundary repeats its header, and no single
     * row is broken in half. */
    thead { display: table-header-group }
    tr { break-inside: avoid }

    /* The supplies card is a details element. The script opens every collapsed
     * one for the print and closes it again afterwards, and the marker is
     * removed because a disclosure triangle on paper points at nothing. */
    summary { list-style: none }
    summary::-webkit-details-marker { display: none }

    /* The hint inside the disclosure heading reads "Hide" or "Show", which is
     * an instruction to press something. The script writes that text, so it is
     * removed here rather than in the markup. */
    summary .rg-hint { display: none }

    /* A recorded phase label such as "Weeks 1-4" was breaking after the hyphen
     * and leaving the "4" on its own line. The first column is narrow because
     * the notes column needs the room, so the label is held on one line
     * instead of the column being widened at the notes column's expense. */
    .rg-schedule th:first-child,
    .rg-schedule td:first-child {
        white-space: nowrap;
    }

    .rg-legal {
        display: block;
        break-inside: avoid;
    }

    a[href] { text-decoration: none; color: var(--print-ink) }
}



/* ===========================================================================
 * TDEE and Macro Calculator styles, appended to pepdosings.css.
 *
 * Location on the server: /home1/tpat/pepdosings/pepdosings.css (this block
 * is added to the end of the file, not to a separate stylesheet, so the site
 * ships one stylesheet request per page).
 *
 * Everything in this block is prefixed with tdee- and only affects the TDEE
 * and Macros page. The design tokens declared at the top of pepdosings.css
 * (navy, blue, cyan, greenbg, purple, red, muted, line, radius, shadow) are
 * reused unchanged. The three macronutrient colours are declared here at the
 * :root level so a later revision changes them in one place.
 *
 * BREAKPOINTS
 *
 * The three widths defined at the top of pepdosings.css are used unchanged.
 *
 *   Desktop   wider than 1024px   two column workspace, sticky right rail
 *   Tablet     641px to 1024px    single column, rail follows the form
 *   Mobile     640px and below    single column, full width controls
 *
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Macro palette. Slightly desaturated versions of the existing red, amber
 * and purple site tokens so the donut sits alongside the site palette
 * rather than fighting it.
 * ------------------------------------------------------------------------ */


/* ---------------------------------------------------------------------------
 * Hero band. Two column arrangement on desktop, one column below.
 * ------------------------------------------------------------------------ */

.tdee-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.tdee-hero-copy h1 {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.15;
  color: var(--on-inverse);
}

.tdee-hero-copy p {
  margin: 0;
  color: var(--on-inverse-soft-text);
  max-width: 62ch;
  line-height: 1.55;
}

.tdee-hero-meta {
  display: grid;
  grid-auto-flow: column;
  gap: 12px;
}

.tdee-hero-chip {
  background: var(--on-inverse-glass-strong-bg);
  border: 1px solid var(--on-inverse-glass-border-strong);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--on-inverse);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tdee-hero-chip span {
  font-weight: 600;
  font-size: 14px;
}

.tdee-hero-chip small {
  color: var(--on-inverse-dim-text);
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * Workspace. Two column at desktop, stacked below.
 * ------------------------------------------------------------------------ */

.tdee-app {
  padding: 24px 24px 48px;
}

.tdee-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
  max-width: var(--shell-max);
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Form card
 * ------------------------------------------------------------------------ */

.tdee-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tdee-form-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tdee-section {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.tdee-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.tdee-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--text);
}

.tdee-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-inverse);
  font-size: 13px;
  font-weight: 600;
}

.tdee-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.tdee-field:last-child {
  margin-bottom: 0;
}

.tdee-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.tdee-hint {
  color: var(--muted);
  font-size: 12px;
}

.tdee-note {
  color: var(--muted);
  font-size: 12px;
  margin: 6px 0 0;
  line-height: 1.5;
}

.tdee-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font: inherit;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tdee-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

select.tdee-input {
  appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.tdee-input-affix {
  position: relative;
}

.tdee-input-affix .tdee-input {
  padding-right: 32px;
}

.tdee-affix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
}

.tdee-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tdee-grid-tight {
  gap: 10px;
}

.tdee-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Segmented radios styled as chips. Uses :has for the checked state so the
 * markup stays simple and every input remains a real radio. */

.tdee-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.tdee-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}

.tdee-seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tdee-seg span {
  font-weight: 600;
}

.tdee-seg small {
  font-size: 11px;
  color: var(--muted);
}

.tdee-seg:has(input:checked) {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 3px var(--tdee-seg-shadow);
}

.tdee-seg:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.tdee-seg:hover {
  color: var(--text);
}

/* Explainer disclosure under the activity level */

.tdee-explain {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.tdee-explain summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.tdee-explain summary::-webkit-details-marker { display: none; }

.tdee-explain[open] summary {
  border-bottom: 1px solid var(--line);
}

.tdee-explain ul {
  margin: 0;
  padding: 12px 12px 12px 32px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.tdee-explain li + li { margin-top: 6px; }

/* Custom ratios block */

.tdee-custom {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}

.tdee-sum {
  margin-top: 14px;
}

.tdee-sum-track {
  height: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.tdee-sum-fill {
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width 180ms ease, background 180ms ease;
}

.tdee-sum[data-state="ok"] .tdee-sum-fill {
  background: var(--green);
}

.tdee-sum[data-state="empty"] .tdee-sum-fill {
  background: var(--muted);
}

.tdee-sum-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.tdee-sum[data-state="ok"] .tdee-sum-label {
  color: var(--green);
  font-weight: 600;
}

/* Actions row and error */

.tdee-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 4px;
}

.tdee-submit {
  flex: 1;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: var(--on-inverse);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 120ms ease;
}

.tdee-submit:hover { background: var(--tdee-submit-hover); }
.tdee-submit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tdee-submit[disabled] { background: var(--muted); cursor: progress; }

.tdee-ghost {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 120ms ease, background 120ms ease;
}

.tdee-ghost:hover { border-color: var(--blue); background: var(--bg); }
.tdee-ghost:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.tdee-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.tdee-error {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: var(--redbg);
  border: 1px solid var(--error-border);
  border-radius: 10px;
  color: var(--error-text);
  font-size: 13px;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * Right rail (result panel)
 * ------------------------------------------------------------------------ */

.tdee-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  align-self: start;
}

.tdee-rail-inner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  min-height: 320px;
}

/* Empty state */

.tdee-empty {
  text-align: center;
  padding: 24px 8px;
  color: var(--text);
}

.tdee-empty-icon {
  color: var(--muted);
  margin-bottom: 8px;
}

.tdee-empty h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.tdee-empty p {
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 32ch;
}

/* Pending state */

.tdee-pending {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.tdee-workspace[data-state="pending"] .tdee-result {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 120ms ease;
}

/* Safety banner */

.tdee-safety {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--amberbg);
  border: 1px solid var(--safety-border);
  color: var(--safety-text);
  border-radius: 10px;
  margin-bottom: 16px;
}

.tdee-safety .tdee-icon {
  width: 20px;
  height: 20px;
  color: var(--safety-icon);
}

.tdee-safety strong {
  display: block;
  margin-bottom: 2px;
}

.tdee-safety p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Headline */

.tdee-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tdee-headline-main small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.tdee-headline-main b {
  display: block;
  font-size: 44px;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.tdee-unit {
  color: var(--muted);
  font-size: 14px;
}

.tdee-headline-side {
  margin: 0;
  display: grid;
  gap: 8px;
  min-width: 140px;
}

.tdee-headline-side > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tdee-headline-side dt {
  color: var(--muted);
  font-size: 12px;
}

.tdee-headline-side dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tdee-bmi {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--greenbg);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}

.tdee-bmi[data-bmi="under"]  { background: var(--purplebg); color: var(--purple); }
.tdee-bmi[data-bmi="normal"] { background: var(--greenbg);  color: var(--green); }
.tdee-bmi[data-bmi="over"]   { background: var(--amberbg);  color: var(--amber); }
.tdee-bmi[data-bmi="obese"]  { background: var(--redbg);    color: var(--red); }

/* Donut chart */

.tdee-donut-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.tdee-donut { display: flex; align-items: center; justify-content: center; }
.tdee-donut svg { display: block; }
.tdee-donut-num { fill: var(--text); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: inherit; }
.tdee-donut-sub { fill: var(--muted); font-size: 11px; font-family: inherit; }

.tdee-donut-legend {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.tdee-donut-legend > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tdee-donut-legend b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.tdee-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--muted);
}

.tdee-swatch[data-macro="protein"], .tdee-macro[data-macro="protein"] .tdee-swatch { background: var(--tdee-protein); }
.tdee-swatch[data-macro="carbs"],   .tdee-macro[data-macro="carbs"]   .tdee-swatch { background: var(--tdee-carbs); }
.tdee-swatch[data-macro="fat"],     .tdee-macro[data-macro="fat"]     .tdee-swatch { background: var(--tdee-fat); }

/* Macro rows */

.tdee-macros {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.tdee-macro {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.tdee-macro-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tdee-macro-grams {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}

.tdee-macro-grams b {
  font-size: 16px;
  color: var(--text);
}

.tdee-macro-grams small {
  color: var(--muted);
  font-size: 12px;
}

.tdee-macro-cals {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 68px;
  text-align: right;
}

.tdee-macro-pct {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

/* Recap */

.tdee-recap {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  margin-bottom: 16px;
}

.tdee-recap h3 {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tdee-recap p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

/* Result actions */

.tdee-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tdee-action-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 180ms ease;
}

.tdee-action-note[data-visible="true"] {
  opacity: 1;
  color: var(--green);
}

/* ---------------------------------------------------------------------------
 * Compare row
 * ------------------------------------------------------------------------ */

.tdee-compare {
  max-width: var(--shell-max);
  margin: 32px auto 0;
  padding: 0 24px;
}

.tdee-compare-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.tdee-compare-head p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}

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

.tdee-compare-card {
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.tdee-compare-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.tdee-compare-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.tdee-compare-card[data-active="true"] {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--tdee-compare-focus);
}

.tdee-compare-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}

.tdee-compare-ratio {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.tdee-compare-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tdee-compare-macros > div {
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--bg);
  border-radius: 8px;
}

.tdee-compare-macros small {
  font-size: 11px;
  color: var(--muted);
}

.tdee-compare-macros b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
 * Learn section and legal footer
 * ------------------------------------------------------------------------ */

.tdee-learn {
  max-width: var(--shell-max);
  margin: 32px auto 0;
  padding: 0 24px;
}

.tdee-learn details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tdee-learn summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
}

.tdee-learn summary::-webkit-details-marker { display: none; }

.tdee-learn-body {
  padding: 4px 20px 20px;
  color: var(--text);
}

.tdee-learn-body h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}

.tdee-learn-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.tdee-legal {
  max-width: var(--shell-max);
  margin: 32px auto 0;
  padding: 0 24px 32px;
}

.tdee-legal p {
  margin: 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.tdee-legal strong { color: var(--text); }

/* ---------------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {

  .tdee-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tdee-hero-meta {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tdee-workspace {
    grid-template-columns: 1fr;
  }

  .tdee-rail {
    position: static;
  }

  .tdee-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */

@media (max-width: 640px) {

  .tdee-app { padding: 16px 12px 32px; }

  .tdee-hero-copy h1 { font-size: 24px; }

  .tdee-hero-meta {
    grid-template-columns: 1fr;
  }

  .tdee-form-inner { padding: 18px; }

  .tdee-grid-2 { grid-template-columns: 1fr; }

  .tdee-headline {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tdee-headline-main b { font-size: 36px; }

  .tdee-donut-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tdee-donut-legend > div { justify-content: center; }
  .tdee-donut-legend b { margin-left: 8px; }

  .tdee-macro {
    grid-template-columns: 16px minmax(0, 1fr) auto;
    row-gap: 4px;
  }

  .tdee-macro-cals { grid-column: 2 / 4; text-align: left; min-width: 0; }
  .tdee-macro-pct  { grid-column: 3 / 4; }

  .tdee-compare { padding: 0 12px; }
  .tdee-compare-grid { grid-template-columns: 1fr; }

  .tdee-actions { flex-direction: column-reverse; align-items: stretch; }
  .tdee-ghost { width: 100%; justify-content: center; height: 48px; }
  .tdee-submit { height: 52px; font-size: 16px; }
}

/* ---------------------------------------------------------------------------
 * Print styles. One clean page containing headline, donut, macros and recap.
 * ------------------------------------------------------------------------ */

@media print {

  body { background: var(--print-bg) !important; color: var(--print-ink) !important; }

  .topbar, .mainnav, .tdee-hero, .tdee-form, .tdee-compare, .tdee-learn,
  .tdee-legal, .tdee-pending, .tdee-empty, .tdee-result-actions,
  .tdee-action-note {
    display: none !important;
  }

  .tdee-workspace {
    display: block;
    padding: 0;
    max-width: none;
  }

  .tdee-rail, .tdee-rail-inner {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .tdee-result { display: block !important; }

  .tdee-headline-main b { font-size: 40px; color: var(--print-ink); }

  .tdee-macro { border-color: var(--print-line); page-break-inside: avoid; }

  .tdee-safety {
    background: var(--print-bg) !important;
    border: 1px solid var(--safety-icon) !important;
    color: var(--safety-text) !important;
  }
}


/* === pd theme toggle === */

/* Visually hidden helper. Used to expose descriptive text to screen readers
 * without showing it visually. Kept as a general helper class in case other
 * parts of the site need it in the future. */
.pd-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The theme toggle button itself. Lives in the topbar mainnav, at the far
 * right, after the last navigation link. It is styled to look like part of
 * the nav rather than a separate UI element. */
.pd-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--toggle-icon-color);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease-out, transform .15s ease-out;
}

.pd-theme-toggle:hover {
    background: var(--toggle-hover-bg);
}

.pd-theme-toggle:active {
    transform: scale(0.94);
}

.pd-theme-toggle:focus {
    outline: none;
}

.pd-theme-toggle:focus-visible {
    outline: 2px solid var(--toggle-focus-ring);
    outline-offset: 2px;
}

.pd-theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    position: relative;
}

.pd-theme-toggle-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .15s ease-out, transform .2s ease-out;
}

/* Icon swap. The sun icon shows in dark mode (so the user sees what pressing
 * would give them, which is light mode), and the moon icon shows in light
 * mode. This inverse pattern matches every mainstream theme toggle. */
:root .pd-theme-icon-sun  { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-45deg); }
:root .pd-theme-icon-moon { opacity: 1; transform: translate(-50%, -50%) scale(1)  rotate(0);      }

:root[data-theme="dark"] .pd-theme-icon-sun  { opacity: 1; transform: translate(-50%, -50%) scale(1)  rotate(0);     }
:root[data-theme="dark"] .pd-theme-icon-moon { opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(45deg); }

/* Respect reduced motion. Users with vestibular sensitivity see a straight
 * opacity swap with no transform or transition. */
@media (prefers-reduced-motion: reduce) {
    .pd-theme-toggle,
    .pd-theme-toggle-icon svg {
        transition: none;
    }
    :root .pd-theme-icon-sun,
    :root .pd-theme-icon-moon,
    :root[data-theme="dark"] .pd-theme-icon-sun,
    :root[data-theme="dark"] .pd-theme-icon-moon {
        transform: translate(-50%, -50%);
    }
}

/* Mobile: the toggle stays visible at all breakpoints. It never collapses
 * into the mobile drawer because it is a global chrome control, not a
 * navigation destination. */
@media (max-width: 720px) {
    .pd-theme-toggle {
        width: 36px;
        height: 36px;
    }
}

/* At tablet and below the .mainnav block hides so its two navigation links
 * do not stack awkwardly. The theme toggle button is a personal preference
 * control, not a navigation link, so it should stay visible at every width
 * so mobile readers can still switch themes. The two overrides below turn
 * .mainnav back on but keep it clean by hiding only the navigation anchors,
 * leaving the toggle button as the only visible child. */
@media (max-width: 1024px) {
    .mainnav {
        display: flex;
        align-items: center;
    }
}

/* At 720 pixels and below the inline links come out of the topbar. They are
 * not lost: the bottom tab bar carries all three where a thumb can reach
 * them, and the menu button beside the theme toggle opens the full menu.
 * Removing them here is what buys the brand, the toggle and the menu button
 * enough room to sit comfortably on a phone. */
@media (max-width: 720px) {
    .mainnav {
        flex: 0 0 auto;
        gap: 4px;
        margin-left: auto;
    }

    .mainnav > a { display: none }

    .pd-nav-toggle {
        width: 36px;
        height: 36px;
    }
}


/* ===========================================================================
 * Home page
 *
 * Everything in this section is scoped behind the pd-home- prefix so that it
 * cannot reach any of the three tool pages. The only exception is the .brand
 * rule immediately below, which belongs to the shared topbar and had to change
 * because the brand became an anchor.
 *
 * The page is built from tokens alone. There is not a single literal colour in
 * this section, which is what allows dark mode to work without a second copy
 * of every rule.
 * ------------------------------------------------------------------------ */

/* The brand is now an anchor rather than a div. An anchor arrives with a
 * browser default colour and an underline, both of which would be wrong in the
 * navy bar, so both are reset. The flex layout, the weight and the size all
 * still come from the .brand rule higher up this file, which is unchanged. */
.brand {
    color: inherit;
    text-decoration: none;
}

.brand:hover .mark,
.brand:focus-visible .mark { border-color: var(--blue2) }

.brand:focus { outline: none }

.brand:focus-visible {
    outline: 2px solid var(--toggle-focus-ring);
    outline-offset: 4px;
    border-radius: 10px;
}

/* --- The hero band ------------------------------------------------------ */

/* The band itself is the shared .hero, which already reaches full bleed and
 * already carries the navy gradient. Only the vertical rhythm changes here,
 * because the home page hero carries more prose than a tool page hero and
 * needs room to breathe above the cards. */
.pd-home-hero {
    padding-top: 52px;
    padding-bottom: 48px;
}

/* The hero copy runs the full width of the shell, exactly as the paragraph in
 * every tool page hero does. An earlier version of this rule capped it at 860
 * pixels as a reading measure, which on a wide display stopped the text around
 * the halfway mark and left the right half of the band empty. The tool pages
 * set no cap on their hero paragraph, so a cap here made the home page the odd
 * one out on the one page where the shell should look most settled. */
.pd-home-hero-copy { max-width: none }

.pd-home-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* clamp rather than a set of breakpoint overrides. The heading is the one
 * piece of type on the site that has to look deliberate at every width, and a
 * fluid scale does that with one declaration instead of four. */
.pd-home-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -.015em;
}

.pd-home-lede {
    margin: 0;
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.62;
    color: var(--on-inverse-soft-text);
}

/* --- The card grid ------------------------------------------------------ */

.pd-home-content { padding-top: 34px }

.pd-home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* The card is one anchor covering the whole tile. Making the tile itself the
 * control rather than putting a small link at the bottom of it is the single
 * biggest usability decision on this page, because it turns a fiddly target
 * into one that cannot be missed on a touch screen. */
.pd-home-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 24px 22px;
    color: var(--text);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}

/* A rule of accent colour along the top edge. Each card gets its own colour so
 * that the three tools stay visually distinct in a reader's memory, which is
 * what makes a second visit faster than the first. */
.pd-home-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--blue);
}

.pd-home-card-guide:before  { background: linear-gradient(90deg, var(--blue), var(--blue2)) }
.pd-home-card-macros:before { background: linear-gradient(90deg, var(--green), var(--cyan)) }
.pd-home-card-wire:before   { background: linear-gradient(90deg, var(--purple), var(--blue2)) }

.pd-home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px var(--pd-home-card-hover-shadow);
    border-color: var(--accent-border);
}

.pd-home-card:focus { outline: none }

/* The focus ring is drawn on the card rather than on anything inside it, since
 * the card is the control. The offset is negative so the ring sits inside the
 * rounded corner instead of being clipped by the overflow rule above. */
.pd-home-card:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
}

/* Motion is a nicety, not a requirement. A reader who has asked their system
 * to stop moving things gets the colour and shadow changes without the lift. */
@media (prefers-reduced-motion: reduce) {
    .pd-home-card { transition: box-shadow .18s ease-out, border-color .18s ease-out }
    .pd-home-card:hover { transform: none }
}

.pd-home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--accent-wash-1);
    border: 1px solid var(--line);
    color: var(--blue);
    margin-bottom: 16px;
    flex: 0 0 auto;
}

.pd-home-card-macros .pd-home-card-icon { color: var(--green) }
.pd-home-card-wire .pd-home-card-icon   { color: var(--purple) }

.pd-home-card-icon .pd-nav-icon {
    width: 24px;
    height: 24px;
}

.pd-home-card-title {
    margin: 0 0 8px;
    font-size: clamp(19px, 1.5vw, 22px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--text);
}

/* The claim line. It is deliberately the loudest piece of type in the card
 * after the title, because it is the sentence the whole card exists to earn. */
.pd-home-claim {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 750;
    color: var(--pd-home-claim-guide);
}

.pd-home-card-macros .pd-home-claim { color: var(--pd-home-claim-macros) }
.pd-home-card-wire .pd-home-claim   { color: var(--pd-home-claim-wire) }

.pd-home-card-body {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--text-soft);
}

.pd-home-points {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.pd-home-points li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-mid);
}

/* A drawn tick rather than a bullet character or an inline SVG per item. Two
 * borders rotated forty five degrees cost nothing and scale with the type. */
.pd-home-points li:before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 5px;
    height: 9px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(45deg);
}

/* The statistics row. margin-top auto pushes it and the call to action down to
 * the foot of the card, so that the three cards line their bottom edges up
 * even though their prose is not the same length. */
.pd-home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.pd-home-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--accent-wash-2);
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
}

.pd-home-stat strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}

.pd-home-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 800;
    color: var(--pd-home-claim-guide);
}

.pd-home-card-macros .pd-home-cta { color: var(--pd-home-claim-macros) }
.pd-home-card-wire .pd-home-cta   { color: var(--pd-home-claim-wire) }

.pd-home-cta-arrow { transition: transform .18s ease-out }

.pd-home-card:hover .pd-home-cta-arrow { transform: translateX(4px) }

@media (prefers-reduced-motion: reduce) {
    .pd-home-cta-arrow { transition: none }
    .pd-home-card:hover .pd-home-cta-arrow { transform: none }
}

/* --- The closing band --------------------------------------------------- */

.pd-home-close {
    margin-top: 30px;
    padding: 26px 28px;
    border-radius: var(--radius);
    background: var(--accent-wash-5);
    border: 1px solid var(--accent-border);
}

.pd-home-close h2 {
    margin: 0 0 10px;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.25;
    font-weight: 800;
    color: var(--text);
}

/* No width cap here either, for the same reason as the hero copy above. The
 * band is a full width panel, so text that stops halfway across it reads as a
 * mistake rather than as a deliberate measure. */
.pd-home-close p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--text-soft);
}

/* --- The legal footer --------------------------------------------------- */

/* The Wire defines .pw-legal in pw-wire.css, which this page does not load, so
 * the home page carries its own copy of the same treatment rather than pulling
 * in a whole stylesheet for one rule. */
.pd-home-legal {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 28px 34px;
}

.pd-home-legal p {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-faint);
}

.pd-home-legal strong { color: var(--text-quiet) }

/* --- Tablet, 1024 pixels and below -------------------------------------- */

/* Two columns rather than three. The third card takes the full width of the
 * row beneath, because a lone card sitting in a half width column next to
 * empty space reads as a layout that broke rather than one that adapted. */
@media (max-width: 1024px) {
    .pd-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }

    .pd-home-grid > .pd-home-card:nth-child(3) { grid-column: 1 / -1 }

    .pd-home-hero {
        padding-top: 42px;
        padding-bottom: 40px;
    }
}

/* --- Phones, 720 pixels and below --------------------------------------- */

@media (max-width: 720px) {
    .pd-home-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .pd-home-grid > .pd-home-card:nth-child(3) { grid-column: auto }

    .pd-home-hero {
        padding-top: 32px;
        padding-bottom: 30px;
    }

    .pd-home-content { padding-top: 24px }

    .pd-home-card { padding: 22px 18px 20px }

    .pd-home-close {
        padding: 22px 18px;
        margin-top: 22px;
    }

    .pd-home-legal { padding: 0 16px 24px }
}

/* --- Small phones, 420 pixels and below --------------------------------- */

/* The statistic chips are the first thing to run out of room, so below this
 * width they stop trying to sit in a row and stack into two columns instead,
 * which keeps every figure readable rather than letting the row wrap into an
 * uneven ladder. */
@media (max-width: 420px) {
    .pd-home-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-home-stat {
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}