/* Color-scheme reference page. Same chrome as b1ack0p.github.io. */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
}

/* Dashed side frame with header/footer dividers. */
.frame {
    margin: 0.5rem;
    min-height: calc(100vh - 1rem);
    display: flex;
    flex-direction: column;
    border-left: 1px dashed;
    border-right: 1px dashed;
}

header {
    border-bottom: 1px dashed;
}

footer {
    border-top: 1px dashed;
    font-style: italic;
}

main {
    flex: 1 0 auto;
    min-width: 0;
}

.wrap {
    padding: 1rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    margin-right: 0.75rem;
}

.badge {
    vertical-align: middle;
    margin: 0.25rem 0.5rem 0.25rem 0;
}

/* Scheme heading. */
h4 {
    margin: 0 0 0.35rem;
}

/* Intro paragraph under the page title. */
p.intro {
    margin: 0 0 1.5rem;
}

/* Repository link under the page title. */
p.repo-link {
    margin: 0 0 1.5rem;
}

/* Font and cursor-color line under each heading. */
p.meta {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

code {
    font-family: monospace;
}

/* Color-scheme grids: msgcat-style foreground x background matrix per scheme. */
.grid {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1.6rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.4;
}
.grid table {
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
    margin: 0;
    table-layout: auto;
}
/* Seamless vertical colour bands: no borders, no gaps, no rounded boxes. */
.grid td {
    border: none;
    padding: 0 .5em;
    text-align: center;
    white-space: nowrap;
}
.grid td.gl { text-align: right; padding: 0 .55em 0 .15em; }
.grid tr.gh td { opacity: 0.6; }
/* Small or portrait screens: shrink the grid so it fits without scrolling. */
@media (max-width: 1200px), (orientation: portrait) {
    .grid { overflow-x: hidden; font-size: min(0.8rem, calc((100vw - 58px) / 30)); }
}

h5 {
    margin: 0 0 0.35rem;
    font-style: italic;
}

/* Colour hex chip (cursor / selection). */
.hex {
    padding: 0 0.35em;
    font-family: monospace;
}

/* CMYK Color Model: subtractive-mix diagram in pure CSS. Colour circles in an
   equilateral triangle; pairwise overlaps and the black centre are layered via
   nested circular clips. Geometry is in em, so font-size scales the figure. */
.cmyk-fig {
    position: relative;
    font-size: 125px;   /* 1em = 125px: the figure is 3em (375px) at full size */
    width: 3em;
    height: 3em;
    margin: 2rem 0 3.5rem;
}
.cmyk-fig span {
    position: absolute;
    width: 1.485em;
    height: 1.485em;
    border-radius: 50%;
}
.cmyk-clip {
    overflow: hidden;
}
/* base circles */
.cmyk-cyan {left: 1.12875em;top: 1.0791em;background: #00aeef;}
.cmyk-magenta {left: 0.38625em;top: 1.0791em;background: #ec008c;}
.cmyk-yellow {left: 0.7575em;top: 0.4359em;background: #fff200;}
/* pairwise overlaps: clip to the first circle, fill the child with the mix colour */
.cmyk-red {left: 0.7575em;top: 0.4359em;}                               /* clip: yellow  */
.cmyk-red > span {left: -0.37125em;top: 0.6432em;background: #ed1c24;}  /* child: magenta */
.cmyk-green {left: 0.7575em;top: 0.4359em;}                             /* clip: yellow  */
.cmyk-green > span {left: 0.37125em;top: 0.6432em;background: #00a651;} /* child: cyan    */
.cmyk-blue {left: 0.38625em;top: 1.0791em;}                             /* clip: magenta */
.cmyk-blue > span {left: 0.7425em;top: 0;background: #2e3192;}          /* child: cyan    */
/* triple overlap → black (yellow ∩ magenta ∩ cyan) via nested clips */
.cmyk-core {left: 0.7575em;top: 0.4359em;}                              /* clip: yellow  */
.cmyk-core > span {left: -0.37125em;top: 0.6432em;}                     /* clip: magenta */
.cmyk-core > span > span {left: 0.7425em;top: 0;background: #000;}      /* child: cyan    */

/* Small or portrait screens: shrink the figure's font-size so it zooms to fit. */
@media (max-width: 1200px), (orientation: portrait) {
    .cmyk-fig {
        font-size: min(125px, calc((100vw - 58px) / 3));
    }
}

/* Minecraft palette: each row is filled with its colour; values sit on the fill,
   split by grey gridlines (white text on dark rows, black on bright). */
.mc-palette-wrap {
    overflow-x: auto;
    margin: 2rem 0 3.5rem;
}

table.mc-palette {
    border-collapse: collapse;
    border: 1px solid #a3a9b1;
    font-family: monospace;
    font-size: 0.8rem;
}

table.mc-palette td {
    border: 1px solid #a3a9b1;
    padding: 0.3em 0.6em;
    text-align: center;
    white-space: nowrap;
}

/* Row fill + contrasting text colour. */
tr.mcp0 td {background: #000000;color: #fff;}
tr.mcp1 td {background: #0000aa;color: #fff;}
tr.mcp2 td {background: #00aa00;color: #fff;}
tr.mcp3 td {background: #00aaaa;color: #fff;}
tr.mcp4 td {background: #aa0000;color: #fff;}
tr.mcp5 td {background: #aa00aa;color: #fff;}
tr.mcp6 td {background: #ffaa00;color: #000;}
tr.mcp7 td {background: #aaaaaa;color: #000;}
tr.mcp8 td {background: #555555;color: #fff;}
tr.mcp9 td {background: #5555ff;color: #fff;}
tr.mcpa td {background: #55ff55;color: #000;}
tr.mcpb td {background: #55ffff;color: #000;}
tr.mcpc td {background: #ff5555;color: #000;}
tr.mcpd td {background: #ff55ff;color: #000;}
tr.mcpe td {background: #ffff55;color: #000;}
tr.mcpf td {background: #ffffff;color: #000;}

/* Small or portrait screens: scale the whole table down to fit, no reflow. */
@media (max-width: 1200px), (orientation: portrait) {
    .mc-palette-wrap {
        overflow-x: hidden;
    }
    table.mc-palette {
        font-size: min(0.8rem, calc((100vw - 58px) / 50));
    }
}

/* Phosphor demo: a table on a dark backdrop; scrolls if too narrow. */
div.phosphor {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    background: #282828;
    padding: 12.5px 25px;
    margin: 2rem 0 3.5rem;
}

table.phosphor {
    font-family: 'DejaVu Sans', Verdana, Geneva, sans-serif;
    font-size: 1.0625rem;
    margin: 0;
    border-collapse: collapse;
    border: none;
}

td.title,
td.content {
    border: none;
    padding: 5px 20px;
    text-align: right;
    white-space: nowrap;
}

td.rgb {
    border: none;
    padding: 5px 20px;
    text-align: left;
    white-space: nowrap;
}

tr.amber {color: #ffb000;}
tr.amberLt {color: #ffcc00;}
tr.green1 {color: #33ff00;}
tr.apple2 {color: #33ff33;}
tr.green2 {color: #00ff33;}
tr.apple2c {color: #66ff66;}
tr.green3 {color: #00ff66;}
tr.phosphorBackground {color: #aaa;}

/* Small or portrait screens: scale the demo box down to fit (no scroll), like the tables. */
@media (max-width: 1200px), (orientation: portrait) {
    div.phosphor {
        overflow-x: hidden;
        font-size: min(1.0625rem, calc((100vw - 56px) / 60));
        padding: 0.74em 1.47em;
    }
    table.phosphor {
        font-size: inherit;
    }
    td.title,
    td.content,
    td.rgb {
        padding: 0.29em 1.18em;
    }
}

/* Solarized diagrams: palette + symmetry (1em = 10px). */
.sol-pal{font-size:12.5px;width:47em;margin:2rem 0 3.5rem;font-family:'DejaVu Sans',Verdana,sans-serif;color:#657b83;line-height:1;position:relative}
.sol-pal .sol-row{display:flex;gap:1em}
.sol-pal .sol-hrow{display:flex;gap:1em;margin:0 0 1em}
.sol-pal .sol-hgrp{position:relative;text-align:center;padding-bottom:1.1em}
.sol-pal .w2{width:11em}
.sol-pal .w4{width:23em}
.sol-pal .w8{width:47em}
.sol-pal .sol-hgrp>span{font-size:1.1em;letter-spacing:.02em;white-space:nowrap}
.sol-pal .sol-brk{position:absolute;left:0;right:0;bottom:.5em;height:0;border-top:1px solid #93a1a1}
.sol-pal .sol-brk::after{content:"";position:absolute;left:50%;top:0;width:1px;height:.5em;background:#93a1a1}
.sol-pal .sw{width:5em;height:5em;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.85em}
.sol-pal .sw>span{font-size:1em;white-space:nowrap}
.sol-pal .t03,.sol-sym .t03{background:#002b36}
.sol-pal .t02,.sol-sym .t02{background:#073642}
.sol-pal .t01,.sol-sym .t01{background:#586e75}
.sol-pal .t00,.sol-sym .t00{background:#657b83}
.sol-pal .t0,.sol-sym .t0{background:#839496}
.sol-pal .t1,.sol-sym .t1{background:#93a1a1}
.sol-pal .t2,.sol-sym .t2{background:#eee8d5}
.sol-pal .t3,.sol-sym .t3{background:#fdf6e3}
.sol-pal .sw.dark>span{color:rgba(255,255,255,.35)}
.sol-pal .sw.lite>span{color:rgba(0,0,0,.3)}
.sol-pal .sol-vals{margin:.9em 0 0}
.sol-pal .sol-vals>div{width:5em;text-align:center}
.sol-pal .sol-vals>div>span{font-size:.82em}
.sol-pal .sol-lstar{text-align:center;font-size:.82em;margin:1.1em 0 0}
.sol-pal .sol-accent-hdr{margin:3.6em 0 .9em}
.sol-pal .sol-accents .sw>span{color:rgba(255,255,255,.5)}
.sol-pal .aY{background:#b58900}
.sol-pal .aO{background:#cb4b16}
.sol-pal .aR{background:#dc322f}
.sol-pal .aM{background:#d33682}
.sol-pal .aV{background:#6c71c4}
.sol-pal .aB{background:#268bd2}
.sol-pal .aC{background:#2aa198}
.sol-pal .aG{background:#859900}
.sol-pal .sol-harm{margin:1em 0 0}
.sol-pal .hcell{width:5em;display:flex;flex-direction:column;align-items:center;gap:1.1em}
.sol-pal .hcell>em{font-style:normal;font-size:.82em;white-space:nowrap}
.sol-pal .glyph{position:relative;width:1.5em;height:1.5em;border:1px solid #657b83;border-radius:50%}
.sol-pal .glyph>i{position:absolute;left:50%;bottom:50%;width:1px;height:.7em;background:#657b83;transform-origin:bottom center}
.sol-pal .a0{transform:translateX(-50%) rotate(0deg)}
.sol-pal .a30{transform:translateX(-50%) rotate(30deg)}
.sol-pal .a60{transform:translateX(-50%) rotate(60deg)}
.sol-pal .a90{transform:translateX(-50%) rotate(90deg)}
.sol-pal .a135{transform:translateX(-50%) rotate(135deg)}
.sol-pal .a180{transform:translateX(-50%) rotate(180deg)}
.sol-pal .a225{transform:translateX(-50%) rotate(225deg)}
.sol-pal .a270{transform:translateX(-50%) rotate(270deg)}
.sol-pal .a300{transform:translateX(-50%) rotate(300deg)}
.sol-pal .a330{transform:translateX(-50%) rotate(330deg)}
.sol-pal .mono{height:.4em;transform:translateX(-50%) rotate(180deg)}

.sol-sym{font-size:12.5px;position:relative;width:31.6em;height:26em;margin:2rem 0 3.5rem;color:#657b83;font-family:'DejaVu Sans',Verdana,sans-serif;line-height:1}
.sol-sym i.sq{position:absolute;width:1.5em;height:1.5em}
.sol-sym .ln{position:absolute;height:0;border-top:1px solid #839496}
.sol-sym .lbl{position:absolute;font-size:1em;white-space:nowrap}
.sol-sym .x1{left:.1em}
.sol-sym .x2{left:3.1em}
.sol-sym .x3{left:6.1em}
.sol-sym .x4{left:9.1em}
.sol-sym .x5{left:12.1em}
.sol-sym .x6{left:15.1em}
.sol-sym .x7{left:18.1em}
.sol-sym .x8{left:21.1em}
.sol-sym .yl{top:7.9em}
.sol-sym .ym{top:11.9em}
.sol-sym .yd{top:15.9em}
.sol-sym .sep1{top:10.6em;left:.2em;right:0}
.sol-sym .sep2{top:14.6em;left:.2em;right:0}
.sol-sym .b10at{top:0;left:6.1em;width:16.5em}
.sol-sym .b9at{top:2em;left:9.1em;width:13.5em}
.sol-sym .b6at{top:4em;left:15.1em;width:7.5em}
.sol-sym .bat{top:6em;left:18.1em;width:4.5em}
.sol-sym .bab{top:19.3em;left:.1em;width:4.5em}
.sol-sym .b6ab{top:21.3em;left:.1em;width:7.5em}
.sol-sym .b9ab{top:23.3em;left:.1em;width:13.5em}
.sol-sym .b10ab{top:25.3em;left:.1em;width:16.5em}
.sol-sym .l10at{top:.5em;right:9em}
.sol-sym .l9at{top:2.5em;right:9em}
.sol-sym .l6at{top:4.5em;right:9em}
.sol-sym .lat{top:6.5em;right:9em}
.sol-sym .lab{top:18em;left:.1em}
.sol-sym .l6ab{top:20em;left:.1em}
.sol-sym .l9ab{top:22em;left:.1em}
.sol-sym .l10ab{top:24em;left:.1em}
.sol-sym .llight{top:8em;left:25.1em}
.sol-sym .ldark{top:16em;left:25.1em}

@media (max-width: 1200px), (orientation: portrait) {
    .sol-pal {font-size: min(12.5px, calc((100vw - 58px) / 47));}
    .sol-sym {font-size: min(12.5px, calc((100vw - 58px) / 31.6));}
}