/*
 * MyElite Portal theme for Gibbon.
 *
 * Gibbon and the Moodle portal are two products in front of the same students
 * and staff, so they should not look like two different institutions. This
 * restates the portal's palette over Gibbon's Default theme.
 *
 * The stylesheet is an @import of the Default theme rather than a copy of it,
 * so Default's own upgrades still come through and only colour is overridden
 * here; layout and spacing are left alone.
 *
 * The img/ and fonts/ directories, however, ARE copies. Gibbon resolves theme
 * assets against the *active* theme's directory - it asked for
 * themes/MyElite/img/gibbon-white.svg and got a broken image - so those files
 * have to exist locally regardless of what the CSS imports. Replacing the
 * institution's own artwork means dropping it into themes/MyElite/img/.
 */

@import url("../../Default/css/main.css");

:root {
    --myelite-blue: #144129;
    --myelite-blue-dark: #0e2e1c;
    --myelite-navy: #103623;
    --myelite-navy-deep: #081c12;
    --myelite-yellow: #e1a730;
    --myelite-cream: #f4f1ec;
}

/* ---- Page background ---------------------------------------------------- */
/* Gibbon picks a gradient class from the themeColour setting. Every variant is
   overridden so the page stays on-brand even if that setting is changed. */
.body-gradient-purple,
.body-gradient-fuchsia,
.body-gradient-pink,
.body-gradient-indigo,
.body-gradient-violet,
.body-gradient-blue,
.body-gradient-sky,
.body-gradient-teal,
.body-gradient-green,
.body-gradient-orange,
.body-gradient-red,
.body-gradient-yellow {
    background:
        radial-gradient(80% 1000px at 20% 500px,
            var(--myelite-blue) 0%,
            var(--myelite-navy) 100%) no-repeat fixed;
}

/* ---- Primary actions ---------------------------------------------------- */
.bg-purple-600, .bg-purple-700, .bg-purple-800,
.bg-indigo-600, .bg-indigo-700,
.bg-blue-600, .bg-blue-700 {
    background-color: var(--myelite-blue) !important;
}

.hover\:bg-purple-700:hover, .hover\:bg-purple-800:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--myelite-blue-dark) !important;
}

.text-purple-600, .text-purple-700, .text-purple-800,
.text-indigo-600, .text-indigo-700 {
    color: var(--myelite-blue) !important;
}

.border-purple-500, .border-purple-600,
.border-indigo-500, .border-indigo-600 {
    border-color: var(--myelite-blue) !important;
}

/* Gibbon's own button classes. */
input[type="submit"],
.button,
.btn-primary {
    background-color: var(--myelite-blue);
    border-color: var(--myelite-blue);
    color: #fff;
}

input[type="submit"]:hover,
.button:hover,
.btn-primary:hover {
    background-color: var(--myelite-blue-dark);
    border-color: var(--myelite-blue-dark);
}

/* ---- Links -------------------------------------------------------------- */
a {
    color: var(--myelite-blue);
}

/* Body links only. The header menu is white on a dark ground and is
   handled below - without this exclusion the blanket rule recoloured
   those links to the dark brand green and they disappeared into the
   bar on hover. */
a:not(#header-menu a):not(#header-logo):hover {
    color: var(--myelite-blue-dark);
}

/* The header menu: keep the contrast, show the hover with the accent
   underneath rather than by restaining the text. */
#header-menu a:hover,
#header-menu a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
    text-decoration: none;
}

#header-menu > ul > li > a:hover,
#header-menu > ul > li > a:focus {
    box-shadow: inset 0 -3px 0 var(--myelite-yellow);
}

/* ---- Header and main navigation ----------------------------------------- */
/* The accent underline echoes the active tab treatment in the portal header,
   which is the strongest shared cue between the two systems. */
#header,
.header-bar {
    border-bottom: 3px solid var(--myelite-yellow);
}

#menu .active,
.nav-link.active,
[aria-current="page"] {
    border-color: var(--myelite-yellow) !important;
}

/* ---- Focus ring --------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--myelite-yellow);
    outline-offset: 2px;
}

.focus\:ring-blue-500:focus,
.focus\:ring-purple-500:focus,
.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--myelite-blue) !important;
}

/* ---- Content surfaces --------------------------------------------------- */
/* Slightly warmer neutrals, matching the portal's cream page background. */
.bg-gray-100 {
    background-color: var(--myelite-cream) !important;
}

/* ---- Tables ------------------------------------------------------------- */
.dataTable thead th,
table.smallIntBorder thead th,
.rowHeader {
    background-color: var(--myelite-navy) !important;
    color: #fff !important;
}

/* ---- Upstream attribution ------------------------------------------------
 *
 * Gibbon's footer template asks, in a comment: "Please keep the names and
 * copyrights as they're shown here. You are welcome to edit the style of the
 * text to suit your theme." Gibbon is GPL-3, and section 7(b) of that licence
 * lets authors require preservation of attribution notices - so this is
 * plausibly a licence term rather than a courtesy.
 *
 * It is therefore restyled, not removed: small, muted and out of the way, which
 * is exactly what that comment permits. Deleting it is a decision for the
 * institution and its own legal advice, not something to do quietly in a
 * stylesheet.
 */
/* The footer carries no stable id or class - it is a utility-class div - so it
   is identified by what it contains, which is exactly the attribution block. */
div:has(> span > a[href*="gibbonedu.org"]),
div:has(> span a[href*="gibbonedu.org"]) {
    font-size: 11px !important;
    line-height: 1.45;
    color: #9b968c !important;
    opacity: .7;
}

div:has(> span a[href*="gibbonedu.org"]) a {
    color: #9b968c !important;
    text-decoration: underline;
    font-weight: 400 !important;
}

div:has(> span a[href*="gibbonedu.org"]) a:hover {
    color: var(--myelite-blue) !important;
}

/* "Powered by" is bold by default; bring it in line with the rest of the small
   print. The text stays, its prominence does not. */
div:has(> span a[href*="gibbonedu.org"]) .font-bold,
div:has(> span a[href*="gibbonedu.org"]) .inline-block {
    font-weight: 400 !important;
    font-size: 11px !important;
}

/* The decorative ape watermark is branding rather than an attribution notice,
   so it goes. The copyright text above is what the licence asks be kept. */
img[src$="gibbon-white.svg"],
img[src$="gibbon.svg"] {
    display: none !important;
}

/* ---- Highlight / warning strips ----------------------------------------- */
.message,
.success {
    border-left: 4px solid var(--myelite-blue);
}

/* The wordmark is dark artwork, which read acceptably on the old blue bar and
   disappears against the green one. Rendering it white in the header only -
   the sign-in page shows the same file on a pale ground, where the dark
   version is correct. */
#header-logo img {
    max-height: 46px;
    width: auto;
}

/* ---- "Start here" dashboard tab ------------------------------------------
   The everyday tasks, laid out so the eye lands on a heading and then a short
   list, rather than on a wall of equally-weighted links. */
.myelite-starthere-lead {
    margin: 0 0 1.25rem;
    color: #4b5a4f;
}

.myelite-starthere-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
}

.myelite-starthere-group h3 {
    margin: 0 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--myelite-blue);
}

.myelite-starthere-note {
    margin: 0 0 .5rem;
    font-size: .8rem;
    color: #7d8a80;
}

.myelite-starthere-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.myelite-starthere-group li + li { margin-top: .3rem; }

.myelite-starthere-group a {
    display: block;
    padding: .3rem .55rem;
    border-radius: 4px;
    color: #17231a;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.myelite-starthere-group a:hover,
.myelite-starthere-group a:focus {
    background-color: #eef3ee;
    border-left-color: var(--myelite-yellow);
    text-decoration: none;
}

.myelite-starthere-foot {
    margin: 1.75rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid #e2ded4;
    font-size: .82rem;
    color: #7d8a80;
}

/* Gibbon sets its own link colour with weight this has to match, hence the
   !important - the theme already uses it for the same reason elsewhere. Links
   read as ink with a green hover, so a list of a dozen of them does not
   arrive as a wall of colour. */
.myelite-starthere .myelite-starthere-group a {
    color: #17231a !important;
}

.myelite-starthere .myelite-starthere-group a:hover,
.myelite-starthere .myelite-starthere-group a:focus {
    color: var(--myelite-blue) !important;
}

/* ---- Student accounts --------------------------------------------------- */
/* The portal's tuition ledger, shown in the SIS. Styled to read like the
   portal's own finance screen, because it is the same ledger. */

.myelite-sisfinance h2 {
    color: var(--myelite-navy);
    font-size: 1.35rem;
    margin: .25rem 0 0;
}

.myelite-sisfinance h3 {
    color: var(--myelite-blue);
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 1.75rem 0 .5rem;
}

.myelite-sisfinance-sub {
    color: #6b7280;
    margin: .1rem 0 0;
}

.myelite-sisfinance-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0 .25rem;
}

.myelite-sisfinance-tile {
    flex: 1 1 8rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--myelite-blue);
    border-radius: 4px;
    background: #fff;
}

.myelite-sisfinance-tile-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--myelite-navy);
    line-height: 1.1;
}

.myelite-sisfinance-tile-label {
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #6b7280;
}

.myelite-sisfinance-table {
    margin-top: .5rem;
}

.myelite-sisfinance-owing {
    color: #a33224;
    font-weight: 600;
}

.myelite-sisfinance-clear {
    color: var(--myelite-blue);
    font-weight: 600;
}

.myelite-sisfinance-flag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--myelite-yellow);
    color: #3a2a05;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The two jobs done on this screen, side by side on a desk and stacked on a
   phone at the front counter. */
.myelite-sisfinance-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.myelite-sisfinance-form {
    flex: 1 1 18rem;
    padding: 1rem 1.15rem 1.15rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.myelite-sisfinance-form h3 {
    margin-top: 0;
}

.myelite-sisfinance-form label {
    display: block;
    margin-bottom: .6rem;
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
}

.myelite-sisfinance-form input,
.myelite-sisfinance-form select {
    display: block;
    width: 100%;
    margin-top: .2rem;
    padding: .45rem .55rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-weight: 400;
    font-size: .9rem;
    background: #fff;
}

.myelite-sisfinance-form input:focus,
.myelite-sisfinance-form select:focus {
    outline: 2px solid var(--myelite-yellow);
    outline-offset: 1px;
    border-color: var(--myelite-blue);
}

.myelite-sisfinance-form button {
    margin-top: .35rem;
    padding: .5rem 1.1rem;
    border: 0;
    border-radius: 4px;
    background: var(--myelite-blue);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.myelite-sisfinance-form button:hover,
.myelite-sisfinance-form button:focus {
    background: var(--myelite-blue-dark);
}

.myelite-sisfinance-hint {
    margin: .6rem 0 0;
    font-size: .76rem;
    color: #6b7280;
}

/* ---- Body links --------------------------------------------------------- */
/* Gibbon core ships a hard-coded red for plain links in theme.min.css, which
   is loaded after this file, so every link in the SIS came out red regardless
   of the school's colours. Scoped to the content wrapper: it outranks the core
   rule by an id, and the header menu sits outside #wrapOuter, so the white
   labels on the green bar are left alone. */
#wrapOuter a,
#wrapOuter a:not([class]) {
    color: var(--myelite-blue);
}

#wrapOuter a:hover,
#wrapOuter a:not([class]):hover {
    color: var(--myelite-blue-dark);
}

/* The account tables fill the column they are in; Gibbon's fullWidth class is
   no longer part of the core stylesheet. */
.myelite-sisfinance-table {
    width: 100%;
}

/* ---- Academic records --------------------------------------------------- */
/* The portal's gradebook, shown in the SIS. Shares the account screen's
   furniture; only the parts unique to grades are here. */

.myelite-sisgrades-shortname {
    display: block;
    font-size: .74rem;
    color: #6b7280;
}

/* Progress as a bar rather than a bare number, so a list of twenty students
   can be read down in one pass. The percentage is printed beside it as well:
   the bar is decoration, the number is the fact. */
.myelite-sisgrades-bar {
    display: inline-block;
    vertical-align: middle;
    width: 5.5rem;
    height: .5rem;
    margin-right: .45rem;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.myelite-sisgrades-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--myelite-blue);
}

.myelite-sisgrades-barnum {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: #374151;
}

/* A late submission, said the same way the student's own grade table says it. */
.myelite-sisgrades-late {
    color: #a33224;
}

/* ---- Announcements ------------------------------------------------------ */

.myelite-sisnotices-form textarea {
    display: block;
    width: 100%;
    margin-top: .2rem;
    padding: .45rem .55rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font: inherit;
    font-weight: 400;
}

.myelite-sisnotices-form textarea:focus {
    outline: 2px solid var(--myelite-yellow);
    outline-offset: 1px;
    border-color: var(--myelite-blue);
}

/* The checkbox is an ordinary inline control, not a stacked field like the
   text inputs above it. */
.myelite-sisnotices-check {
    font-weight: 400 !important;
}

.myelite-sisnotices-check input {
    display: inline-block !important;
    width: auto !important;
    margin: 0 .35rem 0 0 !important;
}

.myelite-sisnotices-list {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.myelite-sisnotices-item {
    padding: .8rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.myelite-sisnotices-item:last-child {
    border-bottom: 0;
}

.myelite-sisnotices-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
}

.myelite-sisnotices-subject {
    font-weight: 600;
    color: var(--myelite-navy);
}

.myelite-sisnotices-meta {
    font-size: .76rem;
    color: #6b7280;
}

.myelite-sisnotices-summary {
    margin: .3rem 0 .35rem;
    color: #374151;
}

/* ---- Compliance documents ----------------------------------------------- */

.myelite-sisdocs-chip {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.myelite-sisdocs-chip.is-approved {
    background: #e3efe7;
    color: #0e3b22;
}

.myelite-sisdocs-chip.is-pending {
    background: var(--myelite-yellow);
    color: #3a2a05;
}

.myelite-sisdocs-chip.is-rejected {
    background: #f6dcd8;
    color: #7d2419;
}

.myelite-sisdocs-chip.is-missing {
    background: #eceef1;
    color: #5b6472;
}

/* A grid of seven document columns is wide; it scrolls on its own rather
   than pushing the whole page sideways. */
.myelite-sisdocs-grid {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.myelite-sisdocs-decide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.myelite-sisdocs-decide input[type="text"] {
    flex: 1 1 11rem;
    min-width: 8rem;
    padding: .35rem .5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: .85rem;
}

.myelite-sisdocs-decide button {
    padding: .35rem .8rem;
    border: 0;
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.myelite-sisdocs-decide button.is-approve {
    background: var(--myelite-blue);
}

.myelite-sisdocs-decide button.is-approve:hover,
.myelite-sisdocs-decide button.is-approve:focus {
    background: var(--myelite-blue-dark);
}

.myelite-sisdocs-decide button.is-reject {
    background: #8c3225;
}

.myelite-sisdocs-decide button.is-reject:hover,
.myelite-sisdocs-decide button.is-reject:focus {
    background: #6f2519;
}

/* Gibbon's reset sets appearance:none on form controls and styles each one by
   class; a plain checkbox therefore collapsed to a 2px sliver. Give it the
   native control back rather than reinventing a tick. */
.myelite-sisnotices-check input[type="checkbox"],
.myelite-sisdocs input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: checkbox;
    width: 1rem !important;
    height: 1rem;
    min-width: 1rem;
    vertical-align: -2px;
    accent-color: var(--myelite-blue);
}

/* ---- Coming up, on the staff dashboard ---------------------------------- */

.myelite-starthere-diary {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e5e7eb;
}

.myelite-starthere-diarylist {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .3rem 1.5rem;
}

.myelite-starthere-diarylist li {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .25rem 0;
}

.myelite-starthere-diarydate {
    flex: 0 0 3.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--myelite-blue);
}

.myelite-starthere-diaryname {
    flex: 1 1 auto;
}

.myelite-starthere-diarytype {
    flex: 0 0 auto;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

/* ---- The sign-in button --------------------------------------------------- */
/* Gibbon's submit buttons are a near-black gradient. On a page that is
   otherwise the school's green and gold, the one button somebody has to press
   should be the school's green too. */
#login input[type="submit"],
.loginFormBox input[type="submit"],
form input[type="submit"].button,
input[type="submit"] {
    background: var(--myelite-blue);
    background-image: none;
    border-color: var(--myelite-blue);
    color: #fff;
    text-shadow: none;
}

#login input[type="submit"]:hover,
.loginFormBox input[type="submit"]:hover,
form input[type="submit"].button:hover,
input[type="submit"]:hover {
    background: var(--myelite-blue-dark);
    border-color: var(--myelite-blue-dark);
    color: #fff;
}

/* ---- The staff guide ------------------------------------------------------ */
/* One long page, meant to be skimmed, searched with the browser's own find,
   and printed. Measure is held near 70 characters because this is prose and
   full-width prose is not read. */

.myelite-guide {
    max-width: 52rem;
}

.myelite-guide h2.myelite-guide-heading {
    margin: 2.5rem 0 .25rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--myelite-blue);
    color: var(--myelite-navy);
    font-size: 1.25rem;
}

.myelite-guide h3 {
    margin: 1.5rem 0 .4rem;
    color: var(--myelite-navy);
    font-size: 1.02rem;
}

.myelite-guide p {
    line-height: 1.6;
}

/* ---- The opening explanation --------------------------------------------- */

.myelite-guide-lead {
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(20, 65, 41, .18);
    border-left: 4px solid var(--myelite-blue);
    border-radius: 8px;
    background: rgba(20, 65, 41, .04);
}

.myelite-guide-lead h2 {
    margin: 0 0 .5rem;
    color: var(--myelite-navy);
    font-size: 1.2rem;
}

.myelite-guide-split {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.myelite-guide-half {
    flex: 1 1 15rem;
    padding: .85rem 1rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
}

.myelite-guide-half h4 {
    margin: 0 0 .3rem;
    color: var(--myelite-blue);
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.myelite-guide-half p {
    margin: 0;
    font-size: .9rem;
}

/* ---- Contents ------------------------------------------------------------- */

.myelite-guide-contents {
    margin: 1.75rem 0;
    padding: .9rem 1.15rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
}

.myelite-guide-contents h3 {
    margin: 0 0 .5rem;
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
}

.myelite-guide-contents ul {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- A task --------------------------------------------------------------- */

.myelite-guide-task {
    margin-bottom: 1.5rem;
}

.myelite-guide-intro {
    margin: 0 0 .5rem;
    color: #4b5563;
}

.myelite-guide-steps {
    margin: 0;
    padding-left: 1.3rem;
}

.myelite-guide-steps li {
    margin-bottom: .45rem;
    line-height: 1.55;
}

.myelite-guide-steps li::marker {
    color: var(--myelite-blue);
    font-weight: 700;
}

/* A link to the screen the step is about: it should look like somewhere to
   go, not like emphasis in the sentence. */
.myelite-guide-link {
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Cautions ------------------------------------------------------------- */

.myelite-guide-note,
.myelite-guide-callout {
    margin: .7rem 0 0;
    padding: .7rem .9rem;
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1.55;
}

/* A note qualifies the task above it. */
.myelite-guide-note {
    border-left: 3px solid var(--myelite-yellow);
    background: rgba(225, 167, 48, .1);
    color: #4a3708;
}

/* A callout is the one thing in the section that must not be missed. */
.myelite-guide-callout {
    border-left: 3px solid var(--myelite-blue);
    background: rgba(20, 65, 41, .07);
    color: var(--myelite-navy-deep);
}

/* ---- Troubleshooting ------------------------------------------------------ */

.myelite-guide-problems {
    margin: 0;
}

.myelite-guide-problems dt {
    margin-top: .9rem;
    color: var(--myelite-navy);
    font-weight: 600;
}

.myelite-guide-problems dd {
    margin: .15rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid rgba(0, 0, 0, .1);
    color: #4b5563;
    line-height: 1.55;
}

.myelite-guide-foot {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    color: #6b7280;
    font-size: .9rem;
}

/* Printing: somebody will put this on the wall by the front desk. Links are
   worth nothing on paper, so they lose their decoration but keep their
   weight, and the contents list goes entirely. */
@media print {
    .myelite-guide {
        max-width: none;
    }

    .myelite-guide-contents {
        display: none;
    }

    .myelite-guide-task {
        break-inside: avoid;
    }

    .myelite-guide-lead,
    .myelite-guide-note,
    .myelite-guide-callout {
        border: 1px solid #999;
        background: none;
        print-color-adjust: exact;
    }
}

/* The guide, offered on the dashboard where somebody is standing when they
   realise they do not know how to do something. */
.myelite-starthere-guide {
    margin: 1.5rem 0 0;
    padding: .75rem 1rem;
    border: 1px dashed rgba(20, 65, 41, .3);
    border-radius: 6px;
    background: rgba(20, 65, 41, .04);
}

.myelite-starthere-guide a {
    font-weight: 600;
}