/* Jan 16.10: «HATER når ALT er bare hvit». Jan 18.10: the page behind the cards is not white either, «da blir kortene mer
   synlig». Two layers on every width: the menu and the pages sit on one light grey canvas, a hairline parts the menu from
   the page, and the content stands in white cards. The menu itself is in pilot-shell.css; the breakpoint is the draft's 820 px. */
:root{--app-canvas:#f3f3f2;--app-panel:#fff;--app-hair:rgba(16,24,40,.13);--app-field:#f7f7f6}
body.customer-app{background:var(--app-canvas)}
@media(min-width:821px){
 body.customer-app #account .pilot-app-body{background:var(--app-canvas)!important;margin:0 0 0 var(--nav-width,232px)!important;width:auto!important;min-height:100dvh!important;border:0;border-left:.5px solid var(--app-hair);border-radius:0;overflow:clip}
 body.customer-app #account[data-view=inbox] .pilot-app-body{height:100dvh!important}
 /* The pages paint no white of their own behind the cards: two layers, never three. */
 body.customer-app #account .pilot-app-body :is([data-artboard],#profileFeatures.vis,.source-artboard){background:transparent!important}
 body.customer-app #account .pilot-app-body .approved-inbox .thread{background:var(--app-panel)!important}
 /* Fields on the grey canvas are white, as on the phone; a field inside a white card keeps a faint fill and turns white
    while you type. */
 body.customer-app #account .pilot-app-body :is(.header-search-tools .search,.cc-search-input,.pilot-workspace-location select){background:#fff!important}
 body.customer-app #account .pilot-app-body .list-tools .search{background:var(--app-field)!important}
 body.customer-app #account .pilot-app-body .list-tools .search:focus-within{background:#fff!important}
 /* Innboks: the heading on the canvas, the list and the conversation in one white card with a hairline. */
 body.customer-app #account .pilot-app-body .approved-inbox{background:var(--app-canvas)!important}
 body.customer-app #account .pilot-app-body .approved-inbox .workbench{min-height:0;margin:0 28px 24px;border:.5px solid var(--app-hair);border-radius:12px;background:var(--app-panel);overflow:hidden}
 body.customer-app #account .pilot-app-body .approved-inbox .page-head{border-bottom-color:transparent!important}
 body.customer-app #account .reviews-page.reviews-empty .review-list{background:var(--app-panel)!important}
}
@media(max-width:820px){
 /* Phone: the page and its heading sit on the grey canvas, content sits on white cards, and white fields stand out. */
 body.customer-app #account .pilot-app-body,
 body.customer-app #account :is(#workspace-account,.approved-inbox,.approved-profile,.approved-visibility,.source-artboard,[data-artboard],.profile-page,main.vis,.v-head,.page-head,.profile-page-head,.profile-tabs,#google-tabs,.google-tabs){background:var(--app-canvas)!important}
 body.customer-app #account :is(.page-head,.v-head,.profile-page-head){border-bottom-color:transparent!important}
 body.customer-app #account .inbox-list{background:var(--app-panel)!important;margin:0 12px 12px;border:.5px solid var(--app-hair)!important;border-radius:12px;overflow:hidden}
 body.customer-app #account .inbox-list .list-tools{background:var(--app-panel)!important}
 body.customer-app #account .cc-table{background:var(--app-panel);border:.5px solid var(--app-hair);border-radius:12px;padding:0 16px}
 /* Google without a connection: one white card on the canvas. */
 body.customer-app #account #google-profile.is-unlinked :is([data-artboard],.profile-page,#profileConnect){background:var(--app-canvas)!important}
 body.customer-app #account[data-view=inbox] .pilot-app-body{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
 body.customer-app #account[data-view=inbox] .approved-inbox{padding-bottom:16px;box-sizing:border-box}
}
/* The Google tabs and the old Synlighet frame sit on the canvas too; only their cards are white. */
body.customer-app #account :is(#google-tabs,.google-tabs,.approved-visibility){background:transparent!important}
/* Google without a connection: the connect card stands alone on the canvas on every width. The rule in customer-app.css
   paints the page white with three ids; this one has one class more. */
body.customer-app #account #google-profile.is-unlinked :is([data-artboard],.profile-page,#profileConnect){background:var(--app-canvas)!important}
/* Ny forespørsel (the older form page): the form stands in one white card, so its soft boxes and the disabled button keep
   their contrast. */
body.customer-app #account #workspace-job #job-form{padding:24px;border:.5px solid var(--app-hair);border-radius:12px;background:var(--app-panel)}
@media(max-width:820px){body.customer-app #account #workspace-job #job-form{padding:16px}}
