/* spooky. Built to his 1-bit terminal reference: paper windows with a 2 px ink
   frame, a heavy mono set in caps and underscores, ordered dither, inverted
   plates and comb bars. The ground and every live object on it take their
   colour from his pixel avatar, so the two sources meet with one division of
   labour: 1-bit paper for everything you read, pixel colour for everything
   that is a thing. */

@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/martian-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}

:root {
  --void: #1b0617;
  --void-deep: #110310;
  --paper: #f3f3f3;
  --paper-hi: #fcfcfc;
  --ink: #020202;
  --g1: #ededed;
  --g2: #dbdbdb;
  --g3: #cbcbcb;
  --g4: #bcbbbc;
  --g5: #acacac;
  --entangle: #44fb0b;
  --lime: #b4fc04;
  --pumpkin: #fe6a02;
  --ember: #c44101;

  --rule: 2px;
  --gutter: 16px;
  --pad: 32px;
  --bar-pad: 28px;

  --face: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;
  --wide: 100%;
  --narrow: 78%;
}

* { box-sizing: border-box; }

html {
  background: var(--void-deep);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font-family: var(--face);
  font-size: 18px;
  line-height: 1.5;
  font-variation-settings: "wdth" 100, "wght" 450;
}

img { display: block; max-width: 100%; }

/* ------------------------------------------------------------------ desk */

.desk {
  position: relative;
  padding: 22px 30px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.desk-ground {
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
}

.desk-field {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(0.85) brightness(0.62);
  opacity: 0.85;
  transform: translate3d(0, 0, 0) scale(1.08);
  animation: drift 64s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.08); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.14); }
}

.desk::after {
  /* the vignette that keeps the paper the brightest thing on the desk */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, rgba(27, 6, 23, 0) 38%, rgba(17, 3, 16, 0.86) 100%);
}

.collage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 316px;
  grid-template-areas:
    "monitor monitor rail"
    "measure season rail";
  align-items: stretch;
  max-width: 1880px;
  width: 100%;
  margin: 0 auto;
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------- window */

.win {
  position: relative;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.win::before {
  /* the photocopier grain that lies over every sheet in his reference */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("/img/grain.webp");
  background-size: 384px 384px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 1;
}

.win > * { position: relative; z-index: 2; }

.win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px var(--bar-pad);
  border-bottom: var(--rule) solid var(--ink);
  background: var(--paper-hi);
}

.win-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 90, "wght" 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-keys {
  width: 84px;
  height: 22px;
  flex: none;
  image-rendering: pixelated;
}

.win-body {
  padding: var(--pad);
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------- monitor */

.win-monitor { grid-area: monitor; overflow: hidden; }

.monitor-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 22px 32px;
}

.monitor-note { grid-column: 1 / -1; }

.read { min-width: 0; }

.read-label {
  display: block;
  font-size: 16px;
  letter-spacing: 0.08em;
  font-variation-settings: "wdth" 85, "wght" 600;
  color: #4a4a4a;
}

.read-value {
  display: block;
  font-size: 38px;
  line-height: 1.1;
  font-variation-settings: "wdth" 75, "wght" 800;
  font-feature-settings: "tnum" 1;
}

.monitor-note {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-variation-settings: "wdth" 85, "wght" 600;
}

/* --------------------------------------------------------- measurement */

.win-measure { grid-area: measure; }

.measure-body {
  display: grid;
  gap: 18px;
  /* the keys answer to their own window, not to the page: at 1366 this
     column is narrow enough that four of them would clip their labels */
  container-type: inline-size;
}

.measure-note {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-variation-settings: "wdth" 85, "wght" 600;
}

.slot {
  border: var(--rule) solid var(--ink);
  background: var(--g1);
  padding: 20px 24px 22px;
  box-shadow: inset 3px 3px 0 var(--g3);
  min-width: 0;
}

.slot-label {
  display: block;
  font-size: 16px;
  letter-spacing: 0.08em;
  font-variation-settings: "wdth" 85, "wght" 600;
  color: #4a4a4a;
  margin-bottom: 4px;
}

.slot-value {
  display: block;
  font-family: var(--face);
  font-size: 21px;
  line-height: 1.4;
  font-variation-settings: "wdth" 75, "wght" 600;
  word-break: break-all;
  user-select: all;
}

.keys-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@container (min-width: 620px) {
  .keys-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.key {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 10px 1.3em;
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-variation-settings: "wdth" 85, "wght" 650;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 90ms steps(2), background-color 90ms;
}

.key-wide { width: 100%; }

.key:hover:not([aria-disabled="true"]):not(:disabled) { background: var(--g2); }
.key:active:not([aria-disabled="true"]):not(:disabled) { transform: translate(2px, 2px); }
.key:focus-visible { outline: var(--rule) solid var(--entangle); outline-offset: 3px; }

.key[aria-disabled="true"],
.key:disabled {
  /* Waiting on the mint: hatched, not just grey, so it reads as off rather
     than as a button that failed to render. */
  background-color: var(--g2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    rgba(2, 2, 2, 0.1) 7px 14px
  );
  border-color: #7c7c7c;
  color: #6b6b6b;
  cursor: not-allowed;
}

.keys-note {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.04em;
  font-variation-settings: "wdth" 85, "wght" 600;
  color: #4a4a4a;
}

.key-mark img { width: 18px; height: 18px; }

/* --------------------------------------------------------------- season */

.win-season { grid-area: season; }

.season-body {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "pot held closes"
    "caption caption caption"
    "comb comb comb";
  grid-template-rows: auto auto auto;
  gap: 22px 24px;
  align-items: center;
}

.season-body .read:nth-of-type(1) { grid-area: held; }
.season-body .read:nth-of-type(2) { grid-area: closes; }

.pot {
  grid-area: pot;
  width: 118px;
  image-rendering: pixelated;
}

.comb {
  grid-area: comb;
  position: relative;
  height: 90px;
  border: var(--rule) solid var(--ink);
  background: var(--g2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 36px;
  overflow: hidden;
}

.comb-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background:
    linear-gradient(to right, transparent calc(100% - 10px), var(--g5) calc(100% - 10px)),
    repeating-linear-gradient(to right, var(--ink) 0 22px, var(--g2) 22px 30px);
  transition: width 400ms steps(8);
}

.comb-figure {
  position: relative;
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1;
  font-variation-settings: "wdth" 75, "wght" 400;
  font-feature-settings: "tnum" 1;
}

.comb-caption {
  grid-area: caption;
  margin: 0;
  align-self: end;
  font-size: 16px;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 85, "wght" 600;
}

/* ----------------------------------------------------------------- rail */

.rail {
  grid-area: rail;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

.rail-toggle { display: none; }

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}

.parked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 12px var(--bar-pad) 13px;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  min-height: 62px;
  transition: transform 90ms steps(2), background-color 90ms;
}

.parked-value {
  grid-column: 1 / -1;
  font-size: 16px;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 85, "wght" 600;
  color: #4a4a4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parked::after {
  content: "";
  grid-row: 1;
  grid-column: 2;
  width: 18px;
  height: 18px;
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
}

.parked[aria-current="page"]::after { background: var(--entangle); }

.parked[aria-current="page"] .parked-value { color: var(--ink); }

.parked:hover { background: var(--g2); }
.parked:active { transform: translate(2px, 2px); }
.parked:focus-visible { outline: var(--rule) solid var(--entangle); outline-offset: 3px; }

.parked[aria-current="page"] {
  background: var(--paper-hi);
  box-shadow: inset 7px 0 0 var(--ink);
  padding-left: calc(var(--bar-pad) + 10px);
}



/* The ghost lives in a case of its own, so it is an object
   on the desk rather than a sprite loose on the background. */
.rail-case {
  flex: 1 1 auto;
  min-height: 170px;
  border: var(--rule) solid var(--paper);
  background: var(--void-deep);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
}

.rail-ghost {
  /* 77 art pixels wide: without a width it renders at 77 css pixels and
     looks like a stray icon in its own case. */
  width: 78%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  animation: hover 7s ease-in-out infinite alternate;
}

@keyframes hover {
  from { transform: translateY(-5px); }
  to { transform: translateY(7px); }
}

/* ---------------------------------------------------------------- stage */

.stage {
  position: relative;
  padding: 0 30px 56px;
  max-width: 1880px;
  margin: 0 auto;
}

.win-stage { min-height: 420px; }

.section-lead {
  margin: 0 0 28px;
  font-size: 19px;
  max-width: 76ch;
}

.dim { color: #5d5d5d; }

/* the dot field his empty windows carry */
.empty {
  border: var(--rule) solid var(--ink);
  background-color: var(--paper-hi);
  background-image: radial-gradient(var(--g4) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  display: grid;
  place-items: center;
  padding: 58px var(--pad);
  text-align: center;
}

.empty p {
  margin: 0;
  font-size: 18px;
  background: var(--paper-hi);
  padding: 12px 22px;
  max-width: 54ch;
}

/* ------------------------------------------------------------ pair rows */

.pair-list { display: grid; gap: 18px; }

.pair-row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr) 240px;
  gap: 26px;
  align-items: center;
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  padding: 22px 26px;
}

.pair-twins {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  background: var(--void-deep);
  border: var(--rule) solid var(--ink);
  padding: 16px 8px;
}

.pair-pumpkin { width: 62px; image-rendering: pixelated; }
.pair-bolt { width: 66px; image-rendering: pixelated; filter: drop-shadow(0 0 9px rgba(68, 251, 11, 0.5)); }
.pair-stone { width: 46px; filter: none; }
.pair-twins[data-state="decohered"] .pair-pumpkin { filter: grayscale(1) brightness(0.62); }

.pair-ticker {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-variation-settings: "wdth" 75, "wght" 800;
}

.pair-name {
  margin: 2px 0 10px;
  font-size: 16px;
  color: #4a4a4a;
}

.spark {
  display: block;
  width: 100%;
  height: 56px;
  border: var(--rule) solid var(--ink);
  background: var(--g1);
  image-rendering: pixelated;
}

.pair-facts {
  margin: 12px 0 0;
  display: grid;
  gap: 6px;
}

.pair-facts div { display: flex; justify-content: space-between; gap: 16px; }

.pair-facts dt {
  font-size: 16px;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 85, "wght" 600;
  color: #4a4a4a;
}

.pair-facts dd {
  margin: 0;
  font-size: 17px;
  font-variation-settings: "wdth" 75, "wght" 700;
  font-feature-settings: "tnum" 1;
}

.pair-state { display: grid; gap: 12px; justify-items: stretch; }

.chip {
  display: block;
  text-align: center;
  padding: 10px 24px;
  font-size: 16px;
  letter-spacing: 0.08em;
  font-variation-settings: "wdth" 85, "wght" 700;
  background: var(--ink);
  color: var(--paper);
}

.chip[data-state="entangled"] {
  background: var(--entangle);
  color: var(--ink);
}

.pair-clock {
  margin: 0;
  font-size: 16px;
  text-align: center;
  color: #4a4a4a;
}

/* ----------------------------------------------------------------- form */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.field { display: grid; gap: 8px; margin-bottom: 18px; }

.field > label {
  font-size: 16px;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 85, "wght" 650;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="url"],
.field textarea,
.field select {
  font: inherit;
  font-size: 18px;
  padding: 13px 18px;
  min-height: 50px;
  border: var(--rule) solid var(--ink);
  background: var(--g1);
  color: var(--ink);
  box-shadow: inset 3px 3px 0 var(--g3);
  width: 100%;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: var(--rule) solid var(--entangle);
  outline-offset: 2px;
}

.field .hint { font-size: 16px; color: #4a4a4a; }

.twin-card {
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  padding: 24px;
  min-width: 0;
}

.twin-card h3 {
  margin: 0 0 18px;
  font-size: 22px;
  font-variation-settings: "wdth" 75, "wght" 800;
}

.plate {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 7px 18px;
  font-size: 16px;
  letter-spacing: 0.08em;
  font-variation-settings: "wdth" 85, "wght" 700;
}

.warn {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  padding: 20px 24px;
}

.warn img { width: 74px; }

.warn p { margin: 0; font-size: 18px; }

.steps {
  counter-reset: step;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  padding: 24px 26px;
}

.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-size: 52px;
  line-height: 0.95;
  font-variation-settings: "wdth" 75, "wght" 800;
}

.steps h3 {
  margin: 0 0 8px;
  font-size: 21px;
  font-variation-settings: "wdth" 80, "wght" 700;
}

.steps p { margin: 0; font-size: 18px; max-width: 70ch; }

.graves { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }

.grave {
  border: var(--rule) solid var(--ink);
  background: var(--paper-hi);
  padding: 22px 24px 26px;
  text-align: center;
}

.grave img { width: 96px; margin: 0 auto 14px; image-rendering: pixelated; }

.grave h3 { margin: 0 0 6px; font-size: 20px; font-variation-settings: "wdth" 75, "wght" 800; }

.grave p { margin: 0; font-size: 16px; color: #4a4a4a; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.table th,
.table td {
  border: var(--rule) solid var(--ink);
  padding: 14px 18px;
  text-align: left;
}

.table th {
  font-size: 16px;
  letter-spacing: 0.06em;
  font-variation-settings: "wdth" 85, "wght" 700;
  background: var(--g1);
}

.table td { font-feature-settings: "tnum" 1; }

.status {
  margin: 18px 0 0;
  font-size: 17px;
  padding: 14px 20px;
  border: var(--rule) solid var(--ink);
  background: var(--g1);
}

.status[data-tone="bad"] { background: var(--ink); color: var(--paper); }
.status[data-tone="good"] { background: var(--entangle); }

/* --------------------------------------------------------------- widths */

/* Between 1280 and 1700 the three reads and the note are too tight side by
   side, and the season cannot hold a pot and a date on one line. */
@media (max-width: 1700px) {
  .season-body {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "pot held"
      "pot closes"
      "caption caption"
      "comb comb";
    gap: 14px 22px;
  }
  .pot { width: 84px; }
}

@media (max-width: 1280px) {
  .collage {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "monitor monitor"
      "measure season"
      "rail rail";
  }
  .rail-case { display: none; }
  .rail-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    height: auto;
  }
  .rail-list li { grid-column: span 2; }
  .rail-list li:nth-child(4),
  .rail-list li:nth-child(5) { grid-column: span 3; }
  .keys-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
  .pair-state { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
}

@media (max-width: 900px) {
  :root { --pad: 24px; --bar-pad: 20px; --gutter: 16px; }
  .desk { padding: 20px 16px 28px; }
  .stage { padding: 0 16px 56px; }
  .collage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "monitor" "measure" "season" "rail";
  }
  .monitor-body {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px 26px;
  }
  .monitor-reads { gap: 26px; }
  .read-value { font-size: 30px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pair-row { grid-template-columns: minmax(0, 1fr); }
  .pair-state { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .steps li::before { font-size: 40px; }
  .season-body { grid-template-columns: 72px minmax(0, 1fr); }
  .pot { width: 72px; }

  /* the rail becomes a drawer */
  .rail-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 54px;
    padding: 13px var(--bar-pad);
    border: var(--rule) solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
  }
  .rail-list { display: none; }
  .rail[data-open="true"] .rail-list { display: flex; flex-direction: column; }
}

@media (max-width: 440px) {
  .keys-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .desk { padding: 18px 10px 24px; }
  .stage { padding: 0 10px 44px; }
  .read-value { font-size: 26px; }
  .comb-figure { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .desk-field, .rail-ghost { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* the picture picker: the browser's own control is an OS widget in the
   viewer's language, so it is hidden behind a key of this site's own */
.picker {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.picker .key { flex: 0 0 auto; }

.picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.picker-input:focus-visible + .key,
.picker .key:focus-within {
  outline: var(--rule) solid var(--entangle);
  outline-offset: 3px;
}

.picker-name {
  font-size: 16px;
  color: #4a4a4a;
  word-break: break-all;
  min-width: 0;
}

@media (max-width: 1280px) {
}

@media (max-width: 760px) {
}

/* a link inside a window is ink, like everything else on the paper */
.win-body a:not(.key):not(.parked) {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.win-body a:not(.key):not(.parked):hover { background: var(--entangle); }

.pair-title {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  font-variation-settings: "wdth" 75, "wght" 800;
}

/* 320: the two places where a monospace word is wider than its column */
@media (max-width: 760px) {
  .warn {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 14px;
    text-align: center;
  }
  .picker { flex-direction: column; align-items: stretch; }
  .picker .key { width: 100%; }
}

.win-body p,
.steps p,
.warn p,
.hint {
  overflow-wrap: break-word;
}

/* A grid column is as wide as its widest min-content, and a select or an
   input will not shrink below its own: every grid here says minmax(0, 1fr)
   and every child says it may shrink. */
.field,
.form-grid,
.entangle-form,
.twin-card,
.measure-body,
.season-body,
.pair-row,
.steps li {
  min-width: 0;
}

.field { grid-template-columns: minmax(0, 1fr); }
.field > *,
.twin-card > *,
.form-grid > *,
.pair-row > * { min-width: 0; }

.field select,
.field input,
.field textarea { max-width: 100%; }