/* pluginsolarinfo.co.uk
   The technical reference. This is a documentation site and it should look like
   one: a persistent clause tree on the left, dense anchored content on the right,
   heavy use of monospace for standards references.

   Shares nothing with pluginsolarbritain (light guide, Archivo, brick red) or
   pluginsolarleads (dark trade, Barlow condensed, green). Different faces,
   different palette, and a two column shell neither of them uses. */

:root{
  --page:#FFFFFF;
  --shell:#F7F7F8;
  --ink:#1B1B1F;
  --body-ink:#33343A;
  --dim:#6B6C77;
  --rule:#E3E3E6;
  --link:#4338CA;
  --link-deep:#312E9E;
  --warn:#B45309;
  --warn-bg:#FDF6EC;
  --ok:#15803D;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--body-ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);margin:0;font-weight:600;letter-spacing:-0.005em}
p{margin:0 0 1.1rem;max-width:72ch}
a{color:var(--link);text-decoration:none;font-weight:600}
a:hover{color:var(--ink)}
code,.ref{font-family:var(--mono);font-size:.86em;color:var(--link-deep);background:var(--shell);padding:.1em .35em;border:1px solid var(--rule)}

/* masthead */
header.mast{border-bottom:1px solid var(--rule);background:var(--page);position:sticky;top:0;z-index:30}
.mast-in{max-width:86rem;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:3.75rem}
.brand{display:flex;align-items:baseline;gap:.5rem;color:var(--ink);font-weight:600}
.brand em{font-style:normal;font-family:var(--mono);font-size:.95rem;color:var(--link-deep)}
.brand span{font-family:var(--serif);font-size:1.2rem}
.mast nav{display:flex;gap:1.25rem;font-size:.9rem;font-weight:600}
.mast nav a{color:var(--body-ink)}
.mast nav a:hover{color:var(--link)}
@media(max-width:700px){.mast nav{display:none}}

/* two column shell */
.shell{max-width:86rem;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:17rem 1fr;gap:3rem;align-items:start}
@media(max-width:1000px){.shell{grid-template-columns:1fr;gap:0}}
aside{position:sticky;top:4.25rem;padding:2.5rem 0 3rem;max-height:calc(100vh - 4.25rem);overflow-y:auto}
@media(max-width:1000px){aside{position:static;max-height:none;padding:1.5rem 0;border-bottom:1px solid var(--rule)}}
aside h4{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 .7rem}
aside ol{list-style:none;margin:0 0 1.75rem;padding:0;font-size:.9rem}
aside li{margin-bottom:.1rem}
aside a{display:block;padding:.3rem .55rem;color:var(--body-ink);font-weight:500;border-left:0}
aside a:hover{background:var(--shell);color:var(--link)}
aside a.here{background:var(--shell);color:var(--link-deep);font-weight:700}
aside .num{font-family:var(--mono);font-size:.8em;color:var(--dim);margin-right:.45rem}

main{padding:2.5rem 0 4rem;min-width:0}
.doc-title{font-size:clamp(2.1rem,3.4vw,2.9rem);line-height:1.1;margin-bottom:.6rem}
.doc-sub{font-size:1.12rem;color:var(--dim);max-width:62ch;margin:0 0 2rem}
.meta{display:flex;flex-wrap:wrap;gap:1.5rem;padding:.9rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:2.5rem;font-size:.82rem;color:var(--dim)}
.meta b{display:block;font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:.15rem}

section/* Quoted statutory text, set apart from our own prose. */
blockquote{margin:1.2rem 0;padding:1rem 1.2rem;background:var(--shell);border:1px solid var(--rule)}
blockquote p{margin:0;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:.92rem;line-height:1.65;color:var(--ink)}

.clause{padding:1.75rem 0;border-top:1px solid var(--rule)}
section.clause:first-of-type{border-top:0;padding-top:0}
section.clause h2{font-size:1.7rem;margin-bottom:.8rem;scroll-margin-top:5rem}
section.clause h2 .n{font-family:var(--mono);font-size:.7em;color:var(--dim);margin-right:.6rem;font-weight:400}
section.clause h3{font-size:1.2rem;margin:1.6rem 0 .5rem}

/* definition tables */
table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.4rem;font-size:.95rem}
th,td{text-align:left;padding:.65rem .8rem;border:1px solid var(--rule);vertical-align:top}
th{background:var(--shell);font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
td code{background:none;border:0;padding:0}

/* callouts, full borders only */
.callout{border:1px solid var(--rule);background:var(--shell);padding:1.1rem 1.25rem;margin:1.4rem 0;font-size:.96rem}
.callout p:last-child{margin-bottom:0}
.callout b{display:block;font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem}
.callout.warn{background:var(--warn-bg);border-color:#EBD5B4}
.callout.warn b{color:var(--warn)}

/* source line */
.src{font-size:.85rem;color:var(--dim);margin:1rem 0 0}
.src a{font-weight:600}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
@media(max-width:600px){.pager{grid-template-columns:1fr}}
.pager a{display:block;border:1px solid var(--rule);padding:.9rem 1.1rem;color:var(--ink);font-weight:600}
.pager a:hover{border-color:var(--link);color:var(--link)}
.pager span{display:block;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:.25rem;font-weight:400}
.pager .next{text-align:right}

footer{border-top:1px solid var(--rule);background:var(--shell);margin-top:3rem}
footer .in{max-width:86rem;margin:0 auto;padding:2.5rem 1.5rem 3rem;font-size:.88rem;color:var(--dim)}
footer p{max-width:74ch}
footer a{font-weight:600}

/* Wide content scrolls inside its own container rather than pushing the page
   sideways. Reference tables are wide by nature, so below 560px they become a
   scrollable block and keep their columns instead of being crushed. */
code,.ref{overflow-wrap:anywhere}
td,th{overflow-wrap:break-word}
@media(max-width:560px){
  section.clause table{display:block;width:100%;overflow-x:auto}
  .meta{gap:1rem}
}