/* Memories: toolbar, the list, the marked summary, the reader and editor, versions. */

.mem {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s4);
  height: 100%;
  padding: var(--s5) var(--gutter);
}

/* In this view the bottom of the page is where the bulk bar and the editor's save bar are. A toast
   rises clear of them, so "Undo" never sits on top of "Move to trash" or "Save". */
html[data-view="memories"] {
  --toast-lift: 76px;
}

/* ---------------------------------------------------------------- toolbar */
/* Two lines: what is searched for, then who saved it, when, and the order. */
.mem-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.mem-search {
  flex: 1;
  min-width: 180px;
  order: 1;
}
.mem-search input::-webkit-search-cancel-button {
  appearance: none;
}
.mem-mode {
  order: 2;
}
.mem-bar > .btn {
  order: 3;
}
.mem-filters {
  order: 4;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  min-width: 0;
}
/* When it was saved: the quick ranges, then exact dates beside them. */
.mem-when {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.mem-range .seg-opt {
  white-space: nowrap;
}
.field.is-date {
  gap: var(--s2);
}
.field.is-date input {
  flex: none;
  width: 124px;
  font: 400 var(--t-small) / 1 var(--f-mono);
  color-scheme: dark;
}
.field.is-off {
  opacity: 0.62;
}
.field.is-select {
  gap: var(--s2);
  cursor: pointer;
}
.field.is-select select {
  flex: none;
  width: auto;
  padding-right: 0;
  cursor: pointer;
  font: 500 var(--t-ui) / 1 var(--f-display);
  letter-spacing: 0.02em;
}
.field.is-select option {
  background: var(--near);
  color: var(--ink);
}
.mem-sort {
  display: flex;
  gap: var(--s1);
  margin-left: auto;
}

/* ---------------------------------------------------------------- layout */
.mem-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--rail-wide) + var(--float));
  gap: var(--s4);
  min-height: 0;
}
.mem-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--s4);
  min-height: 0;
}
.mem.has-open .mem-main {
  grid-template-columns: var(--rail) minmax(0, 1fr);
}
.mem.has-open .mem-side {
  grid-template-columns: minmax(0, 1fr) var(--rail);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}
/* Loading, failed, not found, in the trash: one plane where the reader and its rail would be. */
.mem.has-open .mem-side > :only-child {
  grid-column: 1 / -1;
  align-self: start;
}
/* The rail beside an open memory: pieces, versions, details. It scrolls as one column. */
.mem-rail {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-height: 0;
  overflow: auto;
}
.mem-rail > .plane {
  flex: none;
}

/* ---------------------------------------------------------------- list */
.mem-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
}
/* The rows themselves are shared with the trash (components.css). Here they get this list's columns. */
.colhead,
.mem-list .row {
  grid-template-columns: 40px minmax(0, 1fr) 96px 76px 52px 48px 34px;
}
.colhead {
  display: grid;
  align-items: center;
  column-gap: var(--s3);
  min-height: 36px;
  margin-left: calc(var(--s3) * -1);
  border-bottom: var(--hair) solid var(--line-2);
}
.colhead .col-num,
.colhead .col-when,
.colhead .col-ver {
  font: 500 var(--t-micro) / 1.2 var(--f-display);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: right;
}
/* The line above the rows: what a search by meaning costs, a note from the server, a list gone stale. */
.mem-status {
  display: grid;
  gap: var(--s2);
  padding-bottom: var(--s3);
}
.mem-say {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.mem-say.is-warm {
  padding-left: var(--s3);
  border-left: var(--bold) solid var(--gold);
  color: var(--gold);
}
.mem-say .btn {
  flex: none;
}
.mem-say .wait {
  padding: 0;
}
.mem-working {
  display: grid;
  gap: var(--s1);
}
/* Rows that are about to be replaced by a new search stand back. */
.rows.is-waiting {
  opacity: 0.55;
}
/* After the last row: how far the list has got, and the next page. */
.rows-more {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 62px;
  margin-left: calc(var(--s3) * -1);
  padding-left: calc(40px + var(--s3) * 2);
  font: 400 var(--t-mini) / 1.3 var(--f-mono);
  color: var(--ink-3);
}
.rows-more.is-failed .rows-more-text {
  color: var(--gold);
}
.rows-more .wait {
  padding: 0;
}
/* Reaches 900 px back up the list: when any of it is in view, the next page is fetched. */
.rows-near {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 900px;
  pointer-events: none;
}
/* Rows out of sight are laid out but not drawn until they come near. A marked row floats outside
   its own box, so it is left as it is. */
.mem-list .row[data-id]:not(.is-marked) {
  content-visibility: auto;
  contain-intrinsic-size: auto 62px;
}
/* The open row: cool, because it is only being read. */
.row.is-open {
  background: var(--cyan-fill);
  box-shadow: inset var(--bold) 0 0 var(--cyan);
}
/* A marked row lifts toward the viewer: it moves up and left, gets lighter, and leaves a warm
   outline where it was. Neighbouring marked rows rise together as one slab. */
.row.is-marked {
  z-index: 1;
  background: var(--lift);
  border-bottom-color: var(--lift);
  box-shadow: inset var(--bold) 0 0 var(--gold);
  transform: translate3d(calc(var(--float-row) * -1), calc(var(--float-row) * -1), 0);
}
.row.is-marked::after {
  content: "";
  position: absolute;
  inset: 0 0 -1px 0;
  z-index: -1;
  border: var(--hair) solid var(--gold-2);
  transform: translate3d(var(--float-row), var(--float-row), 0);
  pointer-events: none;
}
.row.is-marked .row-title {
  color: var(--ink);
}

/* The bulk bar: rises from the bottom of the list when anything is marked. */
.bulk {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 60px;
  margin: 0 calc(var(--s4) * -1);
  padding: 0 var(--s4);
  background: var(--near);
  border-top: var(--bold) solid var(--gold);
  animation: bulk-arrive var(--move) var(--ease-out);
}
@keyframes bulk-arrive {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
  }
}
.bulk-count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  margin-right: var(--s3);
  font: 500 var(--t-ui) / 1 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--gold);
  white-space: nowrap;
}
.bulk-n {
  font: 400 var(--t-head) / 1 var(--f-mono);
}
.bulk-gap {
  flex: 1;
}
.narrow {
  display: none;
}

/* ---------------------------------------------------------------- marked summary */
.side-marked {
  --edge: var(--gold-line);
  --edge-cut: var(--gold);
}
.side-marked .plane-label::before {
  background: var(--gold);
}
.marked-srcs {
  gap: 4px var(--s4) !important;
}
.marked-src {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.mini {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--line);
}
.mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s2);
}
.mini-n {
  font-size: var(--t-mini);
  color: var(--gold);
}
.mini-map {
  position: relative;
  height: 236px;
}
.mini-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s3);
}
.mini-state:empty {
  display: none;
}
.keys {
  margin-top: var(--s4);
}
.keys dd {
  font: 400 var(--t-small) / 1.3 var(--f-read);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- reader */
.reader {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}
.reader-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s5) var(--s2) var(--s5);
  border-bottom: var(--hair) solid var(--line);
}
.reader-back {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: calc(var(--s2) * -1);
  color: var(--ink-2);
}
.reader-id {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
}
.reader-id .mono {
  font-size: var(--t-mini);
  color: var(--ink-3);
}
.reader-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.reader-mode {
  color: var(--gold);
}
.reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding: var(--s3) var(--s5);
  border-bottom: var(--hair) solid var(--line);
}
.reader-meta div {
  display: grid;
  gap: 4px;
}
.reader-meta dt {
  font: 500 var(--t-micro) / 1 var(--f-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reader-meta dd {
  font: 400 var(--t-small) / 1.2 var(--f-mono);
  color: var(--ink);
}
.reader-meta .src {
  color: var(--ink);
}
.reader-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--s5) var(--s5) var(--s7) 0;
}
/* Loading, failed, not found, in the trash. */
.reader.is-state {
  min-height: 220px;
}
.reader-state {
  padding: var(--s5);
}
.reader-body > .reader-state {
  padding: 0 var(--s5) 0 var(--margin-col);
}
.trashed-title {
  color: var(--ink);
}
/* Over the text of an older version: which one this is, and that it is not the current text. */
.reader-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  max-width: 62ch;
  margin: 0 0 var(--s4) var(--margin-col);
  padding: var(--s2) var(--s3);
  border-left: var(--bold) solid var(--gold);
  background: var(--gold-fill);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.reader-note .label {
  color: var(--gold);
}
.reader.is-old {
  --edge: var(--gold-line);
}
/* Memory text: the reading face, system fonts for Japanese, never wider than a comfortable line. */
.reader-text {
  position: relative;
  max-width: calc(62ch + var(--margin-col));
  padding-left: var(--margin-col);
  font: 400 var(--t-read) / 1.68 var(--f-read);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.reader-title {
  display: block;
  font: 500 var(--t-head) / 1.3 var(--f-display);
  letter-spacing: 0.02em;
}
/* Piece marks: a number in the margin on the line where each searchable piece begins. */
.piece-mark {
  position: absolute;
  left: 0;
  width: calc(var(--margin-col) - var(--s3));
  height: 28px;
  padding-right: var(--s3);
  font: 400 var(--t-micro) / 28px var(--f-mono);
  color: var(--ink-3);
  text-align: right;
}
.piece-mark::after {
  content: "";
  position: absolute;
  right: 0;
  top: 14px;
  width: 7px;
  height: 1px;
  background: var(--line-2);
}
.piece-mark:hover,
.piece-mark:focus-visible {
  color: var(--cyan);
}
.piece-mark:focus-visible {
  outline-offset: -4px;
}
.piece.is-lit {
  background: rgba(98, 221, 242, 0.13);
}

/* Editor: the same text, in place. */
.reader.is-editing {
  --edge: var(--line-3);
}
.reader.is-editing .reader-body {
  padding: 0;
  overflow: hidden;
  background: rgba(2, 6, 10, 0.45);
}
.editor {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: var(--s5) var(--s5) var(--s5) var(--margin-col);
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--t-read) / 1.68 var(--f-read);
  resize: none;
  outline: none;
}
.reader-body:focus-within {
  box-shadow: inset var(--bold) 0 0 var(--ink);
}
.reader-foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: 0 var(--s4) 0 var(--s5);
  border-top: var(--hair) solid var(--line-2);
}
.edit-state {
  font: 500 var(--t-micro) / 1 var(--f-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.edit-state.is-warm {
  color: var(--gold);
}
.edit-count {
  font-size: var(--t-mini);
  color: var(--ink-3);
}
.edit-count.is-warm {
  color: var(--gold);
}
.edit-state,
.edit-count {
  white-space: nowrap;
}
/* The text being typed into is framed, like any other field that has the keyboard. */
.editor:focus-visible {
  box-shadow: inset 0 0 0 var(--hair) var(--line-3);
}
.editor[readonly] {
  opacity: 0.6;
}
/* Beside the text being edited: the memory changed, or went, somewhere else. The text is not touched. */
.edit-notice {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4) var(--s2) var(--s5);
  border-bottom: var(--hair) solid var(--gold-line);
  background: var(--gold-fill);
}
.edit-notice-text {
  flex: 1;
  font-size: var(--t-small);
  color: var(--ink-2);
}
.edit-notice strong {
  font: 500 var(--t-small) / 1.3 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--gold);
}
.edit-notice .btn {
  flex: none;
}
/* The conflict: what was saved elsewhere against what was typed here, in the editor's place. */
.conflict {
  display: grid;
  align-content: start;
  gap: var(--s4);
  height: 100%;
  overflow: auto;
  padding: var(--s5);
}
.conflict-pick {
  justify-self: start;
}
.conflict-pane {
  display: grid;
  gap: var(--s3);
  max-width: 76ch;
}
.conflict-pane .reader-text {
  padding-left: 0;
  font-size: var(--t-ui);
}
.conflict-key {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  font-size: var(--t-mini);
}
.conflict-key .diff-sum {
  margin-left: auto;
}
.conflict .hunk-text {
  font-size: var(--t-ui);
}
.reader-foot.is-conflict {
  flex-wrap: wrap;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

/* ---------------------------------------------------------------- versions */
.vers-plane {
  display: flex;
  flex-direction: column;
}
.vers {
  display: grid;
}
.ver {
  position: relative;
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto auto;
  grid-template-areas: "node n when delta chars" "node . src src date";
  align-items: center;
  gap: var(--s1) var(--s2);
  width: 100%;
  min-height: 54px;
  padding: var(--s2) var(--s2) var(--s2) 0;
  border-top: var(--hair) solid var(--line);
  text-align: left;
  cursor: pointer;
}
.ver[disabled] {
  cursor: default;
}
li:first-child > .ver {
  border-top: 0;
}
/* The rail that joins the versions, newest at the top. */
.ver::before {
  content: "";
  position: absolute;
  left: 8.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}
li:first-child > .ver::before {
  top: 50%;
}
li:last-child > .ver::before {
  bottom: 50%;
}
.ver-node {
  grid-area: node;
  position: relative;
  justify-self: center;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  background: var(--plane);
}
.ver.is-current .ver-node {
  border-color: var(--cyan);
  background: var(--cyan);
}
.ver.is-picked {
  background: var(--cyan-fill);
}
.ver.is-picked .ver-node {
  border-color: var(--ink);
  background: var(--ink);
}
.ver:not([disabled]):hover {
  background: var(--cyan-fill);
}
.ver:focus-visible {
  outline-offset: -2px;
}
.ver-n {
  grid-area: n;
  font: 400 var(--t-small) / 1 var(--f-mono);
  color: var(--ink);
}
.ver-when {
  grid-area: when;
  font: 500 var(--t-small) / 1 var(--f-display);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.ver.is-current .ver-when {
  color: var(--cyan);
}
/* How much the version changed the size of the text: "+230". */
.ver-delta {
  grid-area: delta;
  font: 400 var(--t-mini) / 1 var(--f-mono);
  color: var(--ink-3);
  text-align: right;
}
.ver-delta.is-more {
  color: var(--cyan);
}
.ver-delta.is-less {
  color: var(--ink-2);
}
.ver-chars {
  grid-area: chars;
  min-width: 78px;
  font-size: var(--t-mini);
  color: var(--ink-2);
  text-align: right;
}
.ver .src {
  grid-area: src;
  font-size: var(--t-mini);
  color: var(--ink-3);
}
.ver-date {
  grid-area: date;
  font: 400 var(--t-micro) / 1 var(--f-mono);
  color: var(--ink-3);
  text-align: right;
}
.ver-strip {
  display: none;
}

/* Comparison: what was added is lit; what was removed is struck and dim. No red: nothing is destroyed. */
.diff {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--line-2);
}
.diff-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}
.diff-sum {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  font: 400 var(--t-mini)/1 var(--f-mono);
}
ins {
  background: rgba(98, 221, 242, 0.2);
  box-shadow: inset 0 -1px 0 var(--cyan);
  color: var(--ink);
  text-decoration: none;
}
del {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--ink-3);
}
.diff-sum ins,
.diff-sum del {
  background: none;
  box-shadow: none;
  text-decoration: none;
}
.diff-sum ins {
  color: var(--cyan);
}
.hunks {
  display: grid;
  gap: var(--s3);
}
.hunk {
  display: grid;
  gap: var(--s1);
  padding-left: var(--s3);
  border-left: var(--bold) solid var(--line-2);
}
.hunk.is-added {
  border-left-color: var(--cyan);
}
.hunk-line {
  font: 400 var(--t-micro) / 1.2 var(--f-mono);
  color: var(--ink-3);
}
.hunk-text {
  font: 400 var(--t-small) / 1.55 var(--f-read);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.diff-actions {
  display: grid;
  gap: var(--s2);
  justify-items: start;
  padding-top: var(--s1);
}
.diff-note {
  font-size: var(--t-mini);
  color: var(--ink-3);
}
.diff .seg-ctl {
  justify-self: start;
}

/* ---------------------------------------------------------------- pieces and details (the rail) */
/* The memory's searchable pieces as a bar the length of the text; each cell is as long as its piece. */
.pcs {
  display: flex;
  gap: 2px;
  height: 28px;
}
.pcs-cell {
  flex: var(--len, 1) 1 0;
  display: grid;
  place-items: center;
  min-width: 3px;
  overflow: hidden;
  background: var(--cyan-fill-2);
  box-shadow: inset 0 calc(var(--bold) * -1) 0 var(--cyan-2);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-micro);
}
.pcs-cell:hover,
.pcs-cell:focus-visible {
  background: var(--cyan);
  color: var(--void);
}
.pcs-cell:focus-visible {
  outline-offset: 1px;
}
/* Many pieces: a grid of small cells, in reading order. */
.pcs.is-dense {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9px, 1fr));
  height: auto;
}
.pcs.is-dense .pcs-cell {
  height: 14px;
}
.pcs-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s2);
  font-size: var(--t-micro);
  color: var(--ink-3);
}
.plane-foot.is-first {
  margin-top: 0;
}
.det .mono {
  font-size: var(--t-mini);
}
.det-hash {
  color: var(--ink-2);
}
@media (pointer: coarse) {
  .pcs {
    height: 40px;
  }
  .pcs.is-dense {
    height: auto;
  }
  .pcs.is-dense .pcs-cell {
    height: 24px;
  }
}

/* ---------------------------------------------------------------- compact list beside an open memory */
.mem.has-open .colhead {
  grid-template-columns: 40px minmax(0, 1fr);
}
.mem.has-open .colhead .label:not(.col-text),
.mem.has-open .row > .col-src,
.mem.has-open .row > .col-when,
.mem.has-open .row > .col-num,
.mem.has-open .row > .col-ver {
  display: none;
}
.mem.has-open .row {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 58px;
}
.mem.has-open .row-text {
  -webkit-line-clamp: 1;
  font-size: var(--t-ui);
}
.mem.has-open .row-rest {
  display: none;
}
/* Beside an open memory the bulk bar uses its short labels, as it does on a phone. */
.mem.has-open .wide {
  display: none;
}
.mem.has-open .narrow {
  display: inline;
}
.mem.has-open .bulk {
  gap: 0;
}
.mem.has-open .bulk-count {
  margin-right: var(--s1);
}
.mem.has-open .row-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s1);
  font: 400 var(--t-micro) / 1 var(--f-mono);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- medium widths */
@media (max-width: 1240px) and (min-width: 1041px) {
  .mem-main {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .mem.has-open .mem-main {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .mem.has-open .mem-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2.2fr) minmax(150px, 1fr);
  }
  .colhead,
  .mem-list .row {
    grid-template-columns: 40px minmax(0, 1fr) 96px 76px 34px;
  }
  .colhead .col-num,
  .row > .col-num {
    display: none;
  }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 1040px) {
  .mem {
    display: block;
    height: auto;
    padding: var(--s3) var(--gutter) var(--s5);
  }
  .mem-bar {
    flex-wrap: wrap;
    gap: var(--s2);
  }
  .mem-search {
    flex: 1 1 0;
    order: 1;
  }
  .mem-bar > .btn {
    order: 2;
  }
  .mem-mode {
    order: 3;
    display: flex;
    width: 100%;
  }
  .mem-mode .seg-opt {
    flex: 1;
  }
  .mem-filters {
    order: 4;
    flex-wrap: nowrap;
    flex-basis: auto;
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mem-filters > * {
    flex: none;
  }
  .mem-sort {
    margin-left: 0;
  }
  .mem-say {
    flex-wrap: wrap;
  }
  .rows-more {
    flex-wrap: wrap;
    padding: var(--s3) 0 var(--s3) calc(40px + var(--s2));
  }
  .mem-main,
  .mem.has-open .mem-main {
    display: block;
    margin-top: var(--s3);
  }
  .mem-side {
    display: none;
  }
  .mem.has-open .mem-bar,
  .mem.has-open .mem-list {
    display: none;
  }
  .mem.has-open {
    padding-top: var(--s2);
  }
  .mem.has-open .mem-side {
    display: block;
  }
  /* Under the reader on a phone: pieces and details. The versions are the strip of chips above the text. */
  .mem-rail {
    overflow: visible;
    margin-top: var(--s4);
  }
  .mem-list {
    padding: var(--s3) var(--s3) 0 var(--s3);
  }
  .colhead,
  .mem-list .row,
  .mem.has-open .row {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .mem-list .row[data-id]:not(.is-marked) {
    contain-intrinsic-size: auto 96px;
  }
  .colhead {
    column-gap: var(--s1);
    margin-left: calc(var(--s2) * -1);
  }
  .colhead .label:not(.col-text) {
    display: none;
  }
  .bulk {
    position: sticky;
    bottom: 0;
    margin: 0 calc(var(--s3) * -1);
    padding: 0 var(--s3);
    gap: 0;
  }
  .bulk-count {
    margin-right: var(--s1);
  }
  .wide {
    display: none;
  }
  .narrow {
    display: inline;
  }

  .reader {
    display: block;
  }
  .reader-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0 var(--s2) 0 var(--s4);
    background: var(--near);
  }
  .reader-back {
    display: grid;
  }
  .reader-id .mono {
    display: none;
  }
  .reader-actions .btn {
    width: 40px;
    padding: 0;
  }
  .reader-actions .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .reader-meta {
    gap: var(--s3) var(--s4);
    padding: var(--s3) var(--s4);
  }
  .reader-body {
    overflow: visible;
    padding: var(--s4) var(--s4) var(--s6) 0;
  }
  .reader-text {
    padding-left: var(--margin-col);
  }
  /* On a phone the piece numbers are labels, not buttons: "On the map" in the header does the same. */
  .piece-mark {
    width: calc(var(--margin-col) - var(--s2));
    padding-right: var(--s2);
    pointer-events: none;
  }
  .piece-mark::after {
    width: 4px;
  }
  .editor {
    min-height: 60vh;
    padding: var(--s4);
  }
  .reader-note {
    margin-left: var(--s4);
  }
  .reader-body > .reader-state {
    padding: 0 0 0 var(--s4);
  }
  .edit-notice {
    flex-wrap: wrap;
    padding: var(--s3) var(--s4);
  }
  .conflict {
    height: auto;
    overflow: visible;
    padding: var(--s4);
  }
  .reader-foot.is-conflict .btn {
    flex: 1 1 auto;
  }
  /* The save bar takes two lines on a phone: what changed, then what to do about it. */
  .reader-foot {
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding: var(--s3) var(--s4);
  }
  .reader-foot .bulk-gap {
    flex-basis: 100%;
    height: 0;
  }
  .reader-foot .btn.is-quiet {
    margin-left: auto;
  }
  .vers-plane {
    display: none;
  }
  .ver-strip {
    display: grid;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-bottom: var(--hair) solid var(--line);
  }
  .ver-chips {
    display: flex;
    gap: var(--s2);
    margin: 0 calc(var(--s4) * -1);
    padding: 0 var(--s4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ver-chip {
    flex: none;
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px var(--s2);
    align-items: center;
    min-height: 48px;
    padding: var(--s2) var(--s3);
    border: var(--hair) solid var(--line-2);
    text-align: left;
  }
  .ver-chip {
    grid-template-areas: "n when" "src delta";
  }
  .ver-chip .ver-n {
    grid-area: n;
  }
  .ver-chip-when {
    grid-area: when;
  }
  .ver-chip .src {
    grid-area: src;
    font-size: var(--t-mini);
    color: var(--ink-3);
  }
  .ver-chip-delta {
    grid-area: delta;
    font: 400 var(--t-micro) / 1 var(--f-mono);
    color: var(--ink-3);
    text-align: right;
  }
  .ver-chip-when {
    font: 500 var(--t-mini)/1 var(--f-display);
    color: var(--ink-2);
  }
  .ver-chip.is-current {
    border-color: var(--cyan);
    background: var(--cyan-fill);
  }
  .ver-chip.is-current .ver-chip-when {
    color: var(--cyan);
  }
  .ver-chip.is-picked {
    border-color: var(--ink);
    background: var(--cyan-fill-2);
  }
  .ver-strip .diff {
    margin-top: var(--s2);
  }
}