/* ============================================================
   Pipezoom - wins.css
   The section filter row, the shell-colored band at the top of the
   Dashboard and the feedback modal js/splash.js opens.
   Globals: none.
   Notes: docs/notes/app.pipezoom.com/css/wins.css.md
   ============================================================ */

/* The section filter row
   2px of air in the page and none in the sticky slot under the top bar. */
.secfilter{margin-top:2px;}
#crumbs.secfilter{margin-top:0;}

/* The band at the top of the Dashboard
   It wears the shell's color from the bar above, and the negative margins reach the page padding's edges. */
.calls-top{
  background:var(--shell-bg);
  border-bottom:1px solid var(--shell-line);
  margin:calc(-1 * var(--page-pad-t)) calc(-1 * var(--page-pad-x)) 0;
  padding:14px var(--page-pad-x) 18px;
}

/* The feedback modal: a target beaten, a clean day, a win or a run gets the screen */
.ach-scrim{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:var(--scrim);
  opacity:0;
  transition:opacity .2s ease;
}
.ach-scrim.ach-open{opacity:1;}
.ach-scrim[hidden]{display:none;}
.ach-panel{
  position:relative;
  width:100%;max-width:460px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
  padding:30px 26px 22px;
  text-align:center;
  transform:translateY(10px) scale(.98);
  transition:transform .22s ease;
}
.ach-open .ach-panel{transform:none;}
.ach-x{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--ink-faint);
}
.ach-x:hover{background:var(--surface-high);color:var(--ink);}
.ach-burst{
  width:74px;height:74px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--good);
  color:var(--ink-inverse);
  font-size:2rem;
}
.ach-title{font-size:1.24rem;font-weight:700;letter-spacing:-.3px;line-height:1.25;}
.ach-said{margin-top:6px;font-size:.92rem;color:var(--ink-soft);}
.ach-also{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:14px;
}
.ach-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--good-wash);
  border:1px solid var(--good-edge);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  font-size:.78rem;font-weight:600;
  color:var(--ink);
}
.ach-chip i{font-size:.72rem;color:var(--good-ink);}

@media (prefers-reduced-motion:reduce){
  .ach-scrim,.ach-panel{transition:none;}
}