/* ============================================================
   CalcHub — Design System
   Farger: #1B3A5C primær · #2E6DA4 sekundær · #E8A020 aksent
   ============================================================ */

/* ── TOKENS ── */
:root {
  --ds-primary:          #1B3A5C;
  --ds-primary-dark:     #132A42;
  --ds-primary-light:    #234B74;
  --ds-secondary:        #2E6DA4;
  --ds-secondary-dark:   #255887;
  --ds-secondary-light:  #3D84BF;
  --ds-accent:           #E8A020;
  --ds-accent-dark:      #C8881A;
  --ds-accent-light:     #F0B840;

  --ds-bg:               #F2F4F7;
  --ds-surface:          #FFFFFF;
  --ds-border:           #D1D5DB;
  --ds-border-strong:    #9CA3AF;

  --ds-text:             #111827;
  --ds-text-secondary:   #374151;
  --ds-text-muted:       #6B7280;
  --ds-text-on-dark:     #F1F5F9;
  --ds-text-on-accent:   #1A1200;

  --ds-pass:             #15803D;
  --ds-pass-bg:          #F0FDF4;
  --ds-fail:             #DC2626;
  --ds-fail-bg:          #FEF2F2;
  --ds-review:           #B45309;
  --ds-review-bg:        #FFFBEB;
  --ds-info:             #2E6DA4;
  --ds-info-bg:          #EFF6FF;

  --ds-topbar-h:         3.86rem;
  --ds-sidebar-w:        16.57rem;

  --ds-font:             system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono:        ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

/* ── BOOTSTRAP OVERRIDES: sharp corners everywhere ── */
:root {
  --bs-border-radius:             0 !important;
  --bs-border-radius-sm:          0 !important;
  --bs-border-radius-lg:          0 !important;
  --bs-border-radius-xl:          0 !important;
  --bs-border-radius-2xl:         0 !important;
  --bs-border-radius-pill:        2em !important; /* keep pill for tiny inline badges if needed */
  --bs-btn-border-radius:         0 !important;
  --bs-input-border-radius:       0 !important;
  --bs-card-border-radius:        0 !important;
  --bs-badge-border-radius:       0 !important;
  --bs-alert-border-radius:       0 !important;
  --bs-dropdown-border-radius:    0 !important;
  --bs-nav-pills-border-radius:   0 !important;
  --bs-modal-border-radius:       0 !important;
  --bs-toast-border-radius:       0 !important;
  --bs-popover-border-radius:     0 !important;
  --bs-pagination-border-radius:  0 !important;
  --bs-list-group-border-radius:  0 !important;
  --bs-form-select-border-radius: 0 !important;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }

/* Fluid root size: 14px on a ~1440px laptop viewport, scaling up to 17px
   on a ~2560px (27") display, clamped at both ends so it never runs away
   on ultra-wide monitors or shrinks below legibility on narrow ones. */
html { font-size: clamp(14px, 0.268vw + 10.14px, 17px); }

body {
  font-family: var(--ds-font);
  background: var(--ds-bg);
  color: var(--ds-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── APP LAYOUT ── */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.layout-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── TOPBAR ── */
.topbar {
  height: var(--ds-topbar-h);
  background: var(--ds-primary);
  border-bottom: 2px solid var(--ds-accent);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: 0.75rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 1040;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(var(--ds-sidebar-w) - 1rem);
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-decoration: none;
}

.topbar-brand:hover { color: var(--ds-accent); }

.topbar-brand-icon {
  color: var(--ds-accent);
  font-size: 1.05rem;
}

.topbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.topbar-spacer { flex: 1; }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Unit toggle */
.unit-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}

.unit-toggle-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-family: var(--ds-font);
  transition: background 0.12s, color 0.12s;
}

.unit-toggle-btn.active {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

.unit-toggle-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}

/* User dropdown in topbar */
.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  font-family: var(--ds-font);
}

.topbar-user-btn:hover {
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.topbar-dropdown {
  background: var(--ds-primary-dark);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  min-width: 200px;
}

.topbar-dropdown .dropdown-item {
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
}

.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.topbar-dropdown .dropdown-divider {
  border-color: rgba(255,255,255,0.1);
}

.topbar-auth-link {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}

.topbar-auth-link:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

.topbar-auth-link.signup {
  border-color: var(--ds-accent);
  color: var(--ds-accent);
  font-weight: 600;
}

.topbar-auth-link.signup:hover {
  background: var(--ds-accent);
  color: var(--ds-text-on-accent);
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--ds-sidebar-w);
  flex-shrink: 0;
  background: var(--ds-primary);
  overflow-y: auto;
  height: calc(100vh - var(--ds-topbar-h));
  position: sticky;
  top: var(--ds-topbar-h);
  border-right: 1px solid rgba(0,0,0,0.25);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

.sidebar-section { padding: 1.25rem 0 0.5rem; }

.sidebar-section-label {
  padding: 0 0.875rem 0.5rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.81rem;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  margin-bottom: 1px;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.07);
  color: #fff;
}

.sidebar-link.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-left-color: var(--ds-accent);
}

.sidebar-link-badge {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
  padding: 0.1rem 0.35rem;
}

.sidebar-divider {
  margin: 0.6rem 0.875rem;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── MAIN CONTENT ── */
.main-content {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  height: calc(100vh - var(--ds-topbar-h));
}

.content-body {
  padding: 1.75rem 2rem;
}

/* Auth pages (login, signup, etc.) — narrow centered layout */
.content-body.auth-page {
  max-width: 480px;
  margin: 0 auto;
  padding-top: 3rem;
}

/* ── MESSAGES / ALERTS ── */
.messages-zone {
  padding: 0.5rem 2rem 0;
}

/* ── TYPOGRAPHY ── */
h1 { font-size: 1.55rem; font-weight: 700; }
h2 { font-size: 1.3rem;  font-weight: 600; }
h3 { font-size: 1.1rem;  font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; }
h5 { font-size: 0.88rem; font-weight: 600; }
h6 { font-size: 0.8rem;  font-weight: 600; }

.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ds-primary);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.83rem;
  color: var(--ds-text-muted);
  margin-bottom: 1.5rem;
}

.section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: 0.5rem;
}

/* ── BUTTONS ── */
.btn {
  border-radius: 0 !important;
  font-size: 0.81rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  letter-spacing: 0.01em;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.btn-lg { padding: 0.6rem 1.4rem; font-size: 0.88rem; }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.76rem; }

.btn-primary {
  background: var(--ds-secondary);
  border-color: var(--ds-secondary);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ds-secondary-dark);
  border-color: var(--ds-secondary-dark);
  color: #fff;
}

.btn-dark-navy {
  background: var(--ds-primary);
  border: 1px solid var(--ds-primary-dark);
  color: #fff;
}
.btn-dark-navy:hover {
  background: var(--ds-primary-dark);
  color: #fff;
}

.btn-accent {
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent-dark);
  color: var(--ds-text-on-accent);
  font-weight: 600;
}
.btn-accent:hover {
  background: var(--ds-accent-dark);
  color: var(--ds-text-on-accent);
}

.btn-outline-secondary {
  border-color: var(--ds-border-strong);
  color: var(--ds-text-secondary);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--ds-bg);
  border-color: var(--ds-text-secondary);
  color: var(--ds-text);
}

/* ── CARDS ── */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  margin-bottom: 1.25rem;
}

.ds-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-bottom: 1px solid var(--ds-border);
  padding: 0.875rem 1.25rem;
  background: var(--ds-bg);
}

.ds-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ds-primary);
  margin: 0;
  letter-spacing: 0.01em;
}

.ds-card-body { padding: 1.25rem; }

/* ── FORM ELEMENTS ── */
.form-control,
.form-select {
  border-radius: 0 !important;
  border-color: var(--ds-border);
  font-size: 0.83rem;
  color: var(--ds-text);
  background: var(--ds-surface);
  padding: 0.4rem 0.6rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ds-secondary);
  box-shadow: 0 0 0 2px rgba(46,109,164,0.18);
  outline: none;
}

.form-label {
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--ds-text-secondary);
  margin-bottom: 0.3rem;
}

.form-text {
  font-size: 0.74rem;
  color: var(--ds-text-muted);
}

.input-group-text {
  border-radius: 0 !important;
  background: var(--ds-bg);
  border-color: var(--ds-border);
  color: var(--ds-text-muted);
  font-size: 0.8rem;
}

/* ── STATUS BADGES ── */
.badge { border-radius: 0 !important; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border: 1px solid;
}

.status-badge-pass   { background: var(--ds-pass-bg);   color: var(--ds-pass);   border-color: rgba(21,128,61,0.25); }
.status-badge-fail   { background: var(--ds-fail-bg);   color: var(--ds-fail);   border-color: rgba(220,38,38,0.25); }
.status-badge-review { background: var(--ds-review-bg); color: var(--ds-review); border-color: rgba(180,83,9,0.25); }
.status-badge-info   { background: var(--ds-info-bg);   color: var(--ds-info);   border-color: rgba(46,109,164,0.25); }

.part-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(46,109,164,0.1);
  color: var(--ds-secondary);
  border: 1px solid rgba(46,109,164,0.2);
  padding: 0.1rem 0.35rem;
}

/* ── RESULT BANNERS ── */
.result-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-left: 4px solid;
  margin-bottom: 1.5rem;
}

.result-banner i { font-size: 1rem; }

.result-banner-pass   { background: var(--ds-pass-bg);   border-color: var(--ds-pass);   color: var(--ds-pass); }
.result-banner-fail   { background: var(--ds-fail-bg);   border-color: var(--ds-fail);   color: var(--ds-fail); }
.result-banner-review { background: var(--ds-review-bg); border-color: var(--ds-review); color: var(--ds-review); }

/* ── VERDICT CARD HEADER — the accept/reject decision baked into the
   Acceptance Criteria card itself, instead of a separate floating banner ── */
.verdict-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 3px solid;
}

.verdict-header-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.verdict-header-text {
  font-size: 1.05rem;
  font-weight: 700;
}

.verdict-header-value {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
}

.verdict-header-ref {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.7;
  white-space: nowrap;
}

.verdict-header--pass { background: var(--ds-pass-bg);   border-color: var(--ds-pass);   color: var(--ds-pass); }
.verdict-header--fail { background: var(--ds-fail-bg);   border-color: var(--ds-fail);   color: var(--ds-fail); }
.verdict-header--review { background: var(--ds-review-bg); border-color: var(--ds-review); color: var(--ds-review); }

.verdict-reasons {
  padding: 0.75rem 1.25rem;
  margin: 0;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

.verdict-reasons li { margin-bottom: 0.2rem; }
.verdict-reasons li:last-child { margin-bottom: 0; }

/* ── ALERTS ── */
.alert {
  border-radius: 0 !important;
  font-size: 0.82rem;
  padding: 0.7rem 1rem;
  border-width: 0;
  border-left: 3px solid;
}

.alert-info    { background: var(--ds-info-bg);   color: var(--ds-info);   border-color: var(--ds-info); }
.alert-success { background: var(--ds-pass-bg);   color: var(--ds-pass);   border-color: var(--ds-pass); }
.alert-warning { background: var(--ds-review-bg); color: var(--ds-review); border-color: var(--ds-review); }
.alert-danger  { background: var(--ds-fail-bg);   color: var(--ds-fail);   border-color: var(--ds-fail); }

/* ── TABLES ── */
.table {
  font-size: 0.81rem;
  --bs-table-striped-bg: var(--ds-bg);
  --bs-table-hover-bg: rgba(46,109,164,0.05);
  border-color: var(--ds-border);
}

.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-secondary);
  background: var(--ds-bg);
  border-bottom: 2px solid var(--ds-border);
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
}

.table td {
  padding: 0.5rem 0.75rem;
  border-color: var(--ds-border);
  vertical-align: middle;
}

/* Dark-header calculation table */
.table-calc thead th {
  background: var(--ds-primary);
  color: rgba(255,255,255,0.85);
  border-color: var(--ds-primary-dark);
}

/* ── FORMULA / CALCULATION TRACE ── */
.formula-block {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-secondary);
  padding: 0.65rem 0.875rem;
  font-family: var(--ds-font-mono);
  font-size: 0.79rem;
  color: var(--ds-text-secondary);
  overflow-x: auto;
}

code {
  font-family: var(--ds-font-mono);
  font-size: 0.82em;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  padding: 0.1rem 0.3rem;
  color: var(--ds-secondary);
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.25rem 1rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.79rem;
  border-bottom: 1px solid var(--ds-border);
  align-items: baseline;
}

.calc-row:nth-child(even) { background: var(--ds-bg); }

.calc-label { color: var(--ds-text-secondary); }

.calc-value {
  font-family: var(--ds-font-mono);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.calc-ref {
  color: var(--ds-text-muted);
  font-size: 0.71rem;
  text-align: right;
  white-space: nowrap;
}

/* ── WIZARD STEPPER ── */
.wizard-stepper { overflow-x: auto; }

.stepper-container {
  display: flex;
  align-items: center;
  min-width: max-content;
  padding: 0.5rem 0 1rem;
}

.stepper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stepper-circle {
  width: 28px;
  height: 28px;
  background: var(--ds-border);
  color: var(--ds-text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stepper-item.active    .stepper-circle { background: var(--ds-secondary);    color: #fff; }
.stepper-item.completed .stepper-circle { background: var(--ds-pass); color: #fff; }

.stepper-label {
  font-size: 0.69rem;
  font-weight: 500;
  color: var(--ds-text-muted);
  margin-top: 0.35rem;
  white-space: nowrap;
}

.stepper-item.active .stepper-label { color: var(--ds-secondary); font-weight: 600; }

.stepper-line {
  flex: 1;
  height: 1px;
  background: var(--ds-border);
  margin: 0 0.2rem;
  margin-bottom: 1.2rem;
  min-width: 20px;
}

/* ── SELECTION CARDS (geometry/variant/damage-type picker grids, all wizards) ── */
.selection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.variant-cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.selection-card {
  border: 2px solid var(--ds-border);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  background: var(--ds-surface);
  transition: border-color 0.15s, background 0.15s;
}

.selection-card:hover:not(.disabled) {
  border-color: var(--ds-secondary);
  background: var(--ds-info-bg);
}

.selection-card.selected,
.selection-card.active {
  border-color: var(--ds-secondary);
  background: var(--ds-info-bg);
  outline: 2px solid var(--ds-secondary);
  outline-offset: -2px;
}

.selection-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selection-card h5 {
  margin: 0.5rem 0;
}

.selection-card ul {
  list-style: none;
  padding: 0;
  margin-top: 0.9rem;
}

.selection-card ul li {
  padding: 0.3rem 0;
}

.selection-card ul li::before {
  content: "✓ ";
  color: var(--ds-pass);
  font-weight: bold;
}

/* Reference diagrams (e.g. crack geometry) embedded inside a selection card */
.crack-diagram {
  margin-bottom: 0.6rem;
}

.crack-diagram svg {
  display: block;
  margin: 0 auto;
}

/* ── FORM GRID (legacy form.as_p compatibility) ── */
.form-grid p {
  display: grid;
  grid-template-columns: minmax(0,180px) minmax(0,120px) auto;
  column-gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.form-grid p input,
.form-grid p select { max-width: 100%; }

/* ── APP NAVBAR (legacy override) ── */
.app-navbar {
  background: var(--ds-primary) !important;
  border-bottom: 2px solid var(--ds-accent);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1040;
}

/* ── DROPDOWN menus in Bootstrap context ── */
.dropdown-menu {
  border-radius: 0 !important;
}

/* ── UTILITY ── */
.text-muted   { color: var(--ds-text-muted) !important; }
.text-primary { color: var(--ds-primary) !important; }

.border-accent { border-color: var(--ds-accent) !important; }

hr { border-color: var(--ds-border); opacity: 1; }

/* ── DEV COMPONENTS PAGE ── */
.ds-swatch {
  width: 56px;
  height: 56px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.12);
}

.ds-swatch-label {
  font-size: 0.7rem;
  color: var(--ds-text-muted);
  margin-top: 0.2rem;
  font-family: var(--ds-font-mono);
}

.component-section {
  margin-bottom: 2.5rem;
}

.component-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  border-bottom: 1px solid var(--ds-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

/* ── RESULTS BLOCK (results_block.html) ── */

/* Step row */
.rb-step {
  border-bottom: 1px solid var(--ds-border);
}

.rb-step--nested {
  background: var(--ds-bg);
  border-left: 2px solid var(--ds-border);
  margin: 0.5rem 0.5rem 0;
  border-bottom: none;
}

.rb-step-header {
  display: flex;
  align-items: center;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ds-text);
  user-select: none;
  gap: 0.25rem;
  transition: background 0.1s;
  flex-wrap: wrap;
}

.rb-step-header:hover { background: rgba(46,109,164,0.05); }

.rb-step-name { font-weight: 600; }

.rb-ref-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(46,109,164,0.08);
  color: var(--ds-secondary);
  border: 1px solid rgba(46,109,164,0.18);
  padding: 0.1rem 0.35rem;
}

.step-number-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--ds-primary);
  color: #fff;
  padding: 0.15rem 0.4rem;
  letter-spacing: 0.03em;
}

.rb-step-preview {
  font-size: 0.78rem;
  font-family: var(--ds-font-mono);
  margin-left: auto;
}

/* Step body */
.rb-step-body {
  padding: 0.75rem 1rem 1rem 2.25rem;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.rb-section { margin-bottom: 0.875rem; }

.rb-section-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-bottom: 0.4rem;
}

/* Variable grid */
.rb-var-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
}

.rb-var-card {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  padding: 0.45rem 0.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.3rem;
  font-size: 0.8rem;
}

.rb-var-card--output {
  border-color: rgba(46,109,164,0.25);
  background: rgba(239,246,255,0.6);
}

.rb-symbol { font-family: var(--ds-font-mono); color: var(--ds-text-secondary); }
.rb-eq     { color: var(--ds-text-muted); }
.rb-val    { font-family: var(--ds-font-mono); font-weight: 600; }
.rb-val--result { color: var(--ds-secondary); font-size: 0.88rem; }
.rb-unit   { font-size: 0.73rem; color: var(--ds-text-muted); }
.rb-desc   { width: 100%; color: var(--ds-text-muted); font-size: 0.72rem; margin-top: 0.1rem; }

/* KaTeX formula containers */
.rb-formula-katex {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-secondary);
  padding: 0.65rem 1rem;
  overflow-x: auto;
  font-size: 1rem;
}

.rb-formula-substituted {
  margin-top: 0.35rem;
  border-left-color: var(--ds-accent);
  font-size: 0.92rem;
}

.rb-formula-ref {
  margin-top: 0.4rem;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ds-text-muted);
}

/* Plain-text (non-LaTeX) formula box */
.rb-formula-plain code {
  font-family: var(--ds-font-mono);
  font-size: 0.85rem;
  color: var(--ds-text);
  background: none;
  padding: 0;
  white-space: normal;
  word-break: break-word;
}

/* Chart embedded in a calculation trace step */
.rb-chart-wrap {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  padding: 0.75rem;
  max-width: 640px;
}

/* Children container */
.rb-children {
  border: 1px solid var(--ds-border);
  border-left: 2px solid var(--ds-border);
}

/* Heading-only step — visual section divider within a calculation trace */
.rb-step-heading {
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-secondary);
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
}


/* ===========================================================================
   Shared assessment-result components
   Used by every module's result_summary so per-module CSS (.lml-/.pc-/.cr-*)
   can be retired in favour of one consistent design-system look.
   =========================================================================== */

/* Metric / key-value cards (RSF, MAWP, thicknesses, …) */
.ds-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}
.ds-metric-card {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  padding: 0.6rem 0.75rem;
}
.ds-metric-card--pass { border-color: rgba(25,135,84,0.35); background: rgba(25,135,84,0.06); }
.ds-metric-card--fail { border-color: rgba(220,53,69,0.35); background: rgba(220,53,69,0.06); }
.ds-metric-card--warn { border-color: rgba(225,160,32,0.4); background: rgba(225,160,32,0.07); }
.ds-metric-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  margin-bottom: 0.2rem;
}
.ds-metric-value {
  font-family: var(--ds-font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ds-text);
}

/* Inline check chip used in compact criteria lists */
.ds-check-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.15rem 0;
}

/* Standard spacing for the actions footer (nav + save + export) */
.result-actions > * { margin-bottom: 1rem; }

/* Discreet disclaimer link at the bottom of every app page (punkt 15) */
.app-footer {
  padding: 1rem 2rem 1.5rem;
  font-size: 0.78rem;
  color: var(--ds-text-muted);
  border-top: 1px solid var(--ds-border);
  margin-top: 1.5rem;
}
.app-footer a {
  color: var(--ds-text-muted);
  text-decoration: underline;
}

/* Cookie notice — necessary-cookies-only acknowledgement, see home/_cookie_consent.html */
.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--ds-primary);
  color: var(--ds-text-on-dark);
  padding: 0.85rem 1.5rem;
  font-size: 0.85rem;
}
.cookie-consent--visible {
  display: flex;
}
.cookie-consent p {
  margin: 0;
}
.cookie-consent a {
  color: var(--ds-text-on-dark);
  text-decoration: underline;
}