/* Line popup (Accounting › Banks & cards, 2026-11-02). public/js/qb-line-popup.js. One centered popup for a bank or card register line;
   a bottom sheet on phone. WatchFlow's own look: Absans (var(--font-body)), navy #0f1822 + blue #2967b0, soft cards, theme tokens for
   surfaces (day + night). Icon-only buttons are circles. Inputs >= 16px. Nothing floats above it (z-index above every page layer). */
.wfl-ov { --wfl-navy: #0f1822; --wfl-blue: #2967b0; --wfl-blue-soft: rgba(41, 103, 176, .09); --wfl-green: #1d7a52; --wfl-green-soft: rgba(29, 122, 82, .10); --wfl-amber: #9a5b07; --wfl-amber-soft: rgba(165, 98, 11, .10);
  --wfl-line: var(--border, #d9dee5); --wfl-field: #eef2f7; --wfl-card: var(--bg-raised, #fff); --wfl-ink: var(--white, #0f1822); --wfl-sub: var(--off-white, #44505e);
  z-index: 100050; background: rgba(15, 24, 34, .48); padding: 24px; box-sizing: border-box; }
html[data-remodel-mode="night"] .wfl-ov { --wfl-navy: #e8eef6; --wfl-blue: #6ea2e0; --wfl-blue-soft: rgba(110, 162, 224, .13); --wfl-green: #4fbf8a; --wfl-green-soft: rgba(79, 191, 138, .13); --wfl-amber: #e0a24a; --wfl-amber-soft: rgba(224, 162, 74, .13); --wfl-field: var(--bg-void); }
html.wfl-lock, html.wfl-lock body { overflow: hidden; }
.wfl-ov .modal.wfl-pop { width: 700px; max-width: 100%; max-height: min(88dvh, 920px); padding: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--wfl-line); background: var(--bg-panel); box-shadow: 0 24px 70px rgba(15, 24, 34, .28); font-family: var(--font-body); color: var(--wfl-ink); }
.wfl-pop *, .wfl-pop *::before, .wfl-pop *::after { box-sizing: border-box; }
.wfl-pop button, .wfl-pop input, .wfl-pop select { font-family: var(--font-body); }

/* header */
.wfl-pop .wfl-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 18px; border-bottom: 1px solid var(--wfl-line); }
.wfl-pop .wfl-ic { width: 48px; height: 48px; min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; flex: 0 0 48px; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 0;
  background: var(--wfl-blue-soft); color: var(--wfl-blue); }
.wfl-pop .wfl-ic[data-kind="in"] { background: var(--wfl-green-soft); color: var(--wfl-green); }
.wfl-pop .wfl-ic[data-kind="transfer"], .wfl-pop .wfl-ic[data-kind="cardpay"] { background: var(--wfl-field); color: var(--wfl-sub); }
.wfl-pop .wfl-ic svg { width: 24px; height: 24px; }
.wfl-pop .wfl-head-main { flex: 1 1 auto; min-width: 0; }
.wfl-pop .wfl-t { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.wfl-pop .wfl-amt { color: var(--wfl-navy); font-variant-numeric: tabular-nums; }
.wfl-pop .wfl-amt.is-in { color: var(--wfl-green); }
.wfl-pop .wfl-meta { margin-top: 4px; font-size: 13.5px; color: var(--wfl-sub); overflow-wrap: anywhere; }
.wfl-pop .wfl-chip { flex: 0 0 auto; align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--wfl-field); color: var(--wfl-sub); }
.wfl-pop .wfl-chip[data-wf="in"] { background: var(--wfl-green-soft); color: var(--wfl-green); }
.wfl-pop .wfl-chip[data-wf="probable"] { background: var(--wfl-blue-soft); color: var(--wfl-blue); }
.wfl-pop .wfl-chip[data-wf="none"], .wfl-pop .wfl-chip[data-wf="record"] { background: var(--wfl-amber-soft); color: var(--wfl-amber); }
.wfl-pop .wfl-x, .wfl-pop .wfl-round { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; flex: 0 0 40px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 0; line-height: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--wfl-line); background: var(--bg-panel); color: var(--wfl-sub); cursor: pointer; }
.wfl-pop .wfl-x { align-self: flex-start; }
.wfl-pop .wfl-x svg, .wfl-pop .wfl-round svg { width: 18px; height: 18px; }
.wfl-pop .wfl-round[disabled] { opacity: .4; cursor: default; }
.wfl-pop .wfl-x:focus-visible, .wfl-pop .wfl-round:focus-visible, .wfl-pop .wfl-btn:focus-visible, .wfl-pop .wfl-link:focus-visible, .wfl-pop .wfl-n-btn:focus-visible, .wfl-pop .wfl-w:focus-visible { outline: 2px solid var(--wfl-blue); outline-offset: 2px; }

/* body */
.wfl-pop .wfl-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wfl-pop .wfl-loading { padding: 40px 0; text-align: center; color: var(--wfl-sub); font-size: 15px; }
.wfl-pop .wfl-card { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--wfl-line); border-radius: 14px; background: var(--wfl-card); }
.wfl-pop .wfl-lbl { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--wfl-sub); }
.wfl-pop .wfl-who { display: flex; align-items: center; gap: 12px; }
.wfl-pop .wfl-av { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; flex: 0 0 40px; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 0;
  background: var(--wfl-navy); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
html[data-remodel-mode="night"] .wfl-pop .wfl-av { color: #0f1822; }
.wfl-pop .wfl-who-main { flex: 1 1 auto; min-width: 0; }
.wfl-pop .wfl-who-n { margin-top: 2px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wfl-pop .wfl-who-s { margin-top: 2px; font-size: 13px; color: var(--wfl-sub); overflow-wrap: anywhere; }
.wfl-pop .wfl-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--wfl-line); font-size: 11.5px; font-weight: 500; color: var(--wfl-sub); }
.wfl-pop .wfl-link { flex: 0 0 auto; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--wfl-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.wfl-pop .wfl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 10px 0 0; }
.wfl-pop .wfl-dl div { min-width: 0; }
.wfl-pop .wfl-dl dt { font-size: 12px; color: var(--wfl-sub); }
.wfl-pop .wfl-dl dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.wfl-pop .wfl-says { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.wfl-pop .wfl-raw-t { margin-top: 6px; padding-left: 0; }
.wfl-pop .wfl-raw { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wfl-field); font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--wfl-sub); white-space: pre-wrap; overflow-wrap: anywhere; }

/* transfer: a friendly compact state */
.wfl-pop .wfl-transfer { padding: 18px; }
.wfl-pop .wfl-tr-t { font-size: 15px; font-weight: 600; }
.wfl-pop .wfl-tr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.wfl-pop .wfl-acct { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--wfl-field); font-size: 14px; font-weight: 600; max-width: 100%; }
.wfl-pop .wfl-acct span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfl-pop .wfl-acct svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--wfl-blue); }
.wfl-pop .wfl-tr-arrow { color: var(--wfl-sub); font-size: 18px; }
.wfl-pop .wfl-tr-memo { margin-top: 12px; font-size: 13px; color: var(--wfl-sub); overflow-wrap: anywhere; }

/* In WatchFlow */
.wfl-pop .wfl-sec { margin: 18px 0 0; }
.wfl-pop .wfl-h { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.wfl-pop .wfl-why { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--wfl-sub); }
.wfl-pop .wfl-empty { padding: 16px; border: 1px dashed var(--wfl-line); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--wfl-sub); text-align: center; }
.wfl-pop .wfl-muted { font-size: 12.5px; color: var(--wfl-sub); font-weight: 400; }

/* the journey: nodes joined by a connector line */
.wfl-pop .wfl-journey { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.wfl-pop .wfl-node { position: relative; padding: 0 0 12px 0; }
.wfl-pop .wfl-node:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--wfl-blue); opacity: .35; }
.wfl-pop .wfl-node.is-missing:not(:last-child)::after, .wfl-pop .wfl-node:has(+ .wfl-node.is-missing)::after { background: none; border-left: 2px dashed var(--wfl-line); opacity: 1; }
.wfl-pop .wfl-n-btn { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--wfl-line); border-radius: 14px; background: var(--wfl-card); color: inherit; text-align: left; cursor: pointer; }
.wfl-pop .wfl-n-btn.is-static { cursor: default; }
.wfl-pop .wfl-n-btn:not(.is-static):hover { border-color: var(--wfl-blue); }
.wfl-pop .wfl-node.is-missing .wfl-n-btn { border-style: dashed; background: transparent; }
.wfl-pop .wfl-n-ic { width: 28px; height: 28px; min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; flex: 0 0 28px; aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 0; background: var(--wfl-blue-soft); color: var(--wfl-blue); }
.wfl-pop .wfl-node.is-missing .wfl-n-ic { background: var(--wfl-field); color: var(--wfl-sub); }
.wfl-pop .wfl-n-ic svg { width: 16px; height: 16px; }
.wfl-pop .wfl-n-b { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wfl-pop .wfl-n-t { font-size: 14.5px; font-weight: 600; }
.wfl-pop .wfl-n-s { font-size: 13px; color: var(--wfl-sub); overflow-wrap: anywhere; }
.wfl-pop .wfl-n-f { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.wfl-pop .wfl-n-f i { font-style: normal; color: var(--wfl-sub); }
.wfl-pop .wfl-n-miss { display: none; }
.wfl-pop .wfl-n-act { margin: 8px 0 0 54px; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--wfl-blue); border-radius: 999px; background: transparent; color: var(--wfl-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.wfl-pop .wfl-n-ws { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.wfl-pop .wfl-w { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid var(--wfl-line); border-radius: 14px; background: var(--wfl-card); color: inherit; text-align: left; cursor: pointer; }
.wfl-pop .wfl-w:hover { border-color: var(--wfl-blue); }
.wfl-pop .wfl-w-img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; object-fit: cover; background: var(--wfl-field); display: flex; align-items: center; justify-content: center; color: var(--wfl-sub); }
.wfl-pop .wfl-w-img svg { width: 22px; height: 22px; }
.wfl-pop .wfl-w-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.wfl-pop .wfl-w-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfl-pop .wfl-w-t span { font-size: 12.5px; color: var(--wfl-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* suggestions */
.wfl-pop .wfl-sug-h { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; font-size: 14px; font-weight: 700; }
.wfl-pop .wfl-sug-h svg { width: 18px; height: 18px; color: var(--wfl-blue); }
.wfl-pop .wfl-sug-h.is-sub { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--wfl-sub); text-transform: uppercase; letter-spacing: .8px; }
.wfl-pop .wfl-sug { margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--wfl-line); border-radius: 14px; background: var(--wfl-card); }
.wfl-pop .wfl-sug[data-conf="strong"] { border-color: color-mix(in srgb, var(--wfl-green) 45%, var(--wfl-line)); }
.wfl-pop .wfl-sug.is-needs { border-style: dashed; background: transparent; }
.wfl-pop .wfl-sug-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wfl-pop .wfl-conf { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--wfl-field); color: var(--wfl-sub); }
.wfl-pop .wfl-conf[data-conf="strong"] { background: var(--wfl-green-soft); color: var(--wfl-green); }
.wfl-pop .wfl-conf[data-conf="likely"] { background: var(--wfl-blue-soft); color: var(--wfl-blue); }
.wfl-pop .wfl-conf[data-conf="needs"] { background: var(--wfl-amber-soft); color: var(--wfl-amber); }
.wfl-pop .wfl-sug-t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.wfl-pop .wfl-sug-amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wfl-pop .wfl-sug-s { margin-top: 4px; font-size: 13px; color: var(--wfl-sub); overflow-wrap: anywhere; }
.wfl-pop .wfl-sug-why { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.wfl-pop .wfl-sug-ws { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.wfl-pop .wfl-sug-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }

/* panels (match / expense / ignore) */
.wfl-pop .wfl-panel { padding: 16px; border-radius: 14px; background: var(--wfl-field); }
html[data-remodel-mode="night"] .wfl-pop .wfl-panel { background: var(--bg-raised); }
.wfl-pop .wfl-cands { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.wfl-pop .wfl-cand { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--wfl-line); border-radius: 12px; background: var(--bg-panel); cursor: pointer; }
.wfl-pop .wfl-cand.is-on { border-color: var(--wfl-blue); }
.wfl-pop .wfl-cand input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--wfl-blue); }
.wfl-pop .wfl-cand > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wfl-pop .wfl-cand b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.wfl-pop .wfl-cand > span > span { font-size: 12.5px; color: var(--wfl-sub); overflow-wrap: anywhere; }
.wfl-pop .wfl-cand em { font-style: normal; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wfl-pop .wfl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wfl-pop .wfl-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: var(--wfl-sub); }
.wfl-pop .wfl-fld.is-wide { grid-column: 1 / -1; }
.wfl-pop .wfl-fld input, .wfl-pop .wfl-fld select { width: 100%; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-void); color: var(--wfl-ink); font-size: 16px; letter-spacing: 0; text-transform: none; }
.wfl-pop .wfl-fld input:focus, .wfl-pop .wfl-fld select:focus { outline: none; border-color: var(--wfl-blue); box-shadow: 0 0 0 3px var(--wfl-blue-soft); }

/* history */
.wfl-pop .wfl-hist { margin-bottom: 14px; }
.wfl-pop .wfl-hist-t { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; border-top: 1px solid var(--wfl-line); background: none; color: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
.wfl-pop .wfl-hist-t > svg { width: 18px; height: 18px; color: var(--wfl-sub); }
.wfl-pop .wfl-chev { margin-left: auto; display: flex; line-height: 0; color: var(--wfl-sub); transition: transform .15s ease; }
.wfl-pop .wfl-chev svg { width: 18px; height: 18px; }
.wfl-pop .wfl-chev.is-open { transform: rotate(180deg); }
.wfl-pop .wfl-hist-l { list-style: none; margin: 6px 0 0; padding: 0; }
.wfl-pop .wfl-hist-l li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--wfl-line); }
.wfl-pop .wfl-hist-l li:last-child { border-bottom: 0; }
.wfl-pop .wfl-hist-l li.is-undone .wfl-hist-e b { text-decoration: line-through; color: var(--wfl-sub); }
.wfl-pop .wfl-hist-dot { width: 10px; height: 10px; min-width: 10px; flex: 0 0 10px; margin-top: 6px; border-radius: 50%; background: var(--wfl-blue); }
.wfl-pop .wfl-hist-dot[data-ev="undo"], .wfl-pop .wfl-hist-dot[data-ev="alias_weakened"], .wfl-pop .wfl-hist-dot[data-ev="alias_retired"] { background: var(--wfl-amber); }
.wfl-pop .wfl-hist-dot[data-ev="confirm"], .wfl-pop .wfl-hist-dot[data-ev="match"], .wfl-pop .wfl-hist-dot[data-ev="link_open"] { background: var(--wfl-green); }
.wfl-pop .wfl-hist-dot[data-ev="shown"], .wfl-pop .wfl-hist-dot[data-ev="suggested"], .wfl-pop .wfl-hist-dot[data-ev="auto_nothing"] { background: var(--wfl-line); }
.wfl-pop .wfl-hist-e { font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wfl-pop .wfl-hist-s { margin-top: 2px; font-size: 12.5px; color: var(--wfl-sub); overflow-wrap: anywhere; }

/* footer */
.wfl-pop .wfl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--wfl-line); background: var(--bg-panel); }
.wfl-pop .wfl-nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wfl-pop .wfl-acts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.wfl-pop .wfl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--wfl-blue); border-radius: 999px; background: transparent; color: var(--wfl-blue); font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wfl-pop .wfl-btn.is-primary { background: var(--wfl-blue); color: #fff; }
html[data-remodel-mode="night"] .wfl-pop .wfl-btn.is-primary { color: #0f1822; }
.wfl-pop .wfl-btn.is-quiet { border-color: var(--wfl-line); color: var(--wfl-sub); }
.wfl-pop .wfl-btn[disabled] { opacity: .5; cursor: default; }

/* phone: a bottom sheet with the same sections */
@media (max-width: 640px) {
  .wfl-ov { padding: 0; align-items: flex-end; }
  .wfl-ov .modal.wfl-pop { width: 100%; max-width: 100vw; max-height: 92dvh; border-radius: 20px 20px 0 0; border-bottom: 0; }
  /* a fixed grid: icon | amount + meta | close, the status chip under the amount (nothing can wrap the close button away) */
  .wfl-pop .wfl-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: 12px; row-gap: 8px; align-items: start; padding: 16px 16px 14px; }
  .wfl-pop .wfl-head > .wfl-ic { grid-column: 1; grid-row: 1; }
  .wfl-pop .wfl-head > .wfl-head-main { grid-column: 2; grid-row: 1; }
  .wfl-pop .wfl-head > .wfl-x { grid-column: 3; grid-row: 1; }
  .wfl-pop .wfl-head > .wfl-chip { grid-column: 2; grid-row: 2; justify-self: start; margin: 0; }
  .wfl-pop .wfl-ic { width: 40px; height: 40px; min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; flex: 0 0 40px; }
  .wfl-pop .wfl-ic svg { width: 20px; height: 20px; }
  .wfl-pop .wfl-t { font-size: 24px; }
  .wfl-pop .wfl-tr-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wfl-pop .wfl-who { flex-wrap: wrap; align-items: flex-start; }
  .wfl-pop .wfl-who .wfl-who-main { flex: 1 1 calc(100% - 52px); }
  .wfl-pop .wfl-who .wfl-link { margin-left: 52px; padding-left: 0; }
  .wfl-pop .wfl-tr-arrow { transform: rotate(90deg); margin-left: 18px; }
  .wfl-pop .wfl-body { padding: 14px 16px 6px; }
  .wfl-pop .wfl-dl, .wfl-pop .wfl-grid { grid-template-columns: minmax(0, 1fr); }
  .wfl-pop .wfl-n-ws, .wfl-pop .wfl-sug-ws { grid-template-columns: minmax(0, 1fr); }
  .wfl-pop .wfl-n-act { margin-left: 0; width: 100%; }
  .wfl-pop .wfl-foot { flex-direction: column-reverse; align-items: stretch; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .wfl-pop .wfl-acts { justify-content: stretch; }
  .wfl-pop .wfl-acts .wfl-btn { flex: 1 1 auto; }
  .wfl-pop .wfl-acts .wfl-done { display: none; }
  .wfl-pop .wfl-nav { justify-content: center; }
}