html,body{max-width:100%;overflow-x:clip}.pwa-table-scroll{overflow:auto;max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.pwa-table-scroll:focus-visible{outline:2px solid var(--green)}#pwa-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:8px 16px;background:var(--bg);position:relative;z-index:40}#pwa-toolbar button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--green);padding:8px 12px}#pwa-connection{color:var(--danger);flex:1 1 100%;padding:8px}body{padding-bottom:env(safe-area-inset-bottom)}
@media(max-width:760px){.app-shell{display:block!important;min-height:100dvh}.main-shell{width:100%;min-width:0}.sidebar{z-index:100;width:min(300px,85vw);height:100dvh;overflow-y:auto;transform:translateX(-110%);transition:transform .15s}.sidebar.open,body.menu-open .sidebar{transform:translateX(0)}.mobile-menu{display:inline-flex!important;min-width:44px;min-height:44px}.topbar{height:auto;min-height:60px;padding:8px 12px;gap:8px}.top-actions{gap:4px}.topbar .profile span,.topbar .demo-pill{display:none}.content{padding:16px 12px 80px;max-width:100%;min-width:0}.card{padding:16px;min-width:0;max-width:100%}.page-heading{margin-bottom:16px;flex-wrap:wrap}h1{font-size:24px}.btn,.icon-btn,.nav-btn,.mobile-nav button{min-height:44px}.row-actions,.form-actions,.card-header{flex-wrap:wrap}input,select,textarea{font-size:16px;max-width:100%;min-width:0}.pre,pre{max-width:100%;overflow:auto}.mobile-nav{padding-bottom:env(safe-area-inset-bottom);z-index:60}.login-shell{display:block;min-height:100dvh}.login-story{display:none}.login-panel{padding:24px 16px}.login-card{width:100%;max-width:420px;margin:auto}.loading{padding:32px 16px}dialog{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px);max-height:calc(var(--viewport-height,100dvh) - 24px);padding:16px;overflow:auto}.hero-art{max-width:100%;overflow:hidden}.custom-widget,.custom-panels-flow>*{max-width:100%!important;margin-left:0!important}.table-wrapper,.table-scroll,.analysis-table-scroll{max-width:100%;overflow:auto}
 body.tera-view .main-shell{height:var(--viewport-height,100dvh);display:flex;flex-direction:column;overflow:hidden}body.tera-view .content{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px 8px;overflow:hidden}body.tera-view #page{flex:1;min-height:0}body.tera-view .tera-panel,body.tera-view .chat-shell{flex:1;min-height:0}body.tera-view #chat-log{flex:1;min-height:100px;overflow:auto;overscroll-behavior:contain}body.tera-view #chat-form{position:sticky;bottom:0;flex-shrink:0;padding:8px 0 max(8px,env(safe-area-inset-bottom));background:var(--bg)}body.tera-view .mobile-nav{display:none}body.tera-view #pwa-toolbar{display:none}body.tera-view .footer-note{display:none}#chat-message{font-size:16px;min-height:44px}.chat-bubble{max-width:100%;overflow-wrap:anywhere}
}

@media(max-width:760px){body.tera-view .chat-layout{display:flex;flex-direction:column;min-height:0;flex:1}.menu-open .sidebar{display:flex;inset:0 auto 0 0;z-index:100}.content table{max-width:none}.pwa-table-scroll{width:100%;min-width:0}}
@media(max-width:760px){.app-shell.menu-open .sidebar{transform:translateX(0);display:flex;z-index:100}}
@media(max-width:760px){body.tera-view #pwa-toolbar:has(#pwa-connection:not([hidden])){display:flex;position:fixed;top:60px;left:0;right:0;background:#fff5e8}body.tera-view #pwa-toolbar button{display:none}}

@media(max-width:760px){body.tera-view .layout-editor-toolbar{display:none}}
@media(max-width:760px){.btn{white-space:normal;overflow-wrap:anywhere;max-width:100%;min-width:0;text-align:center}.form-actions{display:flex;flex-wrap:wrap;gap:8px}.form-actions>.btn{flex:1 1 130px}.modal-header{align-items:flex-start;gap:8px}.modal-header h2{min-width:0;overflow-wrap:anywhere}.modal-header>.icon-btn{flex:0 0 44px;min-width:44px;min-height:44px}#modal-content{min-width:0;max-width:100%;overflow-wrap:anywhere}#chat-form{display:flex;align-items:flex-end;gap:8px}#chat-form input,#chat-form textarea{flex:1 1 0%;width:0;min-width:0}#chat-form>button{flex:0 0 44px;min-width:44px;min-height:44px}.analysis-brief-card,.analysis-evidence,details>summary{min-width:0;overflow-wrap:anywhere}.analysis-table-scroll{width:100%;max-width:100%;overscroll-behavior-inline:contain}.hero{min-height:0}.hero-art{flex:0 0 auto!important;width:120px!important;max-width:120px}.hero-art canvas{max-width:120px!important;max-height:110px!important}}
@media(max-width:760px){#modal .modal-header{position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0;border-bottom:1px solid var(--line)}}

#pwa-toolbar{position:sticky;top:0;z-index:110;justify-content:flex-start;max-width:100%;border-bottom:1px solid var(--line)}#pwa-check-status{font-size:12px;align-self:center;overflow-wrap:anywhere}@media(max-width:760px){#pwa-toolbar{padding:6px 10px;gap:6px}#pwa-toolbar button{font-size:12px;min-height:40px;white-space:normal}body.tera-view #pwa-toolbar{display:flex;position:fixed;top:60px;left:0;right:0}body.tera-view #pwa-toolbar button{display:inline-flex}body.tera-view .content{padding-top:66px}.tera-view #pwa-toolbar #pwa-install{display:none}body.tera-view .content:has(.error-box){overflow:auto}.sidebar{z-index:130!important}}
body.tera-view #pwa-toolbar{position:fixed;top:64px;left:236px;right:0}body.tera-view .content{padding-top:72px}@media(max-width:760px){body.tera-view #pwa-toolbar{left:0;top:60px}body.tera-view .content{padding-top:66px}}
body.tera-view .content{padding-top:calc(var(--pwa-toolbar-height,60px) + 12px)}

/* UI audit 23/10/2026: login, readable secondary text and keyboard focus. */
:root{--muted:#596b62}
:where(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #9b641b;outline-offset:3px}
.login-shell{min-height:calc(100dvh - var(--pwa-toolbar-height,60px))}
.login-panel{padding:32px 24px}
.login-card .password-visibility{min-height:44px;margin:8px 0;cursor:pointer}
.login-card .password-visibility input{width:18px;height:18px;accent-color:var(--green)}
.login-card .btn{min-height:44px;margin-top:16px}
@media(min-width:761px){.login-story{padding:32px clamp(28px,5vw,72px)}.login-story h1{font-size:clamp(34px,3.4vw,48px);margin:24px 0 16px}.login-art{margin-top:24px}.login-story footer{margin-top:20px}}
@media(max-width:760px){.login-shell{min-height:calc(100dvh - var(--pwa-toolbar-height,60px))}.login-panel{padding:28px 20px 36px}.login-card{padding:24px 20px;background:var(--paper);border:1px solid var(--line);border-radius:18px}.login-card h2{font-size:26px;line-height:1.25}.login-card>p{margin-bottom:20px}.login-card .btn{min-height:48px}#pwa-toolbar button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* UI audit stage 2: compact portrait and reachable long navigation. */
.sidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sidebar>.brand,.sidebar>.nav-footer{flex-shrink:0}
.nav-btn{overflow-wrap:anywhere}
.table-wrap,.analysis-table-scroll,.route-report-scroll{scrollbar-width:thin;overscroll-behavior-inline:contain}
#modal .modal-header>.icon-btn{min-width:44px;min-height:44px;flex-shrink:0}
.analysis-brief-card .analysis-evidence>summary{min-height:44px;display:list-item;align-content:center}
@media(max-width:380px){.login-panel{padding:18px 12px 28px}.login-card{padding:20px 16px}.login-card h2{font-size:24px}.login-card>p{margin-bottom:16px}.login-card .eyebrow{letter-spacing:1.5px}}
@media(max-width:760px){#pwa-toolbar{align-items:center}#pwa-check-status{flex:1 1 100%;font-size:12px;line-height:1.4}#pwa-check-status:empty{display:none}#pwa-toolbar button{font-size:12px;padding:8px 10px}#pwa-update{flex:0 1 auto}.breadcrumb{min-width:0;overflow-wrap:anywhere}.top-actions{flex-shrink:0}.form-grid{grid-template-columns:minmax(0,1fr)}}

/* Stage 3: keep conversation space available on short portrait screens. */
.pwa-controls{width:100%;font-size:12px;color:var(--green)}
.pwa-controls>summary{cursor:pointer;min-height:44px;align-content:center;font-weight:600}
.pwa-controls-body{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 8px}
.pwa-controls-body #pwa-check-status{align-self:center}
.tera-audio-controls{flex-shrink:0;margin-top:8px;border-top:1px solid var(--line);color:var(--green)}
.tera-audio-controls>summary{cursor:pointer;min-height:44px;align-content:center;font-size:13px;font-weight:600}
.tera-audio-controls .form-actions{margin:4px 0 8px;justify-content:flex-start}
.tera-audio-controls[open]{max-height:32dvh;overflow:auto}
#analysis-audio-status:empty{display:none}
@media(max-width:760px){#pwa-toolbar{padding:0 12px}.pwa-controls-body #pwa-check-status{flex-basis:100%}.tera-view .compact-intro.has-chat{display:none}.tera-view .chat-foot{line-height:1.5}.tera-view .chat-form{margin-top:6px}.tera-audio-controls .form-actions>.btn{flex:1 1 120px}.footer-note{display:flex;flex-wrap:wrap;gap:8px 16px;line-height:1.7}.topbar .profile .avatar{display:none}}

/* Stage 4: readable report paragraphs and touchable text actions. */
#modal-content p{line-height:1.7}
#modal-content p+p{margin-top:12px}
#modal-content h2,#modal-content h3{line-height:1.4;overflow-wrap:anywhere}
@media(max-width:760px){.toolbar>input,.toolbar>select{flex:1 1 100%;width:100%;max-width:none}.link-btn{display:inline-flex;align-items:center;min-height:44px;padding:6px 4px;line-height:1.5}.row-actions{flex-wrap:wrap;gap:8px}.source-note,.form-help{font-size:12px}}

/* Compact analysis: preserve all content with denser spacing. */
#modal:has(.whole-analysis-summary),#modal:has(.analysis-results-grid){width:min(1120px,96vw);padding:20px}
.whole-analysis-summary{padding:16px;border:0}
#modal-content .whole-analysis-summary>p{margin:6px 0;line-height:1.5}
.analysis-results-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0}
.analysis-results-grid>.analysis-brief-card{margin:0;padding:14px;border-radius:10px;line-height:1.5}
#modal-content .analysis-results-grid p{margin:6px 0;line-height:1.5}
.analysis-results-grid .analysis-brief-card h3{font-size:15px;line-height:1.4;margin-bottom:8px}
.analysis-results-grid .analysis-action{font-size:14px}
.analysis-results-grid .analysis-evidence{margin-top:8px;padding-top:4px}
.analysis-voice-panel{margin:8px 0;border-block:1px solid var(--line)}
.analysis-voice-panel>summary{min-height:44px;align-content:center;cursor:pointer;font-size:13px;color:var(--green)}
.analysis-voice-panel .form-actions{margin:4px 0 8px;justify-content:flex-start;flex-wrap:wrap}
.analysis-primary-actions{margin:10px 0}
.whole-analysis-summary>#analysis-audio-status{font-size:12px;color:var(--muted)}
:where(.analysis-table-scroll,.pwa-table-scroll,.route-report-scroll):focus-visible{outline:3px solid #9b641b;outline-offset:2px}
.analysis-table-scroll th,.analysis-table-scroll td{padding:8px 10px;font-variant-numeric:tabular-nums}
.analysis-table-scroll thead th{background:var(--soft)}
@media(min-width:1000px){.analysis-results-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#modal:has(.whole-analysis-summary),#modal:has(.analysis-results-grid){padding:12px}.whole-analysis-summary{padding:4px}.analysis-results-grid>.analysis-brief-card{padding:12px}.analysis-results-grid{gap:8px}.whole-analysis-summary>h2{font-size:19px}}

/* Offer plan: compact evidence-based partner/product table. */
.offer-plan{white-space:normal}.offer-plan .offer-intro{font-weight:650;margin:8px 0}.offer-plan .source-note{font-size:12px;margin:8px 0;line-height:1.5}.offer-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}.offer-table th,.offer-table td{padding:10px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.offer-table th{background:var(--soft);color:var(--green)}.offer-table th:nth-child(1){width:22%}.offer-table th:nth-child(2){width:22%}.offer-table th:nth-child(3){width:34%}.offer-table th:nth-child(4){width:22%}.offer-table small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.offer-table summary,.offer-more>summary{cursor:pointer;min-height:44px;align-content:center;color:var(--green)}.offer-table .btn{margin:4px 4px 4px 0}.offer-more{margin:8px 0}.chat-log .bubble:has(.offer-plan){width:100%;max-width:100%;padding:14px}.offer-table-scroll{max-width:100%}@media(max-width:600px){.offer-table{min-width:620px}.offer-table td{padding:8px}.offer-plan::before{content:'Geser tabel untuk melihat semua kolom';display:block;font-size:11px;color:var(--muted);margin-bottom:6px}}

/* Chrome short-height QA: reserve working space for the actual conversation. */
.tera-view .page-heading,.tera-view .compact-intro.has-chat{display:none}
.offer-plan>details>summary{min-height:44px;align-content:center;cursor:pointer;font-size:12px;color:var(--green)}
@media(min-width:761px){body:not(.tera-view) .sidebar{top:var(--pwa-toolbar-height,60px);height:calc(100dvh - var(--pwa-toolbar-height,60px))}}

/* Portrait QA: constrain flex children, let only the table scroll sideways. */
.tera-view #page{width:100%;max-width:100%;min-width:0}
.tera-view .chat-layout,.tera-view .chat-log{width:100%;max-width:100%;min-width:0}
.tera-view .bubble{min-width:0;box-sizing:border-box}
.offer-plan{width:100%;max-width:100%;min-width:0}
.offer-table-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto}