/* --- Plain text: the field, and a paragraph or a list read back (#630) --- */

/* The box an order and a report are written in. Styled here rather than in the
   tokens so the other textareas keep what they have until they are touched. */
.plain-text-input {
  font: inherit;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  resize: vertical;
}

.plain-text-input::placeholder {
  color: var(--text-faint);
}

/* The line breaks a writer typed are kept by `pre-line` rather than parsed. */
.plain-text {
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.plain-list {
  margin: 0;
  padding-left: 1.3rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* --- Photographs and documents on an order (#387) --- */

/* A thumbnail wide enough to recognise a leaking tap in and no wider. The table
   is read down the filename column, and a picture that competes with it is the
   wall of tiles this replaced. */
.attachment__mark {
  width: 4.5rem;
}

.attachment__mark img {
  display: block;
  width: 3.4rem;
  height: 2.4rem;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sunk);
}

.attachment__typ {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* A block head is title-left, commands-right. Two commands stay together on the
   right rather than letting `space-between` push one into the middle. */
.record-block__commands {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}

.attachment__actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* --- The preview, and the way out of it (#387) --- */

/* Over the screen rather than in a browser tab: a tab is somewhere else, and
   closing it was the reader's problem rather than kontor's. Three ways out —
   the button, the scrim and Escape. */
.preview {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.preview__scrim {
  position: absolute;
  inset: 0;
  background: rgb(6 8 10 / 62%);
}

.preview__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(64rem, 100%);
  max-height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* A flex item refuses to shrink below its content and a filename is one
   unbroken word, which is the trap `.sheet__head > div` fell into first. */
.preview__name {
  min-width: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.preview__actions {
  display: flex;
  flex: none;
  gap: 0.5rem;
}

.preview__body {
  display: grid;
  place-items: center;
  gap: 0.7rem;
  padding: 1.1rem;
  background: var(--sunk);
  overflow: auto;
}

/* The window bounds the photograph rather than the photograph bounding the
   panel. A 2000-pixel edge deciding how wide the panel is was the tiles' defect
   and it does not get to follow them here. */
.preview__body img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

/* --- The Leistungsnachweis (#390) --- */

/* Work, time and material are three blocks inside one card, each with its own
   heading and its own way of adding a row. Spaced like cards without being
   cards: a border round each would read as three records rather than three
   parts of one. */
.record-block {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: 0.9rem;
}

/* One list of rows being written. Each row is its own grid of fields with the
   one control that takes it away, on the baseline of the boxes rather than of
   the labels, because that is where the eye is. It wraps rather than squeezing:
   a Zeiten row is seven fields and German labels are long. */
.record-rows {
  display: grid;
  gap: 1rem;
}

/* Ruled apart, because seven fields wrap onto two lines and without a line
   between them five technicians read as one long list of boxes. Dashed, so it
   does not compete with the solid rule that separates the three blocks. */
.record-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}

.record-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.record-row > .record-form__grid {
  flex: 1 1 18rem;
  min-width: 0;
}

/* The fold, the line's own figure and the one control that takes the line away
   share a line under the fields: a row that wrapped them in among the boxes read
   as two more fields, and on two lines of its own a ten-line invoice scrolled
   for nothing. Opening the fold pushes its fields down inside it, so the figure
   stays on the baseline of the word that opened it. */
.record-row__foot {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}

.record-row__foot > .position-more {
  flex: 1 1 auto;
  min-width: 0;
}

/* What the shut fold holds, beside the word that opens it. Dim and small,
   because it is what the line already says rather than a second label. */
.position-more__facts {
  margin-left: 0.6rem;
  color: var(--text-dim);
}

/* Never squeezed: a figure and the word that removes the line are both read,
   and at a phone's width the strip takes a line of its own instead. */
.record-row__sum {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-left: auto;
}

.record-row__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}