/* The page ground. The harvested stylesheet sets #F4F4F4, which is
   lighter than the library's own white paper (N.93 renders near #EAECEB), so a
   sheet of it looked grey. The ground sits about 8 L* below the paper, which is
   what puts the paper back at the top of the scale where the eye expects it
   (operator 2026-09-07). */
body{background:#D4D4D4}

/* Components for the pages we write, in the site's own design
   language: IBM Plex Sans, #006CFF for accent, #42454A for the slate the house
   table already uses, #F4F4F4 for the page ground. Nothing here invents a
   second palette — it extends the one tinymce.css established, so a new page
   sits beside an old one without looking imported.

   Kept out of the page files because these rules repeat on every page, and a
   stylesheet is not content. A one-off — a table whose columns want setting by
   eye — belongs in the page itself. */

/* ------------------------------------------------ powered by --- */
.cs-powered{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:#666;text-decoration:none;white-space:nowrap}
/* #content in the selector: the house rule "#content img {max-width:100%;
   height:auto}" outranks a class and squeezed the logo out of the box */
/* the wordmark about as tall as the panel's own words (16 px): 28 px was
   huge on the Mac and on the PC alike - CSS px do not depend on Retina */
/* baseline-aligned: an image's baseline is its bottom edge, and the
   wordmark's letters stand on the bottom of its viewBox, so "Powered by"
   sits on the same line as ChromaChecker */
#content .cs-powered img,.cs-powered img{height:16px;width:auto;max-width:none;flex:none;display:block}
.cs-powered:hover{color:#006CFF}
.cs-powered-row{display:flex;justify-content:flex-end;margin-top:8px}

/* -------------------------------------------------- name language --- */
.menu li.cs-lang .cs-lang-cur::after{content:" ▾";font-size:11px;color:#999}
.menu li.cs-lang .submenu-content a.on{font-weight:600;color:#006CFF}
@media screen and (min-width:769px){
  .menu li.cs-lang .submenu-content{min-width:140px}
  .menu li.cs-lang.open .submenu-content{display:block}}

/* The library's picker column: the picker plus the Substrate adaptation
   switch under it (site_engine.py). Takes over the picker's own float. */
#cs_picker_col{float:left;width:480px}
@media (max-width:700px){#cs_picker_col{float:none;width:100%}}

/* --------------------------------------------------------------- prose --- */
.cs-lede{font-size:19px;line-height:1.55;max-width:34em;color:#000;margin-bottom:18px}
.cs-pull{font-size:19px;line-height:1.45;font-weight:600;color:#000;
  border-left:3px solid #006CFF;padding:4px 0 4px 18px;margin:26px 0;max-width:32em}
.cs-note{background:#EFEFEF;border-left:3px solid #42454A;padding:14px 18px;
  margin:24px 0;font-size:15px;line-height:1.55;color:#42454A;max-width:40em}
.cs-note b,.cs-note strong{color:#000}
.cs-note--accent{border-left-color:#006CFF}
.cs-note p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- figures --- */
.cs-fig{margin:30px 0 6px;overflow-x:auto;background:#fff;padding:14px 0}
.cs-fig svg{display:block;min-width:640px;max-width:100%;height:auto;margin:0 auto}
.cs-fig svg.fig-narrow{display:none}
.cs-cap{font-size:13px;line-height:1.5;color:#999;max-width:40em;margin:0 0 28px}
.cs-figimg{margin:22px 0 8px;text-align:center}
.cs-figimg img{max-width:100%;height:auto;display:inline-block;vertical-align:top}
.cs-figimg--pair img{width:46%;max-width:350px;margin:0 1.5%}
.cs-figimg .cs-cap{text-align:left;margin:10px auto 22px}
.cs-strips{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cs-strip{display:flex;flex-direction:column;align-items:center;font-size:13px;color:#555}
.cs-strips .cs-cap{flex-basis:100%}
.cs-shot{box-shadow:0 4px 8px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.19);border-radius:10px}

/* --------------------------------------------------------------- tables --- */
/* The house table is .basic_table: slate header, white cells, hairline rules.
   .cs-tbl is the same family sized for data — six columns of figures do not
   fit under a 20px header. */
.cs-wrap{overflow-x:auto;margin:20px 0 6px}
/* Width follows the content. A two-column table forced to 100% puts its label
   at one edge of the screen and its number at the other, which is unreadable —
   the eye has nothing to track across. So: shrink to fit, with a floor under
   the label column so it does not go ragged, and a wide modifier for the rare
   table that really wants the full measure. */
table.cs-tbl{border-collapse:collapse;text-align:left;font-size:14px;
  width:auto;max-width:100%;background:#fff}
table.cs-tbl th:first-child,table.cs-tbl td:first-child{min-width:13em}
table.cs-tbl th:not(:first-child),table.cs-tbl td:not(:first-child){min-width:5.5em}
table.cs-tbl.cs-tbl--wide{width:100%}
table.cs-tbl thead th{background:#42454A;color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;padding:9px 14px;white-space:nowrap;
  vertical-align:bottom}
table.cs-tbl td{padding:10px 14px;border-bottom:1px solid #D9DADA;vertical-align:top;
  color:#42454A}
table.cs-tbl tbody tr:last-child td{border-bottom:1px solid #42454A}
table.cs-tbl td:first-child{color:#000}
table.cs-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.cs-tbl thead th.n{text-align:right}
table.cs-tbl .lead{font-weight:600;color:#000}
table.cs-tbl tbody tr:hover td{background:#F4F4F4}

/* --------------------------------------------------------------- colour --- */
/* A swatch with its code — this is a colour library, so it recurs. */
.cs-swatches{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.cs-swatch{width:132px;background:#fff;border:1px solid #D9DADA}
.cs-swatch i{display:block;height:56px}
.cs-swatch b{display:block;font-size:13px;font-weight:600;color:#000;
  padding:8px 10px 0;font-style:normal}
.cs-swatch span{display:block;font-size:12px;color:#999;padding:1px 10px 9px;
  font-variant-numeric:tabular-nums}

/* A proportion, inline in a table cell. */
.cs-bar{height:10px;background:#eee;position:relative;min-width:110px;display:block}
.cs-bar i{position:absolute;left:0;top:0;bottom:0;background:#006CFF}

/* A row of headline figures. */
.cs-keys{display:flex;flex-wrap:wrap;gap:26px;margin:22px 0}
.cs-key b{display:block;font-size:28px;font-weight:600;color:#000;line-height:1.1;
  font-variant-numeric:tabular-nums;font-style:normal}
.cs-key span{display:block;font-size:13px;color:#999;margin-top:2px}
.cs-sub{font-weight:400;font-size:11px;color:#999}
.pie-n{font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:600;fill:#fff}
.si-top{font-family:"IBM Plex Sans",sans-serif;font-size:12px;font-weight:600;fill:#767a80;letter-spacing:.07em}
.cs-more{margin:40px 0 0;padding:18px 0 0;border-top:1px solid #e2e2e2}
.cs-more h2{font-size:13px;font-weight:600;color:#999;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.cs-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 28px}
.cs-more li{margin:0}
.cs-more a{font-weight:600}
.cs-more span{display:block;font-size:13px;color:#767a80;margin-top:2px;line-height:1.45}

/* ------------------------------------------------------------- diagrams --- */
.dg-h{font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:600;fill:#000}
.dg-s{font-family:"IBM Plex Sans",sans-serif;font-size:11.5px;fill:#767a80}
.dg-lbl{font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;fill:#999;letter-spacing:.06em}
.dg-lbl-a{font-family:"IBM Plex Sans",sans-serif;font-size:10.5px;fill:#006CFF;letter-spacing:.06em}
.dg-give{font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:600;fill:#42454A}
.dg-give-a{font-family:"IBM Plex Sans",sans-serif;font-size:13px;font-weight:600;fill:#006CFF}
.dg-foot{font-family:"IBM Plex Sans",sans-serif;font-size:12px;fill:#006CFF}
.dg-band-a{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600;
  fill:#fff;letter-spacing:.07em}
.dg-band-b{font-family:"IBM Plex Sans",sans-serif;font-size:11px;font-weight:600;
  fill:#767a80;letter-spacing:.07em}

@media (max-width:700px){
  .cs-fig svg{min-width:560px}
  .cs-fig svg.fig-wide{display:none}
  .cs-fig svg.fig-narrow{display:block;min-width:0;width:100%}
  .cs-lede,.cs-pull{font-size:17px}
  .cs-key b{font-size:24px}
}