/* About page (Mapas de Karnaugh): reading column and its interactive pieces.
   Colors come from the MudBlazor palette, so light and dark themes both work. */

/* Prose is justified; the interactive pieces are centered */
.learn-page .mud-typography-body1 {
    text-align: justify;
    line-height: 1.7;
}

.learn-page h1, .learn-page h2, .learn-page h3, .learn-page h4, .learn-page h5, .learn-page h6 {
    text-wrap: balance;
}

/* "# Heading" sections (same as AlienNerdDev) */
.learn-page .section-heading {
    scroll-margin-top: 80px;
    margin-top: 1.5rem;
}

.section-anchor {
    margin-right: 4px;
}

.learn-mono, .learn-bit {
    font-family: 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Reader's questions: small headings that open the answer below */
/* .learn-page in front: MudBlazor's stylesheet loads later and its typography rules would
   otherwise reset these margins */
.learn-page .learn-question {
    margin: 1.75rem 0 .5rem;
    font-style: italic;
    text-wrap: balance;
}

/* Emphasis inside an italic question is set upright, the usual typographic convention */
.learn-page .learn-question em {
    font-style: normal;
}

/* Prism blocks keep the theme's look; only the spacing is ours */
.learn-page pre[class*="language-"] {
    margin: 0;
    border-radius: 6px;
    font-size: .9rem;
}

/* Center every interactive piece and its controls */
.learn-demo {
    text-align: center;
}

/* Bits */
.learn-bit {
    display: inline-block;
    min-width: 1.1em;
    text-align: center;
    border-radius: 3px;
}

.learn-bit-one {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    font-weight: 700;
}

.learn-bit-changed {
    box-shadow: inset 0 0 0 2px var(--mud-palette-warning);
}

.learn-muted {
    color: var(--mud-palette-text-secondary);
}

.learn-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.learn-good {
    color: var(--mud-palette-success);
}

.learn-bad {
    color: var(--mud-palette-error);
    font-weight: 700;
}

.learn-gray-table {
    max-width: 34rem;
    margin: 0 auto;
}

.learn-gray-table th, .learn-gray-table td {
    text-align: center;
}

/* Last row: the wrap from 15 back to 0 */
.learn-gray-table .learn-wrap-row td {
    border-top: 2px dashed var(--mud-palette-lines-default);
}

/* Shared SVG styles */
.learn-svg-text {
    fill: var(--mud-palette-text-primary);
    font-family: 'Roboto Mono', Consolas, monospace;
    font-size: 14px;
}

.learn-svg-strong {
    fill: var(--mud-palette-primary);
    font-weight: 700;
}

.learn-svg-muted {
    fill: var(--mud-palette-text-secondary);
    font-family: 'Roboto Mono', Consolas, monospace;
}

.learn-track-on {
    fill: var(--mud-palette-text-primary);
}

.learn-track-line {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

/* Encoder */
.learn-encoder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.learn-encoder-svg {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.learn-reading-line {
    stroke: var(--mud-palette-warning);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
}

.learn-sensor {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-warning);
    stroke-width: 2;
}

.learn-sensor.on {
    fill: var(--mud-palette-warning);
}

.learn-history {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    min-height: 1.6rem;
    margin-top: .5rem;
    font-family: 'Roboto Mono', Consolas, monospace;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.learn-history-item {
    padding: 0 .35rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

.learn-slider {
    flex: 0 1 22rem;
    min-width: 12rem;
}

/* 4-variable map that fills itself */
.learn-map-fill {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
}

.learn-map-side {
    flex: 0 1 18rem;
    text-align: left;
}

/* The solver's map with a transparent highlight layer on top */
.learn-map-stack {
    position: relative;
    flex: 0 0 auto;
}

.learn-map-stack > svg {
    display: block;
}

.learn-map-highlights {
    position: absolute;
    left: 0;
    top: 0;
}

.learn-hl {
    fill: transparent;
    cursor: pointer;
    transition: fill .2s;
}

/* The solver's cells are light in both themes, so the tints are fixed-strength overlays */
.learn-hl.current {
    fill: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.learn-hl.selected {
    fill: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
}

.learn-hl.neighbor {
    fill: color-mix(in srgb, var(--mud-palette-info) 32%, transparent);
}

/* Map with a variable number of inputs (reuses the solver's map) */
/* The solver's zoom container fills a fixed-height pane; here it takes the height of the map
   instead (the zoom fits the width), and the map is centered when it is narrower */
.learn-map-box {
    height: auto;
}

/* The fit zoom uses the container's outer width, border included: with a 1px border the map
   came out 2px wider than the room inside and a tiny horizontal scrollbar showed up. An
   outline looks the same but takes no space. */
.learn-page .learn-map-box .svg-zoom-container {
    height: auto;
    min-height: 0;
    border: 0;
    outline: 1px solid var(--mud-palette-table-lines);
    outline-offset: -1px;
}

.learn-page .learn-map-box .svg-scroll-container {
    height: auto !important;
}

.learn-page .learn-map-box .svg-sizer {
    margin: 0 auto;
}

/* Torus */
.learn-torus-canvas {
    display: block;
    width: 100%;
    height: 340px;
    touch-action: none;
    cursor: grab;
}

.learn-torus-canvas:active {
    cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
    .learn-hl {
        transition: none;
    }
}

/* Grouping examples: the solver's map, scaled down, side by side and centered */
.learn-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* The width comes from the size of its map (GroupExample sets it) */
.learn-example {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
}

.learn-example-map {
    overflow: hidden;
    pointer-events: none; /* examples are not editable: no hover or click on the cells */
}

.learn-example-scale {
    position: relative;
    transform-origin: top left;
}

.learn-example-scale > svg {
    display: block;
}

.learn-example-overlay {
    position: absolute;
    left: 0;
    top: 0;
}

/* Wrong groups: dashed, dark on the solver's light cells */
.learn-group-bad {
    fill: rgba(0, 0, 0, 0.08);
    stroke: #333;
    stroke-width: 2.5;
    stroke-dasharray: 7 5;
    stroke-linejoin: round;
}

.learn-example-term {
    min-height: 1.6rem;
}

/* ── Guide layout (LearnLayout), same as the Google Foobar section of AlienNerdDev ── */

/* Button that reopens the index drawer */
.fab-toggle {
    position: fixed;
    top: 5rem;
    left: 1rem;
    z-index: 1300;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    animation: learn-fade-in 0.5s ease-in-out;
}

@keyframes learn-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Sections of a page in the index: indented, smaller (the class may land on the item or the link) */
.learn-navmenu .learn-nav-sub .mud-nav-link,
.learn-navmenu .mud-nav-link.learn-nav-sub {
    padding-left: 3.25rem;
    font-size: .875rem;
}

/* Previous / next page */
.learn-pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Parts of the guide, on the introduction */
.learn-parts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.learn-part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
    .fab-toggle {
        animation: none;
    }
}

/* ── Maps of 5 or more variables ── */



.learn-iso-link {
    stroke: var(--mud-palette-primary);
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    fill: none;
}

.learn-iso-link.bad {
    stroke: var(--mud-palette-error);
}

.learn-iso-link.wrap {
    stroke-width: 2;
}

.learn-iso-dot {
    fill: var(--mud-palette-primary);
}

.learn-iso-dot.bad {
    fill: var(--mud-palette-error);
}

.learn-stack-layer,
.learn-mirror-head {
    fill: var(--mud-palette-text-primary);
    font-family: 'Roboto Mono', Consolas, monospace;
    font-size: 13px;
}

.learn-stack-layer.strong,
.learn-mirror-head {
    fill: var(--mud-palette-primary);
    font-weight: 700;
}

.learn-stack-svg {
    display: block;
    width: 100%;
    max-width: 580px;
    pointer-events: none; /* the solver's cells are not editable here */
    margin: .75rem auto 0;
}

.learn-mirror-svg {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    pointer-events: none; /* the solver's cells are not editable here */
}

.learn-stack-presets {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

.learn-stack-preset-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.learn-stack-preset-label {
    min-width: 6.5rem;
}

/* Columns with the same BC share a tint in the mirror animation (a layer over the solver's cells) */
.learn-bc.bc-0 { fill: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent); }
.learn-bc.bc-1 { fill: color-mix(in srgb, var(--mud-palette-success) 22%, transparent); }
.learn-bc.bc-2 { fill: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent); }
.learn-bc.bc-3 { fill: color-mix(in srgb, var(--mud-palette-info) 22%, transparent); }

.learn-mirror-axis {
    stroke: var(--mud-palette-error);
    stroke-width: 3;
    stroke-dasharray: 8 5;
}

/* Neighbours in the full map: next to it, across the border, by mirror */
.learn-hl.side { fill: color-mix(in srgb, var(--mud-palette-info) 35%, transparent); }
.learn-hl.border { fill: color-mix(in srgb, var(--mud-palette-success) 35%, transparent); }
.learn-hl.mirror { fill: color-mix(in srgb, var(--mud-palette-secondary) 40%, transparent); }

.learn-legend,
.learn-neighbor {
    padding: 0 .4rem;
    border-radius: 4px;
    white-space: nowrap;
}

.learn-legend.side, .learn-neighbor.side { background: color-mix(in srgb, var(--mud-palette-info) 22%, transparent); }
.learn-legend.border, .learn-neighbor.border { background: color-mix(in srgb, var(--mud-palette-success) 22%, transparent); }
.learn-legend.mirror, .learn-neighbor.mirror { background: color-mix(in srgb, var(--mud-palette-secondary) 25%, transparent); }

.learn-neighbor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .5rem;
    font-family: 'Roboto Mono', Consolas, monospace;
    font-size: .875rem;
}

/* Numbered rules inside the prose */
.learn-page .learn-rules {
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: justify;
    line-height: 1.7;
}

/* ── Mahoney maps ── */
.learn-build-layer {
    pointer-events: none;
}

.learn-build-new {
    fill: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* The order 0, 1, 2, 3... of the cells: the Z's */
.learn-build-path {
    fill: none;
    stroke: var(--mud-palette-warning);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: .85;
}

.learn-build-arrow {
    fill: var(--mud-palette-warning);
}

/* Order of each 2 × 2 block, boxed in its middle (as in Bonal's figure) */
.learn-build-badge {
    fill: #fff;
    stroke: #333;
    stroke-width: 1.5;
}

.learn-build-badge-text {
    fill: #333;
    font-weight: 700;
    font-size: 14px;
    font-family: 'Roboto Mono', Consolas, monospace;
}

/* Numbered citations and reference list */
.learn-cite {
    font-size: .7em;
    line-height: 0;
    margin-left: 1px;
}

.learn-page .learn-references {
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .875rem;
    line-height: 1.6;
}

/* License notices, verbatim */
.learn-page .learn-license {
    margin: 0;
    padding: .75rem 1rem;
    overflow-x: auto;
    font-family: 'Roboto Mono', Consolas, monospace;
    font-size: .8rem;
    line-height: 1.5;
    white-space: pre;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
}