/* ============================================================================
   screens/finance.css - Uang, the money module
   ----------------------------------------------------------------------------
   Nine panels behind one tab strip: the day's cash position, the message box
   that turns a sentence into a journal entry, money in, money out, invoices,
   the bank statement, the reports, accountant mode, and setup.

   WHAT THIS FILE DOES NOT DO. Everything shared with other screens comes from
   the files above it and is not restated here:

     .panel .card .tbar          components.css (surfaces and the toolbar row)
     .bdg .tag .pill .dot .av    components.css (status and identity atoms)
     .btn .mini-btn .fchip       components.css (controls)
     .note .mono .muted .empty   components.css (text roles and the empty state)
     .ui-dt .ui-table .ui-pager  components.css (the data table and the pager)
     .ui-fb .ui-stat .ui-skel    components.css (filter bar, figures, skeleton)
     .phead .pbody .prow .p-m    mobile.css (the mobile head, column and row)

   So what is left is the vocabulary that exists nowhere else: the tab strip,
   the amount, the direction mark, the message box, the proposal card, the
   report table, and the T account that accountant mode draws.

   THREE DECISIONS THAT SHAPE EVERY RULE BELOW.

   1. AN AMOUNT IS A NUMBER, AND NUMBERS LINE UP. Every rupiah figure is set in
      --f-mono with tabular figures and aligned right, so a column of amounts
      can be compared by eye without reading a single digit. A misaligned column
      of money is not a style complaint: it is how a missing zero survives being
      looked at.

   2. DIRECTION IS NEVER COLOUR ALONE. Money in and money out carry an arrow
      that points down into the account or up out of it, and a sign, before they
      carry green or red. One man in twelve cannot separate those two hues, and
      the arrow costs nothing.

   3. THE TAB STRIP WRAPS ON A PHONE, IT DOES NOT SCROLL SIDEWAYS. A horizontal
      strip of fixed width children sets the page's own minimum width on Android
      Chrome, and the whole screen then renders wider than the device and is cut
      off at the right. That bug was shipped once on the attendance screen and
      found by the owner, not by a test. Wrapping costs one line of height and
      cannot do it.

   COLOUR. Every value is a token from tokens.css. No hex, no rgba, no priority
   flag, and no rule needs one.

   MOTION. finance.js rebuilds a panel on every render, so anything that moves
   as a row arrives is an animation with `backwards` fill rather than a
   transition, which would have nothing to transition from. Durations are
   --t-* tokens, so the reduced motion rule in base.css neutralises the lot by
   overriding the tokens rather than by fighting specificity.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Shell

   .content is already the one desktop scroller, so this screen is only a column
   inside it. No height and no overflow here: either would take the scroll away
   from .content and strand the last row of the longest report.
   --------------------------------------------------------------------------- */

.fn{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-width:0;
}

.fn-mbody{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  min-width:0;
}

/* Tombol di topbar. Kosong tanpa izin mencatat, dan pembungkus kosong tetap
   menyumbang satu jarak ke .tb-tools, yang terbaca seperti avatar yang
   menjauh sendiri dari tepi. */
.fn-tb-actions{
  flex:none;
  display:flex;
  align-items:center;
  gap:var(--s-2);
}

.fn-tb-actions:empty{ display:none; }

/* The strip that explains a module whose tables are not installed yet. Empty
   unless finance.js writes into it, and an empty strip takes no room at all. */
.fn-notice:empty{ display:none; }

.fn-notice{
  padding:var(--s-4);
  border:1px solid var(--gold-300);
  border-radius:var(--r-lg);
  background:var(--gold-a05);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
}

/* Pembungkus isinya, bukan strip itu sendiri. Strip luar yang memegang kotak
   dan warnanya, sebab ia disembunyikan saat kosong dan sebuah flex yang
   disembunyikan tetap menghitung padding. */
.fn-notice-inner{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
}

.fn-notice .ic{
  flex:none;
  width:20px;
  height:20px;
  margin-top:1px;
  color:var(--gold-700);
}


/* ---------------------------------------------------------------------------
   2. Tab strip

   Nine destinations. On the desktop they sit in one row under the topbar (the
   --s-2 padding and --s-1 gap are what keep all nine on one row at 1366; at
   --s-4 "Setup" wrapped alone onto a second row); on a phone they wrap across
   as many rows as they need.
   --------------------------------------------------------------------------- */

.fn-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-1);
  min-width:0;
  padding-bottom:var(--s-1);
  border-bottom:1px solid var(--gray-200);
}

.fn-tab{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:38px;
  padding:0 var(--s-2);
  border:1px solid transparent;
  border-radius:var(--r);
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out),
             border-color var(--t-fast) var(--ease-out);
}

.fn-tab .ic{
  width:17px;
  height:17px;
  flex:none;
}

.fn-tab:hover{
  background:var(--gray-100);
  color:var(--ink);
}

.fn-tab.is-on{
  border-color:var(--gold-300);
  background:var(--gold-a14);
  color:var(--navy-900);
}

/* A count riding on a tab: how many receipts nobody has explained, how many
   statement lines still unmatched. Zero is never drawn. */
.fn-tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-900);
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.fn-panel{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  min-width:0;
}


/* ---------------------------------------------------------------------------
   3. Money

   The single most reused atom on this screen, and the one with the strictest
   rules. Mono, tabular, right aligned, and never coloured on its own.
   --------------------------------------------------------------------------- */

.fn-amt{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:14px;
  letter-spacing:-0.01em;
  white-space:nowrap;
  text-align:right;
}

.fn-amt--lg{
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.02em;
}

.fn-amt--xl{
  font-size:34px;
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.1;
}

.fn-amt--muted{ color:var(--muted); }
.fn-amt--in{ color:var(--green-700); }
.fn-amt--out{ color:var(--red-700); }

/* The direction mark that rides in front of an amount. The arrow carries the
   meaning; the colour only agrees with it. */
.fn-dir{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:none;
  border-radius:999px;
}

.fn-dir .ic{ width:15px; height:15px; }

.fn-dir--in{ background:var(--green-100); color:var(--green-700); }
.fn-dir--out{ background:var(--red-100); color:var(--red-700); }
.fn-dir--move{ background:var(--gray-100); color:var(--gray-600); }

/* Rupiah written out in words, under a total on an invoice or a receipt. */
.fn-words{
  color:var(--muted);
  font-size:12px;
  font-style:italic;
  line-height:1.5;
}


/* ---------------------------------------------------------------------------
   4. Figure tiles

   The row of numbers at the top of the home panel. Bigger and quieter than the
   stat tiles other screens use, because here the number IS the content rather
   than a label on a list below it.
   --------------------------------------------------------------------------- */

.fn-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--s-3);
  min-width:0;
}

.fn-fig{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
  padding:var(--s-5);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
}

.fn-fig--lead{
  border-color:var(--gold-300);
  background:var(--gold-a05);
}

/* Sentence case: a tracked capital label above a figure is one of the tells
   DESIGN.md 13 keeps out, and two capital lines pushed figures out of line. */
.fn-fig-label{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.fn-fig-value{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--navy-900);
  overflow-wrap:anywhere;
}

.fn-fig-foot{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}


/* ---------------------------------------------------------------------------
   5. The message box

   The reason this module exists. One textarea, one button, and under it the
   cards the reader has to agree with before anything is written.
   --------------------------------------------------------------------------- */

.fn-box{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-5);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  box-shadow:var(--sh-sm);
}

.fn-box-head{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-width:0;
}

.fn-box-head .ic{
  width:20px;
  height:20px;
  flex:none;
  color:var(--gold-700);
}

.fn-box-head h2{
  margin:0;
  font-family:var(--f-disp);
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--navy-900);
}

.fn-box-hint{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.fn-box textarea{
  width:100%;
  min-height:96px;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--gray-300);
  border-radius:var(--r);
  background:var(--gray-50);
  color:var(--ink);
  font:inherit;
  font-size:15px;
  line-height:1.6;
  resize:vertical;
}

.fn-box textarea:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
  border-color:var(--gold);
  background:var(--white);
}

.fn-box-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
}

/* Example sentences under the box. Pressing one fills the box, which is how
   somebody who has never used it learns what it accepts. */
.fn-box-examples{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  min-width:0;
}

.fn-eg{
  padding:5px var(--s-3);
  border:1px dashed var(--gray-300);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:border-color var(--t-fast) var(--ease-out),
             color var(--t-fast) var(--ease-out);
}

.fn-eg:hover{
  border-color:var(--gold);
  color:var(--ink);
}

/* Where the sentence came from: the model, or the offline reader. Said out
   loud, because a reader deserves to know which one answered. */
.fn-source{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
}


/* ---------------------------------------------------------------------------
   6. Proposal card

   What the module thinks a sentence means, in sentences, with the journal it
   would write folded underneath for anyone who wants to look.
   --------------------------------------------------------------------------- */

.fn-cards{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  min-width:0;
}

.fn-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border:1px solid var(--gray-200);
  border-left:3px solid var(--gold);
  border-radius:var(--r-lg);
  background:var(--white);
  animation:rise-in var(--t-base) var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * var(--stagger));
}

.fn-card--in{ border-left-color:var(--green); }
.fn-card--out{ border-left-color:var(--red); }
.fn-card--ask{ border-left-color:var(--blue); }

.fn-card-top{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
}

.fn-card-title{
  flex:1 1 auto;
  min-width:0;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  color:var(--navy-900);
  overflow-wrap:anywhere;
}

.fn-card-say{
  color:var(--ink);
  font-size:14px;
  line-height:1.65;
  overflow-wrap:anywhere;
}

.fn-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  color:var(--muted);
  font-size:12px;
}

.fn-card-meta > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.fn-card-acts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
}

/* A question the module needs answered before it can write anything. It is a
   card of its own rather than an error, because not knowing is normal. */
.fn-ask{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r);
  background:var(--blue-100);
  color:var(--ink);
  font-size:13px;
  line-height:1.6;
}


/* ---------------------------------------------------------------------------
   7. The journal, folded

   Debit and credit, shown only to whoever opens the fold. This is the one place
   on the owner's side of the app where those two words appear, and they appear
   because somebody asked to see them.
   --------------------------------------------------------------------------- */

.fn-fold{
  border-top:1px dashed var(--gray-200);
  padding-top:var(--s-3);
}

.fn-fold > summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
}

.fn-fold > summary::-webkit-details-marker{ display:none; }

.fn-fold > summary:focus-visible{
  outline:var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.fn-fold[open] > summary{ margin-bottom:var(--s-3); }

.fn-je{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.fn-je th{
  padding:6px var(--s-2);
  border-bottom:1px solid var(--gray-200);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

.fn-je th:nth-child(n+3),
.fn-je td:nth-child(n+3){ text-align:right; }

.fn-je td{
  padding:7px var(--s-2);
  border-bottom:1px solid var(--gray-100);
  vertical-align:top;
}

.fn-je td:nth-child(n+3){
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.fn-je tfoot td{
  border-top:1px solid var(--gray-300);
  border-bottom:none;
  font-weight:700;
}

.fn-je-acct{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.fn-je-code{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--muted);
}


/* ---------------------------------------------------------------------------
   8. Money list

   Receipts, payments, invoices and statement lines all render as the same row:
   a direction mark, a description that can wrap, meta under it, and an amount
   pinned right. One shape, so the eye learns it once.
   --------------------------------------------------------------------------- */

.fn-list{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
  overflow:hidden;
}

.fn-row{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
  width:100%;
  padding:var(--s-4);
  border:none;
  border-bottom:1px solid var(--gray-100);
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out);
}

.fn-row:last-child{ border-bottom:none; }

.fn-row:hover{ background:var(--gray-50); }

.fn-row:focus-visible{
  outline:var(--focus-ring);
  outline-offset:-2px;
}

.fn-row-main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.fn-row-title{
  font-size:14px;
  font-weight:600;
  line-height:1.45;
  color:var(--ink);
  overflow-wrap:anywhere;
}

.fn-row-meta{
  display:flex;
  flex-wrap:wrap;
  gap:2px var(--s-3);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.fn-row-right{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--s-1);
}


/* ---------------------------------------------------------------------------
   9. Report table

   Wide, numeric, and sometimes wider than a phone. It is allowed past the edge
   only inside its own scroller, so the page body still never moves sideways.
   --------------------------------------------------------------------------- */

.fn-rep{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  min-width:0;
}

.fn-rep-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  min-width:0;
}

.fn-rep-head h2{
  margin:0;
  font-family:var(--f-disp);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--navy-900);
}

.fn-rep-when{
  color:var(--muted);
  font-size:12px;
}

.fn-scroll{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.fn-tbl{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:13px;
}

.fn-tbl th{
  position:sticky;
  top:0;
  z-index:1;
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--gray-300);
  background:var(--white);
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
}

.fn-tbl td{
  padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--gray-100);
  vertical-align:top;
}

.fn-tbl .fn-num,
.fn-tbl th.fn-num{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* A column header is a label, not a value: mono stays on the figures. */
.fn-tbl thead th.fn-num{ font-family:var(--f-ui); }

/* A heading row inside a report: "Revenue", "Operating expenses". */
.fn-tbl tr.fn-group td{
  padding-top:var(--s-4);
  border-bottom:1px solid var(--gray-300);
  color:var(--navy-900);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* A subtotal or a total. */
.fn-tbl tr.fn-sum td{
  border-top:1px solid var(--gray-300);
  border-bottom:none;
  font-weight:700;
}

.fn-tbl tr.fn-sum--lead td{
  background:var(--gold-a05);
  color:var(--navy-900);
}

.fn-indent{ padding-left:var(--s-5); }


/* ---------------------------------------------------------------------------
   10. Health strip

   Eight checks that answer one question: can this book still be trusted. Green
   is not enough on its own, so each row also carries a tick or a cross.
   --------------------------------------------------------------------------- */

.fn-health{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--s-2);
  min-width:0;
}

.fn-hrow{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
  padding:var(--s-3) var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
  font-size:13px;
  line-height:1.55;
}

.fn-hrow .ic{
  width:17px;
  height:17px;
  flex:none;
  margin-top:2px;
}

.fn-hrow--ok{ border-color:var(--green-100); }
.fn-hrow--ok .ic{ color:var(--green-700); }

.fn-hrow--bad{ border-color:var(--red-100); background:var(--red-100); }
.fn-hrow--bad .ic{ color:var(--red-700); }

.fn-hrow-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.fn-hrow-label{ font-weight:600; color:var(--ink); }
.fn-hrow-detail{ color:var(--muted); font-size:12px; overflow-wrap:anywhere; }


/* ---------------------------------------------------------------------------
   11. Bar chart, drawn in CSS

   Twelve months of money in and money out. No library: two rectangles per month
   whose heights are a percentage written by finance.js as a custom property.
   --------------------------------------------------------------------------- */

.fn-chart{
  display:flex;
  align-items:flex-end;
  gap:var(--s-2);
  min-width:0;
  height:180px;
  padding:var(--s-4) 0 0;
}

.fn-bar{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-2);
  min-width:0;
  height:100%;
}

.fn-bar-pair{
  flex:1 1 auto;
  display:flex;
  align-items:flex-end;
  gap:2px;
  width:100%;
  min-width:0;
}

.fn-bar-in,
.fn-bar-out{
  flex:1 1 0;
  min-width:0;
  min-height:2px;
  height:calc(var(--h, 0) * 1%);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  animation:rise-in var(--t-slow) var(--ease-out) backwards;
  animation-delay:calc(var(--i, 0) * var(--stagger));
}

.fn-bar-in{ background:var(--green); }
.fn-bar-out{ background:var(--red); }

.fn-bar-label{
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}

.fn-legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-4);
  color:var(--muted);
  font-size:12px;
}

.fn-legend > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.fn-swatch{
  width:11px;
  height:11px;
  flex:none;
  border-radius:calc(var(--r-sm) - 7px);
}

.fn-swatch--in{ background:var(--green); }
.fn-swatch--out{ background:var(--red); }


/* ---------------------------------------------------------------------------
   12. Statement paste

   Where a CSV downloaded from internet banking is pasted. Mono, because what
   goes in here is columns, and columns only read as columns in a mono face.
   --------------------------------------------------------------------------- */

.fn-paste{
  width:100%;
  min-height:180px;
  padding:var(--s-3);
  border:1px solid var(--gray-300);
  border-radius:var(--r);
  background:var(--gray-50);
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:12px;
  line-height:1.6;
  white-space:pre;
  overflow-x:auto;
  resize:vertical;
}

.fn-paste:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
  border-color:var(--gold);
  background:var(--white);
}

/* The first five rows, shown back before anything is imported. */
.fn-preview{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--gray-200);
  border-radius:var(--r);
  background:var(--white);
}

.fn-preview table{
  width:100%;
  min-width:480px;
  border-collapse:collapse;
  font-family:var(--f-mono);
  font-size:12px;
}

.fn-preview td,
.fn-preview th{
  padding:6px var(--s-2);
  border-bottom:1px solid var(--gray-100);
  white-space:nowrap;
}


/* ---------------------------------------------------------------------------
   13. Setup wizard rows
   --------------------------------------------------------------------------- */

.fn-steps{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
  counter-reset:fn-step;
}

.fn-step{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-width:0;
  padding:var(--s-4);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  background:var(--white);
}

.fn-step-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:none;
  border-radius:999px;
  background:var(--gray-100);
  color:var(--muted);
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
}

.fn-step--done .fn-step-mark{
  background:var(--green-100);
  color:var(--green-700);
}

.fn-step--done .ic{ width:15px; height:15px; }

.fn-step-body{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  min-width:0;
  flex:1 1 auto;
}

.fn-step-title{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}

.fn-step-note{
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}


/* ---------------------------------------------------------------------------
   14. The floating button

   The phone's one primary action: write it in words. Cleared of the tab bar and
   of the home indicator with the same tokens the tab bar itself uses, and it
   only exists where that tab bar exists.
   --------------------------------------------------------------------------- */

.fn-fab{
  position:fixed;
  right:calc(var(--s-4) + var(--safe-r));
  bottom:calc(var(--bottombar-h) + var(--safe-b) + var(--s-4));
  z-index:44;
  display:none;
  align-items:center;
  justify-content:center;
  width:var(--fab-h);
  height:var(--fab-h);
  border:0;
  border-radius:999px;
  background:var(--gold);
  color:var(--navy-900);
  box-shadow:var(--sh-lg);
  cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--t-base), background var(--t-fast);
}

.fn-fab .ic{ width:22px; height:22px; }

.fn-fab:hover{ background:var(--gold-600); }

.fn-fab:active{ transform:scale(.94); }


/* ---------------------------------------------------------------------------
   15. The phone

   Everything above already wraps and already keeps its numbers in their own
   scrollers, so this block only tightens spacing and drops the two grids to one
   column early enough that a figure never has to shrink its own type.
   --------------------------------------------------------------------------- */

@media (max-width: 900px){

  .fn-figures{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }

  .fn-fig{ padding:var(--s-4); }
  .fn-fig-value{ font-size:22px; }

  /* Angka uang tidak pernah dipatahkan di tengah. Yang boleh membungkus hanya
     kalimat kecil di bawahnya. */
  .fn-fig-value{ overflow-wrap:normal; word-break:keep-all; }

  .fn-mtabs{
    gap:6px;
    padding-bottom:var(--s-2);
    border-bottom:none;
  }

  /* Every button on the phone is at least 44px tall, and shares the row width
     evenly, so nothing is a two pixel target and nothing sets a minimum width
     wider than the screen. */
  .fn-mtabs .fn-tab{
    flex:1 1 auto;
    justify-content:center;
    min-height:44px;
    min-width:0;
    padding:0 var(--s-3);
    border:1px solid var(--gray-200);
    font-size:13px;
  }

  .fn-box{ padding:var(--s-4); border-radius:var(--r-lg); }

  /* 16px, bukan 15px. Di bawah itu Safari iOS memperbesar seluruh halaman
     begitu kotak teksnya disentuh, dan halaman yang membesar sendiri tidak
     pernah kembali ke lebar semula. */
  .fn-box textarea{ font-size:16px; }

  /* Kalimat contoh adalah tombol, dan tombol di ponsel tidak boleh setinggi
     dua puluh sembilan piksel. Jari orang dewasa berdiameter sekitar sebelas
     milimeter, dan empat puluh empat piksel adalah angka terkecil yang masih
     bisa dikenai tanpa membidik. */
  .fn-eg{
    min-height:44px;
    padding:0 var(--s-3);
    text-align:left;
  }

  .fn-card{ padding:var(--s-4); }

  .fn-row{ padding:var(--s-3) var(--s-4); }

  .fn-health{ grid-template-columns:1fr; }

  .fn-chart{ height:140px; }
  .fn-bar-label{ font-size:10px; }

  /* Tombol melayang hanya ada di tempat tab bar yang ia hindari juga ada. */
  .fn-fab{ display:inline-flex; }

  /* Ruang di bawah baris terakhir untuk tombol itu, di atas jarak tab bar yang
     sudah dibayar layout.css. Kelasnya dipasang finance.js dari pemeriksaan
     izin yang sama dengan yang memutuskan tombolnya digambar atau tidak, jadi
     yang tidak boleh mencatat tidak membayar ruang kosong. */
  .fn-mbody.has-fab{ padding-bottom:calc(var(--s-4) + 68px); }
}

/* Below 360px the tab labels share a row three at a time rather than two, and
   the gap tightens again, because at 320px a 12px gap is four percent of the
   screen spent on nothing. */
/* Satu kolom di bawah 480px.
   Dua kolom di lebar ponsel memberi tiap kartu sekitar 128 piksel isi, dan
   "Rp 7.100.000" dalam huruf mono tidak muat di sana pada ukuran yang masih
   enak dibaca. Yang terjadi kemudian adalah angkanya patah menjadi dua baris,
   dan angka uang yang patah dua adalah angka yang salah dibaca. Ruang tegak di
   layar yang bisa digulir itu murah; salah baca uang tidak. */
@media (max-width: 480px){
  .fn-figures{ grid-template-columns:1fr; }
  .fn-fig-value{ font-size:26px; }
}

@media (max-width: 360px){
  .fn-mtabs{ gap:var(--s-1); }
  .fn-mtabs .fn-tab{ padding:0 var(--s-2); font-size:12px; }
  .fn-mtabs .fn-tab .ic{ display:none; }
  .fn-fig-value{ font-size:20px; }
  .fn-amt--xl{ font-size:28px; }
}