/* Finance calculators: small layout additions on top of the tool UI kit. */
.fin { display: grid; gap: 18px; }
.fin-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.fin-cur { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.tool-ui .fin-cur select { width: auto; min-height: 38px; padding: 6px 34px 6px 12px; font-size: 0.9rem; font-weight: 600; }
.fin-split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fin-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.fin-out { display: grid; gap: 14px; transition: opacity 0.15s; }
.is-stale { opacity: 0.38; }
.fin-h { margin: 0; font-size: 1rem; }
.fin .field { align-content: start; }
.fin .stat-value { font-size: 1.2rem; }
.fin .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fin .stats > .fin-span { grid-column: 1 / -1; }
.fin .result-box .big.fin-pos, .fin .stat-value.fin-pos { color: var(--ok); }
.fin .result-box .big.fin-neg, .fin .stat-value.fin-neg { color: var(--err); }
.fin [aria-invalid='true'] { border-color: var(--err) !important; }
.fin .seg { max-width: 100%; }

/* Input groups with a unit select at the end, or an input between two addons. */
.tool-ui .fin .input-group select.fin-unit { width: auto; flex: 0 0 auto; padding-left: 12px; background-color: var(--glass-soft); font-weight: 600; }
.fin .input-group > :not(:first-child):not(:last-child) { border-radius: 0 !important; margin-left: -1px; }
.fin.fin-nosym [data-cur-sym] { display: none; }
.fin.fin-nosym .input-group > [data-cur-sym] + input { border-top-left-radius: var(--r) !important; border-bottom-left-radius: var(--r) !important; margin-left: 0; }

/* People stepper (tip calculator). */
.fin-stepper { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 6px; }
.fin-stepper .btn { padding: 0; min-height: 44px; font-size: 1.2rem; }
.tool-ui .fin-stepper input { text-align: center; }

/* Schedules: scroll inside the box with a sticky header. */
.fin-sched { max-height: 440px; overflow: auto; }
.fin-sched table.data { font-size: 0.88rem; }
.fin-sched th, .fin-sched td { white-space: nowrap; padding: 8px 12px; }
.fin-sched thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(var(--glass-soft), var(--glass-soft)), var(--bg); }
.fin table.data tr.fin-hl td { background: var(--accent-soft); font-weight: 700; }
.fin-chart { min-height: 120px; }
.fin-chart svg { overflow: visible; }
/* Long forms (zakat) keep the results in view while you fill them in. */
@media (min-width: 900px) { .fin-sticky { position: sticky; top: calc(var(--header-h, 64px) + 16px); } }
/* Pairs that stay side by side on phones (linked down payment, weight + purity...). */
.fin .grid-2.fin-keep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  /* Mode switches fill the width in equal columns; long labels wrap inside their button. */
  .fin-head .seg, .fin .seg.fin-fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 22px; }
  .fin-head .seg button, .fin .seg.fin-fill button { white-space: normal; line-height: 1.2; padding: 8px 6px; }
  .fin-head > .row { width: 100%; }
  .fin .seg.fin-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 22px; }
  .fin .seg button { padding: 7px 9px; font-size: 0.84rem; }
  .fin-sched th, .fin-sched td { padding: 7px 9px; }
  .fin .stat { padding: 12px 8px; }
  .fin .stat-value { font-size: 1.05rem; }
}