/* Bauta: the masking demo (demo.js).
   Built only from the shared tokens in site.css, so it takes on whichever theme the page is in.
   Two columns once the demo itself is 700 px wide, stacked below that. Motion is opacity and
   transform only, and all of it stops under prefers-reduced-motion. */

.bauta-demo {
  container: bauta-demo / inline-size;
  position: relative;
  margin: 0;
  color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  text-align: left;
}

.bauta-demo *,
.bauta-demo *::before,
.bauta-demo *::after { box-sizing: border-box; }

/* ---------- The frame: the file on the left, the provider's copy on the right ---------- */

.bauta-demo .bd-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg);
}

.bauta-demo .bd-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bauta-demo .bd-pane--in { background: var(--bg-raised); }
.bauta-demo .bd-pane--out { border-top: 1px solid var(--line); }

.bauta-demo .bd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 500 12.5px/1.3 var(--font-sans);
}

/* The file tab, underlined like the open tab of an editor; a dot appears once you change it. */
.bauta-demo .bd-tab {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  color: var(--ink);
  font: 500 12.5px/1 var(--font-mono);
  cursor: text;
}
.bauta-demo .bd-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}
.bauta-demo .bd-dirty {
  position: absolute;
  top: 50%;
  right: -11px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.bauta-demo .bd-tab.is-dirty .bd-dirty { opacity: 1; transform: none; }

.bauta-demo .bd-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.bauta-demo .bd-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--provider);
}

/* The seam between the two sides: a small arrow that leans forward when something new is caught. */
.bauta-demo .bd-gate {
  position: absolute;
  z-index: 2;
  top: -12px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  rotate: 90deg;
}
.bauta-demo .bd-gate svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bauta-demo .bd-gate.is-nudge svg { animation: bd-nudge 700ms var(--ease); }

/* ---------- Left: a transparent textarea over a copy of its text that carries the marks ---------- */

.bauta-demo .bd-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 0 auto;
  font: 400 13px/1.7 var(--font-mono);
}

/* Both layers must lay text out identically, so everything that affects it is pinned here.
   The wide left padding is the gutter the line numbers sit in. */
.bauta-demo .bd-mirror,
.bauta-demo .bd-input {
  grid-area: 1 / 1;
  margin: 0;
  padding: 14px 16px 16px calc(2ch + 26px);
  border: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: 0;
  word-spacing: 0;
  text-indent: 0;
  text-transform: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.bauta-demo .bd-mirror {
  min-height: calc(8 * 1.7em + 30px);
  color: transparent;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.bauta-demo .bd-input {
  display: block;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  resize: none;
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent);
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.bauta-demo .bd-input::placeholder { color: var(--muted); opacity: 1; }
.bauta-demo .bd-input:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: -7px;
  border-radius: calc(var(--radius-s) + 6px);
}

/* What Bauta caught, lit up under your text. */
.bauta-demo .bd-mirror mark {
  padding: 0;
  border-radius: 3px;
  background: var(--secret-bg);
  box-shadow:
    0 0 0 2px var(--secret-bg),
    inset 0 -1.5px 0 color-mix(in srgb, var(--secret) 72%, transparent);
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bauta-demo .bd-mirror mark.is-wait { opacity: 0; }
.bauta-demo .bd-mirror mark.is-fresh { animation: bd-fade 450ms var(--ease) both; }
.bauta-demo .bd-mirror mark.is-hot {
  background: color-mix(in srgb, var(--secret) 22%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--secret) 22%, transparent),
    inset 0 -1.5px 0 var(--secret);
}

.bauta-demo .bd-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 16px 12px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font: 400 12.5px/1.3 var(--font-sans);
}
.bauta-demo .bd-tools__label { margin-right: 2px; }

.bauta-demo .bd-add {
  -webkit-appearance: none;
  appearance: none;
  min-height: 28px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font: 500 12.5px/1 var(--font-sans);
  cursor: pointer;
}
.bauta-demo .bd-add:hover { border-color: var(--line-strong); }
.bauta-demo .bd-add:active { transform: translateY(1px); }

/* Line numbers, in the margin of both sides. */
.bauta-demo .bd-line { position: relative; }
.bauta-demo .bd-line::before {
  content: attr(data-n);
  position: absolute;
  top: 0;
  right: calc(100% + 12px);
  color: var(--muted);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Right: what leaves your machine ---------- */

.bauta-demo .bd-body {
  flex: 1 0 auto;
  padding: 14px 16px 16px 0;
}

.bauta-demo .bd-out {
  margin: 0;
  padding: 0 0 0 calc(2ch + 26px);
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 400 13px/1.7 var(--font-mono);
  font-variant-ligatures: none;
  tab-size: 4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.bauta-demo .bd-out:empty::before {
  content: "Nothing to send yet.";
  color: var(--muted);
  font-style: italic;
}

/* A placeholder. Two layers under the text cross-fade from the red of the secret to the gold of
   the placeholder while the characters scramble (demo.js drives --bd-k from 0 to 1). */
/* inline-block keeps line breaks around a chip the same whatever it shows mid-scramble; the
   shorter line height keeps it inside the line so rows do not grow. */
.bauta-demo .bd-chip {
  --bd-k: 1;
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin: 0 0.04em;
  padding: 0.1em 0.32em;
  border-radius: var(--radius-s);
  color: var(--placeholder);
  font-weight: 500;
  line-height: 1.42;
  white-space: pre;
}
.bauta-demo .bd-chip::before,
.bauta-demo .bd-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
}
.bauta-demo .bd-chip::before {
  background: var(--placeholder-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--placeholder) 30%, transparent);
  opacity: var(--bd-k);
}
.bauta-demo .bd-chip::after {
  background: var(--secret-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--secret) 32%, transparent);
  opacity: calc(1 - var(--bd-k));
}
.bauta-demo .bd-chip.is-wait { --bd-k: 0; }
.bauta-demo .bd-chip.is-hot::before { box-shadow: inset 0 0 0 1px var(--placeholder); }
.bauta-demo .bd-chip .bd-s { color: var(--secret); }
.bauta-demo .bd-chip .bd-z { color: var(--secret); opacity: 0.55; }
.bauta-demo .bd-chip .bd-g { opacity: 0.5; }

/* ---------- The tally, in the words `bauta scan` uses ---------- */

.bauta-demo .bd-sum {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 400 13px/1.5 var(--font-sans);
}
.bauta-demo .bd-sum__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
}
.bauta-demo .bd-sum.is-wait .bd-sum__in { opacity: 0; }
.bauta-demo .bd-sum.is-in .bd-sum__in { animation: bd-rise 600ms var(--ease) var(--bd-delay, 0ms) both; }

.bauta-demo .bd-n {
  display: inline-block;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bauta-demo .bd-n.is-tick { animation: bd-tick 450ms var(--ease) both; }

.bauta-demo .bd-keep { color: var(--ink); }
.bauta-demo .bd-keep::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: -1px;
  background: var(--ok);
  -webkit-mask: var(--bd-check) center / contain no-repeat;
  mask: var(--bd-check) center / contain no-repeat;
  --bd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bauta-demo .bd-rules { font: 400 12px/1.5 var(--font-mono); }

/* ---------- Under the frame ---------- */

.bauta-demo .bd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 12px;
}
.bauta-demo .bd-note {
  margin: 0;
  color: var(--muted);
  font: 400 13px/1.5 var(--font-sans);
}
.bauta-demo .bd-reset {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 13px/1.5 var(--font-sans);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bauta-demo .bd-reset:hover { text-decoration-color: var(--accent); }

.bauta-demo button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bauta-demo .bd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---------- Side by side ---------- */

@container bauta-demo (min-width: 700px) {
  .bauta-demo .bd-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bauta-demo .bd-pane--out { border-top: 0; border-left: 1px solid var(--line); }
  .bauta-demo .bd-head { padding: 0 20px; }
  .bauta-demo .bd-pane--in .bd-head { padding-right: 30px; }
  .bauta-demo .bd-pane--out .bd-head { padding-left: 26px; }
  .bauta-demo .bd-gate { top: 9px; right: auto; left: -12px; rotate: none; }
  .bauta-demo .bd-edit,
  .bauta-demo .bd-out { font-size: 13.5px; }
  .bauta-demo .bd-mirror,
  .bauta-demo .bd-input { padding: 16px 20px 18px calc(2ch + 30px); }
  .bauta-demo .bd-body { padding: 16px 20px 18px 0; }
  .bauta-demo .bd-out { padding-left: calc(2ch + 30px); }
  .bauta-demo .bd-tools { padding: 10px 20px 12px; }
  .bauta-demo .bd-sum { padding: 12px 20px 13px; }
}

/* iOS zooms into text fields set smaller than 16 px; give it 16 there and nowhere else. */
@supports (-webkit-touch-callout: none) {
  .bauta-demo .bd-edit { font-size: 16px; }
}

@keyframes bd-fade { from { opacity: 0; } }
@keyframes bd-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes bd-tick { from { opacity: 0; transform: translateY(0.45em); } }
@keyframes bd-nudge { 40% { translate: 3px 0; } }

@media (prefers-reduced-motion: reduce) {
  .bauta-demo *,
  .bauta-demo *::before,
  .bauta-demo *::after {
    animation: none !important;
    transition: none !important;
  }
}