/* ───────────────────────────────────────────────────
   Base typography & resets
──────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
               "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 95%;
}

/* ───────────────────────────────────────────────────
   Header & footer
──────────────────────────────────────────────────── */
#header,
#footer {
  display: flex;
  align-items: center;
  background-color: #525252;
  color: #fff;
  padding: 10px 20px;
}

/* Sticky footer stays at bottom on short pages */
#footer { margin-top: auto; }

/* Push footer message to the right */
#footer .footer-right { margin-left: auto; }

/* Header actions (right side) */
#header-buttons {
  margin-left: auto;
  text-align: right;
}
#header-buttons a {
  color: #ffffaa;
  text-decoration: underline;
}

/* Header title */
#header h1 {
  margin: 0.3em 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.1;
}

/* Header/footer link styles */
#header-content a,
#footer a {
  color: #fff;
  text-decoration: none;
}

/* ───────────────────────────────────────────────────
   Branding: logo
──────────────────────────────────────────────────── */
.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
}
@media (min-width: 1024px) {
  .brand-logo { height: 48px; }
}

/* ───────────────────────────────────────────────────
   Headings & text spacing
──────────────────────────────────────────────────── */
h1, h2, h3 { margin-top: 0.8em; margin-bottom: 0.2em; }
p { margin: 0 0 0.8em 0; }

/* ───────────────────────────────────────────────────
   Main content area
──────────────────────────────────────────────────── */
.content {
  margin: 20px;
  flex: 1 0 auto;
  overflow: auto; /* was 'scroll' */
}

/* ───────────────────────────────────────────────────
   Auth & forms
──────────────────────────────────────────────────── */
.registration-form, .login, .logout {
  margin: 5%;
  border: 1px solid black;
  padding: 50px;
  box-sizing: border-box;
  overflow: auto;
}
.registration-form button, .login button {
  border: 1px solid black;
  padding: 20px;
  font-size: 1.2em;
  color: #fff;
  background-color: #000;
  text-transform: uppercase;
  margin-top: 15px;
}
ul.errorlist {
  list-style-type: none;
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.26);
  padding: 10px;
  box-sizing: border-box;
  margin: 0;
  display: inline-block;
  width: auto;
}
.login td[colspan]:not([colspan="1"]),
.registration-form td[colspan]:not([colspan="1"]) { text-align: right; }
label.required::before { content: '*'; color: red; }
.registration-form input, .login input {
  padding: 10px; width: 100%; box-sizing: border-box; font-size: 1.1em;
}
.registration-form th, .login th { padding: 10px; text-align: right; vertical-align: top; }
.registration-form form, .login form { margin-top: 5%; }
.registration-form table, .login table { width: 80%; }
.submit-button { display: flex; justify-content: flex-end; width: 80%; }
.helptext {
  border: 1px solid yellow;
  background-color: rgba(255, 252, 0, 0.3);
  font-size: .8em;
  margin-bottom: 10px;
  padding: 5px;
  display: block;
}

#footer {
  background: #f5f5f7;
  color: #44369a !important;
}
#footer a { color: #44369a !important; }

/* Welcome banner — simple, no background */
.welcome-hero {
  margin: 1rem 0;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem); /* responsive size */
  font-weight: 700;
  color: #44369a; /* brand purple */
  text-align: left; /* center the message */
}

.welcome-hero .site-title {
  font-weight: 800; /* emphasize site title */
}

/* Dashboard view: let the React app own the layout without outer scrollbars */
.page-dashboard .content {
  margin: 0;          /* remove 20px margins that force overflow */
  padding: 0;
  overflow: hidden;   /* prevent double scrollbars */
}

/* Ensure the inner containers can actually shrink */
.page-dashboard #dashboard-content,
.page-dashboard #react {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Full-height, flex-friendly Reveal */
.page-dashboard .reveal { height: 100%; min-height: 0; overflow: hidden; }
.page-dashboard .reveal .slides { height: 100%; min-height: 0; overflow: auto; }

/* Hide any stray progress UI just in case */
.page-dashboard .reveal .progress { display: none !important; }

/* Make the dashboard area consume the remaining viewport height cleanly */
.page-dashboard #dashboard-content { display:flex; flex:1; min-height:0; }
.page-dashboard #react            { display:flex; flex:1; min-height:0; }
.work-node                        { display:flex; flex:1; min-height:0; }
.work-node-flex                   { display:flex; flex:1; min-height:0; }

/* Left (slides) and right (terminal) columns are vertical stacks */
.instructions-panel,
.terminal-panel { display:flex; flex-direction:column; min-height:0; }

/* Reveal fills the left column; scrolling happens inside the slides pane only */
.instructions-panel .reveal { flex:1; min-height:0; }

/* Right column: toolbar is auto-height, terminal/web fills the rest,
   bottom strip stays visible without overflowing the page */
.terminal-toolbar { flex:0 0 auto; }
.terminal-container,
.webpanel-container { flex:1 1 auto; min-height:0; }

/* Bottom strip: fix a comfortable height and allow inner scrolling if content overflows */
.checks-diagram-strip {
  flex:0 0 240px;        /* adjust to taste (200–300px works well) */
  min-height:180px;
  max-height:40vh;       /* never taller than 40% of the viewport */
  overflow:auto;
}

/* Keep the embedded diagram from forcing extra width/height */
.diagram-embed { min-height:0; }
.diagram-embed > * { width:100% !important; height:100% !important; }