/* Market pulse floater. All classes prefixed mp-.
   A locked bottom-centre bar that expands into a scrollable list of headlines and the
   crypto Fear & Greed index. Ships collapsed and fetches nothing until opened.

   COLOURS FOLLOW THE THEME. Built on --paper / --ink / --line-2, so the toggle moves it,
   the way .dk-news--paper already does. The first build of this file copied the dock's
   hardcoded dark palette, which is right for a one-page instrument on a dark hero and
   wrong for a bar that lives on light-default content pages: it rendered as pale text on
   a white page. Every value below is an existing token from assets/site.css :root - no
   hex appears in this file.

   The panel-against-page contrast is only 1.09:1 in light and 1.08:1 in dark, so the
   boundary is NOT carried by the hairline border. It is carried by the 2px --brand top
   edge, which measures 5.11:1 against the page in light and 4.08:1 in dark, plus
   var(--shadow) - the one shadow token in the tree with a dark twin.

   Measured ratios (arithmetic on the shipped hex, sRGB, WCAG 2.x, washes composited):
     light  --ink/--paper 18.63  --ink-2 8.12  --ink-3 5.60  --gain 6.16  --drop 5.50
            --warn-ink 6.80  --brand edge vs page 5.11  focus --brand-d 7.79
     dark   --ink/--paper 15.68  --ink-2 9.53  --ink-3 5.84  --gain 9.83  --drop 6.55
            --warn-ink 11.24  --brand edge vs page 4.08  focus --brand-ink 8.39 */
.mp{position:fixed;z-index:var(--z-float,45);
  font:500 13px/1.2 var(--sans,system-ui,sans-serif);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.mp[hidden]{display:none}
.mp *{box-sizing:border-box;margin:0}
.mp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mp svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mp--away{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px)}

/* The site-wide :focus-visible ring (#8fb4ff) measures 2.07:1 on --paper, under the 3:1
   floor in WCAG 2.2 SC 1.4.11. That is a real site-wide bug on 30+ pages and is not this
   component's to fix, so the component overrides it locally. The offset is NEGATIVE
   because .mp-panel is overflow:hidden for its radius - a +2px outline on a child at the
   panel edge is clipped away. */
.mp :focus-visible,.mp-pill:focus-visible{outline:3px solid var(--brand-d);outline-offset:-3px;border-radius:10px}
:root[data-theme="dark"] .mp :focus-visible,
:root[data-theme="dark"] .mp-pill:focus-visible{outline-color:var(--brand-ink)}

.mp-panel{display:flex;align-items:stretch;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line-2);border-top:2px solid var(--brand);
  box-shadow:var(--shadow);overflow:hidden}

/* --- the collapsed bar ---------------------------------------------------- */
.mp-bar{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;text-align:left}
.mp-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--gain);flex:none}
.mp-lead{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.mp-tone{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;
  font:800 11px/1 var(--sans);letter-spacing:.02em;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.mp-tone i{font-style:normal;font-size:9px}
.mp-tone small{font-weight:700;font-size:10px}
.mp-tone[data-tone="bullish"]{color:var(--gain);border-color:var(--gain);background:var(--gain-soft)}
.mp-tone[data-tone="bearish"]{color:var(--drop);border-color:var(--drop);background:var(--drop-soft)}
.mp-tone[data-tone="mixed"]{color:var(--warn-ink);border-color:var(--warn)}
.mp-mini{font:600 11.5px/1 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-mini:empty{display:none}
.mp-chev{margin-left:auto;display:flex;color:var(--ink-2);transition:transform .2s ease}
.mp--open .mp-chev{transform:rotate(180deg)}
.mp-min{width:44px;height:44px;display:grid;place-items:center;color:var(--ink-2);border-left:1px solid var(--line);flex:none}
.mp-min:hover,.mp-chev:hover{color:var(--ink)}

/* --- the expanded sheet --------------------------------------------------- */
.mp-sheet{flex:1 1 100%;order:3;display:grid;gap:8px;padding:14px 16px 10px;border-top:1px solid var(--line)}
.mp-sheet[hidden]{display:none}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mp-h{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.mp-close{width:44px;height:44px;margin:-12px -12px -12px 0;display:grid;place-items:center;color:var(--ink-2)}
.mp-close:hover{color:var(--ink)}
.mp-how,.mp-src{font:500 10px/1.35 var(--sans);color:var(--ink-3)}
.mp-cap{display:flex;justify-content:space-between;gap:8px;font:700 9.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* Fear & Greed. The number carries data-zone for testing but is NEVER coloured by it:
   the zone is conveyed by the word ("Greed", "Extreme fear"), so it is never colour alone. */
.mp-fng{display:flex;align-items:center;gap:8px;font:600 11.5px/1.2 var(--sans);color:var(--ink-2);min-width:0}
.mp-fng-l{white-space:nowrap}
.mp-fng-l small{font-size:10px;color:var(--ink-3)}
.mp-fng-bar{position:relative;flex:1 1 60px;min-width:40px;height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--drop),var(--warn) 50%,var(--gain))}
.mp-fng-bar i{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink)}
.mp-fng b{font:800 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.mp-fng-c{white-space:nowrap;color:var(--ink-2)}

/* the scroll region. tabindex=0 on the WRAPPER so the <ul> keeps its list semantics. */
.mp-scroll{max-height:min(46dvh,320px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:8px}
.mp-list{list-style:none;padding:0;display:grid;gap:8px}
.mp-list li{display:grid;gap:2px;min-width:0}
.mp-nl{font:600 12px/1.28 var(--sans);color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-nl:hover{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.mp-nm{display:flex;justify-content:space-between;gap:8px;font:500 10px/1.2 var(--sans);color:var(--ink-3)}
.mp-tt{font-weight:800;white-space:nowrap;color:var(--ink-3)}
.mp-tt[data-tone="bullish"]{color:var(--gain)}
.mp-tt[data-tone="bearish"]{color:var(--drop)}
.mp-sk{height:30px;border-radius:6px;background:var(--chip);animation:mp-sk 1.2s ease-in-out infinite alternate}
@keyframes mp-sk{from{opacity:.55}to{opacity:1}}
.mp-msg{font:500 11.5px/1.4 var(--sans);color:var(--ink-2);padding:8px 10px;border-radius:8px;border:1px dashed var(--line-2)}
.mp-msg[hidden]{display:none}

/* --- minimised to a pill --------------------------------------------------
   --paper with the same 2px brand top edge, not --chip: --chip measures 1.05:1 against
   the page and its --line-2 border 1.31:1, so neither would identify the control. */
.mp-pill{display:none;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line-2);border-top:2px solid var(--brand);color:var(--ink);
  font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow)}
.mp-pill[hidden]{display:none}
.mp--min .mp-panel{display:none}
.mp--min .mp-pill{display:inline-flex}

/* --- desktop: bottom centre ------------------------------------------------ */
@media (min-width:721px){
  .mp{left:50%;bottom:16px;transform:translateX(-50%);width:min(760px,calc(100vw - 32px))}
  .mp.mp--away{transform:translate(-50%,16px)}
  /* the minimised pill parks bottom-right so it never sits under the lesson floater,
     which is bottom-LEFT at var(--z-float) from 1280px (site.css .floater) */
  .mp--min{width:auto;left:auto;right:20px;transform:none}
  .mp.mp--min.mp--away{transform:translateY(16px)}
  .mp-panel{border-radius:var(--r-lg)}
  .mp-bar{min-height:52px;gap:12px;padding:0 18px}
}

/* --- mobile: locked to the bottom edge ------------------------------------- */
@media (max-width:720px){
  /* left:0/right:0 alone is NOT viewport width on a phone: once anything on the page
     overflows sideways the initial containing block grows to the whole scrollable
     document and a fixed bar stretches with it. vw stays pinned to the layout viewport;
     the 100% term keeps a narrow desktop window with a classic scrollbar from overflowing. */
  .mp{left:0;right:0;bottom:0;max-width:min(100%,100vw)}
  .mp.mp--away{transform:translateY(100%)}
  .mp-panel{border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:2px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .mp-bar{min-height:56px}
  .mp-scroll{max-height:min(40dvh,260px)}
  .mp-nl{font-size:14px}
  /* minimise is a desktop affordance; on a phone the bar is already the small state */
  .mp-min,.mp-pill{display:none!important}
  .mp--min .mp-panel{display:flex}
}
@media (max-width:344px){
  .mp-bar{gap:8px;padding:0 10px}
  .mp-lead{font-size:9.5px}
}
/* the soft keyboard already owns the bottom of a phone screen */
.mp.mp--kb{transform:translateY(100%)}

/* An anchor or a focused field must not land behind the bar. scroll-padding does not
   change layout height, so unlike body{padding-bottom} it cannot break the desk fit. */
html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* site.css section 18 sets animation-duration:.001ms!important, which SNAPS an animation
   to its END state rather than cancelling it. The animation shorthand sets
   animation-name:none, which that !important does not override. */
@media (prefers-reduced-motion:reduce){
  .mp,.mp *,.mp *::after{animation:none!important;transition:none!important}
}