/* Loptr Lab Training: one shared stylesheet. Palette/type: veiled-dominion-engine/docs/design/DESIGN_BIBLE.md.
Gold marks links/labels, never fills. Muted text is raised for readable contrast. */
:root{color-scheme:dark;--void:#050505;--surface:#141414;--text-primary:#e0e0e0;--text-muted:#b5b5b5;--the-light:#d4a853;--line:#777;--font-main:'Helvetica Neue',Helvetica,Arial,sans-serif;--reading-size:1.125rem;--gutter:clamp(1rem,4vw,3rem)}
:root[data-theme=light]{color-scheme:light;--void:#d9d9d6;--surface:#e6e6e3;--text-primary:#171717;--text-muted:#454545;--the-light:#72521b;--line:#777}
:root[data-text-size=large]{--reading-size:1.3125rem}
:root[data-text-size=largest]{--reading-size:1.5rem}
*{box-sizing:border-box}
html{background:var(--void);color:var(--text-primary);font-family:var(--font-main);scroll-padding-top:1rem}
body{margin:0;font-size:var(--reading-size);line-height:1.65;background:var(--void);overflow-wrap:anywhere}
.masthead,main,footer{width:min(calc(100% - 2 * var(--gutter)),72rem);margin-inline:auto;min-width:0}
.masthead{padding-block:2rem 1.5rem;border-bottom:1px solid var(--line)}
.serial,.eyebrow,.panel-head{color:var(--the-light);font:600 .9em/1.5 var(--font-main);letter-spacing:.025em}
h1,h2,h3{font-family:var(--font-main);font-weight:500;letter-spacing:normal;line-height:1.25;margin:0 0 1rem;text-wrap:pretty;overflow-wrap:break-word}
h1{font-size:clamp(2.1em,4.5vw,3.5em);margin-top:1rem;max-width:22ch}
h2{font-size:clamp(1.6em,3vw,2.25em)}h3{font-size:1.3em}
.subtitle,.lead{font-size:1.15em;line-height:1.6;max-width:65ch;color:var(--text-muted);letter-spacing:normal;font-weight:400}
p,ul,ol,dl{margin:0 0 1.25rem}p{max-width:72ch}ul,ol{padding-left:1.5em}li+li{margin-top:.6em}
a{color:var(--the-light);text-underline-offset:.2em}a:hover{text-decoration-thickness:.15em}
button,input,select,textarea{font:inherit}button,select{min-height:3rem;background:var(--surface);color:var(--text-primary);border:1px solid var(--line);border-radius:.5rem;padding:.5rem .75rem}
:focus-visible{outline:3px solid var(--the-light);outline-offset:4px}
main{padding-block:1.5rem 3rem}main>section+section{margin-top:2rem}
.brief,.panel{border:1px solid var(--line);padding:clamp(1rem,3vw,2rem);background:var(--surface);border-radius:.75rem;box-shadow:none;min-width:0}
.panel-head{margin-bottom:1rem}.featured-resource{border-inline-start:3px solid var(--the-light)}
.featured-resource .eyebrow{margin-bottom:.75rem}.featured-resource p{max-width:70ch}.featured-resource .notice{margin-top:1.25rem}
.notice,footer{color:var(--text-muted)}.notice{font-size:.9em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:1.25rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.65rem 1rem;border:1px solid var(--line);border-radius:.5rem;background:transparent;color:var(--the-light);font:600 1em/1.45 var(--font-main);text-align:left;text-decoration:none;max-width:100%}
.button:hover{border-color:var(--the-light);text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2rem}.grid>*{min-width:0}
.journey{display:grid;gap:.5rem}.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.5rem 1.5rem}
.table-wrap{overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse}th,td{padding:.8rem;border:1px solid var(--line);text-align:left;vertical-align:top}th{font-weight:650}
.guide{max-width:72rem;line-height:1.65}.guide h2{margin-top:2rem}.guide>h2:first-child{margin-top:0}.guide table{background:var(--surface)}
dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:.5rem 1rem}dt{font-weight:650;color:var(--the-light)}dd{margin:0}
footer{padding-block:2rem;border-top:1px solid var(--line);font-size:1em;display:block}footer p{max-width:75ch}
.display-settings{margin-bottom:1.5rem}.display-settings summary{cursor:pointer;color:var(--the-light);min-height:3rem;padding-block:.5rem;width:fit-content}
.display-controls{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-block:.5rem 1rem}.display-controls label{display:flex;flex-direction:column;gap:.4rem;font-size:1em;min-width:min(100%,12rem)}
.skip-link{position:absolute;top:0;left:var(--gutter);transform:translateY(-150%);z-index:100;background:var(--surface);color:var(--the-light);padding:1rem}.skip-link:focus{transform:translateY(0)}
.scanlines{display:none}.statusbar,.path{display:flex;flex-wrap:wrap;gap:1rem}.violet{margin-top:2rem;padding:1.5rem;border:1px solid var(--line);background:var(--surface)}.directive{color:var(--the-light)}
img,svg,video,iframe{max-width:100%}img{height:auto}code{overflow-wrap:anywhere}
@media(max-width:44rem){.grid{grid-template-columns:1fr}.actions{align-items:stretch}.actions .button{flex:1 1 100%;justify-content:flex-start}h1{font-size:2.1em}.masthead h1 br{display:none}.display-controls{flex-direction:column}dl{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){.brief,.panel,.button,select{border:1px solid CanvasText}:focus-visible{outline-color:Highlight}}
/* Shared learning form controls: inherit existing palette, reading size and focus. */
fieldset{border:1px solid var(--line);border-radius:.5rem;padding:1rem;margin:1rem 0;min-width:0}
legend{font-weight:650;padding-inline:.25rem;max-width:100%}
.choice{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem 0;cursor:pointer}
.choice input{flex:0 0 auto;margin-top:.5rem;min-width:1.25rem;min-height:1.25rem;accent-color:var(--the-light)}
textarea,input[type=number]{display:block;width:100%;max-width:100%;min-height:3rem;margin-block:.5rem 1rem;padding:.65rem;background:var(--void);color:var(--text-primary);border:1px solid var(--line);border-radius:.5rem}
button{cursor:pointer;max-width:100%;white-space:normal;margin-block:.3rem}
button:disabled{cursor:default;border-style:dashed}
.feedback{margin-block:1rem}.answer-key{margin-top:1rem}.answer-key summary{cursor:pointer;color:var(--the-light);padding-block:.75rem;min-height:3rem}
[hidden]{display:none!important}
select{max-width:100%}