/* Transcrib Si — the styles of the filler word remover.
 *
 * The colors come from the tokens of the site (assets/style.css), so the
 * tool follows the theme of the page: light and dark.
 *
 * The only motion here is the border of the focused field, and it is off
 * when the reader asked for less motion.
 */

.tool {
  max-width: 56rem;
  margin: 0 auto;
  background: var(--bg-raised);
  color: var(--text);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  box-shadow: var(--shadow-l);
}

.tool__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .tool__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* --------------------------------------------------------------- controls */

.tool__levels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.tool__levels .check {
  padding-bottom: 0;
}

.tool__cats {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4) var(--space-2);
  margin: 0 0 var(--space-4);
}

.tool__cats legend {
  font-size: var(--fs-300);
  font-weight: 600;
  padding: 0 var(--space-2);
}

.tool__cat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-300);
  padding: var(--space-1) 0;
  cursor: pointer;
}

.tool__cat input {
  margin-top: 0.25rem;
}

.tool__cat-note {
  display: block;
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--fs-200);
}

.tool__privacy {
  margin: var(--space-2) 0 0;
}

/* ------------------------------------------------------------------- text */

.tool__textarea {
  min-height: 210px;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  line-height: 1.55;
}

.tool__textarea--clean {
  min-height: 190px;
}

/* ---------------------------------------------------------------- results */

.tool__counter {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-500);
  font-weight: 600;
}

.tool__highlight {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg-sunken);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 18rem;
  overflow-y: auto;
}

.tool__highlight-label {
  display: block;
  font-size: var(--fs-300);
  font-weight: 600;
  margin: var(--space-4) 0 var(--space-2);
}

.tool__mark {
  background: transparent;
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

.tool__mark--hesitation {
  background: #fde8c8;
  box-shadow: inset 0 -2px 0 #d99413;
}

.tool__mark--discourse {
  background: #dde9fb;
  box-shadow: inset 0 -2px 0 #3f6fd0;
}

.tool__mark--hedge {
  background: #e2dcf5;
  box-shadow: inset 0 -2px 0 #7a4bb5;
}

.tool__mark--conversation {
  background: #fbe0e4;
  box-shadow: inset 0 -2px 0 #c2455a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool__mark--hesitation {
    background: #4a3717;
    box-shadow: inset 0 -2px 0 #e0a75f;
  }

  :root:not([data-theme="light"]) .tool__mark--discourse {
    background: #1d2c47;
    box-shadow: inset 0 -2px 0 #7ba2ec;
  }

  :root:not([data-theme="light"]) .tool__mark--hedge {
    background: #2f2749;
    box-shadow: inset 0 -2px 0 #a98ce0;
  }

  :root:not([data-theme="light"]) .tool__mark--conversation {
    background: #4a2029;
    box-shadow: inset 0 -2px 0 #ef8b8b;
  }
}

:root[data-theme="dark"] .tool__mark--hesitation { background: #4a3717; box-shadow: inset 0 -2px 0 #e0a75f; }
:root[data-theme="dark"] .tool__mark--discourse { background: #1d2c47; box-shadow: inset 0 -2px 0 #7ba2ec; }
:root[data-theme="dark"] .tool__mark--hedge { background: #2f2749; box-shadow: inset 0 -2px 0 #a98ce0; }
:root[data-theme="dark"] .tool__mark--conversation { background: #4a2029; box-shadow: inset 0 -2px 0 #ef8b8b; }

/* ----------------------------------------------------------------- legend */

.tool__legend {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-200);
  color: var(--text-muted);
}

.tool__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tool__dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--line-strong);
}

.tool__dot--hesitation { background: #d99413; }
.tool__dot--discourse { background: #3f6fd0; }
.tool__dot--hedge { background: #7a4bb5; }
.tool__dot--conversation { background: #c2455a; }

/* ------------------------------------------------------------- the buttons */

.tool__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tool__actions .btn {
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .tool {
    padding: var(--space-4);
  }

  .tool__actions .btn {
    width: 100%;
  }
}

/* Less motion: the tool does not move at all. */
@media (prefers-reduced-motion: reduce) {
  .tool *,
  .tool *::before,
  .tool *::after {
    transition: none !important;
    animation: none !important;
  }
}