/* ExCards base styles
 * The UI palette below predates the ExCards logo and is deliberately
 * kept: it is tuned for text contrast, which the logo's own colours are
 * not (its #FEDD02 yellow is unreadable as body text on white).  The
 * logo's colours are used only for the header wordmark, further down.
 *   Navy / dark header  : #1A2744
 *   Primary blue        : #1B6DC2  (logo lettering is #0064B8)
 *   Accent gold         : #F5A800  (logo lettering is #FEDD02)
 *   Success green       : #2D9E3F
 *   Warning red/orange  : #E05200
 */

:root {
  --color-bg: #f4f6fb;
  --color-text: #1e2330;
  --color-muted: #5a6277;
  --color-border: #dde2ee;
  --color-primary: #1B6DC2;
  --color-primary-hover: #155aa0;
  --color-accent: #F5A800;
  --color-accent-hover: #d48f00;
  --color-warn: #b34700;
  --color-success: #2D9E3F;
  --color-nav-bg: #1A2744;
  --color-nav-text: #e8edf8;
  --max-width: 960px;
  --radius: 7px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}

header {
  background: var(--color-nav-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  padding: 0;
}

nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* min-height, not height: the bar must be able to grow.  An admin
     inside a surface carries the Admin badge, Substances, the switcher
     naming all three surfaces, the account name and Sign out — 1042px
     of content against a 960px bar.  Wrapping to a second row is the
     only degradation that loses nothing: clipping would cut a
     navigation link in half, and a fixed height turned the surplus into
     the brand being overprinted.  Ordinary (non-admin) pages need
     879px, stay on one row, and are unaffected. */
  flex-wrap: wrap;
  row-gap: 0.2rem;
  min-height: 56px;
}

/* Logo + (optional) surface breadcrumb.  The group carries the
   margin-right:auto that pushes the rest of the navbar to the right.

   It must NOT have min-width:0.  The group used to carry it so the
   breadcrumb could shrink, but the breadcrumb shrinks on its own
   (min-width:0 + ellipsis on .nav-crumb below), and min-width:0 here
   let the whole group collapse below its own content while .brand
   inside refuses to shrink (flex:none) — so the logo spilled out of its
   box and was overprinted by the nav links.  Measured on the admin
   navbar: the group collapsed to 39px against 153px of content, and the
   brand overlapped the links by 110px.  Leaving min-width at its `auto`
   default floors the group at its min-content width, which is the brand
   plus a shrunk-to-nothing crumb — exactly the intended behaviour. */
nav .nav-brand-group {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: auto;
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-nav-text);
  flex: none;
}

nav .nav-crumb-sep {
  color: rgba(232, 237, 248, 0.38);
  font-size: 1.1em;
  line-height: 1;
  flex: none;
}

nav a.nav-crumb {
  color: var(--color-nav-text);
  font-size: 0.9em;
  padding: 0.25rem 0.4rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav .brand img {
  height: 38px;
  width: auto;
}

nav .brand-name {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* "ExCards" in the logo's own two lettering colours.  The blue is
   lightened from the logo's #0064B8, which is too dark to read on the
   navy bar; the yellow is the logo's #FEDD02 unchanged. */
nav .brand-name .ex    { color: #FEDD02; }
nav .brand-name .cards { color: #6ab4ff; }

nav a:not(.brand) {
  color: rgba(232,237,248,0.82);
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.93em;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

nav a:not(.brand):hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Hamburger for mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-nav-text);
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.2s;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* Shrinkable, so the surplus is absorbed here rather than pushing the
     group over the brand; wrapping for the same reason as `nav` above —
     between 600px (where the hamburger takes over) and 960px the links
     alone can exceed the bar, and a further row costs nothing while a
     clipped link is unusable. */
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 0.2rem;
}

/* The signed-in account name is the one navbar item whose width is set
   by user data rather than by the design: a username may be an email
   address, and `dalnoki.matyas@gmail.com` alone is 186px of a 960px
   bar.  Cap it and ellipsise; base.html carries the full value in the
   title attribute, so nothing is lost.  Without the cap an account name
   can push the navbar over its width on its own. */
nav .nav-user {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Last resort: if the bar is still over budget (an admin on a surface,
   where the switcher names all three surfaces), the switcher gives way
   rather than the brand.  It is the widest item on the bar at 400px,
   and every link inside keeps its title attribute, so a clipped label
   is still identifiable. */
nav .nav-surface-switch {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    /* 100%, not the bar's nominal 56px: the bar can now grow a row (see
       `nav`), and a hardcoded offset would leave the menu overlapping
       or floating away from it. */
    top: 100%;
    left: 0; right: 0;
    background: var(--color-nav-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.55rem 0.5rem; font-size: 1em; }
  header { position: relative; }
  /* The breadcrumb sits outside .nav-links, so it stays visible when
     the rest of the navbar collapses behind the hamburger — but it
     has to give way to the logo when there is no room for both. */
  nav a.nav-crumb { font-size: 0.82em; padding: 0.25rem 0.2rem; }
}

main {
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 1rem;
}

footer {
  max-width: var(--max-width);
  margin: 3rem auto 1rem;
  padding: 1rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

h1 { font-size: 1.6rem; margin-top: 0; }
h2 { font-size: 1.2rem; margin-top: 1.5rem; }

p { margin: 0.6rem 0; }

ul, ol { margin: 0.6rem 0 0.6rem 1.2rem; }

.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.button:hover {
  border-color: #bbb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.button-primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.button-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 6px rgba(41,82,163,0.25);
}

.actions { margin-top: 1.2rem; }

.note {
  color: var(--color-muted);
  font-size: 0.95em;
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
}

/* Alerts (flash messages, warnings) */
.alert {
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.alert-info    { background: #e7f0fb; border-color: #b6cdf0; }
.alert-warn,
.alert-warning { background: #fff4e0; border-color: #ffd28a; }
.alert-error   { background: #fce4e4; border-color: #f5b6b6; }
.flash-messages { margin: 1rem 0; }

/* Forms */
.form         { margin: 1.2rem 0; }
.form label   { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.form-row     { display: flex; gap: 0.5rem; align-items: stretch; }
.form-row input[type="text"],
.form-row input[type="number"],
.form-row select {
  flex: 1;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}
.field input[type="text"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
}
.field textarea {
  resize: vertical;
}
.inline-form {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.inline-form input[type="text"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.form .hint   { color: var(--color-muted); font-size: 0.9em; margin-top: 0.4rem; }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table th, .table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.table th {
  background: #f0f0f0;
  font-weight: 600;
  font-size: 0.92em;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover         { background: #fafbfc; }

/* Cards */
.card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0.6rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.card h3 { margin-top: 0; }

/* Collapsible card (details/summary) */
details.card > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.1rem 0;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "▸ ";
  color: var(--color-muted);
  font-size: 0.85em;
}
details.card[open] > summary::before {
  content: "▾ ";
}

/* Misc */
.muted    { color: var(--color-muted); }
.warn     { color: var(--color-warn); font-weight: 600; }
.small    { font-size: 0.88em; }
.source-tag {
  display: inline-block;
  font-size: 0.85em;
  padding: 1px 7px;
  border-radius: 9px;
  background: #eef;
  color: #225;
  border: 1px solid #cce;
}
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

/* Fieldsets and radio rows for the release form */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
fieldset legend {
  font-weight: 600;
  padding: 0 0.5rem;
  color: var(--color-primary);
}
.field {
  margin: 0.8rem 0;
}
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.4rem 0;
  font-weight: 400;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  margin-top: 0.2rem;
}
.radio-row > div, .radio-row > span {
  flex: 1;
}
.unit-fixed {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  background: #f0f0f0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.95em;
  white-space: nowrap;
}
.unit-picker {
  min-width: 100px;
}

/* Audit log */
.audit-log {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
}
.audit-log li {
  padding: 0.4rem 0.6rem;
  border-left: 3px solid #ccc;
  margin: 0.3rem 0;
  background: white;
  font-size: 0.95em;
}
.audit-info      { border-left-color: #5a9; }
.audit-warning   { border-left-color: #e80; background: #fff8f0; }
.audit-attention { border-left-color: #fc0; background: #fffce0; }
.audit-section {
  background: #eee;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.85em;
  color: #555;
}

/* Stepper / progress bar */
.stepper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1rem 0;
}
.stepper-inner {
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82em;
  font-weight: 600;
  border: 2px solid var(--color-border);
  background: white;
  color: var(--color-muted);
  transition: all 0.2s;
}
.stepper-step.active .stepper-dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}
.stepper-step.done .stepper-dot {
  border-color: #3a9a5c;
  background: #3a9a5c;
  color: white;
}
.stepper-label {
  font-size: 0.78em;
  color: var(--color-muted);
  white-space: nowrap;
}
.stepper-step.active .stepper-label {
  color: var(--color-primary);
  font-weight: 600;
}
.stepper-step.done .stepper-label {
  color: #3a9a5c;
}
.stepper-line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 0.4rem;
  margin-bottom: 1.4rem;
  min-width: 20px;
}
.stepper-line.done {
  background: #3a9a5c;
}

/* ===================================================================
   Landing page — module selector
   =================================================================== */

.landing-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.landing-hero img.hero-logo {
  height: 240px;
  width: auto;
  max-width: 100%;
  margin-bottom: 1rem;
}

.landing-hero h1 {
  font-size: 2rem;
  margin: 0.4rem 0 0.2rem;
  color: var(--color-text);
}

.landing-hero .tagline {
  font-size: 1.05em;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

.landing-hero .sub-info {
  font-size: 0.88em;
  color: var(--color-muted);
}

/* Module grid */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0 3rem;
}

.module-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
}

.module-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

.module-card.available {
  border-top: 4px solid var(--color-primary);
}
.module-card.available:hover {
  transform: translateY(-2px);
}

.module-card.coming-soon {
  border-top: 4px solid var(--color-border);
  opacity: 0.8;
}

/* Status badge */
.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  width: fit-content;
}

.module-badge.badge-available {
  background: #e6f4ea;
  color: #1a6e30;
}

.module-badge.badge-soon {
  background: #eef0f4;
  color: #7a8299;
}

.module-badge.badge-wip {
  background: #fff3cd;
  color: #856404;
}

/* Standard label */
.module-standard {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  font-family: monospace;
}

/* Card title */
.module-title {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  margin: 0;
}

/* Description */
.module-desc {
  font-size: 0.9em;
  color: var(--color-muted);
  line-height: 1.5;
  flex: 1;
}

/* Card action area */
.module-action {
  margin-top: 0.8rem;
}

.module-action .button {
  width: 100%;
  text-align: center;
  padding: 0.55rem 1rem;
}

.module-action .button:disabled,
.module-action .button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Section divider on landing */
.landing-section-title {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 2rem 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

/* Public landing page: what the site does, one block per audience.
   Wider cards than .module-grid, because each holds a list of standards
   rather than a single paragraph and an action button. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0 2rem;
}

.service-card {
  background: white;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: 10px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.service-title {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 0.2rem;
}

.service-for {
  font-size: 0.9em;
  color: var(--color-muted);
  margin: 0 0 0.9rem;
}

.service-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--color-text);
}

.service-list li { margin-bottom: 0.4rem; }

.service-note {
  font-size: 0.88em;
  color: var(--color-muted);
  margin: 0.9rem 0 0;
}

.landing-quiet {
  font-size: 0.88em;
  color: var(--color-muted);
  margin: 0.6rem 0;
}

.landing-cta {
  margin: 2rem 0 3rem;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .landing-hero h1  { font-size: 1.5rem; }
  .landing-hero img.hero-logo { height: 170px; }
  .module-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   General responsive tweaks
   =================================================================== */

@media (max-width: 600px) {
  main { margin: 1rem auto; }

  fieldset { padding: 0.8rem; }

  .form-row {
    flex-wrap: wrap;
  }
  .form-row input[type="text"],
  .form-row input[type="number"],
  .form-row select {
    min-width: 0;
  }

  .stepper-label { display: none; }
  .stepper-line  { min-width: 12px; }

  h1 { font-size: 1.3rem; }
}

/* ===================================================================
   Inerting module styles (CEN/TR 15281)
   =================================================================== */

/* Page wrapper */
.inerting-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

/* Module header banner */
.module-header {
  background: var(--color-nav-bg);
  color: #e8edf8;
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem 0;
  margin-bottom: 0;
}
.module-header-inner {
  margin-bottom: 0.8rem;
}
.module-header h1 {
  color: #fff;
  margin: 0.2rem 0 0.1rem;
  font-size: 1.4rem;
}
.module-header p {
  margin: 0;
  color: #aab5cc;
  font-size: 0.88rem;
}
.module-standard-tag {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

/* Method tabs inside the header */
.inerting-tabs {
  display: flex;
  gap: 0;
  margin-top: 0.8rem;
}
.itab {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #aab5cc;
  text-decoration: none;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: background 0.15s, color 0.15s;
}
.itab:hover {
  background: rgba(255,255,255,0.08);
  color: #e8edf8;
}
.itab-active {
  background: var(--color-bg);
  color: var(--color-text);
}
/* A planned tab: plain text, not a link, so it must not look clickable. */
.itab-planned,
.itab-planned:hover {
  background: none;
  color: #7f8aa3;
  font-weight: 400;
  cursor: default;
}

/* Two-column layout: form left, results right */
.inerting-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background: var(--color-bg);
  border-radius: 0 0 var(--radius) var(--radius);
  padding-top: 1.5rem;
}

.inerting-form-panel,
.inerting-results-panel {
  min-width: 0;
}

.inerting-form-panel h2,
.inerting-results-panel h3 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}

/* Site Engineering surface: single-column body — result (when present)
   full width at the top, input fieldsets in a side-by-side grid below.
   Scoped to .op-* classes so the HAC Engineering two-panel layout above
   is untouched. Shared by every Site Engineering module (inerting,
   battery room, ...), not just inerting. */
.op-module-body {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--color-bg);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.5rem 1rem 2rem;
}
.op-module-body h2 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: 0 0 0.5rem;
}
.op-result-panel {
  margin-bottom: 1.5rem;
}
/* Multi-column (not grid): fieldsets vary in height, and CSS Grid
   would size each row to its tallest cell, leaving a gap under the
   shorter neighbour. Columns flow content continuously instead, so
   cards pack tightly with no dead space. */
.op-fieldset-grid {
  column-count: 2;
  column-gap: 1rem;
}
.op-fieldset-grid .calc-fieldset {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1rem;
}
@media (max-width: 720px) {
  .op-fieldset-grid {
    column-count: 1;
  }
}

/* Row-paired grid: used where two specific cards must sit side by
   side (e.g. a diagram next to the fields it explains). Only use
   this where the paired cards are close enough in height that no
   visible gap results underneath the shorter one. */
.op-fieldset-grid-paired {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.op-fieldset-grid-paired .calc-fieldset {
  margin-bottom: 0;
}

.op-diagram-img {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0.25rem auto 0.5rem;
}

.help-text {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

/* Fieldsets */
.calc-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.calc-fieldset legend {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.4rem;
}

/* Field rows */
.field-group { margin-bottom: 1rem; }
.field-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.field-col { flex: 1; min-width: 0; }

.field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--color-text);
}
.field-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: 400;
  margin-top: 0.15rem;
  line-height: 1.4;
}

/* Inputs */
.input-field {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.92rem;
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.15s;
}
.input-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(27,109,194,0.12);
}
.select-field { cursor: pointer; }

/* Value + unit-selector pair */
.pressure-input {
  display: flex;
  gap: 0.4rem;
}
.pressure-input .input-field:first-child { flex: 1 1 auto; min-width: 0; }
.pressure-input .select-field {
  flex: 0 0 5.5rem;
  width: 5.5rem;
}

/* Input with preset buttons */
.input-with-preset {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.preset-buttons {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.preset-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  background: #eef2f9;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  transition: background 0.1s;
}
.preset-btn:hover { background: #dce6f5; }

/* Radio groups */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #fff;
}
.radio-option:hover { border-color: var(--color-primary); }
.radio-selected {
  border-color: var(--color-primary);
  background: #eef4fc;
}
.radio-option input[type="radio"] { margin-top: 0.15rem; flex-shrink: 0; }
.radio-option span { display: flex; flex-direction: column; }
.radio-option strong { font-size: 0.88rem; }
.radio-option small { font-size: 0.78rem; color: var(--color-muted); }

.radio-inline {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}
.radio-inline label {
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

/* Form actions */
.form-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.8rem;
}

/* Result panel */
.result-hero {
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
.result-ok   { background: #edfaf0; border: 2px solid var(--color-success); }
.result-warn { background: #fff8ec; border: 2px solid var(--color-accent); }
.result-severe { background: #fdecea; border: 2px solid #c0392b; }
.result-neutral { background: #eef4fb; border: 2px solid var(--color-primary); }
.result-neutral .result-hero-number { color: var(--color-primary); }
.result-hero-number {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
}
.result-ok .result-hero-number   { color: var(--color-success); }
.result-warn .result-hero-number { color: var(--color-warn); }
.result-severe .result-hero-number { color: #c0392b; }
.result-hero-label {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
}
.result-hero-note {
  font-size: 0.8rem;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  margin-top: 0.7rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* Result table */
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
  margin-bottom: 1rem;
}
.result-table th, .result-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.result-table th {
  color: var(--color-muted);
  font-weight: 600;
  width: 55%;
}
.result-highlight {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
}

/* Cycle table */
.cycle-table th { width: auto; }
.cycle-target-row { background: #edfaf0; font-weight: 600; }

/* Status badges */
.badge-ok {
  background: var(--color-success);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 12px;
  font-weight: 700;
}
.badge-selected {
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 12px;
  font-weight: 700;
}

/* Which surfaces an account may open (admin user list) */
.surface-badge {
  display: inline-block;
  background: #eef0f4;
  color: #46506b;
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 12px;
  margin: 0.1rem 0.15rem 0.1rem 0;
  white-space: nowrap;
}
.surface-badge-none {
  font-style: italic;
  color: var(--color-muted);
}

/* Info / notes boxes */
.info-box {
  background: #eef4fc;
  border: 1px solid #bbd3f0;
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.86rem;
  margin-bottom: 1rem;
}
.notes-box {
  background: #f7f8fa;
  border-left: 3px solid var(--color-primary);
  padding: 0.6rem 0.9rem;
  font-size: 0.83rem;
  color: var(--color-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1rem;
}
.notes-box p { margin: 0.2rem 0; }

/* Flash messages */
.flash {
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.87rem;
  margin-bottom: 0.8rem;
}
.flash-error { background: #fff0f0; border: 1px solid #f5b8b8; color: #8b1a1a; }
.flash-warn  { background: #fff8ec; border: 1px solid #f5d99a; color: var(--color-warn); }

/* Empty state */
.empty-state {
  color: var(--color-muted);
  font-size: 0.9rem;
}
.reference-box {
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-size: 0.83rem;
  margin-top: 0.8rem;
  line-height: 1.7;
}

/* Responsive: stack panels on narrow screens */
@media (max-width: 720px) {
  .inerting-layout {
    grid-template-columns: 1fr;
  }
  .field-row { flex-direction: column; gap: 0; }
}


/* ===================================================================
   Auth + module sub-nav (Phase 1 security)
   =================================================================== */

.nav-user {
  color: rgba(232, 237, 248, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  align-self: center;
  padding: 0.3rem 0.5rem;
}
.nav-signin {
  background: var(--color-primary);
  color: #fff !important;
  padding: 0.35rem 0.9rem;
  border-radius: 5px;
  font-weight: 600;
}
.nav-signin:hover { background: var(--color-primary-hover); }
.nav-logout-form { margin: 0; display: inline; }
.nav-logout-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: #e8edf8;
  padding: 0.3rem 0.8rem;
  border-radius: 5px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
}
.nav-logout-btn:hover { background: rgba(255,255,255,0.1); }

.module-subnav {
  background: #16203a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.module-subnav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  /* The bar scrolls sideways rather than wrapping onto a second line:
     the electrostatic module lists six pages today and ten once its
     roadmap is finished, which no phone width can hold. */
  overflow-x: auto;
  scrollbar-width: none;
}
.module-subnav-inner::-webkit-scrollbar { display: none; }
.module-subnav-inner > * { flex: 0 0 auto; }
.module-subnav-label {
  color: #6b7896;
  white-space: nowrap;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.module-subnav-inner a {
  color: #cdd7ea;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.module-subnav-inner a:hover { color: #fff; }
/* The active page is marked by an accent underline as well as a
   brighter colour, so the state does not rest on colour alone. */
.module-subnav-inner a.subnav-active {
  color: #fff;
  position: relative;
}
.module-subnav-inner a.subnav-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Must stay inside the bar's padding box: `overflow-x: auto` above
     forces `overflow-y: auto` too, so anything below the padding edge is
     clipped away — at -0.5rem the underline sat exactly on that edge and
     was invisible at every width. */
  bottom: -0.25rem;
  height: 2px;
  background: var(--color-accent);
}

.auth-page {
  max-width: 440px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.6rem 1.8rem;
  box-shadow: 0 2px 10px rgba(26,39,68,0.06);
}
.auth-card h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
.auth-card .field-group { margin-bottom: 1rem; }

/* ===================================================================
   Admin user-management page
   =================================================================== */

.admin-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

.nav-admin {
  background: var(--color-accent);
  color: #1A2744 !important;
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-admin:hover {
  background: var(--color-accent-hover);
  color: #1A2744 !important;
}

.nav-surface-switch {
  background: var(--color-surface-alt, rgba(255, 255, 255, 0.08));
  padding: 0.3rem 0.7rem;
  border-radius: 5px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* A wide table scrolls inside its own box instead of pushing the whole
   page sideways. Measured on /admin/users at 375 px before this existed:
   the table was 998 px and the *document* overflowed by 655 px, so the
   header, the navigation and the filter box all scrolled with it — the
   table's parent is `overflow-x: visible`, so the width escaped upward.
   Same pattern as `.igem-table-wrap`, which solves this for the IGEM
   sources table. */
.table-scroll {
  overflow-x: auto;
}

.admin-users-table { margin-top: 1rem; }

/* The surfaces column is the single widest thing in the user table: its
   badges are `white-space: nowrap` (correctly — "Hatósági ellenőrzés"
   must not break mid-label), and `table-layout: auto` therefore sized
   the column to hold all four on one line, 426 px of a 998 px table.
   Capping the cell lets the badges wrap between themselves while each
   stays intact, which measured 998 -> 717 px with no change to the
   badges. Deliberately not inside a media query: the desktop container
   is 960 px, so the uncapped table overflowed there too. */
.admin-users-table .surfaces-cell {
  max-width: 9rem;
}
.admin-users-table th,
.admin-users-table td { font-size: 0.88rem; vertical-align: middle; }
.admin-users-table .small-cell {
  font-size: 0.78rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.user-inactive {
  background: #fafbfc;
  color: var(--color-muted);
}
.user-inactive td:first-child::after {
  content: " (inactive)";
  color: var(--color-warn);
  font-size: 0.78rem;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.admin-actions form { margin: 0; }

.button-small {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.radio-inline + .radio-inline { margin-left: 1.2rem; }

/* Failed-login badge (orange-red) */
.badge-warn {
  background: var(--color-warn);
  color: #fff;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Auth log page */
.filter-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.2rem;
  flex-wrap: wrap;
}

/* Type-to-filter box above an admin table (templates/_table_filter.html).
   Laid out like .filter-form above, so the auth log's server-side user
   filter and the in-page text filter read as one control strip. */
.table-filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.4rem;
  flex-wrap: wrap;
}
.table-filter .field-label {
  margin: 0;
}
.table-filter input[type="search"] {
  max-width: 22rem;
  flex: 1 1 12rem;
}
.table-filter-count {
  color: var(--color-muted);
  font-size: 0.87em;
  /* Reserves its own space so the row does not jump as the count changes
     width while typing. */
  min-width: 8rem;
}
.table-filter-hint {
  margin: 0 0 0.8rem;
}
.table-filter-empty td {
  text-align: center;
  color: var(--color-muted);
  font-style: italic;
  padding: 1rem;
}
.auth-log-table { margin-top: 0.5rem; font-size: 0.85rem; }
.auth-log-table th,
.auth-log-table td { vertical-align: middle; }
.auth-log-table .small-cell { font-size: 0.8rem; white-space: nowrap; }
.auth-log-table .mono { font-family: monospace; }
.auth-log-table .ua-cell {
  max-width: 28rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.auth-log-table .ua-cell span { cursor: help; }

/* ===================================================================
   Project sharing (Phase 2.1)
   =================================================================== */

.badge-shared {
  display: inline-block;
  background: #eef4fc;
  color: var(--color-primary);
  border: 1px solid #bbd3f0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.shared-banner {
  background: #eef4fc;
  border: 1px solid #bbd3f0;
  border-left: 4px solid var(--color-primary);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0.8rem 0 1rem;
}

/* Safety-factor explanation list (inerting flow-through) */
.factor-help {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.45;
}
.factor-help li { margin: 0.2rem 0; }
.factor-help strong { color: var(--color-text); }

/* ===================================================================
   D.1 table visualisation (result page)
   =================================================================== */

.zone-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.2rem 0.75rem;
  border-radius: 12px;
}

.d1-table-wrap {
  margin: 0.8rem 0 1rem;
}

.d1-table-svg {
  max-width: 100%;
  overflow-x: auto;
}

.d1-table-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Collapsible details below the D.1 table */
.d1-details {
  margin-top: 6px;
  border: 1px solid #dde2ee;
  border-radius: 5px;
  overflow: hidden;
}
.d1-details summary {
  cursor: pointer;
  padding: 5px 12px;
  background: #f7f8fa;
  font-size: 0.82rem;
  font-weight: 600;
  color: #5a6277;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.d1-details summary::before {
  content: '\25B6';
  font-size: 9px;
  color: var(--color-primary);
  transition: transform 0.15s;
}
.d1-details[open] summary::before { transform: rotate(90deg); }
.d1-details summary:hover { background: #eef1f8; }
.d1-details-body { padding: 8px 14px 10px; }

.d1-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.d1-leg {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #cdd2de;
}
.d1-leg-arr {
  font-size: 0.82rem;
  font-weight: 700;
}

.d1-fn {
  font-size: 0.78rem;
  color: #7a8299;
  line-height: 1.55;
  margin: 0;
}

/* -----------------------------------------------------------------------
 * Generic tab bar (used by spray booth and other multi-tab modules)
 * ----------------------------------------------------------------------- */
.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.tab-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius) var(--radius) 0 0;
  border: 2px solid transparent;
  border-bottom: none;
  transition: background 0.15s, color 0.15s;
}
.tab-link:hover {
  background: rgba(27,109,194,0.07);
  color: var(--color-primary);
}
.tab-active {
  background: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-border);
  border-bottom-color: var(--color-bg);
  margin-bottom: -2px;
}
.tab-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  line-height: 1.1em;
  text-align: center;
  margin-left: 0.25rem;
}
.tab-badge-ok {
  color: var(--color-success);
}

/* -----------------------------------------------------------------------
 * Result summary boxes — small KPI cards
 * Used by spray booth results (and can be reused by other modules)
 * ----------------------------------------------------------------------- */
.result-box {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}
.result-box-ok {
  background: #edfaf0;
  border-color: var(--color-success);
}
.result-box-warn {
  background: #fff8ec;
  border-color: var(--color-accent);
}
.result-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.result-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.result-box-ok .result-value   { color: var(--color-success); }
.result-box-warn .result-value { color: var(--color-warn); }
.result-sub {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* -----------------------------------------------------------------------
 * Verdict banner — spray booth results pass/fail header
 * ----------------------------------------------------------------------- */
.verdict-banner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
.verdict-ok {
  background: #edfaf0;
  border: 2px solid var(--color-success);
  color: #1a6930;
}
.verdict-warn {
  background: #fff8ec;
  border: 2px solid var(--color-accent);
  color: #7a5200;
}
.verdict-icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------
 * Static value display (non-editable field look)
 * ----------------------------------------------------------------------- */
.input-static {
  padding: 0.4rem 0.6rem;
  background: var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-text);
  min-height: 2rem;
  display: flex;
  align-items: center;
}

/* -----------------------------------------------------------------------
 * Table row warning state
 * ----------------------------------------------------------------------- */
.row-warn {
  background: #fff8ec;
}
.row-warn td {
  border-color: #f5d580;
}

/* -----------------------------------------------------------------------
 * Qualitative HAC — zone result badges
 * ----------------------------------------------------------------------- */
.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
}
.badge-zone0 {
  background: #c0392b;
  color: #fff;
}
.badge-zone1 {
  background: #e67e22;
  color: #fff;
}
.badge-zone2 {
  background: #f1c40f;
  color: #333;
}
.badge-ne {
  background: #27ae60;
  color: #fff;
}
.badge-nonhaz {
  background: #1a6e30;
  color: #fff;
}
.badge-unknown {
  background: #aaa;
  color: #fff;
}

/* ===================================================================
   Footer contact line
   =================================================================== */

.footer-contact {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}
.footer-contact a {
  color: var(--color-primary);
  text-decoration: none;
}
.footer-contact a:hover {
  text-decoration: underline;
}

/* ===================================================================
   Landing page — contact / access request strip
   =================================================================== */

.contact-strip {
  margin: 2.5rem auto 0.5rem;
  max-width: 580px;
  text-align: center;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.contact-strip-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--color-text);
}
.contact-strip-text {
  font-size: 0.88rem;
  color: var(--color-muted);
  margin: 0;
}
.contact-strip-text a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
.contact-strip-text a:hover {
  text-decoration: underline;
}

/* ===================================================================
   IGEM/SR/25 module styles
   =================================================================== */

.igem-scope-note {
  background: #f4f7fb;
  border-left: 3px solid var(--color-primary);
  padding: 0.7rem 1rem;
  font-size: 0.83rem;
  color: var(--color-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.2rem;
  line-height: 1.55;
}

.igem-table-wrap {
  overflow-x: auto;
}

.igem-sources-table {
  min-width: 780px;
  font-size: 0.875rem;
}

.igem-sources-table .num-col {
  text-align: right;
  white-space: nowrap;
}

.igem-sources-table .actions-col {
  white-space: nowrap;
  text-align: right;
}

.igem-sources-table .notes-row td {
  padding-top: 0;
  padding-bottom: 0.5rem;
  border-top: none;
  color: var(--color-muted);
}

.igem-zone-key {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.igem-zone-key .badge {
  font-size: 0.78rem;
}

/* ===================================================================
   Shared utilities used by IGEM/SR/25 (and potentially other modules)
   =================================================================== */

/* Small button variant (alias for .button-small) */
.button-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Danger button */
.button-danger {
  background: var(--color-danger, #c0392b);
  color: #fff;
  border-color: var(--color-danger, #c0392b);
}
.button-danger:hover {
  background: #a93226;
  border-color: #a93226;
}

/* Inline table action links */
.action-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  margin-left: 0.5rem;
}
.action-link:hover { text-decoration: underline; }
.action-link-danger { color: var(--color-danger, #c0392b); }

/* Input with inline unit label  e.g.  [ 7.0 ] bar g */
.input-with-unit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.input-with-unit input {
  flex: 1;
  max-width: 160px;
}
.unit-label {
  font-size: 0.88rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Field validation error state */
.field-error > input,
.field-error > select,
.field-error > textarea,
.field-error .input-with-unit input {
  border-color: var(--color-danger, #c0392b);
  box-shadow: 0 0 0 2px rgba(192,57,43,0.15);
}
.field-error-msg {
  display: block;
  font-size: 0.83rem;
  color: var(--color-danger, #c0392b);
  margin-top: 0.3rem;
}

/* Collapsible details panel */
.details-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-top: 1rem;
}
.details-panel > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--color-primary);
  user-select: none;
}
.details-panel > summary:hover { text-decoration: underline; }

/* ==========================================================================
   IGEM/SR/25 — source type visual card selector
   ========================================================================== */

.igem-source-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.4rem;
}

.igem-source-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
.igem-source-card:hover {
  border-color: var(--color-primary);
  background: #f2f7fd;
}
.igem-source-card-selected {
  border-color: var(--color-primary) !important;
  background: #eaf2fb;
}

/* Hide the raw radio — clicking the card triggers igemSelectSourceType() */
.igem-source-card-radio {
  flex: 0 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.igem-source-card-radio input[type="radio"] {
  pointer-events: none;
  accent-color: var(--color-primary);
  width: 1rem;
  height: 1rem;
}

.igem-source-card-fig {
  flex: 0 0 200px;
  text-align: center;
  padding-top: 0.15rem;
}
.igem-card-fig-label {
  display: block;
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}
.igem-source-thumb {
  max-width: 190px;
  max-height: 160px;
  object-fit: contain;
  border-radius: 3px;
  cursor: zoom-in;
  transition: opacity 0.1s;
}
.igem-source-thumb:hover {
  opacity: 0.85;
}

/* "Select a source type to continue" prompt */
.igem-select-prompt {
  margin: 0.6rem 0 1rem;
  padding: 0.7rem 1rem;
  background: #f7f8fa;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Xs info box */
.igem-xs-info {
  background: #eaf5ea;
  border: 1px solid #b2d8b2;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #1a4d1a;
}

/* Image lightbox overlay */
.igem-img-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
}
.igem-img-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.igem-source-card-body {
  flex: 1;
  min-width: 0;
}
.igem-source-card-body strong {
  font-size: 0.92rem;
  display: block;
  margin-bottom: 0.2rem;
}
.igem-card-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.igem-source-card-dist {
  flex: 0 0 5rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

/* IGEM/SR/25 Xb NE banner (d < 3 mm and OP ≤ 850 mbar) */
.igem-xb-ne {
  padding: 0.65rem 0.9rem;
  background: #eaf5ea;
  border: 1px solid #b2d8b2;
  border-radius: var(--radius);
  color: #1a5c1a;
  font-size: 0.88rem;
  margin-bottom: 0.8rem;
}

/* ===================================================================
   Regulatory Inspection surface (Hatósági ellenőrzés)

   Status colours deliberately avoid a red/green pair — the three
   verdicts are told apart by blue / amber / grey, and every control
   also carries a glyph and its full label, so colour is never the only
   signal.
   =================================================================== */

.insp-disclaimer {
  margin: 0 0 1.5rem 0;
}

.insp-context-form .form-actions {
  margin-top: 0.8rem;
}

/* --- context reminder bar on module pages --- */
.insp-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1.2rem;
  background: #eef3fb;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: 0.88rem;
}
.insp-authority-tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  margin-right: 0.6rem;
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
}
.insp-authority-tag.insp-authority-none {
  background: #8a90a2;
}

/* --- check list --- */
.insp-section {
  margin-bottom: 2rem;
}
.insp-item {
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
}
.insp-item-answered {
  border-left-color: var(--color-primary);
}
.insp-item-text {
  margin: 0 0 0.4rem 0;
  font-weight: 600;
}
.insp-hint {
  margin: 0.25rem 0;
  font-size: 0.84rem;
  color: var(--color-muted);
}

.insp-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.45rem 0;
}
.insp-ref {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 4px;
  font-size: 0.76rem;
  background: var(--color-border);
  color: var(--color-muted);
}
.insp-ref-legal {
  background: #dfe9f7;
  color: #1a3f6b;
  font-weight: 600;
}
.insp-ref-draft {
  background: #fdf1dc;
  color: #7a5200;
  border: 1px dashed #d9a441;
}

/* --- tri-state choice control --- */
.insp-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.5rem 0;
}
.insp-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.84rem;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.insp-choice input {
  margin: 0;
}
.insp-choice-glyph {
  font-weight: 700;
}
.insp-choice:hover {
  border-color: #9aa3b8;
}
.insp-choice.is-selected {
  font-weight: 600;
}
.insp-choice-ok.is-selected {
  border-color: #1B6DC2;
  background: #e7f0fa;
  color: #14497f;
}
.insp-choice-nok.is-selected {
  border-color: #b35c00;
  background: #fdf1dc;
  color: #7a4400;
  border-style: double;
  border-width: 3px;
}
.insp-choice-na.is-selected {
  border-color: #6d7488;
  background: #eef0f4;
  color: #454b5c;
  border-style: dashed;
}
.insp-choice-unset.is-selected {
  border-color: #b9bfcd;
  background: #f7f8fb;
  color: var(--color-muted);
}

.insp-remark {
  width: 100%;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.86rem;
}

/* --- counter-check result table --- */
.insp-claims td {
  vertical-align: top;
}
.insp-verdict {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.insp-verdict-megfelel {
  background: #1B6DC2;
  color: #fff;
}
.insp-verdict-nem_felel_meg {
  background: #b35c00;
  color: #fff;
}
.insp-verdict-nem_igazolhato {
  background: #6d7488;
  color: #fff;
}
.insp-claim-nem_felel_meg {
  background: #fdf7ee;
}

/* --- hub cards --- */
.insp-card-flag {
  margin: 0.4rem 0 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a4400;
}
.insp-card-flag-info {
  color: var(--color-primary);
}

/* --- action bar --- */
.insp-sticky-actions {
  position: sticky;
  bottom: 0;
  padding: 0.8rem 0;
  background: linear-gradient(to top, var(--color-bg) 70%, rgba(244,246,251,0));
}

@media (max-width: 600px) {
  .insp-choices {
    flex-direction: column;
    align-items: stretch;
  }
  .insp-choice {
    justify-content: flex-start;
  }
}

/* Legal pages (templates/privacy.html). */
.legal-page { max-width: 860px; margin: 0 auto; }
.legal-page h2 { margin-top: 1.6rem; }
.legal-table { font-size: 0.86rem; }
.legal-table td { vertical-align: top; }

/* ===================================================================
 * Electrostatic pages after an assessment — result, report, then the inputs
 * (templates/electrostatic/_result_first.html, static/electrostatic/
 * result_first.js; E2, E5 and E6)
 * =================================================================== */
.es-download { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1.2rem 0 0; }
.es-download .reference-box { flex: 1 1 100%; margin: 0; }
.es-inputs-head { margin: 1.8rem 0 0.2rem; padding-top: 1rem; border-top: 1px solid #d5dae3; }
.es-stale {
  margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; color: #5a4200;
  background: #fff8ec; border: 1.5px dashed #b07a00; border-radius: 4px;
}
[data-result].is-stale { opacity: 0.45; }
/* .field-hint sets a display, which would override the hidden attribute. */
.es-stale[hidden], .es-stale-hint[hidden], .es-enter-note[hidden] { display: none; }
/* static/electrostatic/enter_next.js: how many fields Enter still has to visit. */
.es-enter-note { display: inline; margin-left: 0.6rem; }
/* The form's default button (Enter = Assess): rendered, so browsers use
   it, but invisible and out of the layout. */
.es-default-submit {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===================================================================
 * Electrostatic E6 — people (templates/electrostatic/people.html)
 * The figure's own colours, weights and dashes are not here: they come
 * from core/electrostatic_people_figure.py (figure_css(), inlined by the
 * template), so the page and the DOCX renderer read one token table.
 * These are the page's layout and its badges.
 * ------------------------------------------------------------------- */
.e6-picker { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.e6-picker > div { min-width: 0; }
.e6-figure-host svg { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
.e6-items { list-style: none; margin: 0; padding: 0; }
.e6-items li { margin: 0 0 0.5rem; }
.e6-items label {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.6rem; align-items: start;
  padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; cursor: pointer;
}
.e6-items li.hover label, .e6-items label:hover { border-color: var(--color-primary); }
.e6-items li.checked label { border: 2px solid var(--color-primary); padding: calc(0.55rem - 1px) calc(0.7rem - 1px); }
.e6-items input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary); }
.e6-item-title { font-weight: 700; font-size: 0.92rem; display: block; }
.e6-item-sub { font-size: 0.78rem; color: var(--color-muted); display: block; }
.e6-item-sub.e6-inline { display: inline; }

/* A fieldset's default min-inline-size is min-content: two columns of
   selects would otherwise push the whole page sideways on a phone. */
#e6-form .calc-fieldset { min-width: 0; }
.e6-page .q { margin-bottom: 0.85rem; }
.e6-page .q-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
body.cc-on .e6-page .q-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.e6-page .q-prop, .e6-page .q-col-head { display: none; }
body.cc-on .e6-page .q-prop { display: block; }
body.cc-on .e6-page .q-col-head {
  display: block; font-size: 0.72rem; font-weight: 700; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0.2rem;
}
.e6-page .q-na { font-size: 0.8rem; color: var(--color-muted); padding: 0.45rem 0; font-style: italic; }
.e6-page .q-assume {
  font-size: 0.78rem; color: #5a4200; background: #fff4e0; border-left: 3px solid #d48f00;
  padding: 0.25rem 0.5rem; margin-top: 0.3rem; border-radius: 0 4px 4px 0;
}
.e6-page .q-inline { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.e6-page .q-inline .input-field { flex: 1 1 7rem; min-width: 0; }
.e6-page .q-inline .select-field.unit { flex: 0 0 5.2rem; }
.e6-page .q-checks label { display: inline-flex; gap: 0.35rem; align-items: center; margin: 0 1rem 0.2rem 0; font-size: 0.88rem; }
.e6-page .mode-q { margin-bottom: 0.85rem; }
.e6-page .e6-radio { display: block; margin: 0.15rem 0; }
.e6-page .item-fieldset { border-left: 4px solid var(--color-primary); }
.e6-page .item-fieldset legend { color: var(--color-primary); }
.e6-page .prereq-fieldset { border-left: 4px dashed var(--color-muted); }
.e6-page .fs-intro { font-size: 0.8rem; color: var(--color-muted); margin: -0.2rem 0 0.8rem; }
.e6-page .e6-details { margin: -0.4rem 0 0.9rem; }
.e6-page .basis { font-size: 0.78rem; color: var(--color-muted); display: block; margin-top: 0.15rem; }

/* Requirement badges — a shape and a label, never colour alone */
/* A requirement level is a label, not a control: square corners, light
   fills and no button blue, so it cannot be mistaken for one.  The glyph
   and the word carry the level; the border style backs them up. */
.lvl { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 3px; white-space: nowrap; border: 1.5px solid transparent; cursor: default; }
.lvl-required     { background: #e3ecf8; color: #12396b; border-color: var(--color-primary); }
.lvl-recommended  { background: #fff; color: #12396b; border: 1.5px dashed var(--color-primary); }
.lvl-not_required { background: #eceff4; color: #4a5263; border-color: #c9ceda; }
.lvl-expert       { background: #fff4e0; color: #5a4200; border-color: #b07a00; }
.lvl-outside      { background: #fff; color: #5a4200; border: 1.5px dashed #b07a00; }
.lvl-missing      { background: #fff; color: var(--color-muted); border: 1.5px dashed #aab; }
.lvl-arrow { color: var(--color-muted); margin: 0 0.2rem; font-weight: 700; }
.lvl-delta { font-size: 0.72rem; font-weight: 800; color: #5a4200; background: #fff4e0; border-radius: 8px; padding: 0.05rem 0.35rem; margin-left: 0.25rem; }

.e6-summary-figure { max-width: 620px; margin: 0.6rem auto 0; }

/* Numbers: optional unless the verdict is waiting for one. */
.e6-page .q-need { font-size: 0.76rem; margin-top: 0.25rem; color: var(--color-muted); }
.e6-page .q-need .need-opt { font-style: italic; }
.e6-page .q-need .need-req { display: none; }
.e6-page .q-need.is-needed .need-opt { display: none; }
.e6-page .q-need.is-needed .need-req {
  display: inline-block; font-weight: 700; color: #5a4200; background: #fff8ec;
  border: 1.5px dashed #b07a00; border-radius: 3px; padding: 0.05rem 0.4rem;
}

/* The result's scope: what was assessed, under which conditions, and what
   the standard asks for on the items that were not. */
.e6-scope {
  margin: 0.9rem 0 0.4rem; padding: 0.7rem 0.9rem; font-size: 0.88rem;
  background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
}
.e6-scope p { margin: 0 0 0.4rem; }
.e6-scope-cond { color: var(--color-muted); }
.e6-scope-head { font-weight: 700; margin-top: 0.6rem !important; }
.e6-also-list { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.e6-also-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem;
  padding: 0.45rem 0; border-top: 1px dashed #d5dae3;
}
.e6-also-list li > div { flex: 1 1 22rem; min-width: 0; }
.e6-also-list .e6-add { font-size: 0.8rem; padding: 0.3rem 0.7rem; }

.e6-summary-figure svg { width: 100%; height: auto; display: block; }
.e6-page .flag-list { margin: 0.4rem 0 0 1.1rem; padding: 0; font-size: 0.82rem; }
.e6-page .measure-box {
  margin-top: 1rem; padding: 0.7rem 0.9rem; background: #fff; border: 2px solid var(--color-accent);
  border-radius: var(--radius); font-size: 0.86rem;
}

/* The large-tool illustration: two panels, side by side or one under the other */
.ill-host { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.ill-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem 0.6rem; }
.ill-panel svg { width: 100%; height: auto; display: block; }
.ill-title { font-weight: 700; font-size: 0.84rem; margin: 0 0 0.2rem; }
.ill-energy { font-size: 0.8rem; margin: 0.2rem 0 0; line-height: 1.35; }

/* Electric shock — deliberately outside the main thread */
.e6-shock {
  margin-top: 1.6rem; padding: 0.9rem 1.1rem; border: 2px dashed #8a94a8; border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #f7f8fa, #f7f8fa 10px, #f1f3f7 10px, #f1f3f7 20px);
  font-size: 0.84rem;
}
.e6-shock h3 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.e6-shock .shock-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #4a5263; border: 1px solid #8a94a8; border-radius: 10px; padding: 0.05rem 0.45rem;
  margin-bottom: 0.4rem; background: #fff;
}
.e6-shock ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }

@media (max-width: 720px) {
  .e6-picker { grid-template-columns: 1fr; }
  .e6-figure-host svg { max-width: 190px; }
  body.cc-on .e6-page .q-cols { gap: 0.4rem; }
}