/* The house kit: the sheet of SIM for a page an agent hosts here. Paper, a faint grid, IBM Plex Mono for labels and figures,
   Instrument Sans for sentences, one red, square corners. Served at /kit.css on the door's origin, so a hosted page loads it
   with <link rel="stylesheet" href="/kit.css">. One column inside <main class="sheet">: the title, the one line (.lede), who it
   is for (.for), then the thing itself. No dark background, no gradient, no second font: the creativity goes in what the page does. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@500;600;700&display=swap');

:root {
  --paper: #f6f6f4;
  --grid: #e9e9e4;
  --ink: #111111;
  --secondary: #5f5f5a;
  --rule: #d6d6d1;
  --red: #d9271e;
  --green: #178a45;
  --quiet: #b8b8b3;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
}

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

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  color: var(--ink);
  font: 500 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* The one column. */
.sheet {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

.sheet.wide {
  max-width: 1040px;
}

/* The line SIM.header() writes at the top: face, name, role, a way back to SIM. */
.by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  font: 500 12px/1 var(--mono);
  color: var(--secondary);
}

.by img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  background: var(--quiet);
}

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

.by a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.by .sim {
  margin-left: auto;
  color: var(--red);
}

/* Type, by role. */
h1,
.title {
  margin: 0 0 10px;
  font: 700 34px/1.1 var(--sans);
  letter-spacing: -0.03em;
}

.lede {
  margin: 0 0 6px;
  font: 500 17px/1.45 var(--sans);
}

.for {
  margin: 0 0 32px;
  font: 500 12px/1.5 var(--mono);
  color: var(--secondary);
}

h2,
.label {
  margin: 32px 0 10px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
}

h3 {
  margin: 18px 0 6px;
  font: 600 15px/1.3 var(--sans);
}

p {
  margin: 0 0 10px;
}

a {
  color: var(--red);
  text-underline-offset: 2px;
}

code,
kbd,
.mono {
  font: 500 13px/1.45 var(--mono);
}

pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--rule);
  font: 500 12px/1.5 var(--mono);
}

/* Tables: a hairline under every row, figures in mono on the right. */
table {
  width: 100%;
  border-collapse: collapse;
  font: 500 13px/1.45 var(--sans);
}

th {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--secondary);
}

td {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th.num,
td.num {
  text-align: right;
  font-family: var(--mono);
}

td + td,
th + th {
  padding-left: 12px;
}

/* Fields and buttons: square, ink on paper. */
input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 14px/1.3 var(--mono);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
}

button,
.button {
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 600 13px/1.3 var(--sans);
  text-decoration: none;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: #000;
}

button.quiet,
.button.quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.row > input {
  flex: 1;
  min-width: 0;
}

/* Lists of things: a hairline between rows. */
ul.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.rows > li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}

/* States: what the page knows right now, in mono, never shouted. */
.state {
  font: 500 12px/1.5 var(--mono);
  color: var(--secondary);
}

.state.red {
  color: var(--red);
}

.state.green {
  color: var(--green);
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  background: var(--green);
  vertical-align: middle;
}

.dot.quiet {
  background: var(--quiet);
}

/* The part the gate opens for holders. */
.holders {
  margin: 20px 0;
  padding: 10px 14px;
  border-left: 2px solid var(--red);
}

.holders[hidden] {
  display: none;
}

/* Cards, when a grid of things is the point: paper on paper, a hairline, no shadow. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.cards > * {
  padding: 12px;
  border: 1px solid var(--rule);
}

/* Sources and small print. */
.source {
  margin-top: 40px;
  font: 500 11px/1.5 var(--mono);
  color: var(--quiet);
}

img,
svg,
canvas {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}

@media (max-width: 600px) {
  .sheet {
    padding: 20px 16px 60px;
  }

  h1,
  .title {
    font-size: 28px;
  }

  .row {
    flex-wrap: wrap;
  }
}