/* Shared app design, with browser-only navigation and touch layouts. */
[data-own-customer][hidden],#own-customer-no-matches[hidden]{display:none!important}
body[data-runtime=web] :is(.web-menu-toggle,.web-menu-close,.web-menu-backdrop){display:none}
body[data-runtime=web] .modalveil{z-index:120}
body[data-runtime=web] :is(.main,.content,.card,.authinner,.formgrid>*,.toolbar>*){min-width:0}
body[data-runtime=web] .authstory h1{max-width:100%}
body[data-runtime=web] .authstory .floating{width:100%;max-width:470px}
body[data-runtime=web] .sidebar{overflow-y:auto;overscroll-behavior:contain}
/* Keep absolutely positioned screen-reader labels inside the scroll area. */
body[data-runtime=web] .tablewrap{position:relative;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body[data-runtime=web] :is(button,a,input,select,textarea){touch-action:manipulation}
body[data-runtime=web] :is(button,a,input,select,textarea):focus-visible{outline:3px solid #d99d2d;outline-offset:3px}
body[data-runtime=web] .ai-mini{right:max(24px,env(safe-area-inset-right));bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--web-keyboard-offset,0px))}
body[data-runtime=web] .ai-mini-chat{max-height:calc(var(--web-visible-height,100dvh) - 112px)}

@media screen and (max-width:1100px){
 body[data-runtime=web] .shell{display:block;padding:16px 24px;width:100%;max-width:none}
 body[data-runtime=web] .main{width:100%;padding:0}
 body[data-runtime=web] .sidebar{position:fixed;inset:12px auto 12px 12px;width:min(290px,calc(100vw - 32px));height:calc(100dvh - 24px);padding:26px 18px;overflow-x:hidden;overflow-y:auto;z-index:110;transform:translateX(calc(-100% - 24px));visibility:hidden;transition:transform .18s ease,visibility .18s;box-shadow:12px 0 45px #173e5530}
 body[data-runtime=web].web-menu-open{overflow:hidden}
 body[data-runtime=web].web-menu-open .sidebar{transform:none;visibility:visible}
 body[data-runtime=web] .sidebar .brand{font-size:15px;padding-right:26px;gap:10px}
 body[data-runtime=web] .sidebar .company{margin:24px 0;padding:16px 10px}
 body[data-runtime=web] .sidebar nav{display:flex;flex-direction:column;overflow:visible;padding:0;gap:5px}
 body[data-runtime=web] .sidebar nav button{width:100%;min-height:46px;padding:12px 10px;font-size:15px;white-space:normal;text-align:left}
 body[data-runtime=web] .web-menu-close{display:grid;place-items:center;position:absolute;right:10px;top:12px;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:inherit;font-family:inherit;font-size:30px;line-height:1;cursor:pointer}
 body[data-runtime=web] .web-menu-toggle{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid #c6d7e5;border-radius:12px;background:#fff;color:#194863;cursor:pointer}
 body[data-runtime=web] .web-menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:100;border:0;background:#12334866;cursor:pointer}
 body[data-runtime=web] .topbar{position:sticky;top:0;z-index:40;display:flex;flex-wrap:nowrap;gap:14px;min-height:68px;height:auto;padding:10px 0;background:#e2ecf5}
 body[data-runtime=web] .topbar>span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
 body[data-runtime=web] .topbar>.avatar{flex-shrink:0}
 body[data-runtime=web] .content{padding:22px 0 110px}
 body[data-runtime=web] .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-runtime=web] .restored-dashboard{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .restored-dashboard .dashboard-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
 body[data-runtime=web] .restored-dashboard .dashboard-right>.card{margin:0}
 body[data-runtime=web] :is(.account-split,.booking-with-receipt,.settings-layout,.invoice-compose,.ai-support-layout){grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .reserved-panel{display:none}
 body[data-runtime=web] .reportgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-runtime=web] .invoice-side{position:static}
}

@media screen and (max-width:700px){
 body[data-runtime=web] .shell{padding:8px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
 body[data-runtime=web] .topbar{gap:10px;min-height:64px;padding:8px 0;font-size:15px}
 body[data-runtime=web] .content{padding-top:20px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
 body[data-runtime=web] :is(.grid,.formgrid,.customer-postal-row,.invoice-item,.reportgrid,.report-summary,.ai-support-layout){grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .restored-dashboard .dashboard-right{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .titleline{gap:16px;margin-bottom:22px}
 body[data-runtime=web] .titleline h1{font-size:28px;line-height:1.2}
 body[data-runtime=web] .card{padding:22px 18px}
 body[data-runtime=web] .card.metric{padding:22px 18px}
 body[data-runtime=web] .metric .value{font-size:clamp(22px,6vw,32px);overflow-wrap:anywhere}
 body[data-runtime=web] .metric .small{line-height:1.5}
 body[data-runtime=web] .toolbar{gap:12px}
 body[data-runtime=web] .toolbar :is(input.search,.search,select){width:100%;max-width:100%;min-width:0}
 body[data-runtime=web] .toolbar .filters{flex-wrap:wrap}
 body[data-runtime=web] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;max-width:100%}
 body[data-runtime=web] :is(.btn,.link,.legal-link){min-height:44px}
 body[data-runtime=web] .registration-consent .legal-link{min-height:0}
 body[data-runtime=web] .formactions{gap:10px;flex-wrap:wrap}
 body[data-runtime=web] .formactions>.btn{flex:1;justify-content:center;min-width:min(100%,140px)}
 body[data-runtime=web] .chart-period{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
 body[data-runtime=web] .chart-period label{min-width:0;width:100%}
 body[data-runtime=web] .chart-period select{width:100%;min-width:0;padding-left:9px!important;padding-right:26px!important;background-position:right 7px center!important}
 body[data-runtime=web] .chart{overflow-x:auto;justify-content:space-between;gap:10px;padding-bottom:8px}
 body[data-runtime=web] .barcol{min-width:26px;flex-shrink:0}
 body[data-runtime=web] .bars{gap:3px}
 body[data-runtime=web] .todo-sort{max-width:100%;min-width:0}
 body[data-runtime=web] .personal-task{gap:10px}
 body[data-runtime=web] .personal-task>div{min-width:0;overflow-wrap:anywhere}
 body[data-runtime=web] .auth{min-height:100dvh;grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .authstory{padding:26px 24px}
 body[data-runtime=web] .authstory h1{font-size:32px}
 body[data-runtime=web] .authstory p{max-width:100%}
 body[data-runtime=web] .authform{padding:30px 24px calc(30px + env(safe-area-inset-bottom))}
 body[data-runtime=web] .authinner{width:100%;max-width:490px}
 body[data-runtime=web] .authinner h1{font-size:28px}
 body[data-runtime=web] .authlinks{align-items:flex-start;gap:8px}
 body[data-runtime=web] .registration-consent{gap:10px}
 body[data-runtime=web] .modalveil{padding:12px}
 body[data-runtime=web] .modalpanel{padding:22px 18px;width:100%;max-width:100%;max-height:calc(100dvh - 24px)}
 body[data-runtime=web] .invoice-paper{padding:22px 16px}
 body[data-runtime=web] .invoice-paper-head{gap:16px}
 body[data-runtime=web] .invoice-paper-head .invoice-paper-label .invoice-centered-title{font-size:24px;padding:10px}
 body[data-runtime=web] .invoice-paper-bottom{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .invoice-bank-columns{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .ai-mini{right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--web-keyboard-offset,0px));max-width:calc(100vw - 24px)}
 body[data-runtime=web] .ai-mini-chat{width:min(400px,calc(100vw - 24px));max-width:100%;max-height:calc(var(--web-visible-height,100dvh) - 96px)}
 body[data-runtime=web] .ai-mini-header{padding:16px}
 body[data-runtime=web] .ai-mini-minimize{width:44px;height:44px}
 body[data-runtime=web] .ai-mini-input button{min-width:44px;min-height:44px}
 body[data-runtime=web] .ai-mini-chat .ai-mini-scroll{padding:16px}
 body[data-runtime=web] .ai-mini-chat :is(p,small,li,td,th,button){font-size:15px}
}

@media screen and (max-width:360px){
 body[data-runtime=web] .shell{padding-left:12px;padding-right:12px}
 body[data-runtime=web] .cards{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .authform{padding-left:18px;padding-right:18px}
 body[data-runtime=web] .invoice-paper-head{grid-template-columns:minmax(0,1fr)}
 body[data-runtime=web] .invoice-paper-head .invoice-paper-label{grid-column:1;grid-row:2;text-align:left}
 body[data-runtime=web] .invoice-paper-head .invoice-paper-label .invoice-centered-title{margin-left:0}
}
@media(prefers-reduced-motion:reduce){body[data-runtime=web] .sidebar{transition:none}}
@media print{
 body[data-runtime=web] :is(.web-menu-toggle,.web-menu-close,.web-menu-backdrop,.ai-mini){display:none!important}
 body[data-runtime=web] .shell{display:block;padding:0}
 body[data-runtime=web] .content{padding:0}
}

body[data-runtime=web] .journal-drafts{margin-bottom:24px}
body[data-runtime=web] .journal-draft-row{gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
body[data-runtime=web] .journal-draft-row>div{min-width:0;overflow-wrap:anywhere}
body[data-runtime=web] .journal-draft-row>.link{flex-shrink:0}
body[data-runtime=web] .account-settings-sync{margin-top:24px}

body[data-runtime=web] .authlinks{flex-wrap:wrap;gap:12px 20px}

/* Readable secondary text and visible controls. Keep the normal body sizes. */
@media screen{
 body[data-runtime=web][data-design=blocks]{--muted:#4e6677}
 body[data-runtime=web] .sidebar :is(.small,.navlabel,.help p){color:#b4c8d5}
 body[data-runtime=web] :is(.note,.block-caption,.report-card-status){color:#4e6677}
 body[data-runtime=web] .quick-action-grid>button>span:last-child{color:#536c7c}
 body[data-runtime=web] :is(.report-source-facts,.report-summary span,.report-check p,.report-check-status,.todo-foot){color:#536c7c}
 body[data-runtime=web] .pill{color:#416580}
 body[data-runtime=web] .pill.draft{color:#80580f}
 body[data-runtime=web] :is(.booking-receipt-placeholder,.booking-receipt-placeholder>span:first-child){color:#536c7c}
 body[data-runtime=web] :is(input,textarea)::placeholder{color:#536c7c;opacity:1}
 body[data-runtime=web] :is(.star,.booking-account-star){color:#536c7c}
 body[data-runtime=web] :is(.star.selected,.booking-account-star[aria-pressed=true]){color:#a16b11}
 body[data-runtime=web] :is(.ai-mini-welcome p,.ai-mini-examples>p,.ai-mini-compose>p){color:#536c7c}
 body[data-runtime=web] .ai-mini .ai-question textarea::placeholder{color:#536c7c;opacity:1}
 body[data-runtime=web] :is(input:not([type=checkbox]):not([type=radio]),select,textarea,.booking-account-trigger){border-color:#82919b}
 body[data-runtime=web] :is(button,a,input,select,textarea):focus-visible{outline-color:#173e55;box-shadow:0 0 0 3px #fff}
}

@media screen and (max-width:1100px){
 body[data-runtime=web] .journal-layout>.journal-sidebar{grid-row:1}
 body[data-runtime=web] .journal-layout>.journal-main{grid-row:2}
}