@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
  --ink: #102047;
  --muted: #596e96;
  --blue: #216afa;
  --line: #d9e3f6;
  --chrome: #f8faff;
  --workspace: #edf2fa;
  --page-w: 794px;
  --page-h: 1123px;
  --page-gap: 28px;
  --margin: 72px;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--workspace);
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #91b7ff;
  outline-offset: 2px;
}
[data-icon] svg {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  flex-shrink: 0;
}
button {
  border: 1px solid transparent;
  background: transparent;
  min-height: 42px;
  border-radius: 8px;
  padding: 8px 12px;
}
button:hover {
  background: #e9effb;
}
button.active,
button[aria-pressed="true"] {
  background: #dce8ff;
  color: #155de9;
}
button.primary {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
button.outline {
  border-color: #cbd8f0;
  background: white;
}
a {
  text-decoration: none;
  color: inherit;
}
h1 {
  margin: 0;
  font-size: 24px;
}
.app {
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 78px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--chrome);
  gap: 14px;
}
.backBtn {
  display: none;
}
.topbar .back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 1px 4px #1429511c;
  flex-shrink: 0;
}
.topbar h1,
.filename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar .actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.filename {
  border: 0;
  background: transparent;
  font-weight: 700;
  font-size: 24px;
  max-width: 480px;
  width: 40vw;
  text-align: center;
}
.state {
  font-size: 12px;
  border-radius: 5px;
  background: #d6f5e1;
  color: #188850;
  padding: 6px 10px;
  white-space: nowrap;
}
.message {
  background: #fff5d9;
  color: #735013;
  padding: 9px 18px;
  font-size: 13px;
  line-height: 1.45;
  border-bottom: 1px solid #e9d6a3;
  max-height: 20vh;
  overflow: auto;
  flex-shrink: 0;
}
.message:empty,
[hidden] {
  display: none !important;
}
.home {
  background: #fcfdff;
  min-height: 100%;
}
.home .topbar {
  background: white;
  justify-content: space-between;
}
.home h1 {
  font-size: 32px;
}
.help {
  border: 2px solid var(--muted);
  border-radius: 50%;
  font-size: 22px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
}
html, body.home {
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.home-app {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  position: relative;
}

.home-app .topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 84px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  flex-shrink: 0;
}

.home-app .topbar h1 {
  flex: 0 1 auto;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #102047);
  text-align: left;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-app .topbar .backBtn {
  display: none;
}

.home-app .topbar .back,
.home-app .topbar .help {
  position: static;
  transform: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3b5282;
  background: transparent;
  margin: 0;
  flex-shrink: 0;
}

.home-app .topbar .help {
  margin-left: auto;
}

.home-app .topbar .back:hover,
.home-app .topbar .help:hover {
  background: #edf4ff;
}

.home-app .topbar [data-icon] svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.home-app .home-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
}

.home-app .home-menu .home-card:first-child {
  margin-top: auto;
}

.home-app .home-menu .home-card:last-child {
  margin-bottom: auto;
}

.home-app .home-menu .home-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 18px 28px;
  text-align: left;
  background: #fff;
  border: 1px solid #dfe8f7;
  border-radius: 22px;
  box-shadow: none;
  transform: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

.home-app .home-menu .home-card:hover {
  background: #fff;
  border-color: #b9cff7;
  box-shadow: 0 6px 20px rgba(48, 89, 154, 0.08);
  transform: translateY(-2px);
}

.home-app .home-menu .home-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  margin: 0 22px;
}

.home-app .home-menu .home-card strong {
  display: block;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink, #102047);
}

.home-app .home-menu .home-card small {
  display: block;
  margin-top: 4px;
  font-size: clamp(0.88rem, 1.1vw, 1.05rem);
  color: #4a5f86;
  line-height: 1.4;
}

.home-app .tile {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0ebff;
  color: #2563eb;
}

.home-card.create .tile,
.home-app .tile.green {
  background: #dcf7e6;
  color: #16a34a;
}

.home-card.edit .tile,
.home-app .tile.purple {
  background: #ece4fd;
  color: #7c3aed;
}

.home-app .tile svg,
.home-app .tile [data-icon] svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.7;
}

.home-app .chevron {
  color: #3b5282;
  display: flex;
}

.home-app .chevron svg,
.home-app .chevron [data-icon] svg {
  width: 22px;
  height: 22px;
}

.ad-banner-wrapper {
  flex: 0 0 var(--ad-banner-height, 70px);
  width: 100%;
  height: var(--ad-banner-height, 70px);
  min-height: var(--ad-banner-height, 70px);
  max-height: var(--ad-banner-height, 70px);
  overflow: hidden;
  flex-shrink: 0;
}

/* 2. Mobile Portrait */
@media (max-width: 600px) {
  .home-app .topbar {
    min-height: 58px;
    padding: 8px 14px;
    gap: 8px;
  }

  .home-app .topbar h1 {
    font-size: 1.3rem;
  }

  .home-app .topbar .back,
  .home-app .topbar .help {
    width: 38px;
    height: 38px;
  }

  .home-app .topbar [data-icon] svg {
    width: 24px;
    height: 24px;
  }

  .home-app .home-menu {
    padding: 16px 14px 40px;
    gap: 14px;
    justify-content: flex-start;
  }

  .home-app .home-menu .home-card {
    padding: 13px 16px;
    border-radius: 16px;
  }

  .home-app .home-menu .home-card > span:nth-child(2) {
    margin: 0 14px;
  }

  .home-app .home-menu .home-card strong {
    font-size: 1.05rem;
  }

  .home-app .home-menu .home-card small {
    font-size: 0.82rem;
  }

  .home-app .tile {
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .home-app .tile svg,
  .home-app .tile [data-icon] svg {
    width: 26px;
    height: 26px;
  }

  .home-app .chevron svg,
  .home-app .chevron [data-icon] svg {
    width: 18px;
    height: 18px;
  }
}

/* 3. Landscape phones & short screens: shrink header & buttons so all 3 cards fit visibly without overlapping */
@media (orientation: landscape) and (max-height: 540px), (max-height: 480px) {
  .home-app .topbar {
    min-height: 44px;
    padding: 4px 18px;
    gap: 10px;
  }

  .home-app .topbar h1 {
    font-size: 1.15rem;
  }

  .home-app .topbar .back,
  .home-app .topbar .help {
    width: 34px;
    height: 34px;
  }

  .home-app .topbar [data-icon] svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.7;
  }

  .home-app .home-menu {
    padding: 8px 18px;
    gap: 8px;
    max-width: 680px;
  }

  .home-app .home-menu .home-card {
    padding: 7px 16px;
    border-radius: 12px;
    min-height: 46px;
  }

  .home-app .home-menu .home-card:hover {
    transform: translateY(-1px);
  }

  .home-app .home-menu .home-card > span:nth-child(2) {
    margin: 0 12px;
  }

  .home-app .home-menu .home-card strong {
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .home-app .home-menu .home-card small {
    font-size: 0.75rem;
    margin-top: 1px;
    line-height: 1.2;
  }

  .home-app .tile {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .home-app .tile svg,
  .home-app .tile [data-icon] svg {
    width: 20px;
    height: 20px;
  }

  .home-app .chevron svg,
  .home-app .chevron [data-icon] svg {
    width: 16px;
    height: 16px;
  }
}

/* 4. Ultra-short viewports */
@media (orientation: landscape) and (max-height: 380px) {
  .home-app .topbar {
    min-height: 38px;
    padding: 2px 14px;
  }

  .home-app .topbar h1 {
    font-size: 1rem;
  }

  .home-app .home-menu {
    padding: 4px 14px;
    gap: 6px;
  }

  .home-app .home-menu .home-card {
    padding: 5px 12px;
    min-height: 40px;
    border-radius: 10px;
  }

  .home-app .tile {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .home-app .tile svg,
  .home-app .tile [data-icon] svg {
    width: 18px;
    height: 18px;
  }

  .home-app .home-menu .home-card strong {
    font-size: 0.88rem;
  }

  .home-app .home-menu .home-card small {
    font-size: 0.7rem;
  }
}
.page-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  flex-shrink: 0;
}
.page-nav button {
  background: #eaf0fb;
}
.page-count {
  min-width: 90px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  white-space: nowrap;
}
.viewer .topbar h1 {
  text-align: center;
  margin: 0 auto;
}
.viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  overscroll-behavior: contain;
}
.stage {
  position: relative;
  margin: 24px auto;
  flex-shrink: 0;
}
.scale-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.viewer-pages .docx-wrapper {
  padding: 0 !important;
  background: transparent !important;
}
.viewer-pages section.docx {
  margin: 0 0 24px !important;
  box-shadow:
    0 0 0 1px #dce4f2,
    0 2px 9px #2234500b !important;
}
.viewer-pages mark {
  background: #ffe258 !important;
  color: #18203a !important;
  border-radius: 2px;
}
.viewer-pages mark.current-match {
  background: #ff953c !important;
  outline: 2px solid #bc4b00;
}
.bottom-actions {
  display: flex;
  background: var(--chrome);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.bottom-actions button {
  flex: 1;
  border-radius: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  border-right: 1px solid var(--line);
}
.bottom-actions button:last-child {
  border-right: 0;
}
.bottom-actions svg {
  width: 28px;
  height: 28px;
}
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.searchbar input {
  min-width: 60px;
  flex: 1;
  border: 1px solid #cad7ef;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
}
.searchbar output {
  font-size: 13px;
  white-space: nowrap;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
  text-align: center;
  padding: 24px;
  gap: 20px;
}
.empty > svg {
  height: 100px;
  width: 100px;
  color: #d5dfef;
}
.tabs {
  display: flex;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  padding-left: 24px;
  flex-shrink: 0;
}
.tabs button {
  border-radius: 0;
  padding: 10px 20px;
  border-bottom: 3px solid transparent;
}
.tabs button[aria-selected="true"] {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 600;
}
.ribbon {
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  display: flex;
  overflow-x: auto;
  padding: 8px 24px;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.ribbon-group {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  padding: 0 12px;
}
.ribbon-group:first-child {
  padding-left: 0;
}
.ribbon-group:last-child {
  border: 0;
}
.ribbon-items {
  display: flex;
}
.ribbon button {
  min-width: 78px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  white-space: nowrap;
  padding: 10px 8px;
}
.ribbon-group small {
  text-align: center;
  font-size: 12px;
  color: #7b91b8;
  padding: 7px 0 3px;
}
.toolbar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  overflow-x: auto;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  padding: 6px 20px;
  gap: 3px;
  min-height: 58px;
  -webkit-overflow-scrolling: touch;
}
.toolbar > * {
  flex-shrink: 0;
}
.toolbar button {
  min-width: 36px;
  padding: 8px;
}
.toolbar select {
  background: white;
  border: 1px solid #cad8f1;
  border-radius: 8px;
  height: 38px;
  padding: 0 9px;
  font-size: 15px;
  margin: 0 2px;
  max-width: 130px;
}
.separator {
  height: 28px;
  width: 1px;
  background: var(--line);
  margin: 0 7px;
}
.toolbar .letter {
  font-size: 19px;
}
.swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 42px;
  cursor: pointer;
}
.swatch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 20px calc(6px + env(safe-area-inset-bottom));
  background: var(--chrome);
  border-top: 1px solid var(--line);
  font-size: 13px;
  flex-shrink: 0;
}
.zoom-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zoom-tools input {
  width: 115px;
}
.zoom-tools button {
  min-height: 28px;
  padding: 3px 6px;
}
.zoom-tools output {
  min-width: 42px;
  text-align: right;
}
.paper-stack {
  width: var(--page-w);
  position: relative;
}
.paper-backgrounds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.paper-bg {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--page-h);
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 7px #233b6612;
}
.paper-header,
.paper-footer {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  color: #7a7f88;
  font-size: 12px;
  white-space: pre-wrap;
}
.paper-header {
  top: 30px;
}
.paper-footer {
  bottom: 26px;
}
.watermark {
  /* Same look as Word's own text watermark: light grey, 50% transparent, diagonal. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #c8c8c8;
  opacity: 0.5;
  font-family: Calibri, Carlito, Arial, sans-serif;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.editor-host {
  position: relative;
  padding: var(--margin);
  padding-bottom: var(--margin);
}
.tiptap {
  outline: none;
  font-family: Calibri, Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.4;
  color: #111;
  min-height: 160px;
  overflow-wrap: break-word;
}
.tiptap p {
  margin: 0 0 8pt;
  white-space: pre-wrap;
}
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
  margin: 14pt 0 8pt;
  line-height: 1.2;
}
.tiptap h1 {
  font-size: 24pt;
}
.tiptap h2 {
  font-size: 20pt;
}
.tiptap h3 {
  font-size: 16pt;
}
.tiptap ul,
.tiptap ol {
  padding-left: 32px;
}
.tiptap li > p {
  margin-bottom: 4pt;
}
.tiptap img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.tiptap img.ProseMirror-selectednode {
  outline: 3px solid #216afa;
}
.tiptap table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 12px 0;
}
.tiptap td,
.tiptap th {
  border: 1px solid #8b9bb8;
  padding: 6px;
  min-width: 25px;
  position: relative;
  vertical-align: top;
}
.tiptap th {
  background: #eef2f8;
  font-weight: 700;
}
.tiptap td > p:last-child,
.tiptap th > p:last-child {
  margin: 0;
}
.selectedCell:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #216afa30;
  pointer-events: none;
}
.column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #8ab4ff;
}
.resize-cursor {
  cursor: col-resize;
}
.tableWrapper {
  overflow: visible;
}
.tiptap a {
  color: #1961d9;
  text-decoration: underline;
}
.tiptap hr {
  border: 0;
  border-top: 1px solid #777;
}
.page-break-node {
  height: 24px;
  border-top: 1px dashed #bcc9df;
  color: #8b98ad;
  font: 10px Arial;
  text-align: center;
  user-select: none;
}
.page-break-node:after {
  content: "Page break";
}
.pagination-gap {
  display: block;
  pointer-events: none;
  user-select: none;
}
.field-node {
  background: #edf2fb;
  border-radius: 3px;
  padding: 0 2px;
}
.comment-mark {
  background: #fff2bb;
  border-bottom: 2px solid #e2b236;
}
.search-hit {
  background: #ffe45f;
}
.search-hit.current {
  outline: 2px solid #ed8a25;
}
.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #101c3966;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  background: white;
  border-radius: 14px;
  padding: 22px;
  width: 440px;
  max-width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 20px 100px #00102940;
}
.modal h2 {
  margin: 0 0 18px;
  font-size: 21px;
}
.modal label {
  display: block;
  font-size: 14px;
  margin: 12px 0;
}
.modal input:not([type="checkbox"]),
.modal textarea,
.modal select {
  display: block;
  width: 100%;
  border: 1px solid #c9d5e9;
  border-radius: 6px;
  padding: 10px;
  font-size: 16px;
  margin-top: 6px;
}
.modal textarea {
  min-height: 100px;
}
.modal .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.modal p,
.modal li {
  font-size: 14px;
  line-height: 1.5;
}
.symbol-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.symbol-grid button {
  font-size: 25px;
  background: #edf3ff;
  width: 44px;
}
.floating-tools {
  position: fixed;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 3px 18px #13233d22;
  border-radius: 10px;
  z-index: 9;
  display: flex;
  max-width: 95vw;
  overflow-x: auto;
}
.floating-tools button {
  font-size: 12px;
  white-space: nowrap;
}
.file-label {
  cursor: pointer;
}
.file-label input {
  display: none;
}
.loading {
  color: var(--muted);
  padding: 30px;
  text-align: center;
}
@media (max-width: 700px) {
  .topbar {
    padding: 8px 12px;
    min-height: 62px;
    gap: 9px;
  }
  .topbar h1,
  .filename {
    font-size: 17px;
  }
  .filename {
    width: 100%;
    max-width: 40vw;
  }
  .topbar .back {
    width: 38px;
    height: 38px;
  }
  .topbar .actions {
    gap: 5px;
  }
  .topbar .actions button {
    padding: 8px;
  }
  .topbar .actions button span {
    display: none;
  }
  .state {
    display: none;
  }
  .home h1 {
    font-size: 25px;
  }
  .home-menu {
    margin: 10vh auto;
    gap: 20px;
    padding: 0 20px;
  }
  .home-card {
    min-height: 110px;
    padding: 18px;
    border-radius: 17px;
  }
  .home-card .tile {
    width: 64px;
    height: 64px;
    margin-right: 18px;
    border-radius: 17px;
  }
  .home-card .tile svg {
    height: 34px;
    width: 34px;
  }
  .home-card strong {
    font-size: 19px;
  }
  .home-card small {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 6px;
  }
  .page-nav {
    gap: 4px;
  }
  .page-nav button {
    padding: 7px;
    min-width: 34px;
  }
  .page-count {
    min-width: 64px;
    font-size: 13px;
    padding: 9px 7px;
  }
  .viewer .topbar h1 {
    flex: 1;
  }
  .bottom-actions {
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
  .bottom-actions button {
    font-size: 14px;
    gap: 5px;
  }
  .bottom-actions svg {
    width: 23px;
    height: 23px;
  }
  .tabs {
    padding-left: 10px;
  }
  .tabs button {
    padding: 8px 16px;
  }
  .ribbon {
    padding: 5px 8px;
  }
  .ribbon button {
    min-width: 67px;
    font-size: 11px;
    padding: 6px;
  }
  .ribbon-group {
    padding: 0 6px;
  }
  .ribbon-group small {
    font-size: 10px;
    padding: 4px 0;
  }
  .toolbar {
    padding: 4px 8px;
    min-height: 52px;
  }
  .toolbar select {
    font-size: 14px;
    max-width: 115px;
  }
  .statusbar {
    padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
    font-size: 11px;
  }
  .zoom-tools input {
    width: 65px;
  }
  .zoom-tools {
    gap: 2px;
  }
  .searchbar {
    padding: 7px 9px;
    gap: 3px;
  }
  .searchbar button {
    padding: 7px;
  }
  .searchbar output {
    font-size: 11px;
  }
  .stage {
    margin-top: 14px;
    margin-bottom: 14px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    min-height: 48px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .topbar .back {
    height: 34px;
    width: 34px;
  }
  .tabs button {
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .ribbon button {
    padding: 4px 6px;
    gap: 3px;
  }
  .ribbon-group small {
    display: none;
  }
  .ribbon {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .toolbar {
    min-height: 44px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .home-menu {
    margin: 24px auto;
    gap: 14px;
  }
  .home-card {
    min-height: 90px;
    padding: 12px 24px;
  }
  .home-card .tile {
    height: 64px;
    width: 64px;
  }
  .bottom-actions {
    padding: 4px 0;
  }
  .bottom-actions button {
    flex-direction: row;
    justify-content: center;
    font-size: 14px;
  }
  .statusbar {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}
@media print {
  body,
  .app {
    height: auto;
    overflow: visible;
    background: white;
  }
  .topbar,
  .tabs,
  .ribbon,
  .toolbar,
  .statusbar,
  .message,
  .searchbar,
  .floating-tools,
  .bottom-actions {
    display: none !important;
  }
  .viewport {
    overflow: visible;
  }
  .stage {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }
  .scale-content {
    position: static;
    transform: none !important;
  }
  .paper-bg {
    box-shadow: none;
  }
  .paper-stack {
    width: 100%;
  }
  .editor-host {
    padding: 0;
  }
  .paper-backgrounds {
    display: none;
  }
  .pagination-gap {
    display: none !important;
  }
  .page-break-node {
    break-after: page;
    page-break-after: always;
    height: 0;
    border: 0;
  }
  .page-break-node:after {
    display: none;
  }
  .tiptap table {
    break-inside: auto;
  }
  .tiptap tr {
    break-inside: avoid;
  }
  .tiptap h1,
  .tiptap h2,
  .tiptap h3 {
    break-after: avoid;
  }
  @page {
    size: A4;
    margin: 19mm;
  }
}
/* Compact chrome; document measurements remain independent of UI sizing. */
body {
  font-size: 14px;
}
button {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 6px;
}
[data-icon] svg {
  width: 19px;
  height: 19px;
}
.topbar {
  min-height: 58px;
  padding: 8px 16px;
  gap: 10px;
}
.topbar .back {
  width: 36px;
  height: 36px;
}
h1,
.filename {
  font-size: 19px;
}
.state {
  font-size: 10px;
  padding: 4px 7px;
}
.home h1 {
  font-size: 26px;
}
.home-menu {
  max-width: 730px;
  margin: 5vh auto;
  gap: 20px;
}
.home-card {
  min-height: 108px;
  padding: 16px 28px;
  border-radius: 19px;
}
.home-card .tile {
  width: 72px;
  height: 72px;
  margin-right: 26px;
  border-radius: 17px;
}
.home-card .tile svg {
  width: 36px;
  height: 36px;
}
.home-card strong {
  font-size: 22px;
}
.home-card small {
  font-size: 16px;
  margin-top: 6px;
}
.help {
  width: 32px;
  height: 32px;
  font-size: 18px;
}
.page-count {
  min-width: 72px;
  padding: 6px 9px;
  font-size: 13px;
}
.page-nav {
  gap: 5px;
}
.bottom-actions {
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
}
.bottom-actions button {
  font-size: 14px;
  gap: 4px;
}
.bottom-actions svg {
  width: 22px;
  height: 22px;
}
.tabs {
  padding-left: 16px;
}
.tabs button {
  min-height: 32px;
  padding: 5px 16px;
}
.ribbon {
  padding: 5px 12px;
}
.ribbon-group {
  padding: 0 8px;
}
.ribbon button {
  min-width: 62px;
  padding: 5px 6px;
  font-size: 11px;
  gap: 4px;
}
.ribbon-group small {
  font-size: 10px;
  padding: 4px 0 2px;
}
.toolbar {
  min-height: 42px;
  padding: 3px 12px;
  gap: 1px;
}
.toolbar button {
  min-width: 30px;
  padding: 4px;
}
.toolbar select {
  height: 30px;
  padding: 0 5px;
  font-size: 13px;
  max-width: 115px;
}
.toolbar .letter {
  font-size: 16px;
}
.separator {
  height: 23px;
  margin: 0 4px;
}
.swatch {
  width: 31px;
  height: 34px;
}
.statusbar {
  padding: 3px 12px calc(3px + env(safe-area-inset-bottom));
  font-size: 11px;
}
.zoom-tools input {
  width: 90px;
}
.stage {
  margin: 14px auto;
}
.searchbar {
  padding: 5px 10px;
  gap: 4px;
}
.searchbar input {
  padding: 6px;
}
.modal {
  padding: 18px;
}
.modal h2 {
  font-size: 18px;
  margin-bottom: 12px;
}
.modal label {
  margin: 9px 0;
  font-size: 13px;
}
.modal .dialog-actions {
  flex-wrap: wrap;
  margin-top: 14px;
}
.paragraph-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.load-progress {
  padding: 6px 16px;
  background: var(--chrome);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  font-size: 12px;
}
.load-progress progress {
  width: 100%;
  height: 8px;
  accent-color: var(--blue);
}
.load-progress span {
  white-space: nowrap;
}
.paper-header {
  border-bottom: 0.75pt solid #9098a6;
  padding-bottom: 4pt;
}
.paper-footer {
  border-top: 0.75pt solid #9098a6;
  padding-top: 4pt;
}
.paper-footer .page-number {
  display: block;
  text-align: right;
}
.paper-header .tiptap,
.paper-footer .tiptap {
  min-height: 0;
  font-size: 12pt;
}
.paper-header p,
.paper-footer p {
  margin: 0;
}
.tiptap {
  white-space: pre-wrap;
  tab-size: 4;
}
.tiptap p,
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
  white-space: pre-wrap;
}
.tiptap p:empty::before {
  content: "\200b";
}
.tiptap th {
  font-weight: inherit;
}
.image-node {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  line-height: 0;
  max-width: 100%;
}
.image-node img {
  display: block;
  width: 100%;
  height: 100%;
}
.image-node.selected {
  outline: 2px solid #216afa;
}
.image-handle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  min-height: 0;
  padding: 0;
  border: 1px solid white;
  background: #216afa;
  border-radius: 2px;
  touch-action: none;
}
.image-node.selected .image-handle {
  display: block;
}
.image-handle::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.image-handle.nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.image-handle.ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.image-handle.sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.image-handle.se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}
.viewer-pages .page-continuation::before {
  content: none !important;
}
@media (max-width: 700px) {
  body {
    font-size: 12px;
  }
  .topbar {
    min-height: 48px;
    padding: 5px 8px;
    gap: 6px;
  }
  .topbar h1,
  .filename {
    font-size: 15px;
  }
  .topbar .back {
    width: 32px;
    height: 32px;
  }
  .topbar .actions button {
    padding: 5px;
  }
  .home h1 {
    font-size: 21px;
  }
  .home-menu {
    margin: 5vh auto;
    gap: 14px;
    padding: 0 16px;
  }
  .home-card {
    min-height: 88px;
    padding: 13px;
  }
  .home-card .tile {
    width: 54px;
    height: 54px;
    margin-right: 14px;
  }
  .home-card .tile svg {
    width: 28px;
    height: 28px;
  }
  .home-card strong {
    font-size: 17px;
  }
  .home-card small {
    font-size: 12px;
    margin-top: 4px;
  }
  .page-nav button {
    min-width: 28px;
    padding: 4px;
  }
  .page-count {
    min-width: 56px;
    padding: 6px 4px;
    font-size: 11px;
  }
  .ribbon {
    padding: 4px 6px;
  }
  .ribbon-group {
    padding: 0 4px;
  }
  .ribbon button {
    min-width: 53px;
    font-size: 10px;
    padding: 4px;
    gap: 3px;
  }
  .ribbon-group small {
    font-size: 9px;
  }
  .toolbar {
    padding: 2px 6px;
    min-height: 38px;
  }
  .toolbar select {
    font-size: 12px;
    max-width: 100px;
  }
  .bottom-actions button {
    font-size: 12px;
  }
  .zoom-tools input {
    width: 55px;
  }
  .statusbar {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 10px;
  }
  .stage {
    margin: 10px auto;
  }
  .searchbar button {
    padding: 4px;
  }
  .searchbar output {
    font-size: 10px;
  }
  .modal-wrap {
    padding: 10px;
  }
  .modal {
    padding: 14px;
  }
  /* 16px inputs avoid automatic Safari page zoom while typing. */
  input:not([type="range"]):focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    min-height: 38px;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .topbar .back {
    width: 28px;
    height: 28px;
  }
  .topbar button {
    min-height: 28px;
  }
  .tabs button {
    min-height: 25px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .ribbon {
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .ribbon button {
    min-height: 32px;
    padding: 2px 4px;
    font-size: 10px;
    gap: 1px;
  }
  .ribbon-group small {
    display: none;
  }
  .toolbar {
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .toolbar button,
  .swatch {
    min-height: 30px;
    height: 30px;
  }
  .home-menu {
    margin: 12px auto;
    gap: 8px;
  }
  .home-card {
    min-height: 66px;
    padding: 8px 20px;
  }
  .home-card .tile {
    width: 46px;
    height: 46px;
  }
  .home-card strong {
    font-size: 17px;
  }
  .home-card small {
    font-size: 12px;
    margin-top: 2px;
  }
  .home .topbar {
    min-height: 38px;
  }
  .bottom-actions {
    padding: 2px 0;
  }
  .statusbar {
    padding-top: 0;
    padding-bottom: 0;
  }
  .stage {
    margin-top: 6px;
  }
}
@media print {
  .image-handle,
  .load-progress {
    display: none !important;
  }
}
tr.pagination-gap {
  display: table-row;
}
tr.pagination-gap td {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
span.pagination-gap {
  display: block;
  width: 100%;
  line-height: 0;
}


/* Modal loading UI is used only by View and Edit. */
.progress-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(12,25,48,.28); backdrop-filter:blur(2px); }
.progress-modal[hidden] { display:none !important; }
.progress-card { width:min(420px,92vw); padding:24px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 16px 48px #10204730; font-size:14px; font-weight:600; }
.progress-modal progress { flex:1; min-width:0; width:100%; height:10px; accent-color:var(--blue); }
.progress-row { display:flex; align-items:center; gap:12px; }
.progress-percent { min-width:42px; text-align:right; font-variant-numeric:tabular-nums; font-size:14px; font-weight:700; color:var(--blue); }
.image-node { cursor:grab; } .image-node:active { cursor:grabbing; }

/* Search highlights match the document viewer. */
.search-hit {
  background: #ffe258;
  border-radius: 2px;
}
.search-hit.current {
  background: #ff953c;
  outline: 2px solid #bc4b00;
}
/* Dismiss (X) button at the end of an error message. */
.message.has-close {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.message-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.message-close:hover {
  background: #0000001a;
}
.message-close svg {
  width: 100%;
  height: 100%;
}
/* Imported Word files: use Word's own defaults so the page count and layout match. */
body[data-mode="edit"] .tiptap p {
  margin-bottom: 0;
  line-height: 1.15;
}
body[data-mode="edit"] .tiptap ul,
body[data-mode="edit"] .tiptap ol {
  margin: 0;
  padding-left: 48px;
}
body[data-mode="edit"] .tiptap table {
  margin: 0;
}

/* Create and Edit: slightly smaller fonts and controls (Home and View unchanged). */
body[data-mode="create"] .topbar,
body[data-mode="create"] .message,
body[data-mode="create"] .tabs,
body[data-mode="create"] .ribbon,
body[data-mode="create"] .toolbar,
body[data-mode="create"] .searchbar,
body[data-mode="create"] .statusbar,
body[data-mode="create"] .modal,
body[data-mode="edit"] .topbar,
body[data-mode="edit"] .message,
body[data-mode="edit"] .tabs,
body[data-mode="edit"] .ribbon,
body[data-mode="edit"] .toolbar,
body[data-mode="edit"] .searchbar,
body[data-mode="edit"] .statusbar,
body[data-mode="edit"] .modal {
  zoom: 0.9;
}

/* Name label shown when a toolbar feature is touched on a phone. */
.touch-tip {
  position: fixed;
  z-index: 1000;
  max-width: 70vw;
  padding: 5px 9px;
  border-radius: 6px;
  background: #1f2937;
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px #0003;
}

/* Text watermark in View (read from the DOCX header and drawn on every page). */
.docx-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  font-family: Calibri, Arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* "At least" line spacing: the paragraph value is the minimum line height; larger
   text inside a line (bigger font, symbols) may make that one line taller. */
.tiptap p.line-at-least *,
.tiptap h1.line-at-least *,
.tiptap h2.line-at-least *,
.tiptap h3.line-at-least * {
  line-height: normal;
}

/* Colour picker (same design as the GPS Cam project) - used on every device for
   the text colour and the highlight colour. */
.cp-root {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.cp-backdrop {
  position: absolute;
  inset: 0;
}
.color-picker {
  position: fixed;
  display: block;
  width: min(350px, calc(100vw - 20px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  background: #fff;
  color: #111;
  border: 1px solid #cfd5df;
  border-radius: 10px;
  box-shadow: 0 14px 40px #0003;
  user-select: none;
  -webkit-user-select: none;
}
.cp-title {
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
}
.cp-area {
  position: relative;
  height: 180px;
  margin: 10px;
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.cp-area:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cp-hue, #f00);
  mix-blend-mode: multiply;
}
.cp-handle {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #0008;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-sizing: border-box;
}
.cp-hue {
  position: relative;
  height: 18px;
  margin: 0 10px 10px;
  border-radius: 5px;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00
  );
}
.cp-hue-handle {
  position: absolute;
  top: 0;
  width: 5px;
  height: 18px;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #0008;
  transform: translateX(-50%);
  pointer-events: none;
  box-sizing: border-box;
}
.cp-bottom {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid #e5e7eb;
}
.cp-preview {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cfd5df;
  box-sizing: border-box;
}
.cp-rgb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.cp-rgb label {
  font-size: 10px;
  color: #5b6475;
  text-align: center;
}
.cp-rgb input {
  width: 100%;
  height: 32px;
  border: 1px solid #cfd5df;
  border-radius: 5px;
  text-align: center;
  font: inherit;
  font-size: 16px; /* 16px stops iPhone from zooming into the field */
  color: #111;
  background: #fff;
  box-sizing: border-box;
}
.cp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 10px 10px;
}
.cp-actions button {
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid #cfd5df;
  background: #fff;
  color: #111;
  font: inherit;
  cursor: pointer;
}
.cp-actions .cp-set {
  background: var(--blue, #2f6bff);
  border-color: var(--blue, #2f6bff);
  color: #fff;
}
@media (max-width: 560px) {
  .cp-area {
    height: min(180px, 42vw);
  }
}
/* Landscape phones: the stacked layout is taller than the screen, so the colour
   square and hue bar go on the left and the preview, R/G/B and buttons on the
   right. The whole picker then fits the visible height. */
@media (orientation: landscape) and (max-height: 560px) {
  .color-picker {
    width: min(520px, calc(100vw - 16px));
  }
  .cp-title {
    padding: 6px 12px;
  }
  .cp-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .cp-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .cp-area {
    flex: 1;
    height: auto;
    min-height: 110px;
    margin: 8px 10px 8px;
  }
  .cp-hue {
    flex: none;
    margin-bottom: 8px;
  }
  .cp-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 1px solid #e5e7eb;
  }
  .cp-bottom {
    border-top: 0;
    padding: 8px 10px;
  }
  .cp-actions {
    padding: 0 10px 8px;
  }
}

/* View: steadier, more Word-like page text. */
.viewer-pages {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; /* phones must not enlarge text on their own */
}
.viewer-pages section.docx {
  background: #fff !important;
  overflow-wrap: break-word;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none; /* Word does not substitute ligatures */
}
.viewer-pages section.docx table {
  border-collapse: collapse;
}
.viewer-pages section.docx p {
  min-height: 1em; /* empty paragraphs keep their line, as in Word */
}
.viewer-pages section.docx img {
  max-width: 100%;
  object-fit: contain;
}

/* Links show the pointer (hand) cursor in the editor. */
.tiptap a,
.tiptap a * {
  cursor: pointer;
}
/* Delete button on a selected image. */
.image-delete {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  align-items: center;
  gap: 5px;
  min-height: 0;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 1px solid #fff;
  border-radius: 15px;
  background: #d92d20;
  color: #fff;
  font: 600 13px/1 Arial, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.image-node.selected .image-delete {
  display: inline-flex;
}
.image-delete svg {
  width: 15px;
  height: 15px;
}
/* The Symbol button's Ω is the same size as the other Insert icons (Date & time). */
.ribbon .letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 21px;
  line-height: 1;
}

/* Icons are never trimmed at the edge of their box (the link icon was). */
[data-icon] svg {
  overflow: visible;
}
/* The bar under A / the highlighter shows the colour of the selected text. */
.swatch {
  --swatch-color: #000;
}
.swatch::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--swatch-color);
  box-shadow: 0 0 0 1px #0002;
  pointer-events: none;
}
.swatch u {
  text-decoration: none; /* the coloured bar below replaces the plain underline */
}

/* Paragraph indent popup: first-line / hanging note. */
.modal .indent-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #8a5a00;
}

/* Home page: title font-size 16px, font-weight 600, centered; back button matching standard tools */
.home .topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px !important;
  height: 50px !important;
  padding: 10px 16px !important;
}
.home .topbar .back,
.home .topbar .backBtn {
  position: absolute;
  left: 10px !important;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: inherit !important;
}
.home .topbar .back svg,
.home .topbar .backBtn svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.5 !important;
}
.home h1,
.home .topbar h1 {
  margin: 0 auto !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-align: center !important;
  flex: 0 1 auto;
  font-family: "Roboto", sans-serif !important;
  color: #000 !important;
  letter-spacing: normal !important;
}
.home .topbar .help {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

/* Viewer and Editor Topbar standardisation */
.viewer .topbar {
  min-height: 50px !important;
  height: 50px;
  padding: 10px 16px !important;
}
.viewer .topbar .back,
.viewer .topbar .backBtn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.viewer .topbar .back svg,
.viewer .topbar .backBtn svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.5 !important;
}
.viewer .topbar h1 {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-align: center;
  margin: 0 auto;
}
body[data-mode="create"] .topbar,
body[data-mode="edit"] .topbar {
  min-height: 50px !important;
  padding: 8px 16px !important;
}
body[data-mode="create"] .topbar .back,
body[data-mode="edit"] .topbar .back {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
body[data-mode="create"] .topbar .back svg,
body[data-mode="edit"] .topbar .back svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2.5 !important;
}
body[data-mode="create"] .filename,
body[data-mode="edit"] .filename {
  font-size: 16px !important;
  font-weight: 600 !important;
}

/* A selected horizontal line is highlighted; Backspace / Delete removes it. */
.tiptap hr.ProseMirror-selectednode {
  outline: 2px solid #2f6bff;
  outline-offset: 3px;
  border-top-color: #2f6bff;
}

/* Lists: when a list item's text is centered or right-aligned, the bullet / number
   moves with the text (as in Word) instead of staying at the left edge.
   The browser's outside marker cannot move, so for these items it is hidden and drawn
   as the first thing of the paragraph, where text-align moves it together with the text. */
.tiptap li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) {
  list-style-type: none;
}
.tiptap ul > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: "\2022\00a0\00a0";
}
.tiptap ul ul > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: "\25E6\00a0\00a0";
}
.tiptap ul ul ul > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: "\25AA\00a0\00a0";
}
.tiptap ol > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: counter(list-item, decimal) ".\00a0\00a0";
}
.tiptap ol[style*="lower-alpha"] > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: counter(list-item, lower-alpha) ".\00a0\00a0";
}
.tiptap ol[style*="upper-alpha"] > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: counter(list-item, upper-alpha) ".\00a0\00a0";
}
.tiptap ol[style*="lower-roman"] > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: counter(list-item, lower-roman) ".\00a0\00a0";
}
.tiptap ol[style*="upper-roman"] > li:has(> p:first-of-type:is([style*="text-align: center"], [style*="text-align:center"], [style*="text-align: right"], [style*="text-align:right"])) > p:first-of-type::before {
  content: counter(list-item, upper-roman) ".\00a0\00a0";
}

/* iPhone landscape only: the whole app (and its pop-ups) stays inside the safe
   area, clear of the notch / Dynamic Island and the rounded corners. */
@media (orientation: landscape) {
  html.iphone body {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  html.iphone .modal-wrap {
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  html.iphone .cp-root {
    box-sizing: border-box;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  html.iphone .color-picker {
    width: min(
      350px,
      calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
    );
  }
  html.iphone .touch-tip {
    max-width: calc(70vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}