/* Shared page heading alignment: title first, context below. */
#app-preview > .app-inner > .app-title{align-items:flex-start;min-height:72px;margin-top:0;margin-bottom:24px}
#app-preview > .app-inner > .app-title > :first-child{align-self:flex-start}
#app-preview > .app-inner > .app-title > :first-child > h3{margin-top:0}
#app-preview > .app-inner > .app-title > :is(.catalogue-heading-actions,.home-sale-selector,.heading-actions){align-self:flex-start}
#app-preview > .app-inner > .app-title .n-date{margin-top:0;margin-bottom:5px!important}
@media(max-width:600px){#app-preview > .app-inner > .app-title{min-height:0;gap:16px}#app-preview > .app-inner > .app-title > :first-child{width:100%}}

/* Equal spacing above and below the header divider. */
#app-preview{--header-divider-gap:22px}
#app-preview > .app-bar{padding-bottom:var(--header-divider-gap)}
#app-preview > .app-inner{padding-top:var(--header-divider-gap)}
@media(max-width:600px){#app-preview{--header-divider-gap:20px}}

/* Offset the SVG’s internal left whitespace, preserving the logo size. */
#app-preview > .app-bar .app-brand img{transform:translateX(-4.3%)}

/* Compact desktop menu aligned with the original 44px utility buttons. */
@media(min-width:601px){
}

/* A single white outline, without the extra inset highlight. */
#app-preview > .app-bar .app-nav{border:1px solid #fff;box-shadow:none}

/* Shared light control surface across navigation, buttons and filters. */
#app-preview{--control-light-bg:#ffffffbb;--control-light-border:#ffffff}
#app-preview :is(.app-nav,.header-tools .icon-button,.home-sale-control,.portfolio-period,.sale-context select,.search-field,.soft-pill){background:var(--control-light-bg);border:1px solid var(--control-light-border);box-shadow:none;border-radius:999px}
#app-preview .app-title .button:not(.primary){background:var(--control-light-bg);border:1px solid var(--control-light-border);box-shadow:none}
#app-preview .header-tools .icon-button{border-radius:50%}
/* The mobile dock retains its contrasting olive surface. */
@media(max-width:600px){#app-preview .app-nav{background:#485634}}

/* Sales period beside the create action. */
.sales-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-left:auto}
.sales-heading-actions .portfolio-period{min-height:48px;padding-top:0;padding-bottom:0;box-sizing:border-box}
.sales-heading-actions .portfolio-period .parade-select-trigger{min-height:46px}
@media(max-width:600px){.sales-heading-actions{width:100%;margin-left:0;justify-content:flex-start}.sales-heading-actions .portfolio-period{flex:1}.sales-heading-actions .split-action{flex:1}}

.sales-heading-actions .portfolio-period{margin:0;align-self:center}
.sales-heading-actions .split-action{height:48px;min-height:48px}
.sales-heading-actions .action-orb{width:38px;height:38px}

/* Shared page control dimensions; global navigation remains 44px. */
#app-preview{--page-control-height:48px;--page-control-font:12px}
#app-preview .app-inner>.app-title :is(.button,.home-sale-control,.portfolio-period,.search-field,.parade-select-trigger){height:var(--page-control-height);min-height:var(--page-control-height);box-sizing:border-box;font-size:var(--page-control-font)}
#app-preview .app-inner>.app-title :is(.home-sale-selector,.portfolio-period,.search-field,.inline-label){margin:0;align-self:flex-start}
#app-preview .app-inner>.app-title .portfolio-period{padding-top:0;padding-bottom:0}
#app-preview .app-inner>.app-title :is(.home-sale-control,.portfolio-period) .parade-select-trigger{height:46px;min-height:46px}
#app-preview .app-inner>.app-title .action-orb{width:38px;height:38px;flex:0 0 38px}
#app-preview .app-inner>.app-title .search-field input{font-size:var(--page-control-font)}
#app-preview :is(.sales-tools,.followup-toolbar) .segmented{height:48px;min-height:48px;padding:2px;border-width:1px;box-sizing:border-box;align-items:center}
#app-preview :is(.sales-tools,.followup-toolbar) .segmented button{height:42px;min-height:42px;padding-top:6px;padding-bottom:6px;box-sizing:border-box;font-size:12px}
#app-preview .sales-tools .search-field{height:48px;min-height:48px;margin:0;box-sizing:border-box}
#app-preview .sales-tools .search-field input{font-size:12px}

/* Visible status pills in the sales page heading. */
#app-preview .sales-status-pills{display:inline-flex;align-items:center;gap:2px;height:48px;padding:2px;border:1px solid #fff;border-radius:999px;background:var(--control-light-bg);box-sizing:border-box}
#app-preview .sales-status-pills button{height:42px;min-height:42px;padding:8px 16px;border:0;border-radius:999px;font:400 12px Manrope,sans-serif;white-space:nowrap;background:transparent;color:var(--pd-color-ink);box-shadow:none}
#app-preview .sales-status-pills button[aria-pressed=true]{background:#485634;color:#fff}
#app-preview .sales-status-pills button:not([aria-pressed=true]):hover{background:#e5ead9}
@media(max-width:600px){#app-preview .sales-status-pills{width:100%;justify-content:space-between}#app-preview .sales-status-pills button{flex:1;padding:8px}}

/* The logo SVG has transparent vertical margins: size its layout slot to the
   visible 44px header controls, keeping the artwork itself unchanged. */
#app-preview > .app-bar .app-brand{height:44px;min-height:0;display:flex;align-items:center}
#app-preview > .app-bar .app-brand img{flex-shrink:0}