/* ============================================================
   File Ferret animated hero demo — every selector is scoped under
   .ff-stage so its (0,2,0)+ specificity beats site.css's unscoped
   (0,1,0) rules for .app-window / .result-row / etc. Where site.css
   sets a property this file does NOT (background, border-radius,
   gap on .result-row), it is explicitly neutralised below.
   Keyframes are renamed (ffBtnPulse/ffMarkPop/ffLedPulse/ffClickRing)
   to avoid site.css's @keyframes gleam.
   ============================================================ */

.ff-stage {
  --app-bg:#2b2b2d;
  --app-chrome:#1d1d1f;
  --app-input:#1f1f21;
  --app-input-stroke:#3a3a3c;
  --app-line:rgba(255,255,255,0.07);
  --app-text:#ECECEC;
  --app-text-dim:#8b8b90;
  --app-text-dimmer:#6a6a6f;
  --app-blue:#0a84ff;
  --gold:#F2B600;
  --ff-scale: 1;

  width: 100%;
  position: relative;
}
.ff-stage * { box-sizing: border-box; }

.ff-stage__frame {
  position: relative;
  width: 100%;
}

/* Base / no-JS / pre-JS fallback: fluid app, never overflows. */
.ff-stage .app-window {
  width: 100%;
  aspect-ratio: 920 / 660;
  background: var(--app-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 40px 100px -20px rgba(0,0,0,0.75),
    0 20px 60px -20px rgba(242,182,0,0.18);
  font: 13px/1.35 -apple-system,'SF Pro Text','Helvetica Neue',sans-serif;
  color: var(--app-text);
  display: flex;
  flex-direction: column;
}

/* JS-enhanced desktop: render the app at its true 920x660 design size
   and scale it down with a real numeric ratio set by ResizeObserver. */
@media (min-width: 769px) {
  .ff-stage.ff-scaled .ff-stage__frame { aspect-ratio: 920 / 660; }
  .ff-stage.ff-scaled .app-window {
    position: absolute;
    top: 0; left: 0;
    width: 920px;
    height: 660px;
    aspect-ratio: auto;
    transform-origin: top left;
    transform: scale(var(--ff-scale));
  }
}

/* titlebar */
.ff-stage .titlebar {
  height: 38px;
  background: var(--app-chrome);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex; align-items: center; padding: 0 14px;
  position: relative;
}
.ff-stage .traffic { display: flex; gap: 8px; }
.ff-stage .traffic span { width: 12px; height: 12px; border-radius: 50%; background: #444; }
.ff-stage .traffic span:nth-child(1){ background:#ff5f57; }
.ff-stage .traffic span:nth-child(2){ background:#febc2e; }
.ff-stage .traffic span:nth-child(3){ background:#28c840; }
.ff-stage .titlebar .title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 13px; color: var(--app-text); font-weight: 500;
}

/* form */
.ff-stage .form {
  padding: 14px 16px 10px;
  display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--app-line);
}
.ff-stage .row { display: flex; align-items: center; gap: 10px; }
.ff-stage .row label.lbl {
  color: var(--app-text); font-size: 13px; font-weight: 400;
  min-width: 84px; text-align: right;
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.ff-stage .row label.lbl svg { flex-shrink: 0; }
.ff-stage .input-wrap {
  position: relative; flex: 1;
  background: var(--app-input);
  border: 1px solid var(--app-input-stroke);
  border-radius: 6px; height: 26px;
  display: flex; align-items: center; padding: 0 28px 0 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ff-stage .input-wrap.focused {
  border-color: var(--app-blue);
  box-shadow: 0 0 0 3px rgba(10,132,255,0.25);
}
.ff-stage .input-wrap input {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--app-text); font-size: 13px; font-family: inherit;
}
.ff-stage .input-wrap input::placeholder { color: var(--app-text-dimmer); }
.ff-stage .input-wrap .clock {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: 0.6;
}
.ff-stage .select {
  height: 26px;
  background: linear-gradient(180deg,#3a3a3c,#2c2c2e);
  border: 1px solid #4a4a4c; border-radius: 6px;
  padding: 0 22px 0 10px;
  color: var(--app-text); font-size: 13px;
  position: relative; display: inline-flex; align-items: center;
  min-width: 92px; transition: background .15s ease;
}
.ff-stage .select::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path fill='%23bbb' d='M1.5 4 5 0.5 8.5 4zM1.5 6 5 9.5 8.5 6z'/></svg>");
  transform: translateY(-50%);
}
.ff-stage .search-btn {
  height: 26px; padding: 0 14px;
  background: linear-gradient(180deg,#3a96ff,#0a78f0);
  border: 1px solid #0a6fd6; border-radius: 6px;
  color: white; font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: default; display: inline-flex; align-items: center; gap: 6px;
  transition: transform .08s ease, filter .15s ease;
}
.ff-stage .search-btn.pulse { filter: brightness(0.9); animation: ffBtnPulse 0.36s ease; }
@keyframes ffBtnPulse { 0%{transform:scale(1)} 40%{transform:scale(0.95)} 100%{transform:scale(1)} }
.ff-stage .icon-btn {
  width: 26px; height: 26px;
  background: linear-gradient(180deg,#3a3a3c,#2c2c2e);
  border: 1px solid #4a4a4c; border-radius: 6px;
  display: inline-grid; place-items: center; color: var(--app-text-dim);
}
.ff-stage .checks { display: flex; flex-wrap: wrap; gap: 14px 18px; padding-left: 94px; }
.ff-stage .check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--app-text); user-select: none;
}
.ff-stage .check .box {
  width: 14px; height: 14px; border-radius: 3px;
  background: #1f1f21; border: 1px solid #4a4a4c;
  display: inline-grid; place-items: center;
}
.ff-stage .check.on .box { background: var(--app-blue); border-color: var(--app-blue); }
.ff-stage .check.on .box::after {
  content: ""; width: 8px; height: 5px;
  border-left: 1.5px solid white; border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translate(0,-1px);
}

/* tabs */
.ff-stage .tabs-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--app-line); background: #252527;
}
.ff-stage .tabs { display: flex; background: #1d1d1f; border-radius: 7px; padding: 2px; border: 1px solid #3a3a3c; }
.ff-stage .tab {
  padding: 4px 14px; font-size: 12.5px; color: var(--app-text);
  border: 0; background: transparent; border-radius: 5px;
  font-family: inherit; white-space: nowrap;
}
.ff-stage .tab.active { background: var(--app-blue); color: white; }
.ff-stage .tabs-right { display: flex; align-items: center; gap: 10px; color: var(--app-text-dim); font-size: 12.5px; }
.ff-stage .mini-select {
  background: #1d1d1f; border: 1px solid #3a3a3c; border-radius: 5px;
  padding: 2px 18px 2px 6px; color: var(--app-text);
  position: relative; font-size: 12px;
}
.ff-stage .mini-select::after { content: "⌄"; position: absolute; right: 6px; top: 0; color: var(--app-text-dim); }

/* main split */
.ff-stage .main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.05fr; }
.ff-stage .pane { min-height: 0; overflow: hidden; position: relative; }
.ff-stage .pane.left { border-right: 1px solid var(--app-line); }
.ff-stage .refine {
  padding: 6px 12px; border-bottom: 1px solid var(--app-line);
  color: var(--app-text-dim); font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.ff-stage .refine svg { opacity: 0.6; }

/* empty state */
.ff-stage .empty {
  padding: 24px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; transition: opacity .35s ease;
}
.ff-stage .empty.hide { opacity: 0; pointer-events: none; }
.ff-stage .empty .logo {
  width: 78px; height: 78px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23F2C642'/><stop offset='1' stop-color='%23D89B1F'/></linearGradient></defs><path fill='url(%23g)' d='M8 36c0-4 3-7 7-7h22l8 8h32c4 0 7 3 7 7v36c0 4-3 7-7 7H15c-4 0-7-3-7-7z'/><path fill='%23B07810' opacity='.6' d='M8 39h78v6H8z'/><ellipse cx='56' cy='40' rx='8' ry='10' fill='%232b2519'/><circle cx='53' cy='37' r='1.5' fill='%23F2C642'/><circle cx='59' cy='37' r='1.5' fill='%23F2C642'/><ellipse cx='56' cy='44' rx='1.5' ry='1' fill='%23F2C642'/></svg>");
}
.ff-stage .empty h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--app-text); }
.ff-stage .empty p { margin: 0; color: var(--app-text-dim); font-size: 13px; }
.ff-stage .recent-section { width: 100%; max-width: 340px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ff-stage .recent-label { font-size: 10.5px; color: var(--app-text-dimmer); letter-spacing: 0.1em; font-weight: 600; margin: 8px 0 4px; }
.ff-stage .recent-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.03); color: var(--app-text); font-size: 12.5px;
}
.ff-stage .recent-item .arr { margin-left: auto; color: var(--app-blue); opacity: 0.8; }
.ff-stage .recent-item .ico-folder {
  width: 14px; height: 11px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'><path fill='%234c8df3' d='M1 2a1 1 0 0 1 1-1h3l1.5 1.5H12a1 1 0 0 1 1 1V9a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z'/></svg>");
}
.ff-stage .recent-item small { color: var(--app-text-dim); font-size: 11px; display: block; margin-top: 1px; }

/* results */
.ff-stage .results {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity .25s ease;
  display: flex; flex-direction: column;
}
.ff-stage .results.show { opacity: 1; }
.ff-stage .results-head {
  display: grid; grid-template-columns: 1fr 80px 80px;
  padding: 6px 14px; font-size: 11px; color: var(--app-text-dimmer);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--app-line); background: #262628;
}
.ff-stage .results-body { flex: 1; overflow: hidden; }
.ff-stage .result-row {
  display: grid; grid-template-columns: 1fr 80px 80px; align-items: center;
  padding: 7px 14px; font-size: 12.5px; color: var(--app-text);
  border-bottom: 1px solid var(--app-line);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, background .15s ease;
  /* Guard against site.css's unscoped .result-row (old mock component):
     it sets background, border-radius:10px and gap:0.75rem which this
     scoped rule must explicitly neutralise or they bleed in. */
  background: transparent;
  border-radius: 0;
  gap: 0;
}
.ff-stage .result-row:nth-child(odd) { background: transparent; }
.ff-stage .result-row.in { opacity: 1; transform: translateY(0); }
.ff-stage .result-row.selected { background: rgba(10,132,255,0.18); }
.ff-stage .result-row .name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ff-stage .result-row .name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ff-stage .result-row .name .ficon { width: 18px; height: 22px; border-radius: 2px; flex-shrink: 0; background: no-repeat center/contain; }
.ff-stage .ficon.pdf{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%23E94B3C' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%23B83A2D' d='M12 1v4h4z'/><text x='3' y='17' fill='white' font-family='sans-serif' font-size='6' font-weight='700'>PDF</text></svg>")}
.ff-stage .ficon.xlsx{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%2321A463' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%23158547' d='M12 1v4h4z'/><text x='4' y='17' fill='white' font-family='sans-serif' font-size='6' font-weight='700'>XLS</text></svg>")}
.ff-stage .ficon.docx{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%232B7CD3' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%231f5fa3' d='M12 1v4h4z'/><text x='3' y='17' fill='white' font-family='sans-serif' font-size='6' font-weight='700'>DOC</text></svg>")}
.ff-stage .ficon.zip{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%23999' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%23666' d='M12 1v4h4z'/><rect x='7' y='6' width='3' height='10' fill='%23ffffff66'/></svg>")}
.ff-stage .ficon.jpg{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%23B47BD0' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%238758a5' d='M12 1v4h4z'/><circle cx='7' cy='12' r='1.5' fill='white'/><path d='m4 17 3-4 3 3 2-2 3 3' stroke='white' stroke-width='1' fill='none'/></svg>")}
.ff-stage .ficon.key{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'><path fill='%23FF8A00' d='M2 1h10l4 4v15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%23c66600' d='M12 1v4h4z'/><text x='3' y='17' fill='white' font-family='sans-serif' font-size='6' font-weight='700'>KEY</text></svg>")}
.ff-stage .result-row .matches { color: var(--app-text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.ff-stage .result-row .matches em { font-style: normal; color: var(--gold); }
.ff-stage .result-row .date { color: var(--app-text-dim); font-size: 12px; }

/* preview */
.ff-stage .preview-head {
  padding: 6px 12px; border-bottom: 1px solid var(--app-line);
  color: var(--app-text-dim); font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.ff-stage .preview-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: var(--app-text-dimmer); transition: opacity .25s ease;
}
.ff-stage .preview-empty.hide { opacity: 0; }
.ff-stage .preview-empty .ico {
  width: 46px; height: 46px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%236a6a6f' stroke-width='2'><rect x='8' y='4' width='26' height='34' rx='2'/><circle cx='30' cy='32' r='6'/><path d='m34 36 4 4'/></svg>");
}
.ff-stage .preview-content {
  position: absolute; inset: 30px 0 0 0; padding: 14px 16px;
  overflow: hidden; opacity: 0; transition: opacity .35s ease;
}
.ff-stage .preview-content.show { opacity: 1; }
.ff-stage .doc {
  background: #1a1a1c; border: 1px solid var(--app-line); border-radius: 6px;
  padding: 14px 16px; font: 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #cfd0d2; height: 100%; overflow: hidden;
}
.ff-stage .doc h4 {
  margin: 0 0 8px; font: 600 13px/1.2 -apple-system,'SF Pro Text',sans-serif;
  color: var(--app-text); display: flex; align-items: center; gap: 8px;
}
.ff-stage .doc h4 .pill {
  font: 500 10px/1 -apple-system,sans-serif; color: var(--gold);
  background: rgba(242,182,0,0.12); border: 1px solid rgba(242,182,0,0.25);
  padding: 3px 6px; border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase;
}
.ff-stage .doc .line { padding: 3px 0; color: #a0a3a8; }
.ff-stage .doc .line .ln { display: inline-block; width: 24px; color: #54565a; user-select: none; text-align: right; margin-right: 12px; }
.ff-stage .doc mark {
  background: var(--gold); color: #1a1306; padding: 0 3px; border-radius: 2px;
  font-weight: 600; animation: ffMarkPop 1.2s ease-out;
}
@keyframes ffMarkPop {
  0%{box-shadow:0 0 0 0 rgba(242,182,0,0.8)}
  60%{box-shadow:0 0 0 6px rgba(242,182,0,0)}
  100%{box-shadow:0 0 0 0 rgba(242,182,0,0)}
}

/* statusbar */
.ff-stage .statusbar {
  height: 26px; border-top: 1px solid var(--app-line);
  padding: 0 14px; display: flex; align-items: center; gap: 10px;
  background: #252527; color: var(--app-text-dim); font-size: 12px;
}
.ff-stage .statusbar .led { width: 8px; height: 8px; border-radius: 50%; background: #444; }
.ff-stage .statusbar.searching .led { background: var(--gold); animation: ffLedPulse 1.1s ease-in-out infinite; }
.ff-stage .statusbar.done .led { background: #28c840; }
@keyframes ffLedPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(242,182,0,0.5)}
  50%{box-shadow:0 0 0 6px rgba(242,182,0,0)}
}
.ff-stage .statusbar .right { margin-left: auto; color: var(--app-text-dimmer); font-size: 11.5px; }

/* fake cursor */
.ff-stage .cursor {
  position: absolute; width: 18px; height: 24px;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24'><path fill='white' stroke='black' stroke-width='1' stroke-linejoin='round' d='M2 1v18l5-4 3 7 3-1-3-7h6z'/></svg>");
  z-index: 5; pointer-events: none;
  transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); opacity: 0;
}
.ff-stage .cursor.show { opacity: 1; }
.ff-stage .cursor.click::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%;
  background: rgba(242,182,0,0.5); animation: ffClickRing .5s ease-out;
}
@keyframes ffClickRing {
  0%{box-shadow:0 0 0 0 rgba(242,182,0,0.7); opacity:1}
  100%{box-shadow:0 0 0 20px rgba(242,182,0,0); opacity:0}
}

/* ---- Phone: a dense 920px desktop UI scaled to ~360px is illegible
   (~6px text). Instead, drop the scale transform entirely and render a
   crisp, native-size, single-pane app at full container width. ---- */
@media (max-width: 768px) {
  .ff-stage__frame { aspect-ratio: auto; }
  .ff-stage .app-window {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    font-size: 13px;
  }
  .ff-stage .main {
    grid-template-columns: 1fr;
    min-height: 300px;
  }
  .ff-stage .pane.left { border-right: 0; }
  .ff-stage .pane.right { display: none; }
  .ff-stage .cursor { display: none; }
  .ff-stage .checks { padding-left: 14px; }
  /* let the results list own real height instead of absolute-fill */
  .ff-stage .results { position: relative; }
  .ff-stage .empty { position: relative; }

  /* The File Name + Look In rows are dense decoration and overflow a
     ~343px phone. The narrative is File Contents -> results, so focus
     the phone demo on that. Remaining rows wrap as a safety net. */
  .ff-stage .form .row:nth-child(1),
  .ff-stage .form .row:nth-child(3) { display: none; }
  .ff-stage .form .row { flex-wrap: wrap; row-gap: 8px; }
  .ff-stage .row label.lbl {
    min-width: 0; text-align: left; justify-content: flex-start;
  }
  .ff-stage .input-wrap { flex: 1 1 100%; }
  .ff-stage .select { flex: 0 0 auto; }
  .ff-stage .tabs-right .mini-select,
  .ff-stage .tabs-right span { display: none; }
  .ff-stage .tabs-right { gap: 0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ff-stage .cursor { display: none; }
  .ff-stage .result-row { transition: none; opacity: 1; transform: none; }
  .ff-stage .empty,
  .ff-stage .results,
  .ff-stage .preview-content,
  .ff-stage .preview-empty { transition: none; }
  /* Don't rely on site.css's blanket transition override to reveal the
     static state — set the shown opacity explicitly. */
  .ff-stage .results,
  .ff-stage .preview-content { opacity: 1; }
  .ff-stage .statusbar .led { animation: none !important; }
  .ff-stage .doc mark { animation: none; }
  .ff-stage .search-btn.pulse { animation: none; }
}