/* TCB Search: the box, the panel of answers, and the settings screen.

   The box takes its font from whatever it sits in, so it follows the theme
   rather than fighting it. Only the colors and the shapes are the plugin's. */

.tcbs {
  /* Every one of these can be set on the appearance screen. The values here
     are only what the plugin falls back to. */
  --s-navy: #0f3a74;
  --s-deep: #0a2a56;
  --s-ink: #172030;
  --s-soft: #5b6878;
  --s-line: #e3e8f0;
  --s-wash: #f5f8fc;
  --s-card: #ffffff;
  --s-mark: #fff0b8;
  --s-r-input: 12px;
  --s-r-panel: 14px;
  --s-r-card: 10px;
  --s-h-input: 46px;
  --s-w-panel: 560px;
  --s-shadow: 0 2px 4px rgba(18, 34, 60, .05), 0 18px 40px rgba(18, 34, 60, .16);
  --s-t-title: 14px;
  --s-t-excerpt: 12.2px;
  --s-cols: 2;
  --s-font: inherit;
  position: relative;
  display: block;
  width: 100%;
  max-width: 620px;
  font-family: var(--s-font, inherit);
  color: var(--s-ink);
}

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

.tcbs-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---- the box ---- */

.tcbs-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.tcbs-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: var(--s-h-input);
  margin: 0;
  padding: 0 76px 0 42px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-input);
  background: var(--s-wash);
  color: var(--s-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.tcbs-input::placeholder { color: #8e9aab; opacity: 1; }
.tcbs-input::-webkit-search-cancel-button { display: none; }

.tcbs-input:focus {
  outline: none;
  border-color: var(--s-navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 58, 116, .13);
}

.tcbs--small .tcbs-input { height: calc(var(--s-h-input) - 6px); font-size: 14px; padding-left: 38px; }
.tcbs--large .tcbs-input { height: calc(var(--s-h-input) + 10px); font-size: 16.5px; }

.tcbs-glass {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8e9aab;
  line-height: 0;
  pointer-events: none;
}

.tcbs--small .tcbs-glass { left: 12px; }

.tcbs-clear,
.tcbs-key {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.tcbs-clear {
  right: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e7ecf4;
  color: #5b6878;
  line-height: 0;
  cursor: pointer;
}

.tcbs-clear:hover { background: #dbe3ee; color: var(--s-ink); }
.tcbs-clear[hidden] { display: none; }

.tcbs-key {
  right: 12px;
  padding: 2px 7px;
  border: 1px solid #dbe1ea;
  border-radius: 6px;
  background: #fff;
  color: #8e9aab;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}

.tcbs-go {
  flex: 0 0 auto;
  height: var(--s-h-input);
  padding: 0 20px;
  border: 0;
  border-radius: var(--s-r-input);
  background: var(--s-navy);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}

.tcbs-go:hover { background: var(--s-deep); }

/* a thin line crawls under the box while the server is answering */
.tcbs.is-busy .tcbs-form::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--s-navy), transparent);
  animation: tcbs-run 1s linear infinite;
}

@keyframes tcbs-run {
  0% { transform: translateX(-40%) scaleX(.4); opacity: .35; }
  50% { opacity: 1; }
  100% { transform: translateX(40%) scaleX(.4); opacity: .35; }
}

/* ---- the panel ---- */

.tcbs-panel {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 9px);
  left: 0;
  right: 0;
  min-width: min(var(--s-w-panel), calc(100vw - 32px));
  max-width: calc(100vw - 24px);
  max-height: min(74vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-panel);
  background: var(--s-card);
  box-shadow: var(--s-shadow);
  text-align: left;
}

.tcbs-panel[hidden] { display: none; }

/* a word that always means one page */
.tcbs-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 5px 0;
  padding: 9px 11px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-r-card);
  background: color-mix(in srgb, var(--s-navy) 6%, var(--s-card));
  color: var(--s-ink);
  text-decoration: none;
}

.tcbs-jump:hover, .tcbs-jump.is-at {
  border-color: var(--s-navy);
  color: var(--s-ink);
  text-decoration: none;
}

.tcbs-jump-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--s-navy);
  color: var(--s-card);
  line-height: 0;
  flex: 0 0 auto;
}

/* the line across the top of the panel */
.tcbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 9px;
  margin: 0 0 3px;
  border-bottom: 1px solid var(--s-line);
}

.tcbs-head-c { font-size: 12.3px; color: var(--s-soft); }
.tcbs-head-c b { color: var(--s-ink); font-weight: 700; }

.tcbs-head-k {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #93a1b3;
  white-space: nowrap;
}

.tcbs-head-k kbd {
  display: inline-block;
  min-width: 17px;
  padding: 1px 4px;
  border: 1px solid #dbe1ea;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--s-card);
  font-family: inherit;
  font-size: 10.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--s-soft);
}

@media (max-width: 560px) { .tcbs-head-k { display: none; } }

/* the heading over a group */
.tcbs-group {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 5px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  color: var(--s-soft);
}

.tcbs-group.is-lead { color: var(--s-navy); }

.tcbs-pin {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--s-navy);
  flex: 0 0 auto;
}

.tcbs-group-n {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--s-wash);
  border: 1px solid var(--s-line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--s-soft);
}

/* the front group, as cards */
.tcbs-cards {
  display: grid;
  grid-template-columns: repeat(var(--s-cols), minmax(0, 1fr));
  gap: 6px;
  padding: 0 5px;
}

@media (max-width: 620px) { .tcbs-cards { grid-template-columns: minmax(0, 1fr); } }

/* everything after it, as a plain list */
.tcbs-rows { padding: 0 5px; }

.tcbs-hit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 9px;
  border-radius: var(--s-r-card);
  color: var(--s-ink);
  text-decoration: none;
  border: 1px solid transparent;
}

.tcbs-hit:hover,
.tcbs-hit.is-at {
  background: var(--s-wash);
  color: var(--s-ink);
  text-decoration: none;
}

.tcbs-hit--card {
  align-items: center;
  padding: 10px 11px;
  border-color: var(--s-line);
  background: var(--s-card);
}

.tcbs-hit--card:hover,
.tcbs-hit--card.is-at {
  border-color: #bed0e8;
  background: var(--s-wash);
  box-shadow: 0 2px 8px rgba(18, 34, 60, .07);
}

.tcbs-thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--s-wash);
  border: 1px solid var(--s-line);
}

.tcbs-hit--card .tcbs-thumb { width: 52px; height: 52px; border-radius: 10px; }

.tcbs-thumb--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9fb0c6;
  line-height: 0;
}

.tcbs-text { min-width: 0; flex: 1 1 auto; }

.tcbs-badge {
  display: inline-block;
  margin: 0 0 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(15, 58, 116, .08);
  color: var(--s-navy);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
}

.tcbs-text b {
  display: block;
  font-size: var(--s-t-title);
  font-weight: 650;
  line-height: 1.32;
  color: var(--s-ink);
}

.tcbs-hit--card .tcbs-text b { font-size: calc(var(--s-t-title) - 0.2px); }

.tcbs-ex {
  display: block;
  margin-top: 2px;
  font-size: var(--s-t-excerpt);
  line-height: 1.45;
  color: var(--s-soft);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tcbs-rows .tcbs-ex { -webkit-line-clamp: 1; }

.tcbs-arrow {
  flex: 0 0 auto;
  color: #b3c0d2;
  line-height: 0;
  align-self: center;
}

.tcbs-hit.is-at .tcbs-arrow,
.tcbs-hit:hover .tcbs-arrow,
.tcbs-more.is-at .tcbs-arrow,
.tcbs-more:hover .tcbs-arrow { color: var(--s-navy); }

.tcbs-panel mark {
  background: var(--s-mark);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
  font-weight: inherit;
}

.tcbs-msg {
  margin: 0;
  padding: 16px 13px;
  font-size: 13.5px;
  color: var(--s-soft);
  text-align: center;
}

.tcbs-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  padding: 11px 14px;
  border-top: 1px solid var(--s-line);
  border-radius: 0 0 10px 10px;
  color: var(--s-navy);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}

.tcbs-more:hover, .tcbs-more.is-at { background: var(--s-wash); color: var(--s-navy); text-decoration: none; }

.tcbs-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--s-soft);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .tcbs-panel { min-width: 0; left: 0; right: 0; }
}

@media (max-width: 480px) {
  .tcbs-panel { max-height: 62vh; }
  .tcbs-thumb { width: 38px; height: 38px; }
}

/* =========================================================================
   The settings screen
   ========================================================================= */

.tcbsA { --a-navy: #0f3a74; --a-line: #e3e8f0; --a-soft: #5b6878; --a-wash: #f5f8fc; }

.tcbsA-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin: 18px 0 16px;
}

.tcbsA-title {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 650;
  color: #172030;
  letter-spacing: -.014em;
}

.tcbsA-intro { margin: 0; max-width: 78ch; font-size: 13.8px; line-height: 1.65; color: var(--a-soft); }

.tcbsA-code {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--a-line);
  border-radius: 11px;
  background: #fff;
}

.tcbsA-code span { font-size: 12.5px; color: var(--a-soft); }

.tcbsA-code input {
  width: 130px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  border: 1px solid #d3dae5;
  border-radius: 7px;
  padding: 5px 9px;
  background: var(--a-wash);
}

.tcbsA-card {
  max-width: 1000px;
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  padding: 17px 19px 19px;
  margin: 0 0 16px;
  box-shadow: 0 1px 2px rgba(18, 34, 60, .05);
}

.tcbsA-card h3 {
  margin: 0 0 4px;
  padding: 0 0 10px;
  border-bottom: 1px solid #eef2f7;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--a-navy);
}

.tcbsA-hint { margin: 10px 0 0; font-size: 12.8px; line-height: 1.6; color: var(--a-soft); max-width: 80ch; }
.tcbsA-card h3 + .tcbsA-hint { margin-top: 11px; }

.tcbsA-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 9px;
  margin-top: 12px;
}

.tcbsA-type {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--a-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}

.tcbsA-type:hover { border-color: #c3d2e8; background: var(--a-wash); }
.tcbsA-type input { margin: 2px 0 0; }
.tcbsA-type b { display: block; font-size: 13.4px; color: #172030; }
.tcbsA-type em { display: block; font-style: normal; font-size: 11.8px; color: var(--a-soft); }

.tcbsA-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px 16px;
  margin-top: 13px;
}

.tcbsA-fields.tcbsA-one { grid-template-columns: minmax(0, 1fr); }

.tcbsA-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tcbsA-f > span { font-size: 12px; font-weight: 600; color: var(--a-soft); }

.tcbsA-f input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #c9d2df;
  border-radius: 7px;
  background: #fff;
  font-size: 13.5px;
}

.tcbsA-f input:focus {
  border-color: var(--a-navy);
  box-shadow: 0 0 0 3px rgba(15, 58, 116, .13);
  outline: none;
}

.tcbsA-checks { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.tcbsA-checks label { font-size: 13.5px; color: #172030; }

.tcbsA-snips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 16px; margin-top: 13px; }
.tcbsA-snips input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.2px; background: var(--a-wash); }

.tcbsA-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  max-width: 1000px;
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid var(--a-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(18, 34, 60, .05);
}

.tcbsA-actions .button-hero { min-height: 38px; padding: 0 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.tcbsA-note { font-size: 12.8px; color: var(--a-soft); }

/* ---- the tabs, the appearance screen and the log ---- */

.tcbsA-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 14px 0 0;
  border-bottom: 1px solid var(--a-line);
}

.tcbsA-tab {
  padding: 9px 15px 10px;
  border-bottom: 3px solid transparent;
  border-radius: 7px 7px 0 0;
  color: var(--a-soft);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
}

.tcbsA-tab:hover { color: var(--a-navy); background: var(--a-wash); box-shadow: none; }
.tcbsA-tab.is-on { color: var(--a-navy); border-bottom-color: var(--a-navy); }

.tcbsA-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 20px; align-items: start; }
@media (max-width: 1400px) { .tcbsA-split { grid-template-columns: minmax(0, 1fr); } .tcbsA-stick { position: static !important; } }
.tcbsA-split-l, .tcbsA-split-r { min-width: 0; }
.tcbsA-split-l .tcbsA-card, .tcbsA-split-r .tcbsA-card { max-width: none; }
.tcbsA-stick { position: sticky; top: 46px; }
.tcbsA-stage { padding: 16px; border: 1px solid var(--a-line); border-radius: 12px; background: #fbfcfe; }

.tcbsA-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 9px; margin-top: 12px; }

.tcbsA-preset {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--a-line); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left; font-family: inherit;
}
.tcbsA-preset:hover { border-color: var(--a-navy); background: var(--a-wash); }
.tcbsA-preset b { font-size: 12.8px; color: #172030; font-weight: 600; }
.tcbsA-swatches { display: flex; flex: 0 0 auto; }
.tcbsA-swatches i { width: 13px; height: 22px; border: 1px solid rgba(0,0,0,.12); }
.tcbsA-swatches i:first-child { border-radius: 5px 0 0 5px; }
.tcbsA-swatches i:last-child { border-radius: 0 5px 5px 0; }

.tcbsA-colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 9px; margin-top: 12px; }

.tcbsA-color {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--a-line); border-radius: 10px; background: #fff;
}
.tcbsA-dot { width: 34px; height: 34px; padding: 0; border: 1px solid var(--a-line); border-radius: 8px; background: none; cursor: pointer; flex: 0 0 auto; }
.tcbsA-color-t { min-width: 0; flex: 1 1 auto; }
.tcbsA-color-t b { display: block; font-size: 13px; color: #172030; }
.tcbsA-color-t em { display: block; font-style: normal; font-size: 11.4px; color: var(--a-soft); line-height: 1.4; }
.tcbsA-hex { width: 86px; flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; text-transform: lowercase; border: 1px solid #c9d2df; border-radius: 7px; padding: 6px 8px; }

.tcbsA-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 18px; margin: 13px 0 4px; }
.tcbsA-slider { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tcbsA-slider > span { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--a-soft); }
.tcbsA-slider > span b { color: var(--a-navy); font-variant-numeric: tabular-nums; }
.tcbsA-slider input[type=range] { width: 100%; accent-color: #0f3a74; }

.tcbsA-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; max-width: 1000px; }
.tcbsA-two .tcbsA-card { max-width: none; }

.tcbsA-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.tcbsA-pill.is-stop { background: #fdeceb; color: #9c3326; }
.tcbsA-pill.is-go { background: #e9f6ef; color: #17704a; }

.tcbsA-log { width: 100%; border-collapse: collapse; margin-top: 11px; font-size: 13.2px; }
.tcbsA-log td { padding: 7px 0; border-bottom: 1px solid #f1f4f9; }
.tcbsA-log tr:last-child td { border-bottom: 0; }
.tcbsA-log b { font-weight: 600; color: #172030; }
.tcbsA-n { text-align: right; color: var(--a-soft); font-variant-numeric: tabular-nums; width: 60px; }
.tcbsA-none { margin: 12px 0 0; font-size: 13px; color: var(--a-soft); }

/* ---- the search boxes screen ---- */

.tcbsA-box-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tcbsA-box-h h3 { flex: 1 1 auto; border: 0; padding: 0; margin: 0 0 8px; }
.tcbsA-box-code { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.tcbsA-box-code input { width: 230px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; border: 1px solid #c9d2df; border-radius: 7px; padding: 6px 9px; background: var(--a-wash); }
.tcbsA-drop.button { border-color: #d9a7a2; color: #9c3326; }
.tcbsA-drop.button:hover { border-color: #9c3326; background: #fdeceb; color: #9c3326; }
.tcbsA-box { border-left: 4px solid var(--a-navy); }
.tcbsA-sub { margin: 18px 0 2px; font-size: 13px; font-weight: 700; color: #172030; }
.tcbsA-types--tight { margin-top: 10px; }
.tcbsA-types--tight .tcbsA-type { padding: 8px 11px; }
.tcbsA-type.is-off { opacity: .5; }
.tcbsA-type.is-off em { color: #9c3326; }
.tcbsA-add { border-left: 4px solid #b7c4d6; }
.tcbsA-checks code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  background: rgba(15,58,116,.08); padding: 1px 5px; border-radius: 4px; }