/* Monospace on a line grid: uppercase labels, box-drawn tables.
   Colour comes only from the active theme; emphasis is inversion.
   Pages are generated by scripts/build_site.py. */

/* ── Tokens ── */
/* Themes (themes.css) set --bg and --text. Tints are solid mixes of the two. */

:root {
  --bg: #f8f8f7;
  --text: #1a1a1a;
  --text-rgb: 26, 26, 26;

  --tint:   color-mix(in srgb, var(--text) 8%, var(--bg));
  --tint-2: color-mix(in srgb, var(--text) 18%, var(--bg));
  --rule:   color-mix(in srgb, var(--text) 30%, var(--bg));
  --muted:  color-mix(in srgb, var(--text) 58%, var(--bg));

  --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs: 14px;
  --lh: 18px;
  --measure: 76ch;
}

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

html {
  background: var(--bg);
  color: var(--text);
  scroll-padding-top: calc(var(--lh) * 3);
  -webkit-text-size-adjust: 100%;
}

body {
  font: var(--fs)/var(--lh) var(--font);
  font-variant-ligatures: none;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--text); color: var(--bg); }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  line-height: inherit;
}

h1, h2 { font: inherit; }

[hidden] { display: none !important; }

/* One emphasis everywhere: swap the theme's two colours.
   Selected, keyboard focus, and hover all look the same. Hover only applies
   where there's a real pointer, so taps don't leave things inverted. */
.tbl .xrow.is-open td,
.tbl .xrow.is-open + .note td,
.tbl .row.is-current td,
.page p a:focus-visible,
.links a:focus-visible,
.links button:focus-visible,
.sort button:focus-visible,
.row:has(:focus-visible) td,
.btn:focus-visible {
  background: var(--text);
  color: var(--bg);
}

@media (hover: hover) {
  .page p a:hover,
  .links a:hover,
  .links button:hover,
  .sort button:hover,
  .row:hover td,
  .btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--text);
    color: var(--bg);
  }
}

/* Inversion is the focus indicator; no extra outline. */
:focus-visible { outline: none; }

/* ── Top bar ── */

.bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 3ch;
  max-width: calc(var(--measure) + 2ch);
  padding: calc(var(--lh) / 2) 1ch;
  background: var(--bg);
}

.nav { display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 3) 1ch; }

/* ── Page ── */

.page {
  flex: 1;
  width: 100%;
  max-width: calc(var(--measure) + 2ch);
  padding: var(--lh) 1ch calc(var(--lh) * 3);
}

.page p + p,
.page p + .links,
.page p + .tbl,
.page p + .filter,
.page p + .sort { margin-top: var(--lh); }

.page p a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.page p a:hover { text-decoration: none; }

.intro h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2ch;
  text-transform: uppercase;
}

.badge {
  padding: 0 1ch;
  background: var(--tint);
  text-transform: none;
}

.intro + .sec,
.sec + .sec { margin-top: calc(var(--lh) * 2); }

.sec__title { text-transform: uppercase; }
.sec__body > p:first-child { color: var(--muted); }
.sec__body > .prose { margin-top: var(--lh); }

.prose p + p { margin-top: var(--lh); }

/* ── Link lists ── */

.links {
  list-style: none;
  margin: var(--lh) 0;
}

/* Each row is only as wide as its text, so hover/focus hugs the link. */
.links a,
.links button {
  display: inline-flex;
  max-width: 100%;
  padding-right: 1ch;
}

.links__icon {
  flex: none;
  width: 3ch;
  color: var(--muted);
}

.links a:hover .links__icon,
.links button:hover .links__icon,
.links a:focus-visible .links__icon,
.links button:focus-visible .links__icon { color: inherit; }

/* ── Keys and chips ── */
/* A chip is a key cell joined to a label cell: darker tint, lighter tint.
   Pointing at it inverts the key; the current page inverts the label. */

kbd {
  font: inherit;
  display: inline-block;
  padding: 0 1ch;
  background: var(--tint-2);
  color: var(--text);
}

.chip {
  display: inline-flex;
  text-transform: uppercase;
}

.chip__label {
  padding: 0 1ch;
  background: var(--tint);
  color: var(--text);
}

.chip:focus-visible kbd,
.foot__set:focus-visible kbd,
.nav .chip[aria-current="page"] .chip__label { background: var(--text); color: var(--bg); }

@media (hover: hover) {
  .chip:hover kbd,
  .foot__set:hover kbd { background: var(--text); color: var(--bg); }
}

.hint { color: var(--muted); }
.hint kbd + kbd { margin-left: 1ch; }

/* Keyboard affordances only where there's likely a keyboard: a fine pointer
   on a wide screen. Phones, tablets, and narrow windows get the tap hints. */
.hint--touch { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 640px) {
  kbd,
  .hint--keys,
  .filter { display: none !important; }
  .hint--touch { display: inline; }
}

/* ── Tables ── */
/* Box-drawn look: a single frame, a rule between columns, a rule under the
   header. Borders rather than characters, so joins are exact in any font. */

.tbl {
  width: 100%;
  margin: var(--lh) 0 calc(var(--lh) / 2);
  border-collapse: collapse;
  /* Fixed widths, so opening a row (whose note spans every column) never
     reflows the columns. The last visible column takes what's left. */
  table-layout: fixed;
  border: 1px solid var(--rule);
}

.tbl th,
.tbl td {
  padding: 0 1ch;
  vertical-align: top;
  text-align: left;
  border-left: 1px solid var(--rule);
}

.tbl th {
  font-weight: inherit;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

.tbl .nowrap { white-space: nowrap; }
.tbl--work th:nth-child(1) { width: 15ch; }   /* Three Sigma + padding */
.tbl--work th:nth-child(2) { width: 24ch; }   /* Product, Design, Dev */
.tbl--books th:nth-child(1) { width: 6ch; }   /* year */
.tbl--books th:nth-child(3) { width: 28ch; }  /* Antoine de Saint-Exupéry */
/* On small screens the author column goes and "by Author" joins the title.
   Opacity rather than --muted so it stays dim when the row inverts. */
.tbl--books .by { display: none; opacity: 0.58; }
.tbl--facts th:nth-child(1) { width: 13ch; }

.row { cursor: pointer; }
.xrow__toggle { width: 100%; }

/* An open row merges into one full-width block: title row plus note, with
   rules closing it off above and below. */
.xrow.is-open td { border-top: 1px solid var(--rule); }
.note a { text-decoration: underline; text-underline-offset: 3px; }
.note a::after { content: " ↗"; }
.note td {
  padding-bottom: calc(var(--lh) / 2);
  border-top: 1px solid var(--rule);      /* closes the columns: ├──┴──┤ */
  border-bottom: 1px solid var(--rule);
}

/* ── Filter ── */
/* Press / on a table: a filter line appears above it. */

.filter {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}

.filter__input {
  flex: 1;
  min-width: 0;
  padding: 0 1ch;
  border: 0;
  border-radius: 0;
  background: var(--tint);
  line-height: var(--lh);
  caret-color: var(--text);
}

.filter__input::placeholder { color: var(--muted); opacity: 1; }

.filter + .tbl { margin-top: calc(var(--lh) / 2); }

.empty { color: var(--muted); margin-bottom: calc(var(--lh) / 2); }

/* ── Sort ── */

.sort { display: flex; flex-wrap: wrap; gap: 0 2ch; text-transform: uppercase; }
.sort__label { color: var(--muted); }

.sort button::before { content: "( ) "; white-space: pre; }
.sort button[aria-checked="true"]::before { content: "(*) "; }

/* ── Medici ── */

.medici-tool { display: flex; flex-direction: column; gap: var(--lh); margin-top: var(--lh); }
.medici-form { display: flex; flex-direction: column; gap: calc(var(--lh) / 2); }

.medici-label,
.medici-progress-text,
.medici-stats dt,
.medici-details summary { color: var(--muted); text-transform: uppercase; }

.medici-source {
  width: 100%;
  min-height: calc(var(--lh) * 4 + 2px);
  resize: vertical;
  padding: 0 1ch;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  line-height: var(--lh);
  caret-color: var(--text);
}

.medici-source:focus { outline: none; border-color: var(--text); }
.medici-source::placeholder { color: var(--muted); opacity: 1; }

.medici-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1ch 2ch; }
.medici-actions--run:empty,
.medici-actions--run:not(:has(button:not([hidden]))) { display: none; }
.medici-actions--run { margin-top: var(--lh); }

.medici-format { display: inline-flex; align-items: baseline; gap: 1ch; }
.medici-format select {
  padding: 0 1ch;
  border: 0;
  border-radius: 0;
  background: var(--tint);
  line-height: var(--lh);
  cursor: pointer;
}
.medici-format select:focus-visible { background: var(--text); color: var(--bg); }

.btn,
.medici-button {
  display: inline-flex;
  gap: 1ch;
  padding: 0 1ch;
  background: var(--tint-2);
  text-transform: uppercase;
  cursor: pointer;
}

.medici-button:focus-visible { background: var(--text); color: var(--bg); }

@media (hover: hover) {
  .medici-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--text); color: var(--bg); }
}

.medici-button:disabled,
.medici-button[aria-disabled="true"] { cursor: default; background: var(--tint); color: var(--muted); }

.medici-download-size { opacity: 0.6; }

.medici-section { border-top: 1px solid var(--rule); padding-top: var(--lh); }
.medici-actions--output { margin-top: var(--lh); }

.medici-alert { margin-bottom: var(--lh); color: var(--muted); }
.medici-alert[data-tone="warning"] { color: var(--text); }

.medici-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
}

.medici-stats > div { padding: 0 1ch; border-left: 1px solid var(--rule); }
.medici-stats > div:first-child { border-left: 0; }
.medici-stats dt { border-bottom: 1px solid var(--rule); margin: 0 -1ch; padding: 0 1ch; }
.medici-stats dd { overflow-wrap: anywhere; }

.medici-stats:not([hidden]) + .medici-progress-wrap { margin-top: var(--lh); }

.medici-progress {
  height: var(--lh);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.medici-progress div {
  width: 0;
  height: 100%;
  background: var(--text);
  transition: width 0.15s;
}

.medici-progress-text { margin-top: calc(var(--lh) / 2); }

.medici-canvas {
  display: block;
  width: 100%;
  max-height: 70vh;
  min-height: calc(var(--lh) * 10);
  border: 1px solid var(--rule);
  background:
    linear-gradient(45deg, var(--tint) 25%, transparent 25%),
    linear-gradient(-45deg, var(--tint) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--tint) 75%),
    linear-gradient(-45deg, transparent 75%, var(--tint) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  object-fit: contain;
}

.medici-details summary { cursor: pointer; }

.medici-log {
  margin-top: calc(var(--lh) / 2);
  max-height: calc(var(--lh) * 10);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--muted);
  font: inherit;
}

/* ── Footer ── */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 2ch;
  max-width: calc(var(--measure) + 2ch);
  padding: var(--lh) 1ch;
  color: var(--muted);
}

.foot__tools { display: flex; flex-wrap: wrap; gap: calc(var(--lh) / 3) 3ch; }
.foot__set { display: inline-flex; gap: 1ch; }
.foot__set > span:last-child { color: var(--text); }

/* ── Small screens ── */

@media (max-width: 720px) {
  :root { --fs: 13px; --lh: 17px; }
  .col-site { display: none; }
  .tbl--work th:nth-child(2) { width: auto; }
  .medici-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .medici-stats > div:nth-child(3) { border-left: 0; }
  .medici-stats > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 520px) {
  .col-author { display: none; }
  .tbl--books .by { display: inline; }
}