/*
 * Forms v2 FM8 - where visitors find forms: the forms panel on institution and course pages, and the forms lists
 * (/forms, /forms/list/{id}). Built on FM4's design system (xFormUI.css): the same tokens, flat (border-radius 0,
 * no decorative shadows or gradients), states by colour and borders, theme colours through --color1 /
 * --color1_contrast and the Bootstrap body tokens (nine themes, dark mode), mobile first (390 px first, touch targets
 * at least 48 px, calls to action never shrunk on phones). Everything sits under .xfp. The chrome follows the page
 * direction (logical properties); form names are English left-to-right islands (<bdi dir="ltr">).
 */

.xfp {
    --xfp-accent: var(--color1, #0b5cad);
    --xfp-on-accent: var(--color1_contrast, #fff);
    --xfp-text: var(--bs-body-color, #1d2125);
    --xfp-bg: var(--bs-body-bg, #fff);
    --xfp-muted: color-mix(in srgb, var(--xfp-text) 66%, var(--xfp-bg));
    --xfp-line: color-mix(in srgb, var(--xfp-text) 16%, var(--xfp-bg));
    --xfp-tint: color-mix(in srgb, var(--xfp-accent) 7%, var(--xfp-bg));
    --xfp-soft: color-mix(in srgb, var(--xfp-text) 4%, var(--xfp-bg));
    color: var(--xfp-text);
    font-size: 16px;
    line-height: 1.5;
    text-align: start;
}
.xfp *, .xfp *::before, .xfp *::after { box-sizing: border-box; }
.xfp a { text-underline-offset: 3px; }
.xfp :focus-visible { outline: 3px solid var(--xfp-accent); outline-offset: 2px; }
/* Arrows point the reading way. */
[dir="rtl"] .xfp-flip, .xfp[dir="rtl"] .xfp-flip { transform: scaleX(-1); }

/* ====================================================================================================
   The panel (institution and course pages)
   ==================================================================================================== */
.xfp-panel {
    border: 1px solid var(--xfp-line);
    border-top: 3px solid var(--xfp-accent);
    background: var(--xfp-bg);
    margin: 0 0 20px;
}
.xfp-panel__title {
    font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0; padding: 14px 16px 10px;
    color: var(--xfp-text);
}
.xfp-panel__rows { display: flex; flex-direction: column; }
.xfp-row {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 12px 16px;
    border-top: 1px solid var(--xfp-line);
    color: var(--xfp-text); text-decoration: none;
}
.xfp-row:hover, .xfp-row:focus-visible { background: var(--xfp-tint); color: var(--xfp-text); }
.xfp-row:hover .xfp-row__label, .xfp-row:focus-visible .xfp-row__label { text-decoration: underline; }
/* Icon inside a coloured tile: the strong theme colour and its contrast (CLAUDE.md theming rule). */
.xfp-row__icon {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--xfp-accent); color: var(--xfp-on-accent); font-size: 18px;
}
.xfp-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xfp-row__label { font-size: 16px; font-weight: 700; line-height: 1.3; }
.xfp-row__form { font-size: 14px; line-height: 1.35; color: var(--xfp-muted); overflow-wrap: anywhere; }
.xfp-row__via { font-size: 12px; color: var(--xfp-muted); }
.xfp-row__facts { font-size: 13px; color: var(--xfp-muted); }
.xfp-row__facts span + span::before { content: "·"; margin: 0 6px; }
.xfp-row__go { flex: 0 0 auto; color: var(--xfp-accent); }

/* The main call to action (Apply / Apply for this course): a filled button row. */
.xfp-row--main { background: var(--xfp-accent); color: var(--xfp-on-accent); border-top-color: var(--xfp-accent); }
.xfp-row--main:hover, .xfp-row--main:focus-visible {
    background: color-mix(in srgb, var(--xfp-accent) 86%, #000); color: var(--xfp-on-accent);
}
.xfp-row--main .xfp-row__icon { background: var(--xfp-on-accent); color: var(--xfp-accent); }
.xfp-row--main .xfp-row__form, .xfp-row--main .xfp-row__facts, .xfp-row--main .xfp-row__via, .xfp-row--main .xfp-row__go {
    color: var(--xfp-on-accent);
}
.xfp-row--main .xfp-row__form, .xfp-row--main .xfp-row__facts, .xfp-row--main .xfp-row__via { opacity: .92; }

.xfp-panel__all {
    display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 10px 16px;
    border-top: 1px solid var(--xfp-line); font-weight: 600; color: var(--xfp-accent); text-decoration: none;
}
.xfp-panel__all:hover, .xfp-panel__all:focus-visible { text-decoration: underline; background: var(--xfp-soft); }
.xfp-panel__count { color: var(--xfp-muted); font-weight: 400; }

/* Course pages: the desktop column keeps the panel in view while the form scrolls. */
@media (min-width: 992px) {
    .xfp-aside { position: sticky; top: 16px; }
}
/* The inline copy (phones and tablets) sits between the overview and the form. */
.xfp-panel--inline { margin: 16px 0 20px; }

/* ====================================================================================================
   List pages (/forms, /forms/list/{id})
   ==================================================================================================== */
.xfp-list { padding: 8px 0 24px; }
.xfp-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 20px; }
.xfp-head__logo { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--xfp-line); padding: 4px; }
.xfp-head__text { min-width: 0; }
.xfp-head__title { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 0 0 4px; color: var(--xfp-text); text-align: start; }
.xfp-head__line { margin: 0; font-size: 15px; color: var(--xfp-muted); }
.xfp-head__back { margin: 4px 0 0; font-size: 15px; }
.xfp-head__back a { color: var(--xfp-accent); }
@media (min-width: 768px) {
    .xfp-head__title { font-size: 30px; }
}

/* Toolbar: search, level chips, purpose links. */
.xfp-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.xfp-search { position: relative; }
.xfp-search > .fa { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--xfp-muted); pointer-events: none; }
.xfp-search__input {
    width: 100%; min-height: 48px; font-size: 16px; padding: 10px 14px; padding-inline-start: 42px;
    border: 1px solid color-mix(in srgb, var(--xfp-text) 42%, var(--xfp-bg)); border-radius: 0;
    background: var(--xfp-bg); color: var(--xfp-text);
}
.xfp-search__input:focus { border-color: var(--xfp-accent); outline: 2px solid var(--xfp-accent); outline-offset: 0; }
.xfp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xfp-chips__label { font-size: 14px; font-weight: 600; color: var(--xfp-muted); margin-inline-end: 4px; }
.xfp-chip {
    min-height: 40px; padding: 6px 14px; font-size: 15px; line-height: 1.2;
    border: 1px solid var(--xfp-line); border-radius: 0; background: var(--xfp-bg); color: var(--xfp-text); cursor: pointer;
}
.xfp-chip:hover { border-color: var(--xfp-accent); }
.xfp-chip[aria-pressed="true"] { background: var(--xfp-accent); color: var(--xfp-on-accent); border-color: var(--xfp-accent); font-weight: 600; }
.xfp-jump {
    display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin;
    border-bottom: 1px solid var(--xfp-line); -webkit-overflow-scrolling: touch;
}
.xfp-jump__link {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
    color: var(--xfp-text); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; font-size: 15px;
}
.xfp-jump__link:hover, .xfp-jump__link:focus-visible { border-bottom-color: var(--xfp-accent); color: var(--xfp-accent); }
.xfp-jump__n { font-size: 12px; padding: 0 6px; background: var(--xfp-soft); color: var(--xfp-muted); }
@media (min-width: 992px) {
    .xfp-tools { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; align-items: center; column-gap: 20px; }
    .xfp-jump { grid-column: 1 / -1; }
}

/* Groups and cards */
.xfp-group { margin: 0 0 28px; scroll-margin-top: 16px; }
.xfp-group__title {
    display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; line-height: 1.3;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--xfp-line); color: var(--xfp-text);
}
.xfp-group__icon {
    flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--xfp-accent); color: var(--xfp-on-accent); font-size: 15px;
}
.xfp-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .xfp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .xfp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xfp-card {
    display: flex; flex-direction: column; gap: 8px; padding: 16px;
    border: 1px solid var(--xfp-line); background: var(--xfp-bg);
}
.xfp-card:hover, .xfp-card:focus-within { border-color: var(--xfp-accent); }
.xfp-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xfp-card .xf-tag {
    display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    background: var(--xfp-accent); color: var(--xfp-on-accent);
}
.xfp-tag { display: inline-block; padding: 1px 8px; font-size: 13px; border: 1px solid var(--xfp-line); color: var(--xfp-muted); }
.xfp-tag--mcf { border-style: dashed; }
.xfp-card__title { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; text-align: start; }
.xfp-card__title a { color: var(--xfp-text); text-decoration: none; overflow-wrap: anywhere; }
.xfp-card__title a:hover, .xfp-card__title a:focus-visible { color: var(--xfp-accent); text-decoration: underline; }
.xfp-card__desc {
    margin: 0; font-size: 15px; color: var(--xfp-muted); text-align: start;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xfp-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--xfp-muted); }
.xfp-card__facts .fa { color: var(--xfp-accent); margin-inline-end: 4px; }
.xfp-need { font-size: 14px; }
.xfp-need summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--xfp-text); }
.xfp-need summary::marker { color: var(--xfp-accent); }
.xfp-need__n { color: var(--xfp-muted); font-weight: 400; }
.xfp-need__list { margin: 6px 0 0; padding-inline-start: 20px; text-align: start; }
.xfp-need__if { color: var(--xfp-muted); font-size: 13px; }
.xfp-card__go {
    margin-top: auto; align-self: stretch; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--xfp-accent); border-radius: 0; color: var(--xfp-accent); background: var(--xfp-bg); font-weight: 600;
}
.xfp-card__go:hover, .xfp-card__go:focus-visible { background: var(--xfp-accent); color: var(--xfp-on-accent); }
@media (min-width: 768px) { .xfp-card__go { align-self: flex-start; padding-inline: 20px; } }

/* Institutions with forms (the /forms index) */
.xfp-insts { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 768px) { .xfp-insts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .xfp-insts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xfp-inst {
    display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px;
    border: 1px solid var(--xfp-line); color: var(--xfp-text); text-decoration: none;
}
.xfp-inst:hover, .xfp-inst:focus-visible { border-color: var(--xfp-accent); background: var(--xfp-tint); color: var(--xfp-text); }
.xfp-inst__logo { flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; background: #fff; border: 1px solid var(--xfp-line); display: inline-flex; align-items: center; justify-content: center; color: var(--xfp-muted); }
.xfp-inst__name { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.3; }
.xfp-inst__count { flex: 0 0 auto; font-size: 13px; color: var(--xfp-muted); }

.xfp-empty { padding: 24px 16px; border: 1px dashed var(--xfp-line); text-align: center; }
.xfp-empty p { margin: 0 0 12px; font-size: 16px; }
.xfp-empty .btn { border-radius: 0; min-height: 44px; }
.xfp [hidden] { display: none !important; }

/* The site stylesheet colours every link with !important (ui.style.css); the panel's rows and the cards are links
   drawn as controls, so their own colours are restated with the same weight. */
.xfp a.xfp-row, .xfp a.xfp-row:hover, .xfp a.xfp-row:focus-visible,
.xfp a.xfp-inst, .xfp a.xfp-inst:hover, .xfp a.xfp-jump__link,
.xfp .xfp-card__title a { color: var(--xfp-text) !important; }
.xfp a.xfp-row--main, .xfp a.xfp-row--main:hover, .xfp a.xfp-row--main:focus-visible,
.xfp a.xfp-card__go:hover, .xfp a.xfp-card__go:focus-visible { color: var(--xfp-on-accent) !important; }
.xfp a.xfp-panel__all, .xfp a.xfp-card__go, .xfp .xfp-head__back a,
.xfp a.xfp-jump__link:hover, .xfp a.xfp-jump__link:focus-visible,
.xfp .xfp-card__title a:hover, .xfp .xfp-card__title a:focus-visible { color: var(--xfp-accent) !important; }

/* MyCourseFinder's forms opened for an institution, under the institution's own forms. */
.xfp-sub { margin-top: 20px; }
.xfp-sub__title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; color: var(--xfp-muted); text-align: start; }
/* "What you need": our own chevron (the site resets the native marker). */
.xfp-need summary { list-style: none; }
.xfp-need summary::-webkit-details-marker { display: none; }
.xfp-need__chev { font-size: 12px; color: var(--xfp-accent); transition: transform .15s; }
.xfp-need[open] .xfp-need__chev { transform: rotate(180deg); }
@media (min-width: 992px) {
    .xfp-tools { grid-template-columns: minmax(280px, 440px) 1fr; }
}