/* Compact, independent overview cards. */
[data-view="overview"] .grid2{align-items:stretch;grid-auto-rows:min-content}
[data-view="overview"] .panel{align-self:start;min-height:0}
/* A pair of cards is a row, and the row is as tall as its taller card.
   Left alone the shorter one stopped where its content did, so what sat
   between it and the next pair was the page showing through -- a hole
   between two cards rather than a card with room in it. The pair matches
   instead, and a body that can use the height takes it rather than
   leaving it dead: the day chart grows its plot area. A list or a bar
   stack keeps its own height and the rest reads as the card's padding. */
[data-view="overview"] .grid2>.panel{align-self:stretch;display:flex;flex-direction:column}
[data-view="overview"] .grid2>.panel>.panel-b:has(>.mbars){flex:1;display:flex;flex-direction:column}
[data-view="overview"] .grid2>.panel>.panel-b>.mbars{flex:1;height:auto;min-height:110px}
/* Spending activity stays compact even beside a long attention list. */
[data-view="overview"] .grid2>.spend-panel{align-self:start;container-type:inline-size}
.spend-panel .panel-h{padding:20px 20px 0;gap:8px}
.spend-panel .ov-heading{padding:0;font-size:14px;font-weight:500}
.spend-panel #ov-daily-note{flex-basis:auto;margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.spend-panel #ov-daily{padding:20px}
.spend-summary{display:flex;flex-direction:column;gap:6px}
.spend-summary strong{font-size:32px;font-weight:500;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
.spend-summary>span{font-size:12px;color:var(--muted)}
.spend-totals{display:flex;flex-wrap:wrap;gap:5px 7px;margin-top:14px;font-size:12px;font-variant-numeric:tabular-nums}
.spend-totals>span+span{color:var(--muted)}
.spend-legend{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 20px}
.spend-legend>span,.spend-status{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
.spend-legend i,.spend-status i{display:block;width:7px;height:7px;border-radius:50%;flex:none}
.spend-owed{background:var(--owed)}
.spend-paid{background:var(--good)}
.spend-none{background:var(--muted-2)}
.spend-activity-days{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;margin-bottom:22px}
.spend-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:52px;padding:7px 0;border-radius:7px;color:var(--muted);cursor:pointer;font:inherit;transition:background .15s,color .15s}
.spend-day:hover{background:var(--raise);color:var(--text)}
.spend-day[aria-pressed="true"]{background:var(--violet-soft);color:var(--text)}
.spend-day:focus-visible,.spend-purchase:focus-visible,.spend-view-day:focus-visible{outline:2px solid var(--violet-hi);outline-offset:2px}
.spend-date{font-size:10.5px;line-height:14px;white-space:nowrap}
.spend-dot{display:block;width:7px;height:7px;border-radius:50%;flex:none;position:relative}
.spend-dot.is-mixed{background:linear-gradient(90deg,var(--owed) 50%,var(--good) 50%)}
.spend-dot.is-largest{width:12px;height:12px;margin:-2.5px 0}
.spend-dot.is-empty{width:4px;height:4px;margin:1.5px 0;opacity:.65}
.spend-purchases{padding:18px 15px 12px;background:var(--raise);border-radius:10px;min-height:156px}
.spend-purchases-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.spend-purchases-heading h3{font-size:12.5px;font-weight:500;line-height:1.5;margin:0}
.spend-purchases-heading>strong{font-size:24px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-purchase-list{display:flex;flex-direction:column}
.spend-purchase{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 0;color:inherit;text-decoration:none;border-radius:3px}
.spend-purchase+.spend-purchase{border-top:1px solid var(--line-2);margin-top:4px;padding-top:12px}
.spend-purchase-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.spend-purchase-title{font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.spend-purchase:hover .spend-purchase-title{text-decoration:underline;text-underline-offset:3px}
.spend-purchase-by{font-size:10.5px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.spend-purchase-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;padding-top:3px}
.spend-purchase-amount{font-size:13px;font-variant-numeric:tabular-nums;line-height:1.25}
.spend-status{white-space:nowrap;line-height:1.4}
.spend-view-day{display:flex;align-items:center;gap:6px;margin:9px 0 0;padding:5px 0;color:var(--muted);font:inherit;font-size:10.5px;cursor:pointer}
.spend-view-day:hover{color:var(--text)}
.spend-no-purchases{font-size:12px;line-height:1.6;color:var(--muted);margin:22px 0 10px}
.spend-footer{margin-top:17px;font-size:10.5px;line-height:1.5;color:var(--muted)}
@container(max-width:540px){
 .spend-activity-days{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@container(max-width:360px){
 .spend-panel .panel-h{padding:16px 14px 0}
 .spend-panel #ov-daily{padding:18px 14px 16px}
 .spend-panel #ov-daily-note{font-size:10px}
 .spend-purchases{padding:15px 12px 10px}
 .spend-purchases-heading>strong{font-size:22px}
 .spend-purchases-heading h3{font-size:11.5px}
 .spend-purchase{gap:8px}
 .spend-status{font-size:10px}
}
/* Nothing to show is the one body worth centring in the room it got. */
[data-view="overview"] .grid2>.panel>:is(.att,.panel-b,.feed):has(>.empty){flex:1;display:flex;flex-direction:column;justify-content:center}
[data-view="overview"] .empty{padding:22px 16px}
[data-view="overview"] .empty .mini{margin-top:12px}
.overview-stat{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;padding:13px 14px;border-right:1px solid var(--line)}
.overview-stat:hover,.ov-cat:hover,.fi:hover,.att-i[href]:hover{background:var(--raise)}
.overview-stat:last-child{border-right:0}
.overview-stat:focus-visible,.person-link:focus-visible,.ov-cat:focus-visible,.mb:focus-visible{outline:2px solid var(--violet-hi);outline-offset:3px}
.person-link{color:var(--text);font-weight:600;text-decoration:none}
.person-link:hover{text-decoration:underline;color:var(--violet-hi)}
.ov-cat{width:100%;text-align:left;color:inherit;cursor:pointer;border-radius:5px}
.mbars .mb{cursor:pointer;min-height:28px;align-self:stretch}
.mbars .mb:hover{filter:brightness(1.2);background:var(--raise);border-radius:4px}
.fi,.att-i[href]{color:inherit;text-decoration:none}
.identity-switch{margin:0 12px 10px;padding:9px 10px;text-align:left;font-size:11.5px;border:1px solid var(--line);border-radius:8px;color:var(--muted)}
.identity-switch:hover{background:var(--raise);color:var(--text)}
#gate form{display:grid;grid-template-columns:1fr;text-align:left}
#gate form label{font-size:12px;color:var(--muted)}
#gate select,#gate input{width:100%;height:40px}
#gate form button{justify-content:center;height:40px;margin-top:4px}
.charge-approvals{display:block;max-width:330px;font-size:11px;line-height:1.6;color:var(--muted)}
.approve-charge{margin-top:6px}
.attendance-nav{display:flex;gap:5px}
.attendance-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.attendance-day{border:1px solid var(--line);border-radius:9px;overflow:hidden;min-height:130px}
.attendance-day.today{border-color:var(--violet)}
.attendance-date{display:flex;flex-direction:column;gap:4px;background:var(--raise);padding:10px;font-size:12px}
.attendance-date span{font-size:10.5px;color:var(--muted)}
.attendance-names{padding:10px;display:flex;flex-direction:column;gap:9px;font-size:11.5px}
.attendance-names a{display:flex;align-items:center;gap:6px;color:var(--text);text-decoration:none}
.attendance-names a:hover{color:var(--violet-hi)}
.attendance-names .av{width:20px;height:20px;font-size:10px}
body[data-role="intern"] #cm-new,body[data-role="intern"] #cm-form,body[data-role="intern"] #ap-save,body[data-role="intern"] #ap-hire{display:none}
button:disabled{cursor:default}
@media(max-width:1100px){.attendance-days{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.attendance-days{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-day{min-height:110px}.overview-stat{padding:12px}.attendance-nav{margin-bottom:5px}}
.profile-about{padding:0 0 16px;max-width:720px;font-size:14px;line-height:1.65;color:var(--muted)}
.profile-about a{color:var(--violet-hi);overflow-wrap:anywhere}
.profile-form{padding:20px;display:grid;gap:14px;max-width:720px;margin-bottom:16px}
.profile-form label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.profile-form input,.profile-form textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:10px}
.profile-form textarea{resize:vertical}
.profile-form-actions{display:flex;gap:8px}
#profile-error{color:var(--bad);font-size:12px}
@media(max-width:600px){.phead{flex-wrap:wrap}.phead .push{width:100%;margin:0;flex-wrap:wrap}}

/* Keep intrinsic table and chart widths inside their own scroll containers. */
.scroller,.scroller>* ,.panel,.panel-b,.grid2,.grid3,.rail,.ppgrid,.tbl-scroll{min-width:0}
/* The overview scroller is a grid with a definite height, so its auto rows
   are sized against the space it has rather than the space its content
   needs. `min-height:0` above then lets a row that is a bare .panel --
   "The team, line by line" and "Quiet days with a spend" are the two --
   collapse to its own border, which drops the panel out of sight and
   leaves it sitting on top of the band below. max-content rows size to
   what is in them and never shrink, which is what a scrolling column of
   panels wanted in the first place. */
[data-view="overview"]>.scroller{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rail{grid-template-columns:repeat(4,minmax(0,1fr))}
.rail>.overview-stat{min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-l)}
.overview-stat .sub{overflow-wrap:anywhere}
#side-backdrop{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.55)}
.side-close{display:none;position:absolute;right:9px;top:10px;font-size:22px}
.profile-about{overflow-wrap:anywhere}
@media(max-width:1060px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.grid2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
 .side{width:min(300px,85vw)}
 .side-close{display:grid}
 .side-top{padding-right:40px}
 .nav-i{min-height:40px}
 .identity-switch{min-height:44px}
}
@media(max-width:600px){
 .shell{height:100dvh}
 .topbar{gap:6px;padding:0 10px;min-width:0;height:56px}
 .topbar h1{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}
 .topbar .push{flex:none;gap:4px}
 .topbar .icon-b{width:34px;height:40px}
 .topbar .live{display:none}
 .topbar #pal-open{display:none}
 .topbar .btn{min-height:36px;padding:0 10px}
 .scroller.pad{padding:12px}
 .toolbar{padding:8px 12px;gap:7px}
 .toolbar select{flex:1 1 135px;min-width:0;max-width:100%}
 .toolbar .srch{flex:1 1 100%;min-width:0}
 .toolbar .push{flex-wrap:wrap}
 .toolbar .hint{overflow-wrap:anywhere}
 .vtabs{height:46px;min-height:46px}
 .vtab{min-height:38px;padding:8px 12px}
 .panel-h{padding:12px 12px 0;gap:6px}
 .panel-h .note{font-size:10.5px;white-space:normal}
 #ov-daily-note{flex-basis:100%;margin-left:0}
 .panel-b{padding:12px}
 .ov-band{flex-wrap:wrap;gap:5px}
 .ov-band .hint{flex:1 1 100%;font-size:10.5px}
 .ov-band>i{min-width:0}
 .ov-cat{gap:6px;min-height:40px}
 .ov-cat .nm{min-width:95px}
 .ov-cat .bar{min-width:12px}
 .ov-cat .amt{width:59px}
 .ov-cat .pc{width:30px}
 .att-i{padding:10px 12px;flex-wrap:wrap}
 .att-i .bd{flex-basis:180px}
 .att-i .mini{margin-left:auto;min-height:36px}
 .fi{flex-wrap:wrap}
 .fi .bd{flex-basis:200px}
 .fi .rt{margin-left:34px}
 [data-view="overview"] .tbl-scroll table{min-width:780px}
 [data-view="overview"] .tbl-scroll::before{content:"Swipe to see attendance and commits →";display:block;padding:10px 12px;color:var(--muted-2);font-size:11px}
 #ov-team td:first-child,[data-view="overview"] table th:first-child{position:sticky;left:0;background:var(--surface-2);z-index:1}
 #ov-team td,[data-view="overview"] table th{padding:11px 9px}
 .person-link{display:inline-flex;min-height:30px;align-items:center}
 .ppgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ppgrid>div{min-width:0}
 .backfill{flex-wrap:wrap}
 .backfill select,.backfill input{min-width:0;max-width:100%}
 .attendance-days{grid-template-columns:repeat(2,minmax(0,1fr))}
 .attendance-nav{width:100%;justify-content:flex-end}
 .attendance-nav .mini{min-height:36px;min-width:40px}
 .form input,.form textarea,.form select,.profile-form input,.profile-form textarea,#gate input,#gate select{font-size:16px}
 .form-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}
 .tbl-scroll table:has(.ledger-line){display:block}
 table:has(.ledger-line) thead{display:none}
 table:has(.ledger-line) tbody{display:block}
 .ledger-line{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 12px;border-bottom:1px solid var(--line)}
 .ledger-line td{display:block;padding:0;border:0;white-space:normal;min-width:0;text-align:left}
 .ledger-line td::before{content:attr(data-label);display:block;font:10px var(--body);color:var(--muted-2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
 .ledger-line td[data-label="Description"]{grid-column:1/-1;grid-row:1}
 .ledger-line td[data-label="Description"]::before,.ledger-line td[data-label="Actions"]::before{display:none}
 .ledger-line td[data-label="Description"] b{font-size:14px}
 .ledger-line td[data-label="Actions"]{grid-column:1/-1}
 .ledger-line .acts{justify-content:flex-start;flex-wrap:wrap;opacity:1}
 .ledger-line .mini{min-height:38px}
 .ledger-line .what{overflow-wrap:anywhere}
 .profile-form{padding:14px}
 .profile-form-actions button{min-height:40px}
}
/* The copy button rewrites the hours on screen and then tells you to press
   Save hours, which an intern does not have. */
body[data-role="intern"] #vr-save,body[data-role="intern"] #vr-hours-save,body[data-role="intern"] #vr-hours-copy{display:none}
.overview-action{width:100%;color:inherit;text-align:left;cursor:pointer}
.overview-action:hover{background:var(--raise)}
/* Every overview figure offers a read-only route to the records behind it. */
button.overview-stat{text-align:left;font:inherit;cursor:pointer}
.ov-heading{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font:inherit;text-align:left;cursor:pointer}
.ov-heading>span{font-size:12px;color:var(--muted-2)}
.ov-heading:hover,.ov-link:hover{color:var(--violet-hi)}
.ov-link{color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}
.ov-link:hover{text-decoration:underline;text-underline-offset:3px}
.ov-cell{display:block;width:100%;min-height:34px;color:inherit;font:inherit;text-align:inherit;cursor:pointer;border-radius:5px;padding:3px 5px}
.ov-cell:hover{background:var(--raise);color:var(--violet-hi)}
.ov-cell.share{display:flex;text-align:left}
.ov-person{display:inline-flex;align-items:center;gap:8px}
.strip7 button{width:12px;height:24px;border-radius:3px;cursor:pointer;position:relative}
.strip7 button:hover{outline:1px solid var(--violet-hi);outline-offset:2px}
.ov-seat-row{display:flex;align-items:center;gap:10px;min-width:0}
.ov-seat-row>.ov-cat{flex:1;min-width:0}
.ov-seat-open{flex:none;min-width:65px;min-height:38px;text-align:right;color:var(--muted);font-size:11px}
.ov-heading:focus-visible,.ov-link:focus-visible,.ov-cell:focus-visible,.overview-action:focus-visible,.strip7 button:focus-visible{outline:2px solid var(--violet-hi);outline-offset:3px}
.stcard-out .mt{margin-top:10px;line-height:1.6}
.stcard-out .ac{flex-wrap:wrap}
@media(max-width:600px){.ov-cell{min-height:40px;padding:3px 0}.ov-seat-row{gap:6px}.ov-seat-row .ov-cat .nm{min-width:80px}.ov-seat-row .ov-cat .amt{width:28px}}

/* Receipts and reversible money actions. */
.charge-review{max-width:1100px;margin:0 auto;display:grid;gap:18px;align-content:start}
.charge-review h2{font-size:24px;overflow-wrap:anywhere}
.charge-review-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}
.charge-receipt,.charge-facts{padding:18px;display:grid;gap:14px;min-width:0}
.charge-receipt iframe{width:100%;height:540px;border:0;background:var(--ink)}
.charge-receipt img{max-width:100%;height:auto;object-fit:contain}
.charge-receipt small,.charge-confirm small{color:var(--muted);font-size:12px;display:block}
.charge-facts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;margin:0}
.charge-facts dt{color:var(--muted)}
.charge-facts dd{margin:0;text-align:right;overflow-wrap:anywhere}
.charge-note{white-space:pre-wrap;overflow-wrap:anywhere}
.charge-participants p{display:flex;justify-content:space-between;gap:12px;margin:8px 0}
.charge-confirm{display:grid;gap:12px;border-top:1px solid var(--line);padding-top:16px}
/* Both of these float up from the bottom of the window, and on the views
   that carry one, the bottom of the window is the strip of totals. It is
   37px of numbers somebody is reading, so measure from the top of it
   rather than landing on it. The views without a strip keep the old
   offsets, because --foot-clear is 0 there. */
:root{--foot-clear:0px}
body:has(.view.on .aggbar){--foot-clear:37px}
#toast{bottom:calc(22px + var(--foot-clear))}
#money-undo-bar{position:fixed;bottom:calc(18px + var(--foot-clear));left:50%;transform:translateX(-50%);z-index:90;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:0 4px 24px #0003;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);font-size:12px}
#money-undo-bar[hidden]{display:none}
#money-undo-bar .mini{min-height:36px}
body:has(#money-undo-bar:not([hidden])) .scroller{padding-bottom:calc(90px + var(--foot-clear))}
body:has(#money-undo-bar:not([hidden])) #toast{bottom:calc(86px + var(--foot-clear))}
@media(max-width:700px){.charge-review-grid{grid-template-columns:1fr}.charge-receipt iframe{height:380px}.charge-review h2{font-size:21px}#money-undo-bar{width:max-content}.charge-confirm .btn{min-height:46px}}
.charge-confirm button{min-height:44px;padding:12px 18px;border:1px solid var(--violet);border-radius:8px;background:var(--violet);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.charge-confirm button[data-purchase-unapprove]{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
.charge-confirm button:disabled{opacity:.6;cursor:wait}
.charge-review>.mini{justify-self:start}

.purchase-git{padding:20px}
.purchase-git-head p,.purchase-git-note{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 16px}
.purchase-git-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.purchase-git-person{border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0;overflow-wrap:anywhere}
.purchase-git-name{display:flex;gap:10px;align-items:center}
.purchase-git-name small,.purchase-commits small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.purchase-git-person p{margin:14px 0;font-size:13px}
.purchase-commits{padding:0;list-style:none;max-height:340px;overflow:auto}
.purchase-commits li{padding:10px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.5}
.purchase-git-links{margin-top:12px;font-size:12px}
.charge-review>.charge-confirm{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px}
.charge-approval-note{color:var(--muted);padding:12px 0}

/* ══════════ the console ══════════

   Deliberately plainer than the rest of the page. Nothing in here is a
   dashboard and none of it wants to be glanced at: every control is one
   that reaches past a rule the ledger keeps, so the styling is there to
   slow a hand down, not to make a row inviting to press. The one colour
   used is --bad, and only on the button that has already been confirmed
   once. */
.ad-warn{border:1px solid var(--line-2);border-left:3px solid var(--warn);border-radius:10px;
  background:var(--surface);padding:14px 16px;font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.ad-warn b{color:var(--text);display:block;margin-bottom:4px}
.ad-warn code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--text)}

.ad-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:16px;overflow:hidden}
.ad-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 18px 12px}
.ad-h h3{margin:0;font-size:15px}
.ad-sub{color:var(--muted);font-size:12px;line-height:1.5}
.ad-foot{margin:0;padding:12px 18px 16px;color:var(--muted-2);font-size:12px;line-height:1.6;border-top:1px solid var(--line)}
.ad-none{padding:18px;color:var(--muted);font-size:13px}

.ad-tbl{width:100%}
.ad-tbl td,.ad-tbl th{vertical-align:middle}
.ad-tbl .ad-held{color:var(--muted);font-size:12px}
.ad-tbl tr.ad-gone td{opacity:.55}
.ad-tag{display:inline-block;margin-left:7px;padding:1px 7px;border:1px solid var(--line-2);border-radius:20px;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ad-act{text-align:right;white-space:nowrap}
.ad-act .mini+.mini{margin-left:6px}

/* A row's own panel, opened under it rather than in a dialog: what these
   buttons are about to do is mostly a fact about the row above them, and a
   modal would put that fact behind itself. */
.ad-open>td{background:var(--surface-2);padding:0!important}
.ad-panel{display:grid;gap:14px;padding:16px 18px;border-top:1px solid var(--line)}
.ad-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ad-lbl{min-width:64px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em}
.ad-say{flex:1 1 260px;color:var(--muted);font-size:12px;line-height:1.55;min-width:0}
.ad-say b{color:var(--text)}
.ad-row.ad-no .ad-say{color:var(--muted-2)}
.ad-in{height:30px;padding:0 9px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--ink);color:var(--text);font:inherit;font-size:13px;min-width:0;width:150px}
.mini.on{border-color:var(--violet);color:var(--text);background:var(--raise)}
.mini.bad{border-color:var(--bad);color:var(--bad)}
.mini.bad:hover{background:var(--bad);color:#fff}

.ad-add{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line);align-items:center}
.ad-add input{flex:1 1 220px;height:34px;padding:0 11px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--ink);color:var(--text);font:inherit;font-size:13px;min-width:0}
.ad-add select{height:34px;padding:0 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--ink);color:var(--text);font:inherit;font-size:13px}
.ad-pick{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px;align-items:center}
.ad-pick select{height:32px;padding:0 9px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--ink);color:var(--text);font:inherit;font-size:13px;min-width:0}

/* One finding, one row. The description carries the weight and the button
   sits at the end of it, so nothing is ever deleted without the sentence
   saying what it is being read first. */
.ad-find{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);font-size:13px}
.ad-find>div{min-width:0;flex:1}
.ad-find b{display:block;overflow-wrap:anywhere}
.ad-find .ad-say{display:block;margin-top:3px;font-size:11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.ad-log{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;padding:9px 18px;
  border-top:1px solid var(--line);font-size:12px}
.ad-log .ad-when{color:var(--muted-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
.ad-log .ad-say{flex:1 1 200px;font-size:12px}

@media(max-width:700px){
  .ad-find{flex-direction:column;align-items:stretch}
  .ad-find .ad-act{text-align:left}
  .ad-lbl{min-width:0;flex-basis:100%}
  .ad-in{width:auto;flex:1 1 120px}
  /* The column that has nowhere to go on a phone. What somebody is holding
     is the reason to think twice before removing them, so it is not lost —
     it is said again, in words, in the panel that does the removing. */
  .ad-tbl .ad-held,.ad-tbl th:nth-child(3){display:none}
  /* These two hold their own width on every other table on the page, which
     is right where a table may scroll. This one may not, so they wrap. */
  .ad-tbl td.amt,.ad-tbl th.amt,.ad-tbl .ad-act{white-space:normal}
  .ad-tbl td,.ad-tbl th{padding-left:9px;padding-right:9px}
}

/* Spend controls stay discoverable on desktop and touch screens. */
.ledger-line .acts{opacity:1;flex-wrap:wrap}
.charge-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.charge-actions .mini{min-height:38px}
#f-monthly-day{max-width:150px}