/* SlotWatch NI - shared styles.
   GOV.UK-inspired light theme. Design tokens first, then components.
   Scale: 4px base unit; type scale 16/19/22/28/44. */
:root{
  --fg:#0b0c0c; --muted:#505a5f; --border:#b1b4b6; --border-strong:#0b0c0c;
  --link:#1d70b8; --green:#00703c; --green-d:#005a30;
  --panel:#f3f2f1; --yellow:#ffd200; --err:#d4351c;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px;
  --content:680px; /* readable measure for prose */
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;
  color:var(--fg);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:19px;line-height:1.6;background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}
a:hover{color:#003078}
:focus-visible{outline:3px solid #fd0;outline-offset:1px}
::selection{background:var(--yellow)}

/* skip link + screen-reader helpers */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--fg);color:#fff;padding:10px 16px;z-index:10}
.skip-link:focus{left:0;top:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout */
.page{max-width:1100px;margin:0 auto;padding:0 var(--s5);width:100%}
main{flex:1;padding:var(--s6) 0 var(--s7);width:100%}
main > *{width:100%}
main.page{padding-top:var(--s6);padding-bottom:var(--s7)}

/* header */
.gov-header{background:#fff;border-bottom:1px solid var(--border);border-top:5px solid var(--green);padding:var(--s3) 0}
.gov-header .page{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.wordmark{color:var(--fg);font-size:22px;font-weight:700;text-decoration:none;letter-spacing:-.01em;line-height:1.2}
.wordmark span{color:var(--green)}
.gov-header nav{display:flex;gap:var(--s5);font-size:16px;align-items:center}
.gov-header nav a{color:var(--muted);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.gov-header nav a:hover{color:var(--fg);border-bottom-color:var(--green)}
.gov-header nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--green);font-weight:600}

/* typography */
h1{font-size:44px;line-height:1.15;letter-spacing:-.5px;margin:0 0 var(--s3);max-width:20ch;font-weight:700}
h2{font-size:28px;line-height:1.25;letter-spacing:-.3px;margin:var(--s6) 0 var(--s3);font-weight:700}
h3{font-size:19px;line-height:1.4}
p{margin:0 0 var(--s3)}
.lead{font-size:22px;line-height:1.5;max-width:var(--content);margin-bottom:var(--s4);color:var(--fg)}
p.body{max-width:var(--content)}
.lede-caption{font-size:16px;color:var(--muted);margin-bottom:var(--s1)}

/* buttons: consistent height and baseline alignment */
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  padding:10px 22px;font-size:19px;line-height:1.6;border:none;border-bottom:3px solid var(--green-d);
  cursor:pointer;font-family:inherit;vertical-align:middle;box-shadow:0 2px 0 var(--green-d)}
.btn:hover{background:var(--green-d);color:#fff}
.btn:focus-visible{outline:3px solid #fd0;outline-offset:0}
.btn-link{display:inline-block;font-size:19px;line-height:1.6;vertical-align:middle;margin-left:var(--s4)}
.btn-sm{background:var(--green);color:#fff;border:none;border-bottom:2px solid var(--green-d);
  padding:6px 12px;font-size:15px;line-height:1.4;cursor:pointer;font-family:inherit;vertical-align:middle}
.btn-sm:hover{background:var(--green-d)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5;margin:var(--s3) 0 var(--s4)}
caption{text-align:left;font-weight:700;font-size:19px;padding-bottom:var(--s2)}
th{text-align:left;border-bottom:2px solid var(--border-strong);padding:var(--s2) var(--s3) var(--s2) 0;vertical-align:bottom}
td{border-bottom:1px solid var(--border);padding:var(--s2) var(--s3) var(--s2) 0;vertical-align:top}
tbody tr:hover{background:var(--panel)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:Consolas,Menlo,monospace;font-size:15px}

/* tags */
.tag{display:inline-block;font-size:15px;font-weight:700;line-height:1.35;padding:2px 8px;border-radius:3px;color:#fff;background:var(--green)}
.tag.grey{background:#6f777b}
.tag.blue{background:var(--link)}
.tag.down{background:var(--green)}

/* panels / notes */
.panel{background:var(--panel);padding:var(--s4) 28px;border-radius:6px}
.inset{border-left:8px solid var(--link);background:var(--panel);padding:var(--s3) 20px;margin:var(--s4) 0;max-width:760px}
.inset p{margin:0}
.offline{background:var(--panel);border-left:8px solid var(--link);padding:var(--s3) 20px;margin:var(--s4) 0}
.offline code,.result code{background:#fff;padding:2px 6px;font-size:14px;word-break:break-all}
.empty{color:var(--muted);font-style:italic}

/* steps */
ol.steps{list-style:none;counter-reset:s;margin:var(--s4) 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--s3)}
ol.steps li{counter-increment:s;border:1px solid var(--border);border-top:4px solid var(--green);border-radius:6px;padding:var(--s4) 20px;display:flex;gap:14px;background:#fff;align-items:flex-start}
ol.steps li:before{content:counter(s);font-size:22px;font-weight:700;color:var(--green);flex:0 0 22px;line-height:1.2}
ol.steps h3{margin-bottom:var(--s1)}
ol.steps p{color:var(--muted);font-size:16px;line-height:1.55;margin:0}

/* layout utilities */
.two-col{display:grid;grid-template-columns:1fr;gap:var(--s6) var(--s6)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:start}
.thirds{display:grid;grid-template-columns:1fr;gap:var(--s3)}
ul{margin:0 0 var(--s3) 22px}
li{margin-bottom:var(--s2)}

/* forms */
.form-group{margin-bottom:var(--s4);max-width:560px}
label{display:block;font-weight:700;margin-bottom:var(--s1)}
.hint{display:block;color:var(--muted);font-weight:400;font-size:16px;margin-bottom:var(--s2)}
input[type=text],input[type=datetime-local],input[type=email],select{width:100%;padding:8px 10px;border:2px solid var(--border-strong);font-size:19px;font-family:inherit;border-radius:2px}
input:focus,select:focus{outline:3px solid #fd0;outline-offset:0}
fieldset{border:none;margin:0 0 var(--s4)}
legend{font-weight:700;margin-bottom:var(--s2);padding:0}
fieldset label{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin-bottom:var(--s2);max-width:560px}
fieldset input{width:auto;margin-top:5px;flex:0 0 auto}
.error{color:var(--err);font-weight:700;margin-top:var(--s3);display:none}

/* pricing */
.price{font-size:38px;font-weight:700;margin:var(--s2) 0;letter-spacing:-.5px}
.price small{font-size:15px;font-weight:400;color:var(--muted)}

/* alert box (home) */
.alert-box{border:1px solid var(--border);border-top:5px solid var(--green);border-radius:6px;padding:var(--s4) 24px;margin:0}
.alert-box .when{font-size:28px;font-weight:700;margin:var(--s2) 0;letter-spacing:-.3px}
.alert-box .sub{color:var(--muted);font-size:16px}
.alert-box .tagline{margin-top:var(--s3)}

/* footer */
footer{background:var(--panel);border-top:1px solid var(--border);color:var(--fg);padding:var(--s6) 0 var(--s6);font-size:16px;margin-top:0}
footer .foot-cols{display:grid;grid-template-columns:1fr;gap:var(--s4)}
footer .foot-cols strong{display:block;font-size:16px;margin-bottom:var(--s2)}
footer .foot-cols a{display:block;margin-bottom:6px;color:var(--link)}
footer .meta{border-top:1px solid var(--border);margin-top:var(--s5);padding-top:var(--s3);color:var(--muted);font-size:14px;line-height:1.6}

@media(min-width:840px){
  .two-col{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1.2fr 1fr;gap:var(--s6)}
  .thirds{grid-template-columns:repeat(3,1fr)}
  ol.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  footer .foot-cols{grid-template-columns:repeat(3,1fr)}
  h1{font-size:48px}
}
@media(max-width:640px){
  h1{font-size:30px}
  .gov-header nav{display:none}
  .page{padding:0 20px}
}

@media print{
  .gov-header nav,.btn,.btn-link{display:none}
  body{font-size:12pt}
}