@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Quicksand:wght@300..700&display=swap');

:root {
 --sea:         #009da0;
 --sea-dark:    #007d80;
 --sea-night:   #00585A;
 --midnight:    #162530;
 
 --ivory:       #faf7f2;
 --ivory-dark:  #f0ebe0;
 --grey-light:  #f0f5f5;
 --grey:        #4a4a4a;
 
 --white:        #ffffff;
 --paper:        #f5f8f6;
 --rule:         #d8e8de;
  
 --bio:          #00c9a7;
 --bio-text:     #007a66;
 --bio-dim:      #008f76;
 --bio-glow:     rgba(0,201,167,0.18);
 --bio-pale:     #e0faf5;
  
 --amber-pale:   #fff8e8;
 --amber-wash:   #fdf2d8;
 --amber-border: #e8c46a;
 --amber:        #e09600;
  
 /* Design A/B */
 
 --designA-light:  #eef5d7;
 --designA:        #708e04;
 --designA-dark:   #455703;
      
 --designB-light:  #e1f2f2;
 --designB:        #007d80;
 --designB-dark:   #00585A;
 
 --da:           #1a4a32;
 --da-light:     #1e6040;
 --da-wash:      #eaf4ee;
 --da-glow:      rgba(26,74,50,0.12);
 --db:           #0a3d4a;
 --db-light:     #0d5a72;
 --db-wash:      #e5f2f8;
 --db-glow:      rgba(10,61,74,0.12);
 
 --font-header: "Quicksand", serif !default;
 
 /* Spacing */
 --s1:  0.5rem;
 --s2:  1rem;
 --s3:  1.5rem;
 --s4:  2rem;
 --s6:  3rem;
 --s8:  4rem;
 --s12: 6rem;
 --s16: 8rem;

 /* Radii */
 --r-sm: 4px;
 --r-md: 8px;
 --r-lg: 16px;
 --r-xl: 24px;
 
  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(14,42,30,0.06), 0 1px 2px rgba(14,42,30,0.04);
  --shadow-md:  0 4px 20px rgba(14,42,30,0.08), 0 2px 6px rgba(14,42,30,0.05);
  --shadow-lg:  0 12px 48px rgba(14,42,30,0.12), 0 4px 12px rgba(14,42,30,0.06);
  --shadow-bio: 0 0 28px rgba(0,201,167,0.18), 0 6px 20px rgba(14,42,30,0.10);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

}

/*-- scss:defaults --*/

// Fonts

$font-family-sans-serif: "Fira Sans Condensed", sans-serif !default;
$font-family-serif: "Barlow", "Quicksand", serif !default;
$font-family-monospace: "JetBrains Mono", sans-serif !default;

// Custom color palette

$white:  #ffffff !default;
$black:  #000000 !default;

$red2: #871c0f;
$red1: #af2213;
$sun2: #D47800;
$sun1: #ffb300;
$day1: #f9f2d8;
$day2: #f0f6eb;
$sea1: #009da0;
$sea2: #007d80;
$sea3: #00585A;

$night:    #22394a;
$midnight: #162530;

// Bootstrap status colors

$primary:       $sea1   !default;
$secondary:     $sea3   !default;
$success:       #708e04 !default;
$info:          $sea1   !default;
$warning:       $sun1   !default;
$danger:        $red1   !default;

// Bootstrap base shades

$light:         #f8f9fa !default;
$dark:          #212529 !default;

// Base font sizes and heading scale

$font-size-base: 1.0rem !default;
$headings-font-weight: 400 !default;
$line-height-base:    1.72 !default;

$h1-font-size: 2.6rem;
$h2-font-size: 1.9rem;
$h3-font-size: 1.45rem;
$h4-font-size: 1.15rem;
$h5-font-size: 1rem;
$h6-font-size: 0.85rem;

$toc-font-size: 0.95rem;
$sidebar-font-size: 1.1rem;
$sidebar-font-size-section: 0.95rem;
$footer-font-size: 0.95rem;

// Link colors

$link-color: $sea1;
$link-hover-color: #708e04;
$link-hover-color: #005f62;

/*-- scss:rules --*/

body {
  font-family: $font-family-serif;
  font-size: 1.02rem;
  font-weight: 400;
  text-align: justify;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #a1d6d6;
  color: var(--night);
}

html { scroll-behavior: smooth; }

// Callouts

.callout.callout-style-default .callout-body,
.callout.callout-style-default > div.callout-header {
  font-size: 1.1rem;
}

.callout-icon-container {
  padding-top: 0 !important;
}

div.callout-tip.callout-style-default > .callout-header {
  background-color: $sea1 !important;
  color: #ffffff !important;
}
div.callout-tip.callout {
  border-left-color: $sea1 !important;
}

// Titles & headers

#title-block-header.quarto-title-block.default {
  font-family: $font-family-serif;
  padding: 27px 0 26px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0; left: -5%; right: -5%;
    height: 3px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--sea) 30%,
      var(--bio) 55%,
      var(--sea-dark) 75%,
      transparent 100%
    );
    animation: shimmer 3.5s ease-in-out infinite;
  }

  .title {
    font-family: $font-family-serif;
    font-size: clamp(1.25rem,5vw,2.3rem);
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.03em;
    line-height: 1.08;
    max-width: 680px;
    margin-bottom: var(--s3);
  }

  .description > p, .abstract > p {
    font-family: $font-family-serif;
    font-weight: 400;
  }
}

header.quarto-title-block.default .description > p {
  font-family: "Barlow", serif;
  font-weight: 500;
}

.header-section-number {
  color: var(--sea);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  font-family: "Barlow", serif;
  font-weight: 500;
}

h2 {
  border-bottom: 1px solid #adb5bd;
}

// Text

p {
  text-align: justify;
}

#quarto-appendix.default [role="doc-endnotes"] > ol,
#quarto-appendix.default .quarto-appendix-contents > :not(h2):not(.h2) {
  text-align: justify;
}

// Code

$code-bg: #1e1e1e !default;
$monokai-bg: #1e1e1e;

pre.text,
pre.sourceCode,
.cell-output pre {
  font-size: 0.775em;
}

pre > code.sourceCode > span {
  color: #22394a; /* #708e04; */
}
code {
  font-family: $font-family-monospace !important;
  color: $sea3;
  padding: 0.18em 0.45em;
  border-radius: 3px;
}
code span {
  color: $midnight;
}
code span.op {
  color: #1A2D3A;
}
code span.co {
  color: #4a4a4a;
}
code span.st {
  color: #004975;
}
code span.fu {
  color: $sea2;
}
code span.cf {
  color: #C65906;
}
code span.at {
  color: #000;
}
code span.dv {
  color: #82A84D;
}
code span.cn {
  color: #739497;
}
code span.sc {
  color: #859517;
}
code span.fl {
  color: #777;
}
code span.va {
  color: #4c8d16;
}
code span.kw {
  color: #2d2d2d;
}

.cell-output {
  margin: 0 0 1em;
}

.cell-output pre {
  margin-bottom: 0;
  color: #ffffff;
}

.cell-output, pre.text {
  border: none;
  padding: .4em;
  background-color: #1e1e1e;
  border: 1px solid  #1e1e1e;
  border-radius: .25rem;
}

div.sourceCode {
  background-color: #eee;
  border: none;
  border-radius: .25rem;
}
p code:not(.sourceCode),
li code:not(.sourceCode),
td code:not(.sourceCode) {
  background-color: #f8f9fa;
  padding: .2em;
}

/* -- Tables ----------------------------------- */

.table {
  font-family: $font-family-serif;
  
  tbody tr {
    transition: background 0.15s;

    td {
      padding: 0.7rem 1.1rem;
      border-bottom: 1px solid var(--mist);
      vertical-align: top;
      color: var(--ink-body);
    }

    &:last-child td { border-bottom: none; }

    &:hover td {
      background: rgba(0, 201, 167, 0.04);
    }
  }
  
}

.table .sourceCode {
  margin-top: 0;
}

.table h1 {
  font-size: 2.1em;
  margin-top: 0;
}

.table h2 {
  font-size: 1.7em;
  margin-top: 0;
  border-bottom: 0;
}

.table h3 {
  font-size: 1.3em;
  margin-top: 0;
}

.no-stripe .table tr.odd {
  --bs-table-striped-bg: transparent;
}

// Navbar and Sidebar

.navbar {
  background-color: #009da0 !important;
  color: rgb(84.32,84.66,85);
}

.sidebar nav[role="doc-toc"] > ul li a {

  &.active {
    border-left: 1px solid $sea1;
    color: $sea1 !important;
  }
}
.sidebar nav[role=doc-toc] ul>li>a:hover,
.sidebar nav[role=doc-toc] ul>li>ul>li>a:hover {
  color: #22394a !important;
}

.navbar .navbar-nav .show>.nav-link,
.navbar .navbar-nav .active>.nav-link,
.navbar .navbar-nav .nav-link.active,
div.sidebar-item-container .active,
div.sidebar-item-container .show>.nav-link,
div.sidebar-item-container .sidebar-link>code{
  color: $sea1 !important;

}

.navbar .navbar-nav .nav-link.active,
div.sidebar-item-container .active,
div.sidebar-item-container .show > .nav-link, 
div.sidebar-item-container .sidebar-link > code {
  color: #fff !important;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-brand:hover {
 color: #22394a !important;
}
.navbar .navbar-nav .nav-link.active:hover {
  color: #22394a;
}

.navbar-brand {
font-family: "Barlow", serif;
  font-size: 1rem;
}

/* Table of Contents */

#toc-title {
  display: none;
}

nav#TOC {
  font-family: "Barlow", serif;
  font-weight: 500;
  
  padding: var(--s3) var(--s2);
  position: sticky;
  top: var(--s3);
  overflow: hidden;
  container-type: inline-size;
  background: #ffffff;
  border-radius: var(--r-sm);
}

/* Section label above the list */
nav#TOC::before {
  content: 'On this page';
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: right;
  color: var(--sea);
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  /* Crisp border for white bg — reduce opacity */
  border-bottom: 1px solid var(--sea);
  position: relative;
  z-index: 1;
}

nav#TOC ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

nav#TOC li {
  margin: 0;
}

/* Level 1 links */
nav#TOC a {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  /* Dark text — legible on white */
  color: #3a3f4a;
  text-decoration: none;
  padding: 0.28rem 0.5rem;
  line-height: 1.4;
  transition: background 0.18s ease, color 0.18s ease;
  border-bottom: none;
}
.sidebar nav[role="doc-toc"] > ul li a.active {
  border-left: 1px solid #009da0;
  color: #009da0 !important;
}
  
nav#TOC a:hover,
nav#TOC a:focus-visible {
  color: var(--bio);
  background: rgba(0, 201, 167, 0.08);
  outline: none;
}

/* Active link */
nav#TOC li.active > a {
  color: var(--bio);
  font-weight: 600;
  background: rgba(0, 201, 167, 0.1);
  box-shadow: inset 3px 0 0 var(--bio);
  padding-left: calc(0.5rem + 3px);
}

/* Level 2 links */
nav#TOC ul ul {
  padding-left: var(--s2);
}

nav#TOC ul ul a {
  font-size: 0.7rem;
  font-weight: 400;
}

nav#TOC ul ul a:hover,
nav#TOC ul ul a:focus-visible {
  color: var(--bio);
  background: rgba(0, 201, 167, 0.06);
}

nav#TOC ul ul li.active > a {
  color: var(--bio);
  font-weight: 500;
  background: rgba(0, 201, 167, 0.08);
  box-shadow: inset 2px 0 0 var(--bio);
  padding-left: calc(0.5rem + 2px);
}

/* Level 3 links */
nav#TOC ul ul ul {
  padding-left: var(--s2);
}

nav#TOC ul ul ul a {
  font-size: 0.65rem;
  font-weight: 400;
  color: #9ca3af;
}

nav#TOC ul ul ul a:hover,
nav#TOC ul ul ul a:focus-visible {
  color: var(--bio);
  background: rgba(0, 201, 167, 0.05);
}

// Footer

.nav-footer-left {
  text-align: left;
}

.nav-footer-right {
  text-align: right;
}

.nav-footer-center {
  display: none;
}

.nav-footer-left {
  flex-grow: 3;
}

.back-nav {
  margin-bottom: 1.5rem;
}

// Buttons

p a.btn, .buttons span.btn {
  font-size: 1.1rem;
}

.buttons .btn {
  margin-bottom: 1rem;
}

// Header spacing in columns layout

main.page-columns > header > h1.title, 
main.page-columns > header > .title.h1 {
  margin-bottom: 1rem;
}

// Lists

main {
  ol ol,
  ul ul,
  ol ul,
  ul ol {
    margin-bottom: 0em;
  }
  ol p + ol,
  ul p + ul,
  ol p + ul,
  ul p + ol {
    margin-bottom: 1em;
  }
}

ul,
ol {
  font-family: $font-family-serif;
}

// References

.quarto-appendix-contents div.hanging-indent div.csl-entry {
  margin-top: 0.5em;
}

// Back to top

#quarto-back-to-top {
  font-family: $font-family-serif;
}

/* -- Quotes and Annotations ------------------- */
  
.quotes {
  font-size: 1rem;
  font-style: italic;
  color: var(--grey);
  border-left: 3px solid var(--sea-dark);
  padding-left: 1.25rem;
  margin: 1.5rem 0 2rem;
  line-height: 1.5;
}

.annotation {
  font-family: "Barlow", "Quicksand", serif;
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  background: var(--ivory-dark);
  border-radius: 4px;
  /* font-size: 0.875rem; */
    line-height: 1.55;
  text-align: justify;
}

.annotation-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* -- Workflow steps --------------------------- */
  
  .pipeline-vertical {
    position: relative;
    max-width: 520px;
    margin: 0.2rem 0 0.2rem 1.5rem;
  }

.pipeline-vertical::before {
  content: '';
  position: absolute;
  left: 1.04rem;
  top: 1.05rem;
  bottom: 1.05rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--green-pale) 8%,
    var(--green-pale) 92%,
    transparent
  );
}

.pipeline-v-step {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0 1.4rem;
  position: relative;
  cursor: default;
}

.pipeline-v-num {
  width: 2.1rem;
  height: 2.1rem;
  background: var(--midnight);
  color: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: $font-family-monospace;
  font-size: 0.68rem;
  font-weight: 500;
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 3px var(--grey-light),
  0 0 0 4.5px rgba(212, 232, 219, 0.7);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.pipeline-v-step:hover .pipeline-v-num {
  background: var(--sea);
  box-shadow:
    0 0 0 3px var(--grey-light),
  0 0 0 4.5px var(--sea),
  0 4px 14px rgba(74, 140, 98, 0.3);
}

.pipeline-v-content {
  padding: 0.1rem 0 2.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pipeline-v-step:last-child .pipeline-v-content {
  padding-bottom: 0;
}

.pipeline-v-fn {
  font-family: $font-family-monospace;
  font-size: 0.76rem;
  color: var(--sea-night);
  font-weight: 500;
  background: white;
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--grey-light);
  width: fit-content;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.pipeline-v-step:hover .pipeline-v-fn {
  border-color: var(--sea);
  background: var(--sea);
  color: #ffffff;
    box-shadow: 0 2px 8px rgba(45, 90, 61, 0.1);
}

.pipeline-v-label {
  font-family: $font-family-serif;
  line-height: 1.5;
  color: var(--grey);
  /* font-size: 0.88rem; */
  /* font-weight: 300; */
  /* font-style: italic; */
}

a.pipeline-v-fn {
  text-decoration: none;
}

/* -- Design comparison cards ------------------ */
  
.design-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.design-card {
  background: white;
  border: 1px solid var(--ivory);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.design-card-header {
  font-family: $font-family-serif;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.85rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.design-card-header.design-a {
  background: var(--designA);
  color: white; }
.design-card-header.design-b {
  background: var(--designB);
  color: white; }

.design-card-badge {
  font-family: $font-family-monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
}

.design-card-body {
  padding: 1rem 1.2rem;
}

.design-stat {
  font-family: $font-family-serif;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--ivory);
}

.design-stat:last-child { border-bottom: none; }

.design-stat-label {
  color: var(--grey);
  font-size: 0.8rem;
}

.design-stat-value {
  font-family: $font-family-monospace;
  font-weight: 500;
  color: var(--midnight);
  font-size: 0.85rem;
}

.design-tradeoff {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.45;
}

.design-tradeoff.tradeoff-a {
  background: var(--designA-light);
  color: var(--designA-dark);
  border-left: 3px solid var(--designA);
}

.design-tradeoff.tradeoff-b {
  background: var(--designB-light);
  color: var(--designB-dark);
  border-left: 3px solid var(--designB);
}