:root{--navy:#13243A;--blue:#0B6FB0;--blue-d:#08578A;--sky:#0E93EA;--pale:#F2F8FD;--line:#DCE6F0;--muted:#4A5868;--ok:#1F6B3A;--ok-bg:#E6F4EA;--nhs:#005EB8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--pale);color:#333;font-family:'Noto Sans',system-ui,sans-serif;font-size:16px}
#app{max-width:480px;margin:0 auto;min-height:100vh;padding:calc(env(safe-area-inset-top) + 28px) 20px 110px}
h1,h2,h3{font-family:'DM Sans',sans-serif;color:var(--navy);margin:0}
h1{font-size:26px}h2{font-size:19px}
p{line-height:1.55}
a{color:var(--blue)}
.muted{color:var(--muted);font-size:14px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.card--hi{border:2px solid var(--blue);padding:15px}
.card--dark{background:var(--navy);border:0;color:#fff}
.card--dark h2,.card--dark p{color:#fff}
.card--dark .muted{color:#C9D3DE}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card--hi .eyebrow{color:var(--blue-d)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:12px;border:0;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none}
.btn-p{background:var(--blue);color:#fff}.btn-p:hover{background:var(--blue-d)}
.btn-s{background:#fff;color:var(--navy);border:1px solid #9AABBD}
.btn-w{background:#fff;color:var(--navy)}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:default}
/* Official NHS login button styles, from https://nhsconnect.github.io/nhslogin/button-guidance/ (do not change) */
.nhslogin-form{margin:0}
.nhslogin-button{font-weight:400;font-size:16px;font-size:1rem;line-height:1.5;margin-bottom:28px;-webkit-appearance:none;appearance:none;background-color:#005eb8;border:2px solid transparent;border-radius:4px;box-shadow:0 4px 0 #003087;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-weight:600;margin-top:0;padding:12px 16px;position:relative;text-align:center;vertical-align:top;width:auto}
@media (min-width:40.0625em){.nhslogin-button{font-size:19px;font-size:1.1875rem;line-height:1.47368;margin-bottom:36px}}
@media (max-width:40.0525em){.nhslogin-button{padding:8px 16px}}
.nhslogin-button:link,.nhslogin-button:visited,.nhslogin-button:active,.nhslogin-button:hover{color:#fff;text-decoration:none}
.nhslogin-button::-moz-focus-inner{border:0;padding:0}
.nhslogin-button:hover{background-color:#1e569b}
.nhslogin-button:focus{background:#ffeb3b;box-shadow:0 4px 0 #003087;color:#003087;outline:none}
.nhslogin-button:active{background:#1e569b;box-shadow:none;color:#fff;top:4px}
.nhslogin-button::before{background:transparent;bottom:-6px;content:"";display:block;left:-2px;position:absolute;right:-2px;top:-2px}
.nhslogin-button:active::before{top:-6px}
.nhslogin-button-logo{display:flex;align-items:center;justify-content:center}
.button-logo{padding-right:16px;display:flex;align-items:center;justify-content:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;text-decoration:none;color:#333;min-height:88px;display:flex;flex-direction:column;gap:4px}
.tile strong{color:var(--navy)}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#E3F2FC;color:var(--blue-d);white-space:nowrap}
.badge--ok{background:var(--ok-bg);color:var(--ok)}
.badge--wrap{white-space:normal;border-radius:12px;line-height:1.4;max-width:100%}
.badge--grey{background:#EEF1F4;color:var(--muted)}
.bar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.bar span{height:6px;border-radius:3px;background:var(--line)}
.bar span.on{background:var(--blue)}
label.field{display:block;font-weight:600;font-size:15px;color:var(--navy);margin:12px 0 6px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{font:inherit;font-size:16px;padding:12px;border:1px solid #9AABBD;border-radius:10px;background:#fff;color:var(--navy);width:100%}
input:focus,select:focus,.btn:focus-visible,a:focus-visible{outline:3px solid #9CD3F7;outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.check input{width:24px;height:24px;margin:1px 0 0;flex-shrink:0;accent-color:var(--blue)}
.check:has(input:checked){border:2px solid var(--blue);padding:13px 15px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font-size:15px;color:var(--navy)}
.toggle input{width:24px;height:24px;accent-color:var(--blue)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:14px;position:relative;padding-bottom:18px}
.steps li:last-child{padding-bottom:0}
.steps .dot{width:22px;height:22px;border-radius:50%;border:2px solid #9AABBD;flex-shrink:0;background:#fff;z-index:1}
.steps li.done .dot{background:var(--blue);border-color:var(--blue)}
.steps li.now .dot{border:3px solid var(--blue)}
.steps li:not(:last-child)::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--line)}
.steps li.done::before{background:var(--blue)}
.steps li span{font-size:15px;color:var(--muted)}
.steps li.done span,.steps li.now span{color:var(--navy);font-weight:600}
.demo{background:#FFF4E5;border-left:5px solid #FFB81C;padding:10px 12px;border-radius:8px;font-size:13px;color:#5C3D00}
.empty{text-align:center;padding:28px 16px}
#tabs{position:fixed;z-index:5;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px calc(env(safe-area-inset-bottom) + 10px);max-width:480px;margin:0 auto}
#tabs[hidden],#toast[hidden]{display:none}
#tabs a{text-align:center;font-size:12px;color:var(--muted);text-decoration:none;padding:12px 0}
#tabs a.on{color:var(--blue);font-weight:700}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;max-width:90%;z-index:10}
.avatar{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--navy);text-decoration:none}
.med-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.taken{font-size:13px;font-weight:700;color:var(--ok);background:var(--ok-bg);padding:6px 10px;border-radius:999px;white-space:nowrap}