@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;
}
/* 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;
}

.VisualizationMainPage #theory article{
    max-width: 70em;
    margin: 0 auto;
}
/* The theory markup uses Bootstrap-style grid classes, but Bootstrap isn't
   loaded: just center the figures. */
.VisualizationMainPage #theory .row{
    text-align: center;
    margin: 1em 0;
}
/* Prose stays left-aligned (not justified) and capped at a readable line
   length; figures, tables and code keep the full article width. */
.VisualizationMainPage #theory p,
.VisualizationMainPage #theory li{
    max-width: 72ch;
    line-height: 1.6;
}
.VisualizationMainPage #theory .row p{
    margin-left: auto;
    margin-right: auto;
}
.VisualizationMainPage #theory pre,
.VisualizationMainPage #theory table{
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* Theory diagrams: <figure class="theory-figure"><img src="Images/<page>/x.svg" alt="…">
   <figcaption>…</figcaption></figure>. Centred, scaled down on phones. */
.VisualizationMainPage #theory figure.theory-figure{
    margin: 1.5em auto;
    text-align: center;
}
.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: 72ch;
    margin: 0.5em auto 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;
}
@media (min-width: 1400px){
    .VisualizationMainPage #theory.has-toc{
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
    }
    .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;
}

/* 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;
    }
    #VisualizationSpeedGroup{
        flex: 1 1 100%;
    }
    #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;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}
#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;
}

/* "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;
}