/* Layout rhythm and shared UI pieces. Loaded last, so it evens out spacing set elsewhere.
   Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 px. Sections are 32 px apart, a heading sits 12 px above its content. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px}

/* page structure */
.top{margin-bottom:var(--s5)}
#banners:empty,#zones:empty,#folderbar:empty{display:none}
#banners .banner{margin-bottom:var(--s4)}
.zones{gap:var(--s3);margin-bottom:var(--s4)}
.folderbar{gap:var(--s2);margin:0 0 var(--s5)}
#view>*:first-child{margin-top:0}
.pagetitle{font:800 26px/1.15 var(--display);letter-spacing:-.02em;margin:var(--s2) 0 var(--s5)}

/* headings: one style for section headings, with an optional info icon and actions on the right */
h2{margin:var(--s6) 0 var(--s3)}
h3{margin:var(--s5) 0 var(--s3);font:700 16px/1.25 var(--display)}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin:var(--s6) 0 var(--s3)}
.sechead h2,.sechead h3{margin:0;display:inline-flex;align-items:center;gap:var(--s2)}
#view>.sechead:first-child,#view>.exbar+.sechead,.panel .sechead:first-child,.ptagedit .sechead{margin-top:0}
.secacts{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.meta-line{color:var(--muted);font-size:13px}

/* panels and blocks */
.panel.pad{padding:var(--s4) 20px}
.kpis{gap:var(--s3);margin-bottom:var(--s5)}
.kpi{padding:14px var(--s4)}
.bar-actions{gap:var(--s2);margin-bottom:var(--s4)}
.filters{gap:var(--s3);margin-bottom:var(--s4)}
.note{line-height:1.5}
.rowline{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.start{margin-bottom:var(--s5)}
.start ol{margin-top:var(--s3)}
.empty{padding:32px 24px}
.foot{margin-top:var(--s5)}
.acct-co{padding:20px}

/* one-line toolbars (search, filters, sort, actions) */
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.toolbar input[type=search]{flex:1 1 220px;width:auto}
.toolbar .grow{flex:1}
.inline-field{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.inline-field input,.inline-field select{width:auto;min-width:0;color:var(--ink);font-weight:400}
.inline-field input[type=number]{width:84px}
.exbar{margin-bottom:var(--s4)}
.ptools{gap:var(--s2);margin-bottom:var(--s3)}
.ptagbar{margin-bottom:var(--s5)}

/* info icon + popover */
/* (named infobtn so it never collides with the "info" kind of toast) */
.infobtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:var(--cur-pointer);flex:none;vertical-align:middle}
.infobtn:hover,.infobtn[aria-expanded="true"]{color:var(--accent-text);background:var(--accent-soft)}
.infobtn .ic{position:static;margin:0}
.sechead .infobtn{margin-left:-2px}
.infotip{position:fixed;z-index:95;max-width:340px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.5;padding:10px 12px;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.infotip[hidden]{display:none}

/* calendar legend as colour dots instead of a sentence */
.callegend{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 var(--s3)}
.callegend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:-8px;background:currentColor}
.callegend .dot.ok{color:var(--good)}.callegend .dot.warn{color:var(--warn)}.callegend .dot.bad{color:var(--bad)}
.cal-head{margin:0 0 var(--s3)}

/* recipe editor: photo next to the fields */
.rmgrid{grid-template-columns:180px minmax(0,1fr)}
@media (max-width:600px){.rmgrid{grid-template-columns:minmax(0,1fr)}.rmgrid .pmphoto{max-width:180px}}
.rgrid .rcard .pbody{padding:12px 14px 14px}

/* ---------- Overview dashboard ---------- */
:root{--c-fixed:var(--accent-deep);--c-var:#8FB8A0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-var:#3E6B52}}
:root[data-theme="dark"]{--c-var:#3E6B52}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot.df{background:var(--c-fixed)}.dot.dv{background:var(--c-var)}
.kpi small .dot{margin-right:6px;vertical-align:1px}
.dstrip{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:10px var(--s4);border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:calc(-1 * var(--s2)) 0 0;font-size:14px}
.dlegend{display:inline-flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dlegend .dot{margin-right:-6px}
.dlegend .tick{width:14px;height:0;border-top:2px solid var(--ink);margin-right:-6px}
.dchart{display:flex;gap:6px;align-items:flex-end;padding:18px var(--s4) 10px;overflow-x:auto}
.dcol{flex:1 0 40px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;border-radius:6px}
.dcol:hover .dstack i{filter:brightness(1.08)}
.dstack{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-start;width:100%;max-width:44px;height:124px}
.dstack i{display:block;width:100%;min-height:0}
.dstack i:nth-child(1 of i){border-radius:0 0 3px 3px}.dstack i:nth-last-child(1 of i){border-radius:3px 3px 0 0}
.dstack i.df{background:var(--c-fixed)}
.dstack i.dv{background:var(--c-var)}
.dsale{position:absolute;left:-3px;right:-3px;height:0;border-top:2px solid var(--ink);z-index:1}
.dlab{font:500 11px/1 var(--mono);color:var(--muted)}
.dcol[aria-pressed="true"] .dlab{color:var(--ink);font-weight:700}
.dcol[aria-pressed="true"]{background:var(--surface-2)}
.dcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s5);margin-top:var(--s2)}
.dcols .sechead{margin-top:var(--s5)}
.clist{list-style:none;margin:0;padding:0}
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:10px var(--s4);border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow .cn{min-width:0;display:flex;flex-direction:column}
.crow .cn b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .cn small{color:var(--muted);font-size:12px}
.crow .ca{font-weight:600}
.crow .ctype{width:auto;padding:4px 6px;font-size:13px}
.cempty{padding:14px var(--s4);color:var(--muted);font-size:14px}
.cmore{display:block;margin:0 var(--s4) var(--s3)}
.cign{margin-top:var(--s5)}
.cign summary{cursor:var(--cur-pointer);color:var(--muted);font-size:14px;margin-bottom:var(--s2)}
.chip.fixed{color:var(--accent-text);border-color:var(--accent-deep)}
/* "to review" is about the data, not money: soft blue fill so it never reads like the red overdue date */
.chip.review{background:var(--tc0-bg);color:var(--tc0-fg);border-color:transparent;display:inline-flex;align-items:center;gap:4px}
.chip.review .ic{position:static;margin:0}

/* cost type switch inside the invoice editor */
.ctblock{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 var(--s3);background:var(--surface-2)}
.ctrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.ctlabel{display:inline-flex;align-items:center;gap:4px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.ctblock .segs .btn{padding:6px 12px;font-size:14px}
.ctscope{display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;margin-top:var(--s2);font-size:14px}
.ctscope label{display:inline-flex;align-items:center;gap:6px}
.ctscope input{width:16px;height:16px;accent-color:var(--accent-deep)}

/* ---------- Cuadre cursor: dark arrow with the green "cuadre" bars; green over anything clickable ---------- */
/* the cursor files are set once in styles.css (--cur-arrow / --cur-pointer); every clickable thing uses them */
html,body,.overlay,.modal,.panel{cursor:var(--cur-arrow)}
a,button,summary,label[for],label.chk,select,[data-act],[role="tab"],[role="button"],.zone,.pcard,.ptag,.sw,.dcol,.mcol,tr[data-act],.toast button,input[type=checkbox],input[type=radio],input[type=file],input[type=date]::-webkit-calendar-picker-indicator{cursor:var(--cur-pointer)}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([readonly]),textarea{cursor:text}
button:disabled,.zone[disabled],[aria-disabled="true"]{cursor:not-allowed}
.spin,.tt{cursor:inherit}

@media (max-width:560px){
  h2,.sechead{margin-top:var(--s5)}
  .panel.pad{padding:var(--s4)}
  .toolbar .inline-field{flex:1 1 100%;justify-content:space-between}
}

/* costs added by hand */
.cfoot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4)}
.cfoot .cmore{margin:0}
.cadd{padding:6px 12px;font-size:14px}
.cadds{justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.crow .cedit{padding:0;text-align:left;color:var(--ink);text-decoration:none}
.crow .cedit:hover b{text-decoration:underline}
.cothers{margin:var(--s2) 0 0}
.cothers .linkbtn{padding:0}
.cmodal{max-width:560px}
.cmodal .segs{display:flex;flex-wrap:wrap;gap:6px}
.cmodal .seg{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;font-weight:600}
.cmodal .seg.on{background:var(--accent-soft);border-color:var(--accent-deep);color:var(--accent-text)}
.cpaid{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px}
.cpaid li{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line)}
.cpaid li:last-child{border-bottom:0}
.cpaid .chk{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.cpaid input{width:16px;height:16px;accent-color:var(--accent-deep)}
.cpaid small{flex-basis:100%;margin:0 0 0 24px}
.cal-i.man{border-style:dashed}.cmodal .field{margin-bottom:var(--s3)}
.cmodal h3{margin-bottom:var(--s3)}

/* date picker */
.dpbtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 9px;text-align:left;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.dpbtn .ph{color:var(--muted);font-family:var(--sans,inherit)}
.dpbtn .ic{color:var(--muted);flex:none}
.dpbtn:hover{border-color:var(--accent-deep)}.dpbtn:hover .ic{color:var(--accent-text)}
.dpbtn[aria-expanded="true"]{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--glow)}
.inline-field .dpbtn{width:auto}
.dpop{position:fixed;z-index:1000;width:288px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 12px 32px rgba(4,32,15,.16),0 2px 6px rgba(4,32,15,.08)}
.dphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dphead b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;text-transform:capitalize}
.dpnav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:8px;background:none;color:var(--muted)}
.dpnav:hover{background:var(--accent-soft);color:var(--accent-text)}
.dpgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpdow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.04em}
.dpday{height:36px;border:0;border-radius:8px;background:none;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.dpday:hover{background:var(--surface-2)}
.dpday.today{box-shadow:inset 0 0 0 1.5px var(--accent-deep);color:var(--accent-text);font-weight:700}
.dpday.on{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:none}
.dpday:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dpfoot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dpfoot .linkbtn{padding:4px 2px}
/* Financials sub-tabs and analytics */
.subtabs.fin{margin-top:calc(-1 * var(--s2))}
.backline{margin:0 0 var(--s3)}.backline .linkbtn{padding:0}
.asec{margin-top:var(--s6,40px);padding-top:var(--s5);border-top:1px solid var(--line)}
.kpi.txt strong{font:700 17px/1.3 'Figtree',system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mbar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px;margin-bottom:var(--s3);background:var(--surface-2)}
.mbar i{display:block;min-width:3px;background:var(--tf)}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 44px;gap:var(--s3);align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.mlist li:last-child{border-bottom:0}
.mdot{width:10px;height:10px;border-radius:3px;background:var(--tf)}
.mn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp{color:var(--muted);text-align:right;font-size:13px}
.rank{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px var(--s4);border-bottom:1px solid var(--line)}
.rank li:last-child{border-bottom:0}
.rn{font:600 13px/1 var(--mono);color:var(--muted);text-align:center}
.rb{display:flex;flex-direction:column;gap:3px;min-width:0}
.rb b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbar{display:block;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.rbar i{display:block;height:100%;background:var(--accent-deep);border-radius:2px}
.ra{font-weight:600}
.rtable tbody tr{cursor:var(--cur-pointer)}
.rtable tr.gap td{text-align:center;color:var(--muted);background:var(--surface-2)}
.mpill{display:inline-block;min-width:44px;text-align:center;font:700 13px/1 var(--mono);padding:4px 8px;border-radius:999px;background:var(--surface-2)}
.mpill.good{background:var(--accent-soft);color:var(--accent-text)}
.mpill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
/* files attached to a cost */
.cfiles{list-style:none;margin:0 0 var(--s2);padding:0;border:1px solid var(--line);border-radius:10px}
.cfiles li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.cfiles li:last-child{border-bottom:0}
.cfiles .ic{color:var(--accent-text);flex:none}
.cfiles a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.cfrm{display:inline-flex;border:0;background:none;color:var(--muted);padding:4px;border-radius:6px}
.cfrm:hover{color:var(--bad);background:var(--surface-2)}
.cfacts{display:flex;gap:8px;flex-wrap:wrap}
.cfacts .btn{padding:6px 12px;font-size:14px}
.dpanel{margin-top:var(--s2);border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--surface-2)}
.dpanel input[type=search]{margin-bottom:6px}
.dlist{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.dlist button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:8px;border-radius:8px;color:var(--ink)}
.dlist button:hover:not(:disabled){background:var(--surface)}
.dlist button:disabled{opacity:.6;cursor:default}
.dlist .ic{color:var(--muted);flex:none}
.dn{display:flex;flex-direction:column;min-width:0}
.dn b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmsg{margin:6px 4px}
/* =====================================================================
   Type scale and spacing pass (loaded last; wins over earlier sizes)
   Type: 12 caption · 13 meta · 14 UI text · 16 body · 18 h3 · 20 h2 · 24 page title · 32 display.
   Nothing below 12 px. Inputs are 16 px so phones do not zoom in.
   Spacing: rows and tables share one 16 px inner edge, so panels line up.
   ===================================================================== */
:root{--fs-xs:12px;--fs-sm:13px;--fs-md:14px;--fs-base:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:24px;--fs-3xl:32px;--edge:16px}
body{font-size:var(--fs-base);line-height:1.5}
h2{font-size:var(--fs-xl);line-height:1.25}
h3,.start h3,.ptagedit h3{font-size:var(--fs-lg);line-height:1.3}
.modal h3,.empty h3{font-size:var(--fs-xl)}
.pagetitle{font-size:var(--fs-2xl)}
.kpi strong{font-size:var(--fs-2xl)}
.kpi.txt strong{font-size:var(--fs-lg)}
.zone b,.cal-head b{font-size:var(--fs-lg)}
.hero p{font-size:var(--fs-lg)}
.feat b{font-size:var(--fs-lg)}
.avatar.lg{font-size:var(--fs-3xl)}
.tagp{font-size:var(--fs-md)}
.prov{font-size:var(--fs-base)}
.fine,.tt{font-size:var(--fs-sm)}
/* the smallest text: never under 12 px */
.chip{font-size:var(--fs-xs);padding:4px 8px}
.cal-i,.cal-more,.mcol span,.mcol .v,.dlab,.dpdow,svg .ax{font-size:var(--fs-xs)}
@media(max-width:640px){.cal-i{font-size:var(--fs-xs)}}
/* secondary text in one size */
.note,.meta-line,.sub,.zone span,.job .ms,.alert .meta,.legend,.callegend,.dlegend,.err,.toast span.s,.infotip,.pdesc,.pmeta,.inline-field,.crow .ctype{font-size:var(--fs-sm)}
.crow .cn small,.rb small,.dn small,.psup,td small,.kpi em.note,.kpi small,.field label,th,.shead,.ctlabel{font-size:var(--fs-xs)}
/* UI text: rows, tables, buttons, menus */
td,.row,.crow,.rank li,.mlist li,.sdoc,.cempty,.btn,.tab,.dstrip,.banner,.job,.cfiles li,.ctscope,.hist table,.rres{font-size:var(--fs-md)}
.btn.big{font-size:var(--fs-base)}
.tabs>.tab{font-size:var(--fs-base)}
input,select,textarea,.dpbtn{font-size:var(--fs-base)}
.inline-field input,.inline-field select,.crow .ctype{font-size:var(--fs-md)}

/* controls: one height (40 px) and comfortable padding */
.btn{padding:8px 16px;min-height:40px}
.btn.ico{width:40px;height:40px;min-height:40px}
.btn.cadd,.cfacts .btn,.ctblock .segs .btn{min-height:36px;padding:6px 14px}
.rfrac .btn{min-height:28px;padding:3px 12px}
input,select,.dpbtn{padding:8px 12px;min-height:40px;border-radius:8px}
.inline-field input,.inline-field select,.crow .ctype{min-height:34px;padding:5px 10px}
textarea{padding:10px 12px;border-radius:8px}
.field{gap:6px}
.grid2{gap:var(--s4);margin-bottom:var(--s4)}
.filters{gap:var(--s4)}
.toolbar{gap:var(--s3)}

/* panels and rows: a shared 16 px inner edge */
.panel.pad{padding:20px}
th,td{padding:10px 12px}
th:first-child,td:first-child{padding-left:var(--edge)}
th:last-child,td:last-child{padding-right:var(--edge)}
.row{padding:12px var(--edge)}
.alert summary{padding:14px var(--edge)}
.hist{padding:0 var(--edge) var(--s4)}
.srow summary,.shead{padding-left:var(--edge);padding-right:var(--edge)}
.sdocs{padding:2px var(--edge) var(--s3)}
.crow{padding:12px var(--edge)}
.rank li{padding:12px var(--edge)}
.cempty{padding:var(--s4) var(--edge)}
.drow .sel{width:48px}
.paytog{margin:0 var(--s3)}
.kpi{padding:var(--s4) 20px}
.kpi small{margin-bottom:4px}
.empty{padding:var(--s6) 28px}
.modal{padding:24px}
.modal.login{padding:28px 28px 24px}
.ptagedit{padding:20px;margin-bottom:var(--s4)}
.pbody{padding:12px 14px 14px;gap:8px}
.pgrid{gap:var(--s4)}
.subtabs{margin-bottom:var(--s5)}
.subtabs .tab{padding:10px 14px 9px}
.ptagbar{gap:var(--s2)}
.ptag{padding:6px 10px}
.cal{gap:6px}
.cal-c{padding:6px;gap:4px}
.cal-i{padding:3px 6px}
.months{padding:var(--s4) var(--s4) var(--s2)}
.dchart{padding:20px var(--s4) 12px}
.banner{padding:12px var(--s4)}
.selbar{margin-bottom:var(--s3)}
.cfoot{padding:var(--s3) var(--edge) var(--s4)}
.queue header,.job{padding-left:var(--edge);padding-right:var(--edge)}
.backline{margin-bottom:var(--s4)}
.asec{margin-top:40px;padding-top:var(--s6)}
.dstrip{margin-top:0;margin-bottom:var(--s5)}
.kpis+.dstrip{margin-top:calc(-1 * var(--s2))}
/* calendar lists */
.plist2{padding:var(--s1) 0}
.plist2 .drow{border-bottom:1px solid var(--line)}
.plist2 .drow:last-child{border-bottom:0}
.plist2 .sdoc{padding:10px var(--edge);border-radius:0}

/* "Show more / See: 10 · 25 · 50 · All" footer under long lists */
.morebar{display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;margin-top:var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.panel>.morebar,.panel .morebar{margin:0;padding:var(--s3) var(--edge);border-top:1px solid var(--line)}
.morebar .mcount{font-variant-numeric:tabular-nums;margin-right:auto}
.morebar .mbtn{min-height:34px;padding:5px 14px;font-size:var(--fs-md)}
.morebar .msee{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
.morebar .msee>span{margin-right:4px}
.mchip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 12px;min-height:30px;font:600 var(--fs-sm)/1 var(--body);font-variant-numeric:tabular-nums}
.mchip:hover{border-color:var(--accent-deep)}
.mchip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-deep);color:var(--accent-text)}
.morebar.compact{justify-content:space-between}
.morebar.compact .mcount{margin-right:0}
@media(max-width:560px){.morebar .mcount{flex-basis:100%}}/* rows without the paid tick keep the same right edge as rows with it */
.paysp{flex:none;width:58px}
/* <small> shrinks relative to its parent; pin it to the caption size */
small{font-size:var(--fs-xs)}
.start ol{gap:var(--s3)}
/* toolbar and heading controls share the 40 px height and 16 px text of the search box */
.toolbar .inline-field input,.toolbar .inline-field select,.sechead .inline-field select,.sechead .inline-field input{min-height:40px;padding:8px 12px;font-size:var(--fs-base)}
.toolbar .inline-field input[type=number]{width:96px}
/* calendar rows: a fixed status column so amounts line up across both lists */
.plist2 .sdoc{grid-template-columns:96px minmax(0,1fr) auto 176px}
.plist2 .sdoc>.chip{justify-self:end}
@media(max-width:680px){.plist2 .sdoc{grid-template-columns:84px minmax(0,1fr) auto}.plist2 .sdoc>.chip{display:none}}
/* where the money goes: the same light colours as the product tags, with a soft edge so pale ones still read */
.mbar{background:none;height:16px;gap:3px}
.mbar i{background:var(--tb);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tf) 30%,var(--tb));border-radius:4px}
.mdot{width:12px;height:12px;border-radius:4px;background:var(--tb);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tf) 40%,var(--tb))}
/* Analysis tab */
.famlink{margin-top:var(--s4)}
.famlink summary{padding:var(--s2) 0}
.mlist.pad2{padding:var(--s2) var(--edge)}
.repr{grid-template-columns:150px minmax(0,1fr) auto}
.repr .repacts{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){.repr{grid-template-columns:minmax(0,1fr)}.repr .repacts{justify-content:flex-start}}
/* every panel keeps 24 px from whatever follows it (summary boxes, another panel, a toolbar);
   a 'Show more' footer stays close to its own list */
#view .panel:not(:last-child){margin-bottom:var(--s5)}
#view .panel+.morebar{margin-top:calc(var(--s3) - var(--s5))}
#view .panel.start{margin-bottom:var(--s5)}
/* sub-tab icons: same treatment as the main menu, a size smaller */
.subtabs .tab{gap:7px}
.subtabs .tab .ic{position:relative;top:-1px;color:currentColor;opacity:.85}
.subtabs .tab[aria-selected="true"] .ic{color:var(--accent-text);opacity:1}

/* =====================================================================
   Accessibility pass against WCAG 2.2 AA (what EN 301 549 / the EU Accessibility Act points to)
   ===================================================================== */
/* status colours: at least 4.5:1 as small text on white, panels and the page (were 4.1-4.4) */
:root{--bad:#C8291F;--good:#087A43;--warn:#9A5B00;--field:#7D8F84;--focus:var(--accent-deep);--sel:#B7EFCF;--sel-ink:#04200F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bad:#FF7B70;--good:#5BE0A0;--warn:#F2B357;--field:#5C7366;--focus:var(--accent);--sel:#1E6B45;--sel-ink:#EAF5EE}}
:root[data-theme="dark"]{--bad:#FF7B70;--good:#5BE0A0;--warn:#F2B357;--field:#5C7366;--focus:var(--accent);--sel:#1E6B45;--sel-ink:#EAF5EE}
/* form fields show their edge at 3:1 (1.4.11); buttons keep the light border, their text identifies them */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea,.dpbtn,.crow .ctype{border-color:var(--field)}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover,.dpbtn:hover{border-color:var(--accent-deep)}
/* keyboard focus: a 2 px ring at 3:1 or more in both themes */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
/* text selection in Cuadre green instead of the browser blue */
::selection{background:var(--sel);color:var(--sel-ink)}
/* a focused field scrolls clear of the sticky header (2.4.11) */
html{scroll-padding-top:calc(var(--hdr,140px) + 12px)}
/* pointer targets at least 24 px tall (2.5.8) */
.linkbtn{min-height:24px}
.linkbtn:not(.cmore):not(.cedit){display:inline-flex;align-items:center}
.site-foot a{display:inline-flex;align-items:center;min-height:24px}
.cal-i{min-height:24px;line-height:16px;padding-top:3px;padding-bottom:3px}
.cal-i::before{margin-right:3px}
/* status is never colour alone: a mark in front of each calendar entry */
.cal-i.ok::before{content:"✓";font-weight:700}
.cal-i.bad::before{content:"!";font-weight:800;padding:0 2px}
/* hidden but read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* headline type: balanced lines, no orphans */
h1,h2,h3,.pagetitle,.hero-h{text-wrap:balance}
p,.note{text-wrap:pretty}/* white on the light dark-mode green fails; dark text there */
:root{--good-ink:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--good-ink:#03200F}}
:root[data-theme="dark"]{--good-ink:#03200F}
.tagp.down,.paytog.on{color:var(--good-ink)}
/* rows with two figures on the right (price rises, ups and downs): fixed columns so the numbers line up row to row */
.crow.c3{grid-template-columns:minmax(0,1fr) 84px 96px}
.crow.c3>.mono{text-align:right;justify-self:end;white-space:nowrap}
.crow .cx{color:var(--muted);font-size:var(--fs-sm);margin:0}
@media(max-width:520px){.crow.c3{grid-template-columns:minmax(0,1fr) auto}.crow.c3>.cx{grid-column:2}}

/* =====================================================================
   Cuadre's own form controls
   ===================================================================== */
:root{--ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23586A5F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586A5F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AB0A3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AB0A3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2303200F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{
  --ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239AB0A3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  --ico-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AB0A3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ico-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2303200F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* fields: one look, a green edge on hover and a green ring when in use */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,.dpbtn,.sxbtn{border-radius:10px;transition:border-color .12s,box-shadow .12s}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,textarea:focus,.dpbtn:focus-visible,.sxbtn:focus-visible,.sxbtn[aria-expanded="true"]{outline:none;border-color:var(--focus);box-shadow:0 0 0 2px var(--focus)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}

/* dropdowns */
.sx-native{display:none!important}
.sxbtn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:8px 12px 8px 14px;background:var(--surface);border:1px solid var(--field);color:var(--ink);font:inherit;font-size:var(--fs-base);text-align:left;max-width:100%}
.sxbtn.fill{width:100%}
.sxbtn:hover:not(:disabled){border-color:var(--accent-deep)}
.sxbtn:disabled{opacity:.55;cursor:not-allowed}
.sxbtn .sxv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxbtn .sxchev{flex:none;color:var(--muted);transition:transform .15s}
.sxbtn:hover .sxchev,.sxbtn[aria-expanded="true"] .sxchev{color:var(--accent-text)}
.sxbtn[aria-expanded="true"] .sxchev{transform:rotate(180deg)}
.inline-field .sxbtn{font-weight:400}
.crow .sxbtn.ctype{min-height:34px;padding:5px 10px 5px 12px;font-size:var(--fs-md);gap:8px}
.sxpop{position:fixed;z-index:1000;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;overflow-y:auto;max-width:calc(100vw - 16px);box-shadow:0 12px 32px rgba(4,32,15,.16),0 2px 6px rgba(4,32,15,.08)}
.sxopt{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:36px;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:var(--fs-md);text-align:left;white-space:nowrap}
.sxopt:hover{background:var(--surface-2)}
.sxopt:focus-visible{outline:none;background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--focus)}
.sxopt[aria-selected="true"]{color:var(--accent-text);font-weight:600}
.sxopt .ic{color:var(--accent-text);flex:none}
.sxopt:disabled{opacity:.45;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){.sxbtn .sxchev{transition:none}}

/* search boxes: a magnifier on the left, our own clear button */
input[type=search]{padding-left:40px;background:var(--surface) var(--ico-search) no-repeat 13px 50%/18px 18px}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-left:8px;background:var(--ico-x) no-repeat center/16px 16px;cursor:var(--cur-pointer)}

/* numbers: no tiny spin arrows */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* checkboxes and radios */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--field);background:var(--surface);display:inline-grid;place-content:center;vertical-align:middle;transition:background .12s,border-color .12s}
input[type=checkbox]{border-radius:6px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--accent-deep)}
input[type=checkbox]:checked{background:var(--accent-deep) var(--ico-tick) no-repeat center/14px 14px;border-color:var(--accent-deep)}
input[type=radio]:checked{border-color:var(--accent-deep);box-shadow:inset 0 0 0 4px var(--surface);background:var(--accent-deep)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5}
/* sales vs purchases charts: soft bars with a crisp edge, so the purchases line reads as clearly as the bars */
:root{--c-sales-soft:#BDEBD2;--c-sales-edge:#0A8F4D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-sales-soft:#1D4D35;--c-sales-edge:#2FBF7A}}
:root[data-theme="dark"]{--c-sales-soft:#1D4D35;--c-sales-edge:#2FBF7A}
svg .sbar{fill:var(--c-sales-soft);stroke:var(--c-sales-edge);stroke-width:1.5}
.key-bar{background:var(--c-sales-soft);box-shadow:inset 0 0 0 1.5px var(--c-sales-edge)}
svg .ax.lbl{font-weight:700;font-size:var(--fs-xs);paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}

/* =====================================================================
   Plans and payments
   ===================================================================== */
/* documents used this month, in the header */
.uchip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 var(--fs-md)/1 var(--body);font-variant-numeric:tabular-nums}
.uchip .ic{color:var(--accent-text)}
.uchip:hover{border-color:var(--accent-deep)}
.uchip.full{border-color:var(--warn);color:var(--warn)}.uchip.full .ic{color:var(--warn)}
.plan-use .pu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.eyebrow{display:block;color:var(--muted);font-size:var(--fs-sm);font-weight:600;margin-bottom:2px}
.pu-plan{font:800 var(--fs-xl)/1.2 var(--display)}
.pu-num{margin:var(--s4) 0 var(--s2);font-size:var(--fs-md);color:var(--muted)}
.pu-num b{font:800 28px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.ubar{height:10px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.ubar i{display:block;height:100%;border-radius:inherit;background:var(--accent-deep);transition:width .3s}
.ubar.full i{background:var(--warn)}
.pu-facts{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:4px;color:var(--muted);font-size:var(--fs-md)}
.pu-facts .bad{color:var(--bad);font-weight:600}
.segs.cycle{margin-bottom:var(--s4)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:var(--s5) var(--s4) var(--s4);box-shadow:var(--shadow)}
.plan.pop{border-color:var(--accent-deep);box-shadow:0 0 0 1px var(--accent-deep),var(--shadow)}
.plan.cur{background:var(--accent-soft)}
.plan-badge{position:absolute;top:-11px;left:var(--s4);background:var(--accent-deep);color:var(--good-ink);font-size:var(--fs-xs);font-weight:700;padding:3px 10px;border-radius:999px}
.plan h3{margin:0 0 var(--s2);font:800 var(--fs-lg)/1.2 var(--display)}
.plan-price{display:flex;align-items:baseline;gap:4px}
.plan-price b{font:800 32px/1.1 var(--display);font-variant-numeric:tabular-nums}
.plan-price span{color:var(--muted);font-size:var(--fs-md)}
.plan .note{margin:var(--s1) 0 var(--s3)}
.plan ul{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:8px;font-size:var(--fs-md)}
.plan li{display:flex;gap:8px;align-items:flex-start}.plan li .ic{flex:none;color:var(--accent-text);margin-top:2px}
.plan-act{margin-top:auto}.plan-act .btn{width:100%;justify-content:center}
.plan-act .chip{display:inline-flex;align-items:center;gap:4px}
.hist-t{width:100%;border-collapse:collapse}
.hist-t th,.hist-t td{padding:10px var(--s4);border-bottom:1px solid var(--line);text-align:left}
.hist-t tr:last-child td{border-bottom:0}
.hist-t .num{text-align:right;font-variant-numeric:tabular-nums}
/* public home page */
.pricing{margin:var(--s6,48px) 0 var(--s5)}
.pricing-h{font:800 var(--fs-2xl)/1.15 var(--display);margin:0 0 var(--s1)}
.pricing>.note{margin:0 0 var(--s4)}
/* sign-in dialog: forgotten password, confirmations */
.login .linkbtn.forgot{align-self:flex-start;padding:0;font-size:var(--fs-sm)}
.okmsg{display:flex;gap:8px;align-items:flex-start;background:var(--accent-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:var(--fs-md)}
.okmsg .ic{flex:none;color:var(--accent-text);margin-top:1px}
/* Stripe's embedded payment form dialog */
.modal.pay{max-width:560px;width:calc(100% - 32px);max-height:calc(100vh - 32px);overflow-y:auto}
.modal.pay #checkout-form{margin-top:var(--s3);min-height:240px}