/* ==========================================================================
   SIJL platform - design system
   Visual language of moh.gov.om: navy #144066 with blues and teals, white cards
   over a tilted navy backing card, section titles underlined by an ECG line.
   Layout uses logical properties (inline-start/end) so the same rules serve
   Arabic (right-to-left) and English (left-to-right).
   No inline styles anywhere: the Content-Security-Policy forbids them.
   ========================================================================== */

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-sans-arabic-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* The typefaces of the website of the Ministry of Health: Siwa for text, Doran for headings.
   Both are licensed typefaces of the ministry; see README, "Decisions waiting for the Ministry". */
@font-face { font-family: 'Siwa'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/siwa-regular.otf') format('opentype'); }
@font-face { font-family: 'Siwa'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/siwa-bold.otf') format('opentype'); }
@font-face { font-family: 'Doran'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/doran-regular.otf') format('opentype'); }
@font-face { font-family: 'Doran'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/doran-bold.otf') format('opentype'); }

:root {
  --navy: #144066;
  --navy-2: #0f3252;
  --navy-3: #0a2440;
  --blue: #2884c6;
  --blue-2: #1f6fa8;
  --sky: #50afe4;
  --teal: #528ea0;
  --teal-2: #7cb6bc;
  --ice: #d7eaf9;
  --ice-2: #eef6fd;
  --bg: #ffffff;
  --bg-alt: #ffffff;
  --card-bg: #f1f7fd;
  --card-line: #d3e5f5;
  --card-edge: var(--blue);
  --surface: #ffffff;
  --text: #1f2a37;
  --muted: #6b7785;
  --line: #dfe7ef;
  --success: #198754;
  --success-bg: #e3f4ea;
  --warning: #b77c00;
  --warning-bg: #fff4d6;
  --danger: #c0392b;
  --danger-bg: #fbe4e1;
  --info: #1f6fa8;
  --info-bg: #e4f1fb;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 6px 24px rgba(20, 64, 102, .08);
  --shadow-lg: 0 18px 50px rgba(20, 64, 102, .14);
  --font: "Siwa", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-head: "Doran", "Siwa", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
/* What is marked hidden stays hidden, whatever display its class gives it (a button, a row) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.35; margin: 0 0 .5em; font-family: var(--font-head); }
h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 700; }
h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .88em; direction: ltr; unicode-bidi: embed; }
.ltr { direction: ltr; text-align: left; unicode-bidi: embed; }
/* A value written left to right stays next to its label on an Arabic page */
[dir="rtl"] .kv dd.ltr, [dir="rtl"] td.ltr, [dir="rtl"] .kv dd .ltr { text-align: right; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

.container { width: min(var(--container), 100% - 32px); margin-inline: auto; }
.row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
@media (max-width: 1200px) { .grid.sbx-grid { grid-template-columns: 1fr; } }
.break { word-break: break-all; overflow-wrap: anywhere; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 1000px) { .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; } .span-2 { grid-column: auto; } }

/* ---------- Header (public) ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
/* Wider than the pages below it, so that the links of the menu stay on one line */
.topbar .container { display: flex; align-items: center; gap: 18px; min-height: 80px; width: min(1320px, 100% - 32px); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand img.moh { height: 46px; width: auto; }
.brand .divider { width: 1px; height: 38px; background: var(--line); }
.brand .prog { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.brand .prog .sijl-logo { height: 58px; }
/* The full name of the platform is too long for the header; the home page and the title of
   every page carry it. */

/* The logo of the programme: static/img/sijl-logo*.svg, outlines only, so it needs no typeface */
.sijl-logo { display: block; width: auto; flex: none; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; flex-wrap: wrap; }
.nav a { color: var(--navy); font-weight: 500; padding: 8px 10px; border-radius: 999px; font-size: 14px; }
.nav a:hover, .nav a.active { background: var(--ice-2); color: var(--blue-2); }
.topbar .actions { display: flex; gap: 8px; }
.topbar img.v2040 { height: 44px; width: auto; }
@media (max-width: 1340px) { .topbar img.v2040 { display: none; } }
@media (max-width: 980px) {
  .topbar .container { flex-wrap: wrap; padding-block: 10px; }
  .nav { order: 3; width: 100%; margin: 0; overflow-x: auto; flex-wrap: nowrap; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 1;
  padding: 12px 18px; min-height: 42px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer; transition: all .15s ease;
  background: var(--ice-2); color: var(--navy); white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--navy); color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); color: #fff; }
.btn-outline { background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--ice-2); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-warning { background: #e0a100; color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-sm { padding: 8px 12px; min-height: 34px; font-size: 13px; }
.btn-lg { padding: 15px 26px; min-height: 52px; font-size: 16px; }
.btn .ic { width: 18px; height: 18px; }

/* ---------- Icons ---------- */
.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 30px; height: 30px; }
.ic-xl { width: 42px; height: 42px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(80, 175, 228, .25), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(124, 182, 188, .25), transparent 60%),
    linear-gradient(180deg, #eaf4fc 0%, #f7fbff 100%);
  padding: 56px 0 70px;
}
.hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero h1 .accent { color: var(--blue); }
.hero .lead { font-size: 17px; color: #3b4a5a; max-width: 620px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.hero .narrow-only { display: none; }
/* Narrow: the card of what accreditation takes gives way to a link, so the slide stays short */
@media (max-width: 980px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero .tilt { display: none; }
  .hero .narrow-only { display: inline-flex; }
}

/* tilted navy backing card — the moh.gov.om signature */
.tilt { position: relative; }
.tilt::before {
  content: ""; position: absolute; inset: 10px -6px -10px 6px;
  background: var(--navy); border-radius: var(--radius); transform: rotate(-3deg); z-index: 0;
}
.tilt > .card { position: relative; z-index: 1; }
/* a tall card would swing its backing card far out to the side: turn it less */
.tilt.tall::before { transform: rotate(-.6deg); inset: 8px -4px -8px 4px; }
main { overflow-x: clip; }
/* A public page fills the window, so its footer rests at the bottom however short the page. */
body.site { min-height: 100vh; display: flex; flex-direction: column; }
body.site > main { flex: 1 0 auto; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.alt { background: var(--bg-alt); }
.section-title { text-align: center; margin-bottom: 36px; }
.section-title h2 { margin-bottom: 6px; }
.section-title p { color: var(--muted); max-width: 720px; margin: 8px auto 0; }
.ecg { display: block; margin: 4px auto 0; width: 96px; height: 18px; }
.ecg path { stroke: var(--blue); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ecg circle { fill: var(--sky); }

/* ---------- Cards ---------- */
.card { background: var(--card-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 22px;
  border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge); border-inline-start: 3px solid var(--card-edge); }
.card.flat { box-shadow: none; }
.card.pad-lg { padding: 30px; }
.card h3 { margin-bottom: 6px; }
.card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card .card-head h3 { margin: 0; }
.feature { text-align: center; padding: 28px 22px; transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature .icon-wrap { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--ice-2); color: var(--blue); }
.feature .num { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1; }
.feature p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

/* stat strip */
.stats { margin-top: -38px; position: relative; z-index: 2; }
.stats .card { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; }
.stat { text-align: center; padding: 16px; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat b { display: block; font-size: 30px; color: var(--navy); line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .stats .card { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-inline-start: 0; } }

/* ---------- Journey ---------- */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; row-gap: 36px; counter-reset: step; }
.journey .step { position: relative; background: var(--card-bg); border-radius: var(--radius-sm); padding: 22px 12px 18px; box-shadow: var(--shadow); text-align: center; border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge); border-inline-start: 3px solid var(--card-edge); }
/* The certificate is what the stages lead to: its card is wide, dark and carries the seal */
.journey .step.final { grid-column: span 2; padding: 26px 22px 22px; border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--navy-3), var(--blue-2)); box-shadow: 0 16px 36px rgba(20, 64, 102, .3); }
.journey .step.final h4 { color: #fff; font-size: 21px; }
.journey .step.final p { color: var(--ice); font-size: 14.5px; }
.journey .step.final .tag { background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; padding: 3px 12px; }
.journey .step.final .n { width: 46px; height: 46px; margin-top: -49px; background: #fff; color: var(--navy); font-size: 18px; border-color: var(--sky); }
.journey .step.final .seal { position: absolute; inset-inline-end: 22px; top: 50%; margin-top: -48px; color: #fff; opacity: .16; pointer-events: none; }
.journey .step.final .seal .ic { width: 96px; height: 96px; stroke-width: 1.2; }
.journey .step .n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: -42px auto 10px; background: var(--navy); color: #fff; font-weight: 700; border: 4px solid var(--bg); }
.journey .step h4 { margin: 0 0 6px; }
.journey .step p { font-size: 13px; color: var(--muted); margin: 0; }
.journey .step .tag { display: inline-block; margin-top: 10px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ice-2); color: var(--blue-2); }
@media (max-width: 800px) { .journey { grid-template-columns: 1fr 1fr; row-gap: 36px; } }

/* ---------- Badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap; background: var(--ice-2); color: var(--navy); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.success { background: var(--success-bg); color: var(--success); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.danger { background: var(--danger-bg); color: var(--danger); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.muted { background: #eef1f4; color: var(--muted); }
.badge.navy { background: var(--navy); color: #fff; }
.badge.tier-A { background: var(--navy); color: #fff; }
.badge.tier-B { background: var(--blue); color: #fff; }
.badge.tier-C { background: var(--teal-2); color: var(--navy-3); }
.flag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; margin: 0 0 4px; margin-inline-end: 4px; }
.flag.red { background: var(--danger-bg); color: var(--danger); }
.flag.orange { background: var(--warning-bg); color: var(--warning); }

/* ---------- Alerts ---------- */
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 14px; }
.alert .ic { margin-top: 2px; }
.alert.info { background: var(--info-bg); color: #0f4d78; border-color: #c3e0f5; }
.alert.success { background: var(--success-bg); color: #0f5132; border-color: #bfe5cf; }
.alert.warning { background: var(--warning-bg); color: #6b4a00; border-color: #f3dca0; }
.alert.danger { background: var(--danger-bg); color: #7b1f16; border-color: #f2c3bd; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label, .field .label { display: block; font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 6px; }
.field .req { color: var(--danger); margin-inline-start: 2px; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.input, select.input, textarea.input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(80,175,228,.18); outline: none; }
textarea.input { min-height: 110px; resize: vertical; }
textarea.code { font-family: var(--mono); font-size: 12.5px; direction: ltr; text-align: left; min-height: 320px; line-height: 1.5; tab-size: 2; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 14px; cursor: pointer; transition: all .15s; }
/* "~", not "+": a checkbox drawn by th:field is followed by its hidden marker before the text. */
.choice input:checked ~ span { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice input:focus-visible ~ span { outline: 3px solid var(--sky); outline-offset: 2px; }
.upload { border: 2px dashed var(--ice); border-radius: var(--radius); padding: 22px; text-align: center; background: var(--ice-2); color: var(--navy); cursor: pointer; }
.upload:hover { border-color: var(--sky); }

/* wizard stepper */
.wizard-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.wizard-steps .ws { flex: 1; text-align: center; font-size: 12.5px; color: var(--muted); position: relative; padding-top: 34px; }
.wizard-steps .ws::before { content: attr(data-n); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #e7edf3; color: var(--muted); display: grid; place-items: center; font-weight: 700; }
.wizard-steps .ws.done::before { background: var(--success); color: #fff; content: "✓"; }
.wizard-steps .ws.current { color: var(--navy); font-weight: 700; }
.wizard-steps .ws.current::before { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px rgba(40,132,198,.18); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { background: var(--ice-2); color: var(--navy); font-weight: 600; text-align: start; padding: 11px 12px; white-space: nowrap; position: sticky; top: 0; }
.table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: #fafcfe; }
.table tr.clickable { cursor: pointer; }
.table .num { text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs a, .tabs button { font: inherit; background: none; border: 0; cursor: pointer; padding: 10px 16px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a.active, .tabs button.active { color: var(--navy); border-bottom-color: var(--blue); }
.tabs .off { padding: 10px 16px; color: #b3bfcc; font-weight: 600; white-space: nowrap; cursor: default; }

/* ---------- Portal layout ---------- */
.portal { display: grid; grid-template-columns: 270px 1fr; min-height: 100vh; }
.sidebar { background: var(--navy); color: #cfe0ef; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .logo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 14px; text-align: center; }
.sidebar .logo img { height: 46px; width: auto; }
.sidebar .logo img.sijl-logo { height: 112px; }
.sidebar .logo .tagline { font-size: 12px; color: #cfe0ef; line-height: 1.4; }
.sidebar .logo { gap: 10px; }
.sidebar .who { background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-size: 13px; }
.sidebar .who b { color: #fff; display: block; }
.sidebar .role-switch { margin-top: 8px; }
.sidebar .role-switch summary { cursor: pointer; color: #fff; font-weight: 600; font-size: 12px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; display: inline-block; }
.sidebar .role-switch form { margin-top: 6px; }
.sidebar .role-switch button { width: 100%; text-align: start; background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer; font: inherit; }
.sidebar .role-switch button:hover, .sidebar .role-switch button:focus-visible { background: rgba(255,255,255,.22); }
.sidebar .role-switch button b { display: block; color: #fff; }
.sidebar .role-switch button span { display: block; opacity: .85; font-size: 12px; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; color: #cfe0ef; padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 2px; }
.sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar nav a.active { background: #fff; color: var(--navy); font-weight: 600; }
.sidebar nav a .lock { margin-inline-start: auto; opacity: .7; }
.sidebar nav .sep { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #7fa2c2; margin: 16px 12px 6px; }
.sidebar .count { margin-inline-start: auto; background: var(--sky); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 700; }
.main { padding: 22px 28px 60px; min-width: 0; max-width: 1480px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; margin: 0; }
.page-head .crumbs { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .portal { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 4px; }
  .sidebar nav a { white-space: nowrap; }
  .sidebar nav .sep, .sidebar .who { display: none; }
  .sidebar .logo { flex-direction: row; justify-content: center; gap: 18px; padding-bottom: 12px; }
  .sidebar .logo img { height: 40px; }
  .sidebar .logo img.sijl-logo { height: 64px; }
  .sidebar .logo .tagline { display: none; }
  .main { padding: 18px 16px 60px; }
}

/* ---------- KPI tiles ---------- */
.kpi { background: var(--card-bg); border-radius: var(--radius-sm); padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge); border-inline-start: 3px solid var(--card-edge); }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12.5px; color: var(--muted); }
/* A figure written from left to right still stands on the side of its label */
[dir="rtl"] .kpi .value.ltr { text-align: right; }
.kpi .ic-bg { position: absolute; inset-inline-end: 14px; top: 14px; width: 42px; height: 42px; border-radius: 12px; background: var(--ice-2); color: var(--blue); display: grid; place-items: center; }

/* progress */
.progress { height: 10px; background: #e7edf3; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--blue)); border-radius: 999px; }
.progress.success > span { background: var(--success); }

/* vendor journey stepper (portal) */
.stepper { display: flex; gap: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 10px; overflow-x: auto; }
.stepper .st { flex: 1; min-width: 130px; text-align: center; position: relative; padding: 0 6px; }
.stepper .st::after { content: ""; position: absolute; top: 19px; inset-inline-start: calc(50% + 24px); width: calc(100% - 48px); height: 3px; background: #e2e8ef; }
.stepper .st:last-child::after { display: none; }
.stepper .st.done::after { background: var(--success); }
.stepper .circle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; background: #e7edf3; color: var(--muted); font-weight: 700; position: relative; z-index: 1; }
.stepper .st.done .circle { background: var(--success); color: #fff; }
.stepper .st.current .circle { background: var(--blue); color: #fff; box-shadow: 0 0 0 6px rgba(40,132,198,.18); }
.stepper .st.locked .circle { background: #eef1f4; color: #a3adb8; }
.stepper .st b { display: block; font-size: 13.5px; color: var(--navy); }
.stepper .st small { font-size: 12px; color: var(--muted); }

/* ---------- Charts ---------- */
.chart { width: 100%; }
.chart text { font-family: var(--font); fill: var(--text); font-size: 12px; }
.chart .axis { stroke: var(--line); }
.hbar { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 13px; }
.hbar .track { height: 14px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; background: var(--blue); }
.hbar .val { text-align: end; font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 5px; vertical-align: middle; }
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* funnel */
.funnel .fstep { display: grid; grid-template-columns: 170px 1fr 44px; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13.5px; }
.funnel .fbar { height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--navy), var(--blue)); display: flex; align-items: center; padding-inline: 10px; color: #fff; font-size: 12px; min-width: 6px; }

/* heatmap */
.heat { display: grid; gap: 3px; font-size: 11.5px; }
.heat .hc { height: 30px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-weight: 600; }
.heat .hh { font-weight: 600; color: var(--navy); writing-mode: vertical-rl; transform: rotate(180deg); height: 96px; display: flex; align-items: center; justify-content: flex-start; font-size: 11px; direction: ltr; }
.heat .rl { display: flex; align-items: center; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 6px; }
.hc.s-pass { background: var(--success); }
.hc.s-fail { background: var(--danger); }
.hc.s-prog { background: #e0a100; }
.hc.s-none { background: #e7edf3; color: #9aa6b2; }

/* ---------- Validation report ---------- */
.sev { display: inline-block; min-width: 64px; text-align: center; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.sev.fatal { background: #5b1a12; color: #fff; }
.sev.error { background: var(--danger); color: #fff; }
.sev.warning { background: #e0a100; color: #1f2a37; }
.sev.information { background: var(--info-bg); color: var(--info); }
.status-code { font-family: var(--mono); font-weight: 700; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.status-code.c201, .status-code.c200 { background: var(--success-bg); color: var(--success); }
.status-code.c422 { background: var(--danger-bg); color: var(--danger); }
.status-code.c404 { background: var(--warning-bg); color: var(--warning); }
pre.json { background: #0e2236; color: #d6e6f5; border-radius: 12px; padding: 16px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.55; direction: ltr; text-align: left; max-height: 460px; margin: 0; }
pre.json .k { color: #7fd1ff; }
pre.json .s { color: #b8e986; }
pre.json .n { color: #ffcc66; }
pre.json .b { color: #ff9e9e; }

/* requirement list */
.req-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.req-item + .req-item { margin-top: 10px; }
.req-item .head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.req-item .code { font-family: var(--mono); font-size: 12px; color: var(--blue-2); background: var(--ice-2); padding: 1px 8px; border-radius: 6px; }
.req-item .status-select { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; font-size: 12.5px; padding: 6px 12px; border: 0; background: #fff; cursor: pointer; color: var(--muted); }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button.on-yes { background: var(--success); color: #fff; }
.seg button.on-part { background: #e0a100; color: #fff; }
.seg button.on-no { background: var(--danger); color: #fff; }
.seg button.on-na { background: #8a96a3; color: #fff; }
details.acc { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
details.acc > summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--navy); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: "⌄"; margin-inline-start: auto; font-size: 18px; transition: transform .2s; }
details.acc[open] > summary::after { transform: rotate(180deg); }
details.acc > .body { padding: 0 18px 16px; }

/* locked panel */
.locked { text-align: center; padding: 50px 20px; }
.locked .ic-xl { margin: 0 auto 12px; color: var(--muted); }

/* ---------- Modal & toast ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(10, 36, 64, .45); display: grid; place-items: center; z-index: 80; padding: 16px; }
.modal { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: 90vh; overflow: auto; }
.modal .mh { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal .mh h3 { margin: 0; }
.modal .mb { padding: 20px 22px; }
.modal .mf { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; }
.toast { background: var(--navy-3); color: #fff; padding: 11px 18px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; animation: pop .25s ease; }
.toast.success { background: var(--success); }
.toast.danger { background: var(--danger); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Certificate ---------- */
.cert {
  background: #fff; border-radius: 18px; padding: 44px 48px; position: relative; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); max-width: 900px; margin: 0 auto;
}
.cert::before { content: ""; position: absolute; inset: 14px; border: 2px solid var(--ice); border-radius: 12px; pointer-events: none; }
.cert::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(80,175,228,.12), transparent 70%); top: -120px; left: -120px; }
.cert .ch { display: flex; justify-content: space-between; align-items: center; gap: 20px; position: relative; z-index: 1; }
.cert .ch img { height: 64px; width: auto; }
.cert h2 { text-align: center; margin-top: 22px; font-size: 30px; }
.cert .sub { text-align: center; color: var(--muted); }
.cert .sys { text-align: center; font-size: 26px; font-weight: 700; color: var(--blue); margin: 16px 0 4px; }
.cert .grid-cert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; position: relative; z-index: 1; }
.cert .grid-cert div { background: var(--ice-2); border-radius: 10px; padding: 10px 12px; text-align: center; }
.cert .grid-cert small { display: block; color: var(--muted); font-size: 12px; }
.cert .grid-cert b { color: var(--navy); }
.cert .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; position: relative; z-index: 1; }
.cert .qr { width: 118px; height: 118px; }
.cert .qr svg { width: 100%; height: 100%; }
.cert .seal { width: 110px; height: 110px; border-radius: 50%; border: 3px double var(--navy); display: grid; place-items: center; text-align: center; color: var(--navy); font-weight: 700; font-size: 12px; line-height: 1.3; transform: rotate(-8deg); }

/* ---------- Footer: the footer of the website of the Ministry of Health ---------- */
.footer { font-size: 16px; line-height: 1.5; }
.footer .footer-middle { background: var(--navy); padding: 40px 0; border-radius: 40px 40px 0 0; }
.footer .cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.footer .footer-info { grid-column: span 4; color: #fff; text-align: center; padding: 0 24px; }
.footer .logo img { width: 248px; max-width: 100%; height: auto; margin-bottom: 16px; }
.footer .footer-info p { color: #fff; font-size: 15.2px; line-height: 24px; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer .footer-social { display: flex; justify-content: center; gap: 6px; }
/* The cut-corner tile the Ministry sets behind each mark */
.footer .footer-social a { width: 33px; height: 35px; display: flex; align-items: center; justify-content: center; color: #fff; background: #2e82c4; clip-path: polygon(26% 0, 100% 0, 100% 74%, 77% 100%, 0 100%, 0 25%); }
.footer .footer-social .ic { width: 16px; height: 16px; fill: currentColor; fill-rule: evenodd; stroke: none; }
.footer .single-footer { grid-column: span 2; }
.footer .footer-info + .single-footer { grid-column: 6 / span 2; }
.footer .single-footer h3 { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; margin: 8px 0 16px; }
.footer .single-footer h3::after { content: ""; display: block; width: 40px; height: 2px; margin: 6px 0; background: #0089dd; }
.footer .single-footer a { display: inline-block; position: relative; color: #fff; font-size: 14px; margin-bottom: 8px; transition: color .3s; }
.footer .single-footer a::before { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 1px; background: var(--sky); opacity: 0; transition: .3s; }
.footer .single-footer a:hover { color: var(--sky); }
.footer .single-footer a:hover::before { width: 100%; opacity: .8; }
.footer .footer-bottom { background: var(--navy); color: #fff; }
.footer .footer-bottom .inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 10px 0; border-top: 1px solid rgba(40,132,221,.5); }
.footer .footer-bottom p { margin: 0; }
.footer .last-updated { text-align: center; font-size: 14px; }
.footer .last-updated strong { font-weight: 700; margin-inline-end: 5px; }
.footer .last-updated small { color: rgba(255,255,255,.7); font-size: .9em; margin-inline-start: 8px; }
.footer .visitor-counter { text-align: end; }
@media (max-width: 991px) {
  .footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .footer .footer-info, .footer .single-footer, .footer .footer-info + .single-footer { grid-column: auto; }
}
@media (max-width: 767px) {
  .footer .footer-info { grid-column: 1 / -1; padding: 16px; }
  .footer .footer-bottom .inner { grid-template-columns: 1fr; }
  .footer .footer-bottom p, .footer .last-updated, .footer .visitor-counter { text-align: center; font-size: 12px; }
}

/* ---------- Misc ---------- */
.list-check { list-style: none; padding: 0; margin: 0; }
.list-check li { padding-inline-start: 26px; position: relative; margin-bottom: 8px; }
.list-check li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--success); font-weight: 700; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 0; font-size: 14px; border-top: 1px solid var(--card-line); }
.kv dt, .kv dd { padding: 8px 10px; border-bottom: 1px solid var(--card-line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
/* Every other line a little lighter, so a line is read across */
.kv dt:nth-of-type(even), .kv dt:nth-of-type(even) + dd { background: rgba(255, 255, 255, .7); }
.kv dd .badge { margin-inline-end: 4px; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 8px; } }
.empty { text-align: center; color: var(--muted); padding: 30px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; }
.pill-tabs { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; }
.pill-tabs button { font: inherit; font-size: 13px; border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 600; }
.pill-tabs button.active { background: var(--navy); color: #fff; }
.timeline { position: relative; padding-inline-start: 22px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline .ti { position: relative; margin-bottom: 14px; font-size: 13.5px; }
.timeline .ti::before { content: ""; position: absolute; inset-inline-start: -21px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.timeline .ti small { color: var(--muted); display: block; }
.intl { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.intl .card { padding: 18px; }
.intl .card b { display: block; color: var(--navy); margin-bottom: 4px; }
.intl .card .src { font-size: 11.5px; color: var(--teal); font-weight: 700; letter-spacing: .3px; }
@media (max-width: 1000px) { .intl { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media print {
  .topbar, .footer, .sidebar, .no-print, .page-head .actions { display: none !important; }
  body { background: #fff; }
  .portal { display: block; }
  .main { padding: 0; }
  .cert { box-shadow: none; border: 0; }
}

/* ---------- Language switch and mobile header ---------- */
.lang-switch { font-weight: 600; font-size: 13px; color: var(--navy); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.lang-switch:hover { background: var(--ice-2); }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Form feedback ---------- */
.field.has-error .input, .field.has-error .choice span { border-color: var(--danger); }
.field .error { color: var(--danger); font-size: 12.5px; margin-top: 4px; font-weight: 500; }
.error-summary { margin-bottom: 18px; }
.error-summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
.wizard-panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.wizard-panel > legend { font-size: 18px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 14px; }
.js .wizard-panel[hidden] { display: none; }
.no-js .wizard-panel + .wizard-panel { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.no-js .wizard-steps, .no-js [data-wizard-nav] { display: none; }
.hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The types of a system: a card for each, with what the type manages under its name. */
.type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.field .type-option { position: relative; display: block; margin: 0; font-weight: 400; }
.type-option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.type-option .box { display: block; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: all .15s; }
.type-option .box b { display: block; font-size: 14px; font-weight: 600; color: var(--navy); }
.type-option .box small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.type-option:hover .box { border-color: var(--sky); }
/* "~", not "+": a checkbox drawn by th:field is followed by its hidden marker before the text. */
.type-option input:checked ~ .box { border-color: var(--navy); background: var(--ice-2); box-shadow: inset 0 0 0 1px var(--navy); }
.type-option input:checked ~ .box b::before { content: "\2713"; margin-inline-end: 6px; color: var(--blue); }
.type-option input:focus-visible ~ .box { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 900px) { .type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .type-options { grid-template-columns: 1fr; } }
/* A part of a form that belongs to one answer. */
.inset { padding: 16px 18px; border: 1.5px solid var(--card-line); border-radius: 14px; background: var(--card-bg); }
.inset h3 { margin: 0 0 4px; font-size: 15px; color: var(--navy); }
/* The faults of an uploaded sheet, one to a line. */
.error-list { margin: 6px 0 0; padding-inline-start: 18px; }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--navy); flex: none; }

/* ---------- Auth pages ---------- */
.auth { max-width: 460px; margin-inline: auto; }
.auth .card { padding: 32px; }
.auth .icon-wrap { width: 66px; height: 66px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--ice-2); color: var(--blue); }
.code-input { font-family: var(--mono); font-size: 26px; letter-spacing: 10px; text-align: center; direction: ltr; }
.password-rules { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.password-rules li::before { content: "•"; margin-inline-end: 6px; color: var(--teal); }

/* ---------- Confirmation ---------- */
.done-mark { width: 80px; height: 80px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: grid; place-items: center; margin: 0 auto 14px; }
.ref-no { font-size: 30px; font-weight: 700; color: var(--navy); direction: ltr; unicode-bidi: isolate; }

/* ---------- Utilities (instead of inline styles) ---------- */
.narrow { max-width: 900px; }
.narrower { max-width: 720px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-20 { margin-top: 20px; } .mt-28 { margin-top: 28px; } .mt-36 { margin-top: 36px; }
.mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-14 { margin-bottom: 14px; } .mb-20 { margin-bottom: 20px; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.grow { flex: 1; min-width: 0; }
.end { justify-content: flex-end; }
.middle { justify-content: center; }
.text-blue { color: var(--blue); }
.text-navy { color: var(--navy); }
.block { display: block; }
.w-full { width: 100%; }
.pre-line { white-space: pre-line; }
.hbar.teal .fill { background: var(--teal); }
.fill[data-w] { width: 0; }
.fill[data-w="0"] { width: 0%; }
.fill[data-w="1"] { width: 1%; }
.fill[data-w="2"] { width: 2%; }
.fill[data-w="3"] { width: 3%; }
.fill[data-w="4"] { width: 4%; }
.fill[data-w="5"] { width: 5%; }
.fill[data-w="6"] { width: 6%; }
.fill[data-w="7"] { width: 7%; }
.fill[data-w="8"] { width: 8%; }
.fill[data-w="9"] { width: 9%; }
.fill[data-w="10"] { width: 10%; }
.fill[data-w="11"] { width: 11%; }
.fill[data-w="12"] { width: 12%; }
.fill[data-w="13"] { width: 13%; }
.fill[data-w="14"] { width: 14%; }
.fill[data-w="15"] { width: 15%; }
.fill[data-w="16"] { width: 16%; }
.fill[data-w="17"] { width: 17%; }
.fill[data-w="18"] { width: 18%; }
.fill[data-w="19"] { width: 19%; }
.fill[data-w="20"] { width: 20%; }
.fill[data-w="21"] { width: 21%; }
.fill[data-w="22"] { width: 22%; }
.fill[data-w="23"] { width: 23%; }
.fill[data-w="24"] { width: 24%; }
.fill[data-w="25"] { width: 25%; }
.fill[data-w="26"] { width: 26%; }
.fill[data-w="27"] { width: 27%; }
.fill[data-w="28"] { width: 28%; }
.fill[data-w="29"] { width: 29%; }
.fill[data-w="30"] { width: 30%; }
.fill[data-w="31"] { width: 31%; }
.fill[data-w="32"] { width: 32%; }
.fill[data-w="33"] { width: 33%; }
.fill[data-w="34"] { width: 34%; }
.fill[data-w="35"] { width: 35%; }
.fill[data-w="36"] { width: 36%; }
.fill[data-w="37"] { width: 37%; }
.fill[data-w="38"] { width: 38%; }
.fill[data-w="39"] { width: 39%; }
.fill[data-w="40"] { width: 40%; }
.fill[data-w="41"] { width: 41%; }
.fill[data-w="42"] { width: 42%; }
.fill[data-w="43"] { width: 43%; }
.fill[data-w="44"] { width: 44%; }
.fill[data-w="45"] { width: 45%; }
.fill[data-w="46"] { width: 46%; }
.fill[data-w="47"] { width: 47%; }
.fill[data-w="48"] { width: 48%; }
.fill[data-w="49"] { width: 49%; }
.fill[data-w="50"] { width: 50%; }
.fill[data-w="51"] { width: 51%; }
.fill[data-w="52"] { width: 52%; }
.fill[data-w="53"] { width: 53%; }
.fill[data-w="54"] { width: 54%; }
.fill[data-w="55"] { width: 55%; }
.fill[data-w="56"] { width: 56%; }
.fill[data-w="57"] { width: 57%; }
.fill[data-w="58"] { width: 58%; }
.fill[data-w="59"] { width: 59%; }
.fill[data-w="60"] { width: 60%; }
.fill[data-w="61"] { width: 61%; }
.fill[data-w="62"] { width: 62%; }
.fill[data-w="63"] { width: 63%; }
.fill[data-w="64"] { width: 64%; }
.fill[data-w="65"] { width: 65%; }
.fill[data-w="66"] { width: 66%; }
.fill[data-w="67"] { width: 67%; }
.fill[data-w="68"] { width: 68%; }
.fill[data-w="69"] { width: 69%; }
.fill[data-w="70"] { width: 70%; }
.fill[data-w="71"] { width: 71%; }
.fill[data-w="72"] { width: 72%; }
.fill[data-w="73"] { width: 73%; }
.fill[data-w="74"] { width: 74%; }
.fill[data-w="75"] { width: 75%; }
.fill[data-w="76"] { width: 76%; }
.fill[data-w="77"] { width: 77%; }
.fill[data-w="78"] { width: 78%; }
.fill[data-w="79"] { width: 79%; }
.fill[data-w="80"] { width: 80%; }
.fill[data-w="81"] { width: 81%; }
.fill[data-w="82"] { width: 82%; }
.fill[data-w="83"] { width: 83%; }
.fill[data-w="84"] { width: 84%; }
.fill[data-w="85"] { width: 85%; }
.fill[data-w="86"] { width: 86%; }
.fill[data-w="87"] { width: 87%; }
.fill[data-w="88"] { width: 88%; }
.fill[data-w="89"] { width: 89%; }
.fill[data-w="90"] { width: 90%; }
.fill[data-w="91"] { width: 91%; }
.fill[data-w="92"] { width: 92%; }
.fill[data-w="93"] { width: 93%; }
.fill[data-w="94"] { width: 94%; }
.fill[data-w="95"] { width: 95%; }
.fill[data-w="96"] { width: 96%; }
.fill[data-w="97"] { width: 97%; }
.fill[data-w="98"] { width: 98%; }
.fill[data-w="99"] { width: 99%; }
.fill[data-w="100"] { width: 100%; }


/* ---------- Pages behind the sign-in ---------- */
.sidebar { display: flex; flex-direction: column; }
.sidebar nav { flex: 1; }
.sidebar .who span { color: #a9c3da; font-size: 12px; }
.sidebar .side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar .lang-switch { color: #fff; border-color: rgba(255,255,255,.3); }
.sidebar .lang-switch:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 900px) { .sidebar nav { flex: none; } .sidebar .side-foot { border-top: 0; padding-top: 8px; } }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1000px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi.link { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.kpi.link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filters .field { min-width: 200px; flex: 1; }
.filters .field.fixed { flex: none; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 800px) { .doc-list { grid-template-columns: 1fr; } }
.doc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text); }
.doc:hover { border-color: var(--sky); color: var(--navy); }
.doc .icon-wrap { width: 42px; height: 42px; border-radius: 12px; background: var(--ice-2); color: var(--blue); display: grid; place-items: center; flex: none; }
.doc b { display: block; color: var(--navy); }
.doc small { color: var(--muted); }
.doc > .ic { margin-inline-start: auto; color: var(--blue); }
.legal-note { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.inline-form { display: inline; }
.table td .btn { min-height: 30px; padding: 6px 10px; }
.checks { display: grid; gap: 8px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); }
.checks input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--navy); flex: none; }
.stepper .st.current b { color: var(--blue-2); }
.error-page { text-align: center; padding: 40px 20px; }
.error-page .code { font-size: 64px; font-weight: 700; color: var(--ice); line-height: 1; -webkit-text-stroke: 2px var(--blue); }

/* ---------- File of a system: documents and signatures ---------- */
.text-warning { color: var(--warning); }
.file-row { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.doc-states { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.doc-states > span { display: inline-flex; align-items: center; gap: 6px; }
.doc-states .ic { width: 16px; height: 16px; color: var(--blue); }
.sign-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.sign-layout > aside { position: sticky; top: 16px; }
@media (max-width: 1100px) { .sign-layout { grid-template-columns: 1fr; } .sign-layout > aside { position: static; } }
.statement { background: var(--ice-2); border-inline-start: 4px solid var(--blue); border-radius: 8px; padding: 10px 12px; color: var(--navy); }
.user-signatory { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.table-form td { vertical-align: middle; }
.table-form .input { min-height: 40px; padding: 8px 10px; }
.table-form td.has-error .input { border-color: var(--danger); }
.table-form .error { color: var(--danger); font-size: 12.5px; margin-top: 4px; }

/* ---------- Self-assessment ---------- */
.req-item { scroll-margin-top: 16px; }
.req-item .req-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.req-item .req-text { margin: 8px 0 6px; font-size: 14px; }
.req-item .answer, .req-item .answer-fields { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.req-item .answer-fields { display: grid; gap: 12px; }
.req-item .answer-fields textarea.input { min-height: 78px; }
.req-item .choice span { padding: 6px 12px; font-size: 13px; }
.answer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 16px; align-items: start; }
@media (max-width: 800px) { .answer-grid { grid-template-columns: 1fr; } }
.evidence-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.evidence-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.evidence-list a { display: inline-flex; gap: 6px; align-items: center; }
.evidence-list .ic { width: 16px; height: 16px; }
details.evidence-pick { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--ice-2); }
details.evidence-pick > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; color: var(--navy); list-style: none; }
details.evidence-pick > summary::-webkit-details-marker { display: none; }
details.evidence-pick > summary .ic { width: 16px; height: 16px; }
details.evidence-pick[open] > summary { margin-bottom: 8px; }
details.evidence-pick .checks { max-height: 220px; overflow-y: auto; font-size: 13.5px; }
.verdict-box { margin-top: 12px; border-inline-start: 4px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #f7f9fb; font-size: 14px; }
.verdict-box.success { border-color: var(--success); background: var(--success-bg); }
.verdict-box.warning { border-color: var(--warning); background: var(--warning-bg); }
.verdict-box.danger { border-color: var(--danger); background: var(--danger-bg); }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.review-layout .verdict-box { margin-top: 12px; }
.review-layout .verdict-fields { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.review-layout .verdict-fields textarea.input { min-height: 64px; }
@media (max-width: 1000px) { .review-layout { grid-template-columns: 1fr; } }
.progress-cell { min-width: 140px; vertical-align: middle !important; }
.kpi .progress { margin-top: 8px; }
.kpi .value small { font-size: 16px; color: var(--muted); font-weight: 500; }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); z-index: 5; }
.badge b { font-variant-numeric: tabular-nums; }

/* ---------- Sandbox ---------- */
.status-code.s-201, .status-code.s-200 { background: var(--success-bg); color: var(--success); }
.status-code.s-422 { background: var(--danger-bg); color: var(--danger); }
.status-code.s-424 { background: #eef2f6; color: var(--muted); }
.issue-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.issue-list li { border-top: 1px dashed var(--line); padding-top: 8px; }
.issue-list code { font-size: 12px; }
pre.json { white-space: pre-wrap; }

/* a document written out for reading */
.paper { font-size: 14.5px; line-height: 1.8; }
.paper-head { text-align: center; margin-bottom: 18px; }
.paper-head h2 { margin-bottom: 2px; }
.paper .covers { color: var(--teal); font-size: 12.5px; margin: 0; }
.paper h3 { color: #fff; background: var(--navy); font-size: 14px; padding: 5px 10px; border-radius: 6px; margin: 18px 0 10px; }
.paper ol { margin: 0; padding-inline-start: 22px; }
.paper ol li { margin-bottom: 8px; }
.paper .note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.paper .kv { grid-template-columns: 240px 1fr; }
@media (max-width: 600px) { .paper .kv { grid-template-columns: 1fr; } }
.signature-block { margin-top: 22px; border: 2px solid var(--ice); border-radius: 12px; padding: 16px 18px; break-inside: avoid; }
.signature-block h3 { margin-bottom: 10px; }
.signature-block .note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }

/* a page made for printing */
.sheet-page { background: #e9eef4; }
.sheet-bar { display: flex; gap: 10px; align-items: center; max-width: 900px; margin: 0 auto; padding: 14px 16px; }
.sheet { background: #fff; max-width: 900px; margin: 0 auto 40px; padding: 36px 44px; border-radius: 6px; box-shadow: var(--shadow-lg); }
.sheet-head { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--ice); padding-bottom: 14px; margin-bottom: 20px; }
.sheet-head img { height: 52px; width: auto; }
.sheet-head .prog { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.sheet-head .sijl-logo { height: 76px; }
.sheet-head .tagline { font-size: 12px; color: var(--muted); max-width: 170px; line-height: 1.4; }
@media (max-width: 700px) { .sheet { padding: 22px 18px; } }
@media print {
  .sheet-page { background: #fff; }
  .sheet { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
  .paper h3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table-wrap { overflow: visible; }
  @page { size: A4; margin: 15mm 16mm; }
}

/* ---------- Accreditation and certificate ---------- */
.input.tall { min-height: 160px; }
.center-row { justify-content: center; }
.certificate h1 { font-size: 30px; margin: 10px 0 4px; }
.certificate .cert-system { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--blue); margin: 6px 0; }
.certificate .cert-system .ltr { font-size: 20px; color: var(--navy); margin-inline-start: 8px; }
.certificate .cert-vendor { font-size: 20px; font-weight: 700; color: var(--navy); }
.certificate .cert-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.certificate .cert-facts div { background: var(--ice-2); border-radius: 10px; padding: 12px; text-align: center; }
.certificate .cert-facts small { display: block; color: var(--muted); font-size: 12px; }
.certificate .cert-facts b { color: var(--navy); }
.certificate .cert-verify { display: flex; gap: 20px; align-items: center; justify-content: space-between; border: 2px solid var(--ice); border-radius: 12px; padding: 14px 18px; }
.certificate .cert-verify .code { text-align: center; flex: none; }
.certificate .cert-verify .code small { display: block; color: var(--muted); font-size: 12px; }
.certificate .cert-verify .code b { font-size: 20px; color: var(--navy); letter-spacing: 1px; }
.certificate.void .cert-system, .certificate.void .cert-vendor { color: var(--muted); text-decoration: line-through; }
@media (max-width: 600px) { .certificate .cert-facts { grid-template-columns: 1fr; } .certificate .cert-verify { flex-direction: column; align-items: flex-start; } }
@media print { .certificate .cert-facts div { border: 1px solid var(--line); } }
.system-card { display: flex; gap: 14px; align-items: flex-start; }
.system-card .icon-wrap { width: 52px; height: 52px; border-radius: 16px; background: var(--ice-2); color: var(--blue); display: grid; place-items: center; flex: none; }

/* ---------- Menus of the public header ---------- */
.menu { position: relative; }
.menu-button { font: inherit; font-size: 14px; font-weight: 500; color: var(--navy); background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.menu-button .ic { width: 14px; height: 14px; transition: transform .15s ease; }
.menu-button:hover, .menu-button.active, .menu.open .menu-button { background: var(--ice-2); color: var(--blue-2); }
.menu-list { display: none; position: absolute; top: 100%; inset-inline-start: 0; min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 50; }
.menu-list a { display: block; border-radius: 10px; padding: 9px 12px; white-space: nowrap; }
.menu:hover .menu-list, .menu:focus-within .menu-list, .menu.open .menu-list { display: block; }
.menu.closed .menu-list { display: none; }
.menu:hover .menu-button .ic, .menu.open .menu-button .ic { transform: rotate(180deg); }
.nav > a { white-space: nowrap; }
@media (max-width: 980px) { .nav { overflow: visible; flex-wrap: wrap; } .topbar { position: static; } }

/* ---------- Public pages about the programme ---------- */
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-5 { grid-template-columns: 1fr; } }
.group-title { font-size: 24px; margin: 0 0 10px; }
.statement { display: flex; gap: 18px; align-items: flex-start; padding: 30px; }
.statement .icon-wrap, .doc-card .icon-wrap, .figure .icon-wrap { width: 58px; height: 58px; border-radius: 18px; background: var(--ice-2); color: var(--blue); display: grid; place-items: center; flex: none; }
.statement p { font-size: 17px; line-height: 1.9; }
.doc-card { display: flex; gap: 16px; align-items: flex-start; }
.doc-card h3 { margin: 8px 0 6px; }
.doc-card p { color: #3b4a5a; margin: 0 0 8px; }
.doc-card .btn small { opacity: .85; font-weight: 400; }
/* What the package page says while no reference of the data exchange is published */
.ref-none { color: var(--muted); padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; margin: 0; }
/* A card of the training page: what it teaches, when it changed, and its download at the foot */
.train-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease; }
.train-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.train-card .icon-wrap { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: var(--ice-2); color: var(--blue); transition: background .25s ease, color .25s ease; }
.train-card:hover .icon-wrap { background: var(--blue); color: #fff; }
.train-card h3 { margin: 6px 0 0; }
.train-card p { color: #3b4a5a; margin: 0; flex: 1; }
.train-card .row { margin-top: 8px; }
.train-card .btn small { opacity: .85; font-weight: 400; }
.years { position: relative; }
.year { display: grid; grid-template-columns: 110px 1fr; gap: 20px; margin-bottom: 26px; }
.year-mark { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--blue); line-height: 1; position: sticky; top: 100px; align-self: start; }
.year-list { border-inline-start: 3px solid var(--ice); padding-inline-start: 22px; display: grid; gap: 12px; }
.milestone { position: relative; padding: 14px 18px; }
.milestone::before { content: ""; position: absolute; inset-inline-start: -31px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.milestone small { display: block; color: var(--blue-2); font-weight: 600; margin-bottom: 2px; }
@media (max-width: 640px) { .year { grid-template-columns: 1fr; gap: 8px; } .year-mark { position: static; } }
.period { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--navy); margin: -14px 0 26px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.figure { text-align: center; padding: 26px 16px; }
.figure .icon-wrap { margin: 0 auto 12px; }
.figure b { display: block; font-family: var(--font-head); font-size: 40px; color: var(--navy); line-height: 1.1; }
.figure span { color: var(--muted); font-size: 14px; }
.kv.wide { grid-template-columns: 300px 1fr; }
.kv.narrow { grid-template-columns: 110px 1fr; }
@media (max-width: 700px) { .kv.wide { grid-template-columns: 1fr; } }
.how { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.how-step { display: flex; flex-direction: column; gap: 6px; color: inherit; padding: 20px 18px; border-top: 4px solid var(--blue); transition: transform .2s ease, box-shadow .2s ease; }
a.how-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; }
.how-step .n { color: var(--blue); font-weight: 700; font-size: 18px; }
.how-step .ic { color: var(--navy); }
.how-step.done { background: var(--navy); color: #fff; border-top-color: var(--sky); align-items: center; text-align: center; justify-content: center; }
.how-step.done .ic { color: var(--sky); }
@media (max-width: 1100px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }

/* ---------- Network addresses ---------- */
.address-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.address-row:hover { border-color: var(--blue); box-shadow: var(--shadow); color: inherit; }
.address-row b { font-size: 16px; color: var(--navy); }
.card-head h3 .ic { vertical-align: -4px; color: var(--blue); }
ol.rules { padding-inline-start: 22px; line-height: 1.9; }
ol.rules li { margin-bottom: 4px; }
.paper ol { padding-inline-start: 22px; }
.paper ol li { margin-bottom: 8px; }

/* ---------- Decision as buttons ---------- */
.btn-refuse { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-refuse:hover { background: var(--danger); color: #fff; }

/* ── Approvals of the directorates ─────────────────────────────────────── */
.standing { padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--radius-sm); background: #fff; }
.standing .reply, .timeline .reply { padding: 10px 12px; border-inline-start: 3px solid var(--sky); background: var(--ice-2); border-radius: 6px; }

/* ── Accounts and permissions ──────────────────────────────────────────── */
.assign-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.assign-form .input { width: auto; min-width: 150px; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.table.permissions th.num { white-space: normal; min-width: 96px; font-size: 13px; }
.table.permissions tr.group td { background: var(--ice-2); color: var(--navy); font-weight: 600; font-size: 13px; padding: 7px 12px; }
.table.permissions input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--navy); }
.table.permissions input[type="checkbox"]:disabled { opacity: .55; }

/* ── Files attached to a registration ───────────────────────────────────── */
.attachment svg { color: var(--blue); }
.attachment small { margin-top: 4px; }

/* ── What a member of a company or of a directorate may do ─────────────── */
.permission-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px 18px; margin: 8px 0 10px; }
.permission-checks .consent { margin: 0; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.permission-group { margin-top: 12px; }
.permission-group > b { display: block; color: var(--navy); }
.permission-list { margin: 6px 0 0; padding-inline-start: 20px; }
.permission-list li { margin: 2px 0; }

/* A tick box among the filters of a list */
.filters .check-inline { display: flex; gap: 8px; align-items: center; align-self: flex-end; min-height: 44px; cursor: pointer; }
.filters .check-inline input { width: 18px; height: 18px; accent-color: var(--navy); }

/* ── The public list of the accredited systems ─────────────────────────── */
.accredited-head { background: linear-gradient(180deg, var(--ice-2), #fff); padding: 40px 0 8px; }
.accredited-intro { display: flex; gap: 20px; align-items: center; }
.accredited-intro h1 { margin: 0 0 6px; }
.accredited-intro .lead { margin: 0; color: #3b4a5a; font-size: 17px; max-width: 760px; }
.accredited-seal { width: 76px; height: 76px; border-radius: 22px; background: var(--navy); color: #fff;
  display: grid; place-items: center; flex: none; box-shadow: var(--shadow); }
.accredited-total { margin-inline-start: auto; text-align: center; background: var(--card-bg); border-radius: var(--radius-sm);
  border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge); border-inline-start: 3px solid var(--card-edge);
  padding: 14px 22px; box-shadow: var(--shadow); flex: none; }
.accredited-total b { display: block; font-size: 38px; line-height: 1.1; color: var(--success); }
.accredited-total span { font-size: 13px; color: var(--muted); }
.accredited-filter { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 26px;
  background: var(--card-bg); border-radius: var(--radius-sm);
  border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge); border-inline-start: 3px solid var(--card-edge); padding: 16px; box-shadow: var(--shadow); }
.accredited-filter .field { margin: 0; min-width: 200px; }
.accredited-filter .field.grow { flex: 1; }
.accredited-body { padding-top: 26px; }
.accredited-table-wrap { border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--card-line); border-top: 3px solid var(--card-edge);
  border-inline-start: 3px solid var(--card-edge); background: #fff; }
.accredited-table { width: 100%; border-collapse: collapse; }
.accredited-table thead th { background: linear-gradient(90deg, #e3f0fb, #f1f8fe); color: var(--navy); font-size: 13.5px;
  font-weight: 700; text-align: start; padding: 14px 18px; border-bottom: 2px solid #d4e7f7; }
.accredited-table tbody tr { background: #fff; transition: background .15s; }
.accredited-table tbody tr:nth-child(even) { background: linear-gradient(90deg, #f3f9fe, #f8fbfe); }
.accredited-table tbody tr:hover { background: #eaf4fc; }
.accredited-table td { padding: 16px 18px; vertical-align: top; border-bottom: 1px solid #edf3f8; }
.accredited-table tbody tr:last-child td { border-bottom: 0; }
.accredited-table .line-1, .accredited-table .line-2 { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
  min-height: 28px; }
.accredited-table .line-2 { margin-top: 6px; color: #4b5b6b; font-size: 14px; }
.accredited-table .col-system b { font-size: 18px; color: var(--navy); }
.accredited-table .col-system .line-2 { font-size: 15px; }
.accredited-table .seal { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center;
  background: var(--success-bg); color: var(--success); flex: none; }
.accredited-table .seal .ic { width: 17px; height: 17px; }
.accredited-table .scope-chip { background: #fff; border: 1.5px solid #b9d8f2; color: var(--navy); border-radius: 999px;
  padding: 3px 12px; font-size: 13.5px; font-weight: 600; }
.accredited-table tbody tr:nth-child(even) .scope-chip { background: #fbfdff; }
.accredited-table b { color: var(--navy); }
.accredited-table .valid-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 4px rgba(25, 135, 84, .15); }
.accredited-table .col-dates span:not(.valid-dot) { color: var(--muted); font-size: 13px; }
.accredited-table .col-contact a { display: inline-flex; gap: 6px; align-items: center; color: var(--blue); font-weight: 600;
  font-size: 14.5px; text-decoration: none; word-break: break-all; }
.accredited-table .col-contact a:hover { text-decoration: underline; }
.accredited-table .col-contact .ic { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .accredited-table thead { display: none; }
  .accredited-table, .accredited-table tbody, .accredited-table tr, .accredited-table td { display: block; width: 100%; }
  .accredited-table tbody tr { padding: 10px 4px; border-bottom: 1px solid #e3edf6; }
  .accredited-table td { border: 0; padding: 8px 14px; }
  .accredited-table td.col-system { padding-top: 12px; }
  .accredited-table td:not(.col-system)::before { content: attr(data-label); display: block; font-size: 12px;
    font-weight: 700; color: var(--navy); opacity: .75; margin-bottom: 2px; }
}
.certificate .cert-qr { flex: none; width: 132px; height: 132px; }
.certificate .cert-qr svg { width: 100%; height: 100%; display: block; }
.certificate .cert-verify { justify-content: flex-start; }
@media (max-width: 720px) {
  .accredited-intro { flex-wrap: wrap; }
  .accredited-total { margin-inline-start: 0; }
}

/* The accredited systems stand out in the main menu: health establishments look for them first */
.nav a.nav-accredited { display: inline-flex; gap: 6px; align-items: center; background: var(--success-bg);
  color: var(--success); font-weight: 700; }
.nav a.nav-accredited:hover, .nav a.nav-accredited.active { background: var(--success); color: #fff; }
.nav a.nav-accredited .ic { width: 16px; height: 16px; }

/* ── Parts that come into view on the way down the page ──────────────────
   A part marked data-reveal, and each child of a part marked data-reveal-group, waits unseen
   until the script says the reader reached it (.shown), then comes in; the children of a group
   come one after another. Only on a screen and only for who did not ask for less motion. Should
   the script never run, everything shows by itself after three seconds. */
@media screen and (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.shown), .js [data-reveal-group]:not(.shown) > * { opacity: 0; }
  .js:not(.watching) [data-reveal], .js:not(.watching) [data-reveal-group] > * { animation: reveal-rescue 0s linear 3s forwards; }

  [data-reveal].shown { animation: reveal-up .8s cubic-bezier(.16, .84, .3, 1) backwards; }
  [data-reveal="zoom"].shown { animation-name: reveal-zoom; }
  [data-reveal-group].shown > * { animation: reveal-up .7s cubic-bezier(.16, .84, .3, 1) var(--wait, 0s) backwards; }
  [data-reveal-group="pop"].shown > * { animation-name: reveal-pop; }
  [data-reveal-group="sides"].shown > :nth-child(odd) { animation-name: reveal-from-right; }
  [data-reveal-group="sides"].shown > :nth-child(even) { animation-name: reveal-from-left; }
  [data-reveal-group] > :nth-child(2) { --wait: .1s; }
  [data-reveal-group] > :nth-child(3) { --wait: .2s; }
  [data-reveal-group] > :nth-child(4) { --wait: .3s; }
  [data-reveal-group] > :nth-child(5) { --wait: .4s; }
  [data-reveal-group] > :nth-child(6) { --wait: .5s; }
  [data-reveal-group] > :nth-child(7) { --wait: .6s; }
  [data-reveal-group] > :nth-child(n + 8) { --wait: .7s; }
  /* On a narrow screen a card that came from the side would widen the page for a moment */
  @media (max-width: 760px) { [data-reveal-group="sides"].shown > :nth-child(n) { animation-name: reveal-up; } }

  /* Inside a part: the pulse under a title draws itself, the number of a stage and the icon of
     a card arrive a moment after their card, the backing of the tilted card swings into place */
  [data-reveal].shown .ecg path { stroke-dasharray: 150; animation: reveal-draw 1.1s ease-out .3s backwards; }
  [data-reveal].shown .ecg circle { animation: reveal-zoom .4s ease-out 1s backwards; }
  [data-reveal-group].shown .step .n { animation: reveal-drop .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--wait, 0s) + .3s) backwards; }
  [data-reveal-group].shown .feature .icon-wrap { animation: reveal-turn .6s cubic-bezier(.3, 1.4, .5, 1) calc(var(--wait, 0s) + .25s) backwards; }
  .tilt[data-reveal].shown::before { animation: reveal-swing .9s cubic-bezier(.3, 1.3, .5, 1) .25s backwards; }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes reveal-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes reveal-pop { from { opacity: 0; transform: translateY(34px) scale(.92); } }
@keyframes reveal-from-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes reveal-from-left { from { opacity: 0; transform: translateX(-60px); } }
@keyframes reveal-drop { from { opacity: 0; transform: translateY(-18px) scale(.4); } }
@keyframes reveal-turn { from { opacity: 0; transform: rotate(-35deg) scale(.4); } }
@keyframes reveal-swing { from { opacity: 0; transform: rotate(0deg) scale(.96); } }
@keyframes reveal-draw { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
@keyframes reveal-rescue { to { opacity: 1; } }

/* A card that answers the pointer */
.journey .step, .card.lift { transition: transform .2s ease, box-shadow .2s ease; }
.journey .step:hover, .card.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.journey .step .n { transition: transform .2s ease, background .2s ease; }
.journey .step:hover .n { transform: scale(1.12); background: var(--blue); }
.journey .step.final:hover .n { background: #fff; }
.journey .step.final .seal { transition: opacity .3s ease, transform .3s ease; }
.journey .step.final:hover .seal { opacity: .3; transform: rotate(-8deg) scale(1.08); }
.feature .icon-wrap { transition: transform .25s ease, background .25s ease, color .25s ease; }
.feature:hover .icon-wrap { transform: rotate(-6deg) scale(1.08); background: var(--blue); color: #fff; }

/* ── The slides of the home page ─────────────────────────────────────────
   The first slide is the platform itself (.hero); the others are one large picture each, seen
   whole, with the title and the text over its left half on a light layer that fades away, dark
   enough only for the white letters to be read. The slides are as high as the highest of them.
   Without the script the track is moved sideways by the reader. */
.slider { position: relative; background: var(--navy-3); }
.slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  min-height: clamp(340px, 41.6vw, 800px); }
.slide.hero { display: flex; align-items: center; padding: 40px 0 76px; }
.slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.slide-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; gap: 14px;
  padding: 32px clamp(48px, 9vw, 130px) 64px clamp(24px, 5vw, 80px);
  color: #fff; text-shadow: 0 1px 3px rgba(6, 22, 40, .75);
  background: linear-gradient(to top, rgba(10, 36, 64, .80) 0%, rgba(10, 36, 64, .45) 40%, rgba(10, 36, 64, 0) 70%); }
.slide-panel .btn { text-shadow: none; }
.slide-panel h2 { margin: 0; color: #fff; font-size: clamp(22px, 2.7vw, 40px); line-height: 1.35; }
.slide-panel p { margin: 0; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.9; color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
/* With the script the slides lie on one another and the current one shows: a slide gives way to
   the next by fading, so going from the first to the last passes through none between them. */
.slider.ready .slider-track { display: grid; overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.slider.ready .slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s; }
.slider.ready .slide.current { opacity: 1; visibility: visible; transition: opacity .5s ease; }
/* The arrows: one at each side of the slide, large, half way up */
.slider-arrow { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .92);
  color: var(--navy); box-shadow: var(--shadow); transition: background .2s, transform .2s; }
.slider-arrow[hidden] { display: none; }
.slider-arrow:hover { background: #fff; transform: scale(1.08); }
.slider-arrow .ic { width: 24px; height: 24px; }
.slider-arrow[data-slider-previous] { inset-inline-start: 18px; }
.slider-arrow[data-slider-next] { inset-inline-end: 18px; }
/* The arrows point the way the slides move, which follows the direction of the page */
[dir="rtl"] .slider-arrow .ic { transform: scaleX(-1); }
.slider-arrow:focus-visible, .slider-toggle:focus-visible, .slider-dots button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
/* Under the slides: a line for each slide. The line of the current slide fills while the slide
   is shown, and the next slide comes when it is full. */
.slider-controls { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center;
  align-items: center; gap: 8px; pointer-events: none; }
.slider-controls[hidden] { display: none; }
.slider-controls > * { pointer-events: auto; }
.slider-dots { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(10, 36, 64, .6); }
.slider-dots button { position: relative; width: 46px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider-dots button::before, .slider-dots button span { content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  height: 5px; margin-top: -2.5px; border-radius: 999px; }
.slider-dots button::before { width: 100%; background: rgba(255, 255, 255, .4); transition: background .2s; }
.slider-dots button:hover::before { background: rgba(255, 255, 255, .75); }
.slider-dots button[aria-current="true"]::before { background: rgba(255, 255, 255, .6); }
.slider-dots button span { width: 0; background: #fff; }
.slider-dots button[aria-current="true"] span { width: 100%; }
.slider.playing .slider-dots button[aria-current="true"] span { animation: slider-fill 7s linear forwards; }
.slider.playing.held .slider-dots button[aria-current="true"] span { animation-play-state: paused; }
@keyframes slider-fill { from { width: 0; } to { width: 100%; } }
.slider-toggle { width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 36, 64, .6); color: #fff; }
.slider-toggle:hover { background: rgba(10, 36, 64, .8); }
.slider-toggle .ic { width: 16px; height: 16px; }
.slider-toggle .ic + .ic { display: none; }
.slider-toggle.paused .ic { display: none; }
.slider-toggle.paused .ic + .ic { display: block; }
/* Room for the arrows beside what a slide says */
@media (min-width: 761px) {
  .slider.ready .slide.hero .container { width: min(var(--container), 100% - 176px); }
  .slider.ready .slide-panel { padding-left: clamp(88px, 7vw, 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .slider.ready .slide, .slider.ready .slide.current { transition: none; }
}
@media (max-width: 760px) {
  .slide { min-height: 460px; }
  .slide-panel { top: auto; width: 100%; padding: 20px 18px 66px; gap: 10px;
    background: linear-gradient(0deg, rgba(10, 36, 64, .62) 55%, rgba(10, 36, 64, .36) 85%, rgba(10, 36, 64, 0)); }
  .slide-panel p { -webkit-line-clamp: 3; line-clamp: 3; }
  /* On a telephone a slide is moved by the finger or by its line */
  .slider-arrow { display: none; }
  .slider-dots button { width: 34px; }
}
@media print { .slider { display: none; } }

/* The slides as they are kept */
.slide-list { display: grid; gap: 14px; }
.slide-row { display: flex; gap: 18px; align-items: flex-start; }
.slide-thumb { width: 240px; height: 100px; object-fit: cover; border-radius: 8px; flex: none; background: var(--ice-2); }
@media (max-width: 700px) { .slide-row { flex-direction: column; } .slide-thumb { width: 100%; height: 150px; } }

/* A file sent to the sandbox, opened: the gates it went through, its resources as a tree, each resource with what was sent */
.gate-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gate-strip .gate { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--navy); }
.gate-strip .gate small { font-size: 12px; opacity: .8; }
.gate-strip .gate.remark { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.gate-strip .gate.refused { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--success); }
.remark > .dot { background: var(--warning); }
.refused > .dot { background: var(--danger); }
.held > .dot { background: #cfd8e3; }
.file-resource .held { color: var(--muted); }
.file-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.file-tree { position: sticky; top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: grid; gap: 2px; }
.file-tree a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 7px 10px; border-radius: 10px; color: var(--navy); text-decoration: none; font-size: 13px; }
.file-tree a:hover, .file-tree a.active { background: var(--ice-2); }
.file-tree a.root { border-bottom: 1px solid var(--card-line); border-radius: 10px 10px 0 0; margin-bottom: 4px; }
.file-tree a small { flex-basis: 100%; font-size: 11.5px; padding-inline-start: 17px; }
.file-tree a.root small { padding-inline-start: 26px; }
.file-tree a.d1 { margin-inline-start: 16px; }
.file-tree a.d2 { margin-inline-start: 32px; }
.file-tree a.d3 { margin-inline-start: 48px; }
.file-tree a.d4 { margin-inline-start: 64px; }
.file-resource .fix { margin-top: 4px; color: var(--navy); }
.code-block { direction: ltr; text-align: left; margin: 0; padding: 12px 0; border-radius: 10px; background: var(--ice-2); color: var(--navy); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow: auto; max-height: 560px; }
pre.code-block { padding: 12px 14px; white-space: pre; }
.code-block .line { display: block; white-space: pre; padding: 0 14px; }
.code-block .line.marked { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
[dir="rtl"] .file-tree a small.ltr, [dir="rtl"] td small.ltr.block { text-align: right; }
[dir="rtl"] .file-tree a small.ltr { padding-inline-start: 0; padding-inline-end: 17px; }
/* The files of a system beside what it has still to show */
.files-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.progress-card { position: sticky; top: 16px; }
.progress-card h2 { font-size: 16px; margin: 0 0 10px; }
.progress-card .figure { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.progress-card .figure b { font-size: 28px; color: var(--navy); }
.progress-card progress { width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: #e7edf3; accent-color: var(--success); }
.progress-card progress::-webkit-progress-bar { background: #e7edf3; }
.progress-card progress::-webkit-progress-value { background: var(--success); border-radius: 999px; }
.progress-card progress::-moz-progress-bar { background: var(--success); }
.progress-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.progress-list li { display: flex; align-items: center; gap: 8px; }
.progress-list li small { margin-inline-start: auto; }
.progress-list li.waiting { color: var(--muted); }
.waiting > .dot { background: #cfd8e3; }
.progress-card .done { color: var(--success); font-weight: 600; }
@media (max-width: 900px) { .file-layout { grid-template-columns: 1fr; } .file-tree { position: static; } }
@media (max-width: 1100px) { .files-layout { grid-template-columns: 1fr; } .progress-card { position: static; } }

/* The file and the sandbox's answer side by side, in a dialog the size of the screen: each column scrolls on its own. */
.exchange-dialog { width: calc(100vw - 32px); max-width: none; height: calc(100vh - 32px); max-height: none;
  margin: 16px; padding: 20px; border: 0; border-radius: 12px; }
.exchange-dialog::backdrop { background: rgba(15, 23, 42, 0.55); }
.exchange-dialog[open] { display: flex; flex-direction: column; }
.exchange-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.exchange-head h3 { margin: 0; }
.exchange-dialog .exchange { flex: 1; min-height: 0; }
.exchange-dialog .exchange > div { display: flex; flex-direction: column; min-height: 0; }
.exchange pre { flex: 1; min-height: 0; overflow: auto; margin: 0; }
.exchange > div + div { border-inline-start: 1px solid var(--line); padding-inline-start: 20px; }
.exchange h4 { margin: 0 0 8px; }
.mb-6 { margin-bottom: 6px; }

/* The file and the answer, coloured: JSON parts by kind, each resource and its answer by how it fared. */
.json .jl { display: block; min-height: 1.45em; padding-inline: 8px; border-inline-start: 3px solid transparent; }
.json .jk { color: #1d4ed8; }
.json .js { color: #047857; }
.json .jn { color: #b45309; }
.json .jb { color: #7c3aed; font-weight: 600; }
.json .jp { color: #94a3b8; }
.st-passed { background: #ecfdf3; border-color: #16a34a !important; }
.st-remark { background: #fff7e6; border-color: #d97706 !important; }
.st-refused { background: #fdecec; border-color: #dc2626 !important; }
.st-held { background: #f1f3f5; border-color: #94a3b8 !important; }
.json .jl.st-refused .js { color: #b91c1c; }
.exchange-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.exchange-legend .legend { padding: 2px 10px; border-radius: 999px; font-size: 0.85rem;
  border: 1px solid; border-inline-start-width: 4px; }
.exchange-dialog .code-block.json { max-height: none; height: 100%; background: #ffffff; color: #0f172a;
  border: 1px solid var(--line); padding: 8px 0; }
.json .jl { width: max-content; min-width: 100%; box-sizing: border-box; }