/* ANEW main-site typography, shared across authenticated portal pages. */
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/NotoSansThai-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/NotoSansThai-500.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/NotoSansThai-600.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/NotoSansThai-700.woff2') format('woff2')}
body .app-shell,body .app-shell *{font-family:'Noto Sans Thai',sans-serif!important}
body .app-shell{font-weight:400;line-height:1.65}
body .app-shell :is(h1,h2,h3,h4,h5,h6){font-weight:600;line-height:1.4}
body .app-shell :is(button,.primary-button,.secondary-button,label,th,nav a){font-weight:500}
body .app-shell :is(b,strong,nav a.active){font-weight:600}
body .app-shell :is(input,select,textarea){font-weight:400}
body .app-shell :is(.timeline-number,.timeline-status .percentage){font-weight:600}
body.login-page,body.login-page *{font-family:'Noto Sans Thai',sans-serif!important}
body.login-page{font-weight:400}
body.login-page :is(h1,h2,strong,b){font-weight:600;line-height:1.4}
body.login-page :is(label,button,.eyebrow){font-weight:500}
body.login-page :is(input,textarea){font-weight:400}

/* Readability across customer and staff pages. Keep brand colours on imagery. */
body .app-shell{font-size:16px;--muted:#66625e}
body .app-shell :is(p,li,td,input,select,textarea){font-size:16px;line-height:1.7}
body .app-shell :is(small,label,th,.muted,.privacy-note,.alert,.empty-inline){font-size:14px;line-height:1.65}
/* Override legacy component rules that kept supporting text at 11–13px. */
body .app-shell .project-info>div:first-child small,
body .app-shell .editor-panel>summary small,
body .app-shell .editable-list summary small,
body .app-shell .admin-photo-batches summary small,
body .app-shell .photo-grid figcaption small,
body .app-shell .admin-photo-grid small,
body .app-shell .approval-warranty-list small{font-size:14px;line-height:1.65}
body .app-shell .form-note,
body .app-shell .photo-grid figcaption p,
body .app-shell .empty-state p{font-size:15px;line-height:1.7}
body .app-shell .editable-list summary :is(b,i),
body .app-shell .document-row b,
body .app-shell .admin-photo-grid b,
body .app-shell .approval-warranty-list b{font-size:15px;line-height:1.65}
body .app-shell .sidebar-user b,
body .app-shell .user-card b,
body .app-shell .user-card summary em,
body .app-shell .project-status span,
body .app-shell .project-progress>span,
body .app-shell .dashboard-priorities-heading>span,
body .app-shell .dashboard-search-label>span,
body .app-shell .timeline em,
body .app-shell .photo-batch-copy>span,
body .app-shell .photo-batch-count,
body .app-shell .file-drop>span,
body .app-shell .warranty-card span,
body .app-shell .warranty-card em,
body .app-shell .compact-warranty-code,
body .app-shell .compact-warranty-date,
body .app-shell .compact-warranty-status,
body .app-shell .ticket-overview span,
body .app-shell .service-event-list em,
body .app-shell .service-ticket-hero>div span{font-size:14px;line-height:1.65}
body .app-shell :is(button,.primary-button,.secondary-button,.text-button,.ticket-status){font-size:14px;line-height:1.5}
body .app-shell :is(button,.primary-button,.secondary-button){min-height:44px}
body .app-shell :is(.eyebrow,.portal-label){font-size:12px;line-height:1.5}
body .app-shell :is(.timeline p,.service-event-list p,.document-row small,.project-info p,.service-ticket-row p,.report-table td small){font-size:15px;line-height:1.7}
body .app-shell :is(.timeline h3,.service-event-list h3,.service-ticket-row h3){font-size:20px;line-height:1.5}
body .app-shell .summary-grid small{font-size:15px;line-height:1.55;font-weight:600}
body .app-shell .summary-grid span:not(.percentage):not(.percentage__value):not(.percentage__mark){font-size:12px;line-height:1.5;letter-spacing:.04em;color:#6d6056}
body .app-shell .dashboard-priority-card small{font-size:14px;color:#66625e}
body .app-shell .dashboard-priority-card b{font-size:16px}
body .app-shell .report-table :is(th,td){line-height:1.65}
body .app-shell .report-table th{font-size:14px}
body .app-shell .report-table td{font-size:15px}
body .app-shell .report-table td b{font-size:15px}
body.login-page :is(input,textarea){font-size:16px;line-height:1.6}
body.login-page :is(label,button,.login-help,.login-panel footer){font-size:14px;line-height:1.65}
body.login-page .login-form-wrap>.muted{font-size:16px;line-height:1.7;color:#66625e}
body.login-page .login-help{color:#66625e}
body.login-page .login-visual-message span{font-size:16px;line-height:1.75}
body.login-page .login-visual-message strong{font-size:20px;line-height:1.6;font-weight:600}
body.login-page .login-visual-message{gap:8px}

@media(max-width:720px){
    body .app-shell :is(.topbar h1,.section-heading h2,.dashboard-priorities-heading h2,.panel>h2){font-size:26px;line-height:1.45;overflow-wrap:anywhere}
    body.page-dashboard .app-shell .brand-dashboard-hero .dashboard-hero-slogan{font-size:clamp(25px,6.6vw,34px);line-height:1.2;letter-spacing:-.025em}
    body.page-dashboard .app-shell .brand-dashboard-hero h1{font-size:25px;line-height:1.45}
    body .app-shell .summary-grid article{min-width:0;height:auto}
    body .app-shell .dashboard-summary-link{padding:18px 16px;gap:12px}
    body .app-shell .summary-grid small{font-size:15px;line-height:1.55;overflow-wrap:anywhere}
    body .app-shell .summary-grid span:not(.percentage):not(.percentage__value):not(.percentage__mark){letter-spacing:.02em;overflow-wrap:normal}
    body .app-shell .project-info h3{font-size:24px;line-height:1.4}
    body .app-shell :is(.timeline h3,.service-event-list h3){font-size:19px}
    body .app-shell :is(input,select,textarea){font-size:16px}
    body.login-page .login-quote h1{font-size:clamp(27px,7.2vw,38px);line-height:1.25}
    body.login-page .login-form-wrap h1{font-size:28px;line-height:1.4}
    body.login-page .login-visual-message strong{font-size:18px;line-height:1.6}
}

/* Readability review: functional text and supporting copy. */
body .app-shell .sidebar nav a{font-size:15px;line-height:1.6;min-height:48px}
body .app-shell :is(label,th,.muted,.privacy-note,.alert,.empty-inline,.form-note){font-size:15px;line-height:1.7}
body .app-shell :is(button,.primary-button,.secondary-button,.text-button){font-size:16px;line-height:1.6}
body .app-shell :is(.topbar>div>span,.section-heading>span,.support-card span){font-size:15px;line-height:1.7}
body .app-shell :is(.app-footer,.sidebar-user small,.logout-button,.topbar-date){font-size:14px;line-height:1.65}
body .app-shell .mobile-menu-toggle b{font-size:14px}
body .app-shell .mobile-portal-title{font-size:12px;letter-spacing:.1em}
body .app-shell .sidebar-user{min-width:0;overflow-wrap:anywhere}
body .app-shell .section-heading{flex-wrap:wrap;gap:16px}
body .app-shell :is(.panel,.form-grid>*,.dashboard-directory-tools,.dashboard-search-label){min-width:0}
body.login-page .login-panel :is(label,button){font-size:16px;line-height:1.65}
body.login-page .login-help{font-size:15px;line-height:1.8}
body.login-page .login-panel footer{font-size:14px;line-height:1.7}
body.login-page .login-password-control input{padding-right:56px}
body.login-page .login-password-control .password-visibility{width:44px;min-width:44px;padding:10px}
body.login-page .password-visibility svg{display:block;margin:auto}
@media(max-width:720px){
    body .app-shell .sidebar.is-menu-open nav a{font-size:16px;line-height:1.6}
    body .app-shell .section-heading{align-items:flex-start}
    body .app-shell .app-footer{flex-wrap:wrap;gap:8px}
}
/* Preserve the original hierarchy while fitting the login form on screen. */
body.login-page .login-panel{min-height:100svh;justify-content:center;padding:18px clamp(24px,5vw,72px)}
body.login-page .login-panel>.brand-logo{width:300px;height:110px;object-fit:cover;margin:0 auto 12px;max-width:100%}
body.login-page .login-form-wrap{margin:0 auto}
body.login-page .login-form-wrap>.eyebrow{font-size:14px;font-weight:500;line-height:1.5;letter-spacing:.16em;color:#817366;margin:0 0 8px}
body.login-page .login-form-wrap h1{margin:0 0 10px;font-size:30px}
body.login-page .login-form-wrap>.muted{margin:0 0 20px}
body.login-page .stack-form{gap:14px}
body.login-page .stack-form label{gap:6px}
body.login-page .stack-form input{min-height:48px;padding-top:10px;padding-bottom:10px}
body.login-page .stack-form>.primary-button{min-height:48px}
body.login-page .login-help{margin:14px 0 0;font-size:14px}
body.login-page .login-panel footer{margin:22px auto 0;font-size:12px}
@media(max-width:720px){

 body.login-page .login-panel{min-height:100svh;padding:16px 24px}
 body.login-page .login-panel>.brand-logo{width:280px;height:96px;margin-bottom:12px}
 body.login-page .login-form-wrap>.eyebrow{font-size:14px}
 body.login-page .login-form-wrap h1{font-size:28px}
}