/* ===========================================================================
   ADAAS Solution Finder — "Find your ADAAS"
   A guided, card-less recommendation experience in the network design system
   (Poppins/Archivo/Caveat type, theme tokens, rainbow border, glass rows,
   faint 3D monogram). Served at /shared/css/adaas-finder.css and linked via
   headExtra on sites/adaas.ai/finder/index.html. Self-contained: it only uses
   adaas-core tokens (:root) that every generated page already provides.
   =========================================================================== */

.finder {
  position: relative;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 40px);
  overflow: hidden;
}

/* Faint 3D monogram behind the app — visually ties the finder to the landings. */
.finder-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.finder-bg canvas { width: 100% !important; height: 100% !important; opacity: 0.14; }

.finder-app {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Progress -------------------------------------------------------------*/
.finder-top { display: flex; align-items: center; gap: 14px; min-height: 30px; flex: none; }
.finder-back {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  background: none; border: 0; color: var(--ink-dim); cursor: pointer;
  padding: 6px 2px; letter-spacing: .01em; transition: color .2s;
}
.finder-back:hover { color: var(--ink-strong); }
.finder-back:disabled { opacity: 0; pointer-events: none; }
.finder-dots { display: flex; gap: 6px; flex: 1; }
.finder-dot { height: 3px; flex: 1; border-radius: 2px; background: var(--line-strong); transition: background .3s; }
/* Completed steps light up in the five-direction rainbow order. */
.finder-dot.done:nth-child(1) { background: #ff7a3d; }
.finder-dot.done:nth-child(2) { background: #f43f8e; }
.finder-dot.done:nth-child(3) { background: #a855f7; }
.finder-dot.done:nth-child(4) { background: #6b4bdb; }
.finder-dot.done:nth-child(5) { background: #06b6d4; }
.finder-dot.done:nth-child(6) { background: #1a8917; }

/* ---- Stage (question / thinking / result) ---------------------------------*/
.finder-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.finder-q { display: flex; flex-direction: column; animation: finderIn .3s ease-out; }
.finder-kicker {
  font-family: var(--font-script); font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600; color: var(--accent); letter-spacing: .02em; line-height: 1;
}
.finder-q h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 4.2vw, 33px); line-height: 1.12; letter-spacing: -.02em;
  color: var(--ink-strong); margin: 4px 0 16px; max-width: 20ch;
}

.finder-opts { display: flex; flex-direction: column; gap: 8px; }
.finder-opt {
  font-family: var(--font-body); text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
  transition: border-color .16s, background .16s, transform .1s;
}
.finder-opt:hover { border-color: var(--accent); background: var(--surface-2); }
.finder-opt:active { transform: scale(.992); }
/* Grey glass keyboard-shortcut chip. */
.finder-opt .idx {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink-strong) 8%, transparent);
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.finder-opt strong { font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ink-strong); }

.finder-skip {
  align-self: flex-start; margin-top: 14px;
  font-family: var(--font-body); font-size: 13.5px;
  background: none; border: 0; color: var(--ink-dim);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 0;
}
.finder-skip:hover { color: var(--ink-strong); }

/* ---- Thinking -------------------------------------------------------------*/
.finder-think { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 320px; }
.finder-think p { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--ink-dim); margin: 0; }
.finder-pulse { width: 46px; height: 46px; color: var(--accent); animation: finderPulse 1.05s ease-in-out infinite; }
.finder-pulse svg { width: 100%; height: 100%; display: block; }

/* ---- Result (editorial, card-less — an accent rule, not a boxed card) ------*/
.finder-res {
  --rp: var(--accent);
  position: relative; display: flex; flex-direction: column;
  padding: 2px 0 0 22px;
  border-left: 2px solid color-mix(in srgb, var(--rp) 60%, transparent);
  animation: finderIn .32s ease-out;
}
.finder-res .tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rp); margin-bottom: 8px;
}
.finder-res h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 6vw, 40px); line-height: 1.02; letter-spacing: -.02em;
  color: var(--rp); margin: 0 0 8px;
}
.finder-res .because { font-family: var(--font-body); font-size: 15.5px; line-height: 1.45; color: var(--ink-dim); margin: 0 0 6px; }

.finder-block { border-top: 1px solid color-mix(in srgb, var(--rp) 22%, var(--line-strong)); padding: 13px 0; }
.finder-block .k { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.finder-block .say { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.32; color: var(--ink-strong); }
.finder-block .detail { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); margin: 0; }
.finder-block .detail + .k { margin-top: 10px; }
.finder-second { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.finder-second b { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--ink-strong); }
.finder-second span { font-size: 13px; color: var(--ink-dim); }

.finder-btns { display: flex; gap: 10px; margin-top: 16px; }
.finder-btn {
  flex: 1; font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  padding: 14px 14px; border-radius: 11px; cursor: pointer; text-align: center;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; color: var(--ink-strong);
  transition: transform .15s, color .2s, border-color .2s;
}
/* Rainbow-bordered primary — the signature network CTA. */
.finder-btn.primary {
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    var(--rainbow) border-box;
  background-size: auto, 220% 100%;
  border: 1.5px solid transparent;
  animation: aFieldSweep 8s linear infinite;
}
.finder-btn.primary:hover { transform: translateY(-1px); }
.finder-btn.ghost { color: var(--ink-dim); border-color: var(--line-strong); background: transparent; }
.finder-btn.ghost:hover { color: var(--ink-strong); border-color: var(--ink-dim); }
.finder-btn[disabled] { opacity: .55; pointer-events: none; }

.finder-foot { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-faint); text-align: center; margin: 2px 0 0; min-height: 16px; flex: none; }

@keyframes finderIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes finderPulse { 0%, 100% { transform: scale(.72); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .finder { min-height: calc(100vh - 56px); padding: 16px; }
  .finder-app { gap: 14px; max-height: calc(100vh - 84px); }
  .finder-btns { flex-direction: column; }
}