/* FIF Tools dock + card (v3). A square dock lives in the bottom-right corner on every page; the card grows out of it
   and folds back into it. Calm by design: no spinning glow, no shine, no bounce. Square corners, FIF colours. */

/* ---------- Dock ---------- */
.fx-dock{position:fixed;z-index:61;right:28px;bottom:28px;width:56px;height:56px;padding:0;display:flex;align-items:center;justify-content:center;
  background:#1C1B19;border:1px solid #3A3630;border-radius:0;color:#FFB627;cursor:pointer;
  box-shadow:0 14px 32px -12px rgba(28,27,25,.55);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity 280ms ease,transform 360ms cubic-bezier(.2,.8,.2,1),border-color 160ms ease}
.fx-dock.fx-in{opacity:1;transform:none;pointer-events:auto}
.fx-dock.fx-in.fx-hide{opacity:0;pointer-events:none;transition-duration:90ms}
.fx-dock:hover,.fx-dock:focus-visible{border-color:#FFB627;outline:0}
.fx-dock svg{display:block;overflow:visible}
.fx-dock .b{transform-box:fill-box;transform-origin:50% 100%;animation:fx-eq 1.8s ease-in-out infinite}
.fx-dock .b2{animation-delay:-.45s}.fx-dock .b3{animation-delay:-.9s}.fx-dock .b4{animation-delay:-1.35s}
.fx-dock .lbl{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);white-space:nowrap;padding:8px 11px;
  background:#1C1B19;border:1px solid #3A3630;color:#FCFAF5;font:600 12px/1 var(--sans);letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 200ms ease}
.fx-dock:hover .lbl,.fx-dock:focus-visible .lbl{opacity:1;transform:translate(0,-50%)}
@keyframes fx-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* ---------- Card ---------- */
.fx-pop{position:fixed;z-index:62;right:28px;bottom:28px;width:340px;font-family:var(--sans);color-scheme:dark;
  filter:drop-shadow(0 22px 36px rgba(28,27,25,.45))}
.fx-pop[hidden]{display:none}
.fx-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:374px;
  background:#1C1B19;border:1px solid #3A3630;color:#FCFAF5;
  clip-path:inset(0 0 0 0);transition:clip-path 480ms cubic-bezier(.22,.8,.22,1)}
.fx-card::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#FFB627 0 25%,#FF9F1C 25% 50%,#FF8A1F 50% 75%,#E4570E 75% 100%)}
.fx-card>*{transition:opacity 200ms ease 170ms}
.fx-pop.fx-pre .fx-card>*,.fx-pop.fx-pre .fx-card::before{opacity:0;transition-delay:0s;transition-duration:90ms}

.fx-x{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;
  background:rgba(28,27,25,.62);border:1px solid rgba(252,250,245,.25);border-radius:0;color:#FCFAF5;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color 150ms ease,color 150ms ease}
.fx-x:hover,.fx-x:focus-visible{border-color:#FFB627;color:#FFB627;outline:0}

/* Image panel with the headline number */
.fx-media{position:relative;display:block;height:112px;flex:none;overflow:hidden;text-decoration:none;
  background:radial-gradient(90% 90% at 85% 10%,rgba(255,182,39,.34),transparent 60%),radial-gradient(70% 80% at 0% 100%,rgba(228,87,14,.34),transparent 70%),#24221E}
.fx-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(28,27,25,.35) 0%,rgba(28,27,25,0) 34%,rgba(28,27,25,.92) 100%)}
.fx-ghost{position:absolute;right:52px;top:50%;transform:translateY(-50%) rotate(-10deg);opacity:.26;color:#FFB627}
.fx-ghost svg{width:104px;height:104px;display:block}
.fx-stat{position:absolute;z-index:2;left:20px;right:56px;bottom:11px;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.fx-stat i{font-style:normal;font-family:var(--mono);font-size:27px;font-weight:600;line-height:1;letter-spacing:-.01em;color:#FFB627;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.fx-stat i{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-stat i.sm{font-size:21px}
.fx-stat em{font-style:normal;font-size:12px;line-height:1.25;color:#EDE6D6;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.fx-stat.lgc{flex-direction:row;align-items:center;gap:10px}
.fx-lg{height:40px;min-width:40px;padding:0 6px;flex:none;display:flex;align-items:center;justify-content:center;background:#FCFAF5;color:#1C1B19;font:700 18px var(--mono);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.fx-lg.wide{width:92px}
.fx-lg img{display:block;width:80px;height:26px;max-width:none;object-fit:contain}
.fx-lt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-lt .cn{font-size:12px;font-weight:600;color:#EDE6D6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-lt b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;line-height:1.05;color:#FFB627;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* Text: title, then the line, then the thing to do, then the button, then the source */
.fx-body{position:relative;flex:1;display:flex;flex-direction:column;gap:9px;padding:15px 20px 13px}
.fx-t{display:block;margin:0;font-size:19px;font-weight:600;line-height:1.24;letter-spacing:-.015em;color:#FCFAF5}
.fx-t .sx{color:#FFB627;font-variant-numeric:tabular-nums}
.fx-h{margin:0;font-size:14px;line-height:1.5;color:#CFC7B6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fx-card.has-ix .fx-h{-webkit-line-clamp:2}
.fx-h b{color:#FCFAF5;font-weight:600}
.fx-h mark{background:none;color:#FFB627;font-weight:600}

.fx-ix:empty{display:none}
.fx-opts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.fx-opts button{height:38px;padding:0 6px;border:1px solid #3A3630;border-radius:0;background:#24221E;color:#FCFAF5;
  font:600 13px/1 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:border-color 150ms ease,background 150ms ease,color 150ms ease}
.fx-opts.nm button{font-family:var(--sans);font-size:13.5px;font-weight:500}
.fx-opts button:hover:not([disabled]),.fx-opts button:focus-visible{border-color:#FFB627;outline:0}
.fx-opts button[disabled]{cursor:default}
.fx-opts button.ok{background:#1E6B45;border-color:#2E9E68;color:#fff}
.fx-opts button.no{border-color:#E4570E;color:#F3B79A}
.fx-opts button.dim{opacity:.45}

.fx-in{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;padding:0 0 0 12px;margin:0;
  background:#24221E;border:1px solid #3A3630;font-size:13px;color:#CFC7B6;transition:border-color 150ms ease}
.fx-in:focus-within{border-color:#FFB627}
.fx-in .w{display:flex;align-items:center;gap:4px;height:100%;padding-right:10px;font-family:var(--mono);font-size:15px;font-weight:600;color:#FFB627}
.fx-in input,.fx-in select{height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#FCFAF5;font:600 15px var(--mono);outline:0;box-shadow:none;-moz-appearance:textfield;appearance:none}
.fx-in input{width:92px;text-align:right}
.fx-in input.d{width:34px}
.fx-in select{width:auto;padding-right:2px;cursor:pointer}
.fx-in select option{background:#1C1B19;color:#FCFAF5}
.fx-in input::-webkit-outer-spin-button,.fx-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.fx-cta{display:flex;align-items:center;gap:7px;height:46px;padding:0 16px;margin-top:auto;border-radius:0;text-decoration:none;
  background:linear-gradient(90deg,#E25F10,#C2410C);color:#fff!important;font-size:15px;font-weight:600;transition:background 180ms ease}
.fx-cta:hover,.fx-cta:focus-visible{color:#fff!important;background:linear-gradient(90deg,#C94F0C,#A9380A);outline:0}
.fx-cta .tag{font-size:13px;font-weight:500;color:rgba(255,255,255,.82)}
.fx-cta svg{margin-left:auto;flex:none;transition:transform 200ms ease}
.fx-cta:hover svg{transform:translateX(4px)}
.fx-src{display:block;margin-top:-1px;font-size:11px;line-height:1.3;color:#8C8476;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Mobile: card sits right above the bottom bar, growing out of the dock ---------- */
@media (max-width:899.98px){
  .fx-dock,.fx-pop{right:12px;bottom:calc(64px + 14px + env(safe-area-inset-bottom,0px))}
  .fx-dock{width:52px;height:52px}
  .fx-dock .lbl{display:none}
  .fx-pop{width:calc((100vw - 24px) * .85)}
  .fx-card{min-height:0}
  .fx-media{height:96px}
  .fx-ghost svg{width:88px;height:88px}
  .fx-x{top:8px;right:8px;width:32px;height:32px}
  .fx-stat{left:14px;right:48px;bottom:9px}
  .fx-stat i{font-size:23px}
  .fx-stat i.sm{font-size:18px}
  .fx-stat em{font-size:11px}
  .fx-lg{height:34px;min-width:34px;font-size:16px}
  .fx-lg.wide{width:80px}
  .fx-lg img{width:68px;height:22px}
  .fx-lt b{font-size:18px}
  .fx-body{gap:7px;padding:11px 14px 10px}
  .fx-t{font-size:17px;line-height:1.22}
  .fx-h{font-size:13px;line-height:1.45}
  .fx-opts button{height:38px;font-size:12.5px}
  .fx-opts.nm button{font-size:13px}
  .fx-in{height:40px;font-size:12.5px}
  .fx-cta{height:44px;font-size:14px;padding:0 14px}
  .fx-cta .tag{font-size:12px}
  .fx-src{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .fx-dock .b{animation:none}
  .fx-card{transition:none}
  .fx-card>*{transition:opacity 120ms linear}
}
@media print{.fx-dock,.fx-pop{display:none}}