/* =============================================================================
   hyyryn-setup-done.css                                       21 Oct 2026 (rp176)
   The moment a trade is set up (assets/hyyryn-setup-done.js), the card when a
   needed step lapses, and the Profile tab that holds the three left.
   Sir, 21 Oct 2026: "animate a completion popup for that section, then hide it
   away. the 3 remaining ... should then transition into a tab".
   The popup is the night plate the site already uses for a moment that
   matters (the log-in card's navy plate, rp173): navy, a gold seal that draws,
   Caslon for the words, one gold button. Specificity: the card is held still
   by a rule that names its tab twice, as the round sheet does (Mason 05).
   ============================================================================= */

/* ── the card holds still while it plays (a lifted card would carry the fliers with it) ── */
html body #tab-earnings#tab-earnings .ov-start.sd-run.sd-run { translate: none; transition: none; }
html body .ov-start.sd-run .ov-start-hide { visibility: hidden; }

/* 1. the four ticks, in turn */
html body .ov-steps--grouped .ov-task.sd-tick { animation: sdRow 900ms cubic-bezier(.2,.7,.2,1) both; }
html body .ov-steps--grouped .ov-task.sd-tick .ov-step-m { animation: sdTick 620ms cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sdTick {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(15,90,79,0); }
  45%  { transform: scale(1.32); box-shadow: 0 0 0 6px rgba(15,90,79,.16); }
  100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(15,90,79,0); }
}
@keyframes sdRow {
  0%   { box-shadow: inset 0 0 0 1px rgba(15,90,79,0); }
  35%  { box-shadow: inset 0 0 0 1.5px rgba(15,90,79,.55); background-color: rgba(15,90,79,.045); }
  100% { box-shadow: inset 0 0 0 1px rgba(15,90,79,0); }
}

/* 2. the card steps back while the seal speaks */
html body .ov-start.sd-dim > :not(.sd-pop):not(.sd-fly) { opacity: .22; filter: blur(1.2px); transition: opacity 360ms ease, filter 360ms ease; }
html body .ov-start.sd-run > :not(.sd-pop):not(.sd-fly) { transition: opacity 360ms ease, filter 360ms ease; }

html body .ov-start .sd-pop {
  position: absolute; left: 50%; z-index: 5; width: min(440px, calc(100% - 28px)); box-sizing: border-box;
  margin: 0; padding: 30px 30px 26px; border-radius: 22px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1B3156 0%, #0E1E38 52%, #0A1628 100%);
  box-shadow: inset 0 0 0 1px rgba(226,190,106,.22), inset 0 1px 0 rgba(255,255,255,.08),
              0 2px 4px rgba(10,22,40,.18), 0 26px 60px -22px rgba(10,22,40,.6);
  color: #FAF8F3; opacity: 0; transform: translate(-50%, 14px) scale(.96);
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1);
}
html body .ov-start .sd-pop.is-in { opacity: 1; transform: translate(-50%, 0) scale(1); }
html body .ov-start .sd-pop.is-out { opacity: 0; transform: translate(-50%, -10px) scale(.97); transition-duration: 220ms, 260ms; }
html body .ov-start .sd-seal { width: 88px; height: 88px; margin: 0 auto 14px; }
html body .ov-start .sd-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
html body .ov-start .sd-seal circle,
html body .ov-start .sd-seal path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html body .ov-start .sd-seal .sd-r1 { stroke: #E2BE6A; stroke-width: 2.2; }
html body .ov-start .sd-seal .sd-r2 { stroke: rgba(226,190,106,.45); stroke-width: 1.2; stroke-dasharray: .012 .02; stroke-dashoffset: 0; opacity: 0; }
html body .ov-start .sd-seal .sd-ck { stroke: #FAF8F3; stroke-width: 4.2; }
html body .ov-start .sd-pop.is-in .sd-r1 { animation: sdDraw 760ms cubic-bezier(.65,0,.35,1) 140ms forwards; }
html body .ov-start .sd-pop.is-in .sd-r2 { animation: sdFade 500ms ease 620ms forwards, sdTurn 9s linear 620ms infinite; transform-origin: 48px 48px; }
html body .ov-start .sd-pop.is-in .sd-ck { animation: sdDraw 420ms cubic-bezier(.3,0,.2,1) 760ms forwards; }
@keyframes sdDraw { to { stroke-dashoffset: 0; } }
@keyframes sdFade { to { opacity: 1; } }
@keyframes sdTurn { to { transform: rotate(360deg); } }
html body .ov-start .sd-k { margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #E2BE6A; }
html body .ov-start .sd-t { margin: 0; font-family: var(--display, var(--serif)); font-weight: 400; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; letter-spacing: .005em; color: #FAF8F3; }
html body .ov-start .sd-s { margin: 10px auto 0; max-width: 34ch; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: rgba(250,248,243,.86); }
html body .ov-start .sd-n { margin: 8px auto 0; max-width: 40ch; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: rgba(250,248,243,.6); }
html body .ov-start .sd-acts { margin: 20px 0 0; }
html body .ov-start .sd-go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #E8C877, #D4A943); color: #0A1628; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 22px -12px rgba(212,169,67,.8);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), box-shadow 200ms ease;
}
html body .ov-start .sd-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .ov-start .sd-go:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 26px -12px rgba(212,169,67,.9); }
html body .ov-start .sd-go:focus-visible { outline: 2px solid #FAF8F3; outline-offset: 3px; }
/* how long it stays, as a gold line that runs down (it stops while the pointer or the focus is on the plate) */
html body .ov-start .sd-clock { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #E2BE6A; opacity: .7;
  transform-origin: left center; animation: sdClock 3400ms linear forwards; }
@keyframes sdClock { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* 3. the three that fly to Profile (drawn inside the card's own list, placed fixed) */
html body .ov-steps.sd-fly.sd-fly { position: fixed; z-index: 9000; display: block; margin: 0; padding: 0; gap: 0; list-style: none;
  pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
html body .ov-steps.sd-fly .ov-col-g,
html body .ov-steps.sd-fly .ov-group,
html body .ov-steps.sd-fly .ov-group-list { display: block; margin: 0; padding: 0; gap: 0; }
html body .ov-steps.sd-fly .ov-task { box-shadow: 0 18px 40px -18px rgba(10,22,40,.45); }

/* where they land: the tab, or the button that opens the panel */
.sd-land { animation: sdLand 1100ms cubic-bezier(.2,.8,.2,1); }
@keyframes sdLand {
  0%   { box-shadow: 0 0 0 0 rgba(212,169,67,.0); }
  20%  { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(212,169,67,.55); }
  60%  { transform: scale(1); box-shadow: 0 0 0 12px rgba(212,169,67,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,169,67,0); }
}
/* the jobs near him, once they have risen */
html body #tab-earnings .rcard--map.sd-hi { animation: sdHi 2100ms ease; }
@keyframes sdHi {
  0%, 100% { outline: 2px solid rgba(212,169,67,0); outline-offset: 6px; }
  25%      { outline: 2px solid rgba(212,169,67,.75); outline-offset: 3px; }
}

/* Profile's count: down with a pop, a tick when nothing is left, then gone */
.rail-nav .dash-tab-btn .tab-count.is-bump { animation: sdBump 520ms cubic-bezier(.3,1.6,.5,1); }
@keyframes sdBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.rail-nav .dash-tab-btn .tab-count.is-tick { color: #0F5A4F; font-size: 12px; animation: sdBump 520ms cubic-bezier(.3,1.6,.5,1); }
.rail-nav .dash-tab-btn .tab-count.is-going { opacity: 0; transform: scale(.6); transition: opacity 400ms ease, transform 400ms ease; }

/* ── a needed step that has lapsed: the card comes back with it alone, in red ── */
html body #tab-earnings#tab-earnings .ov-start.ov-start--lapse { box-shadow: inset 0 0 0 1px rgba(169,68,66,.4), inset 0 1px 0 #FFFFFF, var(--dr-drop); }
html body .ov-start.ov-start--lapse .ov-meter { display: none; }
html body .ov-start.ov-start--lapse #ovStartS { color: var(--danger, #A94442); }
html body .ov-start.ov-start--lapse .ov-steps.ov-steps--grouped { grid-template-columns: minmax(0, 1fr); }

/* ── Profile ── */
html body #tab-profile .pf-card .ov-steps--grouped { margin-top: 0; }
html body #tab-profile .pf-unlock { margin: 4px 0 4px 34px; padding: 10px 12px 10px 38px; border-radius: 12px; position: relative;
  background: rgba(212,169,67,.12); box-shadow: inset 0 0 0 1px rgba(212,169,67,.36);
  font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--navy, #0A1628); }
html body #tab-profile .pf-unlock::before { content: ''; position: absolute; left: 12px; top: 11px; width: 16px; height: 16px;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2383632C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.6-1.7'/%3E%3C/svg%3E"); }
html body #tab-profile .pf-unlock b { display: block; margin-bottom: 1px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #83632C; }
html body #tab-profile .pf-foot { margin: 18px 0 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--muted, #6B7280); }
html body #tab-profile .pf-foot a { color: var(--navy, #0A1628); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) {
  html body #tab-profile .pf-unlock { margin-left: 0; }
  html body .ov-start .sd-pop { padding: 26px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .ov-steps--grouped .ov-task.sd-tick,
  html body .ov-steps--grouped .ov-task.sd-tick .ov-step-m,
  .sd-land, html body #tab-earnings .rcard--map.sd-hi,
  .rail-nav .dash-tab-btn .tab-count.is-bump, .rail-nav .dash-tab-btn .tab-count.is-tick { animation: none; }
  html body .ov-start .sd-pop, html body .ov-start .sd-pop.is-in, html body .ov-start .sd-pop.is-out { transform: translate(-50%, 0); transition: opacity 200ms linear; }
  html body .ov-start .sd-pop .sd-seal :is(circle, path), html body .ov-start .sd-pop.is-in .sd-seal :is(.sd-r1, .sd-r2, .sd-ck) { stroke-dashoffset: 0; animation: none; }
  html body .ov-start .sd-seal .sd-r2 { opacity: 1; }
  html body .ov-start.sd-dim > :not(.sd-pop):not(.sd-fly) { filter: none; }
}