/* The social worker website: plain and calm, the SYRNOS colours */
:root { --ink: #074F69; --ink2: #285A6E; --act: #0F9ED5; --act-dk: #0B7FAD; --line: #B4DCEC; --warn: #B3541E; --good: #2E7D32; color-scheme: light;
  --font: Calibri, Carlito, "Source Sans 3", "Segoe UI", Arial, sans-serif }
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 17px/1.45 var(--font);
  background: radial-gradient(ellipse at 0% 0%, #94C6F9, rgba(148,198,249,0) 60%), radial-gradient(ellipse at 100% 100%, #88D6EE, rgba(136,214,238,0) 60%) #C2E0FC; background-attachment: fixed }
button, input { font: inherit; color: inherit }
h1, h2 { margin: 0 0 10px; line-height: 1.2 }
h1 { font-size: 26px } h2 { font-size: 20px }
.testbar { background: #FFF4D6; color: #6B4A00; text-align: center; font-size: 14px; padding: 6px 16px }
header.band { display: flex; align-items: center; gap: 8px; padding: 12px max(16px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.6);
  border-bottom: 2px solid rgba(255,255,255,.9) }
header .logo { height: 30px; width: auto }
header .fam { font-weight: 700; font-size: 20px; letter-spacing: .5px }
header .who { margin-left: auto; font-size: 15px; color: var(--ink2) }
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px }
.panel { background: rgba(255,255,255,.92); border-radius: 14px; padding: 20px; box-shadow: 0 4px 14px rgba(31,133,200,.15); margin-bottom: 16px }
.status { margin: 0; color: var(--ink2) }
label.f { display: block; font-weight: 700; margin: 12px 0 0 }
label.f span.hint { display: block; font-weight: 400; color: var(--ink2); font-size: 14px }
input[type=text], input[type=email], input[type=password], input[type=tel] { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; font-size: 18px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff }
input:focus-visible, button:focus-visible { outline: 3px solid #7CC7EA; outline-offset: 2px }
input.code { letter-spacing: 6px; text-align: center; font-size: 26px; font-variant-numeric: tabular-nums }
label.tick { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-weight: 400 }
label.tick input { width: 22px; height: 22px; margin-top: 1px; flex: none }
.btn { display: block; width: 100%; margin-top: 18px; padding: 13px 16px; border: 0; border-radius: 10px; background: var(--act); color: #fff; font-weight: 700;
  font-size: 18px; cursor: pointer } .btn:hover { background: var(--act-dk) }
.btn:disabled { opacity: .6; cursor: default }
.btn.light { background: #EAF4FA; color: var(--ink) } .btn.light:hover { background: #D6E9F4 }
.btn.warn { background: #FCEBDD; color: var(--warn) }
.linkbtn { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--act-dk); text-decoration: underline; cursor: pointer; font-size: 16px }
.err { color: #9C0006; background: #FDECEC; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0 }
.ok { color: #1F5E25; background: #E6F4E6; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0 }
.testcode { background: #FFF4D6; color: #6B4A00; border-radius: 10px; padding: 10px 12px; margin: 14px 0 0; font-size: 15px }
.child { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid #E3F0F7 }
.child:first-of-type { border-top: 0 }
.child .av { width: 48px; height: 48px; border-radius: 50%; background: #DDF0FB; display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: 22px; flex: none }
.child .nm { font-weight: 700; font-size: 19px }
.child .sub { color: var(--ink2); font-size: 15px }
.soon { color: var(--ink2); font-size: 15px; margin: 10px 0 0 }
.muted { color: var(--ink2); font-size: 15px }
#toastRoot { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 10; width: min(520px, calc(100% - 32px)) }
.toast { background: #074F69; color: #fff; border-radius: 10px; padding: 12px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.2) }
input[type=date], select { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-size: 17px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: inherit }
textarea { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; min-height: 90px; resize: vertical }
.child .go { margin-left: auto; flex: none }
.btn.inline { display: inline-block; width: auto; margin: 0 8px 0 0; padding: 9px 14px; font-size: 16px }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px }
.tabs button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink) }
.tabs button[aria-pressed=true] { background: var(--act); border-color: var(--act); color: #fff }
.dates { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end }
.dates .btn { margin: 0; padding: 11px 16px }
.entry { border: 1px solid #E3F0F7; border-radius: 12px; margin: 12px 0 0; overflow: hidden; background: #fff }
.entry .top { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; font-size: 15px; font-weight: 700 }
.entry .top .ref { margin-left: auto; font-weight: 400; color: var(--ink2) }
.entry .body { padding: 10px 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere }
.entry dl { margin: 0; padding: 4px 12px 12px }
.entry dt { font-weight: 700; font-size: 14px; color: var(--ink2); margin-top: 8px }
.entry dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere }
.entry .by { padding: 0 12px 10px; font-size: 14px; color: var(--ink2) }
.parts { margin: 8px 0 0; padding: 0; list-style: none }
.parts li { padding: 4px 0; font-size: 16px }
.req { border-top: 1px solid #E3F0F7; padding: 10px 0; font-size: 15px }
.req b { font-size: 16px }
.pill { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 13px; font-weight: 700; background: #EAF4FA }
.pill.good { background: #E6F4E6; color: #1F5E25 } .pill.no { background: #FDECEC; color: #9C0006 } .pill.wait { background: #FFF4D6; color: #6B4A00 }
/* their name and today's date faintly across the page, to put off screenshots */
#mark { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around;
  opacity: .07; user-select: none }
#mark span { transform: rotate(-24deg); white-space: nowrap; font-size: 20px; font-weight: 700; text-align: center; padding: 40px 0 }
@media (max-width: 560px) { .dates { grid-template-columns: 1fr 1fr } .dates .btn { grid-column: 1 / -1 } #mark { grid-template-columns: repeat(2, 1fr) } }
/* no printing of records */
@media print { main, header, .testbar { display: none !important } body::before { content: "Printing is switched off for SYRNOS records."; display: block; padding: 40px; font-size: 20px } #mark { display: none } }