/* School support card and dialog. --forest and --forest-deep become the school colour on school
   domains (school-domain.css), and stay NextRoles green on the main site. */
.ss-dialog{width:min(480px,calc(100% - 30px));max-height:calc(100dvh - 30px);padding:0;overflow:auto;border:1px solid var(--line-strong,#bfd8c8);border-radius:16px;color:var(--text,#18352d);background:var(--paper,#fffefa);box-shadow:0 24px 80px rgba(16,43,35,.33);font-family:inherit}
.ss-dialog::backdrop{background:rgba(16,43,35,.62)}
.ss-dialog-body{padding:22px}
.ss-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ss-dialog-head h2{margin:0;font-size:1.25rem;letter-spacing:-.02em;color:var(--forest-deep,#173f35)}
.ss-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line,rgba(36,90,74,.17));border-radius:10px;background:transparent;color:var(--forest-deep,#173f35);cursor:pointer}
.ss-close svg{width:18px;height:18px}
.ss-close:hover{background:var(--mint,#dff2e9)}
.ss-block{margin:0 0 14px;padding:16px;border:1px solid var(--line,rgba(36,90,74,.17));border-radius:12px;background:var(--mint,#dff2e9)}
.ss-block:last-child{margin-bottom:0}
.ss-block h3{margin:0 0 4px;font-size:.95rem;color:var(--forest-deep,#173f35)}
.ss-block>p{margin:0 0 10px;color:var(--muted,#5f6b64);font-size:.875rem;line-height:1.55}
.ss-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ss-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line,rgba(36,90,74,.17));border-radius:10px;background:var(--paper,#fffefa)}
.ss-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:9px;color:#fff;background:var(--forest,#245a4a)}
.ss-icon svg{width:18px;height:18px}
.ss-text{display:grid;min-width:0}
.ss-text small{color:var(--muted,#5f6b64);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ss-text a,.ss-text span{color:var(--forest-deep,#173f35);font-weight:700;font-size:.9rem;overflow-wrap:anywhere}
.ss-notes{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line,rgba(36,90,74,.17))}
.ss-notes summary{color:var(--forest-deep,#173f35);font-size:.85rem;font-weight:800;cursor:pointer}
.ss-notes p{margin:8px 0 0;color:var(--text,#18352d);font-size:.85rem;line-height:1.55;white-space:pre-line}
/* The site paints headings with a green gradient; keep these in the school colour. */
.ss-dialog :is(h2,h3){background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
.ss-loading{margin:0;color:var(--muted,#5f6b64);font-size:.875rem}

.ss-urgent{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--forest,#245a4a);border-radius:12px;background:var(--forest,#245a4a);color:#fff;text-decoration:none}
.ss-urgent .ss-icon{background:rgba(255,255,255,.18)}
.ss-urgent .ss-text small{color:rgba(255,255,255,.85)}
.ss-urgent .ss-text b{color:#fff;font-size:1rem}
.ss-urgent:hover{background:var(--forest-deep,#173f35)}
.ss-urgent:focus-visible{outline:3px solid var(--forest-deep,#173f35);outline-offset:2px}