/*! Ink Diff (ink-diff 1.0.0) by Frontier Templates. Styles for the vanilla build.
Licensed gem: Licensed with Full Access, for the sites you build; do not resell the gem itself. https://frontiertemplates.com/gems/ink-diff */
/* Ink Diff. Every rule is scoped to .ink so the gem drops into any page. Give the element a size; it fills it. */
.ink {
  --ink-accent: #2440d8;
  --ink-bg: #f6f3ec;
  --ink-paper: #fffdf8;
  --ink-text: #1b1c20;
  --ink-mute: #5d5f66;
  --ink-line: rgba(27, 28, 32, 0.12);
  --ink-del: #9c3b2e;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 360px;
  padding: clamp(14px, 2.4vw, 22px);
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  background: var(--ink-bg);
  color: var(--ink-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.ink-dark {
  --ink-bg: #0f1014;
  --ink-paper: #16181e;
  --ink-text: #eceef3;
  --ink-mute: #a3a7b3;
  --ink-line: rgba(255, 255, 255, 0.12);
  --ink-del: #ff9b88;
}
/* the root sizes itself the same whatever the host page's reset says */
.ink, .ink *, .ink *::before, .ink *::after { box-sizing: border-box; }
.ink-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ink-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ink-chip {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-text);
  font: 500 13px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ink-chip:hover { border-color: var(--ink-accent); }
.ink-chip[aria-pressed="true"] { background: var(--ink-accent); border-color: var(--ink-accent); color: #fff; }
.ink-chip:disabled { cursor: default; opacity: 0.55; }
.ink-chip:focus-visible, .ink-btn:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
.ink-demo {
  padding: 4px 10px;
  border: 1px dashed var(--ink-mute);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-mute);
}
.ink-paper {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  background: var(--ink-paper);
}
.ink-text {
  min-height: 100%;
  margin: 0;
  padding: clamp(16px, 3vw, 28px);
  font: 400 clamp(17px, 1.9vw, 21px) / 1.62 ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}
.ink-text:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-accent); border-radius: 12px; }
.ink-tok[data-h] {
  white-space: pre;
  overflow: hidden;
  vertical-align: top;
  border-radius: 3px;
}
/* struck words: a pen line drawn through (its length is --ink-strike) */
.ink-del {
  color: var(--ink-del);
  background-image: linear-gradient(var(--ink-del), var(--ink-del));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: calc(var(--ink-strike, 0) * 100%) 1.5px;
}
.ink-del.ink-gone { display: none; }
/* new words: ink colour, a light underline until reviewed */
.ink-ins {
  color: var(--ink-accent);
  background-image: linear-gradient(color-mix(in srgb, var(--ink-accent) 30%, transparent), color-mix(in srgb, var(--ink-accent) 30%, transparent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  text-shadow: 0 0 calc(var(--ink-wet, 0) * 10px) var(--ink-accent);
}
.ink-on { background-color: color-mix(in srgb, var(--ink-accent) 13%, transparent); }
.ink-well {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ink-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.ink-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ink-status { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--ink-mute); }
.ink-review { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ink-review[hidden], .ink-btn[hidden] { display: none; }
.ink-count { min-width: 52px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.ink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-width: 36px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-paper);
  color: var(--ink-text);
  font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.ink-btn:hover { border-color: var(--ink-accent); }
.ink-prev, .ink-next { padding: 0; }
.ink-btn svg { width: 16px; height: 16px; }
.ink-go, .ink-accept { background: var(--ink-accent); border-color: var(--ink-accent); color: #fff; }
.ink-go.ink-stop { background: var(--ink-text); border-color: var(--ink-text); color: var(--ink-paper); }
.ink-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ink-chip, .ink-btn { transition: none; }
}