/* TaskBlink Data, the one sentence search (DESIGN-BRIEF 2.2; Main, Search, Onb3Search and AnonResults
   artboards). Reads tb.css tokens. Sizes: hero (Main), home (Search, Onb3Search), popover (the tag chip,
   Find more) and headline (a visitor's sentence after the search). */

.tb-sentence { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* The box: hero and home are 900 x 76, radius 18, a 1 px line, white, the search glow; focused, the
   border turns brand-text and the glow grows (Main) */
.tb-sentence__box {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 0; text-align: left;
}
.tb-sentence--hero .tb-sentence__box, .tb-sentence--home .tb-sentence__box {
  max-width: 900px; min-height: 76px; padding: 0 12px 0 24px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-search);
  transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.tb-sentence--hero .tb-sentence__box:focus-within, .tb-sentence--home .tb-sentence__box:focus-within {
  border-color: var(--brand-text); box-shadow: var(--sh-search-focus);
}

.tb-sentence__word { flex: none; font: 500 22px/1 var(--font); color: var(--ink-3); letter-spacing: -0.01em; }

/* A field has no box: the value over a 2 px underline that turns brand on hover and focus; its width
   follows the text (min 180) through a hidden copy of the text (data-value) in the input's grid cell.
   The label is the 44 px hit area. */
.tb-sentence__field { position: relative; display: inline-grid; align-items: center; min-width: 180px; min-height: 44px; max-width: 100%; cursor: text; }
/* The artboards draw both fields 210 wide at rest (Main, Search, Onb3Search): the brief's min 180 rounded
   up to the drawn width */
.tb-sentence--hero .tb-sentence__field, .tb-sentence--home .tb-sentence__field,
.tb-sentence--hero .tb-sentence__input, .tb-sentence--home .tb-sentence__input { min-width: 210px; }
.tb-sentence__field--find { flex: 0 1 auto; max-width: 360px; }
.tb-sentence__field--near { flex: 0 1 auto; max-width: 300px; }
.tb-sentence__field::after {
  content: attr(data-value) "  "; grid-area: 1 / 1; visibility: hidden; white-space: pre; overflow: hidden;
  height: 0; padding: 0 2px; font: 600 22px/1 var(--font); letter-spacing: -0.01em;
}
.tb-sentence__input {
  grid-area: 1 / 1; width: 100%; min-width: 180px; height: 44px; margin: 0; padding: 0 2px;
  border: 0; border-bottom: 2px solid var(--line-strong); border-radius: 0; background: transparent; outline: none;
  font: 600 22px/1 var(--font); letter-spacing: -0.01em; color: var(--ink);
  transition: border-color var(--t-hover) var(--ease);
}
.tb-sentence__input::placeholder { color: var(--ink-3); font-weight: 600; opacity: 1; }
.tb-sentence__input:hover, .tb-sentence__input:focus { border-bottom-color: var(--brand); }
.tb-sentence__input:focus-visible { outline: none; }

/* The typewriter: ink-3 words and a 2 px brand caret */
.tb-sentence__tw {
  grid-area: 1 / 1; align-self: center; display: inline-flex; align-items: center; height: 42px; padding: 0 2px;
  pointer-events: none; white-space: nowrap; overflow: hidden;
  font: 600 22px/1 var(--font); letter-spacing: -0.01em; color: var(--ink-3);
}
.tb-sentence__tw::after {
  content: ""; display: inline-block; width: 2px; height: 26px; margin-left: 2px; border-radius: 1px;
  background: var(--brand); animation: tb-blink 1s steps(1) infinite;
}

.tb-sentence__qty { flex: none; display: inline-flex; align-items: center; }
.tb-sentence__select {
  height: 44px; min-height: 44px; padding: 0 30px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background-color: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-mono); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.tb-sentence__select:focus-visible { outline: none; border-color: var(--brand-text); box-shadow: var(--sh-search-focus); }

/* Find leads: primary large (52, radius 12, 16/600) at the right of the box; the magnifier at stroke 2 */
.tb-sentence__go { margin-left: auto; flex: none; }
.tb-sentence__go .tb-icon { stroke-width: 2; }
.tb-sentence__meta { flex: none; font: 400 13px/1.3 var(--font); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }

/* Industry suggestions under the find field (left is set to the field's own left when it opens) */
.tb-sentence__list {
  position: absolute; left: 82px; top: calc(100% + 8px); z-index: 70; width: 320px; max-width: calc(100% - 32px);
  margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-pop);
}
.tb-sentence__opt {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-md);
  font: 500 14px/1.3 var(--font); color: var(--ink); cursor: pointer;
}
.tb-sentence__opt:hover, .tb-sentence__opt[aria-selected="true"] { background: var(--brand-tint); color: var(--brand-ink); }

/* Under the box: the note (a cost line, 13 ink-2 with a 16 px icon), the chips (32 tall in 44 hit
   areas, "Try" 12/500 ink-3) and the hint (12.5 ink-3). Main: chips then hint; Search: hint then chips. */
.tb-sentence__note {
  margin: 18px 0 0; display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 900px;
  font: 400 13px/1.45 var(--font); color: var(--ink-2); text-align: center;
}
.tb-sentence__note .tb-icon { width: 16px; height: 16px; color: var(--ink-3); }
.tb-sentence__note--good .tb-icon { color: var(--good); }
.tb-sentence__note--warn .tb-icon { color: var(--warn); }
.tb-sentence__examples { margin-top: 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 8px; }
.tb-sentence__try { margin-right: 2px; font: 500 12px/1.4 var(--font); color: var(--ink-3); }
.tb-sentence__ex { margin: 6px 0; color: var(--ink-2); }
.tb-sentence__hint { margin: 6px 0 0; font: 400 12.5px/1.45 var(--font); color: var(--ink-3); text-align: center; }
.tb-sentence--home .tb-sentence__hint { margin-top: 14px; }
.tb-sentence--home .tb-sentence__examples { margin-top: 8px; }
.tb-sentence--home .tb-sentence__note + .tb-sentence__examples { margin-top: 14px; }

/* Popover form (the tag chip's sentence, Find more): no box of its own, the popover is the box */
.tb-sentence--popover .tb-sentence__box { flex-wrap: wrap; gap: 10px; }
.tb-sentence--popover .tb-sentence__word { font-size: 17px; }
.tb-sentence--popover .tb-sentence__field { min-width: 140px; }
.tb-sentence--popover .tb-sentence__field::after, .tb-sentence--popover .tb-sentence__input,
.tb-sentence--popover .tb-sentence__tw { font-size: 17px; min-width: 140px; }
.tb-sentence--popover .tb-sentence__list { left: 0; }

/* Headline (visitors, AnonResults row 1): the box, its shadow and the button melt away; values 22/600
   ink over the 2 px line-strong underline, "near" 22/500 ink-3, no leading "Find"; tapping a value edits
   it in place, and only then a small primary Find leads (36) appears after the sentence. */
.tb-sentence--headline { align-items: flex-start; width: auto; max-width: 100%; }
.tb-sentence--headline .tb-sentence__box { gap: 8px; flex-wrap: wrap; min-height: 44px; }
.tb-sentence--headline .tb-sentence__word--find,
.tb-sentence--headline .tb-sentence__qty,
.tb-sentence--headline .tb-sentence__note,
.tb-sentence--headline .tb-sentence__examples,
.tb-sentence--headline .tb-sentence__hint,
.tb-sentence--headline .tb-sentence__go { display: none; }
.tb-sentence--headline.is-editing .tb-sentence__go { display: inline-flex; margin-left: 4px; }
.tb-sentence--headline .tb-sentence__field { min-width: 2ch; max-width: 420px; }
.tb-sentence--headline .tb-sentence__input { min-width: 2ch; height: 32px; padding: 0 0 1px; }
.tb-sentence--headline .tb-sentence__field::after { content: attr(data-value); padding: 0; }
.tb-sentence--headline .tb-sentence__meta { margin-left: 4px; }

/* The hero melting into the headline (and back): one fade and rise, nothing moves sideways */
.tb-sentence.is-changing .tb-sentence__box { animation: tb-rise-in var(--t-card) var(--ease); }

/* Phone: the words become small labels and everything stacks, one 358 column */
@media (max-width: 720px) {
  .tb-sentence--hero .tb-sentence__box, .tb-sentence--home .tb-sentence__box {
    flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 16px; border-radius: var(--r-lg);
  }
  .tb-sentence--hero .tb-sentence__word, .tb-sentence--home .tb-sentence__word {
    margin-bottom: -6px; font: 500 11px/1.2 var(--font); letter-spacing: 0.14em; text-transform: uppercase;
  }
  .tb-sentence--hero .tb-sentence__field, .tb-sentence--home .tb-sentence__field { display: grid; width: 100%; max-width: none; }
  .tb-sentence__input, .tb-sentence__field::after, .tb-sentence__tw { font-size: 19px; }
  .tb-sentence__tw::after { height: 20px; }
  .tb-sentence--hero .tb-sentence__go, .tb-sentence--home .tb-sentence__go { width: 100%; margin-left: 0; }
  .tb-sentence__list { left: 16px; width: calc(100% - 32px); }
  .tb-sentence--headline .tb-sentence__input, .tb-sentence--headline .tb-sentence__field::after { font-size: 19px; }
  .tb-sentence__note { margin-top: 14px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-sentence__tw::after { animation: none; }
  .tb-sentence.is-changing .tb-sentence__box { animation: none; }
}