/* Barnette's Conjecture for Humans.
 *
 * The figure palette (COLORS in tools/figures.py) should stay in sync with this file. */

:root {
    --page-bg: #eef0ea;
    --paper-bg: #fffefa;
    --ink: #333a34;
    --strong-ink: #2d332e;
    --heading-ink: #343a35;
    --muted-ink: #687066;
    --rule: #dfe4d9;
    --rule-strong: #c8d5bf;
    --paper-edge: #d8ddd2;
    --green: #4a7f3d;
    --green-dark: #284c2c;
    --green-wash: #f7faf4;
    --title-wash: #edf6e8;
    --blue: #1f5f9c;
    --cycle: #d4622b;
    --cycle-blue: #2b5fd0;
    --shadow: rgba(76, 82, 72, 0.12);
}

body {
    margin: 0;
    font-size: 17px;
    line-height: 1.58;
    font-family: "Avenir Next", "HelveticaNeue", "Helvetica Neue",
        Helvetica, Arial, "Lucida Grande", sans-serif;
    text-rendering: optimizeLegibility;
    background-color: var(--page-bg);
    color: var(--ink);
}

main {
    box-sizing: border-box;
    display: flow-root;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 44px 40px 44px;
    background-color: var(--paper-bg);
    border-left: solid 1px var(--paper-edge);
    border-right: solid 1px var(--paper-edge);
    box-shadow: 0 10px 32px var(--shadow);
}

p {
    margin: 0 0 1.08em 0;
}

strong {
    color: var(--strong-ink);
}

a {
    color: var(--blue);
    font-weight: 560;
    text-decoration: none;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration: underline;
}

/* Header: the site logo. */

.site-header {
    margin: 0 0 26px 0;
}

.site-logo {
    display: block;
    width: 230px;
    height: auto;
}

/* Title block. */

h1 {
    margin: 0;
    font-family: "Alegreya", serif;
    color: var(--heading-ink);
    font-size: 2.85rem;
    font-weight: 700;
    line-height: 1.02;
}

.article-dek {
    max-width: 39rem;
    margin: 10px 0 22px 0;
    color: var(--muted-ink);
    font-size: 1.05rem;
    line-height: 1.48;
}

.article-dek p {
    margin: 0;
}

/* The contents: the numbered sections, then the appendices in one entry, which opens to
   list them. */
.contents {
    box-sizing: border-box;
    margin: 24px 0 26px 0;
    padding: 16px 18px 16px 20px;
    border-top: solid 1px var(--rule);
    border-bottom: solid 1px var(--rule);
    background: linear-gradient(90deg, var(--green-wash) 0%, var(--paper-bg) 70%);
    font-size: 0.98rem;
}

.contents::before {
    content: "Contents";
    display: block;
    margin: 0 0 8px 0;
    color: var(--green-dark);
    font-size: 0.78rem;
    font-weight: 620;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contents ol {
    margin: 0;
    padding-left: 24px;
}

.contents li {
    margin: 2px 0;
    padding-left: 2px;
}

/* Rows that open: the appendices, the definitions, and the lemmas. Each has a chevron
   in front that points right, and down when the row is open. */
.short-list summary,
.contents-follow summary {
    position: relative;
    display: block;
    margin: 2px 0;
    padding-left: 26px;
    color: var(--strong-ink);
    font-weight: 560;
    cursor: pointer;
    list-style: none;
}

.short-list summary::-webkit-details-marker,
.contents-follow summary::-webkit-details-marker {
    display: none;
}

.short-list summary::before,
.contents-follow summary::before,
.contents-follow-toggle::after {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 11px;
    width: 0.34em;
    height: 0.34em;
    border-right: solid 1.6px var(--muted-ink);
    border-bottom: solid 1.6px var(--muted-ink);
    transform: rotate(-45deg);
    transition: transform 0.15s;
}

details[open] > summary::before {
    transform: rotate(45deg);
}

/* Right under the contents, in the same box: the appendices, the definitions, and the
   lemmas, each a row that opens to a list of them, by number (or letter) and a short
   label. */
.short-lists {
    box-sizing: border-box;
    margin: -26px 0 26px 0;
    padding: 10px 18px 12px 20px;
    border-bottom: solid 1px var(--rule);
    background: linear-gradient(90deg, var(--green-wash) 0%, var(--paper-bg) 70%);
    font-size: 0.98rem;
}

.short-list ul {
    margin: 0;
    padding-left: 28px;
    list-style: none;
    font-size: 0.92rem;
}

/* Long ones wrap under their own text, clear of the number. */
.short-list li {
    margin: 2px 0;
    padding-left: 24px;
    text-indent: -24px;
}

.list-number {
    display: inline-block;
    width: 20px;
    text-indent: 0;
    color: var(--muted-ink);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* The contents, following the reader. tools/contents.js adds them, and shows them once
   the contents at the top have scrolled away: in the margin, on a screen wide enough,
   or else in a bar across the top, which names the section being read ("Introduction"
   before the first) and opens to the rest. Either way, the section being read is marked, in blue. */
.contents-follow {
    position: fixed;
    z-index: 20;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.contents-follow.shown {
    visibility: visible;
    opacity: 1;
}

.contents-follow ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contents-follow li {
    margin: 0;
}

.contents-follow a {
    display: grid;
    grid-template-columns: 1.7em 1fr;
    padding: 3px 8px 3px 10px;
    border-left: solid 3px transparent;
    color: var(--muted-ink);
    font-weight: 500;
    line-height: 1.35;
}

.contents-follow a:hover {
    color: var(--blue);
    text-decoration: none;
}

.contents-follow a[aria-current] {
    border-left-color: var(--blue);
    color: var(--blue);
    font-weight: 600;
}

.contents-follow-number {
    font-variant-numeric: tabular-nums;
}

.contents-follow summary {
    margin: 3px 0;
    padding-left: calc(13px + 1.7em);
    color: var(--muted-ink);
    font-weight: 500;
}

.contents-follow summary::before {
    left: 15px;
}

.contents-follow details a {
    padding-left: calc(10px + 1.7em);
}

/* In the margin, beside the paper, which is 900px wide and centered. */
@media (min-width: 1440px) {
    .contents-follow {
        top: 28px;
        left: calc(50% - 450px - 244px);
        width: 216px;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        box-shadow: inset 1px 0 var(--rule-strong);
        font-size: 0.84rem;
    }
    .contents-follow-toggle {
        display: none;
    }
    .contents-follow-panel::before {
        content: "Contents";
        display: block;
        padding: 0 0 6px 13px;
        color: var(--green-dark);
        font-size: 0.72rem;
        font-weight: 620;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
}

/* In a bar across the top of the paper. */
@media (max-width: 1439px) {
    html {
        scroll-padding-top: 52px;
    }
    .contents-follow {
        top: 0;
        left: 0;
        right: 0;
        max-width: 900px;
        margin: 0 auto;
        border: solid 1px var(--paper-edge);
        border-top: none;
        background-color: var(--paper-bg);
        box-shadow: 0 6px 18px var(--shadow);
        font-size: 0.92rem;
        transform: translateY(-100%);
    }
    .contents-follow.shown {
        transform: none;
    }
    .contents-follow-toggle {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 14px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 64px 10px 44px;
        border: none;
        background: none;
        color: var(--strong-ink);
        font: inherit;
        font-weight: 560;
        text-align: left;
        cursor: pointer;
    }
    .contents-follow-current {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .contents-follow-toggle::after {
        top: 50%;
        right: 46px;
        left: auto;
        margin-top: -0.3em;
        transform: rotate(45deg);
    }
    .contents-follow.open .contents-follow-toggle::after {
        margin-top: -0.1em;
        transform: rotate(-135deg);
    }
    .contents-follow-panel {
        display: none;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 8px 44px 14px 41px;
        border-top: solid 1px var(--rule);
    }
    .contents-follow.open .contents-follow-panel {
        display: block;
    }
}

@media (max-width: 850px) {
    .contents-follow {
        border-left: none;
        border-right: none;
    }
    .contents-follow-toggle {
        padding-left: 20px;
        padding-right: 40px;
    }
    .contents-follow-toggle::after {
        right: 22px;
    }
    .contents-follow-panel {
        padding-left: 17px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .contents-follow-toggle {
        padding-left: 12px;
        padding-right: 32px;
    }
    .contents-follow-toggle::after {
        right: 14px;
    }
    .contents-follow-panel {
        padding-left: 9px;
        padding-right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contents-follow,
    .contents-follow *,
    .contents-follow *::before,
    .contents-follow *::after,
    summary::before {
        transition: none;
    }
}

@media print {
    .contents-follow {
        display: none;
    }
}

h2 {
    clear: both;
    margin: 46px 0 18px 0;
    padding-top: 26px;
    border-top: solid 1px var(--rule);
    color: var(--blue);
    font-size: 1.55rem;
    font-weight: 620;
    line-height: 1.2;
}

h3 {
    margin: 34px 0 14px 0;
    color: var(--heading-ink);
    font-size: 1.14rem;
    font-weight: 620;
    line-height: 1.28;
}

/* Headings, and the labels of figures and statements, link to themselves. */
h2 a,
h3 a,
.figure-label a,
.statement-title a {
    color: inherit;
    font-weight: inherit;
}
ul,
ol {
    margin: 0 0 1.08em 0;
    padding-left: 1.4em;
}

li {
    margin: 4px 0;
}

/* Figures. */

figure {
    margin: 30px 0 34px 0;
    text-align: center;
    page-break-inside: avoid;
}

figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

figcaption {
    max-width: 40rem;
    margin: 14px auto 0 auto;
    color: var(--muted-ink);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.42;
    text-align: left;
}

.figure-label {
    color: var(--heading-ink);
    font-weight: 620;
}

/* Animated figures are inline SVGs or videos. tools/animation.js holds them still and
   adds a scrubber, which is always there. */
.animation {
    position: relative;
    margin: 0 auto 50px auto; /* room for the scrubber, which hangs below the figure */
}

.animation > svg,
.animation > video {
    display: block;
    width: 100%;
    height: 100%;
}

/* Videos can't be transparent, so tools/figures.py flattens their frames onto white,
   and multiplying them onto the paper turns that white into the paper's color. */
.animation > video {
    mix-blend-mode: multiply;
}

/* The scrubber sits just under the figure, so it never covers the drawing. */
.animation-controls {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: min(420px, 100%);
    transform: translateX(-50%);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border: solid 1px var(--rule-strong);
    border-radius: 999px;
    background: rgba(255, 254, 250, 0.92);
}

/* The scrubber: a track that fills in blue up to a big round handle, which turns
   orange under the mouse, while it's dragged, and with keyboard focus. animation.js
   keeps --fill where the handle is. */
.animation-controls input {
    flex: 1;
    min-width: 0;
    height: 24px;
    margin: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.animation-controls input:focus-visible {
    outline: none;
}

.animation-controls:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.animation-controls input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cycle-blue) var(--fill, 100%),
        var(--rule-strong) var(--fill, 100%));
}

.animation-controls input::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--rule-strong);
}

.animation-controls input::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--cycle-blue);
}

.animation-controls input::-webkit-slider-thumb {
    margin-top: -8px; /* centered on the track */
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--paper-bg);
    border-radius: 50%;
    background: var(--cycle-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s, transform 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.animation-controls input::-moz-range-thumb {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 2px solid var(--paper-bg);
    border-radius: 50%;
    background: var(--cycle-blue);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s, transform 0.15s;
}

.animation-controls input:hover::-webkit-slider-thumb,
.animation-controls input:active::-webkit-slider-thumb,
.animation-controls input:focus-visible::-webkit-slider-thumb {
    background: var(--cycle);
    transform: scale(1.15);
}

.animation-controls input:hover::-moz-range-thumb,
.animation-controls input:active::-moz-range-thumb,
.animation-controls input:focus-visible::-moz-range-thumb {
    background: var(--cycle);
    transform: scale(1.15);
}

/* Static inline figures, like the flow chart of the proof, are inline so that their
   links work. The chart's blocks light up under the mouse, or with keyboard focus. */
.diagram {
    margin: 0 auto;
}

.diagram > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.plan-link,
.plan-link:hover {
    cursor: pointer;
    outline: none; /* the block lights up instead */
    text-decoration: none;
}

.plan-link .plan-box {
    transition: fill 0.15s, stroke 0.15s, filter 0.15s;
}

.plan-link:hover .plan-box,
.plan-link:focus-visible .plan-box {
    fill: var(--title-wash);
    stroke: var(--green);
    filter: drop-shadow(0 0 5px rgba(74, 127, 61, 0.45));
}

.plan-link .plan-label {
    transition: fill 0.15s;
}

.plan-link:hover .plan-label,
.plan-link:focus-visible .plan-label {
    fill: var(--green-dark);
}

figure.hero {
    float: right;
    width: 300px;
    margin: 4px 0 16px 34px;
}

figure.hero figcaption {
    margin-top: 8px;
}

/* Statement boxes for theorems and conjectures. */

.statement {
    clear: both; /* span the full column, even below a floated hero figure */
    margin: 28px 0 32px 0;
    overflow: hidden;
    border: solid 1px var(--rule-strong);
    border-left: solid 6px var(--green);
    border-radius: 6px;
    background: var(--green-wash);
    box-shadow: 0 8px 24px var(--shadow);
}

.statement-title {
    padding: 11px 20px 10px 20px;
    border-bottom: solid 1px var(--rule-strong);
    background: linear-gradient(90deg, var(--title-wash) 0%, var(--green-wash) 100%);
    color: var(--green-dark);
    font-weight: 640;
}

.statement-body {
    padding: 16px 20px 18px 20px;
    font-weight: 450;
}

.statement-body p:last-child {
    margin-bottom: 0;
}

.aside p {
    margin: 22px 0 24px 0;
    padding: 12px 16px;
    border: solid 1px var(--rule-strong);
    border-left: solid 5px var(--green);
    border-radius: 0 6px 6px 0;
    background: var(--green-wash);
    color: var(--muted-ink);
    font-size: 0.97rem;
}

/* Pseudocode: a fenced code block in the markdown, and names from it in the prose. */

pre {
    margin: 22px 0 24px 0;
    padding: 14px 18px;
    overflow-x: auto;
    border: solid 1px var(--rule-strong);
    border-radius: 6px;
    background: var(--green-wash);
    line-height: 1.5;
}

code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.84em;
    color: var(--strong-ink);
}

/* MathJax output (SVG rendered at build time). */

mjx-container[jax="SVG"] {
    direction: ltr;
    white-space: nowrap;
}

mjx-container[jax="SVG"] > svg {
    overflow: visible;
    min-height: 1px;
    min-width: 1px;
}

mjx-container[jax="SVG"] use {
    stroke-width: 3;
}

mjx-container[display] {
    display: block;
    margin: 0.7em 0;
    padding: 0.3em 2px;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}

@media (max-width: 850px) {
    body {
        font-size: 16px;
        line-height: 1.56;
    }
    main {
        max-width: 100%;
        padding: 18px 20px 28px 20px;
        border: none;
        box-shadow: none;
    }
    .site-logo {
        width: 200px;
    }
    h1 {
        font-size: 2.42rem;
        line-height: 1.04;
    }
    figure.hero {
        float: none;
        width: min(100%, 300px);
        margin: 18px auto 24px auto;
    }
}

@media (max-width: 480px) {
    main {
        padding: 14px 12px 24px 12px;
    }
    .site-logo {
        width: 170px;
    }
    h1 {
        font-size: 2.1rem;
    }
    h2 {
        margin-top: 40px;
        padding-top: 22px;
        font-size: 1.42rem;
    }
    .statement-title,
    .statement-body,
    pre {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media print {
    main {
        box-shadow: none;
        border: none;
    }
}

/* sphere-triangulations.html: the table of methods, the projection chart's tooltip
   (tools/sphere-explorer.js adds it), the explorer, and the references. */

.table {
    margin: 26px 0 32px 0;
    overflow-x: auto;
}

.table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.table th,
.table td {
    padding: 5px 8px;
    border-bottom: solid 1px var(--rule);
    white-space: nowrap;
}

.table thead th {
    border-bottom: solid 1px var(--rule-strong);
    color: var(--strong-ink);
    font-weight: 640;
}

.table tbody td:first-child {
    color: var(--strong-ink);
    font-weight: 560;
}

.table > p {
    max-width: 40rem;
    margin: 12px auto 0 auto;
    color: var(--muted-ink);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.42;
}

.chart {
    position: relative;
}

.chart-tip {
    position: absolute;
    width: 200px;
    padding: 6px 10px;
    border: solid 1px var(--rule-strong);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 4px 14px var(--shadow);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    pointer-events: none;
}

.chart-key {
    display: inline-block;
    width: 12px;
    height: 3px;
    margin: 0 6px 3px 0;
    border-radius: 2px;
    vertical-align: middle;
}

.explorer {
    margin: 22px 0 10px 0;
    padding: 12px 14px 10px 14px;
    border: solid 1px var(--rule-strong);
    border-radius: 8px;
    background: #ffffff;
}

.explorer .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-bottom: 8px;
    font-size: 0.84rem;
}

.explorer label {
    white-space: nowrap;
}

.explorer select,
.explorer button {
    font: inherit;
}

.explorer button {
    padding: 2px 10px;
}

.explorer input[type="range"] {
    width: 130px;
    vertical-align: middle;
}

.explorer .out {
    display: inline-block;
    min-width: 9em;
    color: var(--muted-ink);
}

.explorer .disabled {
    opacity: 0.45;
}

.explorer svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.explorer svg:active {
    cursor: grabbing;
}

.explorer .vhit {
    cursor: pointer;
}

.explorer .status {
    min-height: 2.8em;
    margin-top: 6px;
    color: var(--muted-ink);
    font-size: 0.8rem;
}

#references ~ ul {
    font-size: 0.9rem;
}

#references ~ ul li {
    margin-bottom: 0.5em;
}

.why {
    color: var(--muted-ink);
}