:root {
  --qontic-navy: #07192b;
  --qontic-blue: #0b5fb9;
  --qontic-cyan: #55d8e6;
  --qontic-gold: #d7a51e;
  --qontic-paper: #f5f9fc;
}

.qontic-template {
  max-width: 1540px;
  padding-top: 0;
}

.qontic-app-header {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto;
  gap: 18px;
  min-height: 92px;
  margin: 0 -18px;
  padding: 12px 18px;
  align-items: center;
  border-bottom: 1px solid #23425a;
  background: linear-gradient(110deg, #061321 0%, #0b2134 58%, #0a2940 100%);
  box-shadow: 0 9px 30px #0004;
}

.qontic-brand {
  display: flex;
  width: 86px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #8da9bb;
  font-size: 8px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}

.qontic-brand img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 0 0 1px #2b6685, 0 5px 16px #0007;
}

.qontic-app-title .eyebrow {
  margin-bottom: 7px;
  color: #71dce8;
  letter-spacing: .16em;
}

.qontic-app-title {
  position: relative;
  min-width: 0;
  outline: none;
}

.qontic-title-row {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.qontic-app-title h1 {
  margin: 0;
  color: #f1f8fc;
  font-size: clamp(26px, 3vw, 39px);
}

.qontic-header-actions {
  display: flex;
  max-width: 330px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 14px;
}

.qontic-header-actions a,
.qontic-footer a {
  color: #b8cfdd;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.qontic-header-actions a:hover,
.qontic-header-actions a:focus-visible,
.qontic-footer a:hover,
.qontic-footer a:focus-visible {
  color: #70e2ed;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qontic-header-actions .truth {
  border-color: #907321;
  background: #261f0f;
  color: #f4cf64;
}

.qontic-view-tabs {
  flex: none;
  margin: 0 0 2px;
  border: 0;
  padding: 0;
}

.qontic-view-tabs button {
  min-width: 62px;
  padding: 5px 11px;
  font-size: 12px;
}

.qontic-title-purpose {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  left: 0;
  width: min(580px, 80vw);
  padding: 11px 13px;
  border: 1px solid #5b6d3b;
  border-left: 3px solid var(--qontic-gold);
  border-radius: 8px;
  background: #071522f5;
  color: #c6d7e1;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 12px 30px #000a;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.qontic-title-purpose strong {
  margin-right: 7px;
  color: #f0ca61;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.qontic-app-title:hover .qontic-title-purpose,
.qontic-app-title:focus-within .qontic-title-purpose {
  opacity: 1;
  transform: none;
}

.qontic-details-purpose {
  margin: 0 0 18px !important;
  padding: 10px 12px;
  border-left: 3px solid var(--qontic-gold);
  background: #071521;
  color: #c7d7e1;
}

.qontic-details-purpose strong {
  color: #f0ca61;
}

.qontic-template .lab {
  gap: 12px;
}

.qontic-template .lab iframe,
.qontic-template .lab aside,
.qontic-template .details-panel {
  box-shadow: 0 10px 30px #0003;
}

.qontic-template .lab aside {
  border-top: 3px solid #2f7187;
}

.qontic-footer {
  display: flex;
  width: min(100%, 1540px);
  justify-content: space-between;
  gap: 18px;
  margin: 18px auto 0;
  padding: 14px 21px 18px;
  border-top: 1px solid #23425a;
  color: #829dad;
  font-size: 11px;
}

.qontic-footer nav {
  display: flex;
  gap: 18px;
}

@media (max-width: 900px) {
  .qontic-app-header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .qontic-header-actions {
    grid-column: 1 / -1;
    max-width: none;
    justify-content: flex-start;
  }
  .qontic-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .qontic-app-header {
    gap: 10px;
  }
  .qontic-brand {
    width: 62px;
  }
  .qontic-brand img {
    width: 54px;
    height: 54px;
  }
  .qontic-brand span {
    display: none;
  }
  .qontic-footer {
    flex-direction: column;
  }
}

/* Enabled only on sidebars explicitly registered by qontic-resize.js. */
.qontic-resizable-sidebar { position: relative; }
.qontic-sidebar-divider {
  position: absolute; top: 0; bottom: 0; right: -15px; width: 12px;
  min-height: 80px; cursor: col-resize; touch-action: none; z-index: 12;
}
.qontic-sidebar-divider::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 5px; width: 3px;
  border-radius: 3px; background: #51768a; opacity: .65;
}
.qontic-sidebar-divider:hover::after, .qontic-sidebar-divider:focus-visible::after {
  background: #1594a8; opacity: 1;
}
.qontic-sidebar-divider:focus-visible { outline: 2px solid #1594a8; border-radius: 5px; }
.qontic-sidebar-divider[hidden] { display: none; }
body.qontic-sidebar-dragging, body.qontic-sidebar-dragging * { cursor: col-resize !important; user-select: none !important; }

/* Optional compact branding leaves more vertical space for the experiment. */
.qontic-app-header.qontic-compact-header {min-height:0;padding-block:8px;gap:12px;}
.qontic-compact-header .qontic-brand {width:56px;}
.qontic-compact-header .qontic-brand img {width:48px;height:48px;}
.qontic-compact-header .qontic-brand span {display:none;}
.qontic-compact-header .qontic-app-title .eyebrow {margin:0 0 3px;font-size:9px;}
.qontic-compact-header .qontic-app-title h1 {font-size:clamp(24px,2.4vw,30px);line-height:1.15;}
.qontic-compact-header .qontic-title-row {align-items:center;}
@media(max-width:900px) {
  .qontic-compact-header .qontic-title-row {align-items:flex-start;gap:6px;}
  .qontic-compact-header .qontic-header-actions {display:none;}
}

/* Directory navigation is opt-in; legacy consumers keep their existing shell. */
body.qontic-directory .qontic-back-home {display:none!important;}
.qontic-directory-header .qontic-breadcrumbs {margin:0 0 4px;font:400 11px/1.4 Inter,Arial,sans-serif;color:#94b4c6;}
.qontic-breadcrumbs ol {display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;padding:0;list-style:none;}
.qontic-breadcrumbs li {display:flex;align-items:center;}
.qontic-breadcrumbs li+li::before {content:'›';margin:0 8px;color:#7294a7;}
.qontic-breadcrumbs a {color:#a4cadc;text-decoration:none;}
.qontic-breadcrumbs a:hover {color:#7cecff;text-decoration:underline;}
.qontic-breadcrumbs [aria-current] {color:#d9edf7;}
.qontic-breadcrumbs[hidden] {display:none;}

.qontic-breadcrumbs a:focus-visible {outline:2px solid #55d8e6;outline-offset:3px;}
body.qontic-no-site-navigation .qontic-back-home {display:none!important;}
.qontic-app-header.qontic-header-without-actions {grid-template-columns:auto minmax(0,1fr);}
.qontic-app-header.qontic-unbranded-header {grid-template-columns:minmax(0,1fr) auto;}
.qontic-app-header.qontic-unbranded-header.qontic-header-without-actions {grid-template-columns:minmax(0,1fr);}