/* The Bigger Picture uses the existing DigiThat colours and type system. */
.bp-intro{padding-block:clamp(36px,5vw,72px) 32px;max-width:1100px}
.bp-intro h1{font-size:clamp(42px,6vw,76px);margin-bottom:20px}
.bp-intro .lead{max-width:48ch}.bp-intro .actions{margin-top:18px}
.bp-app{padding-bottom:72px}.bp-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.bp-toolbar button{font-size:14px;min-height:44px}.bp-steps{display:flex;gap:8px;flex-wrap:wrap;margin-block:18px 28px}
.bp-steps button{font-size:14px;line-height:1.3;padding:10px 14px;min-height:44px}
.bp-steps [aria-current=step]{border:2px solid var(--rust);text-decoration:underline;text-underline-offset:4px}
.bp-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.bp-panel{min-width:0;border-top:2px solid var(--line);padding-top:24px}.bp-panel h2{font-family:var(--font-body);font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:8px 0 24px}
.bp-stage-label{font-size:14px;font-weight:700;color:var(--rust)}.bp-help{font-size:15px;line-height:1.6;color:var(--muted);margin:8px 0 14px}
.bp-field{border:0;margin:0 0 24px;padding:0;min-width:0}.bp-field>label,.bp-field>legend,.bp-panel>label{display:block;font-size:18px;line-height:1.5;font-weight:700;margin-bottom:12px}
.bp-choice{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:6px;background:var(--card);padding:14px 16px;margin-bottom:10px;min-height:52px;font-size:16px;line-height:1.5;cursor:pointer}
.bp-choice:has(input:checked){border:2px solid var(--rust);padding:13px 15px;background:var(--sand)}
.bp-choice input{width:20px;height:20px;flex:0 0 20px;margin:2px 0 0;accent-color:var(--rust)}
.bp-choice:focus-within{outline:3px solid var(--focus);outline-offset:3px}.bp-field>.button{margin-top:8px;font-size:14px}
.bp-field textarea,.bp-field input[type=text],.bp-disclosure select,.bp-panel>textarea,.bp-recovery textarea{display:block;width:100%;max-width:100%;border:1px solid var(--line);border-radius:4px;padding:12px;background:var(--card);color:var(--text);font:400 16px/1.65 var(--font-body);resize:vertical;min-height:48px}
.bp-panel>textarea{min-height:420px;margin-bottom:12px}.bp-disclosure select{margin:10px 0 22px}
.bp-disclosure{border:1px solid var(--line);border-radius:6px;padding:16px 20px;margin:20px 0;background:var(--card)}
.bp-disclosure>summary,.bp-picture>summary,.bp-handoff summary{cursor:pointer;min-height:44px;font-weight:700;font-size:16px;line-height:1.5;list-style-position:outside;padding-block:8px}
.bp-disclosure[open]>summary{margin-bottom:20px}.bp-disclosure>.bp-field:last-child{margin-bottom:0}.bp-disclosure>p{margin-bottom:14px}
.bp-picture{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:20px;overflow-wrap:anywhere}
.bp-piece{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}.bp-piece h3{font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1.4;letter-spacing:0;margin-bottom:7px}
.bp-piece p{font-size:15px;line-height:1.6;white-space:pre-wrap}.bp-navigation{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;margin-top:32px}
.bp-notice,.bp-recovery,.bp-reset-confirm{background:var(--sand);border:1px solid var(--line);border-left:4px solid var(--rust);border-radius:4px;padding:20px;margin:20px 0;font-size:16px;overflow-wrap:anywhere}
.bp-notice .button{margin:12px 8px 0 0}.bp-error{color:var(--rust);font-size:15px;line-height:1.5;font-weight:700;margin-top:8px}
.bp-error:empty{display:none}.bp-status{font-size:16px;line-height:1.55;min-height:26px;padding:12px 0;overflow-wrap:anywhere}.bp-storage{font-size:15px;border-left:4px solid var(--rust);padding-left:14px;margin:14px 0}
.bp-edit-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.bp-edit-links button{font-size:14px;padding:8px 12px;min-height:44px}
.bp-app button:disabled{opacity:1;background:var(--sand);border-color:var(--line);color:var(--muted);transform:none;text-decoration:none}
.bp-app[data-presentation=plain] .bp-board{display:none}.bp-app[data-presentation=plain] .bp-layout{grid-template-columns:minmax(0,850px)}
.bp-app[data-presentation=plain] .bp-choice{border-width:0 0 1px;border-radius:0;background:transparent}.bp-app[data-presentation=plain] .bp-choice:has(input:checked){border-width:0 0 2px;padding:14px 16px 13px}
.bp-handoff{border:1px solid var(--line);border-radius:6px;padding:20px;margin:0 0 28px;overflow-wrap:anywhere}
.bp-handoff h2{font:700 24px/1.3 var(--font-body);letter-spacing:-.02em;margin-bottom:12px}.bp-handoff p{font-size:16px}.bp-handoff pre{font:400 15px/1.6 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto;background:var(--sand);padding:16px}
.bp-print{display:none}
/* A short entrance marks a new question, never each keystroke or selection. */
@media(prefers-reduced-motion:no-preference){
 .bp-panel[data-enter="0"]{animation:bp-step-in-a 180ms ease-out}
 .bp-panel[data-enter="1"]{animation:bp-step-in-b 180ms ease-out}
 .bp-choice,.bp-steps button{transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
 .bp-choice:has(input:checked){box-shadow:inset 3px 0 0 var(--rust)}
}
@keyframes bp-step-in-a{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes bp-step-in-b{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:899px){.bp-layout{grid-template-columns:minmax(0,1fr)}.bp-board{order:2}.bp-steps{gap:6px}.bp-steps button{font-size:13px;padding:8px 10px}.bp-picture{padding:16px}.bp-toolbar .button{padding-inline:14px}}
@media(max-width:440px){.bp-disclosure{padding:12px}.bp-choice{padding:12px}.bp-choice:has(input:checked){padding:11px}.bp-navigation .button{width:100%}.bp-panel .actions .button{width:100%}.bp-panel>textarea{min-height:380px}}
@media(prefers-reduced-motion:reduce){.bp-app *,.bp-handoff *{scroll-behavior:auto;transition:none!important;animation:none!important}}
@media print{html:has(body.bp-page.bp-printing){background:#FFFFFF!important;color-scheme:light!important}body.bp-page.bp-printing>*{display:none!important}.bp-page.bp-printing>.bp-print{display:block!important;color:#091A25;background:#FFFFFF;font:12pt/1.5 Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:0}body.bp-page.bp-printing{background:#FFFFFF!important;color:#091A25!important}.bp-print:empty{display:none!important}}

/* Online-first brief: persistent examples and a visible sense of progress. */
.bp-welcome{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}
.bp-welcome>div{padding:20px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--rust);border-radius:8px}
.bp-welcome strong{font-size:16px}.bp-welcome p{font-size:15px;line-height:1.6;margin:10px 0 0}
.bp-remember{display:flex;align-items:center;gap:12px;font-size:16px;min-height:44px}.bp-remember input{width:22px;height:22px;accent-color:var(--rust)}
.bp-example{border-left:3px solid var(--rust);background:var(--sand);border-radius:4px;padding:14px 16px;margin:0 0 14px;font-size:15px;line-height:1.6}
.bp-example p{margin:7px 0;white-space:pre-wrap}.bp-example .button{font-size:14px;padding:9px 14px;min-height:44px}.bp-example small{display:block;margin-top:8px;color:var(--muted)}
.bp-picture progress{display:block;width:100%;height:12px;accent-color:var(--rust);margin:12px 0}.bp-progress-label{font-weight:700;margin-top:12px}
.bp-route{list-style:none;padding:0;display:grid;gap:8px;margin:20px 0;counter-reset:piece}.bp-route li{counter-increment:piece;padding:12px;border:1px solid var(--line);border-radius:6px;font-size:15px}.bp-route li:before{content:counter(piece);display:inline-grid;place-items:center;background:var(--sand);width:28px;height:28px;border-radius:50%;margin-right:12px}.bp-route li[data-done=true]{border-color:var(--rust)}
.bp-missing summary{cursor:pointer;padding:12px 0}.bp-missing button{display:block;text-align:left;margin:8px 0;font-size:14px;width:100%}.bp-piece p{max-height:180px;overflow:auto}
#picture-start{scroll-margin-top:100px}
@media(min-width:900px){.bp-board{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto}}
@media(max-width:650px){.bp-welcome{grid-template-columns:1fr;gap:10px}.bp-welcome>div{padding:16px}.bp-intro{padding-top:28px}}

.bp-panel{scroll-margin-top:100px}
/* Keep radio labels in a row despite the general form label rule. */
.bp-app label.bp-choice{display:flex;align-items:flex-start;gap:16px}
.bp-app label.bp-choice input{width:20px;height:20px;min-height:20px;flex:0 0 20px;margin:2px 0 0;padding:0}
.bp-app label.bp-choice span{min-width:0}

.bp-host{display:flex;align-items:center;gap:24px;margin-top:24px;max-width:760px}.bp-host img{width:128px;height:160px;object-fit:cover;border-radius:8px;flex-shrink:0}.bp-host strong{font-size:20px}.bp-host p{font-size:16px;line-height:1.6;margin:10px 0}.bp-host a{font-size:15px}@media(max-width:500px){.bp-host{gap:16px;align-items:flex-start}.bp-host img{width:88px;height:110px}.bp-host strong{font-size:18px}}