/* ===== SHARED MAILBOX FORWARDING FLOW =====

   Post-specific component. Loaded only by posts that name it in front matter
   (`extra_css: ["mailbox-forward-flow.css"]`) — see the "head" block in
   layouts/_default/single.html. Markup lives in
   layouts/shortcodes/mailbox-forward-flow.html.

   Everything is namespaced under .mfflow so none of it reaches the rest of
   .post-content. No new colors: nodes are --surface on --border like every
   other panel on the site, and the one node the post is actually about (the
   shared mailbox) takes --blue, matching how .qflow marks its decision node.

   Unlike quarantine-flow.css this does NOT break out of the 720px prose
   column. The SVG scales to whatever width it is given, so the diagram stays
   in the text measure and just gets smaller — no gutter math needed. */

.mfflow {
  margin: 32px 0 36px;
}

/* ---- wide: SVG ---- */
.mfflow__wide {
  display: block;
  width: 100%;
  height: auto;
}

.mfflow .mf-node {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.5;
}
.mfflow .mf-node--focus {
  stroke: var(--blue);
  fill: rgba(90, 200, 250, 0.05);
}

.mfflow .mf-line {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
}
.mfflow .mf-arrow { fill: var(--border); }

.mfflow .mf-node-label {
  fill: var(--text-bright);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  text-anchor: middle;
}
.mfflow .mf-node-label--focus { fill: var(--blue); }

.mfflow .mf-link-label {
  fill: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
}

/* ---- narrow: stacked divs ----
   900px is where the five nodes stop fitting side by side at a legible label
   size. Below it the SVG is swapped out entirely rather than scaled down
   further, so the text never shrinks below the site's own minimum. */
.mfflow__stack { display: none; }

@media (max-width: 900px) {
  .mfflow__wide { display: none; }

  .mfflow__stack {
    display: flex;
    flex-direction: column;
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .mfflow .mf-card {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-bright);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
  }
  .mfflow .mf-card--focus {
    border-color: var(--blue);
    background: rgba(90, 200, 250, 0.05);
    color: var(--blue);
  }

  /* Same drawn connector as .qflow: a rule with a CSS-triangle arrowhead
     pinned to its bottom edge, and the edge label parked beside it. */
  .mfflow .mf-conn {
    position: relative;
    flex: none;
    width: 2px;
    height: 46px;
    margin: 0 auto;
    background: var(--border);
  }
  .mfflow .mf-conn::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--border);
  }
  .mfflow .mf-conn span {
    position: absolute;
    top: 50%;
    left: 14px;
    width: max-content;
    max-width: 150px;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .mfflow .mf-recipients {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .mfflow .mf-recipients { grid-template-columns: 1fr; }
}