/* Shared tool chrome: header and footer used by every tool page.
   Header: white brand bar with the Flows Made Easy logo and breadcrumb above the tool title,
   a privacy shield that opens a popover, and Share / More tools. Each tool sets --fme-accent on .fme-hdr.
   Load after the tool's own stylesheet so these rules win over its older header styles. */
.fme-hdr { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:12px 24px; background:#fff; border-bottom:3px solid var(--fme-accent, #1d4ed8); color:#0f172a; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.fme-brand { display:flex; flex:1; align-items:center; gap:14px; min-width:0; }
.fme-brand-text { min-width:0; }
.fme-mark { display:block; flex:none; width:44px; height:44px; border-radius:11px; overflow:hidden; box-shadow:0 2px 6px rgba(15,23,42,.18); }
.fme-mark img { display:block; width:100%; height:100%; }
.fme-crumb { display:inline-flex; align-items:center; gap:6px; margin-bottom:1px; font-size:13px; font-weight:500; line-height:1.4; color:#475569; text-decoration:none; vertical-align:middle; } /* middle: the logo would otherwise set the line's baseline */
.fme-crumb:has(+ .fme-crumb)::after { content:"\203A"; font-size:15px; line-height:1; color:#94a3b8; } /* a separator between crumbs, not after the last */
.fme-crumb + .fme-crumb { margin-left:6px; }
.fme-crumb:hover { color:#0f172a; text-decoration:underline; text-underline-offset:3px; }
.fme-crumb:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:2px; border-radius:4px; }
.fme-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.fme-hdr h1 { margin:0; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:#0f172a; }
/* One line under the title saying what the tool does; trimmed with an ellipsis when space runs out. */
.fme-tagline { margin:2px 0 0; overflow:hidden; color:#475569; font-size:14px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.fme-pill { display:inline-flex; align-items:center; border-radius:999px; padding:2px 9px; background:var(--fme-accent, #1d4ed8); color:#fff; font-size:12px; font-weight:700; line-height:1.5; text-decoration:none; white-space:nowrap; }
a.fme-pill:hover { filter:brightness(1.1); text-decoration:underline; }
.fme-pill:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:2px; }
/* Tool pages: the tool's own icon (as on the home page) leads, unframed, and a small site logo moves into the crumb.
   The title block steps up a size to match. */
.fme-mark-tool { width:72px; height:72px; padding:0; border:0; border-radius:0; background:transparent; overflow:visible; box-shadow:none; }
.fme-mark-tool img { object-fit:contain; }
.fme-mark-round img { border-radius:22%; } /* icons drawn as a square-cornered tile */
.fme-crumb-logo { display:block; flex:none; width:20px; height:20px; border-radius:5px; }
.fme-brand:has(.fme-mark-tool) { gap:18px; }
.fme-brand:has(.fme-mark-tool) .fme-crumb { margin-bottom:4px; font-size:14px; }
.fme-brand:has(.fme-mark-tool) .fme-title-row { gap:4px 12px; }
.fme-brand:has(.fme-mark-tool) h1 { font-size:28px; }
.fme-brand:has(.fme-mark-tool) .fme-tagline { font-size:15px; }
.fme-brand:has(.fme-mark-tool) .fme-pill { padding:3px 11px; font-size:13px; }
.fme-actions { display:flex; flex:none; align-items:center; gap:8px; margin-left:auto; }
.fme-action { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; color:#334155; font:inherit; font-size:13px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; }
.fme-action:hover { border-color:#cbd5e1; background:#f8fafc; color:#0f172a; }
.fme-action:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:2px; }
.fme-action svg { flex:none; width:16px; height:16px; }
.fme-trust-wrap { position:relative; margin-right:4px; }
.fme-trust { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 8px; border:0; border-radius:8px; background:none; color:#047857; font:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.fme-trust:hover, .fme-trust[aria-expanded="true"] { background:#ecfdf5; }
.fme-trust:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:2px; }
.fme-trust svg { flex:none; }
.fme-trust-text { color:#475569; white-space:nowrap; }
.fme-pop { position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:290px; max-width:calc(100vw - 32px); padding:14px 16px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.15); color:#334155; font-size:13px; font-weight:400; line-height:1.4; text-align:left; }
.fme-pop[hidden] { display:none; }
.fme-pop-title { margin:0 0 8px; font-weight:700; color:#0f172a; }
.fme-pop ul { margin:0; padding:0; list-style:none; }
.fme-pop li { position:relative; padding-left:22px; }
.fme-pop li + li { margin-top:6px; }
.fme-pop li::before { content:"\2713"; position:absolute; left:2px; color:#047857; font-weight:700; }
.fme-pop a { display:inline-block; margin-top:12px; color:var(--fme-accent, #1d4ed8); font-weight:600; text-decoration:none; }
.fme-pop a:hover { text-decoration:underline; text-underline-offset:3px; }
/* One-time phone tip under a tool's toolbar; fme-site.js shows it until dismissed. */
.fme-hint { display:flex; align-items:flex-start; gap:10px; margin:0; padding:8px 14px; border-top:1px solid #e2e8f0; background:#f0f9ff; color:#0c4a6e; font-size:13px; line-height:1.4; }
.fme-hint[hidden] { display:none; }
.fme-hint span { flex:1; }
.fme-hint-close { flex:none; width:28px; height:28px; margin:-4px -6px -4px 0; border:0; border-radius:6px; background:none; color:#0c4a6e; font-size:14px; cursor:pointer; }
.fme-hint-close:hover { background:#e0f2fe; }
.fme-hint-close:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:1px; }
/* Share feedback when the button label is hidden (icon-only on phones). */
.fme-toast { position:fixed; left:50%; bottom:24px; z-index:100; max-width:calc(100% - 32px); padding:10px 16px; border-radius:10px; background:#0f172a; color:#fff; box-shadow:0 8px 24px rgba(15,23,42,.25); font:500 14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; opacity:0; pointer-events:none; transform:translate(-50%, 8px); transition:opacity .2s, transform .2s; }
.fme-toast.show { opacity:1; transform:translate(-50%, 0); }
.fme-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1100px) {
  .fme-trust-text { display:none; }
  .fme-hdr h1 { font-size:20px; }
  .fme-tagline { font-size:13px; }
  .fme-mark-tool { width:60px; height:60px; }
  .fme-brand:has(.fme-mark-tool) h1 { font-size:22px; }
  .fme-brand:has(.fme-mark-tool) .fme-tagline { font-size:14px; }
}
@media (max-width:700px) {
  .fme-hdr { gap:10px; padding:10px 14px; }
  .fme-brand { gap:10px; }
  .fme-mark { width:36px; height:36px; border-radius:9px; }
  .fme-crumb { font-size:12px; }
  .fme-hdr h1 { font-size:18px; }
  .fme-tagline { display:-webkit-box; font-size:12px; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .fme-h1-drop, .fme-pill { display:none; } /* the platform prefix stays: it says which product the tool is for */
  .fme-hdr h1 { text-wrap:balance; }
  .fme-crumb:has(+ .fme-crumb):not(:has(.fme-crumb-logo)) { display:none; } /* two-level crumbs: the logo already links home */
  .fme-crumb:has(+ .fme-crumb) span { display:none; } /* tool pages: keep the small logo as the home link */
  .fme-mark-tool { width:44px; height:44px; }
  .fme-crumb-logo { width:16px; height:16px; border-radius:4px; }
  .fme-brand:has(.fme-mark-tool) { gap:10px; }
  .fme-brand:has(.fme-mark-tool) .fme-crumb { font-size:12px; }
  .fme-brand:has(.fme-mark-tool) h1 { font-size:18px; }
  .fme-brand:has(.fme-mark-tool) .fme-tagline { font-size:12px; }
  .fme-crumb + .fme-crumb { margin-left:0; }
  .fme-crumb:has(.fme-crumb-logo) + .fme-crumb { margin-left:6px; }
  /* A long tool name stays on the logo's line, shortened with an ellipsis; the tagline below repeats it in full. */
  .fme-crumb + .fme-crumb { display:inline-block; max-width:calc(100% - 44px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
  .fme-actions { gap:6px; }
  .fme-trust-wrap { margin-right:0; }
  .fme-trust { width:36px; height:36px; padding:0; justify-content:center; }
  .fme-action { width:36px; height:36px; padding:0; justify-content:center; }
  .fme-action span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

/* Opt-in dark header, as on HTML Table Styler: add .fme-hdr-dark next to .fme-hdr. Brand navy by default; a tool can
   set --fme-hdr-bg to a deep shade of its own accent, and --fme-hdr-line to a brighter one when the accent divider gets lost against it. Colours only; the accent stays on the divider and pill.
   Secondary text is translucent white so it reads on any dark background, focus rings are light violet,
   and the small site logo sits on a white tile so the dark icon doesn't disappear. */
.fme-hdr.fme-hdr-dark { --fme-focus:#c4b5fd; background:var(--fme-hdr-bg, #172a55); border-bottom-color:var(--fme-hdr-line, var(--fme-accent, #1d4ed8)); color:#f8fafc; }
.fme-hdr-dark h1 { color:#fff; }
.fme-hdr-dark .fme-tagline { color:rgba(255,255,255,.8); }
.fme-hdr-dark .fme-crumb { color:rgba(255,255,255,.8); }
.fme-hdr-dark .fme-crumb:has(+ .fme-crumb)::after { color:rgba(255,255,255,.55); }
.fme-hdr-dark .fme-crumb:hover { color:#fff; }
.fme-hdr-dark .fme-crumb-logo { padding:1px; background:#fff; }
.fme-hdr-dark .fme-pill { box-shadow:inset 0 0 0 1px rgba(196,181,253,.55); }
.fme-hdr-dark .fme-trust { color:#34d399; }
.fme-hdr-dark .fme-trust:hover, .fme-hdr-dark .fme-trust[aria-expanded="true"] { background:rgba(255,255,255,.08); }
.fme-hdr-dark .fme-trust-text { color:rgba(255,255,255,.8); }
.fme-hdr-dark .fme-action { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#e2e8f0; }
.fme-hdr-dark .fme-action:hover { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; }
/* Thin white ring around a card-style tool icon (tile at 18–126 of 144, rx 30) so it stands out on a dark header of the same hue.
   Icons drawn differently set --fme-ring-inset and --fme-ring-radius to match their tile. */
.fme-hdr-dark .fme-mark-ring { position:relative; }
.fme-hdr-dark .fme-mark-ring::after { content:""; position:absolute; inset:var(--fme-ring-inset, 12.5%); border:1.5px solid rgba(255,255,255,.6); border-radius:var(--fme-ring-radius, 27.8%); pointer-events:none; }
/* Tileless icons (a glyph on transparency) sit on a white tile the size and shape of the card icons' tiles,
   so dark-coloured glyphs stay legible. Percentages resolve against the mark's width. */
.fme-hdr-dark .fme-mark-tile img { box-sizing:border-box; width:75%; height:75%; margin:12.5%; padding:9%; border-radius:27.8%; background:#fff; }
.fme-hdr-dark .fme-crumb:focus-visible, .fme-hdr-dark .fme-pill:focus-visible, .fme-hdr-dark .fme-trust:focus-visible, .fme-hdr-dark .fme-action:focus-visible { outline-color:var(--fme-focus); }

/* Tree tools' floating "About & FAQs" cue, hidden by fme-site.js once its section is on screen. */
.about-cue.fme-cue-off { opacity:0; visibility:hidden; pointer-events:none; }
/* Narrow tree view: zoom controls become a slim bar at the bottom right so they don't cover the nodes,
   and the cue moves to the bottom left to make room. */
@media (max-width:700px) {
  #controls { top:auto; right:12px; bottom:12px; left:auto; flex-direction:row; align-items:center; width:auto; gap:2px; padding:4px; }
  #controls button { width:36px; height:36px; padding:0; }
  #controls hr { width:0; height:24px; margin:0 2px; border:0; border-left:1px solid #e2e8f0; }
  #controls #zoom-level, #controls #zoom-level + hr { display:none; }
  #app:not(.cards-view) .about-cue { left:12px; transform:none; }
}

/* Footer: mirrors the header (light, tool accent along the top edge). Brand and socials, a "This tool"
   column that differs per tool, the shared Flows Made Easy links, then the small print and attribution. */
.fme-foot { flex:none; margin:0; border-top:3px solid var(--fme-accent, #1d4ed8); background:#f8fafc; color:#475569; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; line-height:1.5; text-align:left; }
support-card + .fme-foot { margin-top:32px; }
.fme-foot-in { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:32px; max-width:1200px; margin:0 auto; padding:40px 24px 28px; }
.fme-foot-logo { display:inline-flex; align-items:center; gap:10px; color:#0f172a; font-size:16px; text-decoration:none; }
.fme-foot-logo img { display:block; width:36px; height:36px; border-radius:9px; }
.fme-foot-logo b { font-weight:700; }
.fme-foot-logo:hover span { text-decoration:underline; text-underline-offset:3px; }
.fme-foot-tag { max-width:320px; margin:12px 0 0; }
.fme-foot-social { display:flex; gap:16px; margin-top:16px; }
.fme-foot-social a { display:block; color:#64748b; }
.fme-foot-social a:hover { color:var(--fme-accent, #1d4ed8); }
.fme-foot-social svg { display:block; width:20px; height:20px; }
.fme-foot-h { margin:0 0 12px; color:#0f172a; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fme-foot ul { margin:0; padding:0; list-style:none; }
.fme-foot li { margin:0; }
.fme-foot li + li { margin-top:8px; }
.fme-foot-col a, .fme-foot-col button { padding:0; border:0; background:none; color:#475569; font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.fme-foot-col a:hover, .fme-foot-col button:hover { color:var(--fme-accent, #1d4ed8); text-decoration:underline; text-underline-offset:3px; }
.fme-foot a:focus-visible, .fme-foot button:focus-visible { outline:2px solid var(--fme-accent, #1d4ed8); outline-offset:2px; border-radius:3px; }
.fme-ext::after { content:" \2197"; font-size:.85em; }
.fme-foot-legal { max-width:1200px; margin:0 auto; padding:0 24px 28px; color:#64748b; font-size:12px; }
.fme-foot-legal-in { padding-top:18px; border-top:1px solid #e2e8f0; }
.fme-foot-legal p { margin:0; }
.fme-foot-legal p + p { margin-top:6px; }
.fme-foot-legal a { color:#475569; text-decoration:underline; text-underline-offset:2px; }
.fme-foot-legal a:hover { color:var(--fme-accent, #1d4ed8); }
@media (max-width:700px) {
  .fme-foot-in { grid-template-columns:1fr 1fr; gap:28px 16px; padding:32px 16px 24px; }
  .fme-foot-brand { grid-column:1 / -1; }
  .fme-foot-legal { padding:0 16px 24px; }
}