/* money.css - the Money room's own styles (app/money.js). The room is built
   from the Home board's kit (board.css: .lfd-*), so only what nobody else
   draws lives here: the Cash flow donuts and trend line (canvas; the colours
   come from the tokens), the freshness strip every tab opens with, the Cash
   tab's Fix picker, the Access table, and the phone's 44 px targets. Tokens
   only, never a colour of its own. */
.lfd-donut{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.lfd-donut canvas{width:150px;height:150px;display:block}
.lfd-legrow{display:grid;grid-template-columns:9px minmax(0,1fr) auto 32px;gap:8px;align-items:center;font-size:12.5px;padding:2.5px 0}
.lfd-legrow > i{width:9px;height:9px;border-radius:2px}
.lfd-trend{position:relative;flex:1 1 auto;min-height:190px}
.lfd-trend canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The freshness strip (plan 2.2): one line at the head of every tab. A stale
   arm is in the warn colour and bold, and its level word is in the text. */
.lfd-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-family:var(--lfb-mono);font-size:11.5px;
  color:var(--ink3);padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:0 0 10px}
.lfd-strip .lfd-sitem.lfd-stale{color:var(--warn);font-weight:600}
.lfd-strip .lfd-sdot{color:var(--line2)}
.money-fresh:empty{display:none}

/* The Cash tab's receipts: a Fix action for money.manage holders and the
   picker it opens under the row (category, and the source for money in). */
.lfd-rrow.money-fixable{grid-template-columns:50px minmax(0,1fr) auto auto}
.money-fix{font:inherit;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink2);cursor:pointer;align-self:center}
.money-fix:hover{border-color:var(--accent);color:var(--accent)}
.money-fixform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:8px 10px;margin:2px 0 6px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface2)}
.money-fixform label{display:flex;flex-direction:column;gap:3px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);min-width:160px;flex:1 1 160px}
.money-fixform select,.money-fixform input{font:inherit;font-size:13px;min-height:34px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.money-fixform .money-fixacts{display:flex;gap:6px;flex:0 0 auto}
.money-fixnote{flex-basis:100%;font-size:11.5px;color:var(--ink3)}
.money-fixnote.err{color:var(--crit)}

/* Access: who can open the room. */
.money-access{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:6px 10px;align-items:center;font-size:13px}
.money-access .money-ah{font-family:var(--lfb-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);padding-bottom:4px;border-bottom:1px solid var(--line)}
.money-access .money-awho span{display:block;font-size:11.5px;color:var(--ink3)}
.money-access .money-acell{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.money-access .money-acell small{font-size:11px;color:var(--ink3)}
.money-aswitch{appearance:none;width:38px;height:22px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);position:relative;cursor:pointer;padding:0}
.money-aswitch i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ink3);transition:transform .15s ease}
.money-aswitch[aria-checked="true"]{background:color-mix(in srgb,var(--accent) 24%,var(--surface));border-color:var(--accent)}
.money-aswitch[aria-checked="true"] i{background:var(--accent);transform:translateX(16px)}
.money-aswitch:disabled{opacity:.5;cursor:default}
.money-aalways{font-family:var(--lfb-mono);font-size:11px;color:var(--ink3)}

/* The Wages tab: every week, totals only, in a table that scrolls inside its
   panel under a header that stays put; a draft week carries a word. */
.money-wages{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.money-wages table{width:100%;border-collapse:separate;border-spacing:0}
.money-wages thead th{position:sticky;top:0;z-index:1;background:var(--surface);box-shadow:0 1px 0 var(--line)}
.money-wages td,.money-wages th{padding:6px 8px;white-space:nowrap}
.money-draft{display:inline-block;font-family:var(--lfb-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:4px;
  color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--surface));margin-left:4px;vertical-align:middle}
.money-draftrow td{color:var(--ink2)}

/* The Expenses tab's books-against-bank line and the Wholesale ladder. */
.money-books{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:12.5px;color:var(--ink3)}
.money-books b{color:var(--ink);font-family:var(--lfb-mono)}
.money-ladder td,.money-ladder th{padding:5px 8px}
.money-ladder .hint{display:block;font-size:10.5px}
/* The ladder's box (.money-scroll): when the table is wider than its panel
   (a phone, or a narrow desk window) it scrolls sideways inside the box, so
   it is never cut off and never runs under the next panel. */
.money-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.money-good{color:var(--good)} .money-warn{color:var(--warn)}

/* The tab chips wrap; on a phone every target is 44 px tall and the room
   does not scroll sideways (the ladder scrolls inside its own box). */
#v-money .lfd-tabs{flex-wrap:wrap}
#v-money,#v-money .lfd-page{max-width:100%;overflow-x:hidden}
@media (max-width:760px){
  .lfd-donut{grid-template-columns:118px minmax(0,1fr);gap:12px}
  .lfd-donut canvas{width:118px;height:118px}
  #v-money .fchip,#v-money .lfd-seg button,#v-money .btn,#v-money .money-fix,#v-money .money-aswitch,#v-money .lfd-chan.lfd-act,
  #v-money .money-fixform select,#v-money .money-fixform input{min-height:44px}
  #v-money .money-aswitch{width:52px} #v-money .money-aswitch i{top:13px;left:3px} #v-money .money-aswitch[aria-checked="true"] i{transform:translateX(30px)}
  #v-money .lfd-seg{flex-wrap:wrap;border-radius:var(--r)}
  .lfd-rrow.money-fixable{grid-template-columns:50px minmax(0,1fr) auto}
  .lfd-rrow.money-fixable .money-fix{grid-column:2 / -1;justify-self:start;min-width:44px}
  .money-access{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));font-size:12px}
}