/* Course presentation: RON828 palette, navy outlines and beveled controls.
   Original layout rules and activity state colors are retained underneath. */
:root{--ink:#112640;--navy:#15274b;--cyan:#4bbded;--ice:#a5edff;--green:#60e99a;--coral:#ffa294;--amber:#ffd19a;--muted:#254e67;--border:#122640;--shadow:5px 5px 0 #142847}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.pisga{max-width:none;min-height:100svh;margin:0;padding:0 32px 40px;background:var(--cyan);color:var(--ink);font:600 17px/1.55 Arial,"Segoe UI",sans-serif;overflow-wrap:break-word}
.pisga main{max-width:1120px;margin:14px auto 0;padding:0 0 25px;background:transparent;min-width:0}
.pisga .course-header{max-width:1120px;margin:0 auto 24px;padding:27px 0 20px;border:0;border-bottom:3px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:right}
.pisga .course-header a{display:inline;padding:0;color:var(--ink);text-decoration:none}
.pisga .course-brand{font:900 23px/1 "Courier New",monospace;direction:ltr;white-space:nowrap}
.pisga .course-home{font-weight:800;font-size:16px}
.pisga .course-back{display:inline-block;margin-bottom:22px;font-size:14px;text-underline-offset:4px}
.pisga a{color:var(--ink);text-underline-offset:4px}
.pisga h1,.pisga h2,.pisga h3{color:var(--ink);font-weight:900;line-height:1.25}
.pisga h1{font-size:clamp(26px,3vw,36px);margin:6px 0 18px;letter-spacing:-.5px}
.pisga h2{font-size:24px;border-color:var(--border)}
.pisga h3{font-size:20px}
.pisga p{margin:9px 0}
.pisga .eyebrow,.pisga .subtitle,.pisga .muted,.pisga .rule,.pisga .count,.pisga .tip,.pisga .footer,.pisga .id,.pisga .graph-legend,.pisga .graph-card .meta{color:var(--muted)}
.pisga .eyebrow{font-size:14px;margin:0 0 7px}
.pisga main>header{border:0;margin-bottom:24px;padding-bottom:0}
.pisga .panel,.pisga .graph-card,.pisga .exercise,.pisga .question,.pisga #dna-app .board,.pisga .lock,.pisga .lock-list{border:3px solid var(--border);border-radius:0;background:#83d6ed;padding:20px;box-shadow:inset 2px 2px 0 #c9f4ff,inset -2px -2px 0 #3e9fbd,var(--shadow);min-width:0}
.pisga .panel,.pisga .graph-card{margin-top:20px}
.pisga .exercise,.pisga .question{margin:22px 0;background:#a5e5ee}
.pisga .question:nth-of-type(even){background:#a9e7cd}
.pisga .prompt,.pisga .key-idea,.pisga .notice,.pisga .answer,.pisga .solution{border:2px solid var(--border);border-inline-start-width:6px;border-radius:0;padding:13px 17px;background:var(--amber);color:var(--ink)}
.pisga .answer,.pisga .solution{background:#b0e8cb}
.pisga .notice{background:#ffe4a9}
.pisga button,.pisga select,.pisga .form-link{font:800 16px/1.35 Arial,"Segoe UI",sans-serif;min-height:44px;padding:9px 15px;background:var(--green);color:var(--ink);border:3px solid var(--border);border-radius:0;box-shadow:inset 2px 2px 0 #d4ffe5,inset -2px -2px 0 #389c79,3px 3px 0 var(--navy);touch-action:manipulation;cursor:pointer;transition:transform .1s,filter .1s}
.pisga button:hover:not(:disabled),.pisga .form-link:hover{background:var(--green);filter:brightness(1.07);transform:translate(-1px,-1px)}
.pisga button:active:not(:disabled){transform:translate(2px,2px);box-shadow:inset 2px 2px 0 #389c79,1px 1px 0 var(--navy)}
.pisga button:disabled{opacity:.5;cursor:default;filter:saturate(.5)}
.pisga button[id*="reset"],.pisga .lock-actions button:last-child{background:var(--amber);box-shadow:inset 2px 2px 0 #fff0ca,inset -2px -2px 0 #b17f61,3px 3px 0 var(--navy)}
.pisga button:focus-visible,.pisga a:focus-visible,.pisga input:focus-visible,.pisga select:focus-visible,.pisga textarea:focus-visible,.pisga summary:focus-visible,.pisga [role=button]:focus-visible{outline:3px dashed var(--navy);outline-offset:5px}
.pisga input[type=checkbox],.pisga input[type=radio]{accent-color:var(--navy);width:20px;height:20px;flex-shrink:0}
.pisga input[type=text],.pisga textarea{font:inherit;background:#c3f0df;color:var(--ink);border:3px solid var(--border);border-radius:0;box-shadow:inset 3px 3px 0 #6aa99d;padding:11px}
.pisga select{background:var(--amber);max-width:100%}
.pisga details{border:2px solid var(--border);padding:13px 16px;background:#b0e8cb}
.pisga summary{cursor:pointer}
.pisga th,.pisga td{border:2px solid var(--border);padding:10px 12px}
.pisga th{background:var(--amber)}
.pisga td{background:#b8e9ef}
.pisga table{border-collapse:collapse}
.pisga .course-nav,.pisga .nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;margin-top:30px;padding-top:18px;border-top:3px solid var(--border)}
.pisga .course-nav a,.pisga .nav a{display:inline-block;padding:9px 14px;min-height:44px;background:var(--amber);border:2px solid var(--border);text-decoration:none;box-shadow:3px 3px 0 var(--navy);font-size:15px}
.pisga footer{border-color:var(--border);color:var(--muted)}
.pisga [hidden]{display:none!important}
/* Index: four lesson panels, with every source link preserved. */
.course-index main{max-width:1080px}
.course-index .logo-row{text-align:right;margin:0 0 20px}
.course-index .logo{display:block;width:190px;max-width:65%;height:auto;background:#fff;padding:10px;border:2px solid var(--border)}
.course-index main>header{text-align:right;padding:0;margin-bottom:29px}
.course-index h1{font-size:42px;margin-bottom:10px}
.course-index .course-subtitle{margin:0;color:var(--muted)}
.course-index .lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px;align-items:start}
.course-index section{max-width:none;min-width:0;margin:0;padding:24px;border:3px solid var(--border);background:var(--amber);box-shadow:inset 2px 2px 0 #fff1d4,inset -2px -2px 0 #bd9477,var(--shadow);scroll-margin-top:24px}
.course-index section:nth-child(2){background:var(--coral)}
.course-index section:nth-child(3){background:#a5edff}
.course-index section:nth-child(4){background:#8ae3ad}
.course-index section h2{font-size:25px;margin:0 0 20px;line-height:1.35}
.course-index ul{list-style:none;padding:0;margin:0;border-top:2px solid var(--border)}
.course-index li{margin:0;border-bottom:1px solid #15274b70}
.course-index li a{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 7px;text-decoration:none;min-height:48px}
.course-index li a:hover{background:#ffffff40}
.course-index .arrow{font-size:22px}
.course-index .questionnaire{margin-top:12px;border-top:2px solid var(--border)}
.course-index .lesson-summary{font-weight:900}
/* Lamp and coordinate activities keep their spatial layouts and state cues. */
.pisga .lamp{border:3px solid var(--border);border-radius:50%;background:#7c9caf;box-shadow:inset 2px 2px 0 #b6ccda,2px 2px 0 var(--navy);padding:0;min-height:0}
.pisga .lamp.on,.pisga .lamp.on:hover{background:#ffdc63;box-shadow:inset 2px 2px 0 #fff3b0,2px 2px 0 var(--navy);filter:none}
.pisga .lamp:not(.on):hover{background:#91b0bf}
.pisga .lamp.selected{outline:4px solid var(--navy);outline-offset:4px}
.pisga #grid{background:#c7f1f7;border:2px solid var(--border)}
.pisga .controls{gap:11px}
.pisga .controls button[data-dx]{padding:4px;font-size:25px}
/* Diagram canvases stay light so original yellow/blue/orange state colors remain distinct. */
.pisga .graph-map,.pisga .graph-scroll,.pisga .graph-figure{background:#e0f8f8;border:2px solid var(--border)}
.pisga .graph-map,.pisga .graph-scroll{padding:9px}
.pisga .graph-map{min-width:0;max-width:100%}
.pisga .graph-figure{padding:14px}
.pisga .graph-card .node{stroke:var(--navy);stroke-width:2.5}
.pisga .graph-card .node[fill=white]{fill:#b3e9eb}
.pisga .degree-label{fill:var(--navy)}
.pisga .route,.pisga .path,.pisga .code-trace{background:#c4ebec;padding:9px 12px;border:1px solid var(--border);color:var(--navy)}
.pisga .route-sequence{overflow-wrap:anywhere}
/* Lock keys, display and checked codes. */
.pisga .lock,.pisga .lock-list{background:#91d9eb}
.pisga .lock-display{border:3px solid var(--border);border-radius:0;background:#b0e8cb;color:#16494b;box-shadow:inset 3px 3px 0 #5d9e87;font-weight:900}
.pisga .lock-keys{gap:11px}
.pisga .lock-keys button{height:57px;border-radius:0;background:var(--amber);font:900 26px "Courier New",monospace;box-shadow:inset 2px 2px 0 #fff0ca,inset -2px -2px 0 #b17f61,3px 3px 0 var(--navy)}
.pisga .lock-code,.pisga .code-list li{border:2px solid var(--border);border-radius:0;background:#c5e6ed;color:#355269}
.pisga .lock-code.seen{background:var(--green);color:var(--ink)}
.pisga .lock-code.current{outline:3px solid var(--navy);outline-offset:1px}
.pisga .lock-sequence{color:var(--muted)}
/* DNA tiles: normal, matching and used states keep separate visual cues. */
.pisga #dna-app .board{margin-top:24px;background:#97dfe9}
.pisga #dna-app .sequence{background:#c3f0df;border:2px solid var(--border);border-radius:0;color:var(--ink);box-shadow:inset 2px 2px 0 #70aaa3}
.pisga #dna-app .pool{gap:12px;padding:5px 0 7px}
.pisga #dna-app .tile{background:var(--amber);border:3px solid var(--border);border-radius:0;box-shadow:inset 2px 2px 0 #fff0c7,3px 3px 0 var(--navy);color:var(--ink);font:700 21px Consolas,monospace;padding:9px 12px}
.pisga #dna-app .tile.match{background:var(--green);outline:3px solid var(--navy);outline-offset:2px;padding:9px 12px}
.pisga #dna-app .tile.used{background:#bbced2;opacity:.55;box-shadow:none}
.pisga #dna-app .chain .tile{min-height:40px;font-size:17px;padding:5px 9px;background:#c4edcf;box-shadow:none}
.pisga #dna-app .status.error{color:#742334}
.pisga #dna-app .status.success{color:#164d3c}
.pisga dialog{max-width:min(420px,calc(100% - 36px));background:var(--ice);color:var(--ink);border:3px solid var(--border);border-radius:0;box-shadow:var(--shadow);padding:24px}
.pisga dialog::backdrop{background:#15274b90}
@media(max-width:900px){body.pisga{padding-inline:22px}.course-index .lesson-grid{grid-template-columns:1fr}.course-index section{padding:22px}.pisga .course-header{margin-bottom:20px}}
@media(max-width:600px){body.pisga{padding:0 14px 30px;font-size:16px}.pisga .course-header{padding:23px 0 18px;gap:12px}.pisga .course-brand{font-size:21px}.pisga .course-home{font-size:14px}.pisga h1{font-size:28px}.course-index h1{font-size:36px}.pisga h2{font-size:22px}.pisga h3{font-size:19px}.pisga .panel,.pisga .graph-card,.pisga .exercise,.pisga .question,.pisga #dna-app .board{padding:15px 12px}.course-index section h2{font-size:23px}.pisga button,.pisga select{font-size:15px;padding:9px 12px}.pisga .lock-list,.pisga .lock{padding:18px 14px}.pisga .graph-map,.pisga .graph-scroll{padding:4px}.pisga .graph-figure{margin-inline:0;padding:8px}.pisga th,.pisga td{padding:8px}.pisga .course-back{margin-bottom:18px}.pisga .course-nav a,.pisga .nav a{font-size:14px}.pisga .actions{gap:12px}.pisga .lock-list .lock-codes{gap:5px}.pisga .lock-list .lock-code{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{body.pisga{padding:0;background:white;font-size:11pt}.pisga .course-header,.pisga .course-back,.pisga .course-nav{display:none}.pisga main{max-width:none}.pisga .panel,.pisga .graph-card,.pisga .exercise,.pisga .question{box-shadow:none;background:white;break-inside:avoid}.pisga .answer,.pisga .solution{background:#eee}.course-index .lesson-grid{display:block}.course-index section{box-shadow:none;background:white;margin-bottom:20px}}
