/* ALGORITHMS HEADER */
.algorithm-component {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-sizing: border-box;
}

/* 1. HTML Type Layer: Set global typography for fluid, wrapping elements */
.algorithm-component, 
.algorithm-component .algorithm-header, 
.algorithm-component .algorithm-definition,
.algorithm-component .trace-question {
  font-family: cursive;
  text-align: center;
}

/* Gold Title */
.algorithm-component .algorithm-header {
  fill: var(--c-gold);        /* SVGs use 'fill' instead of 'color' */
  font-size: 36px;      /* Fixed pixel size works best inside SVG viewBox */
  letter-spacing: 2px;
}

/* White definition */
.algorithm-component .algorithm-definition {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  line-height: 1.4;
  margin: 0 auto 0.5rem auto;
  max-width: 950px;
}

/* Magenta question - smaller font, tighter margin */
.algorithm-component .trace-question {
  color: var(--c-pink);
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  margin: 0 auto 1rem auto;
  max-width: 900px;
}

/* 2. SVG Graphic Layer: Scalable geometry and complex paths */
.algorithm-component svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Shared sketchy presentational attribute styles for shapes */
.sketch-line { fill: none; stroke: var(--c-gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* GOLD LINES */
.sketch-step { fill: none; stroke: var(--c-cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* CYAN BOXES */
.sketch-decision { fill: none; stroke: var(--c-pink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* PINK DIAMONDS */
.sketch-terminus { fill: none; stroke: var(--c-purple); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* PURPLE CIRCLES */

/* Explicitly target and force a cursive font onto SVG text and tspan dynamically */
.algorithm-component svg text,
.algorithm-component svg tspan,
.algorithm-component text {
  font-family: cursive !important;
}

/* Namespace: sequencing-notebook */
.sequencing-notebook-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background-color: transparent;
    font-family: cursive;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.sequencing-notebook-header {
    text-align: center;
    width: 100%;
    margin-bottom: 0.25rem;
}

.sequencing-notebook-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--c-gold);
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.sequencing-notebook-subtitle {
    font-size: clamp(0.95rem, 2.2vw, 1.25rem);
    color: #B0B0B0;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

.sequencing-notebook-svg-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sequencing-notebook-svg {
    width: 100%;
    height: auto;
    max-height: 380px; /* Reduced to match tighter height bound */
}