/* Drift: one sheet of an engineer's computation pad.
   Every length is a whole number of grid squares (--sq) so the page sits on its
   own ruling. Layout numbers are set by src/layout.js. */

@font-face {
  font-family: 'ISO';
  src: url('fonts/osifont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Pad';
  src: url('fonts/barlow-semi-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pad';
  src: url('fonts/barlow-semi-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: oklch(93.4% 0.036 139);
  --paper-deep: oklch(89.5% 0.045 142);
  --rule: oklch(80% 0.06 151 / 0.55);
  --rule-major: oklch(71% 0.08 153 / 0.62);
  --print: oklch(45% 0.085 156);
  --ink: oklch(22% 0.025 165);
  --graphite: oklch(43% 0.012 175);
  --red: oklch(50% 0.175 27);
  --red-wash: oklch(58% 0.16 27 / 0.28);

  --sq: 20px;
  --row: 20px;
  --bgx: 0px;
  --fs: 15px;
  --fs-print: 12px;

  /* The wide sheet, until src/layout.js measures the window. */
  --cols: 72;
  --margin-rule: 4;
  --c-from: 6;
  --c-to: 72;
  --head-cols: 66;
  --hp: 44;
  --hd: 11;
  --hs: 11;
  --f1-from: 6;
  --f1-to: 54;
  --stage-w: 48;
  --stage-h: 30;
  --m-from: 56;
  --m-to: 72;
  --m-grid: 1fr;
  --f2-grid: repeat(2, calc(var(--sq) * 32));
  --plot-w: 32;
  --plot-h: 22;
  --log-grid: calc(var(--sq) * 38) 1fr;
  --notes-w: 34;
  --foot-grid: repeat(2, calc(var(--sq) * 22));

  color-scheme: light;
  accent-color: var(--red);
}

* { box-sizing: border-box; }

html {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--rule-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule-major) 1px, transparent 1px),
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size:
    calc(var(--sq) * 5) calc(var(--sq) * 5),
    calc(var(--sq) * 5) calc(var(--sq) * 5),
    var(--sq) var(--sq),
    var(--sq) var(--sq);
  background-position: var(--bgx) 0;
  scrollbar-color: var(--print) var(--paper);
  scrollbar-width: thin;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'ISO', 'Segoe UI', sans-serif;
  font-size: var(--fs);
  line-height: var(--row);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--red-wash); color: var(--ink); }

a {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
a:hover { color: var(--red); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

p { margin: 0; }
h1, h2 { margin: 0; font-weight: inherit; }
sub, sup { line-height: 0; font-size: 0.72em; }

b { font-weight: inherit; text-decoration: underline; text-decoration-color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Printed pad furniture: condensed caps in the ruling's green. */
.print {
  display: block;
  font-family: 'Pad', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: var(--fs-print);
  line-height: var(--sq);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--print);
}

/* --- sheet ------------------------------------------------------------- */

.sheet {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--sq));
  margin-left: var(--bgx);
  padding-bottom: calc(var(--sq) * 4);
}

/* Red margin rule. */
.sheet::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sq) * var(--margin-rule));
  width: 1.5px;
  background: var(--red);
  opacity: 0.75;
}

.sheet > * { grid-column: var(--c-from) / var(--c-to); }

/* --- header ------------------------------------------------------------ */

.head {
  margin-top: var(--sq);
  display: grid;
  grid-template-columns: repeat(var(--head-cols), var(--sq));
  grid-auto-rows: var(--sq);
}

.box {
  position: relative;
  outline: 1px solid var(--print);
  outline-offset: -0.5px;
  padding: 3px 12px 0;
  min-width: 0;
}
.box .entry {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-project { grid-column: 1 / span var(--hp); grid-row: 1 / span 3; }
.box-date { grid-column: span var(--hd); grid-row: 1 / span 3; }
.box-sheet { grid-column: span var(--hs); grid-row: 1 / span 3; }
.box-subject { grid-column: 1 / span var(--hp); grid-row: 4 / span 2; }
.box-source { grid-column: span calc(var(--hd) + var(--hs)); grid-row: 4 / span 2; }

.box-date .entry, .box-sheet .entry { line-height: calc(var(--sq) * 2); font-size: calc(var(--fs) * 1.15); }

h1 {
  display: flex;
  align-items: baseline;
  gap: calc(var(--sq) * 0.8);
  line-height: calc(var(--sq) * 2);
  white-space: nowrap;
}
h1 .title {
  font-size: calc(var(--sq) * 2.1);
  letter-spacing: 0.01em;
  line-height: calc(var(--sq) * 2);
}
h1 .tag { font-size: calc(var(--fs) * 1.15); }

/* --- Fig. 1 ------------------------------------------------------------- */

.fig1 { margin-top: var(--sq); grid-column: var(--f1-from) / var(--f1-to); }
.stage { position: relative; width: calc(var(--sq) * var(--stage-w)); height: calc(var(--sq) * var(--stage-h)); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

.caption { margin-top: var(--sq); max-width: calc(var(--sq) * 46); }
.caption p + p { margin-top: var(--sq); }

.layers {
  margin: var(--sq) 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sq);
}
.layers legend { float: left; margin-right: calc(var(--sq) * 0.6); padding: 0; }
.layers label { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; white-space: nowrap; }

input[type='checkbox'] {
  appearance: none;
  margin: 0;
  width: calc(var(--sq) * 0.7);
  height: calc(var(--sq) * 0.7);
  outline: 1px solid var(--print);
  outline-offset: -1px;
  background: transparent;
  cursor: pointer;
  flex: none;
}
input[type='checkbox']:checked {
  background: no-repeat center / 90% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 L5.6 10.6 L11.8 2.6' fill='none' stroke='%230f1e18' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type='checkbox']:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* --- margin column: settings and readings -------------------------------- */

.margin {
  margin-top: var(--sq);
  grid-column: var(--m-from) / var(--m-to);
  display: grid;
  align-content: start;
  grid-template-columns: var(--m-grid);
  column-gap: calc(var(--sq) * 2);
}
.margin > * { min-width: 0; }
.margin .group { min-width: 0; }

.margin h2 + .setting { margin-top: 0; }
.setting { margin: 0 0 var(--sq); padding: 0; border: 0; min-inline-size: 0; }
.setting-head label, .setting > label, .setting > legend { display: block; padding: 0; color: var(--graphite); }
.setting-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sq);
  height: calc(var(--sq) * 2);
}
.setting-head label { line-height: calc(var(--sq) * 2); }
.setting > legend #view-name { color: var(--ink); }

.big {
  display: block;
  font-size: calc(var(--sq) * 1.45);
  line-height: calc(var(--sq) * 2);
}

.scale {
  position: relative;
  height: calc(var(--sq) * 2);
}
.scale .ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sq);
  height: var(--sq);
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--fs) * 0.8);
  color: var(--graphite);
  pointer-events: none;
}
.scale .ticks i { font-style: normal; width: 0; display: flex; justify-content: center; }

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--sq);
  margin: 0;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 calc(100% - 1px) / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 100%) 0 100% / calc((100% - 1px) / var(--ticks, 14)) 40% repeat-x;
  cursor: ew-resize;
}
input[type='range']::-webkit-slider-runnable-track { height: var(--sq); background: transparent; }
input[type='range']::-moz-range-track { height: var(--sq); background: transparent; }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: var(--sq);
  border: 0;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M7 0 V20' stroke='%23b12725' stroke-width='1.6'/%3E%3Cpath d='M2 0 H12 L7 7 Z' fill='%23b12725'/%3E%3C/svg%3E");
}
input[type='range']::-moz-range-thumb {
  width: 14px;
  height: var(--sq);
  border: 0;
  border-radius: 0;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' preserveAspectRatio='none'%3E%3Cpath d='M7 0 V20' stroke='%23b12725' stroke-width='1.6'/%3E%3Cpath d='M2 0 H12 L7 7 Z' fill='%23b12725'/%3E%3C/svg%3E");
}
input[type='range']:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.scale .mark {
  position: absolute;
  top: var(--sq);
  transform: translateX(-50%);
  line-height: var(--sq);
  font-size: calc(var(--fs) * 0.85);
  color: var(--red);
  pointer-events: none;
  transition: left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scale .mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--sq) * -0.75);
  height: calc(var(--sq) * 0.75);
  border-left: 1.5px solid var(--red);
}
.scale .ticks i.yield { visibility: hidden; }
.scale .spark {
  position: absolute;
  top: calc(var(--sq) * 0.45);
  height: calc(var(--sq) * 0.55);
  right: 0;
  background: repeating-linear-gradient(-45deg, var(--red) 0 1.2px, transparent 1.2px 5px);
  opacity: 0.8;
  pointer-events: none;
}

.views .view-row { display: flex; gap: var(--sq); }
.view {
  position: relative;
  display: grid;
  justify-items: center;
  cursor: pointer;
  color: var(--graphite);
}
.view input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.view svg { display: block; width: calc(var(--sq) * 4); height: calc(var(--sq) * 3); color: currentColor; }
.view span { line-height: var(--sq); text-align: center; }
.view:has(input:checked) { color: var(--ink); }
.view:has(input:checked) span {
  color: var(--red);
  outline: 1.5px solid var(--red);
  border-radius: 50%;
  padding: 0 0.45em;
}
.view:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.view:hover { color: var(--ink); }
.view-name { color: var(--graphite); }

.wire { color: var(--graphite); }
.scrub {
  color: var(--ink);
  cursor: ew-resize;
  border-bottom: 1.5px dotted var(--red);
  padding: 0 0.1em;
  touch-action: none;
  user-select: none;
}
.scrub:hover { color: var(--red); }

.readings { margin: 0 0 var(--sq); }
.readings div { display: flex; align-items: baseline; }
.readings dt { display: flex; flex: 1; color: var(--graphite); white-space: nowrap; }
.readings dt::after {
  content: '';
  flex: 1;
  min-width: var(--sq);
  margin: 0 0.4em;
  background: radial-gradient(circle, var(--print) 0.8px, transparent 1.2px) 0 72% / 6px 6px repeat-x;
  opacity: 0.8;
}
.readings dd { margin: 0; white-space: nowrap; text-align: right; }

/* Pencil until settled, ink when steady. */
.pencil { color: var(--graphite); transition: color 600ms ease-out; }
.inked { color: var(--ink); transition: color 600ms ease-out; }
.corona-on { color: var(--red); }

.status { margin-bottom: var(--sq); color: var(--graphite); }
.status.inked { color: var(--ink); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sq);
}
.actions button { min-width: calc(var(--sq) * 7); }
.margin .actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 calc(var(--sq) * 0.5);
}
.margin .actions button { min-width: 0; padding: 0 4px; letter-spacing: 0.05em; }

button {
  font-family: 'Pad', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: calc(var(--fs-print) * 1.12);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  height: calc(var(--sq) * 2);
  margin-bottom: var(--sq);
  padding: 0 calc(var(--sq) * 0.6);
  cursor: pointer;
  white-space: nowrap;
}
button:hover { background: var(--paper-deep); }
button:active { background: var(--ink); color: var(--paper); }
button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
button:disabled { color: var(--graphite); outline-color: var(--graphite); cursor: default; background: transparent; }

/* --- Fig. 2 ------------------------------------------------------------- */

.fig2 {
  margin-top: calc(var(--sq) * 2);
  display: grid;
  grid-template-columns: var(--f2-grid);
  column-gap: var(--sq);
  row-gap: 0;
}
.fig2 .plot { position: relative; width: calc(var(--sq) * var(--plot-w)); height: calc(var(--sq) * var(--plot-h)); }
.fig2 .plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig2 .caption { grid-column: 1 / -1; }
.verdict { color: var(--ink); }

/* --- log and bench ------------------------------------------------------- */

.log {
  margin-top: calc(var(--sq) * 3);
  display: grid;
  grid-template-columns: var(--log-grid);
  column-gap: calc(var(--sq) * 2);
  align-items: start;
}
.log > * { min-width: 0; }

table { border-collapse: collapse; width: 100%; margin-bottom: var(--sq); }
th {
  font-family: 'Pad', 'Arial Narrow', sans-serif;
  font-weight: 600;
  font-size: var(--fs-print);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--print);
  text-align: right;
  height: var(--row);
  padding: 0 0.5em;
  white-space: nowrap;
}
th .unit { text-transform: none; letter-spacing: 0.02em; }
td { height: var(--row); padding: 0 0.5em; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th:nth-child(4), td:nth-child(4) { text-align: center; }
tbody tr.pending td { color: var(--graphite); }
tbody tr.fresh td { animation: ink-in 900ms ease-out; }
@keyframes ink-in { from { color: var(--graphite); } to { color: var(--ink); } }
.empty { color: var(--graphite); margin-bottom: var(--sq); }

.bench p { margin-bottom: var(--sq); }
.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sq) * 3);
  outline: 1.5px dashed var(--print);
  outline-offset: -1px;
  color: var(--graphite);
  cursor: pointer;
  margin-bottom: var(--sq);
  text-align: center;
}
.drop:hover, .drop.over { background: var(--paper-deep); color: var(--ink); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop:has(input:focus-visible) { outline: 2px solid var(--red); }
.paste-label { display: block; color: var(--graphite); }
textarea {
  display: block;
  width: 100%;
  margin: 0 0 var(--sq);
  padding: 0 0.5em;
  font: inherit;
  line-height: var(--row);
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 1px solid var(--print);
  outline-offset: -1px;
  resize: vertical;
  caret-color: var(--red);
}
textarea::placeholder { color: var(--graphite); opacity: 1; }
textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 0; }
.bench-fit { color: var(--red); }

/* --- method notes --------------------------------------------------------- */

.notes { margin-top: calc(var(--sq) * 3); }
.note-body { max-width: calc(var(--sq) * var(--notes-w)); }
.note-body p + p { margin-top: var(--sq); }
[data-layout='wide'] .note-body {
  max-width: none;
  columns: 2;
  column-gap: calc(var(--sq) * 3);
}
[data-layout='wide'] .note-body p { break-inside: avoid; }

.foot {
  margin-top: calc(var(--sq) * 3);
  display: grid;
  grid-template-columns: var(--foot-grid);
  grid-auto-rows: auto;
  column-gap: 0;
}
.foot .box { height: calc(var(--sq) * 3); }
.foot .box .entry { line-height: calc(var(--sq) * 2); }
.colophon { grid-column: 1 / -1; margin-top: var(--sq); color: var(--graphite); }

.defs { position: absolute; }

/* --- narrow sheets: text skips a line --------------------------------------- */

[data-layout='narrow'] .box-project { grid-column: 1 / -1; grid-row: 1 / span 6; }
[data-layout='narrow'] .box-date { grid-column: 1 / span var(--hd); grid-row: 7 / span 3; }
[data-layout='narrow'] .box-sheet { grid-column: span var(--hs); grid-row: 7 / span 3; }
[data-layout='narrow'] .box-subject { grid-column: 1 / -1; grid-row: 10 / span 5; }
[data-layout='narrow'] .box-subject .entry { white-space: normal; }
[data-layout='narrow'] .box-source { grid-column: 1 / -1; grid-row: 15 / span 3; }
[data-layout='narrow'] h1 { flex-direction: column; align-items: flex-start; gap: 0; line-height: var(--row); }
[data-layout='narrow'] h1 .title { font-size: calc(var(--sq) * 2.6); line-height: calc(var(--sq) * 3); }
[data-layout='narrow'] h1 .tag { font-size: var(--fs); line-height: var(--row); }
[data-layout='narrow'] .box { padding: 3px 10px 0; }
[data-layout='narrow'] .box-date .entry, [data-layout='narrow'] .box-sheet .entry { line-height: var(--row); font-size: var(--fs); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}