/*
 * The connected dynamic sections of Forms v2 FM23 (xFormDynamic.js): Who is travelling, the program picker, funds and
 * sponsors, the English test check. Part of the public form design system (xFormUI.css): flat (border-radius 0, no
 * shadows), theme colours through the --xf-* tokens (from --color1 / --color1_contrast and the Bootstrap body tokens,
 * so the nine themes and dark mode work), 16 px text in fields, 44-48 px touch targets, the FM4 grid.
 */
.xdy {
    --xdy-accent: var(--xf-accent, var(--color1, #0b5cad));
    --xdy-on-accent: var(--xf-on-accent, var(--color1_contrast, #fff));
    --xdy-text: var(--xf-text, var(--bs-body-color, #1d2125));
    --xdy-bg: var(--xf-bg, var(--bs-body-bg, #fff));
    --xdy-muted: var(--xf-muted, color-mix(in srgb, var(--xdy-text) 66%, var(--xdy-bg)));
    --xdy-line: var(--xf-line, color-mix(in srgb, var(--xdy-text) 16%, var(--xdy-bg)));
    --xdy-field: var(--xf-field, color-mix(in srgb, var(--xdy-text) 42%, var(--xdy-bg)));
    --xdy-tint: var(--xf-tint, color-mix(in srgb, var(--xdy-accent) 7%, var(--xdy-bg)));
    --xdy-soft: var(--xf-soft, color-mix(in srgb, var(--xdy-text) 4%, var(--xdy-bg)));
    --xdy-warn: var(--xf-warn, color-mix(in srgb, #b26a00 80%, var(--xdy-text)));
    --xsg-accent: var(--xdy-accent);
    color: var(--xdy-text);
    font-size: 16px;
}
.xdy [hidden] { display: none !important; }
/* Rows inside the section keep to its width (Bootstrap's negative row margins pushed phones wider, FM19). */
.xdy .row { margin-inline: 0; }
.xdy .row > [class*="col"] { padding-inline: 0; }
@media (min-width: 768px) {
    .xdy .row > [class*="col-md-"]:not(.col-md-12) { padding-inline-end: 16px; }
}
.xdy .xdy-intro { margin: 8px 0 0; font-size: 15px; color: var(--xdy-muted); }
.xdy .xdy-note { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--xdy-muted); min-height: 0; }
.xdy .xdy-note:empty { display: none; }
.xdy .xdy-note.is-warn { color: var(--xdy-warn); font-weight: 600; }

/* ---------- Person cards ---------- */
.xdy .xdy-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.xdy .xdy-card {
    border: 1px solid var(--xdy-line); border-inline-start: 4px solid var(--xdy-accent); border-radius: 0;
    background: var(--xdy-bg); padding: 12px 16px 16px;
}
.xdy .xdy-card__head { display: flex; align-items: center; gap: 12px; }
/* The card number: a tile in the strong theme colour with its contrast colour (CLAUDE.md theming rule). */
.xdy .xdy-card__no {
    flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--xdy-accent); color: var(--xdy-on-accent); font-weight: 700; font-size: 16px;
}
.xdy .xdy-card__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.xdy .xdy-card__title:focus { outline: 2px solid var(--xdy-accent); outline-offset: 2px; }
.xdy .xdy-card__age { font-size: 15px; font-weight: 600; color: var(--xdy-muted); white-space: nowrap; }
.xdy .xdy-card__head .xdy-remove { margin-inline-start: auto; }
.xdy .xdy-grid label.form-label { margin-top: 14px !important; }
.xdy .xdy-tool {
    min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--xdy-bg); color: var(--xdy-text); border: 1px solid var(--xdy-field); border-radius: 0; font-size: 15px; cursor: pointer;
}
.xdy .xdy-tool:hover { border-color: var(--xdy-accent); color: var(--xdy-accent); }
.xdy .xdy-tool:focus-visible { outline: 2px solid var(--xdy-accent); outline-offset: 1px; }

/* Date of birth: Day / Month / Year on one line, the same height as every field. */
.xdy .xdy-date { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr); gap: 8px; width: 100%; }
.xdy .xdy-date select { min-width: 0; padding-inline-start: 10px; padding-inline-end: 28px; }
.xdy .xdy-card__note { margin: 8px 0 0; }

/* Add buttons */
.xdy .xdy-adds { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; }
.xdy .xdy-btn {
    min-height: 48px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700;
    background: var(--xdy-bg); color: var(--xdy-accent); border: 2px solid var(--xdy-accent); border-radius: 0; cursor: pointer;
}
.xdy .xdy-btn:hover { background: var(--xdy-tint); }
.xdy .xdy-btn:focus-visible { outline: 3px solid var(--xdy-text); outline-offset: 2px; }
.xdy .xdy-filebar { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--xdy-line); background: var(--xdy-soft); }
.xdy .xdy-filebar__t { margin: 0 0 6px; font-size: 15px; color: var(--xdy-muted); }
.xdy .xdy-fromfile { min-height: 44px; font-size: 15px; padding: 6px 12px; margin: 4px 8px 0 0; }
.xdy .xdy-max { margin: 12px 0 0; font-size: 15px; color: var(--xdy-muted); }

/* The one-line summary of the group: who travels and the OSHC cover it needs. */
.xdy .xdy-sum {
    margin: 16px 0 0; padding: 10px 12px; border: 1px solid var(--xdy-line); border-inline-start: 4px solid var(--xdy-accent);
    background: var(--xdy-tint); font-size: 15px; line-height: 1.5;
}

@media (max-width: 575.98px) {
    .xdy .xdy-card { padding: 10px 12px 14px; }
    .xdy .xdy-tool__text { display: none; }
    .xdy .xdy-btn { width: 100%; justify-content: center; }
}

/* ---------- The program picker ---------- */
.xdy .xdy-pg__course {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 14px; margin-top: 4px;
    border: 1px solid var(--xdy-line); border-inline-start: 4px solid var(--xdy-accent); background: var(--xdy-soft);
}
.xdy .xdy-pg__title { font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.xdy .xdy-pg__code, .xdy .xdy-pg__fee { font-size: 14px; font-weight: 600; color: var(--xdy-muted); white-space: nowrap; }
/* A choice with one answer, shown as text in a box of the same height as a field (Study Goal's rule). */
.xdy .xdy-static {
    min-height: 48px; display: flex; align-items: center; padding: 10px 12px; font-size: 16px; line-height: 1.4; width: 100%;
    border: 1px solid var(--xdy-line); background: var(--xdy-soft); color: var(--xdy-text); border-radius: 0;
}
.xdy .xdy-link {
    background: none; border: 0; padding: 4px 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--xdy-accent);
    font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.xdy .xdy-link:focus-visible { outline: 2px solid var(--xdy-accent); outline-offset: 2px; }

/* ---------- Funds for your studies ---------- */
.xdy .xdy-fn__h { margin: 16px 0 0; font-size: 17px; font-weight: 700; }
.xdy .xdy-fn__need { margin-top: 4px; padding: 4px 14px 12px; border: 1px solid var(--xdy-line); border-inline-start: 4px solid var(--xdy-accent); background: var(--xdy-soft); }
.xdy .xdy-fn__need .xdy-fn__h { margin-top: 10px; }
.xdy .xdy-fn__rows { margin: 8px 0 0; }
.xdy .xdy-fn__rows .xcost__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--xdy-line); }
.xdy .xdy-fn__rows dt { font-weight: 400; display: flex; flex-direction: column; }
.xdy .xdy-fn__rows dt small { color: var(--xdy-muted); font-size: 14px; }
.xdy .xdy-fn__rows dd { margin: 0; font-weight: 600; white-space: nowrap; }
.xdy .xdy-fn__rows .xdy-fn__total { border-bottom: 0; }
.xdy .xdy-fn__rows .xdy-fn__total dt, .xdy .xdy-fn__rows .xdy-fn__total dd { font-weight: 700; }
.xdy .xdy-sum.is-short { border-inline-start-color: var(--xdy-warn); }

/* ---------- Your English test ---------- */
.xdy .xdy-en__check { margin-top: 16px; padding: 4px 14px 12px; border: 1px solid var(--xdy-line); border-inline-start: 4px solid var(--xdy-accent); background: var(--xdy-soft); }
.xdy .xdy-en__check.is-warn { border-inline-start-color: var(--xdy-warn); }
.xdy .xdy-en__lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.xdy .xdy-en__lines li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.xdy .xdy-en__lines li i { margin-top: 3px; flex: 0 0 16px; }
.xdy .xdy-en__lines li.is-ok i { color: var(--xdy-accent); }
.xdy .xdy-en__lines li.is-warn i { color: var(--xdy-warn); }
/* The four bands: one line of four on wide screens, two by two on phones, with a gap between the boxes. */
.xdy .row.xdy-en__bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
.xdy .row.xdy-en__bands > [class*="col"] { width: auto; max-width: none; flex: none; padding-inline: 0; }
@media (max-width: 767.98px) {
    .xdy .row.xdy-en__bands { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}