/* rddtz: ascii art frame, monochrome + blue, monospace. ASCII only.
   Blue only for: current nav item, link hover, code keywords,
   footnote marks. */

:root {
  color-scheme: dark;
  --bg: #0a0a0a;      /* page background */
  --fg: #d6d3cc;      /* text */
  --dim: #66645f;     /* metadata, borders, phrase */
  --blue: #7ea6c9;    /* see the header comment */
  --cursor: #efe6d2;  /* write head of the art (art.js) */
  --underline: #55534f;
  --rule: #333;
  --faint: #1c1b1a;   /* dark squares of the chess board */
  --t1: #d9a557;      /* sudoku trial levels 1-4: amber, green, pink, violet */
  --t2: #8fbf7f;
  --t3: #d48fb4;
  --t4: #a796d8;
  --sdk-hl: #1c2631;  /* sudoku highlight */
  --mono: Menlo, ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 var(--mono);
}
html { -webkit-text-size-adjust: 100%; }

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 3px;
}
a:hover { color: var(--blue); text-decoration-color: var(--blue); }

pre { margin: 0; font: inherit; }
img { max-width: 100%; height: auto; }
canvas { display: block; width: 100%; height: 100%; }

/* ---- home hero ----
   Sized only under .art-drawn (added by art.js when the screen draws
   its first image, removed if its art fails): without JS or art there
   is no blank screen. */

.hero { display: none; position: relative; }
.hero.art-drawn { display: block; height: 100vh; height: 100svh; }
.hero__tag {
  position: absolute;
  left: 3ch;
  bottom: 2em;
  background: var(--bg);
  color: var(--dim);
  line-height: 1.35;
  white-space: pre;
}
.hero__tag b { color: var(--fg); font-weight: normal; }
.hero__tag .arrow { font-style: normal; color: var(--fg); }
.hero__oath {
  position: absolute;
  right: 3ch;
  top: 2em;
  margin: 0;
  background: var(--bg);
  color: var(--dim);
  line-height: 1.35;
  white-space: pre;
}
.hero__oath b { color: var(--fg); font-weight: normal; }

/* ---- frame: art | text | art ---- */

.frame {
  display: grid;
  grid-template-columns: 1fr 72ch 1fr;
  min-height: 100vh;
}
.side { position: sticky; top: 0; height: 100vh; min-width: 0; }
main { padding: 56px 3ch 80px; min-width: 0; overflow-wrap: break-word; }

h1.me { font: inherit; font-weight: bold; margin: 0 0 2px; }
nav { margin: 0 0 30px; color: var(--dim); }
nav b { color: var(--blue); font-weight: normal; }

/* ---- title and meta ---- */

.head { margin: 0 0 30px; }
.head .title { font: inherit; font-size: 18px; font-weight: bold; margin: 0 0 4px; }
.head .meta { color: var(--dim); margin: 0; }

/* ---- text ---- */

p { margin: 0 0 16px; line-height: 1.7; }
h2, h3, h4 { font: inherit; font-weight: bold; margin: 34px 0 12px; }
.section-number-2, .section-number-3, .section-number-4 {
  color: var(--dim);
  font-weight: normal;
  margin-right: 2ch;
}
ul, ol { margin: 0 0 16px; padding-left: 3ch; }
/* entry lists (rddtz-index): dim date, two spaces, title */
ul.entries { list-style: none; padding-left: 0; }
ul.entries li { white-space: pre-wrap; }
dl { margin: 0 0 16px; }
dt { color: var(--dim); }
dd { margin: 0 0 0 3ch; }
blockquote { margin: 0 0 16px; padding-left: 2ch; border-left: 1px solid var(--dim); }
hr { border: 0; border-top: 1px dashed var(--rule); margin: 24px 0; }

/* code: scrolls inside its box, never wraps */
pre.src, pre.example {
  margin: 0;
  line-height: 1.3;
  white-space: pre;
}
pre.src { color: var(--fg); }
pre.example { margin: 4px 0 20px; overflow-x: auto; }
.org-keyword, .org-builtin, .org-preprocessor { color: var(--blue); }
.org-comment, .org-comment-delimiter { color: var(--dim); }
.org-type, .org-string, .org-variable-name, .org-function-name,
.org-constant, .org-doc { color: var(--fg); }

/* tables: Org text framed with +---+, | in dim */
.tcap { color: var(--dim); font-size: 13px; margin: 4px 0 2px; }
pre.table {
  margin: 0 0 20px;
  line-height: 1.3;
  white-space: pre;
  overflow-x: auto;
}
pre.table .b { color: var(--dim); }

/* figures: caption below in dim, "fig. N  text" */
figure { margin: 6px 0 22px; }
figure img { display: block; width: 100%; }
figcaption, .figure-number { color: var(--dim); font-size: 13px; }
figcaption { margin-top: 6px; }
.figure-number { white-space: pre; }

/* ---- boxes: emacs style +--+ drawn by CSS (rddtz-box-html) ----
   The | columns hold 1000 rows (1300em); taller boxes lose them.
   .box is 64ch: | + 1ch + 60ch text + 1ch + |.  The top and bottom
   lines are one clipped line of dashes; the right corners sit on the
   last character cell.  The | columns hang from .box (not from the
   scrolling body), so they stay put when long code scrolls. */

.box {
  --lh: 1.3em;
  position: relative;
  width: 64ch;
  max-width: 100%;
  margin: 4px 0 20px;
  color: var(--fg);
  line-height: 1.3;
}
.box__top, .box__bot {
  position: relative;
  height: var(--lh);
  overflow: hidden;
  white-space: pre;
  color: var(--dim);
}
.box__title { color: var(--fg); }
.box__top::after, .box__bot::before { content: "------------------------------------------------------------------------"; }
.box__top:empty::after, .box__bot::before { content: "+------------------------------------------------------------------------"; }
.box__top::before, .box__bot::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
  width: 1ch;
  background: var(--bg);
}
.box__body {
  padding: 0 2ch;
  overflow-x: auto;
  overflow-wrap: anywhere;
}
.box__body::before, .box__body::after {
  content: "|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A";
  position: absolute;
  top: var(--lh);
  bottom: var(--lh);
  width: 1ch;
  overflow: hidden;
  white-space: pre;
  color: var(--dim);
}
.box__body::before { left: 0; }
.box__body::after { right: 0; }
.box__body p, .box__body li, .box__body dl, .box__body pre { line-height: inherit; }
.box__body p, .box__body ul, .box__body ol, .box__body dl { margin: 0 0 var(--lh); }
.box__body pre { margin: 0; }
pre.math, code.math { color: var(--fg); background: none; border: 0; padding: 0; font: inherit; line-height: inherit; }
.box__body > :last-child { margin-bottom: 0; }
/* display math inside a box: no second frame, the formula sits in the
   text of the outer box */
.box__body .box:has(> .box__body > pre.math) { width: auto; margin: 0 0 var(--lh); }
.box__body .box:has(> .box__body > pre.math):last-child { margin-bottom: 0; }
.box__body .box:has(> .box__body > pre.math) > .box__top,
.box__body .box:has(> .box__body > pre.math) > .box__bot { display: none; }
.box__body .box:has(> .box__body > pre.math) > .box__body { padding: 0; }
.box__body .box:has(> .box__body > pre.math) > .box__body::before,
.box__body .box:has(> .box__body > pre.math) > .box__body::after { content: none; }
/* a row of links (#+ATTR_HTML: :class links on a paragraph): 2ch apart */
p.links { display: flex; flex-wrap: wrap; column-gap: 2ch; }
/* key/value pairs (infobox): one row each, key dim, value beside it
   at the longest key plus 2ch */
.box__body dl {
  display: grid;
  grid-template-columns: fit-content(50%) minmax(0, 1fr);
  column-gap: 2ch;
}
.box__body dt { color: var(--dim); }
.box__body dd { margin: 0; min-width: 0; }

/* footnotes */
sup, sup a, a.footref { color: var(--blue); font-size: 11px; text-decoration: none; }
#footnotes {
  color: var(--dim);
  font-size: 12.5px;
  border-top: 1px dashed var(--rule);
  padding-top: 10px;
  margin-top: 30px;
}
#footnotes a { color: var(--dim); }
#footnotes a:hover { color: var(--blue); }
.footdef { display: flex; gap: 1ch; }
.footpara { margin: 0; }

/* ---- back link at the end of posts ---- */

.back { margin-top: 30px; }

/* ---- phrase ---- */

footer.phrase {
  margin-top: 46px;
  padding-left: 4ch;
  color: var(--dim);
  line-height: 1.7;
}

/* ---- albums: one photo per headline, no ASCII effect ----
   Photos in a column at text width, dim "NN  title" caption below.
   viewer.js opens a.ph full screen: photo left, .box right. */

figure.photo { margin: 0 0 34px; }
.ph { display: block; line-height: 0; }
.ph img { display: block; width: 100%; height: auto; }
figure.photo figcaption { margin-top: 6px; white-space: pre-wrap; }

body.viewer-open { overflow: hidden; }
.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46ch;
  gap: 3ch;
  align-items: center;
  padding: 3vh 3ch;
  background: #000;
  color: var(--fg);
}
.viewer[hidden] { display: none; }
.viewer__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  min-height: 0;
}
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .box { width: 46ch; margin: 0; font-size: 12.5px; }
.viewer .box__top::before, .viewer .box__bot::after { background: #000; }
.box__body dl.viewer__rows { grid-template-columns: 10ch minmax(0, 1fr); column-gap: 0; }
.viewer__rows dd { white-space: pre-wrap; }
.viewer__nav { white-space: pre; }
.viewer__btn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 3px;
  cursor: pointer;
}
.viewer__btn:hover, .viewer__btn:focus-visible { color: var(--blue); text-decoration-color: var(--blue); }

/* ---- phone ---- */

@media (max-width: 760px) {
  html, body { font-size: 13px; }
  .frame { display: block; min-height: 0; }
  /* art bands only under .art-drawn (see the hero) */
  .side { position: relative; height: 0; }
  .side.art-drawn { height: 42vh; }
  main {
    width: min(44ch, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0;
  }
  footer.phrase { margin-top: 24px; padding-left: 0; }
  .box { width: 44ch; }
  ul.entries li { white-space: normal; }
  ul.entries li > .d:first-child { display: block; margin-bottom: 0; }
  .hero__tag { left: 50%; transform: translateX(-50%); bottom: 1.5em; }
  .hero__oath { right: auto; left: 50%; transform: translateX(-50%); top: 1.5em; }
  /* viewer: the box goes under the photo, the page scrolls */
  .viewer {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
  }
  .viewer__photo { height: auto; }
  .viewer__img { max-height: 70vh; }
  .viewer .box { width: 100%; }
}

/* ---- projects page: one box per project (rddtz-projects--card) ---- */
.d { color: var(--dim); }
h2.year { margin: 30px 0 12px; }
.box__body .pt { font-weight: bold; }
.box__body .d { margin-bottom: var(--lh); }
.box__body .links { white-space: pre-wrap; }

/* ---- sudoku ----
   The hidden sudoku page (sudoku.html, sudoku.js) and its wipe overlay
   (game-wipe.js).  Short classes are scoped to .sdk-screen/.sdk-wipe:
   d dim, b text, u blue, c cursor block, x underline (conflict, hotkey,
   today), h shaded (highlight), n bold (board value), t1..t4 trial levels (tm1..tm4 dimmed,
   for their marks).  The sudoku's own
   screen and rows are .sdk-fit too: line height 1 (a 6 x 4 board cell
   is about square) and font size --sdk-font, set by sudoku.js on
   <html> so the whole screen fits the viewport height.
   The page keeps the side art; the game is a 72 column grid filling the
   center column (the 70 wide screen centered: 1ch each side) from the
   top to the bottom of the viewport, as the wipe draws it on the band
   of any page.  The page does not scroll; the scrollbar gutter is kept,
   so the column sits where it does on the scrolling pages. */
.sdk-page { scrollbar-gutter: stable; }
.sdk-page body { overflow: hidden; }
main.sdk-main { padding: 0; height: 100vh; overflow: hidden; }
.sdk-screen, .sdk-row { font: 14px/1.25 var(--mono); white-space: pre; margin: 0; }
.sdk-screen { overflow: hidden; color: var(--fg); }
/* phone: only the "desktop only" box, centered in the whole viewport */
@media (max-width: 760px) {
  .sdk-page .side { display: none; }
  main.sdk-main { width: auto; margin: 0; }
}
/* left and width: the band, set by game-wipe.js / game-trigger.js */
.sdk-wipe { position: fixed; top: 0; bottom: 0; left: 0; width: 100%; z-index: 1000; overflow: hidden; pointer-events: none; color: var(--fg); }
.sdk-wipe .sdk-row { height: 1.25em; overflow: hidden; }
.sdk-wipe .sdk-fill { display: inline-block; vertical-align: top; height: 1.25em; background: var(--bg); }
.sdk-screen .d, .sdk-wipe .d { color: var(--dim); }
.sdk-screen .b, .sdk-wipe .b { color: var(--fg); }
.sdk-screen .u, .sdk-wipe .u { color: var(--blue); }
.sdk-screen .c, .sdk-wipe .c { background: var(--cursor); color: var(--bg); }
.sdk-screen .x, .sdk-wipe .x { text-decoration: underline; text-underline-offset: 3px; }
.sdk-screen .h, .sdk-wipe .h { background: var(--sdk-hl); }
.sdk-screen .n, .sdk-wipe .n { font-weight: bold; }
.sdk-screen .t1, .sdk-wipe .t1 { color: var(--t1); }
.sdk-screen .t2, .sdk-wipe .t2 { color: var(--t2); }
.sdk-screen .t3, .sdk-wipe .t3 { color: var(--t3); }
.sdk-screen .t4, .sdk-wipe .t4 { color: var(--t4); }
.sdk-screen .tm1, .sdk-wipe .tm1 { color: color-mix(in srgb, var(--t1) 50%, var(--bg)); }
.sdk-screen .tm2, .sdk-wipe .tm2 { color: color-mix(in srgb, var(--t2) 50%, var(--bg)); }
.sdk-screen .tm3, .sdk-wipe .tm3 { color: color-mix(in srgb, var(--t3) 50%, var(--bg)); }
.sdk-screen .tm4, .sdk-wipe .tm4 { color: color-mix(in srgb, var(--t4) 50%, var(--bg)); }
.sdk-fit { font-size: var(--sdk-font, 14px); line-height: 1; }
.sdk-wipe .sdk-row.sdk-fit, .sdk-wipe .sdk-fit .sdk-fill { height: 1em; }

/* ---- problem of the day ----
   problem.html (problem.js) is a sudoku-like page; its formulas are
   inline SVGs laid over the blank cells of the text (.prb-math, placed
   by problem.js, re-created on every render), in the text color with a
   thin stroke (0.4 bp, the svg's units) so the TeX strokes weigh like
   Menlo's.  Only an inline formula
   takes clicks (it copies its LaTeX); the ink may pass the TeX box.
   An inline formula is at the top of its row (problem.js sets the
   margin-top that puts its baseline on the text's); a display one is
   centered.  The same spans ride the wipe overlays (.sdk-wipe). */
#problem.sdk-screen { position: relative; }
.prb-math { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--fg); }
.prb-math.inline { pointer-events: auto; cursor: pointer; align-items: flex-start; }
.prb-math svg { display: block; flex: none; overflow: visible; stroke: currentColor; stroke-width: 0.4; stroke-linejoin: round; }

/* ---- chess ----
   The hidden chess page (chess.html, chess.js), laid out like the
   sudoku (side art, no scrolling, the screen centered in the center
   column).  Its cells are square: line-height 2ch, at the font size
   --chs-font that chess.js sets on <html> so the 49 rows fit the
   viewport.  The wipe overlay of chess is .sdk-wipe.chs-screen with
   .chs-row rows.  Short classes are scoped to .chs-screen: d dim, b
   text, w white piece, k black piece (blue), m mark, sq dark square,
   c cursor block, ck king in check, x underline (hotkey). */
.chs-page { scrollbar-gutter: stable; }
.chs-page body { overflow: hidden; }
main.chs-main { padding: 0; height: 100vh; overflow: hidden; }
.chs-screen, .chs-row { font: var(--chs-font, 14px)/2ch var(--mono); white-space: pre; margin: 0; }
.chs-screen { overflow: hidden; color: var(--fg); }
@media (max-width: 760px) {
  .chs-page .side { display: none; }
  main.chs-main { width: auto; margin: 0; }
}
.sdk-wipe .chs-row { height: 2ch; overflow: hidden; }
.sdk-wipe .chs-row .sdk-fill { height: 2ch; }
.chs-screen .d { color: var(--dim); }
.chs-screen .b, .chs-screen .w { color: var(--fg); }
.chs-screen .k { color: var(--blue); }
.chs-screen .m { color: var(--cursor); }
.chs-screen .sq { background: var(--faint); }
.chs-screen .c { background: var(--cursor); color: var(--bg); }
.chs-screen .ck, .sdk-wipe .ck { background: var(--blue); color: var(--bg); }
.chs-screen .x { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 67 catalog: one list in one box (rddtz-c67--list) ----
   Row: the kind in a dim column, a tiny square thumbnail, the title on
   one cut line.  The mouse on a row shows its tip (.c67-tip,
   cert67.js).  The search box (cert67.js) is a box too: a dim > prompt
   and a bare input; next to it the ascii filters dropdown (.c67-dd,
   made by cert67.js) opens its panel over the list. */
.c67-list .c67 { display: flex; align-items: center; gap: 1ch; height: 1.6em; }
.c67__k { flex: none; width: 7ch; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c67-list .c67 > a { flex: none; display: block; line-height: 0; }
.c67__thumb { display: block; flex: none; width: 1.6em; height: 1.6em; object-fit: cover; }
.c67 .pt { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c67-bar { display: flex; align-items: flex-start; gap: 2ch; width: 64ch; max-width: 100%; }
.c67-bar > .box { flex: 1; min-width: 0; }
.c67-dd { position: relative; flex: none; line-height: 1.3; }
.c67-dd pre { font: inherit; line-height: inherit; color: var(--dim); white-space: pre; }
.c67-dd__btn { margin: 4px 0 0; cursor: pointer; user-select: none; }
.c67-dd__btn:hover, .c67-dd__btn:focus-visible { color: var(--blue); outline: none; }
.c67-dd__panel { position: absolute; right: 0; top: calc(3 * 1.3em + 4px); z-index: 5; background: var(--bg); }
.c67-dd__panel[hidden] { display: none; }
.c67-dd__panel [data-k], .c67-dd__panel [data-a] { cursor: pointer; user-select: none; outline: none; }
.c67-dd__panel [data-k].on { color: var(--fg); }
.c67-dd__panel [data-k].on .x { color: var(--blue); }
.c67-dd__panel [data-k]:hover, .c67-dd__panel [data-a]:hover,
.c67-dd__panel [data-k]:focus-visible, .c67-dd__panel [data-a]:focus-visible { color: var(--blue); }
/* the hover tip of a card (cert67.js), fixed so the box does not clip it */
.c67-tip { position: fixed; z-index: 10; background: var(--bg); pointer-events: none; }
.c67-tip[hidden] { display: none; }
.c67-tip .box { width: 44ch; margin: 0; }
.c67-tip .pt, .c67-tip .d { margin: 0; white-space: normal; }
.c67-tip p { margin: var(--lh) 0 0; }
.c67[hidden] { display: none; }
.c67-q { display: flex; gap: 1ch; height: var(--lh); }
.c67-q input {
  flex: 1;
  min-width: 0;
  font: inherit;
  line-height: inherit;
  height: var(--lh);
  color: var(--fg);
  caret-color: var(--cursor);
  background: none;
  border: 0;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.c67-q input::placeholder { color: var(--dim); }
.c67-q input::-webkit-search-cancel-button { display: none; }