/*
 * EML branding for the outward-facing portals.
 * ============================================
 *
 * WHAT THIS IS FOR
 *
 * The portals people outside EML sign in to — ctl. (CIVICUS staff, participants
 * and mentors) and clients. (other organisations) — inherit INSPINIA's teal
 * green, which is the admin theme rather than any EML brand. This repaints them
 * in EML's blue without touching the theme itself.
 *
 * WHY IT IS AN OVERLAY AND NOT AN EDIT TO style.css
 *
 * style.css carries the green in 92 places and is loaded by iput. as well, which
 * must not change. So this file is loaded AFTER it, by the portal layouts only,
 * and overrides the handful of classes the portals actually use: btn-primary
 * (42 uses), label-primary (11), progress-bar (12), text-navy (5).
 *
 * WHY EVERY RULE IS SCOPED TO .eml-portal
 *
 * Fourteen partials under resources/views/ctl/shared/ — the cohort map, the
 * charts, the file modal, the datatable — render on BOTH the portal and the CTL
 * admin screens. An unscoped override would repaint the admin area through them.
 * The body class is set only by the two portal layouts, so a shared partial
 * comes out green under iput. and blue in the portal with no branching anywhere.
 *
 * Removing this file and the body class returns both portals to stock INSPINIA.
 */

:root {
    /*
     * EML's own palette, taken from the public site's declaration at
     * public/web/assets/EML/style.css:2-8 rather than sampled by eye.
     */
    --eml-brand: #15a9e1;
    --eml-ink: #0f0f0f;
    --eml-muted: #6f6f6f;

    /*
     * THE SECOND BLUE IS NOT DECORATION.
     *
     * White text on #15a9e1 measures 2.69:1, which fails WCAG AA (4.5:1) — very
     * nearly as badly as the #1ab394 green it replaces, at 2.65:1. Repainting
     * with the bright blue alone would have carried a live readability fault
     * into a new colour rather than fixing it.
     *
     * #0f6fb6 is EML's own deeper blue and measures 5.29:1. Anything that puts
     * white text on a filled background uses THIS one; the bright blue is for
     * fills, accents and links on white.
     *
     * ctl.css reached the same conclusion once already, using a dark #1a7a5e
     * rather than the bright theme green.
     */
    --eml-brand-strong: #0f6fb6;
    --eml-brand-darker: #0d5e9b;   /* hover/active, one step down again */

    /* Tints, from the same public stylesheet. */
    --eml-tint: #eef7fb;
    --eml-tint-strong: #f1fbff;
}

/*
 * A NOTE ON `.eml-portal.top-navigation` — THE JOIN IS NOT A TYPO.
 *
 * The theme puts `top-navigation` on <body>, and the brand class goes on the
 * same element: <body class="top-navigation eml-portal">. So
 * `.eml-portal .top-navigation`, with a space, asks for a `.top-navigation`
 * INSIDE an `.eml-portal` — which does not exist, and every rule written that
 * way silently matched nothing.
 *
 * It cost a round of "why is this still green": the active item in a dropdown
 * kept the theme's colour because the only rule of mine that could have beaten
 * it was one of these, and it never applied. Joined, the selector both matches
 * and out-specifies the theme's own (0,5,1) against (0,4,1).
 */

/*
 * THE TOP BAR ON A LAPTOP.
 *
 * The bar wants 1379px at the theme's `padding: 15px 20px` (style.css:493):
 * 201 for the DDI mark, 780 for the six items, 184 for the search field and 214
 * for the account menu. A 1280 or 1366 laptop cannot give it that, so the
 * search and the account menu wrapped onto a second row and the bar stood 103px
 * tall instead of 53px. That predates the margins work - it is not something the
 * .container introduced - but it shows on the most common screen there is.
 *
 * Below 1400px the three widest pieces give a little back, which brings the row
 * to about 1224px and fits 1280 upwards. Above 1400px nothing changes and the
 * bar keeps the theme's exact spacing.
 *
 * Still wraps between 768px and 1280px. Fixing that properly means collapsing
 * the bar to the hamburger below 1280 rather than below 768, which is a real
 * change to how the navigation behaves and wants to be asked for rather than
 * assumed.
 */
@media (min-width: 768px) and (max-width: 1399px) {
    .eml-portal.top-navigation .nav > li > a {
        padding-left: 13px;
        padding-right: 13px;
    }

    .eml-portal .navbar-form .form-control {
        width: 140px;
    }

    .eml-portal .eml-navbar-brand img {
        height: 22px;
    }
}

/* ------------------------------------------------------------------ buttons */

.eml-portal .btn-primary,
.eml-portal .btn-primary:focus {
    background-color: var(--eml-brand-strong);
    border-color: var(--eml-brand-strong);
    color: #fff;
}

.eml-portal .btn-primary:hover,
.eml-portal .btn-primary:active,
.eml-portal .btn-primary.active,
.eml-portal .btn-primary:active:focus,
.eml-portal .open > .dropdown-toggle.btn-primary {
    background-color: var(--eml-brand-darker);
    border-color: var(--eml-brand-darker);
    color: #fff;
}

.eml-portal .btn-primary.disabled,
.eml-portal .btn-primary[disabled] {
    background-color: var(--eml-brand);
    border-color: var(--eml-brand);
    opacity: .55;
}

/* The outline variant sits on white, so it may use the bright blue. */
.eml-portal .btn-primary.btn-outline {
    color: var(--eml-brand-strong);
    background-color: transparent;
    border-color: var(--eml-brand-strong);
}

.eml-portal .btn-primary.btn-outline:hover {
    color: #fff;
    background-color: var(--eml-brand-strong);
}

/* --------------------------------------------------------- labels and badges */

/*
 * Filled, and small: the strong blue, or the text on them is unreadable at
 * 11px — which is exactly the case AA's 4.5:1 threshold exists for.
 */
.eml-portal .label-primary,
.eml-portal .badge-primary {
    background-color: var(--eml-brand-strong);
    color: #fff;
}

/* -------------------------------------------------------------------- links */

.eml-portal a {
    color: var(--eml-brand-strong);
}

.eml-portal a:hover,
.eml-portal a:focus {
    color: var(--eml-brand-darker);
}

/* The theme's own green text helper, wherever a portal screen uses it. */
.eml-portal .text-navy {
    color: var(--eml-brand-strong) !important;
}

/* ------------------------------------------------------------------ progress */

.eml-portal .progress-bar {
    background-color: var(--eml-brand-strong);
}

/* ------------------------------------------------------------ forms and focus */

.eml-portal .form-control:focus,
.eml-portal .single-line:focus {
    border-color: var(--eml-brand);
}

.eml-portal .has-success .form-control {
    border-color: var(--eml-brand-strong);
}

.eml-portal .has-success .control-label {
    color: var(--eml-brand-strong);
}

/*
 * The visible focus ring. Both portal layouts hardcode the green here; this
 * keeps the ring but in the brand, and it must stay clearly visible — it is the
 * only thing telling a keyboard user where they are.
 */
.eml-portal *:focus-visible,
.eml-portal .ctl-skip-link:focus {
    outline: 2px solid var(--eml-brand-strong) !important;
    outline-offset: 2px;
}

.eml-portal .ctl-skip-link {
    /* Off screen until a keyboard reaches it - here rather than in one
       layout's own styles, so every layout that has the link hides it. */
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    padding: 10px 16px;
    background: var(--eml-brand-strong);
    color: #fff;
}

.eml-portal .ctl-skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------- chrome */

/*
 * NAVIGATION AND HOVER.
 *
 * The theme turns a navigation item green on hover and on active
 * (style.css:497-508), which is the most-touched colour in the whole portal -
 * every item in the top bar, every time somebody moves the mouse across it. Left
 * alone it would have been the loudest remaining green on a page whose buttons
 * had all gone blue.
 */
.eml-portal.top-navigation .nav > li.active > a,
.eml-portal .nav > li.active > a {
    color: var(--eml-brand-strong);
}

.eml-portal.top-navigation .nav > li a:hover,
.eml-portal.top-navigation .nav > li a:focus,
.eml-portal .nav.navbar-right > li > a:hover,
.eml-portal .nav.navbar-right > li > a:focus,
.eml-portal .nav > li > a:hover,
.eml-portal .nav > li > a:focus {
    background: #fff;
    color: var(--eml-brand-strong);
}

/* An open dropdown in the top bar. */
.eml-portal.top-navigation .nav .open > a,
.eml-portal.top-navigation .nav .open > a:hover,
.eml-portal.top-navigation .nav .open > a:focus,
.eml-portal .nav .open > a,
.eml-portal .nav .open > a:hover,
.eml-portal .nav .open > a:focus {
    color: var(--eml-brand-strong);
}

/* Dropdown items, and the panel tool icons the portal uses 20 times. */
.eml-portal .dropdown-menu > li > a:hover,
.eml-portal .dropdown-menu > li > a:focus,
.eml-portal .ibox-tools a:hover,
.eml-portal .ibox-tools a:focus {
    color: var(--eml-brand-strong);
}

/*
 * THE ACTIVE ITEM INSIDE A DROPDOWN.
 *
 * Reported from the portal: open Progress, click Assessments, and the item
 * stays green. The rule above it only matched `.nav > li.active > a`, and the
 * active item here is not a child of .nav at all - the real chain is
 *
 *     ul.nav > li.dropdown.active > ul.dropdown-menu > li.active > a
 *
 * so nothing I had written could ever have reached it. Found by asking the
 * browser which selector chain was painting the element, rather than by reading
 * the theme and guessing again.
 */
/*
 * AND IT HAS TO OUT-SPECIFY THE THEME, which the first attempt did not.
 *
 * style.css paints it with
 *
 *     .top-navigation .navbar-nav .dropdown-menu > .active > a
 *
 * which is four classes and one element (0,4,1). A scoped-but-shorter selector
 * of my own, `.eml-portal .dropdown-menu > li.active > a`, is (0,3,2) — and
 * class count is compared before element count, so the theme won and the item
 * stayed green no matter that my rule loaded later.
 *
 * Mirroring their selector and adding the scope class makes it (0,5,1). Found by
 * listing every rule that matched the element and reading the specificity, not
 * by adding !important until something changed.
 */
.eml-portal.top-navigation .navbar-nav .dropdown-menu > .active > a,
.eml-portal.top-navigation .navbar-nav .dropdown-menu > .active > a:hover,
.eml-portal.top-navigation .navbar-nav .dropdown-menu > .active > a:focus,
.eml-portal.top-navigation .navbar-nav .dropdown-menu > .active > a i,
.eml-portal .dropdown-menu > li.active > a,
.eml-portal .dropdown-menu > .active > a {
    color: var(--eml-brand-strong);
}

/*
 * The map's own zoom buttons. jVectorMap draws them itself, so they are not in
 * any Blade file and grepping the views would never have found them.
 */
.eml-portal .jvectormap-zoomin,
.eml-portal .jvectormap-zoomout {
    background: var(--eml-brand-strong);
}

/* The theme's link-styled buttons — used in the submissions and support lists. */
.eml-portal .btn-link:hover,
.eml-portal .btn-link:focus,
.eml-portal .btn-link:active {
    color: var(--eml-brand-darker);
}

/* File tiles, on the documents screen. */
.eml-portal .file-list li a:hover,
.eml-portal .file-box a:hover .file-name,
.eml-portal .ctl-file-grid .file:hover .ctl-file-title {
    color: var(--eml-brand-strong);
}

/*
 * A row you can click. The theme's table hover is a neutral grey, which is
 * right — this only tints the brand-coloured accent inside it, so a hovered row
 * still reads as a row rather than as a selection.
 */
.eml-portal .table-hover > tbody > tr:hover a {
    color: var(--eml-brand-darker);
}

/* A quiet brand edge along the top of the page, as the EML site has. */
.eml-portal .navbar-static-top {
    border-bottom: 3px solid var(--eml-brand);
}

/* --------------------------------------------------------------- sign-in page */

/*
 * ON A PHONE, THE FORM COMES FIRST.
 *
 * The two-column sign-in stacks explanation-then-form below 992px, so somebody
 * on a phone scrolled past three paragraphs about the programme to reach the
 * thing they opened the page to do. Reversing the stack puts the form at the
 * top where it belongs; the explanation is still directly under it for the
 * person who was sent the link months ago and has forgotten what it was for.
 *
 * Only below the breakpoint - side by side, reading order is left to right and
 * the explanation is meant to be the left of the two.
 */
@media (max-width: 991px) {
    .eml-portal .loginColumns > .row {
        display: flex;
        flex-direction: column-reverse;
    }
}

/*
 * THE BRAND BLOCK.
 *
 * This was the green everybody could see, and I missed it: the theme fills the
 * whole top-left block with #1ab394 (style.css:523) and the menu button with it
 * too (:552). Neither was in the list of classes I overrode, because I wrote
 * that list from reasoning rather than from measuring the rendered page.
 *
 * WHITE, not the brand blue. The DDI mark is black text on transparent, so a
 * coloured block behind it would be as unreadable as the green was — the point
 * of putting a logo here is that somebody can read it.
 */
.eml-portal.top-navigation .navbar-brand,
.eml-portal .navbar-brand {
    background: #fff;
    padding: 10px 20px;
}

.eml-portal.top-navigation .navbar-brand:hover,
.eml-portal.top-navigation .navbar-brand:focus {
    background: #fff;
}

/* The menu button's icon is white, so this one takes the strong blue. */
.eml-portal .navbar-toggle {
    background-color: var(--eml-brand-strong);
    color: #fff;
}

.eml-portal .navbar-toggle:hover,
.eml-portal .navbar-toggle:focus {
    background-color: var(--eml-brand-darker);
}

/*
 * The mark itself. INSPINIA's .navbar-brand has padding sized for a line of
 * text, so the image is centred against it rather than allowed to set the
 * height of the bar.
 */
.eml-portal .eml-navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eml-portal .eml-navbar-brand img {
    /*
     * DDI is 6.8:1, so height is what governs — at 26px it lands around 175px
     * wide, which is the widest thing in the header and the first to break the
     * row on a narrow screen.
     */
    height: 26px;
    width: auto;
}

@media (max-width: 767px) {
    /* Give the row back some space before it wraps. */
    .eml-portal .eml-navbar-brand img { height: 20px; }
    .eml-portal.top-navigation .navbar-brand,
    .eml-portal .navbar-brand { padding: 12px 12px; }
}

/* ------------------------------------------------------------- the logo strip */

/*
 * SIZED BY HEIGHT, NEVER BY WIDTH.
 *
 * The three marks have wildly different proportions — CIVICUS is square (1:1),
 * DDI is 6.8:1, EML about 2.7:1. Constraining width would render one of them
 * enormous and another a postage stamp; constraining height lets each find its
 * own width and keeps the optical weight even.
 */
.eml-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.eml-logos img {
    height: 30px;
    width: auto;
    max-width: 100%;
    /* Slightly held back, so the partnership reads as a footnote rather than
       competing with the page's own content. */
    opacity: .75;
    transition: opacity .15s ease-in-out;
}

.eml-logos img:hover {
    opacity: 1;
}

/* Each mark is a link to its organisation; keep the link the size of the
   image, so no underline or text baseline adds a gap beneath it. */
.eml-logos a {
    display: inline-flex;
    line-height: 0;
    border-radius: 4px;
}

.eml-logos a:hover img,
.eml-logos a:focus img {
    opacity: 1;
}

/* The sign-in lockup is the page's brand, so it is bigger and not held back. */
.eml-logos--lockup img {
    height: 42px;
    opacity: 1;
}

/*
 * Bottom LEFT on the sign-in pages, not centred. .eml-logos centres by default
 * because that is right for the footer strip; the lockup overrides it.
 */
.eml-logos--lockup {
    justify-content: flex-start;
}

/*
 * DDI above the sign-in heading, at the full width of its column.
 *
 * Sized by WIDTH here, which is the one place in this file that breaks the
 * "always by height" rule the partner marks follow - and deliberately. Those
 * two sit in a row together, where a shared width would render a 1:1 mark and a
 * 6.8:1 mark at wildly different visual weights. This one is alone above a
 * heading and is meant to span the column, so width is the dimension that
 * matters and the height follows from the artwork's own 6.8:1.
 */
.eml-portal .ctl-auth-ddi {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 18px;
}

/*
 * THE BAND UNDER THE SIGN-IN PAGES.
 *
 * The theme's three auth wrappers are different widths, and the marks and the
 * copyright have to sit inside whichever one the page used or they start at the
 * container's edge while the writing starts 190px in. The row/col inside each
 * band is kept identical to the page's own, so the -15/+15 cancel the same way
 * and the left edges land on the same pixel rather than nearly.
 */
.eml-portal .ctl-auth-band {
    margin: 0 auto;
}

.eml-portal .ctl-auth-band--login { max-width: 800px; padding: 0 20px; }   /* .loginColumns */
.eml-portal .ctl-auth-band--password { max-width: 460px; padding: 0 20px; } /* .passwordBox */
.eml-portal .ctl-auth-band--middle { max-width: 400px; padding: 0; }        /* .middle-box */

@media (max-width: 480px) {
    /* A 6.8:1 logo is what breaks this row first. */
    .eml-logos { gap: 14px 18px; }
    .eml-logos img { height: 24px; }
    .eml-logos--lockup img { height: 30px; }
}

/*
 * IN THE FOOTER THAT ALREADY EXISTS.
 *
 * The logos first went into a strip of their own below the portal's footer,
 * which gave every page a second footer under the one it had. They now sit
 * inside it, on the right, with the copyright and help link on the left - which
 * is also where the branding guide puts them.
 *
 * The theme's .footer is a fixed 40px tall band sized for one line of text, so
 * it needs room for a 24px mark and its padding.
 */
/*
 * The flex row is on the .container INSIDE the footer, not on the footer
 * itself: the band has to stay full width so its top border runs edge to edge,
 * while the text and the marks sit within the same 1170px as everything above.
 */
.eml-portal .eml-footer > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    height: auto;
    min-height: 46px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Float is how the theme would have placed this; flex already has. */
.eml-portal .eml-footer .eml-footer-logos {
    float: none;
}

.eml-portal .eml-footer .eml-logos img {
    height: 24px;
}

@media (max-width: 480px) {
    /* Stack rather than crush, and put the marks under the line of text. */
    .eml-portal .eml-footer > .container {
        justify-content: center;
        text-align: center;
    }
}

/* The external portal has no footer of its own, so there this IS the footer. */
.eml-portal .eml-partner-strip {
    border-top: 1px solid #e7eaec;
    padding: 18px 0 22px;
    margin-top: 24px;
}

/* ==========================================================================
   CENTRED MARKS ON THE NARROW AUTH PAGES
   ========================================================================== */

/*
 * The two-factor, invitation and recovery-code pages use the theme's
 * .middle-box, which is a 400px column centred in the viewport. A left-aligned
 * lockup under a centred card reads as a mistake, so on those pages the marks
 * and the copyright follow the layout they are sitting in.
 *
 * Tied to the band rather than to a list of page names: any page that later
 * declares the middle band gets this without anybody remembering to.
 */
.eml-portal .ctl-auth-band--middle .eml-logos--lockup {
    justify-content: center;
}

.eml-portal .ctl-auth-band--middle .ctl-auth-footer {
    text-align: center;
}

/* ==========================================================================
   DARK MODE
   ==========================================================================

   HOW IT IS SWITCHED

   `data-theme` on <html>, set before the first paint by the inline script in
   partials/theme-boot, and ALWAYS to an explicit "light" or "dark" - never left
   absent to mean "ask the operating system".

   That is deliberate. Every rule below is scoped to [data-theme="dark"], so an
   absent attribute renders light no matter what the operating system prefers.
   Leaving it absent as a third state would have meant a reader on a dark desktop
   getting a light page with a toggle showing the "switch to light" icon. The
   script reads prefers-color-scheme once, as the DEFAULT, and writes the answer
   down; from then on the attribute is the single source of truth.

   WHY THE RULES ARE SCOPED TO BOTH THE ATTRIBUTE AND .eml-portal

   Every rule below needs the attribute AND the portal class. The attribute
   alone would repaint anything sharing the page; the class alone would repaint
   the portal in light mode. Since iput. never carries .eml-portal and never
   loads this file, the admin area cannot go dark by accident - the same
   boundary the blue relies on, enforced the same way.

   WHY LIGHT MODE IS NOT TOUCHED

   Light already comes from style.css. Nothing below applies without the dark
   attribute, so switching this feature off is deleting the attribute - the
   light theme is not reimplemented in terms of tokens and so cannot drift.
   -------------------------------------------------------------------------- */

:root[data-theme="dark"] {
    /*
     * Surfaces, from the back of the page forwards. Three levels rather than
     * two: a card on the page and a control inside the card both need to be
     * distinguishable, and on a dark ground that separation has to come from
     * lightness because there are no shadows to speak of.
     */
    --eml-page: #15171a;         /* the ground, behind everything */
    --eml-surface: #1e2125;      /* cards, the bar, the footer */
    --eml-surface-raised: #262a2f; /* inputs, buttons, table stripes */

    --eml-text: #c6ccd2;
    --eml-heading: #eef1f4;
    --eml-muted-text: #8d959d;
    --eml-border: #31363c;

    /*
     * THE LINK COLOUR CHANGES IN DARK MODE, AND IT HAS TO.
     *
     * #0f6fb6 is the blue chosen for white text on a filled button, and it is
     * dark - which is the whole point of it in light mode. As link text on a
     * #15171a ground it measures about 2.3:1 and is close to unreadable. The
     * lighter blue is the same hue family opened up until it clears AA against
     * the dark surface. Light mode keeps #0f6fb6; the two are not
     * interchangeable and neither one works in both places.
     */
    --eml-link: #5cbcea;
}

/* ---------------------------------------------------------------- the ground */

:root[data-theme="dark"] .eml-portal,
:root[data-theme="dark"] .eml-portal.gray-bg {
    background-color: var(--eml-page);
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal #page-wrapper,
:root[data-theme="dark"] .eml-portal .wrapper-content,
:root[data-theme="dark"] .eml-portal .gray-bg {
    background-color: var(--eml-page);
}

/* ---------------------------------------------------------------- surfaces */

:root[data-theme="dark"] .eml-portal .white-bg,
:root[data-theme="dark"] .eml-portal .ibox,
:root[data-theme="dark"] .eml-portal .ibox-title,
:root[data-theme="dark"] .eml-portal .ibox-content,
:root[data-theme="dark"] .eml-portal .panel,
:root[data-theme="dark"] .eml-portal .panel-body,
:root[data-theme="dark"] .eml-portal .modal-content,
:root[data-theme="dark"] .eml-portal .dropdown-menu,
:root[data-theme="dark"] .eml-portal .navbar-static-top,
:root[data-theme="dark"] .eml-portal .footer,
:root[data-theme="dark"] .eml-portal .file-box,
:root[data-theme="dark"] .eml-portal .file,
:root[data-theme="dark"] .eml-portal .well {
    background-color: var(--eml-surface);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

/* The theme draws most of its structure with these two greys. */
:root[data-theme="dark"] .eml-portal .border-bottom,
:root[data-theme="dark"] .eml-portal .ibox-title,
:root[data-theme="dark"] .eml-portal .ibox-content,
:root[data-theme="dark"] .eml-portal .hr-line-dashed,
:root[data-theme="dark"] .eml-portal .file-box,
:root[data-theme="dark"] .eml-portal .footer {
    border-color: var(--eml-border);
}

:root[data-theme="dark"] .eml-portal .hr-line-dashed {
    border-top-color: var(--eml-border);
    background-color: transparent;
}

/* ------------------------------------------------------------------- type */

:root[data-theme="dark"] .eml-portal h1,
:root[data-theme="dark"] .eml-portal h2,
:root[data-theme="dark"] .eml-portal h3,
:root[data-theme="dark"] .eml-portal h4,
:root[data-theme="dark"] .eml-portal h5,
:root[data-theme="dark"] .eml-portal strong,
:root[data-theme="dark"] .eml-portal .ibox-title h5 {
    color: var(--eml-heading);
}

:root[data-theme="dark"] .eml-portal .text-muted,
:root[data-theme="dark"] .eml-portal small,
:root[data-theme="dark"] .eml-portal .help-block,
:root[data-theme="dark"] .eml-portal .breadcrumb,
:root[data-theme="dark"] .eml-portal .breadcrumb > .active {
    color: var(--eml-muted-text);
}

:root[data-theme="dark"] .eml-portal a,
:root[data-theme="dark"] .eml-portal .ctl-tree-link,
:root[data-theme="dark"] .eml-portal .breadcrumb a {
    color: var(--eml-link);
}

:root[data-theme="dark"] .eml-portal a:hover,
:root[data-theme="dark"] .eml-portal a:focus {
    color: #8fd2f2;
}

/* --------------------------------------------------------- the top bar */

/*
 * THE BRAND BLOCK STAYS WHITE, ON PURPOSE.
 *
 * The DDI mark is black type on transparency. On a dark bar it would be a black
 * rectangle - exactly the failure the white EML wordmark has on a light footer,
 * in the other direction. Keeping a white plate behind it preserves the artwork
 * as drawn instead of inverting a partner's logo, which is not ours to alter.
 */
:root[data-theme="dark"] .eml-portal .navbar-brand,
:root[data-theme="dark"] .eml-portal.top-navigation .navbar-brand {
    background: #fff;
}

:root[data-theme="dark"] .eml-portal .nav > li > a,
:root[data-theme="dark"] .eml-portal.top-navigation .nav > li > a {
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal .nav > li > a:hover,
:root[data-theme="dark"] .eml-portal .nav > li > a:focus,
:root[data-theme="dark"] .eml-portal.top-navigation .nav > li a:hover,
:root[data-theme="dark"] .eml-portal.top-navigation .nav > li a:focus {
    background: var(--eml-surface-raised);
    color: var(--eml-link);
}

:root[data-theme="dark"] .eml-portal .nav > li.active > a,
:root[data-theme="dark"] .eml-portal.top-navigation .nav > li.active > a,
:root[data-theme="dark"] .eml-portal.top-navigation .navbar-nav .dropdown-menu > .active > a,
:root[data-theme="dark"] .eml-portal .dropdown-menu > .active > a {
    color: var(--eml-link);
    background: transparent;
}

:root[data-theme="dark"] .eml-portal .dropdown-menu > li > a {
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal .dropdown-menu > li > a:hover,
:root[data-theme="dark"] .eml-portal .dropdown-menu > li > a:focus {
    background: var(--eml-surface-raised);
    color: var(--eml-link);
}

:root[data-theme="dark"] .eml-portal .dropdown-menu .divider {
    background-color: var(--eml-border);
}

/* ------------------------------------------------------------- controls */

:root[data-theme="dark"] .eml-portal .form-control,
:root[data-theme="dark"] .eml-portal select.form-control,
:root[data-theme="dark"] .eml-portal textarea.form-control,
:root[data-theme="dark"] .eml-portal .input-group-addon,
:root[data-theme="dark"] .eml-portal .btn-white {
    background-color: var(--eml-surface-raised);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal .form-control::placeholder {
    color: var(--eml-muted-text);
}

:root[data-theme="dark"] .eml-portal .btn-white:hover,
:root[data-theme="dark"] .eml-portal .btn-white:focus {
    background-color: #2f343a;
    color: var(--eml-heading);
}

/* The filled brand button keeps its blue - it carries white text either way. */

/* --------------------------------------------------------------- tables */

:root[data-theme="dark"] .eml-portal .table,
:root[data-theme="dark"] .eml-portal .table > thead > tr > th,
:root[data-theme="dark"] .eml-portal .table > tbody > tr > td,
:root[data-theme="dark"] .eml-portal .table > tbody > tr > th {
    color: var(--eml-text);
    border-color: var(--eml-border);
}

:root[data-theme="dark"] .eml-portal .table-striped > tbody > tr:nth-of-type(odd),
:root[data-theme="dark"] .eml-portal .table-hover > tbody > tr:hover {
    background-color: var(--eml-surface-raised);
}

/* ------------------------------------------------- the theme's own pickers */

:root[data-theme="dark"] .eml-portal .datepicker,
:root[data-theme="dark"] .datepicker.dropdown-menu {
    background-color: var(--eml-surface);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

:root[data-theme="dark"] .datepicker table tr td,
:root[data-theme="dark"] .datepicker table tr th {
    color: var(--eml-text);
}

:root[data-theme="dark"] .datepicker table tr td.day:hover,
:root[data-theme="dark"] .datepicker table tr td.today {
    background: var(--eml-surface-raised);
    color: var(--eml-heading);
}

:root[data-theme="dark"] .datepicker table tr td.old,
:root[data-theme="dark"] .datepicker table tr td.new {
    color: var(--eml-muted-text);
}

/* ------------------------------------------------------------ the marks */

/*
 * A LIGHT PLATE BEHIND THE PARTNER MARKS.
 *
 * CIVICUS is drawn with dark type and the EML fingerprint is mid-blue on
 * transparency, so both lose their edges against a dark footer - CIVICUS's
 * wordmark disappears outright.
 *
 * The plate is used rather than a CSS filter on purpose: invert() would recolour
 * somebody else's logo, and a partner's mark is not ours to alter. This leaves
 * the artwork exactly as drawn and changes only what is behind it.
 */
:root[data-theme="dark"] .eml-portal .eml-logos img {
    background: #fff;
    border-radius: 4px;
    padding: 4px 6px;
    opacity: 1;
}

/* ------------------------------------------------------------ the toggle */

.ctl-theme-toggle {
    cursor: pointer;
    background: none;
    border: 0;
    color: inherit;
    line-height: 1;
}

/*
 * In the bar, matched to the padding of the nav links either side of it so the
 * row does not develop a step where the button sits. The icon is a shade larger
 * than the body text because it is carrying the whole meaning of the control -
 * there is no word beside it, the label is for screen readers only.
 */
.eml-portal.top-navigation .ctl-theme-toggle--nav {
    padding: 15px 14px;
    font-size: 15px;
    color: #676a6c;
}

.eml-portal.top-navigation .ctl-theme-toggle--nav:hover,
.eml-portal.top-navigation .ctl-theme-toggle--nav:focus {
    color: var(--eml-brand-strong);
}

:root[data-theme="dark"] .eml-portal.top-navigation .ctl-theme-toggle--nav {
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal.top-navigation .ctl-theme-toggle--nav:hover,
:root[data-theme="dark"] .eml-portal.top-navigation .ctl-theme-toggle--nav:focus {
    color: var(--eml-link);
}

/* The bar is a flex row of <li>; this one holds a button rather than a link. */
.eml-portal .ctl-theme-toggle-item {
    display: inline-block;
}

/* On the sign-in pages there is no bar, so the control sits over the page. */
.eml-portal .ctl-auth-theme-switch {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 200;
}

.eml-portal .ctl-theme-toggle--plain {
    padding: 8px 10px;
    font-size: 16px;
    color: #9aa0a6;
}

.eml-portal .ctl-theme-toggle--plain:hover,
.eml-portal .ctl-theme-toggle--plain:focus {
    color: var(--eml-brand-strong);
}

:root[data-theme="dark"] .eml-portal .ctl-theme-toggle--plain {
    color: var(--eml-muted-text);
}

:root[data-theme="dark"] .eml-portal .ctl-theme-toggle--plain:hover,
:root[data-theme="dark"] .eml-portal .ctl-theme-toggle--plain:focus {
    color: var(--eml-link);
}

/*
 * One control, two icons, and only one of them is ever in the accessibility
 * tree: the sun shows in dark mode (press it to go light) and the moon in
 * light. Swapped with CSS rather than JavaScript so the correct one is right on
 * the first paint - the same reason the attribute itself is set in <head>.
 */
.eml-portal .ctl-theme-toggle .ctl-theme-sun { display: none; }
:root[data-theme="dark"] .eml-portal .ctl-theme-toggle .ctl-theme-sun { display: inline-block; }
:root[data-theme="dark"] .eml-portal .ctl-theme-toggle .ctl-theme-moon { display: none; }

/* ------------------------------------------- surfaces the first sweep missed */

/*
 * Three whites that are invisible in light mode and glaring in dark, which is
 * exactly the sort of thing only a measurement finds:
 *
 *   .top-navigation .nav > li.active   #fff   style.css:502
 *   .breadcrumb                        #fff   style.css:3700
 *   .file-name                         #f8f8f8
 *
 * The first two are white-on-white where they sit, so nobody has ever seen
 * them. On a dark bar the active item became a white block behind the current
 * page's name, and the breadcrumb a white bar 750px wide under the heading.
 */
:root[data-theme="dark"] .eml-portal.top-navigation .nav > li.active,
:root[data-theme="dark"] .eml-portal .nav > li.active,
:root[data-theme="dark"] .eml-portal .breadcrumb {
    background: transparent;
}

/* The caption under a file tile - a genuine step up from the tile behind it,
   so it takes the raised surface rather than going flat. */
:root[data-theme="dark"] .eml-portal .file-name {
    background-color: var(--eml-surface-raised);
    border-top-color: var(--eml-border);
    color: var(--eml-text);
}

/* ------------------------------------------- shared partials, in dark mode */

/*
 * These four live in resources/views/ctl/shared/, which renders on the CTL
 * ADMIN screens as well as in the portal. They are repainted from here rather
 * than from the partials themselves for the same reason the map's accent colour
 * is read at runtime: the admin side has neither the attribute nor the class,
 * so it cannot be reached by any of this, and the partials stay free of
 * anything that would resolve to nothing there.
 */
:root[data-theme="dark"] .eml-portal .ctl-map-clock {
    background: var(--eml-surface-raised);
    color: var(--eml-text);
}

:root[data-theme="dark"] .eml-portal .ctl-map-detail {
    background: var(--eml-surface-raised);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

/* The unfilled part of a meter. #f5f5f5 is nearly white and read as a filled
   bar on a dark card - the opposite of what it means. */
:root[data-theme="dark"] .eml-portal .progress {
    background-color: var(--eml-surface-raised);
}

/* The theme's neutral label is a pale grey chip carrying dark text; inverted so
   it stays a chip rather than becoming a light block. */
:root[data-theme="dark"] .eml-portal .label-default,
:root[data-theme="dark"] .eml-portal .badge-default {
    background-color: var(--eml-surface-raised);
    color: var(--eml-text);
}

/* The theme's mail-box idiom, which the announcements list is built on. */
:root[data-theme="dark"] .eml-portal .mail-box,
:root[data-theme="dark"] .eml-portal .mail-box-header {
    background-color: var(--eml-surface);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

/*
 * A PLATE UNDER DDI ON THE SIGN-IN PAGE, IN DARK MODE.
 *
 * Insurance, not decoration. ddi.png currently ships with an OPAQUE white
 * background - sampled, not assumed - so the black wordmark happens to stay
 * legible on a dark page without any help. That is luck: the day somebody
 * replaces it with a properly transparent PNG, the mark turns into black type on
 * a near-black page and nothing in the codebase would have objected.
 *
 * Declaring the plate costs nothing today (white on white) and means the logo's
 * legibility no longer depends on a property of an asset nobody is tracking.
 * Same reasoning as the navbar brand block, which is white for this reason too.
 */
:root[data-theme="dark"] .eml-portal .ctl-auth-ddi {
    background: #fff;
}

/* ==========================================================================
   THE TOP BAR STAYS PUT WHEN THE PAGE SCROLLS
   ========================================================================== */

/*
 * WHY THERE IS AN overflow-x LINE HERE, AND WHY IT IS `clip` AND NOT `visible`.
 *
 * The theme sets `#wrapper { overflow-x: hidden }` (style.css:3438). Any value
 * of overflow other than `visible` or `clip` makes that element a scroll
 * container, and a sticky descendant sticks to its nearest scroll container
 * rather than to the viewport. #wrapper is exactly as tall as its contents, so
 * the bar would have had nothing to stick against and `position: sticky` would
 * have done nothing at all - no error, no warning, just an ordinary bar that
 * scrolls away.
 *
 * `clip` is the fix rather than `visible`: it still prevents sideways scrolling
 * from anything wide, which is what the theme wanted the line for, but it does
 * NOT establish a scroll container. A browser too old to know `clip` discards
 * this declaration and keeps `hidden`, so it loses the sticky bar and nothing
 * else - which is the right way round for a convenience.
 */
.eml-portal #wrapper {
    overflow-x: clip;
}

.eml-portal.top-navigation #page-wrapper > .row.border-bottom.white-bg {
    position: sticky;
    top: 0;
    /*
     * Below Bootstrap's modal (1050) and its backdrop (1040) on purpose: a bar
     * floating over an open dialog would be worse than one that scrolls. 1030 is
     * the theme's own value for a fixed navbar, so anything already written to
     * sit above or below the navigation keeps working.
     */
    z-index: 1030;
    background: #fff;
}

/*
 * A shadow only once it has something underneath it.
 *
 * At rest the bar already has its border and a shadow would be noise; once the
 * page has moved, the shadow is what separates a floating bar from the content
 * sliding beneath it. There is no CSS for "is currently stuck", so this is a
 * class the page adds on scroll.
 */
.eml-portal .navbar-static-top,
.eml-portal.top-navigation #page-wrapper > .row.border-bottom.white-bg {
    transition: box-shadow .15s ease-in-out;
}

.eml-portal.top-navigation #page-wrapper > .row.border-bottom.white-bg.is-stuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

:root[data-theme="dark"] .eml-portal.top-navigation #page-wrapper > .row.border-bottom.white-bg {
    background: var(--eml-surface);
}

:root[data-theme="dark"] .eml-portal.top-navigation #page-wrapper > .row.border-bottom.white-bg.is-stuck {
    /* A light shadow is invisible on a dark ground, so the separation comes
       from a lighter edge instead. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------- panels the theme left white

   FOUND BY LOOKING AT THE PAGE, NOT BY READING THE CSS.

   The dark rules above cover the page, the cards and the controls, and they
   were written against the screens that existed when dark mode was added. These
   five classes come from the INSPINIA stylesheet with a white or near-white
   background of their own and were never darkened, so in dark mode they kept a
   light panel while the text inside them turned light - which is the worst of
   both: pale grey writing on white.

   On the portal dashboard that was the mentor card, the "Needs your attention"
   rows and the "Getting started" checklist: three of the first things a
   participant sees, effectively unreadable.

   The audit for this is mechanical and worth repeating after any screen is
   added: list the classes the base theme gives a light background, intersect
   with the classes the portal views actually use, and subtract the ones the
   block above already covers. Anything left is this bug waiting to happen.
   ---------------------------------------------------------------------------- */

:root[data-theme="dark"] .eml-portal .contact-box,
:root[data-theme="dark"] .eml-portal .todo-list li,
:root[data-theme="dark"] .eml-portal .agile-list li,
:root[data-theme="dark"] .eml-portal .small-list li,
:root[data-theme="dark"] .eml-portal .list-group-item,
:root[data-theme="dark"] .eml-portal .faq-item,
:root[data-theme="dark"] .eml-portal .faq-answer,
:root[data-theme="dark"] .eml-portal .well,
:root[data-theme="dark"] .eml-portal .media {
    background-color: var(--eml-surface-raised);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

/* The headings inside them, which the theme paints a dark grey that only works
   on white. */
:root[data-theme="dark"] .eml-portal .contact-box h1,
:root[data-theme="dark"] .eml-portal .contact-box h2,
:root[data-theme="dark"] .eml-portal .contact-box h3,
:root[data-theme="dark"] .eml-portal .contact-box h4,
:root[data-theme="dark"] .eml-portal .contact-box strong,
:root[data-theme="dark"] .eml-portal .todo-list li strong,
:root[data-theme="dark"] .eml-portal .agile-list li strong,
:root[data-theme="dark"] .eml-portal .list-group-item strong {
    color: var(--eml-heading);
}

/* A modal is rendered outside .eml-portal's subtree in some layouts, so it is
   scoped to the attribute alone - which is safe here because the admin area
   never sets data-theme at all. */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .modal-footer {
    background-color: var(--eml-surface);
    border-color: var(--eml-border);
    color: var(--eml-text);
}

/* ==========================================================================
   THE SIGN-IN PAGE, SPLIT
   ==========================================================================

   The brand panel on the left and the form on the right, both the full height
   of the window. Only the sign-in page uses it (it opts in through the auth
   layout's `auth-split` section); the other six auth screens keep their boxes.

   WHITE TEXT ON THE PANEL IS SAFE BECAUSE THE PANEL STARTS AT THE STRONG BLUE.
   #0f6fb6 carries white at 5.29:1 and the gradient only gets darker from there,
   so nothing written on it drops below AA. The bright #15a9e1 appears only as
   a glow, never behind text.
   -------------------------------------------------------------------------- */

.eml-portal .ctl-signin {
    display: flex;
    min-height: 100vh;
}

/* ------------------------------------------------------------ brand panel */

.eml-portal .ctl-signin__brand {
    flex: 0 0 44%;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 48px 56px;
    color: #fff;
    /* A soft glow top right, a faint dot grid echoing the DDI mark, then the
       blue itself - darkening towards the foot of the panel. */
    background:
        radial-gradient(circle at 88% 8%, rgba(21, 169, 225, .45), transparent 42%),
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0f6fb6 0%, #0d5e9b 55%, #0a4675 100%);
}

/* White tiles for the marks, which are drawn for a white ground. */
.eml-portal .ctl-signin__tile {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 6px 20px rgba(4, 30, 52, .25);
}

.eml-portal .ctl-signin__ddi img {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
}

.eml-portal .ctl-signin__pitch {
    margin: auto 0;
}

.eml-portal .ctl-signin__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.eml-portal .ctl-signin__title {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.15;
    color: #fff;
}

.eml-portal .ctl-signin__lede {
    margin: 0;
    max-width: 28em;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
}

.eml-portal .ctl-signin__partners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eml-portal .ctl-signin__partners-label {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
}

.eml-portal .ctl-signin__partners .eml-logos img {
    height: 36px;
}

/* ------------------------------------------------------------- form side */

.eml-portal .ctl-signin__main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.eml-portal .ctl-signin__form-wrap {
    width: 100%;
    max-width: 400px;
    margin: auto;
    padding: 56px 24px 32px;
}

.eml-portal .ctl-signin__heading {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 600;
    color: #1f2a33;
}

.eml-portal .ctl-signin .form-group {
    margin-bottom: 20px;
}

.eml-portal .ctl-signin .form-control {
    height: 44px;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid #cdd4db;
    border-radius: 8px;
    box-shadow: none;
}

.eml-portal .ctl-signin .form-control:focus {
    border-color: var(--eml-brand-strong);
    box-shadow: 0 0 0 3px rgba(15, 111, 182, .18);
}

.eml-portal .ctl-signin__help {
    margin: 6px 0 0;
    font-size: 13px;
}

.eml-portal .ctl-signin__label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.eml-portal .ctl-signin__forgot {
    font-size: 13px;
}

/* The eye button sits inside the right-hand end of the field. */
.eml-portal .ctl-password {
    position: relative;
}

.eml-portal .ctl-password .form-control {
    padding-right: 48px;
}

.eml-portal .ctl-password__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #6f7881;
    font-size: 16px;
    line-height: 1;
}

.eml-portal .ctl-password__toggle:hover {
    color: var(--eml-brand-strong);
}

.eml-portal .ctl-caps-warning {
    margin: 8px 0 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff4d6;
    color: #7a5200;
    font-size: 13px;
}

.eml-portal .ctl-caps-warning[hidden] {
    display: none;
}

.eml-portal .ctl-signin__remember {
    margin: 0 0 22px;
}

.eml-portal .ctl-signin__remember .help-block {
    margin: 2px 0 0 20px;
    font-size: 12px;
}

.eml-portal .ctl-signin__submit {
    height: 46px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

.eml-portal .ctl-signin__no-account {
    margin: 28px 0 0;
    padding-top: 20px;
    border-top: 1px solid #e7eaee;
    font-size: 13px;
    line-height: 1.5;
    color: #6f7881;
    text-align: center;
}

.eml-portal .ctl-signin__footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #eef0f2;
    font-size: 12px;
    color: #6f7881;
    text-align: center;
}

.eml-portal .ctl-signin__footer-sep {
    margin: 0 6px;
}

/* Shown only once the panel has shrunk to a header; see below. */
.eml-portal .ctl-signin__footer-partners {
    display: none;
}

/* The toggle floats over the form side, which is white in light mode. */
.eml-portal.ctl-signin-page .ctl-auth-theme-switch {
    position: fixed;
}

/* ------------------------------------------------------------ narrow screens */

/*
 * Below the two-column breakpoint the panel becomes a short header, so the form
 * is still near the top of a phone screen - the old page's rule, kept. The
 * partner marks move into the footer rather than pushing the form down.
 */
@media (max-width: 991px) {
    .eml-portal .ctl-signin {
        flex-direction: column;
    }

    .eml-portal .ctl-signin__brand {
        flex: none;
        max-width: none;
        gap: 18px;
        padding: 22px 20px 26px;
    }

    .eml-portal .ctl-signin__ddi img {
        height: 28px;
    }

    .eml-portal .ctl-signin__title {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .eml-portal .ctl-signin__lede {
        font-size: 15px;
    }

    .eml-portal .ctl-signin__partners {
        display: none;
    }

    .eml-portal .ctl-signin__footer-partners {
        display: block;
        margin-bottom: 14px;
    }

    /* Straight under the header, not centred in what is left of the screen. */
    .eml-portal .ctl-signin__form-wrap {
        margin: 0 auto;
        padding: 28px 20px 32px;
    }

    .eml-portal .ctl-signin__main {
        flex: 1 0 auto;
    }

    .eml-portal .ctl-signin__footer {
        margin-top: auto;
    }

    /* Two short lines rather than one that wraps around its separator. */
    .eml-portal .ctl-signin__footer > span:not(.ctl-signin__footer-sep) {
        display: block;
    }

    .eml-portal .ctl-signin__footer-sep {
        display: none;
    }

    /* Over the blue header now, so it needs to be light to be seen. */
    .eml-portal.ctl-signin-page .ctl-auth-theme-switch {
        position: absolute;
    }

    .eml-portal.ctl-signin-page .ctl-theme-toggle--plain,
    :root[data-theme="dark"] .eml-portal.ctl-signin-page .ctl-theme-toggle--plain {
        color: rgba(255, 255, 255, .85);
    }
}

/* ------------------------------------------------------------- dark mode */

/* The heading grey the dark block sets everywhere, not the light page's ink. */
:root[data-theme="dark"] .eml-portal .ctl-signin__heading {
    color: var(--eml-heading);
}

/*
 * Each mark already sits on a white tile here, so the per-image chip the dark
 * block gives logos elsewhere would only shrink them inside it.
 */
:root[data-theme="dark"] .eml-portal .ctl-signin__tile .eml-logos img {
    background: none;
    padding: 0;
}

/* A deeper blue, so the panel does not glare beside a dark form. */
:root[data-theme="dark"] .eml-portal .ctl-signin__brand {
    background:
        radial-gradient(circle at 88% 8%, rgba(21, 169, 225, .25), transparent 42%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0b4f82 0%, #093f68 55%, #062b48 100%);
}

/* The dark block paints every h1 the heading grey; on the panel it stays white. */
:root[data-theme="dark"] .eml-portal .ctl-signin__title {
    color: #fff;
}

:root[data-theme="dark"] .eml-portal .ctl-signin__main {
    background: var(--eml-surface);
}

:root[data-theme="dark"] .eml-portal .ctl-signin .form-control {
    border-color: #3b4148;
}

:root[data-theme="dark"] .eml-portal .ctl-signin .form-control:focus {
    border-color: var(--eml-link);
    box-shadow: 0 0 0 3px rgba(92, 188, 234, .2);
}

:root[data-theme="dark"] .eml-portal .ctl-password__toggle {
    color: var(--eml-muted-text);
}

:root[data-theme="dark"] .eml-portal .ctl-password__toggle:hover {
    color: var(--eml-link);
}

:root[data-theme="dark"] .eml-portal .ctl-caps-warning {
    background: #3a2f12;
    color: #f3d27a;
}

:root[data-theme="dark"] .eml-portal .ctl-signin__no-account,
:root[data-theme="dark"] .eml-portal .ctl-signin__footer {
    border-color: var(--eml-border);
    color: var(--eml-muted-text);
}

/* ---------------------------------------------------------------- alerts */

/*
 * Bootstrap's alerts keep their pale fills in dark mode, while the dark block
 * above turns every <strong> near-white - so the "Please check the following:"
 * heading of an error box was white on pale pink. Each variant gets a dark fill
 * in its own hue, with text light enough to read on it.
 */
:root[data-theme="dark"] .eml-portal .alert-danger {
    background-color: #3a1d20;
    border-color: #5c2a2f;
    color: #f2b8bd;
}

:root[data-theme="dark"] .eml-portal .alert-warning {
    background-color: #3a2f12;
    border-color: #5a4a1c;
    color: #f3d27a;
}

:root[data-theme="dark"] .eml-portal .alert-info {
    background-color: #12303f;
    border-color: #1d4a60;
    color: #9fd6ef;
}

:root[data-theme="dark"] .eml-portal .alert-success {
    background-color: #15321f;
    border-color: #22502f;
    color: #a6e0b6;
}

:root[data-theme="dark"] .eml-portal .alert strong {
    color: inherit;
}

:root[data-theme="dark"] .eml-portal .alert .close {
    color: inherit;
    text-shadow: none;
    opacity: .7;
}

/* ==========================================================================
   THE LANDING PAGE, ON THE BARE DOMAIN
   ==========================================================================

   The sign-in page's brand panel, given the whole window: the marks, the name
   and one way in. It borrows .ctl-signin__tile and the partners label from
   the sign-in block above so the two pages read as one place.
   -------------------------------------------------------------------------- */

.eml-portal .ctl-landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(21, 169, 225, .45), transparent 40%),
        radial-gradient(circle at 10% 95%, rgba(21, 169, 225, .22), transparent 38%),
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0f6fb6 0%, #0d5e9b 55%, #0a4675 100%);
}

.eml-portal .ctl-landing__inner {
    margin: auto;
    padding: 64px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.eml-portal .ctl-landing__ddi {
    align-self: center;
    padding: 16px 22px;
}

.eml-portal .ctl-landing__ddi img {
    height: 52px;
    width: auto;
    max-width: 100%;
    display: block;
}

.eml-portal .ctl-landing__title {
    margin: 36px 0 32px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
}

/* White on the blue, so the one thing to press is the brightest thing there. */
.eml-portal .ctl-landing__cta,
.eml-portal .ctl-landing__cta:focus {
    padding: 14px 28px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--eml-brand-strong);
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(4, 30, 52, .3);
}

.eml-portal .ctl-landing__cta:hover {
    background: var(--eml-tint);
    color: var(--eml-brand-darker);
}

.eml-portal .ctl-landing__cta .fa {
    margin-left: 8px;
}

/* On the blue, the focus ring has to be white to be seen at all. */
.eml-portal .ctl-landing a:focus {
    outline-color: #fff !important;
}

.eml-portal .ctl-landing__partners {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.eml-portal .ctl-landing__partners .ctl-signin__tile {
    align-self: center;
}

.eml-portal .ctl-landing__partners .eml-logos img {
    height: 40px;
}

.eml-portal .ctl-landing__footer {
    padding: 18px 24px 22px;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255, .75);
}

.eml-portal .ctl-landing__footer span[aria-hidden] {
    margin: 0 6px;
}

.eml-portal .ctl-landing__footer a {
    color: #fff;
    text-decoration: underline;
}

/* The light/dark switch sits on the blue on this page. */
.eml-portal.ctl-landing-page .ctl-theme-toggle--plain,
:root[data-theme="dark"] .eml-portal.ctl-landing-page .ctl-theme-toggle--plain {
    color: rgba(255, 255, 255, .85);
}

@media (max-width: 767px) {
    .eml-portal .ctl-landing__ddi img { height: 34px; }
    .eml-portal .ctl-landing__title { font-size: 36px; margin: 28px 0 26px; }
    .eml-portal .ctl-landing__partners { margin-top: 48px; }
}

:root[data-theme="dark"] .eml-portal .ctl-landing {
    background:
        radial-gradient(circle at 85% 10%, rgba(21, 169, 225, .25), transparent 40%),
        radial-gradient(circle at 10% 95%, rgba(21, 169, 225, .12), transparent 38%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(165deg, #0b4f82 0%, #093f68 55%, #062b48 100%);
}

:root[data-theme="dark"] .eml-portal .ctl-landing__title {
    color: #fff;
}

:root[data-theme="dark"] .eml-portal .ctl-landing__footer a {
    color: #fff;
}

/* The dark block lightens every link for a dark ground; this one sits on white. */
:root[data-theme="dark"] .eml-portal .ctl-landing__cta,
:root[data-theme="dark"] .eml-portal .ctl-landing__cta:focus {
    color: var(--eml-brand-strong);
}

:root[data-theme="dark"] .eml-portal .ctl-landing__cta:hover {
    color: var(--eml-brand-darker);
}

/* ==========================================================================
   AN ORGANISATION'S DASHBOARD
   ==========================================================================

   The welcome band (participant-hero), the What's next card, and the quieter
   pieces under them. The band is the sign-in page's blue, so the door and the
   first room are the same place; everything else stays on the page's ground.
   No images anywhere: this is the first page on a slow phone.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------ welcome band */

.eml-portal .ctl-hero {
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(21, 169, 225, .4), transparent 45%),
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(160deg, #0f6fb6 0%, #0d5e9b 60%, #0a4675 100%);
}

.eml-portal .ctl-hero__grid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 30px 0 28px;
}

.eml-portal .ctl-hero__text { flex: 1 1 460px; min-width: 0; }

.eml-portal .ctl-hero__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.eml-portal .ctl-hero__title {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
}

.eml-portal .ctl-hero__org {
    margin: 6px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
}

.eml-portal .ctl-hero__sep { margin: 0 6px; }
.eml-portal .ctl-hero__zone { color: rgba(255, 255, 255, .7); font-size: 12px; }

.eml-portal .ctl-hero__status {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    max-width: 44em;
}

.eml-portal .ctl-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.eml-portal .ctl-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

.eml-portal .ctl-chip:hover,
.eml-portal .ctl-chip:focus { background: rgba(255, 255, 255, .24); color: #fff; text-decoration: none; }

/* The two chips that are the reader's to act on stand out as white. */
.eml-portal .ctl-chip--alert,
.eml-portal .ctl-chip--warn { background: #fff; color: #b42532; border-color: #fff; }
.eml-portal .ctl-chip--warn { color: #8a5300; }
.eml-portal .ctl-chip--alert:hover,
.eml-portal .ctl-chip--warn:hover { background: #fff4f4; }
.eml-portal .ctl-chip--warn:hover { background: #fff8ec; color: #8a5300; }

.eml-portal .ctl-hero a:focus { outline-color: #fff !important; }

.eml-portal .ctl-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.eml-portal .ctl-hero__btn,
.eml-portal .ctl-hero__btn:focus {
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: transparent;
    color: #fff;
    font-weight: 600;
}

.eml-portal .ctl-hero__btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.eml-portal .ctl-hero__btn--primary,
.eml-portal .ctl-hero__btn--primary:focus { background: #fff; border-color: #fff; color: var(--eml-brand-strong); }
.eml-portal .ctl-hero__btn--primary:hover { background: var(--eml-tint); color: var(--eml-brand-darker); }

.eml-portal .ctl-hero__btn .fa { margin-right: 4px; }

@media (max-width: 767px) {
    .eml-portal .ctl-hero__grid { padding: 22px 0 22px; }
    .eml-portal .ctl-hero__title { font-size: 24px; }
    .eml-portal .ctl-hero__actions { width: 100%; }
    .eml-portal .ctl-hero__btn { flex: 1 1 auto; }
}

:root[data-theme="dark"] .eml-portal .ctl-hero {
    background:
        radial-gradient(circle at 90% 0%, rgba(21, 169, 225, .22), transparent 45%),
        radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(160deg, #0b4f82 0%, #093f68 60%, #062b48 100%);
}

:root[data-theme="dark"] .eml-portal .ctl-hero__title { color: #fff; }
:root[data-theme="dark"] .eml-portal .ctl-hero__btn--primary { color: var(--eml-brand-strong); }
:root[data-theme="dark"] .eml-portal .ctl-chip { color: #fff; }
:root[data-theme="dark"] .eml-portal .ctl-chip--alert { color: #b42532; }
:root[data-theme="dark"] .eml-portal .ctl-chip--warn { color: #8a5300; }

/* ------------------------------------------------------------ what's next */

.eml-portal .ctl-next {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 24px;
    padding: 18px 20px;
    border: 1px solid #e3e8ee;
    border-left: 5px solid var(--eml-brand-strong);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 41, 66, .06);
}

.eml-portal .ctl-next--alert { border-left-color: #d9434f; }
.eml-portal .ctl-next--warn { border-left-color: #f0a32f; }
.eml-portal .ctl-next--clear { border-left-color: #1f9d6b; }

.eml-portal .ctl-next__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--eml-tint);
    color: var(--eml-brand-strong);
    font-size: 18px;
}

.eml-portal .ctl-next--alert .ctl-next__icon { background: #fdecee; color: #b42532; }
.eml-portal .ctl-next--warn .ctl-next__icon { background: #fff4e0; color: #8a5300; }
.eml-portal .ctl-next--clear .ctl-next__icon { background: #e6f6ee; color: #177a52; }

.eml-portal .ctl-next__text { flex: 1 1 auto; min-width: 0; }

.eml-portal .ctl-next__eyebrow {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #66727e;
}

.eml-portal .ctl-next__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2b38;
    overflow-wrap: anywhere;
}

.eml-portal .ctl-next__body { margin: 4px 0 0; color: #4b5763; }

.eml-portal .ctl-next__btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.eml-portal .ctl-next__btn .fa { margin-left: 4px; }

@media (max-width: 767px) {
    .eml-portal .ctl-next { flex-wrap: wrap; }
    .eml-portal .ctl-next__btn { width: 100%; }
}

:root[data-theme="dark"] .eml-portal .ctl-next {
    background: var(--eml-surface);
    border-color: var(--eml-border);
}

:root[data-theme="dark"] .eml-portal .ctl-next--alert { border-left-color: #d9434f; }
:root[data-theme="dark"] .eml-portal .ctl-next--warn { border-left-color: #f0a32f; }
:root[data-theme="dark"] .eml-portal .ctl-next--clear { border-left-color: #1f9d6b; }
:root[data-theme="dark"] .eml-portal .ctl-next:not(.ctl-next--alert):not(.ctl-next--warn):not(.ctl-next--clear) { border-left-color: var(--eml-link); }
:root[data-theme="dark"] .eml-portal .ctl-next__title { color: var(--eml-heading); }
:root[data-theme="dark"] .eml-portal .ctl-next__body,
:root[data-theme="dark"] .eml-portal .ctl-next__eyebrow { color: var(--eml-muted-text); }
:root[data-theme="dark"] .eml-portal .ctl-next__icon { background: var(--eml-surface-raised); color: var(--eml-link); }

/* ------------------------------------------------------------ the rest */

.eml-portal .ctl-section-title {
    margin: 4px 0 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #66727e;
}

:root[data-theme="dark"] .eml-portal .ctl-section-title { color: var(--eml-muted-text); }

.eml-portal .ctl-steps__done summary { cursor: pointer; color: #66727e; font-size: 13px; }
:root[data-theme="dark"] .eml-portal .ctl-steps__done summary { color: var(--eml-muted-text); }

.eml-portal .ctl-quiet-note {
    margin: 0 0 24px;
    padding: 12px 14px;
    border: 1px dashed #cfd6dd;
    border-radius: 10px;
    font-size: 13px;
    color: #66727e;
}

.eml-portal .ctl-quiet-note .fa { margin-right: 4px; }
:root[data-theme="dark"] .eml-portal .ctl-quiet-note { border-color: var(--eml-border); color: var(--eml-muted-text); }

/* Panels on the dashboard: the rounder cards the rest of the product now uses. */
.eml-portal .wrapper-content .ibox {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 41, 66, .06);
}

.eml-portal .wrapper-content .ibox-title { border-top: 0; }

/* The dark block turns every <strong> near-white; on the white chips the
   number has to keep the chip's own colour. */
:root[data-theme="dark"] .eml-portal .ctl-chip strong { color: inherit; }

/* A button that is a link keeps the button's white, not the link colour. */
:root[data-theme="dark"] .eml-portal a.btn-primary,
:root[data-theme="dark"] .eml-portal a.btn-primary:hover,
:root[data-theme="dark"] .eml-portal a.btn-primary:focus { color: #fff; }

/* The theme draws list dividers with !important, so the dark one has to say it too. */
:root[data-theme="dark"] .eml-portal .border-bottom { border-bottom-color: var(--eml-border) !important; }

:root[data-theme="dark"] .eml-portal .ctl-hero__btn,
:root[data-theme="dark"] .eml-portal .ctl-hero__btn:hover,
:root[data-theme="dark"] .eml-portal .ctl-hero__btn:focus { color: #fff; }

:root[data-theme="dark"] .eml-portal .ctl-hero__btn--primary,
:root[data-theme="dark"] .eml-portal .ctl-hero__btn--primary:focus { color: var(--eml-brand-strong); }
:root[data-theme="dark"] .eml-portal .ctl-hero__btn--primary:hover { color: var(--eml-brand-darker); }

/* ==========================================================================
   FIRST-TIME HELP: THE WELCOME, THE ⓘ, AND THE GUIDES
   ========================================================================== */

/* ------------------------------------------------------------ the welcome */

.eml-portal .ctl-welcome {
    margin: 0 0 24px;
    padding: 20px 22px;
    border: 1px solid #cfe3f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #f4faff 0%, #fff 100%);
}

.eml-portal .ctl-welcome__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.eml-portal .ctl-welcome__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2b38;
}

.eml-portal .ctl-welcome__title .fa { color: var(--eml-brand-strong); margin-right: 6px; }
.eml-portal .ctl-welcome__close { margin: 0; }

.eml-portal .ctl-welcome__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.eml-portal .ctl-welcome__card {
    padding: 16px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
}

.eml-portal .ctl-welcome__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eml-tint);
    color: var(--eml-brand-strong);
}

.eml-portal .ctl-welcome__card-title { margin: 10px 0 4px; font-size: 15px; font-weight: 600; color: #1f2b38; }
.eml-portal .ctl-welcome__card-text { margin: 0; color: #4b5763; line-height: 1.5; }

.eml-portal .ctl-welcome__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.eml-portal .ctl-welcome__foot form { margin: 0; }
.eml-portal .ctl-welcome__foot .btn { border-radius: 8px; font-weight: 600; }
.eml-portal .ctl-welcome__link { font-weight: 600; }

:root[data-theme="dark"] .eml-portal .ctl-welcome {
    background: var(--eml-surface);
    border-color: var(--eml-border);
}

:root[data-theme="dark"] .eml-portal .ctl-welcome__card {
    background: var(--eml-surface-raised);
    border-color: var(--eml-border);
}

:root[data-theme="dark"] .eml-portal .ctl-welcome__title,
:root[data-theme="dark"] .eml-portal .ctl-welcome__card-title { color: var(--eml-heading); }
:root[data-theme="dark"] .eml-portal .ctl-welcome__card-text { color: var(--eml-text); }
:root[data-theme="dark"] .eml-portal .ctl-welcome__icon { background: var(--eml-surface); color: var(--eml-link); }

/* ------------------------------------------------------------ the ⓘ */

.eml-portal .ctl-term {
    display: inline-block;
    margin-left: 4px;
    padding: 0 2px;
    color: #66727e;
    font-size: 13px;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
}

.eml-portal .ctl-term:hover,
.eml-portal .ctl-term:focus { color: var(--eml-brand-strong); text-decoration: none; }

.eml-portal .ctl-status { white-space: nowrap; }

/* The explanation itself. */
.popover { max-width: 300px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.popover-title { font-weight: 600; }
:root[data-theme="dark"] .popover { background: #262a2f; border-color: #31363c; color: #c6ccd2; }
:root[data-theme="dark"] .popover-title { background: #1e2125; border-color: #31363c; color: #eef1f4; }
:root[data-theme="dark"] .popover.top > .arrow:after { border-top-color: #262a2f; }
:root[data-theme="dark"] .popover.bottom > .arrow:after { border-bottom-color: #262a2f; }

:root[data-theme="dark"] .eml-portal .ctl-term { color: var(--eml-muted-text); }
:root[data-theme="dark"] .eml-portal .ctl-term:hover { color: var(--eml-link); }

/* ------------------------------------------------------------ the guides */

.eml-portal.ctl-guide-page { background: #f3f6f9; }

.eml-portal .ctl-guide-band {
    color: #fff;
    background:
        radial-gradient(circle at 90% 0%, rgba(21, 169, 225, .4), transparent 45%),
        radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.5px) 0 0 / 22px 22px,
        linear-gradient(160deg, #0f6fb6 0%, #0d5e9b 60%, #0a4675 100%);
}

.eml-portal .ctl-guide-band__inner,
.eml-portal .ctl-guide-nav__inner,
.eml-portal .ctl-guide {
    max-width: 780px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.eml-portal .ctl-guide-band__inner { padding-top: 26px; padding-bottom: 28px; }

.eml-portal .ctl-guide-band__brand {
    display: inline-flex;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 18px;
}

.eml-portal .ctl-guide-band__brand img { height: 26px; width: auto; display: block; }

.eml-portal .ctl-guide-band__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}

.eml-portal .ctl-guide-band__title { margin: 0; font-size: 30px; font-weight: 600; color: #fff; }
.eml-portal .ctl-guide-band__lede { margin: 8px 0 0; font-size: 16px; color: rgba(255, 255, 255, .9); }

.eml-portal .ctl-guide-nav { background: #fff; border-bottom: 1px solid #e3e8ee; }

.eml-portal .ctl-guide-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
}

.eml-portal .ctl-guide-nav a { font-weight: 600; color: #4b5763; }
.eml-portal .ctl-guide-nav a.is-here { color: var(--eml-brand-strong); text-decoration: underline; text-underline-offset: 4px; }
.eml-portal .ctl-guide-nav__spacer { flex: 1 1 auto; }

.eml-portal .ctl-guide { padding-top: 26px; padding-bottom: 30px; font-size: 15.5px; line-height: 1.65; color: #2c3742; }
.eml-portal .ctl-guide__actions { margin-bottom: 14px; text-align: right; }

.eml-portal .ctl-guide__section {
    margin: 0 0 18px;
    padding: 20px 22px;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
}

.eml-portal .ctl-guide__section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    color: #1f2b38;
}

.eml-portal .ctl-guide__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--eml-brand-strong);
    color: #fff;
    font-size: 15px;
}

.eml-portal .ctl-guide__section ol,
.eml-portal .ctl-guide__section ul { padding-left: 22px; }
.eml-portal .ctl-guide__section li { margin-bottom: 6px; }

.eml-portal .ctl-guide__tip {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--eml-brand);
    border-radius: 6px;
    background: var(--eml-tint);
    font-size: 14.5px;
}

.eml-portal .ctl-guide__next {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #f1f8f4;
    border-left: 3px solid #1f9d6b;
    font-size: 14.5px;
}

.eml-portal .ctl-guide__foot { margin: 22px 0 0; color: #66727e; font-size: 14px; }

.eml-portal .ctl-guide-video { margin: 4px 0 14px; }
.eml-portal .ctl-guide-video video { width: 100%; border-radius: 10px; background: #000; }
.eml-portal .ctl-guide-video figcaption { margin-top: 6px; font-size: 13px; color: #66727e; }

.eml-portal .ctl-guide-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px 26px;
    font-size: 12px;
    color: #66727e;
}

/* The glossary. */
.eml-portal .ctl-glossary { margin: 0; }

.eml-portal .ctl-glossary__entry {
    margin: 0 0 10px;
    padding: 14px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
    scroll-margin-top: 16px;
}

.eml-portal .ctl-glossary__entry:target { border-color: var(--eml-brand); box-shadow: 0 0 0 3px rgba(21, 169, 225, .2); }
.eml-portal .ctl-glossary dt { font-size: 16px; font-weight: 600; color: #1f2b38; }
.eml-portal .ctl-glossary dd { margin: 4px 0 0; color: #3c4752; }
.eml-portal .ctl-glossary--stages .ctl-glossary__entry { background: #f8fbfd; }

@media (max-width: 600px) {
    .eml-portal .ctl-guide-band__title { font-size: 24px; }
    .eml-portal .ctl-guide__section { padding: 16px; }
}

@media print {
    .eml-portal .ctl-guide-band { background: none; color: #000; }
    .eml-portal .ctl-guide-band__title,
    .eml-portal .ctl-guide-band__lede,
    .eml-portal .ctl-guide-band__eyebrow { color: #000; }
    .eml-portal .ctl-guide__section { border: 0; padding: 0 0 12px; break-inside: avoid; }
    .eml-portal .ctl-no-print { display: none !important; }
}

:root[data-theme="dark"] .eml-portal.ctl-guide-page { background: var(--eml-page); }
:root[data-theme="dark"] .eml-portal .ctl-guide-band {
    background:
        radial-gradient(circle at 90% 0%, rgba(21, 169, 225, .22), transparent 45%),
        linear-gradient(160deg, #0b4f82 0%, #093f68 60%, #062b48 100%);
}
:root[data-theme="dark"] .eml-portal .ctl-guide-band__title { color: #fff; }
:root[data-theme="dark"] .eml-portal .ctl-guide-nav { background: var(--eml-surface); border-color: var(--eml-border); }
:root[data-theme="dark"] .eml-portal .ctl-guide-nav a { color: var(--eml-text); }
:root[data-theme="dark"] .eml-portal .ctl-guide-nav a.is-here { color: var(--eml-link); }
:root[data-theme="dark"] .eml-portal .ctl-guide { color: var(--eml-text); }
:root[data-theme="dark"] .eml-portal .ctl-guide__section,
:root[data-theme="dark"] .eml-portal .ctl-glossary__entry { background: var(--eml-surface); border-color: var(--eml-border); }
:root[data-theme="dark"] .eml-portal .ctl-glossary--stages .ctl-glossary__entry { background: var(--eml-surface-raised); }
:root[data-theme="dark"] .eml-portal .ctl-guide__section h2,
:root[data-theme="dark"] .eml-portal .ctl-glossary dt { color: var(--eml-heading); }
:root[data-theme="dark"] .eml-portal .ctl-glossary dd { color: var(--eml-text); }
:root[data-theme="dark"] .eml-portal .ctl-guide__tip { background: var(--eml-surface-raised); }
:root[data-theme="dark"] .eml-portal .ctl-guide__next { background: #15321f; color: #c8ead2; }
:root[data-theme="dark"] .eml-portal .ctl-guide__foot,
:root[data-theme="dark"] .eml-portal .ctl-guide-footer { color: var(--eml-muted-text); }
:root[data-theme="dark"] .eml-portal .ctl-guide-footer .eml-logos img { background: #fff; border-radius: 4px; padding: 3px 5px; }

/* ------------------------------------------------------------ ask for help */

.eml-portal .ctl-help-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--eml-brand-strong);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(4, 30, 52, .25);
    text-decoration: none;
}

.eml-portal .ctl-help-fab:hover,
.eml-portal .ctl-help-fab:focus { background: var(--eml-brand-darker); color: #fff; text-decoration: none; }
.eml-portal .ctl-help-fab:focus { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--eml-brand-strong); }
.eml-portal .ctl-help-fab .fa { font-size: 17px; }

/* Room for the button is kept at the end of the page's content instead
   (ctl-base.css), not inside the footer - padding here made the footer
   taller and so covered more of the page. */

:root[data-theme="dark"] .eml-portal .ctl-help-fab,
:root[data-theme="dark"] .eml-portal .ctl-help-fab:hover { color: #fff; }

@media print { .eml-portal .ctl-help-fab { display: none; } }

/* ------------------------------------------------------------ what happens next */

.eml-portal .ctl-what-next {
    margin: 0 0 22px;
    padding: 18px 20px;
    border: 1px solid #cfe9dc;
    border-left: 5px solid #1f9d6b;
    border-radius: 12px;
    background: #f3fbf7;
}

.eml-portal .ctl-what-next__title { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: #145c3f; }
.eml-portal .ctl-what-next__title .fa { color: #1f9d6b; margin-right: 4px; }
.eml-portal .ctl-what-next__steps { margin: 0; padding-left: 22px; }
.eml-portal .ctl-what-next__steps li { margin-bottom: 6px; line-height: 1.5; }
.eml-portal .ctl-what-next__meanwhile { margin: 10px 0 0; color: #4b5763; }

:root[data-theme="dark"] .eml-portal .ctl-what-next { background: #15321f; border-color: #22502f; border-left-color: #1f9d6b; color: #c8ead2; }
:root[data-theme="dark"] .eml-portal .ctl-what-next__title { color: #a6e0b6; }
:root[data-theme="dark"] .eml-portal .ctl-what-next__meanwhile { color: #a9c9b4; }
:root[data-theme="dark"] .eml-portal .ctl-what-next strong { color: #e3f5e9; }

/* ------------------------------------------------------------ the guided tour */

/* The part being explained is lifted above a dimmed page by its own shadow -
   no overlay element to get in the way of a click or a screen reader. */
.ctl-tour-target {
    position: relative;
    z-index: 1050;
    border-radius: 12px;
    box-shadow: 0 0 0 4px #15a9e1, 0 0 0 100vmax rgba(8, 20, 34, .55) !important;
    transition: box-shadow .2s ease;
}

.eml-portal .ctl-help-fab.ctl-tour-target { position: fixed; }

.ctl-tour-card {
    position: fixed;
    z-index: 1060;
    width: 340px;
    max-width: calc(100vw - 28px);
    padding: 16px 18px 14px;
    border-radius: 12px;
    background: #fff;
    color: #1f2b38;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}

.ctl-tour-card[hidden] { display: none; }

.ctl-tour-card.is-docked { left: 14px !important; right: 14px; bottom: 14px; top: auto !important; width: auto; }

.ctl-tour-card__count { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #66727e; }
.ctl-tour-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.ctl-tour-card__text { margin: 0 0 12px; line-height: 1.5; color: #3c4752; }
.ctl-tour-card__buttons { display: flex; align-items: center; gap: 6px; }
.ctl-tour-card__spacer { flex: 1 1 auto; }

:root[data-theme="dark"] .ctl-tour-card { background: #1e2125; color: #c6ccd2; }
:root[data-theme="dark"] .ctl-tour-card__title { color: #eef1f4; }
:root[data-theme="dark"] .ctl-tour-card__text { color: #c6ccd2; }
:root[data-theme="dark"] .ctl-tour-card__count { color: #8d959d; }

/* ------------------------------------------------------------ help: start here */

.eml-portal .ctl-help-start {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.eml-portal .ctl-help-start__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #fff;
    color: #3c4752;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.eml-portal .ctl-help-start__card:hover,
.eml-portal .ctl-help-start__card:focus { border-color: var(--eml-brand); box-shadow: 0 4px 12px rgba(15, 41, 66, .08); text-decoration: none; color: #3c4752; }
.eml-portal .ctl-help-start__card .fa { font-size: 20px; color: var(--eml-brand-strong); }
.eml-portal .ctl-help-start__card strong { color: #1f2b38; font-size: 15px; }
.eml-portal .ctl-help-start__card span { font-size: 13px; }

:root[data-theme="dark"] .eml-portal .ctl-help-start__card { background: var(--eml-surface-raised); border-color: var(--eml-border); color: var(--eml-text); }
:root[data-theme="dark"] .eml-portal .ctl-help-start__card strong { color: var(--eml-heading); }
:root[data-theme="dark"] .eml-portal .ctl-help-start__card .fa { color: var(--eml-link); }

/* ------------------------------------------------------------ the bell */

.eml-portal .ctl-bell-item { display: inline-block; }
.eml-portal .ctl-bell { position: relative; display: inline-block; padding: 10px 12px !important; font-size: 17px; }

.eml-portal .ctl-bell__count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #d9434f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

/* ------------------------------------------------------------ the phone menu bar */

.eml-portal .ctl-tabbar { display: none; }

@media (max-width: 767px) {
    .eml-portal .ctl-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        border-top: 1px solid #e3e8ee;
        background: #fff;
        box-shadow: 0 -4px 14px rgba(15, 41, 66, .08);
    }

    .eml-portal .ctl-tabbar__item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-height: 52px;
        padding: 6px 2px;
        border-radius: 10px;
        color: #66727e;
        font-size: 11.5px;
        font-weight: 600;
        text-decoration: none;
    }

    .eml-portal .ctl-tabbar__item .fa { font-size: 20px; }
    .eml-portal .ctl-tabbar__item.is-here { color: var(--eml-brand-strong); background: var(--eml-tint); }
    .eml-portal .ctl-tabbar__item:hover,
    .eml-portal .ctl-tabbar__item:focus { color: var(--eml-brand-strong); text-decoration: none; }

    /* The bar has Help, so the floating button gives way to it. */
    .eml-portal .ctl-help-fab--with-tabbar { display: none; }

    /* Room above the bar is kept by ctl-base.css (body.has-ctl-tabbar). */

    :root[data-theme="dark"] .eml-portal .ctl-tabbar { background: var(--eml-surface); border-color: var(--eml-border); }
    :root[data-theme="dark"] .eml-portal .ctl-tabbar__item { color: var(--eml-muted-text); }
    :root[data-theme="dark"] .eml-portal .ctl-tabbar__item.is-here { color: var(--eml-link); background: var(--eml-surface-raised); }
}

/* ------------------------------------------------------------ session warning */

.eml-portal .ctl-session-warning {
    position: fixed;
    left: 50%;
    top: 14px;
    z-index: 1070;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    max-width: calc(100vw - 28px);
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff8ec;
    border: 1px solid #f0c27a;
    color: #5c3b00;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.eml-portal .ctl-session-warning[hidden] { display: none; }
.eml-portal .ctl-session-warning p { margin: 0; }
:root[data-theme="dark"] .eml-portal .ctl-session-warning { background: #3a2f12; border-color: #5a4a1c; color: #f3d27a; }
:root[data-theme="dark"] .eml-portal .ctl-session-warning strong { color: #f3d27a; }

/* ------------------------------------------------------------ milestones */

.eml-portal .ctl-milestones { list-style: none; margin: 0; padding: 0; position: relative; }

.eml-portal .ctl-milestones__stage {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 0 0 16px 0;
}

/* The line joining the stages. */
.eml-portal .ctl-milestones__stage::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #e3e8ee;
}

.eml-portal .ctl-milestones__stage:last-child { padding-bottom: 0; }
.eml-portal .ctl-milestones__stage:last-child::before { display: none; }

.eml-portal .ctl-milestones__dot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cfd6dd;
    background: #fff;
    color: #fff;
    font-size: 12px;
    z-index: 1;
}

.eml-portal .has-filed .ctl-milestones__dot { border-color: var(--eml-brand); }
.eml-portal .has-accepted .ctl-milestones__dot { border-color: #1f9d6b; background: #1f9d6b; }

.eml-portal .ctl-milestones__text strong { display: block; color: #1f2b38; }
.eml-portal .ctl-milestones__about { display: block; margin-top: 2px; }
.eml-portal .ctl-milestones__counts { margin-top: 4px; }
.eml-portal .ctl-milestones__counts .label { margin-right: 4px; }

:root[data-theme="dark"] .eml-portal .ctl-milestones__stage::before { background: var(--eml-border); }
:root[data-theme="dark"] .eml-portal .ctl-milestones__dot { background: var(--eml-surface); border-color: var(--eml-border); }
:root[data-theme="dark"] .eml-portal .has-filed .ctl-milestones__dot { border-color: var(--eml-link); }
:root[data-theme="dark"] .eml-portal .has-accepted .ctl-milestones__dot { border-color: #1f9d6b; background: #1f9d6b; }
:root[data-theme="dark"] .eml-portal .ctl-milestones__text strong { color: var(--eml-heading); }

/* ------------------------------------------------------------ was this helpful */

.eml-portal .ctl-page-feedback {
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    background: #fff;
}

.eml-portal .ctl-page-feedback__title { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #1f2b38; }
.eml-portal .ctl-page-feedback__label { font-weight: 600; font-size: 13px; }
.eml-portal .ctl-page-feedback__buttons { display: flex; gap: 8px; margin-top: 10px; }
.eml-portal .ctl-page-feedback__thanks { margin: 0; font-weight: 600; color: #177a52; }

:root[data-theme="dark"] .eml-portal .ctl-page-feedback { background: var(--eml-surface); border-color: var(--eml-border); }
:root[data-theme="dark"] .eml-portal .ctl-page-feedback__title { color: var(--eml-heading); }
:root[data-theme="dark"] .eml-portal .ctl-page-feedback__thanks { color: #a6e0b6; }