/* Shared by the School page (/school/) and the Lab pages (/lab/...).
   Builds on /_shared.css (colours, .k-btn, .k-input). */

.ks-page { max-width: 560px; margin: 0 auto; padding: 16px 16px 64px; box-sizing: border-box; }
.ks-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 8px; }
.ks-top a { color: var(--accent); font-size: 13px; text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.ks-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.ks-brand::before { content: ""; width: 22px; height: 25px; flex-shrink: 0; background: url(/icons/k-mark-tight.png) center / contain no-repeat; }   /* the Kredits mark */
.ks-who { font-family: var(--mono); font-size: 12px; color: var(--text2); }

.ks-h1 { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 6px; }
.ks-lede { font-size: 14px; color: var(--text2); line-height: 1.55; margin: 0 0 16px; }

.ks-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin: 0 0 14px; box-shadow: var(--shadow); }
.ks-card h2 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.ks-card p { font-size: 13px; color: var(--text2); line-height: 1.55; margin: 0 0 12px; }
.ks-card p:last-child { margin-bottom: 0; }
.ks-label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin: 0 0 4px; }
.ks-field { margin: 0 0 12px; }
.ks-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ks-row > .k-input { flex: 1 1 160px; min-width: 0; }
.ks-small { font-size: 12px; color: var(--text3); }

.ks-code { font-family: var(--mono); font-size: 22px; letter-spacing: 0.12em; font-weight: 600; color: var(--text);
           background: var(--surface2); border: 1px dashed var(--border2); border-radius: 10px; padding: 10px 14px;
           display: inline-block; user-select: all; word-break: break-all; }

.ks-msg { font-size: 13px; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; line-height: 1.5; }
.ks-msg[hidden] { display: none; }
.ks-msg.err  { color: var(--danger-text);   background: var(--red-bg);   border: 1px solid var(--red-bd); }
.ks-msg.ok   { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-bd); }
.ks-msg.warn { color: var(--warning-text);      background: var(--amber-bg); border: 1px solid var(--amber-bd); }

.ks-list { list-style: none; margin: 0; padding: 0; }
.ks-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.ks-list li:first-child { border-top: 0; }
.ks-list .ks-grow { flex: 1 1 140px; min-width: 0; }
.ks-tc { font-family: var(--mono); font-weight: 600; }
.ks-tag { font-size: 11px; font-weight: 600; border-radius: 99px; padding: 2px 8px; background: var(--grey-bg); border: 1px solid var(--grey-bd); color: var(--text2); }
.ks-tag.admin { background: var(--accent-tint); border-color: var(--accent-tint-strong); color: var(--accent); }
.ks-tag.tech  { background: var(--green-bg); border-color: var(--green-bd); color: var(--green); }
.ks-tag.off   { background: var(--red-bg); border-color: var(--red-bd); color: var(--danger-text); }

.ks-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.ks-choice button { font: inherit; text-align: left; cursor: pointer; background: var(--surface); border: 2px solid var(--border);
                    border-radius: 12px; padding: 14px; color: var(--text); }
.ks-choice button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
.ks-choice strong { display: block; font-size: 15px; margin-bottom: 2px; }
.ks-choice span { font-size: 12px; color: var(--text2); }

.ks-hidden { display: none !important; }
.ks-page a { color: var(--accent); }

/* Risk assessment card (Lab Requests) */
.ra-banner { padding: 12px 16px; font-weight: 600; font-size: 14px; border-radius: 12px 12px 0 0; }
.ra-banner.ok  { background: var(--green-bg); color: var(--success-text); border: 1px solid var(--green-bd); }
.ra-banner.no  { background: var(--amber-bg); color: var(--warning-text); border: 1px solid var(--amber-bd); }
.ra-banner.old { background: var(--grey-bg);  color: var(--text2); border: 1px solid var(--grey-bd); }
.ra-card { background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 16px 14px; font-size: 14px; line-height: 1.5; }
.ra-card .ra-title { font-size: 16px; margin: 12px 0 2px; }
.ra-card h4 { font-size: 13px; margin: 12px 0 2px; color: var(--text2); text-transform: none; }
.ra-card p, .ra-card ul { margin: 0; }
.ra-card ul { padding-left: 20px; }
.ra-hazard { border-bottom: 1px dashed var(--border); padding-bottom: 8px; }
.ra-tech { margin-top: 12px; background: var(--surface2); border-radius: 8px; padding: 8px 10px; }
.ra-tech summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ra-overall { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-top: 14px; padding: 10px 0 0; border-top: 1px solid var(--border); }
.ra-foot { margin-top: 10px !important; font-size: 12.5px; color: var(--text3); font-style: italic; }