/* The board on the site, slice 2: Money, in TODAY'S HQ LOOK (moved, not redesigned). The strip, the 30-day calendar, the bars and the
   rows are copied from hq/xander-hq.html's Money (its .mstrip, .cal, .row-barline, .row-trail), on board.css's tokens; everything under
   .bd. Also the board's navigation (Today, Money …), drawn by board.js only when a slice has registered. */
.bd .bd-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.bd .bd-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:99px;font-size:var(--t-sub);font-weight:500;color:var(--label-2)}
.bd .bd-nav a:hover{color:var(--label);background:var(--surface-2)}
.bd .bd-nav a[aria-current="page"]{color:var(--label);background:var(--raise)}

.bd .mn-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:4px 0 14px;min-width:0}
.bd .mn-title{font-family:var(--serif);font-weight:400;font-size:var(--t-title);line-height:1.05;letter-spacing:-.01em;flex:1 1 auto}
.bd .mn-acts{display:flex;gap:8px;flex-wrap:wrap}
.bd .m-next{display:none;font-size:var(--t-sub);line-height:1.5;color:var(--label-2);flex:1 1 280px;min-width:0}
.bd .mn-note{font-size:var(--t-sub);line-height:1.5;color:var(--label-2);padding:2px var(--pad) 12px}

/* the strip: four figures, two by two on a phone, in a row from 1200 px */
.bd .mstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);min-width:0;margin-bottom:16px}
.bd .ms{padding:16px 12px;min-width:0;border-left:1px solid var(--sep)}
.bd .ms:nth-child(odd){padding-left:0;border-left:0}
.bd .ms:nth-child(n+3){border-top:1px solid var(--sep)}
.bd .ms-k{font-size:var(--t-meta);color:var(--label-3)}
.bd .ms-v{margin-top:6px;font-family:var(--serif);font-size:var(--t-title);line-height:1;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.bd .ms-s{margin-top:8px;font-size:var(--t-meta);line-height:1.45;color:var(--label-2)}
.bd .ms-s.t-orange{color:var(--amber)}
.bd .ms-s.t-red{color:var(--late)}
.bd .ms .sk{height:28px;width:70%;margin-top:6px}

/* a row with its figure on the right (the old page's .row-trail) */
.bd .brow.tap{cursor:pointer}
.bd button.brow{width:100%}
@media (hover:hover){.bd .brow.tap:hover{background:var(--surface-2)}}
.bd .mn-trail{flex:none;display:grid;justify-items:end;gap:1px;text-align:right;max-width:46%}
.bd .mn-val{font-size:var(--t-body);color:var(--label);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .mn-val.unk{color:var(--label-2)}
.bd .mn-val.t-orange,.bd .mn-vsub.t-orange{color:var(--amber)}
.bd .mn-vsub{font-size:var(--t-meta);color:var(--label-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .mn-chev{flex:none;width:16px;height:16px;color:var(--label-4)}
.bd .row-fold .fold-act{flex:none;font-size:var(--t-sub);color:var(--accent)}
.bd .mn-more{color:var(--accent)}
.bd .sec-foot{padding:8px var(--pad) 10px;font-size:var(--t-meta);line-height:1.5;color:var(--label-3);max-width:72ch}
.bd .sec .empty-line{padding:12px var(--pad) 10px;color:var(--label-2);font-size:var(--t-sub)}

/* the 30-day calendar */
.bd .cal-box{padding:2px var(--pad) 12px}
.bd .cal{display:grid;gap:4px}
.bd .cal-wk,.bd .cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.bd .cal-wk span{text-align:center;font-size:var(--t-meta);color:var(--label-3);padding-bottom:2px}
.bd .cal-d{position:relative;display:grid;justify-items:center;align-content:start;gap:2px;min-height:52px;padding:5px 0 4px;border-radius:12px;min-width:0;border:1px solid transparent;color:var(--label);text-align:center}
.bd .cal-n{font-size:var(--t-meta);color:var(--label);white-space:nowrap;line-height:22px;min-width:24px;height:22px;padding:0 4px;border-radius:99px;text-align:center;font-variant-numeric:tabular-nums}
.bd .cal-d.past .cal-n,.bd .cal-d.out .cal-n{color:var(--label-3)}
.bd .cal-d.today .cal-n{background:var(--accent);color:var(--on-accent);font-weight:600}
.bd .cal-a{font-size:var(--t-meta);font-weight:500;color:var(--label);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .cal-a.unk{color:var(--label-2)}
.bd .cal-in{font-size:var(--t-meta);font-weight:500;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .cal-cap{font-size:var(--t-meta);line-height:1.45;color:var(--label-3);padding:6px 2px 0}
.bd .cal-d.has{background:var(--surface-2);border-color:var(--line);cursor:pointer}
.bd .cal-d.has:hover{border-color:var(--line-3)}
.bd .sk-cal{height:250px;border-radius:12px}

/* running cost by client: one bar each, on one scale, the limit as a tick */
.bd .row-barline{gap:12px;min-height:44px}
.bd .bl-n{width:104px;flex:none;font-size:var(--t-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.bd .bl-track{flex:1;height:2px;background:var(--line-2);overflow:hidden;min-width:40px}
.bd .bl-fill{display:block;height:100%;background:var(--accent)}
.bd .bl-track.has-lim{position:relative;overflow:visible}
.bd .bl-lim{position:absolute;top:-4px;width:2px;height:10px;border-radius:1px;background:var(--label-3)}
.bd .bl-fill.tone-gray{background:var(--label-2)} .bd .bl-fill.tone-cost{background:var(--amber)} .bd .bl-fill.tone-late{background:var(--late-dot)} .bd .bl-fill.tone-tint{background:var(--accent)}
.bd .bl-v{flex:none;min-width:64px;text-align:right;font-size:var(--t-sub);color:var(--label);font-variant-numeric:tabular-nums}
.bd .bl-v.t-orange{color:var(--amber)} .bd .bl-v.t-red{color:var(--late)}

/* sheets: a bill's fields, one a line (the old page's lineField) */
.bd .mn-form{display:grid;gap:22px}
.bd .mn-f{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 16px;position:relative}
.bd .f-group .mn-f + .mn-f::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--sep)}
.bd .mn-f label{font-size:var(--t-body);color:var(--label);flex:1 1 auto}
.bd .mn-in{flex:0 1 220px;min-width:0;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--label);font-size:var(--t-body);text-align:right;font-variant-numeric:tabular-nums}
.bd select.mn-in{text-align:left;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--label-3) 50%),linear-gradient(135deg,var(--label-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.bd .mn-in:focus-visible{border-color:var(--line-4);outline:2px solid var(--accent);outline-offset:1px}
.bd .mn-in[aria-invalid="true"]{border-color:var(--late)}
.bd .mn-in::placeholder{color:var(--label-3)}
.bd .mn-in.wide{flex-basis:260px;text-align:left}
.bd .mn-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--t-body)}
.bd .mn-check input{width:22px;height:22px;accent-color:var(--accent)}
.bd .f-err.mn-ferr{padding:0 16px 10px}
.bd .mn-big{font-family:var(--serif);font-size:var(--t-title);line-height:1.05;text-align:center}
.bd .mn-big.t-red{color:var(--late)}
.bd .mn-mid{font-size:var(--t-sub);color:var(--label-2);text-align:center}
.bd .mn-mid .t-orange,.bd .mn-mid.t-orange{color:var(--amber)}
.bd .sh-left{justify-self:start;grid-column:1;min-height:44px;padding:0 12px;font-size:var(--t-body);color:var(--label-2);border-radius:99px}
.bd .sh-btn:disabled{color:var(--label-3)}

@media (min-width:1024px){
  .bd .m-next{display:block}
  .bd .ms-v{font-size:var(--t-hero)}
  .bd .cal-d{min-height:40px;padding:3px 0 2px}
  .bd .mn-title{flex:0 0 auto}
  .bd .ph-only{display:none}
}
@media (min-width:1100px){
  .bd .mn-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
}
@media (max-width:1099px){ .bd .mn-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} }
.bd .mn-cols > .col{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-width:0}
@media (min-width:1200px){
  .bd .mstrip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bd .ms{padding:20px 24px}
  .bd .ms:nth-child(odd){padding-left:24px;border-left:1px solid var(--sep)}
  .bd .ms:first-child{padding-left:0;border-left:0}
  .bd .ms:last-child{padding-right:0}
  .bd .ms:nth-child(n+3){border-top:0}
}
@media (max-width:420px){ .bd .bd-nav a{padding:0 10px} .bd .bl-n{width:84px} }
/* a phone's day: the calendar takes the section's padding so each day is a 44 px target */
@media (max-width:1023px){ .bd .cal-box{padding:2px 6px 12px} .bd .cal-grid,.bd .cal-wk{gap:2px} }