/*
 * CAREER, LICENCES, THE DIALOG AND THE FIRST-LOGIN WINDOW.
 * Light, scoped (.sch-cp, .sch-cd, .sch-flw), logical properties throughout
 * so Arabic mirrors without a second sheet; 600px and below: the dialog and
 * the window fill the screen, rows stack.
 */
.sch-cp, .sch-cd, .sch-flw {
	--sch-ink: #122B46;
	--sch-ink-soft: #4d5c6d;
	--sch-ink-faint: #8a97a6;
	--sch-teal: #227F77;
	--sch-teal-dk: #1a6b63;
	--sch-line: #dfe5ec;
	--sch-soft: #f5f8fa;
	--sch-err: #b91c1c;
	color: var(--sch-ink);
}
.sch-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sch-req { color: var(--sch-err); }

/* ── the profile sections ─────────────────────────────────────────────── */
.sch-cp { margin-block: 24px 8px; display: grid; gap: 16px; }
.sch-cp-sec { background: #fff; border: 1px solid var(--sch-line); border-radius: 12px; padding: 20px 22px; }
.sch-cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.sch-cp-title { font-size: 18px; line-height: 1.3; margin: 0; color: var(--sch-ink); }
.sch-cp-add {
	background: #fff; border: 1px solid var(--sch-line); color: var(--sch-teal); border-radius: 8px;
	min-height: 36px; padding-inline: 14px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.sch-cp-add:hover { border-color: var(--sch-teal); }
.sch-cp-add:focus-visible, .sch-tl-btn:focus-visible, .sch-lic-btn:focus-visible { outline: 2px solid var(--sch-teal); outline-offset: 2px; }
.sch-cp-empty, .sch-cp-note { color: var(--sch-ink-soft); margin: 0; font-size: 15px; }
.sch-cp-legacy { color: var(--sch-ink); font-size: 15px; line-height: 1.6; white-space: normal; }

/* timeline */
.sch-tl { list-style: none; margin: 0; padding: 0; }
.sch-tl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding-block: 14px; border-block-start: 1px solid var(--sch-line); }
.sch-tl-row:first-child { border-block-start: 0; padding-block-start: 4px; }
.sch-tl-ico { inline-size: 40px; block-size: 40px; border-radius: 10px; background: #eef2f6; color: #6b7a8a; display: inline-flex; align-items: center; justify-content: center; }
.sch-tl-body { min-width: 0; }
.sch-tl-body p { margin: 0; }
.sch-tl-title { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.sch-tl-title strong { font-weight: 700; color: var(--sch-ink); }
.sch-tl-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: #eef2f6; color: var(--sch-ink-soft); font-size: 12px; font-weight: 600; vertical-align: 2px; }
.sch-tl-sub { color: var(--sch-ink); font-size: 15px; margin-block-start: 2px !important; overflow-wrap: anywhere; }
.sch-tl-meta { color: var(--sch-ink-faint); font-size: 14px; margin-block-start: 2px !important; }
.sch-tl-desc { color: var(--sch-ink-soft); font-size: 14px; line-height: 1.55; margin-block-start: 6px !important; overflow-wrap: anywhere; }
.sch-tl-act { display: flex; gap: 4px; align-items: flex-start; }
.sch-tl-btn { inline-size: 36px; block-size: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--sch-ink-faint); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sch-tl-btn:hover { background: var(--sch-soft); color: var(--sch-ink); }

/* licences */
.sch-lic { list-style: none; margin: 0 0 12px; padding: 0; }
.sch-lic-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding-block: 10px; border-block-start: 1px solid var(--sch-line); }
.sch-lic-row:first-child { border-block-start: 0; }
.sch-lic-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sch-lic-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.sch-lic-badge--ok { background: #e6f4f2; color: var(--sch-teal-dk); }
.sch-lic-badge--decl { background: #eef2f6; color: var(--sch-ink-soft); }
.sch-lic-badge--primary { background: #fff4d6; color: #7a5a00; }
.sch-lic-no { color: var(--sch-ink-faint); font-size: 13px; }
.sch-lic-act { display: flex; gap: 6px; flex-wrap: wrap; }
.sch-lic-btn { background: none; border: 0; color: var(--sch-teal); font-weight: 600; font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.sch-lic-btn--del { color: var(--sch-ink-soft); }
.sch-lic-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) auto; gap: 8px; align-items: center; }
.sch-lic-add select, .sch-lic-add input { min-height: 40px; border: 1px solid var(--sch-line); border-radius: 8px; padding-inline: 10px; font-size: 15px; background: #fff; color: var(--sch-ink); min-width: 0; inline-size: 100%; box-sizing: border-box; }
.sch-cp-msg { grid-column: 1 / -1; margin: 0; color: var(--sch-err); font-size: 14px; }
.sch-cp-msg:empty { display: none; }

/* ── the dialog and the window ────────────────────────────────────────── */
html.sch-modal-open { overflow: hidden; }
.sch-cd, .sch-flw { position: fixed; inset: 0; z-index: 100000; background: rgba(18, 43, 70, .45); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.sch-cd[hidden], .sch-flw[hidden] { display: none; }
.sch-cd { z-index: 100010; }
.sch-cd-box, .sch-flw-box { background: #fff; border-radius: 14px; inline-size: min(640px, 100%); max-block-size: calc(100vh - 48px); overflow: auto; box-shadow: 0 20px 60px rgba(18, 43, 70, .25); padding: 0 24px 20px; box-sizing: border-box; }
.sch-cd-h { position: sticky; inset-block-start: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px 12px; z-index: 1; }
.sch-cd-h h2 { font-size: 20px; line-height: 1.3; margin: 0; color: var(--sch-ink); }
.sch-cd-x { inline-size: 40px; block-size: 40px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--sch-ink-soft); cursor: pointer; border-radius: 8px; flex: 0 0 auto; }
.sch-cd-x:hover { background: var(--sch-soft); }
.sch-cd-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--sch-line); margin-block-end: 16px; overflow-x: auto; }
.sch-cd-tab { background: none; border: 0; border-block-end: 3px solid transparent; padding: 10px 12px; font-size: 15px; font-weight: 600; color: var(--sch-ink-soft); cursor: pointer; white-space: nowrap; margin-block-end: -1px; }
.sch-cd-tab[aria-selected="true"] { color: var(--sch-ink); border-block-end-color: var(--sch-teal); }
.sch-cd-tab:disabled { color: var(--sch-ink-faint); opacity: .55; cursor: default; }
.sch-cd-tab:focus-visible, .sch-cd-x:focus-visible, .sch-cd-save:focus-visible, .sch-cd-cancel:focus-visible, .sch-flw-chip:focus-visible { outline: 2px solid var(--sch-teal); outline-offset: 2px; }
.sch-cd-p[hidden] { display: none; }
.sch-cd-f, .sch-flw-f { margin-block-end: 14px; }
.sch-cd-f label, .sch-flw-f label, .sch-flw-lab, .sch-cd-period legend { display: block; font-weight: 600; font-size: 14px; margin-block-end: 6px; color: var(--sch-ink); }
.sch-cd input[type="text"], .sch-cd input[type="number"], .sch-cd select, .sch-cd textarea,
.sch-flw input[type="text"], .sch-flw input[type="url"], .sch-flw input[type="number"], .sch-flw input[type="tel"], .sch-flw input[type="date"], .sch-flw select, .sch-flw textarea {
	inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; min-height: 44px; border: 1px solid var(--sch-line); border-radius: 8px;
	background: #fff; color: var(--sch-ink); padding-inline: 12px; font-size: 16px; /* no iOS zoom */
}
.sch-cd textarea, .sch-flw textarea { padding-block: 10px; min-height: 88px; resize: vertical; }
.sch-cd .is-invalid > input, .sch-cd .is-invalid > select, .sch-cd .is-invalid > textarea, .sch-cd .is-invalid > .sch-cbx > input,
.sch-flw .is-invalid > input, .sch-flw .is-invalid > select, .sch-flw .is-invalid > textarea { border-color: var(--sch-err); box-shadow: 0 0 0 1px var(--sch-err); }
.sch-cd-err { color: var(--sch-err); font-size: 13px; margin: 6px 0 0; }
.sch-cd-msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #fdecec; color: var(--sch-err); font-size: 14px; }
.sch-cd-msg.is-ok { background: #e6f4f2; color: var(--sch-teal-dk); }
.sch-cd-period { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.sch-cd-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 140px); gap: 10px; align-items: start; }
.sch-cd-row .sch-cd-f { margin: 0; }
.sch-cd-row .sch-cd-f label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sch-cd-row:has(> .sch-cd-f:only-child) { grid-template-columns: minmax(0, 160px); }
.sch-cd-to.is-off { opacity: .55; }
.sch-cd-check { display: flex; gap: 10px; align-items: center; font-size: 15px; margin-block: 4px 14px; cursor: pointer; }
.sch-cd-check input { inline-size: 18px; block-size: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--sch-teal); }
.sch-cd-foot { position: sticky; inset-block-end: -20px; background: #fff; display: flex; justify-content: flex-end; gap: 10px; padding-block: 14px 0; border-block-start: 1px solid var(--sch-line); margin-block-start: 6px; }
.sch-cd-save { background: var(--sch-teal); border: 1px solid var(--sch-teal); color: #fff; border-radius: 8px; min-height: 44px; padding-inline: 24px; font-weight: 600; font-size: 16px; cursor: pointer; }
.sch-cd-save:hover { background: var(--sch-teal-dk); }
.sch-cd-save:disabled { opacity: .6; cursor: progress; }
.sch-cd-cancel { background: #fff; border: 1px solid var(--sch-line); color: var(--sch-ink); border-radius: 8px; min-height: 44px; padding-inline: 20px; font-weight: 600; font-size: 16px; cursor: pointer; }

/* the window */
.sch-flw-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--sch-ink-faint); margin: 8px 0 6px; }
.sch-flw-intro { color: var(--sch-ink-soft); font-size: 15px; margin: 0 0 14px; }
.sch-flw-f input[name="licence_number"] { margin-block-start: 8px; }
.sch-flw-link { color: var(--sch-teal); font-weight: 600; text-decoration: none; }
.sch-flw-opt { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 14px; }
.sch-flw-opt .sch-flw-f { flex: 1 1 100%; }
.sch-flw-chip { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; border-radius: 999px; border: 1px dashed #b9c4cf; background: #fff; color: var(--sch-ink); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.sch-flw-chip:hover { border-color: var(--sch-teal); color: var(--sch-teal); }
.sch-flw-chip.is-done { border-style: solid; border-color: var(--sch-teal); background: #e6f4f2; color: var(--sch-teal-dk); }
.sch-flw-chip.is-done::before { content: "✓"; margin-inline-end: 6px; }

@media (max-width: 600px) {
	.sch-cp-sec { padding: 16px; }
	.sch-tl-row { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
	.sch-tl-ico { inline-size: 36px; block-size: 36px; }
	.sch-tl-act { grid-column: 2; }
	.sch-lic-add { grid-template-columns: minmax(0, 1fr); }
	.sch-cd, .sch-flw { padding: 0; align-items: stretch; }
	.sch-cd-box, .sch-flw-box { border-radius: 0; inline-size: 100%; max-block-size: none; block-size: 100%; padding-inline: 16px; }
	.sch-cd-foot { flex-direction: column-reverse; align-items: stretch; }
	.sch-cd-foot > * { inline-size: 100%; }
	.sch-cd-row { grid-template-columns: minmax(0, 1fr) minmax(0, 110px); }
}

/* ── 4b: the country combobox — dark ink on white in every state, whatever the
   theme paints on li / [aria-selected] / :hover (the native datalist could
   not be styled and showed white on white) ─────────────────────────────── */
.sch-cbx { position: relative; }
.sch-cbx-list {
	position: absolute; z-index: 5; inset-inline: 0; inset-block-start: calc(100% + 4px);
	margin: 0; padding: 4px 0; list-style: none; max-block-size: 240px; overflow: auto;
	background: #fff !important; border: 1px solid var(--sch-line); border-radius: 8px; box-shadow: 0 10px 30px rgba(18, 43, 70, .15);
}
.sch-cbx-list[hidden] { display: none; }
.sch-cbx-list li { margin: 0; padding: 10px 12px; font-size: 15px; line-height: 1.35; color: #122B46 !important; background: #fff !important; cursor: pointer; list-style: none; }
.sch-cbx-list li:hover, .sch-cbx-list li.is-active, .sch-cbx-list li[aria-selected="true"] { background: #e6f4f2 !important; color: #122B46 !important; }
.sch-cbx-list li.sch-cbx-empty { color: #4d5c6d !important; cursor: default; }

/* achievements */
.sch-cd-ach { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.sch-cd-ach legend { display: block; font-weight: 600; font-size: 14px; margin-block-end: 4px; color: var(--sch-ink); padding: 0; }
.sch-cd-hint, .sch-cp-hint { color: var(--sch-ink-soft); font-size: 13px; margin: 0 0 8px; }
.sch-cd-ach-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 110px) 36px; gap: 8px; align-items: center; margin-block-end: 8px; }
.sch-cd-ach-add { background: none; border: 0; color: var(--sch-teal); font-weight: 600; font-size: 14px; padding: 6px 0; cursor: pointer; }
.sch-tl-ach { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sch-tl-ach li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 999px; background: #fff7e0; color: #5c4300; font-size: 13px; font-weight: 600; }
.sch-tl-ach li svg { color: #b7860b; flex: 0 0 auto; }
.sch-tl-ach-y { font-weight: 500; color: #7a5a00; }

/* a national team: a milestone */
.sch-tl-row.is-milestone .sch-tl-ico { background: #fff1c2; color: #8a6400; }
.sch-tl-tag--milestone { background: #fff1c2; color: #6b4e00; }

/* the headline */
.sch-hl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.sch-hl-form input { min-height: 40px; border: 1px solid var(--sch-line); border-radius: 8px; padding-inline: 12px; font-size: 15px; color: var(--sch-ink); background: #fff; min-width: 0; inline-size: 100%; box-sizing: border-box; }
.sch-hl-form .sch-cp-hint, .sch-hl-form .sch-cp-msg { grid-column: 1 / -1; margin: 0; }
.sch-cp-msg.is-ok { color: var(--sch-teal-dk); }

/* the window: licences, lists, many entries */
.sch-flw-lic { margin-block: 4px 18px; border-radius: 12px; }
.sch-flw-lic .sch-cp-sec { padding: 14px 16px; }
.sch-flw-lic.is-required .sch-cp-sec { border-color: #e7c35a; }
.sch-flw-lic.is-invalid .sch-cp-sec { border-color: var(--sch-err); box-shadow: 0 0 0 1px var(--sch-err); }
.sch-flw-need { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--sch-ink); }
.sch-flw-form2 { padding-block-end: 4px; }
.sch-flw-type { margin-block-end: 14px; }
.sch-flw-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.sch-flw-list li { margin: 0 0 4px; padding: 8px 12px; border-radius: 8px; background: var(--sch-soft); font-size: 14px; color: var(--sch-ink); }
.sch-flw-per { color: var(--sch-ink-faint); margin-inline-start: 6px; }
.sch-flw-list:empty { display: none; }

@media (max-width: 600px) {
	.sch-cd-ach-row { grid-template-columns: minmax(0, 1fr) minmax(0, 84px) 36px; }
	.sch-hl-form { grid-template-columns: minmax(0, 1fr); }
}

/* our own ink on every list item — a theme rule on li (color, background) must not reach these */
.sch-cp li, .sch-cd li, .sch-flw li { color: var(--sch-ink); background-color: transparent; }
.sch-cp .sch-tl-ach li, .sch-flw .sch-tl-ach li { background-color: #fff7e0; color: #5c4300; }
.sch-flw .sch-flw-list li { background-color: var(--sch-soft); }
.sch-cp-msg.is-ok, .sch-flw .sch-cp-msg.is-ok { color: var(--sch-teal-dk); }