/*
	KELD INSTITUTE :: RAP SECURE PORTAL STYLESHEET V3.8 (FINAL DEPLOYMENT - AUDITED)
	ARCHITECT: GEMINI
	---
	CORRECTION LOG V3.8:
	- CRITICAL FIX: Added the missing 'text-shadow' to the #banner-terminal text for maximum readability against the animated background, as specified in the final blueprint.
	- VERIFIED: All other blueprint features (modal sizing, navigation, progress bar, 2FA, etc.) are present and correct. This is the definitive version.
*/

@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@700&family=Share+Tech+Mono&display=swap");

/* 1.0 DESIGN SYSTEM (VARIABLES) */
:root {
	--color-background: #111317;
	--color-background-modal: rgba(27, 31, 34, 0.97);
	--color-background-hover: rgba(255, 255, 255, 0.075);
	--color-text: #f1f1f1;
	--color-text-bold: #ffffff;
	--color-text-light: rgba(255, 255, 255, 0.5);
	--color-border: #ffffff;
	--color-border-faint: rgba(255, 255, 255, 0.3);
	--color-accent-action: #ed4933;
	--color-accent-info: #4a90e2;
	--color-status-pending: #4a90e2;
	--color-status-executed: #39FF14;
	--font-family-body: "Roboto", sans-serif;
	--font-family-heading: "Roboto Slab", serif;
	--font-family-mono: "Share Tech Mono", monospace;
	--transition-sharp: cubic-bezier(0.1, 0.7, 1.0, 1.0);
	--transition-duration: 0.2s;
	--modal-duration: 0.35s;
}

/* 2.0 BASE & RESET */
html, body, div, span, h1, h2, h3, p, a, img, ul, li, article, footer, header, nav, section, table, thead, tbody, tr, th, td, input, textarea, button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, footer, header, nav, section { display: block; }
body { line-height: 1; }
ul { list-style: none; }
html { box-sizing: border-box; font-size: 16pt; }
@media screen and (max-width: 1680px) { html { font-size: 12pt; } }
@media screen and (max-width: 736px) { html { font-size: 11pt; } }
*, *:before, *:after { box-sizing: inherit; }
body { background: var(--color-background); }
body.is-preload *, body.is-preload *:before, body.is-preload *:after { animation: none !important; transition: none !important; }

/* 3.0 TYPOGRAPHY */
body, input, select, textarea { color: var(--color-text); font-family: var(--font-family-body); font-weight: 400; font-size: 1rem; line-height: 1.65; }
a { transition: color var(--transition-duration) var(--transition-sharp); border-bottom: dotted 1px var(--color-text-light); text-decoration: none; color: inherit; }
a:hover { border-bottom-color: transparent; color: var(--color-accent-action); }
p { margin: 0 0 2rem 0; }
h1, h2, h3 { color: var(--color-text-bold); font-family: var(--font-family-heading); font-weight: 700; line-height: 1.5; margin: 0 0 1rem 0; text-transform: uppercase; letter-spacing: 0.2rem; }
h1 { font-size: 2.25rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1rem; }
h2.major, h3.major { border-bottom: solid 1px var(--color-border); width: max-content; padding-bottom: 0.5rem; margin-bottom: 2rem; }
*:focus { outline: 2px solid var(--color-accent-action); outline-offset: 2px; }

/* 4.0 BUTTONS & ACTIONS */
.button { transition: background-color var(--transition-duration) var(--transition-sharp); background-color: transparent; border-radius: 4px; border: 0; box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-bold) !important; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 300; height: 2.75rem; letter-spacing: 0.2rem; line-height: 2.75rem; padding: 0 1.25rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.button:hover { background-color: var(--color-background-hover); }
.button.primary { background-color: var(--color-text-bold); color: var(--color-background) !important; font-weight: 700; }
.button.small { font-size: 0.7rem; height: 2.25rem; line-height: 2.25rem; padding: 0 1rem; }
.button[disabled] { cursor: not-allowed; opacity: 0.5; }
ul.actions { display: flex; list-style: none; margin-left: -1rem; padding-left: 0; margin-top: 2rem; }
ul.actions li { padding: 0 0 0 1rem; }

/* 5.0 CORE LAYOUT */
#bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; }
#bg:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-background); z-index: 1; }
#bg canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0.1; }
#wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-height: 100vh; width: 100%; padding: 2rem; z-index: 3; opacity: 0; transition: opacity 1s ease; }
body:not(.is-preload) #wrapper.active { opacity: 1; }
@media screen and (max-width: 736px) { #wrapper { padding: 2rem 1rem; } }

/* 6.0 COMMAND HUB (HEADER) */
#header { display: flex; flex-direction: column; align-items: center; transition: transform var(--modal-duration) ease, filter var(--modal-duration) ease, opacity var(--modal-duration) ease; max-width: 100%; text-align: center; }
#header .logo { width: 5.5rem; height: 5.5rem; line-height: 5.5rem; border: solid 1px var(--color-border); border-radius: 100%; margin-bottom: 2rem; }
#header .logo .icon:before { font-size: 2rem; }
#header .content .inner { padding: 2rem; border-top: solid 1px var(--color-border); border-bottom: solid 1px var(--color-border); }
#header .content p { text-transform: uppercase; letter-spacing: 0.2rem; font-size: 0.8rem; line-height: 2; }
#header nav { margin-top: 2rem; }
#header nav ul { display: flex; list-style: none; padding-left: 0; border: solid 1px var(--color-border); border-radius: 4px; }
#header nav ul li { border-left: solid 1px var(--color-border); }
#header nav ul li:first-child { border-left: 0; }
#header nav ul li a { display: block; min-width: 7.5rem; height: auto; line-height: 1.2; padding: 0.75rem 1.25rem; text-transform: uppercase; font-size: 0.8rem; border-bottom: 0; }
#header nav ul li a:hover { background-color: var(--color-background-hover); }
#header nav ul li a .phase-indicator { display: block; font-size: 0.7em; font-family: var(--font-family-mono); color: var(--color-text-light); }
body.is-article-visible #header { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-preload #header > * { opacity: 0; }
@media screen and (max-width: 480px) { #header nav ul { flex-direction: column; min-width: 10rem; } #header nav ul li { border-left: 0; border-top: solid 1px var(--color-border); } #header nav ul li:first-child { border-top: 0; } }

/* 7.0 ACTION TERMINALS (MAIN) */
#main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10002; pointer-events: none; }
#main article { transition: opacity var(--modal-duration) var(--transition-sharp), transform var(--modal-duration) var(--transition-sharp); padding: 2.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 60rem; max-width: 90vw; background-color: var(--color-background-modal); border-radius: 4px; opacity: 0; visibility: hidden; box-shadow: 0 0 50px rgba(0,0,0,0.75); }
#main article.active { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
@media screen and (max-width: 980px) { #main article { width: 95vw; } }

/* 8.0 KELD CUSTOM UI */
.table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; margin-top: 2em; max-height: 50vh; overflow-y: auto; }
table { width: 100%; }
table tbody tr { border-bottom: solid 1px var(--color-border-faint); }
table td, table th { padding: 0.75em; }
table th { color: var(--color-text-bold); font-size: 0.9em; font-weight: 700; text-align: left; }
table thead { border-bottom: solid 2px var(--color-border); }
.action-cell { text-align: center; width: 120px; }
.status-cell { text-align: center; font-family: var(--font-family-mono); font-weight: 700; width: 120px; position: relative; }
.status-cell span { color: var(--color-status-pending); transition: color 0.3s ease; }
.status-cell.executed span { color: var(--color-status-executed); }
.status-cell.executing span { color: var(--color-accent-action); }
.redaction-script-bar { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background-color: var(--color-accent-action); }
#protocol-progress-container { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background-color: rgba(0,0,0,0.5); z-index: 10003; }
#protocol-progress-bar { width: 0%; height: 100%; background-color: var(--color-accent-action); transition: width 0.5s var(--transition-sharp); }
#protocol-progress-bar.completed { background-color: var(--color-status-executed); }
#protocol-progress-text { position: absolute; top: 0; left: 50%; transform: translateX(-50%); line-height: 30px; color: var(--color-text-bold); font-family: var(--font-family-mono); }
#complete { text-align: center; background-color: #111823 !important; }
#complete .status-complete { color: var(--color-status-executed); font-size: 4em; display: block; margin-bottom: 0.5em; animation: complete-pulse 2s infinite; }
@keyframes complete-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.article-nav { display: flex; justify-content: space-between; width: 100%; margin-top: 2em; border-top: 1px solid var(--color-border-faint); padding-top: 1.5em; }
.article-nav a:first-child:last-child { margin-left: auto; }
#manifest-pagination { text-align: center; margin: 1.5em 0; font-family: var(--font-family-mono); }
#manifest-pagination .button { margin: 0 1em; }

/* 9.0 COMMS TERMINAL */
#comms-terminal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); z-index: 10004; align-items: center; justify-content: center; }
#comms-terminal.is-visible { display: flex; }
.comms-inner { background-color: var(--color-background); padding: 2em; border-radius: 4px; box-shadow: 0 0 30px black; width: 50rem; max-width: 90vw; border: 1px solid var(--color-border-faint); }
.comms-inner h3 { font-family: var(--font-family-mono); color: var(--color-accent-action); }
.comms-body label { font-family: var(--font-family-mono); font-size: 0.8em; color: var(--color-text-light); }
.comms-body input, .comms-body textarea { font-family: var(--font-family-mono); background: #000; border: 1px solid var(--color-border-faint); color: var(--color-text); width: 100%; padding: 0.5em; margin-bottom: 1em; }
.comms-body textarea { resize: none; }
#copy-directive.copied { background-color: var(--color-status-executed) !important; color: var(--color-background) !important; }

/* 10.0 2FA SIMULATION */
#two-factor-auth { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-background); z-index: 10005; opacity: 1; transition: opacity 1s ease 1s; }
#two-factor-auth.hidden { opacity: 0; pointer-events: none; }
.two-factor-box { text-align: center; }
.two-factor-box h2 { font-size: 1.2em; }
.two-factor-box p { font-family: var(--font-family-mono); text-transform: uppercase; letter-spacing: 0.2em; }
.passcode-fields { display: flex; justify-content: center; margin: 2em 0; }
.passcode-input { width: 2.5em; height: 3em; text-align: center; font-size: 1.5em; background: rgba(255,255,255,0.1); border: 1px solid var(--color-border-faint); border-radius: 4px; margin: 0 0.25em; color: var(--color-text-bold); font-family: var(--font-family-mono); }
#auth-status { color: var(--color-accent-info); }
#auth-status.success { color: var(--color-status-executed); }

/* 11.0 BANNER TERMINAL REFINEMENT */
#header .content .inner { text-shadow: 0 0 10px rgba(0,0,0,0.7); } /* CORRECTED: Text shadow for readability */

/* Footer */
#footer { transition: transform var(--modal-duration) ease, filter var(--modal-duration) ease, opacity var(--modal-duration) ease; width: 100%; max-width: 100%; margin-top: 2rem; text-align: center; z-index: 3; position: relative; }
#footer .copyright { letter-spacing: var(--letter-spacing); font-size: 0.6rem; opacity: 0.75; margin-bottom: 0; text-transform: uppercase; }
body.is-article-visible #footer { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-preload #footer { opacity: 0; }