html {
  font-size: 14px;
  font-family: "Segoe UI", "Nirmala UI", "Leelawadee UI", "Malgun Gothic", "Microsoft YaHei", sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
  font-family: "Segoe UI", "Nirmala UI", "Leelawadee UI", "Malgun Gothic", "Microsoft YaHei", sans-serif;
}

/* Path of a recently opened file. Long paths wrap inside the recent-file table. */
.recent-path {
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #495057;
}

/* Open and the trash icon sit on one line. The trash removes the row from the recent list. */
.recent-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}

.recent-actions form {
  margin: 0;
}

.icon-trash {
  width: 1rem;
  height: 1rem;
  display: block;
}

.server-path {
  word-break: break-all;
}

.machine-saved {
  list-style: none;
  margin: 0;
  padding: 0;
}

.machine-saved li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.35rem 0;
}

.machine-saved form {
  margin: 0;
}

.machine-provider {
  width: auto;
  max-width: 14rem;
}

.machine-preferred {
  gap: 0.5rem;
}

.match-score.is-at {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.document-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.document-meta {
  margin-bottom: 0.25rem;
  color: #495057;
}

.status-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

.status-summary li {
  background: #eef3f8;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.translation-note {
  color: #495057;
}

.save-status {
  min-height: 1.25rem;
  margin: 0 0 0.75rem;
  color: #b02a37;
}

.save-status.is-saved {
  color: #146c43;
}

.memory-update {
  margin: 0 0 0.75rem;
}

.memory-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.875rem;
}

.memory-field input {
  width: 14rem;
  max-width: 100%;
}

.memory-update-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.memory-update-list label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.editor-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Match window for the segment that has the cursor. Width and height are dragged, then remembered.
   It stays at the top of the window while the segment table scrolls. */
.match-pane {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 42rem;
  height: 12rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem;
  border: 1px solid #d5dbe3;
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.match-pane-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.5rem 0.75rem 0;
}

.match-pane-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.match-memory {
  margin: 0.35rem 0.75rem;
  color: #495057;
  font-size: 0.875rem;
}

.match-memory ul {
  margin: 0;
  padding-left: 1.1rem;
}

.match-results {
  flex: 1;
  overflow: auto;
  margin: 0 0.75rem 0.6rem;
}

.match-table {
  width: 100%;
  margin: 0;
}

.match-table th,
.match-table td {
  vertical-align: top;
}

.match-number,
.match-score {
  width: 4rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.match-number {
  width: 3.5rem;
  text-align: right;
}

.match-empty {
  margin: 0;
  color: #6c757d;
}

.match-resize {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
}

.match-resize-x {
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
}

.match-resize-y {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  cursor: ns-resize;
}

.editor-option,
.guid-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

/* List of translation shortcuts, opened from the view options. */
.shortcut-dialog {
  max-width: 36rem;
  border: 1px solid #d5dbe3;
  border-radius: 0.375rem;
  padding: 1.25rem 1.5rem;
}

.shortcut-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.shortcut-dialog h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

.shortcut-list {
  margin: 0 0 1rem;
}

.shortcut-list div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.35rem 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e7ebf0;
}

.shortcut-list dt {
  font-weight: 600;
}

.shortcut-list dd {
  margin: 0;
}

.guid-filter-count,
.guid-filter-empty {
  color: #495057;
}

.guid-filter-empty {
  margin: 0.75rem;
}

.segment-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #d5dbe3;
  border-radius: 0.375rem;
}

.segment-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 0;
}

/* A line ends between words. A word is split only when that word is wider than the column.
   word-break is inherited, so the cells and the text runs both use normal. */
.segment-table th,
.segment-table td {
  height: auto;
  border-bottom: 1px solid #d5dbe3;
  vertical-align: top;
  padding: 0.65rem 0.75rem;
  overflow-wrap: break-word;
  word-break: normal;
}

.segment-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e8eef5;
  white-space: nowrap;
}

.segment-table.hide-guid-segments tr.guid-segment {
  display: none;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
}

.col-resizer:hover,
.col-resizer:focus {
  background: rgba(27, 110, 194, 0.35);
}

/* Segment numbers and type codes are about 5pt, same as the status text.
   The No. and Type headers keep the table size. A type cell shows an em dash
   when the file has no segment type for that row. */
.number-cell,
.type-cell {
  background: #f4f6f8;
  color: #495057;
  font-weight: 600;
  font-size: 5pt;
  text-align: right;
  white-space: normal;
}

.type-cell {
  text-align: center;
  color: #5c2d91;
}

.source-cell,
.status-cell {
  background: #f4f6f8;
}

/* Status values are about 5pt so a long label stays compact in the column.
   The column header keeps the table size. The cell title still holds the file token. */
.status-cell {
  font-size: 5pt;
}

.status-label {
  line-height: 1.2;
}

/* Idle translation cells are off-white. The cell that holds the caret turns white,
   on the td so the color covers the full row height. Locked cells stay off-white.
   The row itself is as tall as its tallest cell: source, translation, or any other
   column. This cell stays height:auto so its text is part of that measurement.
   segment-layout.js then stretches the field to the row when another cell is taller. */
.target-cell {
  padding: 0.35rem;
  background: #f8f7f5;
}

.target-cell:has(.translation-field) {
  padding: 0;
  height: auto;
  cursor: text;
  background: #f8f7f5;
}

.target-cell:has(.translation-field:focus-within) {
  background: #fff;
}

.segment-text {
  width: 100%;
  height: auto;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.5;
}

.source-cell,
.source-cell .segment-text,
.source-cell .text-run {
  -webkit-user-modify: read-only;
  caret-color: transparent;
}

.source-cell .text-run,
.status-cell .text-run {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.translation-field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0.35rem 0.45rem;
  font: inherit;
  line-height: 1.5;
  background: transparent;
  white-space: pre-wrap;
  overflow: visible;
  cursor: text;
}

.translation-field:focus-within {
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.translation-field .text-run {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  outline: none;
  min-width: 0.3em;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  vertical-align: top;
}

/* A tab or a paragraph ending has to share the line with the tags, as the source does.
   An inline-block run would keep that character inside its own box, so the tags after it
   would stay on the first line. in-flow is added only while the run contains a tab,
   CR, or LF. Other runs stay inline-block so an empty run between tags can still be clicked. */
.translation-field .text-run.in-flow {
  display: inline;
  min-width: 0;
  max-width: none;
  vertical-align: baseline;
}

.translation-field.save-failed {
  box-shadow: inset 0 0 0 2px #b02a37;
}

.translation-field.save-failed[data-save-error]::before {
  content: attr(data-save-error);
  display: block;
  margin-bottom: 0.25rem;
  color: #b02a37;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Source-tag chooser opened with Ctrl+Comma. Keyboard selection stays in the translation field. */
.tag-menu {
  position: fixed;
  z-index: 30;
  min-width: 10rem;
  max-width: 18rem;
  max-height: 14rem;
  margin: 0;
  padding: 0.25rem 0;
  overflow: auto;
  list-style: none;
  background: #fff;
  border: 1px solid #d5dbe3;
  border-radius: 0.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.tag-menu li {
  padding: 0.2rem 0.55rem;
  cursor: default;
}

/* The row marks the keyboard choice. The tag itself stays the purple column chip. */
.tag-menu li[aria-selected="true"] {
  background: #d6e8f8;
}

.tag-menu .tag-chip {
  cursor: default;
}

.tag-menu .tag-menu-empty {
  color: #495057;
}

/* Formatting marks, like Word. The real character stays in the text; only the mark is drawn.
   pre-wrap keeps a space, a tab, or a non-breaking space. A normal space remains a wrap point,
   so a line ends between words. A non-breaking space stays with the words beside it. */
.show-whitespace .ws {
  position: relative;
  white-space: pre-wrap;
}

.show-whitespace .ws::before {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #5c6b7a;
  pointer-events: none;
  font-style: normal;
  font-weight: 400;
}

.show-whitespace .ws-space::before {
  content: "·";
}

.show-whitespace .ws-nbsp::before {
  content: "°";
}

.show-whitespace .ws-tab::before {
  left: 0;
  transform: none;
  content: "→";
}

/* The pilcrow is a span, not the br. A br does not paint a ::before, so the mark would
   never show. The glyph sits at the end of the line and the br inside the span starts
   the next line. position stays in the line so the glyph is not drawn on top of the word. */
.show-whitespace .ws-break,
.show-whitespace .ws-line {
  user-select: none;
  white-space: nowrap;
}

.show-whitespace .ws-break::before {
  content: "¶";
  position: static;
  left: auto;
  transform: none;
}

.show-whitespace .ws-line::before {
  content: "↵";
  position: static;
  left: auto;
  transform: none;
}

/* The paragraph ending is the br. A newline character at the end of a run does not
   move the tags that follow it onto the next line. */
br.para {
  user-select: none;
}

.tag-chip {
  display: inline-block;
  margin: 0 0.12rem;
  padding: 0 0.35rem;
  border-radius: 0.2rem;
  background: #7b3fa1;
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.45;
  user-select: none;
  cursor: default;
  white-space: nowrap;
  vertical-align: baseline;
}

/* A selected translation tag can be removed with Delete. The ring is the selection. */
.translation-field .tag-chip {
  cursor: pointer;
}

.translation-field .tag-chip.tag-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d4e89;
}

.locked-flag {
  margin-top: 0.15rem;
  color: #6c757d;
  font-size: 5pt;
}

.file-list td form {
  margin: 0;
}

@media (max-width: 700px) {
  .document-heading {
    flex-direction: column;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Translator open page: files, own memory, then machine translation. Help stays behind the Help button. */
.work-sheet {
  max-width: 46rem;
}

.help-panel > summary {
  list-style: none;
  width: fit-content;
}

.help-panel > summary::-webkit-details-marker {
  display: none;
}

.help-body {
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  background: #f8f7f5;
  border: 1px solid #e4e0da;
}

.editor-view {
  display: inline-flex;
  gap: 0.35rem;
}

/* Reading view: one table row in the middle, continuous text above and below.
   The text and that row use the full width of the page, the same width as the table.
   Translated segments use the darker color. Segments with no translation use the lighter source color. */
#segment-editor.reading-mode {
  overflow: visible;
  border: 0;
  width: 100%;
  max-width: none;
}

#segment-editor.reading-mode .segment-table tbody tr:not(.reading-current) {
  display: none;
}

.reading-flow {
  width: 100%;
  max-width: none;
  font-size: 1.05rem;
  line-height: 1.7;
}

.reading-before {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 28vh;
  padding: 1.5rem 0 1rem;
}

.reading-after {
  padding: 1rem 0 2rem;
}

.reading-prose {
  margin: 0;
}

/* Blocks follow the file's structure. Colors stay on the sentence spans. */
.reading-block {
  margin: 0 0 0.85rem;
}

.reading-heading {
  margin: 1.15rem 0 0.35rem;
  font-weight: 650;
  line-height: 1.3;
}

.reading-heading[data-level="1"] { font-size: 1.45rem; }
.reading-heading[data-level="2"],
.reading-heading:not([data-level]) { font-size: 1.28rem; }
.reading-heading[data-level="3"] { font-size: 1.14rem; }
.reading-heading[data-level="4"],
.reading-heading[data-level="5"],
.reading-heading[data-level="6"] { font-size: 1.05rem; }

.reading-list {
  margin: 0 0 0.85rem;
  padding-left: 1.4rem;
}

.reading-list.is-ordered { list-style: decimal; }
.reading-list.is-unordered { list-style: disc; }

.reading-item { margin: 0.15rem 0; }

.reading-table {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}

.reading-cell {
  flex: 1 1 8rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid #e4e0da;
  background: #fff;
}

.reading-address {
  margin-left: 0.15rem;
  padding-left: 0.75rem;
  border-left: 3px solid #d9d3cb;
}

.reading-note {
  margin-left: 1.25rem;
  font-size: 0.95rem;
}

.reading-segment {
  cursor: pointer;
  white-space: pre-wrap;
}

.reading-segment.is-target {
  color: #3f3a36;
}

.reading-segment.is-source {
  color: #8a7b6b;
}

.reading-segment:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.help-body h2 {
  font-size: 1rem;
  margin-top: 0.8rem;
}

.help-body h2:first-child {
  margin-top: 0;
}