/* ================================================================ v219 (24 Oct 2026, owner: "add all ideas") ============
   The planning layer (js/occasi-dash-plan.js, js/occasi-dash-daybook.js): the money line in Home's headline card, Up next,
   search results for costs, tasks and dietary words, the budget's month view, contracts and payment schedule, the dated
   plan, the caterer copy, and the preview phone's poster. The v218 rules hold: light only, 15px or more where couples read
   on a phone, 44px targets, status in words as well as colour. */

/* ---- Home: the money line closes the headline card */
.gl-money{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.gl-mlink{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 240px;min-height:var(--tap);color:var(--ink);text-decoration:none;touch-action:manipulation}
.gl-mlink>svg.i{font-size:20px;margin-top:1px;color:var(--muted);flex:none}
.gl-mlink b{display:block;font-size:16px;font-weight:600}
.gl-mlink small{display:block;font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.gl-money.is-warn .gl-mlink>svg.i,.gl-money.is-warn .gl-mlink small{color:var(--mari-ink)}
@media (hover:hover) and (pointer:fine){.gl-mlink:hover b{text-decoration:underline;text-underline-offset:4px}}

/* ---- Home: Up next (the next three dated jobs) */
.up-count{font-size:15px;color:var(--muted);margin:-4px 0 6px}
.upnext{list-style:none;padding:0}
.upnext li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:6px 0;border-top:1px solid var(--line)}
.up-tick{display:flex;align-items:flex-start;gap:12px;min-height:var(--tap);flex:1 1 220px;min-width:0;cursor:pointer;padding-top:8px;touch-action:manipulation}
.up-tick input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--ink)}
.up-main b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.up-main small{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.upnext li.is-late .up-main small{color:var(--mari-ink);font-weight:600}
.upnext li .btn{margin-left:34px}
@media (min-width:760px){.upnext li .btn{margin-left:0}}

/* ---- search: quick actions, costs and tasks with a one-tap action, dietary words */
.results small{font-size:14.5px}
.results li.s-row{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line2)}
.results li.s-row>a{border-top:0;flex:1;min-width:0}
.results li.s-row>.btn{display:inline-flex;width:auto;flex:none;border:1px solid var(--line);border-radius:var(--pill);padding:0 14px;min-height:var(--tap);background:var(--paper);text-align:center}
.results li.s-row>span{flex:none;padding:0 8px}
.s-quick{margin-bottom:10px}
.s-quick li a,.s-quick li button{font-weight:600}

/* ---- budget: contracts, schedule, month view */
.bgt-contracts{display:flex;align-items:flex-start;gap:8px;font-size:15px;margin-top:10px}
.bgt-contracts>svg.i{font-size:18px;margin-top:3px;color:var(--muted);flex:none}
.bgt-contracts .link{min-height:var(--tap);font-size:15px;padding:0 2px}
.bgt-head small{font-size:14.5px}
.pays li{font-size:15px}
.pays li small{font-size:14.5px}
.bgt-h4{font:600 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.bgt-c-box{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin:10px 0;display:grid;gap:2px;background:var(--bg)}
.bgt-c-box .small,.bgt-c-line .small{font-size:15px}
.bgt-c-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.bgt-view{margin-top:0;flex:0 0 auto}
.bgt-view button{flex:1 0 auto;min-height:var(--tap);padding:0 16px;border:0;border-radius:26px;background:transparent;font-weight:600;font-size:15px;color:var(--muted)}
.bgt-view button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #0001}
.bgt-month{margin-top:14px}
.bgt-month h3 small,.ed-h3 small{font-size:14.5px;font-weight:400;color:var(--muted);margin-left:6px}
details.bgt-c{border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--paper)}
details.bgt-c[open]{padding-bottom:12px}
details.bgt-c>summary{display:flex;align-items:center;min-height:var(--tap);font-weight:600;font-size:15px;cursor:pointer}
details.bgt-c .row2{margin-top:8px}
.bgt-c-signed{align-self:end}
.bs-paid{align-self:end;padding-bottom:12px}

/* ---- Your plan: dated jobs */
.cl-list li.cl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:4px 0}
.cl-row>label{grid-column:1;font-size:15px}
.cl-row .cl-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding-left:30px}
.cl-row>.iconx{grid-column:2;grid-row:1/span 2}
.cl-date{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0;border:0;background:none;color:var(--ink2);font-size:15px;text-align:left}
.cl-date svg.i{font-size:14px;color:var(--muted)}
.cl-row.is-late .cl-date{color:var(--mari-ink);font-weight:600}
.cl-row .cl-meta .link{font-size:15px}
.cl-add .row2{margin-top:0}

/* ---- On the day: copy for the caterer */
.cat-copy{display:grid;gap:4px;margin:4px 0 16px}
.cat-copy .btn{justify-self:start}
.cat-text{width:100%;font:14px/1.45 ui-monospace,Consolas,monospace;white-space:pre}
.exports li.exp-book .ic{background:var(--mari-soft);color:var(--mari-ink)}

/* ---- the preview phone: the design's poster until the live page has drawn (it was a blank grey phone for ~3 s) */
.device .mirror-poster{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;background:var(--bg);transition:opacity .35s ease,visibility .35s}
.device .mirror-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.device .mirror-poster span{position:relative;margin-bottom:14px;background:#1c1c1cd9;color:#fff;font-size:13px;padding:6px 12px;border-radius:12px}
.device.is-ready .mirror-poster{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.device .mirror-poster{transition:none}}
/* the date sits close under its job: the label's text at its foot, the date's text at its head (both stay 44px tall) */
.cl-list .cl-row>label{align-items:flex-end;padding-bottom:2px}
.cl-row .cl-date{align-items:flex-start;padding-top:4px}
.cl-row .cl-meta .link{align-items:flex-start;padding-top:4px}
@media (max-width:759px){.gl-money .btn{margin-left:30px}}
.cl-list:has(.cl-row){gap:0}
.cl-list li.cl-row{row-gap:0;padding:2px 0 4px}
.cl-list .cl-row>label{min-height:40px}
/* v270: a space between the budget amount and its Change link (was "£24,000.00Change") */
.bgt-sum b+.link{margin-left:8px}