/* ==================================================================
   Design tokens

   The whole palette in one place, every value taken from what the site
   already paints: the navy of the header, hero and headings, the orange
   of the "Read more" / "Subscribe" buttons, and the greys already used by
   the panels, hairlines and captions.

   --accent          the brand orange, exactly as it was (#F3624B). Used for
                     marks, borders, dots and figures - never as the fill of
                     a button that carries white text.
   --accent-strong   the same orange, darkened only as far as it must be for
                     white text on it to pass WCAG AA (4.6:1 at 15px bold).
                     This is the one action colour: every primary button.
   ================================================================== */
:root {
    --brand-navy: #172350;
    --accent: #F3624B;
    --accent-strong: #CE4430;
    --accent-strong-hover: #B93D2A;

    /* neutrals already in use on the site */
    --grey-50: #f4f5f7;
    --grey-100: #eef1f8;
    --grey-200: #e3e6ea;
    --grey-300: #D8DCE8;
    --grey-500: #8A93A3;
    --grey-700: #495064;
    --white: #ffffff;

    /* surfaces */
    --card-radius: 14px;
    --card-shadow: 0 14px 30px rgba(6, 17, 38, 0.16);
    --card-scrim: rgba(6, 17, 38, 0.78);

    /* the one primary button */
    --btn-radius: 8px;
    --btn-padding: 12px 28px;
}

/* ------------------------------------------------------------------
   The primary button.

   One look for every primary action on the site: filled with the action
   orange, white text, the same radius, the same padding, the same hover.
   Used by the Featured News "Read more" button (.btn-primary) and by the
   Opportunities "EXPLORE" buttons (.sbtn.primary, the old medium blue is
   gone). Secondary buttons (.sbtn.secondary) are untouched.
   ------------------------------------------------------------------ */
.btn-primary,
.sbtn.primary,
.sbtn.primary.button {
    display: inline-block;
    box-sizing: border-box;
    padding: var(--btn-padding);
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--accent-strong) !important;
    color: var(--white) !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.sbtn.primary:hover,
.sbtn.primary:focus,
.sbtn.primary.button:hover,
.sbtn.primary.button:focus {
    background: var(--accent-strong-hover) !important;
    color: var(--white) !important;
}

.btn-primary:focus-visible,
.sbtn.primary:focus-visible {
    outline: 2px solid var(--brand-navy);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   The featured news / notice strip at the very top of the page.

   A light neutral strip instead of the solid brick red one: the rest of
   the bar (its 40px height, its fixed position, its "See More" text and
   its link to the starred news) is exactly as it was, only the colours
   change. box-sizing keeps the 1px hairline inside the 40px the nav and
   the page content are pushed down by.
   ------------------------------------------------------------------ */
.notice-bar {
    box-sizing: border-box;
    background: var(--grey-50);
    border-bottom: 1px solid var(--grey-200);
}

/* the bar's own colour classes are white ones (.cw) and the framework's
   utility classes are the most specific thing here, so this one rule is
   written to win: everything inside the strip reads navy on the light grey */
.notice-bar.cw,
.notice-bar,
.notice-bar *,
.notice-bar .cw {
    color: var(--brand-navy) !important;
}

.body-data ul,
.body-data ol {
    padding: 0px;
}

.body-data {
    line-height: 30px;
}



[body] a,
[footer] a {
    text-decoration: underline;
}

.flexi {
    max-width: 1300px;
}

.body-data table {
    table-layout: fixed;
    text-align: left;
    width: 100% !Important;
    white-space: normal;
}

.body-data table td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    inline-size: 150px;
    overflow-wrap: break-word;
    hyphens: manual;
    padding: 0px 5px;
}

.body-data a {
    inline-size: 150px;
    overflow-wrap: break-word;
    hyphens: manual;
    color: #006ca7;
}

.body-data a div {
    white-space: normal;
}

.about-image div {
    background-color: #fbfbfb;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.fs45 {
    font-size: 45px;
}

/* ------------------------------------------------------------------
   News photos - the news cards on /news and the Latest News cards on the
   home page (one card = one /News record, see newsCard() in js).

   The card gets one fixed-shape photo area at its top: full card width,
   16/9, image cropped to fill it - so cards line up whatever shape the
   original photo is. A record with no photo renders no photo area at all
   (the class is only put on the markup when the card has a Photo).
   ------------------------------------------------------------------ */
.news-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #eef1f8;
}

/* the image fills the box and is cropped to it (never a strip, never a
   stretched photo, whatever shape the original is) */
.news-card__photo img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* the same box on a browser that does not know aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .news-card__photo {
        height: 0;
        padding-bottom: 56.25%;
    }
}

/* the record's date, directly under the photo (was pinned to the card's
   top-right corner, which the photo area now takes) */
.news-card__date {
    text-align: right;
    margin-top: 15px;
}

/* the single article page's body rules (.news-body) live in news.view's own
   <style> block, next to the markup they belong to */

@media (max-width: 768px) {
    .news-card__date {
        margin-top: 10px;
    }
}
table[border="2"]{width:100%!important;max-width:100%!important;border-collapse:separate!important;border-spacing:0;border:1px solid #e6e8ee!important;border-radius:14px;overflow:hidden;background:#fff;table-layout:fixed;margin:18px 0 8px}
table[border="2"]>tbody>tr:first-child>td{background:#172350!important;border:0!important;padding:12px 14px!important;vertical-align:middle}
table[border="2"]>tbody>tr:first-child>td:nth-child(1){width:76px}
table[border="2"]>tbody>tr:first-child>td:nth-child(5){width:86px}
table[border="2"]>tbody>tr:first-child>td:nth-child(6){width:112px}
table[border="2"]>tbody>tr:first-child>td,table[border="2"]>tbody>tr:first-child>td *{color:#fff!important;font-size:11px!important;font-weight:700;line-height:1.4!important;letter-spacing:.06em;text-transform:uppercase;text-align:left!important}
table[border="2"]>tbody>tr:not(:first-child)>td{border:0!important;border-bottom:1px solid #eef0f4!important;padding:12px 14px!important;vertical-align:top;background:transparent!important;overflow-wrap:anywhere}
table[border="2"]>tbody>tr:last-child>td{border-bottom:0!important}
table[border="2"]>tbody>tr:not(:first-child)>td,table[border="2"]>tbody>tr:not(:first-child)>td *{font-size:12.5px!important;line-height:1.5!important;color:#495064!important;font-family:inherit!important}
table[border="2"] td p{margin:0 0 6px!important;text-align:left!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1) *{color:#f3624b!important;font-weight:700!important;font-size:14px!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2) *{color:#172350!important;font-weight:600}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6) *{color:#172350!important;font-weight:700}
table[border="2"] td[style*="rgb(255, 204, 0)"]{background:#fff8e1!important}
table[border="2"] td[style*="rgb(51, 204, 0)"]{background:#eef8ea!important}
table[border="2"]>tbody>tr>td table{width:100%!important;border:0!important;background:transparent!important;margin:0}
table[border="2"]>tbody>tr>td table td,table[border="2"]>tbody>tr>td table tr{border:0!important;padding:0!important;background:transparent!important;height:auto!important}
table[border="2"] a{color:#1e4fd8!important;text-decoration:none;border-bottom:1px solid rgba(30,79,216,.3);overflow-wrap:anywhere}
@media (max-width:1023px){
table[border="2"]{border:0!important;background:transparent!important;border-radius:0;margin:14px 0 0}
table[border="2"]>tbody>tr:first-child{display:none!important}
table[border="2"]>tbody,table[border="2"]>tbody>tr,table[border="2"]>tbody>tr>td{display:block!important;width:100%!important}
table[border="2"]>tbody>tr:not(:first-child){background:#fff!important;border:1px solid #e6e8ee;border-radius:14px;padding:14px 16px!important;margin:0 0 14px}
table[border="2"]>tbody>tr:not(:first-child)>td{border:0!important;padding:0 0 10px!important;text-align:left!important;white-space:normal!important;font-size:12px!important;line-height:1.45!important}
table[border="2"]>tbody>tr:not(:first-child)>td *{font-size:12px!important;line-height:1.45!important}
table[border="2"]>tbody>tr:not(:first-child)>td:last-child{padding-bottom:0!important}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(5),table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6){width:100%!important;white-space:normal!important}
table[border="2"]>tbody>tr:not(:first-child)>td::before{display:block;font-size:10px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8a93a3!important;margin-bottom:3px}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(1)::before{content:"Selection year"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(2)::before{content:"Project"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(3)::before{content:"Beneficiary home institutions"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(4)::before{content:"Other countries involved"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(5)::before{content:"Duration"}
table[border="2"]>tbody>tr:not(:first-child)>td:nth-child(6)::before{content:"Budget (EUR)"}
}

/* ==================================================================
   The News and Events lists, one page per year
   (/news, /news/2026, /news/2025, ... /events, /events/2026, ...).

   Two small pieces, used by both lists:

   .list-state   what the column shows while the Base request is running, or
                 when the year it was asked for has nothing in it. It keeps a
                 height of its own so the page does not jump while it loads,
                 and so an empty year still reads as a page rather than a
                 blank one.

   .year-nav     the way through the years, at the END of every year's list:
                 the older year as one full-width row the width of the list
                 (the same right-hand arrow the site already uses), and under
                 it, quieter, the step back up to the newer year. Both are
                 plain links, so they read the same on a phone at 390px as on
                 a desktop: one row each, the whole row tappable.
   ================================================================== */
.list-state {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-height: 420px;
    padding: 40px 20px;
    color: var(--brand-navy, #172350);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.list-state a {
    color: var(--accent-strong, #CE4430);
    font-weight: 700;
}

.year-nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
}

/* the element selector is part of the rule on purpose: the site's own
   "[body] a { text-decoration: underline }" must not put a line under this
   full-width row, and equal specificity resolves in favour of the later rule */
a.year-nav__older {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--grey-300, #D8DCE8);
    border-left: 5px solid var(--accent, #F3624B);
    border-radius: 8px;
    background: var(--white, #ffffff);
    color: var(--brand-navy, #172350);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

a.year-nav__older:hover,
a.year-nav__older:focus {
    background: var(--grey-50, #f4f5f7);
    border-color: var(--grey-300, #D8DCE8);
    border-left-color: var(--accent, #F3624B);
    color: var(--brand-navy, #172350);
    text-decoration: none;
}

a.year-nav__older:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 2px;
}

.year-nav__arrow {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* the arrow steps to the right when the row is hovered, the same move the
   site's other arrows make */
a.year-nav__older:hover .year-nav__arrow,
a.year-nav__older:focus .year-nav__arrow {
    transform: translate(0.5em, 0);
}

/* the step back up to the newer year: present, but never the loudest thing
   at the bottom of the list */
.year-nav__newer {
    display: inline-block;
    margin-top: 15px;
    color: var(--grey-700, #495064);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
}

.year-nav__newer:hover,
.year-nav__newer:focus {
    color: var(--brand-navy, #172350);
}

@media (max-width: 768px) {
    .list-state {
        min-height: 300px;
        padding: 30px 15px;
    }

    .year-nav {
        margin-top: 20px;
    }

    a.year-nav__older {
        padding: 16px;
        font-size: 15px;
    }

    .year-nav__newer {
        margin-top: 12px;
    }
}

/* ==================================================================
   The quote strip - one quoted testimonial, in a quiet band at the top of the
   pages it belongs to: under the intro of the opportunities pages
   (/opportunities and /opportunities/<category>) and under the page heading and
   tab row of every support-to-applicants page (/supportapplicants and each of
   its sections).

   The MARKUP is views/quote-strip.view, the sub-view both of those pages mount.
   That file does all of its own work - it reads /Testimonials itself, keeps the
   records with a Quote, sorts them newest first and writes one of them into the
   panel below - so nothing here depends on a fill pass anywhere else.

   The STYLES are here, in the site-wide sheet, so they are in force on both
   pages: a sub-view's own <style> is only in force where that sub-view is
   mounted.

   THE BAND'S SPACE IS ALWAYS THERE: the panel keeps its place in the page
   (min-height below), so the content under it never jumps when the read comes
   back. Until the view has a quote to show it draws nothing at all - the panel
   is visibility: hidden, so no empty box and no empty outline is seen, only the
   space it holds - and if the read fails, or the class has no quoted record, it
   simply stays that way: empty, quiet, and with nothing in the console. The
   view puts the panel on screen (visibility: visible) the moment it writes the
   quote, with [data-quote-strip-ready].

   The look: the large orange quote mark in its own narrow column, the quote in
   the site's italic body style beside it, the "— Name, Role" line under the
   quote, and the "Read more testimonials" link at the right (on a phone the mark
   goes above the quote and the link below the byline, left aligned). Colours and
   type are the site's own - the grey panel, the orange hairline the site's cards
   use, the navy text and the small grey byline. No photo, no shadow, no
   animation.
   ================================================================== */
.quote-strip-hold {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

/* the space is held even when there is nothing in it yet; visibility (and not
   display) is what keeps that space while drawing nothing */
.quote-strip {
    display: grid;
    visibility: hidden;
    box-sizing: border-box;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "mark quote link"
        "mark by link";
    align-items: start;
    column-gap: 16px;
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    margin: 28px 0 30px;
    padding: 22px 26px 24px;
    border: 1px solid var(--grey-200, #e3e6ea);
    border-left: 4px solid var(--accent, #F3624B);
    border-radius: var(--card-radius, 14px);
    background: var(--grey-50, #f4f5f7);
    color: var(--brand-navy, #172350);
    text-align: left;
}

/* a panel with a real testimonial in it is on the page (set by the view itself
   once it has written the quote) */
.quote-strip[data-quote-strip-ready] {
    visibility: visible;
}

/* TOP OF THE PAGE - the view carries .quote-strip-top on its own wrapper (the
   mount sits under the intro of the opportunities pages and under the page
   heading and tab row of the support pages): a little air below the heading /
   tab row, and only a few pixels of its own underneath, because the section
   that follows opens with its own spacing. So the band is seen without scrolling
   and does not push the page's content away. */
.quote-strip-top .quote-strip {
    margin: 24px 0 8px;
}

/* the one large orange mark, in its own column, level with the first line of the
   quote: it names the line as a quotation without taking a line of its own on a
   wide screen */
.quote-strip__mark {
    grid-area: mark;
    font-size: 54px;
    font-weight: 700;
    line-height: 0.85;
    color: var(--accent, #F3624B);
}

/* the quote: the site's body text, in italic, at the size of the pages' reading
   text - the reason the band is noticed at all */
.quote-strip__quote {
    grid-area: quote;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--brand-navy, #172350);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.quote-strip__by {
    grid-area: by;
    margin-top: 8px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--grey-700, #495064);
    overflow-wrap: break-word;
}

/* a testimonial with no name leaves the byline empty: no stray dash */
.quote-strip__by:empty {
    display: none;
}

/* the text link: the same quiet accent link the site's sections use, never a
   filled button - it must not pull the eye off the page's content. The selector
   carries the panel it sits in, so it is more specific than the site's own
   "[body] a { text-decoration: underline }" and the link reads as a quiet call
   to action, with the line only on hover. It sits level with the middle of the
   quote on a wide screen. */
.quote-strip a.quote-strip__link {
    grid-area: link;
    align-self: center;
    justify-self: end;
    display: inline-block;
    color: var(--accent-strong, #CE4430);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.quote-strip a.quote-strip__link:hover,
.quote-strip a.quote-strip__link:focus {
    color: var(--brand-navy, #172350);
    text-decoration: underline;
}

.quote-strip a.quote-strip__link:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 3px;
}

.quote-strip__icon {
    font-size: 15px;
    line-height: 1;
    vertical-align: -1px;
}

/* phones: the mark above the quote in a narrower size, the quote a step smaller,
   and the link under the byline, left aligned, wrapping if it must - the band
   stays a compact block at the top of the page */
@media (max-width: 768px) {
    .quote-strip {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "mark"
            "quote"
            "by"
            "link";
        min-height: 168px;
        margin: 22px 0 24px;
        padding: 16px 18px 18px;
    }

    .quote-strip__mark {
        font-size: 40px;
        line-height: 0.9;
        margin-bottom: 4px;
    }

    .quote-strip__quote {
        font-size: 15.5px;
        line-height: 1.55;
    }

    .quote-strip a.quote-strip__link {
        align-self: start;
        justify-self: start;
        margin-top: 12px;
        white-space: normal;
    }

    .quote-strip-top .quote-strip {
        margin: 18px 0 6px;
    }
}

/* ==================================================================
   Event reminders on your phone (web push) - the small control that turns the
   notifications on and off.

   THE MARKUP is not written by any page: both places that carry the control
   hold one empty element with data-rx-push-card on it - the compact card
   ("card") under the page heading of /events, and one line ("line") under the
   "Registration confirmed" answer - and rxPushHtml()/rxPushPaint() in
   src/index.js draw the control into it. That is why the styles are here, in
   the site-wide sheet, and not in one view's own <style>: the same control is
   drawn in two different views, and in one of them it is written into the page
   after the view rendered.

   THE EMPTY ELEMENT DRAWS NOTHING. Where the control cannot work at all - a
   browser without service workers or push, a page that is not on https - the
   element is left empty, and an empty one is display:none: no box, no gap, and
   the page is exactly the page it was before this feature existed.

   THE LOOK is the site's own: the navy type, the orange hairline the site's
   cards carry down their left edge, the quiet grey panel the newsletter strip
   and the quote band use, and the one primary button colour (--accent-strong,
   the action orange dark enough for white text). No shadow, no animation.
   ================================================================== */

/* the empty hook of either place: nothing to draw, so nothing is drawn */
[data-rx-push-card]:empty {
    display: none;
}

/* the compact card: the words on the left, the button (or the state) on the
   right, both on one line on a desktop and stacked on a phone */
.rx-push-card {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 14px 18px;
    border: 1px solid var(--grey-300, #D8DCE8);
    border-left: 5px solid var(--accent, #F3624B);
    border-radius: 8px;
    background: var(--grey-50, #f4f5f7);
    color: var(--brand-navy, #172350);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
}

.rx-push-card__text {
    flex: 1 1 260px;
    min-width: 0;
}

.rx-push-card__head {
    color: var(--brand-navy, #172350);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.rx-push-card__line {
    margin-top: 2px;
    color: var(--grey-700, #495064);
    font-size: 13.5px;
    line-height: 1.45;
}

.rx-push-card__action {
    flex: 0 0 auto;
    min-width: 0;
}

/* the one button of the control */
.rx-push-btn {
    display: inline-block;
    box-sizing: border-box;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--accent-strong, #CE4430);
    color: var(--white, #ffffff);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.rx-push-btn:hover,
.rx-push-btn:focus {
    background: var(--accent-strong-hover, #B93D2A);
    color: var(--white, #ffffff);
}

.rx-push-btn:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 2px;
}

/* a request on its way: the button cannot be pressed again, and it never stays
   in this state once the answer is in */
.rx-push-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* "Reminders are on for this phone", and the plain-text way back off */
.rx-push-on {
    color: var(--brand-navy, #172350);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
}

.rx-push-off {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-strong, #CE4430);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
}

.rx-push-off:hover,
.rx-push-off:focus {
    color: var(--brand-navy, #172350);
}

.rx-push-off:focus-visible {
    outline: 2px solid var(--brand-navy, #172350);
    outline-offset: 2px;
}

/* the two places where the button is not the answer: the iPhone instructions,
   and notifications blocked in the browser's own settings */
.rx-push-note {
    max-width: 460px;
    color: var(--grey-700, #495064);
    font-size: 13px;
    line-height: 1.45;
}

/* the one line of feedback, under the whole control */
.rx-push-card__msg {
    flex: 1 1 100%;
    color: #B3261E;
    font-size: 12.5px;
    line-height: 1.45;
}

.rx-push-card__msg:empty {
    display: none;
}

/* ------------------------------------------------------------------
   The same control as ONE LINE under the "Registration confirmed" answer: no
   panel of its own (it stands in the answer's own green box), the prompt on the
   left and the button on the right.
   ------------------------------------------------------------------ */
.rx-push-card--line {
    gap: 8px 14px;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.rx-push-card--line .rx-push-card__text {
    flex: 0 1 auto;
}

.rx-push-card--line .rx-push-card__head {
    font-size: 14.5px;
    font-weight: 600;
}

@media (max-width: 768px) {
    /* a phone: the words, then the button full width under them */
    .rx-push-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .rx-push-card__text {
        flex: 0 1 auto;
    }

    .rx-push-card__action {
        flex: 0 0 auto;
    }

    .rx-push-btn {
        width: 100%;
        height: 44px;
        white-space: normal;
    }

    .rx-push-off {
        display: inline-block;
        margin: 4px 0 0;
    }

    .rx-push-card--line {
        padding: 0;
    }
}

/* ==================================================================
   "Install app" - one small card, in the reminders card's own look.

   THE MARKUP is not written by any page either: the two places that carry it
   (the events page, just above the reminders card, and the home page, in the
   same place of its events block) hold one empty element with
   data-rx-install-card on it, and rxInstallHtml()/rxInstallPaint() in
   src/index.js draw the card into it.

   THE EMPTY ELEMENT DRAWS NOTHING: a browser with no install of its own, and a
   page already running from the installed app, leave it empty - and an empty
   one is display:none, so there is no card, no gap and no flash of a card
   before that is worked out.

   THE LOOK is the one card above, unchanged: .rx-push-card (the rounded panel,
   the soft grey background, the navy type, the red hairline down the left edge)
   and .rx-push-btn as its one button.

   THE LAYOUT IS ONE COLUMN at every width: the title, the intro line, the three
   numbered steps, then the button under them. The reminders card is a two-part
   flex row (its words beside its button); this card is not, so it takes the
   panel from .rx-push-card and lays its own content out as a block. That is
   what keeps the steps whole on a phone: the text wraps inside its own line,
   nothing is pushed beside the button, and the button sits below the list with
   ordinary spacing instead of on top of it.
   ================================================================== */

/* the empty hook of either place: nothing to draw, so nothing is drawn */
[data-rx-install-card]:empty {
    display: none;
}

/* the card: the reminders panel, laid out as one column of its own content */
.rx-install-card {
    display: block;
}

/* the intro line: normal text, under the title */
.rx-install-card__intro {
    margin-top: 4px;
    color: var(--grey-700, #495064);
    font-size: 13.5px;
    line-height: 1.5;
}

/* the numbered steps: small text, one step per line, the device in bold navy */
.rx-install-card__steps {
    margin: 10px 0 0;
    padding: 0 0 0 20px;
    list-style: decimal outside;
    color: var(--grey-700, #495064);
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: normal;
}

.rx-install-card__steps li {
    margin: 0 0 3px;
    padding: 0;
    max-width: 100%;
}

.rx-install-card__steps li:last-child {
    margin-bottom: 0;
}

.rx-install-card__steps b {
    color: var(--brand-navy, #172350);
    font-weight: 700;
}

/* the button (and the line under it) below the list, never beside it */
.rx-install-card__action {
    margin-top: 12px;
}

/* the one line under the button: the browser has not offered its install
   prompt yet, so the card says where the browser's own menu keeps it */
.rx-install-card__msg {
    margin-top: 8px;
    max-width: 320px;
    color: var(--grey-700, #495064);
    font-size: 12.5px;
    line-height: 1.45;
}

.rx-install-card__msg:empty {
    display: none;
}

@media (max-width: 768px) {
    /* a phone: the card keeps the panel's 14px padding (the rule above), stays
       one column, and the button - full width, from .rx-push-btn - sits under
       the list with the same 12px the desktop has; the line under the button
       runs the width of that button */
    .rx-install-card__steps {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .rx-install-card__msg {
        max-width: none;
    }
}