/* MacroFinance Flow dashboard - v1/v2 shell
   Scoped to .mfd so the site chrome (neve header/footer) is untouched. */

.mfd{
  --bg:#0d1117; --panel:#131922; --card:#161b22; --sunk:#0d1520;
  --line:#2a313c; --text:#e6edf3; --mut:#9aa7b4; --dim:#6b7684;
  --accent:#16b3a0; --on:#16324a;
  --up:#34d399; --dn:#f87171; --warn:#fb923c;
  --s-markets:#6EA8FE; --s-macro:#5AD1B0; --s-live:#fb923c;
  --s-risk:#f87171; --s-research:#F2C14E; --s-strat:#818cf8;
  background:var(--bg); color:var(--text);
  font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:var(--mfd-top,10px) 15px 32px; box-sizing:border-box; min-height:70vh;
  contain:layout style;
  /* Track the theme's own container width (neve sets --container on :root:
     748 / 992 / 1180px by breakpoint) so the dashboard lines up with the rest
     of the site, e.g. /watchlist/. Deliberately NOT redefined above, so it
     inherits from :root; the fallback covers a theme that stops setting it. */
  max-width:var(--container,1180px);
  margin:0 auto;
  /* the dark surface is painted full-bleed by .csu-dashboard-container below,
     so this element only sets the width - no fill, no card edge */
  background:transparent;
}

/* ---------- page surface ----------
   This stylesheet is enqueued ONLY on the dashboard template
   (mf_flow_enqueue() checks is_page_template), so these ancestor rules cannot
   affect any other page on the site. The dashboard reads as one continuous
   dark surface running from the site header down: paint it full-bleed on the
   page wrapper, and neutralise any light background the theme, a plugin or the
   Customizer paints on the wrappers in between. */
body{background-color:var(--mfd-site-bg,#101820)!important}

/* The full-bleed surfaces below span 100vw, which INCLUDES the scrollbar, so
   they sit ~15px wider than the document and would add a horizontal scrollbar.
   Clip it at the root. `clip` rather than `hidden` so position:sticky and the
   modals' position:fixed keep working. Page-scoped like everything else here. */
html,body{overflow-x:clip}

/* Flow and Watchlist must start at the SAME distance below the site nav, or
   switching between them jumps. Both surfaces get their top spacing from one
   token, and every wrapper above them is zeroed.
   Selectors are prefixed with `body` (specificity 0,2,1) so they also beat
   theme/Customizer rules that set per-page vertical spacing with !important at
   0,2,0 - a plain `.neve-main` rule was not always winning. */
body #content,body .neve-main,body .wrapper,
body .nv-content-wrap,body .nv-single-page-wrap,body .nv-page-title-wrap,
body .neve-main>.container,body article.page,body .page .entry-content{
  background:transparent!important;
  padding-top:0!important;
  margin-top:0!important;
}
body .csu-dashboard-container,body .mfwl-wrap{margin-top:0!important}
/* neve/style.css still carries the pre-Flow white-card styling for this
   wrapper - `width:100%` plus `@media (max-width:1300px){max-width:95%}` - and
   both break the full-bleed calc above:

     max-width:95%  caps the box, so .mfd centres on 95% of the viewport and
                    lands ~39px left of the logo (only under 1300px, which is
                    why the drift looked intermittent);
     width:100%     with box-sizing:border-box pins the box to the parent's
                    width, so the negative margins cannot widen it and .mfd
                    centres on a box 15px too narrow - 7.5px off.

   The margin/padding calc pair already sizes this element; nothing may pin or
   cap it. `body `-prefixed so it wins regardless of stylesheet order. */
body .csu-dashboard-container,body .mfwl-wrap{width:auto;max-width:none}

/* single source of truth for the gap under the site nav */
.csu-dashboard-container,.mfwl-wrap,.mfd-scope{--mfd-top:10px}
.csu-dashboard-container{
  background:var(--mfd-site-bg,#101820);
  /* Full-bleed background, content returned to the parent's content box.
     The margin and the padding use the SAME calc, so the 100vw-vs-100%
     scrollbar difference cancels out exactly - which is why content here lines
     up with the site header's .container instead of sitting ~8px off.
     Do NOT reintroduce width:100vw here; that is what caused the drift. */
  margin-inline:calc(50% - 50vw);
  padding:0 calc(50vw - 50%) 40px;
  box-sizing:border-box;
  overflow-x:clip;
}
.mfd *,.mfd *::before,.mfd *::after,.mfd-scope *,.mfd-scope *::before,.mfd-scope *::after{box-sizing:border-box}
.mfd a{color:var(--accent);text-decoration:none}
.mfd a:hover{color:#3fb98a}
.mfd h1,.mfd h2,.mfd h3{margin:0}

/* ---------- launch strip ---------- */
.mfd-launch{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.mfd-seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:4px}
.mfd-seg-lbl{font:700 10.5px/1 system-ui;letter-spacing:.07em;color:var(--dim);
  text-transform:uppercase;align-self:center;padding-left:10px;margin-right:4px}
.mfd-pill{appearance:none;background:none;border:0;font:600 14px/1 inherit;color:var(--mut);
  padding:9px 18px;border-radius:8px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px}
.mfd-pill:hover{color:var(--text)}
.mfd-pill[aria-pressed="true"],.mfd-pill.is-on{background:var(--on);color:#fff}
.mfd-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mfd-new{font:600 12px/1 inherit;color:var(--accent);background:rgba(22,179,160,.12);
  padding:5px 10px;border-radius:10px;white-space:nowrap}
.mfd-launch-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mfd-search{display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:9px 14px;width:340px;
  max-width:100%;min-height:40px;
  color:var(--dim);font-size:13px;cursor:pointer;text-align:left}
/* The icon must not be squeezed, and the label must not wrap: a two-line
   label pushed the box out of the launch row. Ellipsis is the safety net for
   the narrow-viewport case, where the box becomes elastic. */
.mfd-search svg{flex:none}
.mfd-search span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mfd-search:hover{border-color:var(--accent)}
.mfd-soon{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border:1px dashed var(--line);border-radius:16px;font-size:12.5px;color:var(--dim);white-space:nowrap}
.mfd-soon b{font:700 10px/1 inherit;color:var(--accent);background:rgba(22,179,160,.12);
  padding:2px 7px;border-radius:8px}
/* flex-centred, zero padding: a <button> otherwise keeps its UA padding and
   baseline alignment, which pushes the "?" off-centre inside the circle */
.mfd-help{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--mut);font:700 14px/1 inherit;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  text-align:center;-webkit-appearance:none;appearance:none}
.mfd-help:hover{color:var(--text);border-color:var(--accent)}

/* ---------- toolbar ---------- */
/* One row, always. Three things make that hold:
   1. .mfd-fold is display:contents, so the two groups it wraps are direct flex
      items instead of one indivisible block - that block is what pushed SHOW
      onto a line of its own.
   2. nowrap, so a tight fit shrinks the row rather than breaking it.
   3. Streams is the only group allowed to shrink, and it scrolls inside its own
      box when it does - the same affordance the mobile layout already uses.
   The mobile rules further down still override all of this. */
/* space-between spreads the groups edge to edge so the row fills the page
   instead of bunching at the left. gap stays as the floor: once the row is
   tight there is no spare space to distribute, the gaps fall back to 12px and
   Streams starts scrolling instead (see below). */
.mfd-bar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  justify-content:space-between;margin:16px 0 0}
.mfd-fold{display:contents}
.mfd-bar .mfd-seg{padding:4px 4px 4px 0;flex:0 0 auto}
.mfd-bar .mfd-pill{padding:7px 9px;font-size:13px}
.mfd-bar .mfd-seg-lbl{padding-left:7px;margin-right:3px}

/* Streams absorbs the squeeze. min-width:0 is required or a flex item refuses
   to shrink below its content and the row overflows instead. */
.mfd-bar .mfd-seg[aria-label="Streams"]{flex:0 1 auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mfd-bar .mfd-seg[aria-label="Streams"]::-webkit-scrollbar{display:none}
.mfd-bar .mfd-seg[aria-label="Streams"] .mfd-pill{flex:0 0 auto}
.mfd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mfd-caret{transition:transform .15s}
.mfd-pill[aria-expanded="true"] .mfd-caret{transform:rotate(180deg)}

/* asset-class sub-facets */
.mfd-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding-left:4px}
.mfd-sub[hidden]{display:none}
.mfd-sub-lbl{font:700 11px/1 inherit;letter-spacing:.07em;color:var(--s-markets);text-transform:uppercase}
.mfd-chip{appearance:none;padding:5px 12px;border:1px solid var(--line);border-radius:16px;
  font:400 12.5px/1.3 inherit;color:#c7cdd6;background:var(--panel);cursor:pointer}
.mfd-chip:hover{color:var(--text)}
.mfd-chip[aria-pressed="true"]{border-color:var(--s-markets);color:var(--text)}

/* ---------- body ---------- */
.mfd-body{display:flex;gap:20px;align-items:flex-start;margin-top:18px}
.mfd-feed{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.mfd-rail{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}

.mfd-card{background:var(--card);border:1px solid var(--line);border-radius:10px}
.mfd-row{display:flex;gap:14px;padding:14px 16px;align-items:flex-start}
.mfd-watch{border-color:rgba(22,179,160,.5);box-shadow:0 0 0 1px rgba(22,179,160,.18)}

/* briefing */
.mfd-brief{padding:18px 20px;border-color:rgba(22,179,160,.4);background:#12202a;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mfd-brief-in{flex:1;min-width:0}
.mfd-brief-kicker{font:700 11px/1 inherit;letter-spacing:.09em;color:var(--accent);text-transform:uppercase}
.mfd-brief h2{font-size:17px;font-weight:700;margin-top:6px}
.mfd-brief p{font-size:13.5px;color:#c7cdd6;margin:6px 0 0;line-height:1.5}
.mfd-cta{white-space:nowrap;padding:10px 18px;border-radius:8px;background:var(--accent);
  color:#0d1520!important;font:700 13.5px/1 inherit;align-self:center}
.mfd-cta:hover{background:#1ac9b4;color:#0d1520!important}
.mfd-tags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.mfd-tag{display:inline-block;padding:4px 10px;border-radius:6px;background:var(--sunk);
  border:1px solid var(--line);font-size:12.5px;color:#c7cdd6}
.mfd-tag.crit{border-color:rgba(248,113,113,.5);color:var(--dn)}
.mfd-tag.imp{border-color:rgba(251,146,60,.5);color:var(--warn)}

/* Global Updates + Your Updates sit on one row and stack when narrow.
   Equal columns so neither card implies more weight than the other. */
.mfd-briefs{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.mfd-briefs>.mfd-brief{margin:0}
/* Yours is the quieter of the two: same structure, no accent border, so the
   global card stays the one that carries the day's headline. */
.mfd-brief-you{border-color:var(--line);background:var(--card)}
.mfd-brief-you .mfd-brief-kicker{color:var(--dim)}
@media (max-width:900px){.mfd-briefs{grid-template-columns:1fr}}

/* A count that filters the feed has to look like it does something. */
button.mfd-tag{cursor:pointer;font-family:inherit;line-height:1.35;
  transition:border-color .12s ease,background .12s ease,transform .12s ease}
button.mfd-tag:hover{background:#1b2532;transform:translateY(-1px)}
button.mfd-tag:active{transform:none}
button.mfd-tag:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a.mfd-tag{text-decoration:none}
a.mfd-tag:hover{background:#1b2532}
.mfd-pill[disabled]{opacity:.45;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  button.mfd-tag{transition:none}
  button.mfd-tag:hover{transform:none}
}

/* search modal: facets, result tags, browse footer */
/* Sized so all nine pills clear one row inside the 900px modal; they still
   wrap rather than overflow if a section is added or the window is narrow. */
.mfd-facets{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.mfd-facet{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  color:#c7cdd6;font-family:inherit;font-weight:500;font-size:12px;line-height:1.35;
  cursor:pointer;white-space:nowrap;transition:border-color .12s ease,color .12s ease}
.mfd-facet:hover{border-color:#3a434f}
.mfd-facet[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}
.mfd-facet:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mfd-facet-dot{width:6px;height:6px;border-radius:50%;flex:none}

/* A result row is title+meta on the left, the section tag pinned right. */
.mfd-sr{display:flex;align-items:center;gap:12px}
.mfd-sr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mfd-srtag{flex:none;padding:2px 9px;border-radius:10px;border:1px solid currentColor;
  font-family:inherit;font-weight:700;font-size:10.5px;line-height:1.5;
  white-space:nowrap;opacity:.9}
.mfd-sr-more{padding:8px 0 2px}
.mfd-sr-more a{font-size:12px}

.mfd-browse{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.mfd-browse-lbl{color:var(--dim)}
.mfd-browse a{color:var(--accent);text-decoration:none}
.mfd-browse a:hover{text-decoration:underline}

@media (max-width:780px){
  /* The tag wraps under the text rather than squeezing the title on a phone. */
  .mfd-sr{flex-wrap:wrap;gap:6px}
  .mfd-srtag{order:-1}
}
@media (prefers-reduced-motion:reduce){ .mfd-facet{transition:none} }

/* feed cards */
.mfd-day{font:700 11px/1 inherit;letter-spacing:.09em;color:var(--dim);
  text-transform:uppercase;margin:6px 2px 0}
.mfd-t{font-size:12px;color:var(--dim);min-width:52px;padding-top:2px}
.mfd-t i{display:block;width:7px;height:7px;border-radius:50%;margin-top:6px;font-style:normal}
.mfd-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mfd-h{font-size:14.5px;font-weight:600;color:var(--text)}
.mfd-d{font-size:13px;color:var(--mut);margin-top:3px}
.mfd-badge{display:inline-block;padding:2px 9px;border-radius:10px;
  font:700 11px/1.5 inherit;letter-spacing:.03em;white-space:nowrap}
.mfd-b-markets {background:rgba(110,168,254,.16);color:var(--s-markets)}
.mfd-b-macro   {background:rgba(90,209,176,.16); color:var(--s-macro)}
.mfd-b-live    {background:rgba(251,146,60,.16); color:var(--s-live)}
.mfd-b-risk    {background:rgba(248,113,113,.16);color:var(--s-risk)}
.mfd-b-research{background:rgba(242,193,78,.16); color:var(--s-research)}
.mfd-b-strat   {background:rgba(129,140,248,.16);color:var(--s-strat)}
.mfd-wtag{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 inherit;color:var(--accent)}
.mfd-v{text-align:right;flex-shrink:0}
.mfd-up{color:var(--up);font:700 13.5px/1.3 inherit}
.mfd-dn{color:var(--dn);font:700 13.5px/1.3 inherit}
.mfd-v span{color:var(--mut);font-size:11.5px;display:block}
.mfd-hidden-note{text-align:center;padding:10px;color:var(--dim);font-size:12.5px}
.mfd-hidden-note button{appearance:none;background:none;border:0;color:var(--accent);
  cursor:pointer;font:inherit;text-decoration:underline}

/* rail */
.mfd-rail .mfd-card{padding:16px}
.mfd-rail-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mfd-rail-h b{font:700 13px/1 inherit;color:var(--text)}
.mfd-rail-h a{font-size:12px}
.mfd-rr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.mfd-rr:last-child{border-bottom:0}
.mfd-sym{font-weight:600;color:var(--text)}
.mfd-mut{color:var(--mut)}
.mfd-alloc{display:flex;height:8px;border-radius:4px;overflow:hidden}
.mfd-explore{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mfd-explore a{font-size:13px;padding:9px 10px;background:var(--sunk);
  border:1px solid var(--line);border-radius:8px;display:block}
.mfd-explore a:hover{border-color:var(--accent)}

/* states */
.mfd-empty{padding:28px 20px;text-align:center;color:var(--mut);font-size:13.5px}
.mfd-empty b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}
.mfd-lock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)}
.mfd-skel{background:linear-gradient(90deg,#161b22 25%,#1d242e 37%,#161b22 63%);
  background-size:400% 100%;animation:mfd-sh 1.2s ease-in-out infinite;border-radius:10px;height:66px}
@keyframes mfd-sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.mfd-skel{animation:none}}
.mfd-more{text-align:center;padding:6px 0}
.mfd-more button{appearance:none;background:none;border:0;color:var(--accent);
  cursor:pointer;font:600 13px/1 inherit;padding:10px 16px}

.mfd-feed-wrap{display:flex;flex-direction:column;gap:10px}

/* mobile-only controls, hidden on desktop.
   The filters summary is redundant on desktop - the STREAMS and IMPORTANCE
   groups are visible right next to it saying the same thing. It only earns its
   place on mobile, where those groups fold into the Filters sheet and this is
   the only indication of what is active. */
.mfd-filters-btn{display:none}
.mfd-filters-sum{display:none}
.mfd-sheet{display:none}

/* Search modal works at every width, so it opts out of the mobile-only rule.
   NOTE the `inset` and `margin:0`: the UA stylesheet styles a modal <dialog> as
   `inset:0; margin:auto` to centre it. Setting only top/left leaves right:0 and
   bottom:0 in force, which over-constrains the box and lets the auto margins
   absorb the slack - the dialog then lands bottom-right instead of centred.
   Reset all four sides in one `inset` and zero the margin. */
:is(.mfd,.mfd-scope) .mfd-search-modal[open]{display:block;position:fixed;
  inset:50% auto auto 50%;margin:0;
  transform:translate(-50%,-50%);width:min(900px,94vw);max-height:80vh;overflow-y:auto;
  z-index:99999;background:var(--card);color:var(--text);border:1px solid var(--line);
  border-radius:14px;padding:18px}
:is(.mfd,.mfd-scope) .mfd-search-modal::backdrop{background:rgba(0,0,0,.6)}
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-sheet-h{font:700 11px/1 inherit;letter-spacing:.07em;
  color:var(--dim);text-transform:uppercase;margin:16px 0 4px}
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-rr{text-decoration:none}
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-rr:hover .mfd-sym{color:var(--accent)}
/* A full-width borderless block read as a section of the dialog rather than
   a control. Sized to its label and pushed right, where a dismiss belongs. */
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-sheet-done{display:block;width:auto;margin:16px 0 0 auto;
  padding:9px 18px;min-height:38px;border:1px solid var(--line);border-radius:8px;
  background:var(--sunk);color:var(--mut);font:500 13px/1 inherit;cursor:pointer;
  transition:border-color .12s,color .12s}
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-sheet-done:hover{border-color:var(--accent);color:var(--text)}
:is(.mfd,.mfd-scope) .mfd-search-modal .mfd-sheet-done:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
:is(.mfd,.mfd-scope) .mfd-search-modal input:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* Below the side-rail breakpoint the rail moves under the feed and the cards
     stack one below the other, full width. (It used to be a horizontal
     scroll-snap strip, which hid cards off-screen behind a swipe.) */
  .mfd-body{flex-direction:column}
  .mfd-rail{width:100%;flex-direction:column;gap:14px;overflow:visible;padding-bottom:0}
  .mfd-rail>.mfd-card{min-width:0;width:100%;flex-shrink:1}
}
@media (max-width:780px){
  .mfd{padding:8px 15px 28px;margin:0 auto}
  .mfd-launch{gap:10px}
  .mfd-launch>.mfd-seg{flex:1}
  .mfd-launch>.mfd-seg .mfd-pill{flex:1;justify-content:center;min-height:44px}
  /* search + help share one row (they are one utility group); any v2 links and
     chips wrap underneath */
  .mfd-launch-r{width:100%;order:3;gap:8px}
  .mfd-launch-r .mfd-search{flex:1 1 auto;width:auto;min-height:44px}
  .mfd-launch-r .mfd-help{width:44px;height:44px;flex-shrink:0}

  .mfd-bar{gap:10px;margin-top:12px;justify-content:flex-start}
  .mfd-bar .mfd-seg{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%}
  .mfd-bar .mfd-seg::-webkit-scrollbar{display:none}
  .mfd-bar .mfd-pill{min-height:40px}
  .mfd-fold{display:none}
  .mfd-filters-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
    border:1px solid var(--line);border-radius:8px;background:var(--panel);
    color:var(--text);font:600 13.5px/1 inherit;cursor:pointer;min-height:44px}
  .mfd-filters-sum{display:inline;font-size:12px;color:var(--mut)}

  /* margin:0 for the same UA `dialog:modal{margin:auto}` reason as the search modal */
  .mfd-sheet[open]{display:block;position:fixed;inset:auto 0 0 0;margin:0;z-index:99999;
    width:100%;max-width:100%;background:var(--card);border:0;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;padding:18px 16px 28px;max-height:80vh;overflow-y:auto;
    color:var(--text)}
  .mfd-sheet::backdrop{background:rgba(0,0,0,.6)}
  .mfd-sheet .mfd-seg{flex-wrap:wrap;background:none;border:0;padding:0;gap:8px}
  .mfd-sheet .mfd-pill{border:1px solid var(--line);background:var(--panel);min-height:44px}
  .mfd-sheet-h{font:700 11px/1 inherit;letter-spacing:.07em;color:var(--dim);
    text-transform:uppercase;margin:16px 0 8px}
  .mfd-sheet-h:first-of-type{margin-top:0}
  .mfd-sheet-done{width:100%;margin-top:20px;padding:14px;border:0;border-radius:8px;
    background:var(--accent);color:#0d1520;font:700 14px/1 inherit;cursor:pointer}

  .mfd-row{flex-direction:column;gap:8px;padding:14px}
  .mfd-t{display:flex;align-items:center;gap:8px;min-width:0;padding-top:0;order:-1}
  .mfd-t i{margin-top:0}
  .mfd-v{text-align:left;display:flex;align-items:baseline;gap:8px}
  .mfd-v span{display:inline}
  .mfd-brief{flex-direction:column;align-items:stretch}
  .mfd-cta{text-align:center;align-self:stretch;padding:13px}
  .mfd-explore a{min-height:44px;display:flex;align-items:center}
}

/* ==========================================================================
   Legacy popups: Ask AI (#ask-ai-popup) and Get Started Guide
   (#get-started-popup).

   Their markup and jQuery handlers are carried over unchanged from the old
   dashboard, but their styles used to live in the inline <style> block that
   this file replaced. Without them the overlays render as ordinary page
   content below the feed instead of staying hidden until the "?" button
   opens them. Ported verbatim from the old block; ordering matters, .hidden
   must come after .info-popup-overlay so display:none wins.
   ========================================================================== */

.info-popup-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background-color:rgba(0,0,0,.7);
  display:flex;justify-content:center;align-items:center;
  z-index:10000;
}
.info-popup-content{
  background-color:#101820!important;
  padding:25px;border-radius:8px;max-width:500px;width:90%;
  color:lightgrey;box-shadow:0 4px 20px rgba(0,0,0,.3);position:relative;
}
.info-popup-content h3{
  margin:0 0 5px;color:#87CEEB;border-bottom:1px solid #87CEEB;
  padding-bottom:10px;font-size:1.4em;
}
.info-popup-content p{line-height:1.6;margin-bottom:15px}

/* both popups: centre, and scroll internally when taller than the viewport */
#ask-ai-popup .info-popup-content,
#get-started-popup .info-popup-content{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-height:calc(100vh - 32px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
@supports (height:100dvh){
  #ask-ai-popup .info-popup-content,
  #get-started-popup .info-popup-content{max-height:calc(100dvh - 32px)}
}
@media (max-width:600px){
  /* start from the top on small screens so the header is not cut off */
  #ask-ai-popup .info-popup-content,
  #get-started-popup .info-popup-content{
    top:20px;left:50%;transform:translateX(-50%);
  }
}

.feature-btn{
  width:100%;padding:12px;margin:3px 0;border:1px solid #5D646B;
  border-radius:6px;background:#101820;cursor:pointer;text-align:left;
  transition:all .2s ease;color:#E2E8F0;
}
.feature-btn:hover{border-color:#16b3a0;background:#4A5157;transform:translateY(-1px)}
.btn-title{font-weight:600;color:#fff;margin-bottom:4px;font-size:.95em;
  display:flex;align-items:center}
.btn-desc{font-size:.75em;color:#CBD5E0;margin:0;line-height:1.4}

.service-discovery{margin:15px 0;padding:15px 0;
  border-top:1px solid #5D646B;border-bottom:1px solid #5D646B}
.service-discovery p{margin:0 0 10px;font-size:.85em;color:#CBD5E0;text-align:center}

.close-popup{
  background-color:#16b3a0!important;color:#fff;border:0;padding:5px;
  border-radius:4px;cursor:pointer;margin-top:15px;
}
.close-popup:hover{background-color:#005177}

/* must stay last: keeps both overlays out of the page until "?" opens them */
.hidden{display:none}

/* ==========================================================================
   Motion. Flow <-> Watchlist is a real page navigation, so "smooth" means two
   things: the two pages must start at the same Y (handled by --mfd-top above,
   which is what stops the strip jumping), and the surface should settle in
   rather than hard-cut. Everything here is decorative and fully disabled under
   prefers-reduced-motion.
   ========================================================================== */

@keyframes mfd-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mfd,.mfwl-wrap{animation:mfd-enter .18s ease-out both}

.mfd-pill,.mfd-chip,.mfd-help,.mfd-search,.mfd-card,.mfd-cta,.mfd-soon,
.mfwl-wrap .mfwl-submenu-tab,.mfwl-wrap .mfwl-btn,
.mfwl-wrap .button,.mfwl-wrap .button-primary,.mfwl-wrap .mfwl-info-button{
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.mfd-rr,.mfwl-wrap .mfwl-table tr{transition:background-color .12s ease}

@media (prefers-reduced-motion:reduce){
  .mfd,.mfwl-wrap{animation:none}
  .mfd-pill,.mfd-chip,.mfd-help,.mfd-search,.mfd-card,.mfd-cta,.mfd-soon,
  .mfd-rr,.mfd-caret,
  .mfwl-wrap .mfwl-submenu-tab,.mfwl-wrap .mfwl-btn,
  .mfwl-wrap .button,.mfwl-wrap .button-primary,.mfwl-wrap .mfwl-info-button,
  .mfwl-wrap .mfwl-table tr{transition:none}
}

/* ==========================================================================
   Watchlist (/watchlist/, the mf-watchlist-manager [mf_watchlist] shortcode).

   Flow and Watchlist are two views of one product, so the watchlist reuses
   this file's shell: same tokens, same full-bleed dark surface, same theme
   container width, same 10px gap under the site nav. Its own inline_css()
   still styles the components; the rules below only bridge them onto the
   dashboard palette, so nothing in the plugin had to be rewritten.

   Selectors are deliberately one level more specific than the plugin's
   (.mfwl-wrap .mfwl-table th vs .mfwl-table th) so they win regardless of
   which stylesheet the page happens to print first.
   ========================================================================== */

.mfwl-wrap{
  --bg:#0d1117; --panel:#131922; --card:#161b22; --sunk:#0d1520;
  --line:#2a313c; --text:#e6edf3; --mut:#9aa7b4; --dim:#6b7684;
  --accent:#16b3a0; --on:#16324a;
  --up:#34d399; --dn:#f87171; --warn:#fb923c;

  color:var(--text);
  background:var(--mfd-site-bg,#101820);
  font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Same self-correcting full-bleed as the dashboard: identical calc on the
     margin and the padding, so content returns to the parent's content box -
     here that is neve's .container > .row > .col, i.e. exactly where the site
     header's logo sits. The earlier max()/50vw version put this ~8px left of
     the header, which is what made Flow and Watchlist look misaligned. */
  margin-inline:calc(50% - 50vw);
  padding:var(--mfd-top,10px) calc(50vw - 50%) 40px;
  box-sizing:border-box;overflow-x:clip;
}
.mfwl-wrap *,.mfwl-wrap *::before,.mfwl-wrap *::after{box-sizing:border-box}
.mfwl-wrap a{color:var(--accent);text-decoration:none}
.mfwl-wrap a:hover{color:#3fb98a}

/* headings */
.mfwl-wrap .mfwl-title{font-size:20px;font-weight:700;color:var(--text);margin:18px 0 12px}
.mfwl-wrap .mfwl-section-title{font-size:15px;font-weight:700;color:var(--text);margin:0 0 12px}

/* inline "?" badges match the dashboard's help circle */
.mfwl-wrap .mfwl-info-button{
  width:26px!important;height:26px!important;flex-shrink:0;
  border-radius:50%!important;border:1px solid var(--line)!important;
  background:var(--panel)!important;color:var(--mut)!important;
  font:700 13px/1 system-ui!important;cursor:pointer;padding:0!important;
  /* same centring fix as .mfd-help */
  display:inline-flex!important;align-items:center;justify-content:center;
  text-align:center;-webkit-appearance:none;appearance:none;
}
.mfwl-wrap .mfwl-info-button:hover{color:var(--text)!important;border-color:var(--accent)!important}

/* section tabs -> the same segmented control as the dashboard toolbar */
.mfwl-wrap .mfwl-submenu-bar{
  display:flex;gap:4px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:4px;margin:0 0 18px;
}
.mfwl-wrap .mfwl-submenu-tab{
  appearance:none;background:none!important;border:0!important;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--mut)!important;padding:9px 16px!important;border-radius:8px!important;
  cursor:pointer;white-space:nowrap;flex:0 1 auto;
}
.mfwl-wrap .mfwl-submenu-tab:hover{color:var(--text)!important}
.mfwl-wrap .mfwl-submenu-tab.active{background:var(--on)!important;color:#fff!important}
.mfwl-wrap .mfwl-submenu-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* tables read as dashboard cards */
.mfwl-wrap .mfwl-table-wrap{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:4px 14px;overflow:auto;
}
.mfwl-wrap .mfwl-table th,
.mfwl-wrap .mfwl-table td{
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 8px;text-align:left;font-size:13px;color:var(--text);
}
.mfwl-wrap .mfwl-table th{
  font:700 11px/1 system-ui;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);border-bottom:1px solid var(--line);
}
.mfwl-wrap .mfwl-table tr:hover{background:rgba(255,255,255,.03);color:var(--text)}
.mfwl-wrap .mfwl-table tr:last-child td{border-bottom:0}

/* buttons: dark, not the default white */
.mfwl-wrap .mfwl-btn{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  padding:6px 12px;border-radius:8px;font-size:12.5px;cursor:pointer;
}
.mfwl-wrap .mfwl-btn:hover{border-color:var(--accent);color:#fff}
.mfwl-wrap .mfwl-btn--danger,
.mfwl-wrap .mfwl-archive-inline{
  border:1px solid rgba(248,113,113,.5)!important;color:var(--dn)!important;
  background:var(--panel)!important;border-radius:8px;padding:6px 12px;cursor:pointer;
}
.mfwl-wrap .mfwl-btn--danger:hover,
.mfwl-wrap .mfwl-archive-inline:hover{border-color:var(--dn)!important;color:#fff!important}

/* modal action buttons inherit WP's light .button styling - darken them here */
.mfwl-wrap .button,
.mfwl-wrap .button-primary{
  background:var(--panel)!important;border:1px solid var(--line)!important;
  color:var(--text)!important;text-shadow:none!important;box-shadow:none!important;
  border-radius:8px!important;padding:8px 14px!important;height:auto!important;
  font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif!important;cursor:pointer;
}
.mfwl-wrap .button:hover{border-color:var(--accent)!important;color:#fff!important}
.mfwl-wrap .button-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:#0d1520!important}
.mfwl-wrap .button-primary:hover{background:#1ac9b4!important;border-color:#1ac9b4!important}

/* inputs + results list */
.mfwl-wrap .mfwl-field input,
.mfwl-wrap .mfwl-field select,
.mfwl-wrap input[type="text"],
.mfwl-wrap input[type="search"],
.mfwl-wrap select{
  background:var(--sunk);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding:9px 12px;font-size:13px;
}
.mfwl-wrap .mfwl-field input::placeholder,
.mfwl-wrap input::placeholder{color:var(--dim);opacity:1}
.mfwl-wrap .mfwl-field input:focus,
.mfwl-wrap select:focus,
.mfwl-wrap input:focus{outline:2px solid var(--accent);outline-offset:1px}
.mfwl-wrap .mfwl-results{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
}
.mfwl-wrap .mfwl-result-item{border-bottom:1px solid rgba(255,255,255,.06);padding:10px 12px}
.mfwl-wrap .mfwl-result-item:last-child{border-bottom:0}
.mfwl-wrap .mfwl-loading{color:var(--mut)}

/* modals share the dashboard card treatment */
.mfwl-wrap .mfwl-modal__dialog{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  border-radius:12px;
}
.mfwl-wrap .mfwl-modal__dialog h2,
.mfwl-wrap .mfwl-modal__dialog h3{color:var(--text)}

@media (max-width:780px){
  .mfwl-wrap{padding:8px calc(50vw - 50%) 28px}
  .mfwl-wrap .mfwl-btn{min-height:40px}
}


/* ---------------------------------------------------------------------------
   Studio section (?section=studio). The plugin ships .insight-dashboard at a
   fixed 1100px; inside the dashboard it should track .mfd's own container
   width instead, so Flow and Studio line up edge to edge. min-height matches
   .mfd (70vh) so switching sections does not collapse the page and bounce the
   footer up.
   --------------------------------------------------------------------------- */
.mfd-studio{margin-top:18px;min-height:70vh}
.mfd-studio .insight-dashboard{max-width:none;width:100%;margin:0}
.mfd-studio .insight-studio-wrap{max-width:none;width:100%;margin:0;padding:0;background:transparent}
/* the plugin's own nav bar is filtered out server-side; belt and braces */
.mfd-studio .mf-studio-nav{display:none}
.mfd-studio .insight-shell{width:100%}
@media (max-width:860px){
  .mfd-studio{min-height:0}
}

/* ---------------------------------------------------------------------------
   Studio (standalone /studio/) joins the same spacing contract as Flow and
   Watchlist, so the launch strip sits at exactly the same place on all three
   and switching between them never jumps.

   .mfd-scope is the Studio equivalent of .mfd / .mfwl-wrap: it declares the
   colour tokens the pills are painted with (otherwise only on .mfd), and it
   takes the same `var(--mfd-top)` gap under the site nav. The wrapper-zeroing
   rules further up already apply here, because flow.css is now enqueued on
   /studio/ too.

   No side padding, deliberately - and this is the one place Studio cannot copy
   .mfd verbatim. .mfd is full-bled by .csu-dashboard-container and re-centred
   at var(--container), so it sits OUTSIDE the theme container's 15px padding
   and has to add that inset back itself. .mfd-scope is a plain child of the
   theme container and already inherits that inset, so repeating the padding
   here would indent the strip twice and leave it 30px narrower than Flow's.
   --------------------------------------------------------------------------- */
.mfd-scope{--panel:#131922;--card:#161b22;--sunk:#0d1520;--line:#2a313c;
  --text:#e6edf3;--mut:#9aa7b4;--dim:#6b7684;--accent:#16b3a0;--on:#16324a;
  font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  max-width:var(--container,1180px); margin:0 auto;
  padding:var(--mfd-top,10px) 0 0; box-sizing:border-box;}

/* .mfd-launch brings its own padding-bottom + rule; the 16px gap to whatever
   follows is set by the next block, matching .mfd-bar on the dashboard. */
.mfd-scope .mfd-launch{margin:0;}

/* Flow and Watchlist tighten the gap under the nav to 8px here (.mfd and
   .mfwl-wrap both hardcode it in the max-width:780px block above). Studio
   reads it from the token, so move the token to match rather than repeating
   the padding. */
@media (max-width:780px){ .mfd-scope{--mfd-top:8px} }

/* The pills are anchors on all three pages; without this they pick up the
   theme's underline outside the .mfd shell. */
a.mfd-pill,a.mfd-pill:hover,a.mfd-pill:focus{text-decoration:none;}


/* Portfolio Manager section (?section=portfolio). pm.css caps .pm-app at
   1100px; inside the dashboard it should track .mfd's own container width so
   the sections line up edge to edge. min-height matches .mfd (70vh) so
   switching sections does not collapse the page and bounce the footer up. */
.mfd-pm{margin-top:18px;min-height:70vh}
.mfd-pm .pm-app{max-width:none;width:100%;margin:0}
@media (max-width:860px){ .mfd-pm{min-height:0} }

/* Launch strip colours, identical on Flow, Watchlist, Studio and Portfolio
   Manager. The pills are <a>, so on Flow/Watchlist `.mfd a` (accent green)
   outranked .mfd-pill's grey; on Studio (.mfd-scope) it did not, hence the
   mismatch. The "?" is a <button> on Flow, where theme button styles turned it
   white, and an <a> elsewhere. Pin both to the Studio look. */
.mfd-launch a.mfd-pill{color:var(--mut);-webkit-text-fill-color:var(--mut)}
.mfd-launch a.mfd-pill:hover{color:var(--text);-webkit-text-fill-color:var(--text)}
/* Active section = solid teal, same accent as the page tabs (Overview /
   Forecast) so "selected" means one colour site-wide; the grouped container
   stays so the section nav still reads as primary, not as page tabs. */
.mfd-launch a.mfd-pill:hover{background:rgba(255,255,255,.05)}
.mfd-launch a.mfd-pill.is-on{background:var(--accent,#16b3a0);color:#fff;-webkit-text-fill-color:#fff}
.mfd-launch a.mfd-pill.is-on:hover{background:#13a090}
.mfd-launch .mfd-help{color:var(--mut) !important;-webkit-text-fill-color:var(--mut) !important;
  background:var(--panel) !important;font:700 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif !important}
.mfd-launch .mfd-help:hover{color:var(--text) !important;-webkit-text-fill-color:var(--text) !important}

/* Watchlist sits inside the theme's .container (already inset 15px to the
   logo), so its .mfd is capped at that content width; its own 15px side
   padding would then indent the launch strip a second time. Flow's .mfd has
   the full 1180px to centre in, so its padding lands exactly on the logo.
   Drop the side padding here and both strips share the logo's left and right
   edges. */
.csu-dashboard-container.mfd-wl>.mfd{padding-left:0;padding-right:0}