/* tru3self — the one-click acquisition surfaces.
 *
 * Peter, 2026-08-21: "I don't like how it recommends to download and upload
 * stuff. What are the things that could be one click?" These are them: the
 * whole window as a drop target, a box you can paste anything into, and a
 * one-time Downloads grant that turns every later visit into zero clicks.
 *
 * Brand tokens, spelled out rather than borrowed, because this sheet has to
 * hold up on its own if app.css is ever reworked: Ice Blue #5ED5FF on Midnight
 * #020814, with Deep Ocean #071B33 for the raised surfaces. No teal — the
 * gradient elsewhere in the app drifts green and this is the one screen where
 * "we are reading your bank statement" should feel cold and exact.
 */
:root {
  --oc-ice: #5ED5FF;
  --oc-midnight: #020814;
  --oc-ocean: #071B33;
  --oc-ink: #eaf4fb;
  --oc-mut: #9db2c8;
}

/* ---------- the drop veil ----------
   Full viewport, above everything, and pointer-events:none so it can never
   swallow the drop it is advertising. The drop itself is handled on window. */
.oc-veil {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 20, .86);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  padding: 24px;
}
.oc-veil.is-on { opacity: 1; visibility: visible; }
.oc-veil-card {
  border: 2px dashed var(--oc-ice); border-radius: 24px;
  /* Opaque, not tinted. A translucent card let the page show through the
     headline, and the one moment this has to be unambiguous is the moment
     somebody is holding a file over the window wondering whether to let go. */
  background: linear-gradient(180deg, #0a2340, var(--oc-ocean) 55%, var(--oc-midnight));
  box-shadow: 0 0 80px rgba(94, 213, 255, .22), inset 0 0 60px rgba(94, 213, 255, .06);
  padding: clamp(28px, 7vw, 56px) clamp(24px, 8vw, 72px);
  text-align: center; max-width: 560px;
  transform: scale(.985); transition: transform .12s ease;
}
.oc-veil.is-on .oc-veil-card { transform: scale(1); }
.oc-veil-h {
  margin: 0 0 10px; color: var(--oc-ice);
  font-size: clamp(22px, 5vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.oc-veil-s { margin: 0; color: var(--oc-mut); font-size: clamp(13px, 3.4vw, 15.5px); line-height: 1.5; }
.oc-veil-ic {
  display: block; font-size: clamp(30px, 8vw, 46px); line-height: 1; margin-bottom: 14px;
  color: var(--oc-ice); filter: drop-shadow(0 0 18px rgba(94, 213, 255, .6));
}

/* ---------- the paste box ---------- */
.oc-paste {
  margin: 18px 0 6px; border: 1px solid rgba(94, 213, 255, .26); border-radius: 16px;
  background: linear-gradient(180deg, var(--oc-ocean), rgba(2, 8, 20, .72));
  padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease;
}
.oc-paste:focus-within { border-color: var(--oc-ice); box-shadow: 0 0 0 3px rgba(94, 213, 255, .14); }
.oc-paste-lab {
  display: block; color: var(--oc-ice); font-size: 12px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 8px;
}
/* A real textarea, not a styled div. iOS only fires `paste` at a focusable,
   editable element, and a contenteditable div loses the caret behind the
   keyboard on half the phones we care about. */
.oc-paste-in {
  display: block; width: 100%; min-height: 46px; resize: vertical;
  background: transparent; border: 0; outline: 0; color: var(--oc-ink);
  font: inherit; font-size: 15px; line-height: 1.5; padding: 0;
}
.oc-paste-in::placeholder { color: var(--oc-mut); opacity: .85; }
.oc-paste-hint { margin: 8px 0 0; color: var(--oc-mut); font-size: 12.5px; line-height: 1.5; }
.oc-paste-said { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--oc-ice); }
.oc-paste-said.is-warn { color: #f5b74e; }

/* ---------- the Downloads grant ---------- */
.oc-grant { margin: 12px 0 0; }
.oc-grant-btn {
  display: flex; width: 100%; gap: 12px; align-items: center; text-align: left;
  background: linear-gradient(180deg, var(--oc-ocean), rgba(2, 8, 20, .72));
  border: 1px solid rgba(94, 213, 255, .3); border-radius: 16px; padding: 14px 16px;
  color: var(--oc-ink); transition: .15s;
}
.oc-grant-btn:hover { border-color: var(--oc-ice); box-shadow: 0 8px 30px rgba(94, 213, 255, .14); }
.oc-grant-ic { flex: none; width: 22px; text-align: center; font-size: 17px; color: var(--oc-ice); }
.oc-grant-t b { display: block; font-size: 15.5px; font-weight: 700; }
.oc-grant-t small { display: block; color: var(--oc-mut); font-size: 12.5px; margin-top: 2px; }
.oc-grant-r { margin-left: auto; flex: none; color: var(--oc-ice); font-weight: 800; font-size: 13px; }
.oc-grant-said { margin: 10px 0 0; color: var(--oc-mut); font-size: 13px; line-height: 1.5; }

/* The zero-click return: found without being asked, offered without a hunt. */
.oc-found {
  margin: 12px 0 0; border: 1px solid var(--oc-ice); border-radius: 16px;
  background: linear-gradient(180deg, rgba(94, 213, 255, .1), rgba(7, 27, 51, .55));
  padding: 14px 16px;
}
.oc-found-h { margin: 0 0 4px; color: var(--oc-ice); font-size: 15.5px; font-weight: 800; }
.oc-found-s { margin: 0 0 10px; color: var(--oc-mut); font-size: 12.8px; line-height: 1.5; }
.oc-found-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.oc-found-yes {
  background: var(--oc-ice); color: var(--oc-midnight); font-weight: 800;
  padding: 10px 18px; border-radius: 12px;
}
.oc-found-no {
  background: transparent; color: var(--oc-mut); border: 1px solid rgba(94, 213, 255, .28);
  padding: 10px 16px; border-radius: 12px;
}

/* ---------- picker-first ----------
   The statement guide opens the OS picker first and keeps itself out of the
   way. This is what "out of the way" looks like: one link, not a wall. */
/* Hidden by a :not() rather than by hiding and then un-hiding. `display:revert`
   would have dropped firstrun.css's own layout for these elements along with
   ours, so the unfolded guide would have come back subtly wrong — the failure
   mode nobody looks for, because the element IS visible. This way, once
   .is-open lands there is no rule of ours applying to them at all. */
.oc-later:not(.is-open) .fr-guide-steps,
.oc-later:not(.is-open) .fr-guide-path,
.oc-later:not(.is-open) .fr-guide-gotcha,
.oc-later:not(.is-open) .fr-guide-why { display: none; }
.oc-where {
  background: none; border: 0; padding: 0; color: var(--oc-ice);
  font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer;
}