@charset "utf-8";


body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	/*background: #666666; */
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}




.VisualizationMainPage #mainContent {
	/*padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: #FFFFFF;
        overflow-x: hidden;
        overflow-x: clip;   /* hides overflow without making a scroll container, so sticky works */
}



.VisualizationMainPage #container {


	background: #FFFFFF;
	/*margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}


.VisualizationMainPage #algoControlSection
{
	background: #DDEEDD; 
	color:#000000; 

}


.VisualizationMainPage #generalAnimationControlSection
{
	background: #DDEEDD; 
	color:#006600; 

}

.VisualizationMainPage  #header { 
	background: #006633; 
	color:#ffCC33;
	padding: 0 10px 0 20px; 
  
} 
 
.VisualizationMainPage #header  A:visited 
	  { text-decoration:none;
        color:#ffCC33; 
	   }
	   
	   
.VisualizationMainPage #header h1 {
	margin: 0; 
	padding: 10px 0; 
        font-size: 20px
	}

/* Title on the left, link back to the algorithm index on the right */
.VisualizationMainPage #header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
}

/* Long titles wrap inside the h1; the link keeps to the same line */
.VisualizationMainPage #header h1 {
	min-width: 0;
}

.VisualizationMainPage #header .home-link {
	padding: 10px 0;
	white-space: nowrap;
	font-size: 20px;
}

.VisualizationMainPage #header .home-link:hover,
.VisualizationMainPage #footer a:hover {
	text-decoration: underline;
}
	   
.VisualizationMainPage #header A:link {
    text-decoration:none;
    color:#ffCC33;
	}
	
	
.VisualizationMainPage #container {
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}	
	
.VisualizationMainPage #mainContent {
	text-align: center;
}	
			
.VisualizationMainPage #footer  A:visited { text-decoration:none;
        color:#ffcc33; 
}

.VisualizationMainPage #footer A:link {
    text-decoration:none;
	color:#ffCC33;
}


	

.VisualizationMainPage #mainContent h1{
	/*padding: 0 20px;*/ 
	background: #FFFFFF;
	color:#006633
}

.VisualizationMainPage #mainContent h2{
	/*padding: 0 20px;*/ 
	background: #FFFFFF;
	color:#006633
}

.VisualizationMainPage #mainContent h3{
	/*padding: 0 20px;*/ 
	background: #FFFFFF;
	color:#006633
}



.VisualizationMainPage #footer { 
	padding: 0 10px;
    background: #006633; 
	color:#ffcc33;
} 
.VisualizationMainPage #theory { 
	text-align: left;
        padding: 10px
} 
.VisualizationMainPage #footer p {
	margin: 0; 	padding: 10px 0; 
}

EM {text-decoration: bold;}

img {
   max-width: 100%;
}

	
/* ---- Control bars ----
   The control helpers append <div>s into the #AlgorithmSpecificControls and
   #GeneralAnimationControls <table>s; lay them out as wrapping flex rows. */
#AlgorithmSpecificControls,
#GeneralAnimationControls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 4px;
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
}
/* One font for the whole control bar: buttons, menus and fields would
   otherwise use the browser's own (Arial 13.3px) next to Verdana labels. */
#AlgorithmSpecificControls input,
#AlgorithmSpecificControls select,
#AlgorithmSpecificControls button,
#GeneralAnimationControls input,
#GeneralAnimationControls select,
#GeneralAnimationControls button{
    font-family: inherit;
    font-size: inherit;
}
.top-btn-group,
.btn-ctrl-group{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}
.top-btn-group input[type=button],
.btn-ctrl-group input[type=button]{
    padding: 3px 8px;
}
.top-btn-group input[type=text],
.btn-ctrl-group input[type=text]{
    padding: 3px 10px;
    max-width: 6em;
}
.top-btn-group select{
    padding: 2px 0 3px 0;
    max-width: 100%;
}
/* A field for a whole input vector ("A=0111 B=0001 C0=0") */
.top-btn-group input[type=text].wide-field{
    max-width: 20em;
}
/* Controls that only apply to some modes of a page: the page sets [hidden] */
#AlgorithmSpecificControls [hidden]{
    display: none;
}
/* Mode tabs: one button per mode of a page, on a row of their own; the page
   sets aria-pressed="true" on the open one */
.tabs-group{
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
/* Every button in the control bars is a pill, like the section links on
   Algorithms.html; dark green with yellow text on hover and when pressed */
#AlgorithmSpecificControls input[type=button],
#GeneralAnimationControls input[type=button],
#AlgorithmSpecificControls .options-toggle{
    border: 1px solid #b7d3c4;
    border-radius: 16px;
    background: #f3f8f5;
    color: #006633;
    cursor: pointer;
}
#AlgorithmSpecificControls input[type=button]:hover:enabled,
#GeneralAnimationControls input[type=button]:hover:enabled,
#AlgorithmSpecificControls .options-toggle:hover,
#AlgorithmSpecificControls .tabs-group input[type=button][aria-pressed=true]{
    background: #006633;
    border-color: #006633;
    color: #ffcc33;
}
/* Mode tabs are not pills: folder tabs standing on a green rule, so they read
   as "pick a view" and the pills below them as "actions in this view" */
.tabs-group{
    align-items: flex-end;
    gap: 2px;
    border-bottom: 2px solid #006633;
    margin-bottom: 2px;
}
#AlgorithmSpecificControls .tabs-group input[type=button]{
    border: 1px solid #b7d3c4;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: #006633;
    cursor: pointer;
    padding: 5px 12px 4px;
}
#AlgorithmSpecificControls .tabs-group input[type=button]:hover:enabled,
#AlgorithmSpecificControls .tabs-group input[type=button][aria-pressed=true]{
    background: #006633;
    border-color: #006633;
    color: #ffcc33;
}
/* Text fields: rounded like the search box on Algorithms.html, white with a
   yellow ring while typing */
#AlgorithmSpecificControls input[type=text],
#GeneralAnimationControls input[type=text]{
    border: 1px solid #b7d3c4;
    border-radius: 16px;
    background: #f3f8f5;
    color: #000;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
#AlgorithmSpecificControls input[type=text]:focus,
#GeneralAnimationControls input[type=text]:focus{
    border-color: #006633;
    background: #fff;
    box-shadow: 0 0 0 2px #ffcc33;
}
#AlgorithmSpecificControls input[type=text]:disabled,
#GeneralAnimationControls input[type=text]:disabled{
    color: #8aa596;
    border-color: #d3e3da;
}
/* Dropdowns: the same pill as the text fields, with our own chevron so they
   look alike in every browser */
#AlgorithmSpecificControls select,
#GeneralAnimationControls select{
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid #b7d3c4;
    border-radius: 16px;
    padding: 3px 28px 3px 12px;
    background: #f3f8f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23006633' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
    color: #000;
    text-overflow: ellipsis;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
#AlgorithmSpecificControls select:hover:enabled,
#GeneralAnimationControls select:hover:enabled{
    border-color: #006633;
}
#AlgorithmSpecificControls select:focus-visible,
#GeneralAnimationControls select:focus-visible{
    border-color: #006633;
    background-color: #fff;
    box-shadow: 0 0 0 2px #ffcc33;
}
#AlgorithmSpecificControls select:disabled,
#GeneralAnimationControls select:disabled{
    color: #8aa596;
    border-color: #d3e3da;
    cursor: default;
}
#AlgorithmSpecificControls input[type=button]:disabled,
#GeneralAnimationControls input[type=button]:disabled{
    color: #8aa596;
    border-color: #d3e3da;
    cursor: default;
}
/* A captioned cluster of related actions (beginControlCluster): a thin divider
   on its left, the caption in secondary text, its controls wrap together */
.ctl-cluster{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
    border-left: 1px solid #9fb59f;
    max-width: 100%;
}
.ctl-cluster-caption{
    color: #333;
}
/* A label and its control stay on one line (Algorithm.js pairs them) */
.top-btn-group.label-pair{
    flex-wrap: nowrap;
    max-width: 100%;
}
/* Nothing in the control bars may be wider than the bar (long selects
   shrink and cut their text instead of running off a phone screen) */
#AlgorithmSpecificControls > *,
.options-body > *,
.top-btn-group > *{
    min-width: 0;
    max-width: 100%;
}
/* Comfortable click targets everywhere (phones get 40px below) */
.top-btn-group input[type=button],
.btn-ctrl-group input[type=button],
.top-btn-group input[type=text],
.btn-ctrl-group input[type=text],
.top-btn-group select,
#AlgorithmSpecificControls .options-toggle{
    min-height: 32px;
    box-sizing: border-box;
}

/* Desktop: the playback bar sticks to the bottom of the window while the
   canvas is on screen, so it is reachable even when the canvas is taller
   than the window.  (Not on phones: it would cover too much of the screen.) */
@media (min-width: 769px){
    .VisualizationMainPage #generalAnimationControlSection{
        position: sticky;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 -1px 0 #b5cfb5;
    }
}

/* Collapsible "Options" group in the page's control bar
   (beginOptionsGroup / endOptionsGroup in Algorithm.js): its own row */
.options-group{
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
.options-body{
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
.options-group.open .options-body{
    display: contents;
}

/* Canvas size and control position live behind the settings button */
#AnimationSettings{
    display: none;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
#AnimationSettings.open{
    display: flex;
}
#GeneralAnimationControls .settings-toggle input[type=button]{
    min-width: 36px;
    font-size: 18px;
    line-height: 1;
}
.top-btn-group table{
    border-collapse: collapse;
}
.btn-ctrl-label{
    margin-left: 5px;
}
#VisualizationSpeedGroup{
    margin: 0 5px;
    gap: 6px;
}
#VisualizationSpeedGroup input[type=range]{
    width: 160px;
    margin: 0;
    accent-color: #006633;
}

/* ---- Canvas ----
   AnimationMain.js wraps #canvas in .canvas-wrap and sets its CSS size from
   the container width; the wrapper scrolls when the canvas is kept wider
   than the screen so it stays readable. */
.canvas-wrap{
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
/* Pan arrows: shown at an edge while part of the drawing is off screen that way
   (AnimationMain.js updatePanEdges); a tap pans most of a screen width */
.canvas-frame{
    position: relative;
}
.pan-edge{
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 56px;
    margin-top: -28px;
    padding: 0 0 4px;
    border: 0;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 102, 51, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
.pan-edge.show{
    display: flex;
}
.pan-edge.left{
    left: 0;
    border-radius: 0 10px 10px 0;
}
.pan-edge.right{
    right: 0;
    border-radius: 10px 0 0 10px;
}
.pan-edge:focus-visible{
    outline: 2px solid #006633;
    outline-offset: -2px;
}
/* First-visit hint when the canvas is wider than the screen */
.pan-hint{
    position: sticky;
    left: 0;
    width: max-content;
    max-width: calc(100% - 16px);
    margin: -44px 8px 8px;
    padding: 6px 12px;
    border-radius: 16px;
    background: rgba(0, 51, 25, 0.85);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
#canvas{
    display: block;
    margin: 0 auto;
    max-width: none;
    touch-action: pan-x pan-y pinch-zoom;
}

/* Any image in the theory (old pages' plain <img> too) fits the text column */
.VisualizationMainPage #theory img{
    max-width: min(var(--theory-column), 100%);
    height: auto;
}
.VisualizationMainPage #theory article{
    margin: 0;     /* no extra indent: the article's text is in the same column as every page */
}
/* The theory markup uses Bootstrap-style grid classes, but Bootstrap isn't
   loaded: a .row of images sits in the text column like everything else. */
.VisualizationMainPage #theory .row{
    text-align: left;
    margin: 1em 0;
}
/* The theory is one text column: prose is left-aligned (not justified) and capped at a
   readable line length, and tables, figures and code blocks start at the same left edge and are
   no wider. --theory-column is 72ch of the 16px Verdana prose (732px), written in rem so code
   blocks in a 13px monospace font get the same width. */
.VisualizationMainPage{
    --theory-column: 45.75rem;     /* also used by "Related visualizations" and "References" */
}
.VisualizationMainPage #theory p,
.VisualizationMainPage #theory li{
    max-width: var(--theory-column);
    line-height: 1.6;
}
.VisualizationMainPage #theory pre,
.VisualizationMainPage #theory table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
/* Tables and code blocks are as wide as the prose, so a table with long cells wraps them and a
   long code line scrolls inside its block. A matrix whose cells cannot wrap (many columns of short
   values, long code names) gets class="wide-table" and may use the full width. */
.VisualizationMainPage #theory pre,
.VisualizationMainPage #theory table:not(.wide-table){
    max-width: min(var(--theory-column), 100%);
}
.VisualizationMainPage #theory pre{
    box-sizing: border-box;     /* the cap includes the block's padding and border */
}

/* Theory diagrams: <figure class="theory-figure"><img src="Images/<page>/x.svg" alt="…">
   <figcaption>…</figcaption></figure>. In the text column (left edge, at most --theory-column
   like p, li, tables and code; figures are drawn ≤ 720px so they fit), scaled down on phones. */
.VisualizationMainPage #theory figure.theory-figure{
    margin: 1.5em 0;
    max-width: min(var(--theory-column), 100%);
    text-align: left;
}
.VisualizationMainPage #theory figure.theory-figure img{
    max-width: 100%;
    height: auto;
}
/* Phones: shrinking a 720px diagram to 390px makes its text ~7px. Keep it at its own size and
   let the figure scroll sideways (like tables), never the page. */
@media (max-width: 600px){
    .VisualizationMainPage #theory figure.theory-figure{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .VisualizationMainPage #theory figure.theory-figure img{
        max-width: none;
    }
}
.VisualizationMainPage #theory figure.theory-figure figcaption{
    max-width: var(--theory-column);
    margin: 0.5em 0 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Code in the theory text: a shaded block for <pre>, a light chip for
   inline <code>. */
.VisualizationMainPage #theory pre{
    background: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 1em 0;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}
.VisualizationMainPage #theory code{
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9em;
    background: #f0f2f4;
    border-radius: 4px;
    padding: 0.1em 0.35em;
}
.VisualizationMainPage #theory pre code{
    font-size: inherit;
    background: none;
    border-radius: 0;
    padding: 0;
}
/* Keywords and shell commands marked by highlightTheoryCode in AnimationMain.js */
.VisualizationMainPage #theory pre .kw{
    color: #cf222e;
    font-weight: 600;
}
.VisualizationMainPage #theory pre .cmd{
    color: #0550ae;
    font-weight: 600;
}

/* ---- Theory navigation (buildTheoryToc in AnimationMain.js) ---- */
.VisualizationMainPage #header .theory-link{
    margin-left: auto;
    padding: 10px 0;
    font-size: 16px;
    white-space: nowrap;
}
.VisualizationMainPage #theory h2,
.VisualizationMainPage #theory h3{
    scroll-margin-top: 12px;
}
.theory-toc{
    margin: 0 0 1em;
    font-size: 14px;
}
.theory-toc details{
    max-width: 44em;
    box-sizing: border-box;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f6f8fa;
    padding: 8px 12px;
}
.theory-toc summary{
    cursor: pointer;
    font-weight: bold;
    color: #006633;
}
.theory-toc ol{
    margin: 6px 0 0;
    padding-left: 1.4em;
}
.theory-toc ol ol{
    margin-top: 2px;
    list-style: lower-alpha;
}
.theory-toc li{
    margin: 3px 0;
}
.theory-toc a{
    color: #1a4d8f;
    text-decoration: none;
}
.theory-toc a:hover{
    text-decoration: underline;
}
.theory-ad-rail{
    display: none;     /* shown only in the wide layout below */
}
@media (min-width: 1400px){
    .VisualizationMainPage #theory.has-toc{
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
    }
    /* Related pages and references start where the text does, right of the sidebar */
    .VisualizationMainPage #theory.has-toc ~ #relatedPages,
    .VisualizationMainPage #theory.has-toc ~ #refLink{
        margin-left: calc(240px + 28px);
    }
    /* Ad rail: a third column right of the text (built by buildTheoryToc) */
    .VisualizationMainPage #theory.has-toc.has-ad-rail{
        grid-template-columns: 240px minmax(0, 1fr) 300px;
    }
    .theory-ad-rail{
        display: block;
        position: sticky;
        top: 8px;
        width: 300px;
    }
    .theory-toc details{
        max-width: none;
    }
    .theory-toc{
        position: sticky;
        top: 8px;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
    }
    .theory-toc summary{
        pointer-events: none;
        list-style: none;
    }
    .theory-toc summary::-webkit-details-marker{
        display: none;
    }
}
@media (max-width: 600px){
    .VisualizationMainPage #header .theory-link{
        display: none;
    }
}
@media (prefers-reduced-motion: no-preference){
    html{
        scroll-behavior: smooth;
    }
}

/* Values the text calls out "in red" (e.g. Floyd's winners) */
.VisualizationMainPage #theory .hl-red{
    color: #c62828;
    font-weight: bold;
}
/* Text in the colour the canvas uses for the same thing (a host, a role, a key), named instead
   of inline style="color:…", and background swatches for a colour legend in the text */
.VisualizationMainPage #theory .ink-blue{ color: #1565C0; }
.VisualizationMainPage #theory .ink-teal{ color: #00796B; }
.VisualizationMainPage #theory .ink-red{ color: #D50000; }
.VisualizationMainPage #theory .ink-dark-red{ color: #D32F2F; }
.VisualizationMainPage #theory .ink-purple{ color: #7B1FA2; }
.VisualizationMainPage #theory .ink-orange{ color: #E65100; }
.VisualizationMainPage #theory .ink-green{ color: #2E7D32; }
.VisualizationMainPage #theory .swatch-green{ background: #C8E6C9; }
.VisualizationMainPage #theory .swatch-blue{ background: #BBDEFB; }
.VisualizationMainPage #theory .swatch-grey{ background: #E0E0E0; }

/* Small caps for pseudo-code procedure names (MAKE-SET) */
.VisualizationMainPage #theory .sc{
    font-variant: small-caps;
}

/* Tables in the theory text get light cell borders. border="0" tables are
   layout-only and stay borderless. The borders go on the cells because the
   table itself is display:block (for horizontal scrolling). */
.VisualizationMainPage #theory table:not([border="0"]){
    border-collapse: collapse;
    border: none;
    width: fit-content;
    margin: 1em 0;
}
.VisualizationMainPage #theory table:not([border="0"]) > * > tr > th,
.VisualizationMainPage #theory table:not([border="0"]) > * > tr > td{
    border: 1px solid #d0d7de;
    padding: 5px 8px;
}
.VisualizationMainPage #theory table:not([border="0"]) > * > tr > th{
    background: #f6f8fa;
}

/* ---- Small screens ---- */
@media (max-width: 768px){
    #AlgorithmSpecificControls,
    #GeneralAnimationControls{
        font-size: 16px;
    }
    .VisualizationMainPage #header h1,
    .VisualizationMainPage #header .home-link{
        font-size: 18px;
    }
    .top-btn-group input[type=button],
    .btn-ctrl-group input[type=button],
    .top-btn-group input[type=text],
    .btn-ctrl-group input[type=text],
    .top-btn-group select,
    #AlgorithmSpecificControls .options-toggle{
        min-height: 40px;
        font-size: 16px;   /* also stops iOS zooming into focused inputs */
    }
    .top-btn-group input[type=button],
    .btn-ctrl-group input[type=button]{
        padding: 6px 10px;
    }
    .top-btn-group input[type=checkbox],
    .top-btn-group input[type=radio]{
        width: 20px;
        height: 20px;
    }
    /* Resizing the logical canvas isn't useful on a phone */
    .size-ctrl{
        display: none !important;
    }
    /* The speed slider shares its row with Fit to Screen and the settings button */
    #VisualizationSpeedGroup{
        flex: 1 1 150px;
    }
    /* "New random tree:" group: no indent on a narrow bar */
    .random-controls{
        margin-left: 0 !important;
    }
    #VisualizationSpeedGroup input[type=range]{
        flex: 1;
        width: auto;
        min-height: 32px;
    }
}
@media (max-width: 600px){
    /* Keep title + link on one row: let the link wrap to two lines so
       long titles aren't squeezed into a narrow column */
    .VisualizationMainPage #header{
        padding: 0 10px;
    }
    .VisualizationMainPage #header h1,
    .VisualizationMainPage #header .home-link{
        font-size: 16px;
    }
    .VisualizationMainPage #header .home-link{
        white-space: normal;
        text-align: right;
        flex: 0 1 30%;
    }
    .playback-btn{
        min-width: 44px;
        font-size: 18px !important;
    }
}

/* "Related pages" cards between the theory and the references
   (generated by tests/galles/related_pages.py) */
.VisualizationMainPage #relatedPages{
    text-align: left;
    padding: 4px 10px 10px;
    border-top: 1px solid #d6e4dc;
    margin-top: 8px;
}
.VisualizationMainPage #mainContent #refLink h2,
.VisualizationMainPage #mainContent #relatedPages h2{
    font-size: 20px;
    margin: 10px 0;
}
#relatedPages ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    max-width: var(--theory-column);   /* the same column as the theory text above */
    grid-template-columns: repeat(3, minmax(0, 1fr));   /* 6 pages = two full rows */
    gap: 8px;
}
#relatedPages ul:has(> li:nth-child(4):last-child){
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* 4 pages: 2 + 2, not 3 + 1 */
}
@media (max-width: 760px){
    #relatedPages ul{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 420px){
    #relatedPages ul{
        grid-template-columns: 1fr;
    }
}
#relatedPages a{
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f6f8fa;
    color: #1a4d8f;
    text-decoration: none;
    font-size: 15px;
}
#relatedPages a:hover,
#relatedPages a:focus{
    border-color: #006633;
    background: #fff;
}
/* Thumbnail: the page's first theory figure, scaled to fit a fixed-shape box */
#relatedPages a img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: contain;
    box-sizing: border-box;
    padding: 4px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
}
/* Phones (one column): thumbnail on the left, title beside it */
@media (max-width: 420px){
    #relatedPages a{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #relatedPages a img{
        flex: 0 0 120px;
        width: 120px;
        margin-bottom: 0;
    }
}

/* "References" section: same heading and separator as "Related visualizations" */
#refLink{
    border-top: 1px solid #d6e4dc;
    margin-top: 8px;
}
#refLink{
    text-align: left;
    padding: 10px;
}
#refLink a{
    color: #006633;
}
/* ---- Control bar groups (groupControlBar in Algorithm.js) ----
   "try it": the viewer's own input (fields, pickers, actions); a thin divider;
   "demos": the prepared scenarios (light blue buttons); Reset after them.
   No boxes and no captions.  Text fields look like fields (white, square
   corners), not like buttons. */
#AlgorithmSpecificControls input[type=text]{
    background: #ffffff;
    border: 1px solid #8aa89a;
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* desktop: "try it" fills the left and wraps; demos and Reset keep their
   place at the top right; tabs and Options take whole rows */
#AlgorithmSpecificControls.ctl-grouped{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
}
#AlgorithmSpecificControls.ctl-grouped > *{
    grid-column: 1 / -1;
}
#AlgorithmSpecificControls.ctl-grouped > .ctl-try{
    grid-column: 1;
}
#AlgorithmSpecificControls.ctl-grouped > .ctl-demos{
    grid-column: 2;
}
#AlgorithmSpecificControls.ctl-grouped > .ctl-reset{
    grid-column: 3;
    align-self: center;
}
.ctl-zone{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    max-width: 100%;
    box-sizing: border-box;
}
.ctl-zone-body{
    display: contents;
}
/* nothing in a group is wider than the group (long demo menus shrink) */
.ctl-zone > *,
.ctl-zone-body > *{
    min-width: 0;
    max-width: 100%;
}
.ctl-zone.collapsed .ctl-zone-body{
    display: none;
}
/* a group whose controls are all hidden (another tab's demos) is hidden too */
.ctl-zone:not(:has(> .ctl-zone-body > :not([hidden]))){
    display: none;
}
/* the collapse toggle (an arrow) exists on phones only */
#AlgorithmSpecificControls .ctl-zone-head{
    display: none;
}
/* a thin divider between "try it" and "demos" */
.ctl-demos{
    border-left: 1px solid #9fb59f;
    padding-left: 10px;
}
#AlgorithmSpecificControls .ctl-demos input[type=button]{
    background: #e3f2fd;
    border-color: #90caf9;
    color: #0d47a1;
}
#AlgorithmSpecificControls .ctl-demos input[type=button]:hover:enabled{
    background: #1565c0;
    border-color: #1565c0;
    color: #ffffff;
}
#AlgorithmSpecificControls .ctl-demos select{
    border-color: #90caf9;
}
.ctl-reset{
    padding-left: 6px;
    border-left: 1px solid #b7d3c4;
}
@media (max-width: 768px){
    #AlgorithmSpecificControls.ctl-grouped{
        grid-template-columns: minmax(0, 1fr);
    }
    #AlgorithmSpecificControls.ctl-grouped > .ctl-try,
    #AlgorithmSpecificControls.ctl-grouped > .ctl-demos,
    #AlgorithmSpecificControls.ctl-grouped > .ctl-reset{
        grid-column: 1;
        justify-self: start;
    }
    #AlgorithmSpecificControls.ctl-grouped > .ctl-zone{
        justify-self: stretch;
    }
    /* phones: groups stack, a line across between them, and a small arrow
       at the right end of each group collapses or expands it */
    .ctl-zone{
        min-height: 40px;
        padding: 0 44px 4px 0;
    }
    .ctl-demos{
        border-left: none;
        border-top: 1px solid #9fb59f;
        padding-top: 4px;
    }
    #AlgorithmSpecificControls .ctl-zone-head{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 20px;
        background: none;
        color: #006633;
        font-size: 18px;
        cursor: pointer;
    }
    .ctl-demos .ctl-zone-head{
        top: 4px;
    }
    #AlgorithmSpecificControls .ctl-demos .ctl-zone-head{
        color: #1565c0;
    }
    .ctl-zone-arrow::before{
        content: "\25BE";
    }
    .ctl-zone.collapsed .ctl-zone-arrow::before{
        content: "\25B8";
    }
    .ctl-reset{
        border-left: none;
        padding-left: 0;
    }
}