/* MAR-84 — the natural-language AI stock finder, on /v2/stocks.html.
 *
 * Scoped entirely under .aiFind so it cannot restyle the shell that hosts it.
 * Every colour, radius and font is a token from mmr-tokens.css: this block adds
 * no ninth colour language, and the section reads as part of the page rather
 * than as a widget dropped onto it.
 *
 * VISUAL RANK IS DELIBERATE. FIND MY STOCKS above stays the loudest thing on
 * the page — it is the red gradient CTA. This section is a bordered panel with
 * an accent hairline: unmissable, clearly second. The AI box must not look like
 * a competing front door, because it is not one; it is a faster way into the
 * same screener.
 */

.aiFind {
  margin: 22px 0 0;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(39, 226, 129, .05), transparent 120px), var(--surface);
  padding: clamp(14px, 2.4vw, 22px);
  box-shadow: var(--shadow);
}

.aiFind .aiHead { margin-bottom: 12px; }
.aiFind .aiKicker {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.aiFind h2 { font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; margin: 6px 0 5px; }
.aiFind .aiLede { color: var(--muted); font-size: 13px; margin: 0; max-width: 74ch; }

/* ---------------- the box ---------------- */
.aiFind .aiBox { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.aiFind textarea {
  flex: 1 1 auto; min-width: 0; resize: vertical; min-height: 62px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--r-input);
  padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; line-height: 1.5;
}
.aiFind textarea::placeholder { color: var(--faint); }
.aiFind textarea:focus { border-color: var(--accent); outline: none; }

.aiFind .aiGo {
  flex: 0 0 auto; align-self: stretch; min-width: 148px; cursor: pointer;
  border: 1px solid var(--accent); border-radius: var(--r-input);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-sans); font-size: 13px; font-weight: 800;
  letter-spacing: .03em; padding: 12px 16px;
}
.aiFind .aiGo:hover { background: rgba(39, 226, 129, .2); }
.aiFind .aiGo[disabled] { opacity: .55; cursor: default; }

.aiFind .aiEgs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; align-items: center; }
.aiFind .aiEgs .lbl { font-size: 11px; color: var(--faint); }
.aiFind .eg {
  cursor: pointer; border: 1px solid var(--border2); background: var(--surface-2);
  color: var(--muted); border-radius: var(--r-pill); padding: 5px 11px;
  font-family: var(--font-sans); font-size: 11.5px; text-align: left;
}
.aiFind .eg:hover { border-color: var(--accent); color: var(--text); }

.aiFind .aiStatus { margin-top: 11px; font-size: 12.5px; color: var(--muted); min-height: 1em; }
.aiFind .aiStatus.bad { color: #ff8a94; }

/* ---------------- the interpretation ---------------- */
.aiFind .aiPlan { margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 15px; }
.aiFind .aiPlan[hidden] { display: none; }
.aiFind .aiPlanHead {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px;
}
.aiFind .aiPlanHead h3 { font-size: 13.5px; font-weight: 800; }
.aiFind .aiPlanHead .sub { font-size: 11.5px; color: var(--faint); }
.aiFind .aiRestated { color: var(--text); font-size: 13px; margin: 6px 0 12px; max-width: 78ch; }

.aiFind .chips { display: flex; flex-direction: column; gap: 9px; }
.aiFind .chip {
  border: 1px solid var(--border2); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface-2); padding: 10px 12px;
}
.aiFind .chipTop { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.aiFind .chipTop b { font-size: 13px; }
.aiFind .chipTop .grp {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.aiFind .chipTop .rm {
  margin-left: auto; cursor: pointer; border: 1px solid var(--border2);
  background: transparent; color: var(--muted); border-radius: var(--r-sm);
  font-size: 11px; padding: 3px 9px; font-family: var(--font-sans);
}
.aiFind .chipTop .rm:hover { border-color: #ff5968; color: #ff8a94; }
.aiFind .chipWhy { font-size: 12px; color: var(--muted); margin-top: 5px; }
.aiFind .chipBecause { font-size: 11.5px; color: var(--faint); margin-top: 4px; font-style: italic; }
.aiFind .chipGate {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
  margin-top: 6px; word-break: break-word;
}
.aiFind .chipEdit { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.aiFind .chipEdit label { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.aiFind .chipEdit input {
  width: 78px; background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--r-sm);
  padding: 4px 7px; font-family: var(--font-mono); font-size: 12px;
}
.aiFind .chipEdit input:focus { border-color: var(--accent); outline: none; }

.aiFind .aiUnsup {
  margin-top: 12px; border: 1px dashed var(--border2); border-radius: var(--r-sm);
  padding: 10px 12px; background: rgba(255, 181, 71, .06);
}
.aiFind .aiUnsup h4 { font-size: 12px; font-weight: 800; color: #ffb547; margin-bottom: 5px; }
.aiFind .aiUnsup li { font-size: 12px; color: var(--muted); margin: 3px 0 3px 16px; }

/* ---------------- controls ---------------- */
.aiFind .aiCtl {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-soft);
}
.aiFind .aiCtl label { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.aiFind select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border2);
  border-radius: var(--r-sm); padding: 6px 9px; font-family: var(--font-sans); font-size: 12.5px;
}
.aiFind .aiAdd, .aiFind .aiRun {
  cursor: pointer; border-radius: var(--r-input); font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700; padding: 9px 15px;
}
.aiFind .aiAdd { border: 1px solid var(--border2); background: var(--surface-2); color: var(--text); }
.aiFind .aiAdd:hover { border-color: var(--accent); }
.aiFind .aiRun {
  margin-left: auto; border: 1px solid var(--accent);
  background: var(--accent); color: #05240f; font-weight: 800;
}
.aiFind .aiRun:hover { filter: brightness(1.08); }
.aiFind .aiRun[disabled] { opacity: .5; cursor: default; }

.aiFind .aiQuery {
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--faint); word-break: break-all;
}

/* ---------------- the add-a-filter drawer ---------------- */
.aiFind .aiCat { margin-top: 12px; }
.aiFind .aiCat[hidden] { display: none; }
.aiFind .catGrp { margin-bottom: 12px; }
.aiFind .catGrp h4 {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.aiFind .catList { display: flex; flex-wrap: wrap; gap: 7px; }
.aiFind .catBtn {
  cursor: pointer; border: 1px solid var(--border2); background: var(--surface-2);
  color: var(--text); border-radius: var(--r-pill); padding: 6px 12px;
  font-family: var(--font-sans); font-size: 12px; text-align: left;
}
.aiFind .catBtn:hover { border-color: var(--accent); }
.aiFind .catBtn[disabled] { opacity: .45; cursor: not-allowed; }
.aiFind .catBtn.on { border-color: var(--accent); color: var(--accent); }

/* ---------------- results ---------------- */
.aiFind .aiRes { margin-top: 16px; }
.aiFind .aiRes[hidden] { display: none; }
.aiFind .aiResHead {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--border-soft); padding-top: 14px;
}
.aiFind .aiResHead h3 { font-size: 14px; font-weight: 800; }
.aiFind .aiResHead .cnt { font-size: 12px; color: var(--muted); }
.aiFind .aiRows { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.aiFind .aiRow {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, .8fr)) auto;
  gap: 10px; align-items: center; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: var(--r-sm); padding: 9px 12px; font-family: var(--font-sans);
}
.aiFind .aiRow:hover { border-color: var(--accent); }
.aiFind .aiRow .tk { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.aiFind .aiRow .nm {
  font-size: 11px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.aiFind .aiRow .met small {
  display: block; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.aiFind .aiRow .met b { font-size: 13px; font-family: var(--font-mono); }
.aiFind .aiRow .met b.na { font-size: 10px; color: var(--faint); font-family: var(--font-sans); font-weight: 600; }
.aiFind .aiRow .st {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: var(--r-pill); padding: 4px 9px;
  border: 1px solid var(--border2); color: var(--muted); white-space: nowrap;
}
.aiFind .aiRow .st.pGreen { color: #27e281; border-color: rgba(39, 226, 129, .45); }
.aiFind .aiRow .st.pBlue { color: #5aa7ff; border-color: rgba(90, 167, 255, .45); }
.aiFind .aiRow .st.pGold { color: #ffb547; border-color: rgba(255, 181, 71, .45); }
.aiFind .aiRow .st.pRed { color: #ff5968; border-color: rgba(255, 89, 104, .45); }

.aiFind .aiEmpty {
  border: 1px dashed var(--border2); border-radius: var(--r-sm);
  padding: 14px; color: var(--muted); font-size: 12.5px;
}
.aiFind .aiFoot { margin-top: 10px; font-size: 11px; color: var(--faint); max-width: 84ch; }

/* ---------------- narrow ---------------- */
@media (max-width: 860px) {
  .aiFind .aiRow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 8px;
  }
  .aiFind .aiRow .who { grid-column: 1 / -1; }
  .aiFind .aiRow .st { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .aiFind .aiBox { flex-direction: column; }
  .aiFind .aiGo { width: 100%; min-width: 0; }
  .aiFind .aiRun { margin-left: 0; width: 100%; }
  .aiFind .aiCtl label { width: 100%; }
  .aiFind select { flex: 1 1 auto; min-width: 0; }
}