/*
 * A course's credit details by location (protected/views/site/course_details.php, every source; the
 * script is jscripts/credit-details.js). Loaded through $this->headers after the layout's own
 * stylesheets, then, where the theme has one, css/custom/<theme>/credit-details.css on top of it.
 * The page renders inside the legacy stack on most themes (css/bootstrap-legacy.css, 10px root), so
 * every size here is px on purpose.
 *
 * The page head (the theme's own h1, the lead, a location picker), then one white card per location
 * on a cream panel: the course page's cream information surface, so the page reads as part of the
 * same family on every theme. In each card the location, its status, and label / value rows with
 * hairlines between them; the label column is as wide as its longest label and never wraps (on a
 * phone, under 576px, each label sits over its value). Two columns of cards at most, from 992px: at
 * three the values ran to two or three lines.
 *
 * Section 0 declares the --cr-* tokens on .cr-page and every rule reads only those. The look is
 * neutral on purpose: the statuses carry fixed meanings (green available, amber pending, blue from a
 * future date), so no theme colour is needed and none can clash. A theme with its own look
 * (InsuranceStudy) remaps the tokens in its override file.
 */

/* 0. Tokens ------------------------------------------------------------------------------- */
.cr-page {
    --cr-ink: #1F2428;          /* location names, the picker's label */
    --cr-text: #2B2F33;         /* values */
    --cr-muted: #5D646B;        /* the lead, labels */
    --cr-line: #E2E6E9;         /* card borders, hairlines */
    --cr-surface: #fff;         /* the cards */
    --cr-well: #F7F4EF;         /* the panel behind the cards: the course page's cream */
    --cr-well-pad: 20px;
    --cr-radius: 8px;
    --cr-shadow: 0 1px 2px rgba(31, 36, 40, .05), 0 1px 3px rgba(31, 36, 40, .06);
    --cr-font-display: var(--theme-font-display, var(--font-display, inherit));
    --cr-font-lead: inherit;
    --cr-lead-size: 17px;
    --cr-ok: #3F7A44;           /* CE available: 5.2:1 on white */
    --cr-ok-icon: #3F7A44;
    --cr-wait: #8C6319;         /* Approval pending: 5.4:1 on white */
    --cr-wait-icon: #B8791A;    /* 3.6:1, an icon only */
    --cr-info: #275A9C;         /* Available from a future date */
    color: var(--cr-text);
}

/* 1. Page head ---------------------------------------------------------------------------- */
/* clear of the theme's header (several column layouts start their content right under it) */
.cr-page .cr-head {
    padding-top: 20px;
}
/* the h1 is the theme's own (size, face and colour) */
.cr-page .cr-head h1 {
    margin: 0 0 10px;
}
.cr-page .cr-lead {
    max-width: 68ch;
    margin: 0;
    font-family: var(--cr-font-lead);
    font-size: var(--cr-lead-size);
    line-height: 1.6;
    color: var(--cr-muted);
}
.cr-page .cr-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 22px 0 0;
}
.cr-page .cr-picker .form-label {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cr-ink);
}
.cr-page .cr-picker .form-select {
    width: auto;
    min-width: 260px;
    height: auto;
    padding: 8px 36px 8px 12px;
    font-size: 15px;
    line-height: 1.5;
}
@media (max-width: 575.98px) {
    .cr-page .cr-lead {
        font-size: 16px;
    }
    .cr-page .cr-picker .form-select {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* 2. The cards ---------------------------------------------------------------------------- */
.cr-page .cr-well {
    margin: 28px 0 0;
    padding: var(--cr-well-pad);
    background: var(--cr-well);
    border-radius: var(--cr-radius);
}
.cr-page .cr-grid {
    display: grid;
    gap: 20px;
}
@media (min-width: 992px) {
    .cr-page .cr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.cr-page .cr-state {
    background: var(--cr-surface);
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    padding: 18px 22px 10px;
}
.cr-page .cr-state-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cr-line);
}
.cr-page .cr-state-name {
    margin: 0;
    font-family: var(--cr-font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--cr-ink);
    text-transform: none;
}
@media (max-width: 575.98px) {
    .cr-page .cr-well {
        margin-left: -8px;
        margin-right: -8px;
        padding: 12px 8px;
    }
    .cr-page .cr-state {
        padding: 16px 18px 8px;
    }
}

/* each status in its own colour, the text dark enough for 14px (a grey "Approval pending" was easy
   to miss); the icon may be brighter */
.cr-page .cr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.cr-page .cr-status--approved {
    color: var(--cr-ok);
}
.cr-page .cr-status--approved i {
    color: var(--cr-ok-icon);
}
.cr-page .cr-status--pending {
    color: var(--cr-wait);
}
.cr-page .cr-status--pending i {
    color: var(--cr-wait-icon);
}
.cr-page .cr-status--future {
    color: var(--cr-info);
}

/* 3. Label / value rows --------------------------------------------------------------------- */
/* the rows' <div>s step out of the layout, so every label shares one column sized to the longest.
   The legacy layer sets dt / dd line-height and Bootstrap bolds dt and spaces dd: both are reset
   on the cells themselves. */
.cr-page .cr-kv {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 20px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}
.cr-page .cr-kv > div {
    display: contents;
}
.cr-page .cr-kv dt,
.cr-page .cr-kv dd {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--cr-line);
    line-height: inherit;
}
.cr-page .cr-kv > div:first-child > dt,
.cr-page .cr-kv > div:first-child > dd {
    border-top: 0;
}
.cr-page .cr-kv dt {
    font-weight: 400;
    color: var(--cr-muted);
    white-space: nowrap;
}
.cr-page .cr-kv dd {
    color: var(--cr-text);
    overflow-wrap: anywhere;
}
/* the approved credits come as one block per credit type (creditBreakdownByID) */
.cr-page .cr-kv .smallcredit {
    font-size: inherit;
}
.cr-page .cr-kv .smallcredit + .smallcredit {
    margin-top: 2px;
}
@media (max-width: 575.98px) {
    .cr-page .cr-kv {
        grid-template-columns: minmax(0, 1fr);
    }
    .cr-page .cr-kv dt {
        padding-bottom: 0;
        white-space: normal;
        font-size: 13px;
    }
    .cr-page .cr-kv dd {
        border-top: 0;
        padding-top: 2px;
    }
}