/* Mimir field notes: the try-fail-improve log, the tradeoffs table, the layer figure.
   Loaded only on /work/memory/, after engine.css (it reuses .chips and .cap). */

/* ===== 2.x side figures ===== */
.harness { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.harness li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--hair); color: var(--ink); font-size: 15px; }
.harness .lbl { color: var(--ink); }

.layers { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 4px; }
.layers li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s2); align-items: baseline;
  border: 1px solid var(--ink); background: var(--sheet); padding: 7px 10px 8px; color: var(--ink);
}
.layers .lbl { color: var(--ink); grid-row: 1 / 3; }
.layers .t { font-weight: 600; font-size: 15px; line-height: 1.25; }
.layers .d { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.layers .l1 { width: 62%; }
.layers .l2 { width: 81%; }
.layers .l3 { width: 100%; border-width: 1.5px; background: var(--paper); }

/* ===== 3.0 the log ===== */
.eplog-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s4); }
.eplog-bar[hidden] { display: none; }
.eplog-bar > .lbl { color: var(--ink); }
.eps { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.ep { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--ink); }
@media (min-width: 720px) { .ep { grid-template-columns: 9rem minmax(0, 1fr); column-gap: var(--s5); } }
.ep-when { display: flex; gap: var(--s3); align-items: baseline; }
@media (min-width: 720px) { .ep-when { display: grid; gap: 4px; align-content: start; padding-top: 6px; } }
.ep-n { color: var(--ink); }
.ep-date { font: 500 14px/1.2 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ep-body h3 { margin: 0 0 var(--s3); font-size: clamp(21px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }

.ep-lines { margin: 0; max-width: 46rem; }
.ep-lines > div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-top: 1px dotted var(--hair); }
@media (max-width: 420px) { .ep-lines > div { grid-template-columns: 5.6rem minmax(0, 1fr); gap: var(--s2); } }
.ep-lines dt { margin: 0; justify-self: start; padding: 4px 6px 3px; border: 1px solid var(--ink); color: var(--ink); line-height: 1; white-space: nowrap; }
.ep-lines dd { margin: 0; font-size: 16px; line-height: 1.45; }
.ep-lines .k-failed dt { background: var(--red); border-color: var(--red); color: var(--on-red); }
.ep-lines .k-changed dt { background: var(--ink); color: var(--bg); }
.ep-lines .k-words dt { background: transparent; border-color: var(--red); color: var(--red-ink); }
.ep-lines .k-words dd { font-style: italic; border-left: 2px solid var(--ink); padding-left: var(--s3); }
.ep-lines q { quotes: "\201C" "\201D"; }
.ep-lines .k-changed dd { font-weight: 500; }

/* the toggle: read only one kind of line */
.eplog[data-show="failed"] .ep-lines > div:not(.k-failed),
.eplog[data-show="changed"] .ep-lines > div:not(.k-changed) { display: none; }
.eplog[data-show="failed"] .ep-lines > div:first-child,
.eplog[data-show="changed"] .ep-lines > div:first-child { border-top: 0; }

/* hit meter: 32 cells, filled to --n */
.hits { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px var(--s2); align-items: center; margin: var(--s3) 0 var(--s1); max-width: 24rem; }
.hits .lbl { color: var(--ink); }
.hit-v { text-align: right; font-variant-numeric: tabular-nums; }
.hit-row {
  position: relative; display: block; height: 12px;
  background: linear-gradient(to right, var(--hair-2) 0 calc(100% - 2px), transparent 0) 0 0 / calc(100% / 32) 100% repeat-x;
}
.hit-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) / 32 * 100%);
  background: linear-gradient(to right, var(--ink) 0 calc(100% - 2px), transparent 0) 0 0 / calc(100% / var(--n)) 100% repeat-x;
}

/* ===== 4.0 tradeoffs ===== */
.trade { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ink); font-size: 15.5px; line-height: 1.4; }
.trade thead th { text-align: left; color: var(--ink); padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--ink); font-weight: 500; }
.trade tbody th, .trade td { text-align: left; vertical-align: top; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--hair); }
.trade tbody th { font-weight: 600; width: 22%; }
.trade .tn { display: block; margin-bottom: 4px; font-weight: 500; }
.trade td:nth-of-type(1) { font-weight: 500; width: 24%; }
.trade td:nth-of-type(2) { color: var(--ink-2); width: 18%; }
.trade q { quotes: "\201C" "\201D"; font-style: italic; }
@media (max-width: 719px) {
  .trade, .trade tbody, .trade tr, .trade th, .trade td { display: block; width: auto !important; }
  .trade thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .trade tbody tr { padding: var(--s3) 0; border-bottom: 1px solid var(--ink); }
  .trade tbody th { border: 0; padding: 0 0 var(--s2); font-size: 18px; }
  .trade td { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: var(--s2); padding: 6px 0; border-bottom: 1px dotted var(--hair); }
  .trade td:last-child { border-bottom: 0; }
  .trade td::before { content: attr(data-k); font: 500 10.5px/1.9 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
}

/* ===== 6.0 principles ===== */
.princ { list-style: none; margin: 0 0 var(--s5); padding: 0; border-top: 1px solid var(--ink); }
.princ li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
.princ li .lbl { color: var(--ink); }
.princ p { margin: 0 !important; max-width: 34em !important; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.25; letter-spacing: -.012em; }
.princ strong { font-weight: 600; }