/* MK Chicago: a true pixel font, rasterized from the public-domain ChicagoFLF
   on its native 12 px grid (see tools/font/). */
@font-face {
  font-family: "MK Chicago";
  src: url("../fonts/MKChicago.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: block;
}

/* MK Monaco: an original pixel font drawn in the style of Monaco 9, the
   Mac's monospaced face, for sheet contents (see tools/font/build-monaco.py). */
@font-face {
  font-family: "MK Monaco";
  src: url("../fonts/MKMonaco.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: block;
}

/* Layout: the 1984 Macintosh desktop, 1-bit only. 50% dither desk, menu bar
   with rounded screen corners, striped title bars with close boxes. The
   Variable Sheet sits over the Rule Sheet (as in TK!Solver), with subsheets
   beside them on wide screens.
   Every size is a whole number of "screen pixels" (--u). Chicago is drawn at
   12 of them, so the glyphs stay sharp at 1x or 2x. Single theme by design. */
:root {
  --u: 1px;              /* one original Mac screen pixel */
  --paper: #ffffff;
  --ink: #000000;
  --gray: #808080;       /* only for placeholders and disabled items */
  --font: "MK Chicago", "Chicago", "ChicagoFLF", "Charcoal", "Geneva", sans-serif;          /* interface */
  --mono: "MK Monaco", "Monaco", "Menlo", monospace;                                          /* sheet contents, 9 pt */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23fff'/%3E%3Crect width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3C/svg%3E");
  color-scheme: light;
  /* plot tokens (skins override these; see css/skins.css) */
  --plot-bg: var(--paper); --plot-fg: var(--ink); --plot-grid: var(--ink); --plot-muted: var(--gray);
  --plot-font: var(--font); --plot-dashed: 1;
}
:root.double { --u: 2px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-synthesis: none; -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--dither);
  background-size: calc(2 * var(--u)) calc(2 * var(--u));
  image-rendering: pixelated;
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
}
button, input, select, textarea { font: inherit; color: inherit; line-height: inherit; }
:focus-visible { outline: var(--u) dotted var(--ink); outline-offset: var(--u); }
::selection { background: var(--ink); color: var(--paper); }

/* Classic scroll bars: gray dither track, white thumb. */
* { scrollbar-color: var(--ink) var(--paper); }
::-webkit-scrollbar { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
::-webkit-scrollbar-track { background: var(--dither); background-size: calc(2 * var(--u)) calc(2 * var(--u)); border: var(--u) solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--paper); border: var(--u) solid var(--ink); }
::-webkit-scrollbar-button:single-button { display: block; background-color: var(--paper); border: var(--u) solid var(--ink); background-repeat: no-repeat; background-position: center; background-size: 75% 75%; }
::-webkit-scrollbar-button:single-button:vertical { height: calc(16 * var(--u)); }
::-webkit-scrollbar-button:single-button:horizontal { width: calc(16 * var(--u)); }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23000' d='M6 1.5 1.5 6.5H4v4h4v-4h2.5z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23000' d='M6 10.5 1.5 5.5H4v-4h4v4h2.5z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23000' d='M1.5 6 6.5 1.5V4h4v4h-4v2.5z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23000' d='M10.5 6 5.5 1.5V4h-4v4h4v2.5z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-corner { background: var(--paper); }

/* ---------------------------------------------------------------- menu bar */
.menubar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: stretch;
  height: calc(20 * var(--u));
  background: var(--paper); border-bottom: var(--u) solid var(--ink);
  padding-inline: calc(10 * var(--u));
}
/* The original screen's rounded top corners. */
.menubar::before, .menubar::after {
  content: ""; position: absolute; top: 0; width: calc(5 * var(--u)); height: calc(5 * var(--u));
  background: radial-gradient(circle at 100% 100%, transparent calc(5 * var(--u)), var(--ink) calc(5 * var(--u)));
}
.menubar::before { left: 0; }
.menubar::after { right: 0; transform: scaleX(-1); }
.menu { position: relative; display: flex; }
.menu-title { border: 0; background: none; padding: 0 calc(9 * var(--u)); cursor: default; }
.menu.open .menu-title { background: var(--ink); color: var(--paper); }
.menu-panel {
  display: none; position: absolute; top: calc(19 * var(--u)); left: 0; min-width: calc(200 * var(--u));
  background: var(--paper); border: var(--u) solid var(--ink);
  box-shadow: var(--u) var(--u) 0 var(--ink);
  padding: 0; flex-direction: column;
}
.menu.open .menu-panel { display: flex; }
.menu-panel button {
  display: flex; justify-content: space-between; gap: calc(24 * var(--u)); align-items: baseline;
  border: 0; background: none; text-align: left; cursor: default; white-space: nowrap; position: relative;
  padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u)); min-height: calc(16 * var(--u));
}
.menu-panel button:hover, .menu-panel button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.menu-panel button[aria-checked="true"]::before, .menu-panel button[role="menuitemradio"][aria-checked="true"]::before { content: "✓"; position: absolute; left: calc(3 * var(--u)); }
.menu-panel kbd { font: inherit; }
.menu-panel hr { border: 0; border-top: var(--u) dotted var(--ink); margin: 0; width: 100%; height: 0; }
.menu-panel .ex-desc { display: block; white-space: normal; }
#examples-panel { display: flex; flex-direction: column; }
.menu-label { padding: 0 calc(12 * var(--u)) 0 calc(16 * var(--u)); color: var(--gray); }

/* ---------------------------------------------------------------- desk */
.desk {
  padding-inline: max(16px, calc(12 * var(--u))); padding-block: calc(12 * var(--u)) calc(24 * var(--u));
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
  max-width: calc(1400 * var(--u)); margin: 0 auto;
}
.columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(10 * var(--u)); }
.columns.wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.columns.wide .col-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 31 * var(--u)); }
.col-main, .col-side { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }

.window {
  background: var(--paper); border: var(--u) solid var(--ink);
  box-shadow: var(--u) var(--u) 0 var(--ink);
  min-width: 0;
}
.titlebar {
  position: relative; margin: 0; height: calc(19 * var(--u));
  display: flex; align-items: center; justify-content: center;
  border-bottom: var(--u) solid var(--ink);
  font: inherit;
  /* six 1-pixel stripes */
  background-image: repeating-linear-gradient(to bottom, var(--ink) 0 var(--u), transparent var(--u) calc(2 * var(--u)));
  background-size: calc(100% - 2 * var(--u)) calc(11 * var(--u));
  background-position: var(--u) calc(4 * var(--u));
  background-repeat: no-repeat;
}
.titlebar span { background: var(--paper); padding: 0 calc(6 * var(--u)); white-space: nowrap; line-height: calc(16 * var(--u)); }

/* ---------------------------------------------------------------- buttons */
.btn {
  border: var(--u) solid var(--ink); border-radius: calc(8 * var(--u)); background: var(--paper);
  min-height: calc(20 * var(--u)); padding: 0 calc(14 * var(--u)); cursor: default;
}
.btn.default { box-shadow: 0 0 0 var(--u) var(--paper), 0 0 0 calc(4 * var(--u)) var(--ink); margin: calc(4 * var(--u)); border-radius: calc(7 * var(--u)); }
.btn:active, .btn.flash { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- prompt line */
/* As in TK!Solver: the line under the title bar names the current cell and
   carries the solver's messages. */
.prompt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(16 * var(--u));
  min-height: calc(19 * var(--u)); padding: calc(1 * var(--u)) calc(6 * var(--u));
  border-bottom: var(--u) solid var(--ink);
}
.prompt-cell { font-family: var(--mono); font-size: calc(9 * var(--u)); white-space: nowrap; min-width: calc(110 * var(--u)); }
.status-msg { margin: 0; flex: 1 1 calc(240 * var(--u)); min-width: 0; }
.status-msg.ok::before { content: "✓ "; }
.status-msg.err::before { content: "✗ "; }
.status-msg .tag { display: inline-block; border: var(--u) solid var(--ink); padding: 0 calc(4 * var(--u)); margin-left: calc(6 * var(--u)); line-height: calc(14 * var(--u)); }

/* Sheet header band: 50% dither, a "!" (solve) box and a boxed sheet name. */
.sheet-bar {
  position: relative; height: calc(16 * var(--u));
  background: var(--dither); background-size: calc(2 * var(--u)) calc(2 * var(--u));
  border-bottom: var(--u) solid var(--ink);
  display: flex; align-items: stretch; justify-content: center;
}
.pane-scroll + .sheet-bar { border-top: var(--u) solid var(--ink); }
.sheet-bar h2 {
  margin: 0; font: inherit; background: var(--paper); padding: 0 calc(10 * var(--u));
  border-inline: var(--u) solid var(--ink); line-height: calc(15 * var(--u)); white-space: nowrap;
}
.bang {
  position: absolute; left: 15%; top: 0; bottom: 0; width: calc(22 * var(--u));
  border: 0; border-inline: var(--u) solid var(--ink); background: var(--paper); padding: 0; cursor: default;
}
.bang:active, .bang.flash { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------- sheets */
.sheet-scroll { overflow-x: auto; }
.pane-scroll { overflow-y: scroll; scrollbar-gutter: stable; }
#vars-scroll { height: calc(13 * 13 * var(--u) + 18 * var(--u)); }
#rules-scroll { height: calc(13 * 10 * var(--u) + 18 * var(--u)); }
.pane-scroll thead th { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.sheet { border-collapse: collapse; width: 100%; }
.sheet th {
  font-weight: normal; text-align: left; white-space: nowrap;
  font-family: var(--mono); font-size: calc(9 * var(--u)); line-height: calc(11 * var(--u));
  padding: calc(3 * var(--u)) calc(5 * var(--u)) calc(2 * var(--u));
}
.sheet th u { text-decoration: underline; text-underline-offset: calc(2 * var(--u)); text-decoration-thickness: var(--u); }
.sheet td {
  padding: 0; height: calc(13 * var(--u)); vertical-align: middle;
  font-family: var(--mono); font-size: calc(9 * var(--u)); line-height: calc(11 * var(--u));
}
.sheet input {
  width: 100%; height: calc(13 * var(--u)); border: 0; border-radius: 0; background: transparent;
  padding: 0 calc(5 * var(--u)); display: block; font: inherit;
}
.sheet input:focus { outline: none; background: var(--ink); color: var(--paper); caret-color: var(--paper); }
.sheet input::placeholder { color: var(--gray); opacity: 1; }
.sheet .cell { padding: 0 calc(5 * var(--u)); white-space: nowrap; }

.vars { min-width: calc(560 * var(--u)); }
.vars col.c-st { width: calc(26 * var(--u)); } .vars col.c-in { width: 18%; } .vars col.c-name { width: 15%; }
.vars col.c-out { width: 20%; } .vars col.c-unit { width: 11%; }
.vars .st input, .rules td.st { text-align: center; text-transform: uppercase; }
.vars th:first-child, .rules th:first-child { text-align: center; }
.vars td.out.has { cursor: copy; }
.vars td.out.fresh { animation: blink 0.4s steps(2, jump-none) 1; }
.vars .empty td, .lists .empty td { padding: calc(4 * var(--u)) calc(5 * var(--u)); color: var(--gray); font-family: var(--font); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
@keyframes blink { 0% { background: var(--ink); color: var(--paper); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .vars td.out.fresh { animation: none; } }

.rules col.c-st { width: calc(26 * var(--u)); }
.rules td.st.error { background: var(--ink); color: var(--paper); }
.rules td.st.unsolved { color: var(--gray); }
.rules tr.error input { text-decoration: underline dotted var(--ink); text-underline-offset: calc(3 * var(--u)); }

.lists { min-width: 100%; }
.lists th small { font: inherit; margin-left: calc(4 * var(--u)); }
.lists td.idx { text-align: right; padding-right: calc(5 * var(--u)); width: calc(30 * var(--u)); }
.lists td.computed input { color: var(--ink); }
.lists td.computed { background: var(--paper); }
.lists .clear-list { border: 0; background: none; cursor: default; padding: 0 calc(2 * var(--u)); }
.units input { min-width: calc(70 * var(--u)); }

/* ---------------------------------------------------------------- subsheets */
.tabs { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)) 0; border-bottom: var(--u) solid var(--ink); }
.tabs button {
  border: var(--u) solid var(--ink); border-bottom: 0; background: var(--paper);
  padding: 0 calc(10 * var(--u)); min-height: calc(18 * var(--u)); cursor: default;
  border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; margin-bottom: calc(-1 * var(--u));
}
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pane { padding: calc(8 * var(--u)) calc(10 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.pane-note { margin: 0; max-width: calc(440 * var(--u)); }

.plot-controls, .fill { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)) calc(8 * var(--u)); }
/* pop-up menus */
.plot-controls select, .fill select {
  appearance: none; -webkit-appearance: none; border-radius: 0;
  border: var(--u) solid var(--ink); box-shadow: var(--u) var(--u) 0 var(--ink); background-color: var(--paper);
  min-height: calc(18 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(6 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h11v1H0zM1 1h9v1H1zM2 2h7v1H2zM3 3h5v1H3zM4 4h3v1H4zM5 5h1v1H5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right calc(5 * var(--u)) center; background-size: calc(11 * var(--u)) calc(6 * var(--u));
}
.fill input { font-family: var(--mono); font-size: calc(9 * var(--u)); width: calc(56 * var(--u)); border: var(--u) solid var(--ink); border-radius: 0; background: var(--paper); padding: 0 calc(4 * var(--u)); min-height: calc(18 * var(--u)); }
.plot-y { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(12 * var(--u)); }
.plot-y label { display: inline-flex; gap: calc(5 * var(--u)); align-items: center; cursor: default; }
/* classic check boxes: a square with an X */
.plot-y input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: calc(12 * var(--u)); height: calc(12 * var(--u)); border: var(--u) solid var(--ink); background: var(--paper); border-radius: 0;
}
.plot-y input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h2v2H4zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8zM9 9h1v1H9zM9 0h1v1H9zM8 1h1v1H8zM7 2h1v1H7zM6 3h1v1H6zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1zM0 9h1v1H0z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.plot-wrap { width: 100%; aspect-ratio: 4 / 3; max-width: 100%; border: var(--u) solid var(--ink); }
#plot-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.guide { max-width: calc(440 * var(--u)); }
.guide h3 { margin: calc(4 * var(--u)) 0 0; font: inherit; text-decoration: underline; text-underline-offset: calc(2 * var(--u)); }
.guide p, .guide ol { margin: 0; }
.guide ol { padding-left: calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.guide code { font: inherit; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 0 calc(14 * var(--u)); margin: 0; }
.keys dd { margin: 0; }

/* ---------------------------------------------------------------- dialog */
.dialog-scrim { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: transparent; }
.dialog {
  background: var(--paper);
  border: calc(3 * var(--u)) solid var(--ink);
  box-shadow: 0 0 0 var(--u) var(--paper), 0 0 0 calc(2 * var(--u)) var(--ink);
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  width: min(calc(420 * var(--u)), 100%); max-height: 85vh; overflow: auto;
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
.dialog h2 { margin: 0; font: inherit; }
.dialog p { margin: 0; }
.dialog textarea, .dialog input {
  width: 100%; border: var(--u) solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink);
  padding: calc(3 * var(--u)) calc(4 * var(--u));
}
.dialog textarea { min-height: calc(220 * var(--u)); resize: vertical; font-family: var(--mono); font-size: calc(9 * var(--u)); line-height: calc(11 * var(--u)); }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.about-logo { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); }

@media (max-width: 560px) {
  .menu-title { padding: 0 calc(6 * var(--u)); }
  .menu-panel { position: fixed; left: 8px; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 20 * var(--u)); min-width: 0; }
}