/* LuPop v7.0x accessibility and reliability polish. */
/* Preserve the Ocean welcome design while allowing short screens to scroll.
   Auto margins centre a fitting panel, but never centre oversized content above
   the viewport where it cannot be reached. Never change stored records here. */
#welcomeGate.welcome-gate{overflow-y:auto;overflow-x:hidden;align-items:flex-start;overscroll-behavior-y:contain}
#welcomeGate .welcome-inner{flex:0 0 auto;min-height:0;margin-block:auto;padding-block:12px}
.welcome-inner>button{flex-shrink:0}
.welcome-install-hint{max-width:310px;font-size:14px;line-height:1.45;margin:12px 0 0;color:#07383e}
.welcome-install-help{width:100%;max-width:310px;margin-top:12px;text-align:left;font-size:14px;line-height:1.5;color:#07383e}
.welcome-install-help summary{min-height:44px;padding:10px 12px;border:2px solid #07383e;border-radius:14px;cursor:pointer;font-weight:900}
.welcome-install-help p{overflow-wrap:anywhere;margin:10px 0}
:where(button,[role="button"],input,select,textarea,a,summary):focus-visible{
  outline:3px solid #172126;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(186,255,0,.72);
}
body[data-theme="night"] :where(button,[role="button"],input,select,textarea,a):focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 6px rgba(186,255,0,.62);
}
[role="button"]{cursor:pointer}
[role="dialog"][aria-hidden="true"]{visibility:hidden}
.storage-recovery-note{border:2px solid #d09500;background:#fff7d6;color:#503700}
/* Private-service CRUD must remain readable and tappable with long names. */
#serviceLibraryList .private-library-row{flex-wrap:wrap}
#serviceLibraryList .private-library-row .library-main{flex-basis:150px}
#serviceLibraryList .private-library-row .library-name,
#serviceList .service-name,.invoice-service-variant,.invoice-service-button span:first-child{overflow-wrap:anywhere;min-width:0}
#serviceLibraryList .private-library-row .library-actions{max-width:none;flex-wrap:wrap}
#serviceLibraryList .private-library-row .library-actions button{min-height:44px;height:auto;min-width:44px;font-size:12px}
.invoice-service-choice>span:first-child{flex:1;min-width:0}
.invoice-service-rate{flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* Persistent validation feedback; do not rely on colour alone. */
[data-lupop-feedback]{padding:12px;border:2px solid #ac2340;border-radius:10px;background:#fff2f4;color:#66152a;overflow-wrap:anywhere;font-weight:700}
[data-lupop-invalid]{outline:2px solid #ac2340;outline-offset:2px}
/* Flex items must be able to shrink below native date input intrinsic widths. */
.row>*{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
#allToolsGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
#allToolsGrid .quick{min-width:0;aspect-ratio:auto;overflow-wrap:anywhere}
/* These four primary backgrounds are too light for normal-sized white text. */
body:is([data-theme="ocean"],[data-theme="bright"],[data-theme="bush"],[data-theme="night"]) .primary{color:#111a1f}
body:not([data-theme="night"]) .nav button:not(.active){color:#707070!important}
body:is([data-theme="ocean"],[data-theme="bright"],[data-theme="bush"]) .nav button.active{color:#075b68!important}
.nav button.active{text-decoration:underline;text-underline-offset:3px}
.note-filters button.active,.earn-tabs button.active,.invoice-filter-row button.active{box-shadow:inset 0 -3px 0 currentColor}
/* Preserve full client names without letting unbroken pasted text widen the page. */
.list-card>div:last-child{min-width:0;overflow-wrap:anywhere}
#clientProfile{overflow-wrap:anywhere}
#invoiceList .section-top>div{min-width:0;overflow-wrap:anywhere}
#invoiceList .section-top>b{flex-shrink:0}
#invoices .invoice-filter-row button.active{color:#111a1f}
@media (max-width:360px){#reports>.card:first-of-type>.row{flex-direction:column}}