/* Shared operational typography and components. Marketing/PDF layouts are untouched. */
/* Let CSS zoom compute the available width. Percentage compensation expands RTL pages beyond the viewport. */
@media(min-width:769px){html[data-density="compact"] body.app-body,html[data-density="dense"] body.app-body{width:auto;min-height:100vh}}
.app-body,.customer-shell{font-size:14px;line-height:1.7}
.app-main :is(h1,h2),.customer-shell h1{font-size:22px!important;line-height:1.45}
.app-main h3,.customer-shell h2{font-size:17px!important;line-height:1.5}
.app-main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:14px!important;border-radius:12px!important}
.app-main textarea{min-height:112px;resize:vertical}
.app-main label{font-size:13px}
.app-topbar{position:sticky!important;top:0!important;inset-inline:auto!important;width:auto!important;max-width:none!important;margin:12px 20px!important;min-height:64px!important;height:auto!important;border:1px solid var(--color-border,#e5ddd6);border-radius:18px!important;box-shadow:0 5px 18px #252a2c08!important}
.topbar-title{font-size:18px!important;white-space:normal!important;line-height:1.4}
.staff-general-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.staff-general-grid>div{min-width:0}.staff-general-grid .full{grid-column:1/-1}
.staff-general-grid label{display:block;margin-bottom:8px;font-weight:600}
.staff-general-grid :is(input,select,textarea){width:100%;border:1px solid var(--color-border,#e5ddd6);padding:12px;background:#fff;color:var(--color-text,#242b2b);box-sizing:border-box}
.staff-general-grid select{min-height:46px}.staff-general-grid textarea{border-radius:12px!important}
.customer-order-items{border:1px solid var(--color-border,#e5ddd6);border-radius:16px;padding:18px;background:#fff;margin:18px 0;overflow-wrap:anywhere}
.customer-order-items h3{margin:0 0 12px;font-size:16px!important}.order-item-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.order-item-detail{padding:16px;background:var(--color-bg-soft,#faf8f6);border-radius:12px;border:1px solid var(--color-border-light,#eee9e4)}
.order-item-detail header{display:flex;align-items:center;gap:10px}.order-item-detail header>span{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;background:#fff;border-radius:8px;color:var(--color-primary,#c64b3a)}
.order-item-detail p{font-size:13px;margin:10px 0 0;line-height:1.8}.order-item-detail strong{font-size:14px}
.customer-order-items .service-specimen{padding:0;overflow:hidden;background:#fff;border-radius:18px;min-width:0}
.service-art{position:relative;overflow:hidden;isolation:isolate;background:#f0e9e0;aspect-ratio:1.6}
.service-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.service-art-caption{position:absolute;inset-inline-start:12px;bottom:12px;padding:5px 9px;border:1px solid #ffffffa8;border-radius:20px;background:#ffffffeb;color:#49403a;font-size:10px;line-height:1.4}
.service-specimen-body{padding:18px}.service-specimen-body header{align-items:flex-start!important}
.service-specimen-body header strong{font-size:16px;line-height:1.65;color:var(--color-text,#202726)}
.service-specimen-body header>span{background:#f9efeb;color:var(--color-primary,#c64b3a);font-size:12px}
.service-specimen-specs{margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.service-specimen-specs div{border-top:1px solid #eee8e2;padding-top:10px;min-width:0}
.service-specimen-specs dt{font-size:11px;color:#827b74}.service-specimen-specs dd{margin:4px 0 0;font-size:13px;color:#272c2a;font-weight:500;overflow-wrap:anywhere}
.order-portfolio-art{aspect-ratio:1.6}.order-portfolio-card:hover .service-art img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.service-art img{transition:none}}
.brand-alert,.app-toast{background:#fff!important;color:var(--color-text,#242b2b)!important;border:1px solid var(--color-border,#e5ddd6)!important;border-inline-start:4px solid var(--color-primary,#c64b3a)!important;border-radius:14px!important;box-shadow:0 10px 30px #242b2b0c!important}
.brand-alert{display:flex;align-items:center;gap:12px;padding:14px 18px;margin:16px 0;font-size:14px;overflow-wrap:anywhere}
.brand-alert>svg{width:22px;height:22px;flex-shrink:0;color:var(--color-primary,#c64b3a)}
.brand-alert.error,.app-toast-error{border-inline-start-color:#a93131!important}
.app-toast-icon{background:var(--color-primary-light,#fbeee9)!important;color:var(--color-primary,#c64b3a)!important;border-radius:9px!important}.app-toast-message{font-size:14px!important;line-height:1.75}.app-toast-close{min-width:36px;min-height:36px}
.brand-field-error{margin:7px 0 0;color:#a93131;font-size:13px}.brand-field-invalid{border-color:#a93131!important}.brand-field-error[hidden]{display:none}
.order-journey{padding:24px;border:1px solid var(--color-border,#e5ddd6);border-radius:18px;background:#fff;text-align:center;margin:18px auto}
.order-journey>header{display:block;margin-bottom:20px}.order-journey h2{font-size:18px!important;margin:0}.order-journey header p{font-size:13px;color:var(--color-text-secondary,#78736e);margin-top:6px}
.order-journey ol{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;margin:0;gap:12px}
.order-journey li{position:relative;flex:1 1 90px;max-width:140px;padding:14px 8px;border:1px solid #ece7e2;border-radius:14px;background:#faf9f7;color:#827d77;display:flex;flex-direction:column;align-items:center;gap:7px}
.order-journey li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#fff}.order-journey svg{width:21px;height:21px}.order-journey li strong{font-size:12px}.order-journey li small{font-size:10px}
.order-journey li.done{color:var(--color-primary,#c64b3a);background:var(--color-primary-light,#fcf1ec);border-color:var(--color-primary-border,#ecd0c5)}
.order-journey li.current{color:var(--color-primary,#c64b3a);border-color:var(--color-primary,#c64b3a);box-shadow:0 5px 18px #c64b3a12}
.order-journey li.current>span{background:var(--color-primary,#c64b3a);color:#fff;animation:journey-pulse 2.8s ease-in-out infinite}
@keyframes journey-pulse{50%{box-shadow:0 0 0 6px #c64b3a16}}
.customer-ticket-hero{display:flex!important;flex-direction:column;align-items:center;text-align:center}.customer-ticket-status{min-width:min(100%,240px)}
.print-page .print-attention{background:var(--color-bg-soft,#f8f6f3)!important;border-color:var(--color-border,#e5ddd6)!important}
.print-page .print-attention :is(h2,h3,p){color:var(--color-text,#242b2b)!important}
.print-page .print-attention a{background:var(--color-primary,#c64b3a)!important;color:var(--color-primary-ink,#fff)!important}
.admin-visual-summary{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:22px;border:1px solid var(--color-border,#e5ddd6);border-radius:18px;background:linear-gradient(120deg,#fff,var(--color-primary-light,#fceee9));margin:18px 0}
.admin-visual-summary svg{width:220px;max-width:40%;height:auto;color:var(--color-primary,#c64b3a)}.admin-visual-summary h3{margin:0 0 7px}.admin-visual-summary p{font-size:13px;color:var(--color-text-secondary,#78736e)}
.wf-step input{accent-color:var(--color-primary,#c64b3a);width:18px;height:18px}.wf-explanation{padding:15px;border:1px solid var(--color-border,#e5ddd6);border-radius:12px;margin:16px 0;font-size:13px;line-height:1.9}
.execution-journey{border-top:1px solid var(--color-border,#e5ddd6);margin-top:20px;padding-top:18px}.execution-journey h3{font-size:14px!important;margin:0 0 14px}.execution-journey li{max-width:200px}
@media(max-width:1024px){.app-topbar{margin:0!important;border-radius:0 0 16px 16px!important;min-height:58px!important}.topbar-title{font-size:15px!important}.staff-general-grid{grid-template-columns:1fr}.staff-general-grid label{text-align:center}.app-main :is(h1,h2){font-size:20px!important}.order-journey{padding:16px}.order-journey li{flex-basis:calc(33.33% - 12px);max-width:none}.order-item-detail{text-align:center}.order-item-detail header{justify-content:center}.admin-visual-summary{flex-direction:column;text-align:center}.admin-visual-summary svg{max-width:80%}.customer-shell input,.customer-shell select,.customer-shell textarea{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){.order-journey li.current>span{animation:none}}
/* Tablet uses the same navigation and centered touch layout as phones. */
@media(max-width:1024px){
 .app-bottom-nav.md\:hidden{display:grid!important}.sidebar-overlay.md\:hidden{display:block!important}
 .app-topbar [data-sidebar-trigger],.app-sidebar [data-sidebar-dismiss]{display:grid!important;place-items:center}
 .app-topbar{height:auto!important;min-height:94px!important;padding-block:8px!important;flex-wrap:wrap}
 .app-topbar>div:first-child,.app-topbar>div:last-child{width:100%;justify-content:center!important}
 .staff-notification-menu{top:100px!important}
 .app-sidebar [data-sidebar-collapse]{display:none!important}
 .main-content .app-main{max-width:800px!important;margin-inline:auto!important}
 .app-main :is(.page-header,.entity-hero,.finance-hero,.activity-heading,.ob-heading,.quote-head){justify-content:center;text-align:center}
 .staff-general-grid,.quote-editor-layout,.review-action-grid{grid-template-columns:minmax(0,1fr)!important}
 .staff-general-grid label,.ob-heading,.service-specimen-body,.order-portfolio-content,.quote-editor-summary{text-align:center}
 .staff-order-builder :is(h3,label,legend,p),.staff-order-builder :is(input:not([type=radio]):not([type=checkbox]),textarea,select){text-align:center!important}
 .staff-pricing-choice legend{width:100%}.staff-pricing-choice label,.staff-order-builder h3{justify-content:center}
 .service-specimen-body header,.quote-actions,.order-portfolio-meta{justify-content:center;flex-wrap:wrap}
 .customer-content{max-width:800px;margin-inline:auto}.customer-page-head,.client-hero{align-items:center;text-align:center}
 .customer-page-head,.customer-search{flex-direction:column}.client-hero-actions{justify-content:center}
 .platform-content{max-width:800px;margin-inline:auto}.platform-topbar{justify-content:center;flex-wrap:wrap}
 /* Large frosted surfaces are expensive to composite while scrolling on touch devices. */
 :is(.app-topbar,.app-bottom-nav,.customer-header){backdrop-filter:none}
}