/* Safeguarding (2.0.0): teachers' safety checks, My checks, Report a concern and its emergency numbers, the verified badges.
   Colours are the design system's tokens (dark mode and RTL follow); logical properties throughout. Classes are sfg-* (the
   sign-up module already uses sg-*). */

/* ---------------------------------------------------------------- where a teacher stands */
.sfg-hero .card-body{display:grid;gap:12px}
.sfg-hero-top{display:flex;gap:14px;align-items:center}
.sfg-hero-top h2{font-size:1.2rem}
.sfg-hero.tone-green{border-inline-start:4px solid var(--green-solid)}
.sfg-hero.tone-amber{border-inline-start:4px solid var(--amber-solid)}
.sfg-hero.tone-red{border-inline-start:4px solid var(--red-solid)}
.sfg-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sfg-facts li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;line-height:1.5}
.sfg-facts .icon{flex:none;color:var(--muted)}
.sfg-stats{margin-bottom:16px}

/* ---------------------------------------------------------------- the checks (a card per check, open to update) */
.sfg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:14px;margin-top:16px;align-items:start}
.sfg-cards > .sfg-check,.sfg-check{margin:0}
.sfg-check-head{display:flex;gap:12px;align-items:center;padding:14px 16px;cursor:pointer;list-style:none;min-height:64px}
.sfg-check-head::-webkit-details-marker{display:none}
.sfg-check-head b{font-size:15px}
.sfg-check-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:4px;font-size:13px;color:var(--muted)}
.sfg-check-meta .icon{vertical-align:-2px}
.sfg-check-meta .sfg-scans{display:inline-flex;gap:3px;align-items:center}
.sfg-check-go{display:inline-flex;gap:4px;align-items:center;font-size:13px;font-weight:600;color:var(--brand-ink);white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--brand-50);min-height:32px}
.sfg-check[open] .sfg-check-go .icon{transform:rotate(180deg)}
.sfg-check[open]{box-shadow:var(--shadow)}
.sfg-check.is-expired,.sfg-check.is-failed{border-color:color-mix(in oklab,var(--red) 40%,var(--border))}
.sfg-check-body{padding:0 16px 16px;border-top:1px solid var(--border)}
/* a closed card's boxes are out of the page (Chromium keeps them laid out inside a closed <details>): Qalam and the
   tests find the open card's box, never a hidden twin with the same anchor */
.sfg-check:not([open]) > .sfg-check-body{display:none}
.sfg-check-body > p:first-child{margin-top:12px}
.sfg-check-body .form-grid{margin-top:12px}
.sfg-check-save{display:flex;justify-content:flex-end}
.sfg-files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.sfg-files li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
.sfg-files .inline-form{margin:0}
.sfg-ticks{display:flex;flex-wrap:wrap;gap:8px 18px;padding:6px 0}
.sfg-ticks .check{min-height:32px}
.sfg-ticks .icon{vertical-align:-2px}
.sfg-miss,.sfg-soon{display:block;font-size:13.5px}
.sfg-soon{color:var(--amber-ink)}
.sfg-find{margin:0;padding:0;border:0}
.sfg-events .list-item{padding-block:10px}

/* ---------------------------------------------------------------- My checks */
.sfg-mine .list-item{align-items:flex-start}
.sfg-mine .meta{display:block;margin-top:2px;line-height:1.5}
.sfg-mine .stat-icon{width:40px;height:40px;border-radius:12px}
.sfg-code{max-height:420px;overflow:auto;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);margin-bottom:12px;line-height:1.7}
.sfg-code ul{padding-inline-start:20px;margin:6px 0}
.sfg-code li{margin:4px 0}
.sfg-code-form{display:grid;gap:12px;justify-items:start;margin-top:8px}
.sfg-code-form .check{align-items:flex-start;line-height:1.5;min-height:32px}
.sfg-code-form .check input{margin-top:4px}

/* ---------------------------------------------------------------- the verified badges (M8) */
.sfg-chips{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.sfg-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--green-bg);color:var(--green-ink);font-size:12.5px;font-weight:600;line-height:1.4}
.site-body .sfg-chip{background:color-mix(in oklab,var(--brand) 9%,#fff);color:var(--brand)}
.sfg-badge-line .sfg-when{display:block;font-size:12.5px;opacity:.85}
.e3-tcard .sfg-chips{justify-content:center;margin-top:6px}
.e3-tc .sfg-chips{margin:6px 0 4px}

/* ---------------------------------------------------------------- Report a concern */
.sfg-concern{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:880px}
.sfg-concern-public{padding-block:clamp(18px,4vw,40px);margin-inline:auto}
.sfg-emergency{border:2px solid color-mix(in oklab,var(--red) 55%,var(--border));border-radius:16px;padding:16px 18px;background:var(--red-bg);color:var(--text)}
.site-body .sfg-emergency{background:#fff5f5;color:#0d1426}
.sfg-emergency h2{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0 0 6px;color:var(--red-ink)}
.site-body .sfg-emergency h2{color:#b42318}
.sfg-emergency p{margin:0 0 10px}
.sfg-numbers{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.sfg-numbers li{display:flex}
.sfg-numbers a{flex:1;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text)!important;text-decoration:none!important;line-height:1.35}
.site-body .sfg-numbers a{background:#fff;color:#0d1426!important;border-color:#f1d4d4}
.sfg-numbers a:hover{border-color:var(--red-solid)}
.sfg-num{flex:none;min-width:58px;font-size:1.25rem;font-weight:800;color:var(--red-ink);font-family:var(--font-display)}
.site-body .sfg-num{color:#b42318}
.sfg-numbers-sm .sfg-num{font-size:1rem;min-width:auto}
.sfg-num-what{font-size:13.5px}
.sfg-abroad{margin-top:12px}
.sfg-abroad summary{cursor:pointer;font-weight:700;min-height:32px;display:inline-flex;align-items:center}
.sfg-abroad p{margin:8px 0}
.sfg-private{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;font-size:14px;color:var(--text-2);line-height:1.5}
.sfg-private .icon{flex:none;margin-top:3px}
.sfg-sent{display:grid;gap:6px;justify-items:start}
.sfg-concern-public [data-guide="concern-signin"] a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sfg-sent h2{margin:4px 0 0}
.sfg-concern .radio-group{gap:8px}
.sfg-concern .radio-pill{min-height:44px}
[hidden].sfg-when-teacher{display:none}

/* ---------------------------------------------------------------- the concern on the support desk */
.sfg-ticket .dl dd{line-height:1.5}

@media (max-width:600px){
  .sfg-check-head{padding:12px}
  .sfg-check-go span,.sfg-check-go{font-size:12.5px}
  .sfg-check-save .btn{width:100%;justify-content:center}
  .sfg-code-form .btn{width:100%;justify-content:center}
  .sfg-emergency{padding:14px}
  .sfg-concern [data-guide="concern-send"]{width:100%;justify-content:center;white-space:normal;text-align:center;height:auto;min-height:48px;line-height:1.3}
}