/* Wallet: when to convert, one card for any pair of currencies. Loaded by index.html.
   The range chips reuse .tab from balance.css. */

.fx-err{margin:0}
.fx-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:0 0 14px}
.fx-pick select{font:inherit;font-size:15px;font-weight:600;padding:9px 10px;min-width:0;
  border:1px solid var(--line-2);border-radius:10px;background:var(--sunk);color:var(--ink)}
.fx-swap{font:inherit;font-size:18px;line-height:1;width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--sunk);color:var(--ink-2);cursor:pointer}
.fx-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fx-now{font-family:var(--body);font-size:26px;
  font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fx-unit{font-size:13px;color:var(--ink-3)}
.fx-chg{font-family:var(--body);font-size:12px;
  font-weight:500;padding:3px 9px;border-radius:999px;margin-left:auto;
  background:var(--sunk);color:var(--ink-2)}
.fx-ranges{display:flex;gap:7px;margin:12px 0 14px}

.fx-chart{display:grid;grid-template-columns:1fr auto;gap:0 8px}
.fx-plot{position:relative;height:180px;touch-action:none;cursor:crosshair;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.fx-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.fx-area{fill:var(--accent-soft);stroke:none}
.fx-rule{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3);
  pointer-events:none}
.fx-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--accent);border:2px solid var(--card);
  pointer-events:none}
.fx-axis{display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--body);font-size:11px;
  color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
.fx-dates{grid-column:1;display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--body);font-size:11px;color:var(--ink-3)}
.fx-read{margin:12px 0 0;font-size:14px;color:var(--ink-2);min-height:1.5em}
.fx-verdict{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line-2);font-size:13px;line-height:1.45;color:var(--ink-3)}
.fx-tag{display:block;margin-bottom:2px;
  font-family:var(--display);font-size:20px;
  font-weight:800;letter-spacing:-.01em;color:var(--ink-2)}
.fx-tag.best,.fx-tag.good{color:var(--in)}
.fx-tag.wait{color:var(--out)}
/* the year's good line: today above it is a good day */
.fx-good{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed var(--in);pointer-events:none}
.fx-good span{position:absolute;left:4px;bottom:2px;font-size:10px;
  font-family:var(--body);text-transform:uppercase;
  letter-spacing:.08em;color:var(--in)}
/* the chart takes the verdict's colour: green on a good day, red on a wait */
[data-fx="good"] .fx-line{stroke:var(--in)}
[data-fx="good"] .fx-area{fill:var(--in-soft)}
[data-fx="good"] .fx-dot{background:var(--in)}
[data-fx="wait"] .fx-line{stroke:var(--out)}
[data-fx="wait"] .fx-area{fill:var(--out-soft)}
[data-fx="wait"] .fx-dot{background:var(--out)}
.fx-note{margin:0}

/* ===== net worth (wallet.js); its stack styles are the shared ones in style.css ===== */
.mn-total{font-family:var(--body);font-size:32px;line-height:1.15;margin:0 0 12px;
  font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mn-ranges{display:flex;gap:7px;margin:0 0 14px;flex-wrap:wrap}
.neg{color:var(--out)}

/* owned against owed: one bar, green for assets, red for debts */
.mn-split{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3)}
.mn-split b{display:block;font-family:var(--body);font-size:16px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.mn-split .owed{text-align:right}
.mn-split .owed b{color:var(--out)}
.mn-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:10px;
  background:var(--out-soft)}
.mn-bar span{background:var(--in)}

/* ===== the nudge over Requires Action on Alerts ===== */
.fx-alert{display:block;width:100%;text-align:left;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;color:var(--in);background:var(--in-soft);
  border:1px solid var(--in);border-radius:12px;padding:11px 14px}