/* Two currencies on the Budget (plans/TWO_CURRENCY_BUDGET_PLAN.md).
   Everything here appears only once a couple has a secondary currency set. */

/* The two-way currency toggle beside Budgeted or Actual: a quiet track with
   a pill that slides under the amount's currency. */
.budget-currency-toggle{
  position:relative;
  isolation:isolate;
  display:inline-grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  align-items:center;
  flex:none;
  width:max-content;
  padding:1px;
  border:1px solid var(--border);
  border-radius:999px;
  background:color-mix(in srgb, var(--ink) 5%, var(--surface));
  vertical-align:middle;
}
.budget-currency-toggle::before{
  content:"";
  position:absolute;
  z-index:0;
  top:1px;
  bottom:1px;
  left:1px;
  width:calc(50% - 1px);
  border-radius:999px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.budget-currency-toggle.is-secondary::before{transform:translateX(100%)}
.budget-currency-toggle button{
  position:relative;
  z-index:1;
  min-height:14px;
  margin:0;
  padding:0 7px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-muted);
  font:650 .6rem/1 var(--font-ui);
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  transition:color .16s ease, background-color .16s ease;
}
.budget-currency-toggle button[aria-pressed="true"]{color:var(--ink);cursor:default}
.budget-currency-toggle button[aria-pressed="false"]:hover{
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.budget-currency-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.budget-add-currency-toggle{margin-left:4px}
@media (pointer:coarse){
  .budget-currency-toggle button{min-height:22px;padding:0 10px;font-size:.7rem}
  /* A taller touch target than the pill shows. */
  .budget-currency-toggle button::after{content:"";position:absolute;inset:-6px 0}
}
@media (prefers-reduced-motion:reduce){
  .budget-currency-toggle::before,
  .budget-currency-toggle button{transition:none}
}
/* Desktop: the toggle appears on the row being worked on. Its space is kept,
   so nothing moves. Touch screens always show it. */
@media (hover:hover) and (pointer:fine){
  #section-budget .budget-currency-toggle{opacity:0;transition:opacity .18s ease}
  #section-budget [data-item]:is(:hover,:focus-within) .budget-currency-toggle{opacity:1}
}

/* In the table, the toggle sits on the label row. It comes last in the label,
   so the amount stays the label's control, and the grid lifts it up there. */
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field.has-currency-toggle{
  grid-template-columns:auto minmax(0,1fr);
  column-gap:8px;
}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field.has-currency-toggle > span:first-child{grid-row:1;grid-column:1;align-self:center}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field.has-currency-toggle > .budget-currency-toggle{grid-row:1;grid-column:2;justify-self:start}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field.has-currency-toggle > :is(.money-cell,.budget-hybrid-actual-line){grid-row:2;grid-column:1 / -1}
td.col-money > .budget-currency-toggle{margin-top:3px}

/* Every amount starts in the same place: a fixed slot for "≈", then the
   primary currency. */
.budget-currency-approx{
  /* A plain width, not a flex basis: Safari leaves a flex basis out of a
     button's natural width, and the amount would overflow it. */
  display:inline-block;
  flex:none;
  width:.95em;
  color:var(--ink-muted);
  font-size:.85rem;
  line-height:1;
}
/* An amount in the secondary currency: its primary figure (read-only), and
   the secondary amount beside it, which is the part to edit. */
.budget-currency-primary{
  /* Lines up with a typed amount, which starts after the input's 1px border. */
  padding-left:1px;
  color:var(--ink);
  font:500 .88rem/1.2 var(--font-ui);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.budget-currency-secondary{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  flex:none;
  margin-left:10px;
}
.budget-currency-secondary-pfx{
  color:var(--ink-muted);
  font:500 .74rem/1 var(--font-ui);
}
:where(#budgetTableWrap,#hmBgTableWrap) .money-cell .budget-currency-secondary .budget-currency-secondary-input{
  /* The measured text width, plus the input's 1px borders. */
  width:calc(var(--budget-money-input-width, 7ch) + 2px);
  flex:none;
  color:var(--ink-muted);
  font-size:.8rem;
}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field:is(:hover,:focus-within) .budget-currency-secondary-input{color:var(--ink)}
/* The box grows to hold both amounts. The status then wraps under it if the
   column is too narrow. */
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-field .money-cell.is-secondary-amount{width:auto;min-width:128px;justify-self:start}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-actual-line > .money-cell.is-secondary-amount{flex:0 0 auto}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-actual-line.is-over .budget-currency-primary{color:var(--danger);font-weight:700}
body.money-privacy-mode .budget-currency-secondary-pfx{display:none!important}
body.money-privacy-mode .budget-currency-secondary{position:relative}
body.money-privacy-mode .budget-currency-secondary::after{
  content:"••••";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink);
  font-weight:750;
  letter-spacing:.18em;
  pointer-events:none;
}

/* Split payments in the secondary currency (step 3): the item's total and
   each payment show the primary figure first, the secondary amount beside it. */
:where(#budgetTableWrap,#hmBgTableWrap) .budget-split-actual .budget-currency-secondary,
.budget-split-amount.is-secondary-amount .budget-currency-secondary{
  color:var(--ink-muted);
  font:500 .8rem/1.2 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
:where(#budgetTableWrap,#hmBgTableWrap) .budget-hybrid-payment-amount .budget-split-amount.is-secondary-amount{width:auto;gap:2px}
.budget-split-amount.is-secondary-amount .budget-currency-secondary{margin-left:8px}
/* A payment marked paid from a To-Do list, at today's estimate. */
.budget-payment-details-btn.needs-primary-check{color:var(--warning, var(--accent))}
.budget-hybrid-payment-amount > .budget-payment-details-btn{margin-top:2px}
/* The phone row's reminder that a payment's C$ amount is still to check. */
.budget-gridm-meta .budget-gridm-check{color:var(--warning, var(--accent));font-weight:650}
/* Phones show that button as an icon; the check keeps its words. */
.budget-mobile-payment-tools .budget-payment-details-btn.needs-primary-check span{display:inline}
/* The split editor: each payment's primary figure under its name. */
.budget-split-distribution-label [data-bsd-primary]{
  color:var(--ink-muted);
  font-size:.74rem;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* The switch-over prompt's amount fields, in the working hairline style
   (DESIGN.md, Inputs and fields): the field owns one line, with the currency
   on it. */
.budget-currency-switch-amount{
  display:flex;
  align-items:baseline;
  gap:5px;
  min-width:0;
  padding:6px 2px 5px;
  border-bottom:1px solid color-mix(in srgb, var(--ink-muted) 45%, var(--border));
  transition:border-color .16s ease, box-shadow .16s ease;
}
@media (prefers-reduced-motion:reduce){.budget-currency-switch-amount{transition:none}}
.budget-currency-switch-amount:hover{border-bottom-color:color-mix(in srgb, var(--accent) 55%, var(--border))}
.budget-currency-switch-amount:focus-within{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.budget-currency-switch-amount.has-error{border-bottom-color:var(--danger);box-shadow:0 1px 0 var(--danger)}
.budget-currency-switch-pfx{flex:none;color:var(--ink-muted);font:500 .9rem/1 var(--font-ui)}
.budget-currency-switch-dialog .budget-currency-switch-amount input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  outline:0;
  color:var(--ink);
  /* 16px, so phones don't zoom into the field. */
  font:500 1rem/1.3 var(--font-ui);
  font-variant-numeric:tabular-nums;
}
.budget-currency-switch-field{display:grid;gap:4px;margin:0 0 8px}
.budget-currency-switch-label{color:var(--ink);font:650 .9rem/1.3 var(--font-ui)}
.budget-currency-switch-label em{color:var(--ink-muted);font-style:normal;font-weight:500}
.budget-currency-switch-field .budget-currency-switch-amount{max-width:260px}

/* A split item: one row per payment (name, what it is now, its field), then
   the total. Rows are separated by space, not lines, so each field's hairline
   stays the only line near it. */
.budget-currency-switch-intro{margin:0 0 14px;color:var(--ink-muted);line-height:1.45}
.budget-currency-switch-table{display:grid;margin:0 0 14px}
.budget-currency-switch-head,
.budget-currency-switch-row,
.budget-currency-switch-total{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(88px,auto) minmax(150px,220px);
  grid-template-areas:"name now amount" ". . notes";
  column-gap:20px;
  align-items:baseline;
}
.budget-currency-switch-head{
  padding:0 0 7px;
  border-bottom:1px solid var(--border);
  color:var(--ink-muted);
  font:750 .6rem/1.2 var(--font-ui);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.budget-currency-switch-head > :nth-child(1){grid-area:name}
.budget-currency-switch-head > :nth-child(2){grid-area:now}
.budget-currency-switch-head > :nth-child(3){grid-area:amount}
.budget-currency-switch-row{padding:14px 0 4px}
.budget-currency-switch-name{grid-area:name;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0;color:var(--ink);font:600 .95rem/1.3 var(--font-ui)}
.budget-currency-switch-name strong{font-weight:inherit;overflow-wrap:anywhere}
.budget-currency-switch-status{
  padding:2px 7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--success) 12%, var(--surface));
  color:var(--success);
  font:700 .6rem/1.2 var(--font-ui);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.budget-currency-switch-now{grid-area:now;display:grid;gap:1px;font-variant-numeric:tabular-nums}
.budget-currency-switch-now strong{color:var(--ink);font:600 .92rem/1.3 var(--font-ui)}
.budget-currency-switch-now small{color:var(--ink-muted);font-size:.72rem}
.budget-currency-switch-row > .budget-currency-switch-amount{grid-area:amount}
.budget-currency-switch-notes{grid-area:notes;display:grid;gap:2px;min-height:1.1em;margin-top:4px;color:var(--ink-muted);font-size:.74rem;line-height:1.35;font-variant-numeric:tabular-nums}
.budget-currency-switch-notes:empty{display:none}
.budget-currency-switch-total{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.budget-currency-switch-total-amount{grid-area:amount;padding:0 2px;color:var(--ink);font:650 1rem/1.3 var(--font-ui);font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .budget-currency-switch-head{display:none}
  .budget-currency-switch-row,
  .budget-currency-switch-total{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name now" "amount amount" "notes notes";
    row-gap:6px;
  }
  .budget-currency-switch-now{justify-items:end;text-align:right}
  .budget-currency-switch-row{padding-top:16px}
}

/* Below the Budget stat cards when totals include estimates. It is added
   after the page has entered, so it skips the page-entrance stagger. */
.budget-currency-estimates-note{
  margin:-2px 0 12px;
  font-size:.78rem;
  line-height:1.35;
  color:var(--ink-muted);
  text-align:center;
}
.section.active > .budget-currency-estimates-note{animation:none}

/* A currency switch redraws the Budget so every group total is right. Like
   html.theme-booting in main.css, transitions stay off while the rebuilt
   rows settle, so the row under the pointer doesn't fade into its hover
   state (budgetQuietRender). */
#section-budget.budget-quiet-render *,
#section-budget.budget-quiet-render *::before,
#section-budget.budget-quiet-render *::after{transition:none !important}

/* The switch-over prompt. */
.budget-currency-switch-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px}
.budget-currency-switch-summary strong{font-variant-numeric:tabular-nums}
.budget-currency-switch-summary small{color:var(--ink-muted)}