/* Production additions on top of e08.css: brand mark, real routes, no-JS fallbacks. */
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{flex-shrink:0;width:34px;height:31px}
.footer-brand .brand-mark{width:29px;height:27px}
.brand-text{display:block}
.site-nav a[aria-current=page]{color:#1D46A0}
.site-nav a[aria-current=page]:not(.nav-contact){border-bottom:1px solid var(--gold);padding:5px 0}

/* Preview builds only: removed by build.py --launch */
.preview-note{background:#0F2B4D;color:#F6F2E3;font-size:11px;text-align:center;padding:7px 18px;line-height:1.4}

/* Audience tiles use real <a> links; keep the photo behind the label */
.role-tile>picture{position:absolute;inset:0;z-index:-2}
.role-tile>picture img{width:100%;height:100%;object-fit:cover;filter:saturate(.72);transition:transform .5s ease}
.role-tile:hover>picture img{transform:scale(1.025)}
.audience-image>picture{position:absolute;inset:0}
.audience-image>picture img{width:100%;height:100%;object-fit:cover;filter:saturate(.8)}

/* Example entry: the field is never sent anywhere */
.compact-search input::placeholder{color:#6A7078}

/* Example type links (real routes, styled like the prototype's buttons) */
.sample-tabs a{border:1px solid #BCC3CD;padding:9px 15px;font-size:12px;display:inline-block}
.sample-tabs a[aria-current=page]{background:var(--ink);color:white;border-color:var(--ink)}

/* Output tabs: without JS every panel shows, each with its own heading */
.output-tabs[hidden]{display:none!important}
.no-tabs .workspace-body{display:block}
.no-tabs .output-panel+.output-panel{border-top:1px solid var(--rule)}
.panel-label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.has-tabs .panel-label{display:none}

/* Source disclosure: native details, expands inline, no modal */
details.source-detail{margin-top:7px}
details.source-detail>summary{list-style:none;font-size:10px;background:#E9EDF3;border:1px solid #B4C0CF;padding:5px 8px;line-height:1.4;cursor:pointer;display:inline-block}
details.source-detail>summary::-webkit-details-marker{display:none}
details.source-detail[open]>summary{border-color:var(--gold)}
details.source-detail .inline-source{margin-top:10px}
.sources-list details.source-detail{margin:0}

/* Contact: sending stays off until a real endpoint is tested */
.button[disabled]{opacity:.55;cursor:not-allowed}
.noscript-note{font-size:12px;color:var(--muted);margin-top:10px}

/* Simple pages */
.plain-page{padding:10px 0 70px;max-width:760px}
.plain-page h1{font-size:47px;margin:12px 0 18px}
.plain-page p{font-size:16px;color:var(--muted);margin-bottom:16px}

@media(max-width:720px){
 .brand{gap:9px}
 .brand-mark{width:28px;height:26px}
 .plain-page h1{font-size:37px}
}

/* Spam trap: hidden from people and screen readers, bots fill it */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.draft-box.is-error{border-color:#F2C94C;background:#F7EEDC}

/* Readability pass (20 Oct): text-heavy pages. Body 17px at 1.6, nothing people read below 15px on
   desktop or 14px on phones, paragraphs capped near 70 characters. Small caps labels stay small. */
body{font-size:17px;line-height:1.6}
p{line-height:1.6}
.eyebrow{font-size:11px}
.site-nav{font-size:14px}
.breadcrumb{font-size:13px}
.small,.source-micro,.form-note,.atlas-after{font-size:13px}
.audience-copy p,.explore-heading p,.scope-section p,.contact-head p,.example-head p{font-size:18px;line-height:1.55}
.task-card p,.section-intro p,.quiet-panel p,.contact-aside p,.proof-intro p,.plain-page p{font-size:16px}
.output-panel>p,.plain-page p,.audience-copy p,.quiet-panel p{max-width:68ch}
.text-link,.task-card a{font-size:15px}
.trust-inner>span,.sample-tabs a{font-size:14px}
.sample-links a{font-size:13px}
.proof-rows>div,.evidence-item,.sources-list li,.example-bottom p,.callout{font-size:15px}
.evidence-item span{font-size:14px}
.callout{line-height:1.6}
.example-warning{font-size:14px}
.output-tabs button{font-size:14px}
.output-table{font-size:14px}
.output-table td{line-height:1.6}
.output-table th,.badge,.source-pill,details.source-detail>summary{font-size:11px}
.inline-source p,.method-chain p,.inline-source .source-meta{font-size:14px}
.method-chain h4{font-size:15px}
.process-line b{font-size:15px}
.process-line span{font-size:14px}
.field{font-size:14px}
.field input,.field select,.field textarea{font-size:16px}
.site-footer p{font-size:14px}
.site-footer p span{font-size:12px}
@media(max-width:720px){
 body{font-size:16px}
 .audience-copy p,.explore-heading p,.scope-section p,.contact-head p,.example-head p{font-size:16px}
 .task-card p,.section-intro p,.quiet-panel p,.contact-aside p,.proof-intro p,.plain-page p,.output-panel>p{font-size:15px}
 .proof-rows>div,.evidence-item,.sources-list li,.example-bottom p,.callout,.text-link,.task-card a{font-size:14px}
 .evidence-item span,.example-warning,.process-line span,.inline-source p,.method-chain p,.output-table,.output-tabs button{font-size:13px}
 .trust-inner>span,.atlas-after,.sample-links a,.sample-tabs a,.small,.source-micro,.form-note{font-size:12px}
 .process-line b{font-size:14px}
 .field input,.field select,.field textarea{font-size:16px}
}

/* E08: the four tiles stay equal however the copy wraps */
.atlas{grid-auto-rows:1fr}
@media(max-width:720px){.atlas{grid-auto-rows:auto}}

/* Brand palette and type, 20 Oct 2026 (GPT brand board, Lyndal):
   navy #0F2B4D headings and dark sections; warm yellow #F2C94C kept for the question tile and the check;
   action blue #2457C5 for links and primary buttons; paper #F7F5EC; ink #1F2937 body text.
   IBM Plex Sans: SemiBold wordmark and key headings, Medium navigation and buttons, Regular body. */
body{color:#1F2937}
h1,h2,.wordmark{font-weight:600}
h1,h2,h3,.wordmark{color:#0F2B4D}
.role-tile h2,.scope-section h2{color:#FFFFFF}
.site-nav,.button{font-weight:500}
.button{background:#2457C5;border-color:#2457C5;color:#FFFFFF}
.button:hover{background:#1D46A0;border-color:#1D46A0}
.text-link{border-bottom-color:#2457C5}
.question-tile{background:#F2C94C;color:#0F2B4D}
.question-tile h1{color:#0F2B4D}
.circle-arrow{border-color:rgba(255,255,255,.75)}
.role-tile:hover .circle-arrow{background:#F2C94C;color:#0F2B4D;border-color:#F2C94C}
.scope-section{background:#0F2B4D}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:#2457C5}
.role-tile:focus-visible{outline:4px solid #F2C94C}

/* Wordmark lockup: mark + "Permissible" in Plex SemiBold. No endorsement inside the logo. */
.brand{gap:11px}
.brand .wordmark{font-size:29px;letter-spacing:-.02em}
.brand-mark{width:40px;height:40px}
.footer-brand .brand-mark{width:32px;height:32px}
.footer-brand .wordmark{font-size:23px}
.powered{font-size:12px;color:#556170;display:block;margin-top:8px}
.powered a{color:#2457C5;text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.brand .wordmark{font-size:24px}.brand-mark{width:32px;height:32px}}

/* Header tagline and footer MapCheck link (20 Oct 2026) */
.brand-text{display:flex;flex-direction:column;gap:5px}
.tagline{font-size:12px;font-weight:500;color:#556170;letter-spacing:.01em;line-height:1.2}
a.powered{display:flex;width:max-content;align-items:center;gap:9px;margin-top:14px;font-size:12px;color:#556170;text-decoration:none}
a.powered img{display:block;height:34px;width:auto}
a.powered:hover span{color:#2457C5}
@media(max-width:720px){.tagline{font-size:11px}}
@media(max-width:600px){.site-header .tagline{display:none}}

/* Type split (20 Oct 2026, Lyndal): body in Public Sans, the NSW Government Design System face;
   wordmark, headings, navigation and buttons stay in IBM Plex Sans. */
:root{--font:'Public Sans','Segoe UI',Arial,sans-serif;--display:'IBM Plex Sans','Segoe UI',Arial,sans-serif}
body,input,select,textarea{font-family:var(--font)}
h1,h2,h3,h4,.wordmark,.site-nav,.button,.eyebrow,.role-tile h2,.question-tile h1{font-family:var(--display)}

/* Yellow tile: what we deliver, above the fold (draft 20 Oct) */
.deliver{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px;max-width:520px}
.deliver li{position:relative;padding-left:24px;font-size:16px;line-height:1.4;color:#0F2B4D}
.deliver li:before{content:'';position:absolute;left:2px;top:5px;width:11px;height:6px;border-left:2.5px solid #0F2B4D;border-bottom:2.5px solid #0F2B4D;transform:rotate(-45deg)}
.question-tile .scale-note{margin-top:16px}
.question-tile p{margin-top:12px}
@media(max-width:720px){.deliver li{font-size:15px}}

/* Header mark bigger so the NSW-shaped bottom layer reads (20 Oct) */
.site-header .brand-mark{width:56px;height:56px}
.site-header .brand{gap:13px}
@media(max-width:720px){.site-header .brand-mark{width:44px;height:44px}}

/* Supplied logo image (replaces the redrawn mark, 20 Oct) */
.brand-logo{display:block;height:58px;width:auto}
.site-footer .brand-logo{height:38px}
.site-header .brand-text{gap:6px}
@media(max-width:720px){.brand-logo{height:44px}}

/* Questions and answers (AEO): visible, plain, quotable */
.faq{padding:56px 0 40px}
.faq>h2{font-size:clamp(28px,3vw,38px);margin-bottom:24px}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 36px}
.faq-item{border-top:2px solid #F2C94C;padding-top:14px}
.faq-item h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.faq-item p{font-size:16px;color:#3D4A5C;max-width:62ch}
.audience-hero~.faq{padding-top:10px}
@media(max-width:720px){.faq{padding:36px 0 24px}.faq-item h3{font-size:17px}.faq-item p{font-size:15px}}