/*
 * Study Goal section (Forms v2 FM18, xStudyGoal.js): the course finder and the course cards. Part of the public form
 * design system (xFormUI.css): flat (border-radius 0, no shadows), theme colours through the --xf-* tokens (which
 * come from --color1 / --color1_contrast and the Bootstrap body tokens, so the nine themes and dark mode work),
 * 16 px text in fields, 48 px touch targets, one grid with the rest of the form.
 */

.xsg {
    --xsg-accent: var(--xf-accent, var(--color1, #0b5cad));
    --xsg-on-accent: var(--xf-on-accent, var(--color1_contrast, #fff));
    --xsg-text: var(--xf-text, var(--bs-body-color, #1d2125));
    --xsg-bg: var(--xf-bg, var(--bs-body-bg, #fff));
    --xsg-muted: var(--xf-muted, color-mix(in srgb, var(--xsg-text) 66%, var(--xsg-bg)));
    --xsg-line: var(--xf-line, color-mix(in srgb, var(--xsg-text) 16%, var(--xsg-bg)));
    --xsg-field: var(--xf-field, color-mix(in srgb, var(--xsg-text) 42%, var(--xsg-bg)));
    --xsg-tint: var(--xf-tint, color-mix(in srgb, var(--xsg-accent) 7%, var(--xsg-bg)));
    --xsg-soft: var(--xf-soft, color-mix(in srgb, var(--xsg-text) 4%, var(--xsg-bg)));
    color: var(--xsg-text);
    font-size: 16px;
}
.xsg [hidden] { display: none !important; }

/* ---------- Course cards: the Client's courses, in order of preference ---------- */
.xsg .xsg-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.xsg .xsg-card {
    border: 1px solid var(--xsg-line); border-inline-start: 4px solid var(--xsg-accent); border-radius: 0;
    background: var(--xsg-bg); padding: 14px 16px 16px;
}
.xsg .xsg-card__head { display: flex; align-items: flex-start; gap: 12px; }
/* The preference number: a tile in the strong theme colour with its contrast colour (CLAUDE.md theming rule). */
.xsg .xsg-card__no {
    flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--xsg-accent); color: var(--xsg-on-accent); font-weight: 700; font-size: 16px;
}
.xsg .xsg-card__main { flex: 1 1 auto; min-width: 0; }
.xsg .xsg-card__title { margin: 2px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.xsg .xsg-card__title:focus { outline: 2px solid var(--xsg-accent); outline-offset: 2px; }
.xsg .xsg-card__code { font-size: 14px; font-weight: 600; color: var(--xsg-muted); white-space: nowrap; }
.xsg .xsg-card__meta { margin: 2px 0 0; font-size: 15px; color: var(--xsg-muted); line-height: 1.4; }
.xsg .xsg-card__tools { flex: 0 0 auto; display: flex; gap: 4px; }
.xsg .xsg-tool {
    min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--xsg-bg); color: var(--xsg-text); border: 1px solid var(--xsg-field); border-radius: 0; font-size: 15px; cursor: pointer;
}
.xsg .xsg-tool:hover { border-color: var(--xsg-accent); color: var(--xsg-accent); }
.xsg .xsg-tool:focus-visible { outline: 2px solid var(--xsg-accent); outline-offset: 1px; }
.xsg .xsg-card__fee { margin: 12px 0 0; padding: 10px 12px; background: var(--xsg-soft); border: 1px solid var(--xsg-line); font-size: 15px; line-height: 1.5; }
.xsg .xsg-fee__label { color: var(--xsg-muted); margin-inline-end: 6px; }
.xsg .xsg-fee__value { font-weight: 700; font-size: 16px; }
.xsg .xsg-fee__year, .xsg .xsg-fee__note { color: var(--xsg-muted); white-space: nowrap; }
.xsg .xsg-fee__year::before, .xsg .xsg-fee__note::before { content: "·"; margin: 0 6px; }
.xsg .xsg-card__units { margin: 10px 0 0; font-size: 15px; color: var(--xsg-muted); }
.xsg .xsg-card__grid { margin: 0; }
/* Campus, duration and intake start on one line: a long campus name wraps inside its own box and does not push the
   other two down (the form's bottom alignment is for single questions of different label lengths). */
.xf2 .xsg .xsg-card__grid > [class*="col-md"] { justify-content: flex-start !important; }
.xsg .xsg-card__grid label.form-label { margin-top: 14px !important; }
.xsg .xsg-card__hidden { display: none; }
@media (max-width: 575.98px) {
    .xsg .xsg-card { padding: 12px 12px 14px; }
    .xsg .xsg-tool__text { display: none; }
}

/* A choice with one answer, shown as text in a box of the same height as a field. */
.xsg .xsg-static {
    min-height: 48px; display: flex; align-items: center; padding: 10px 12px; font-size: 16px; line-height: 1.4;
    border: 1px solid var(--xsg-line); background: var(--xsg-soft); color: var(--xsg-text); border-radius: 0;
}

/* ---------- The finder ---------- */
.xsg .xsg-finder { margin-top: 4px; }
.xsg .xsg-cards:not([hidden]) + .xsg-finder { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--xsg-line); }
.xsg .xsg-finder__title { margin: 16px 0 0; font-size: 17px; font-weight: 700; }
.xsg .xsg-filters { margin: 0; }
.xsg label .xsg-cricos-btn { margin-inline-start: 10px; font-weight: 600; font-size: 15px; }
.xsg .xsg-help a { color: var(--xsg-accent); text-decoration: underline; }
.xsg .xsg-search { appearance: none; }
.xsg .xsg-search::-webkit-search-cancel-button { cursor: pointer; }

.xsg .xsg-results { margin-top: 12px; min-height: 24px; transition: opacity .15s; }
.xsg .xsg-results.is-loading { opacity: .55; }
.xsg .xsg-hint, .xsg .xsg-count { margin: 0; font-size: 15px; color: var(--xsg-muted); }
.xsg .xsg-count { margin-bottom: 6px; }
.xsg .xsg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--xsg-line); }
.xsg .xsg-result {
    width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0;
    text-align: start; background: var(--xsg-bg); color: var(--xsg-text); border: 1px solid var(--xsg-line); border-top: 0;
    border-radius: 0; font: inherit; cursor: pointer;
}
.xsg .xsg-result:hover:not([disabled]) { background: var(--xsg-tint); }
.xsg .xsg-result:focus-visible { outline: 2px solid var(--xsg-accent); outline-offset: -2px; }
.xsg .xsg-result[disabled] { cursor: default; color: var(--xsg-muted); }
.xsg .xsg-result__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xsg .xsg-result__t { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.xsg .xsg-result__m { font-size: 14px; color: var(--xsg-muted); line-height: 1.35; }
.xsg .xsg-result__add {
    flex: 0 0 auto; min-width: 84px; padding: 6px 12px; text-align: center; font-weight: 700; font-size: 15px;
    border: 2px solid var(--xsg-accent); color: var(--xsg-accent);
}
.xsg .xsg-result:hover:not([disabled]) .xsg-result__add { background: var(--xsg-accent); color: var(--xsg-on-accent); }
.xsg .xsg-result[disabled] .xsg-result__add { border-color: var(--xsg-line); color: var(--xsg-muted); }
.xsg .xsg-more { margin-top: 8px; }
.xsg .xsg-error { margin: 10px 0 0; color: var(--xf-err, #b3261e); font-weight: 600; font-size: 15px; }

.xsg .xsg-typed { margin-top: 12px; padding: 4px 16px 16px; border: 1px solid var(--xsg-line); background: var(--xsg-soft); }
.xsg .xsg-typed__intro { margin: 12px 0 0; font-size: 15px; color: var(--xsg-muted); }
.xsg .xsg-typed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.xsg .xsg-finder__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }

/* Buttons and links of the section */
.xsg .xsg-btn {
    min-height: 48px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700;
    background: var(--xsg-bg); color: var(--xsg-accent); border: 2px solid var(--xsg-accent); border-radius: 0; cursor: pointer;
}
.xsg .xsg-btn:hover { background: var(--xsg-tint); }
.xsg .xsg-btn--primary { background: var(--xsg-accent); color: var(--xsg-on-accent); }
.xsg .xsg-btn--primary:hover { background: var(--xsg-accent); filter: brightness(1.08); }
.xsg .xsg-btn:focus-visible { outline: 3px solid var(--xsg-text); outline-offset: 2px; }
.xsg .xsg-add { margin-top: 16px; }
.xsg .xsg-link, .xtr .xsg-link, .xoshc .xsg-link, .xf2 .xvisa-attach {
    background: none; border: 0; padding: 4px 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--xsg-accent); font: inherit; font-size: 15px;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.xsg .xsg-link:focus-visible, .xtr .xsg-link:focus-visible, .xoshc .xsg-link:focus-visible, .xf2 .xvisa-attach:focus-visible { outline: 2px solid var(--xsg-accent); outline-offset: 2px; }
.xsg .xsg-max { margin: 12px 0 0; font-size: 15px; color: var(--xsg-muted); }
.xsg .xsg-note { margin: 12px 0 0; color: var(--xsg-muted); }