html.modal-active{overflow:hidden;overscroll-behavior:none}
/* Dialog size follows its purpose; the dialog is the only scroll owner. */
dialog:is(#dialog,#modal)[open]{
  --dialog-pad:clamp(16px,2.2vmin,32px);
  position:fixed;inset:0;margin:auto;box-sizing:border-box;
  width:min(880px,calc(100vw - 40px));height:fit-content;border:1px solid var(--t-border,#e5e5e5);border-radius:14px;box-shadow:0 18px 70px #0002;
  min-width:0;min-height:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:0!important;
  display:block;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
  scrollbar-gutter:stable;overflow-wrap:anywhere;
}
dialog:is(#dialog,#modal)[open][data-dialog-layout="compact"]{width:min(520px,calc(100vw - 32px))}
dialog:is(#dialog,#modal)[open][data-dialog-layout="wide"]{width:min(1320px,calc(100vw - 48px))}
dialog:is(#dialog,#modal)[open]>form{display:block;min-width:0;margin:0;height:auto;max-height:none;overflow:visible}
dialog:is(#dialog,#modal)[open] .modal-head{
  position:static;display:flex;align-items:flex-start;justify-content:space-between;
  flex:none;gap:16px;padding:var(--dialog-pad);border-bottom:1px solid var(--t-border,#e6e6e6);background:var(--t-surface,#fff);z-index:3;
}
dialog:is(#dialog,#modal)[open] .modal-head>div{min-width:0;overflow-wrap:anywhere}
dialog:is(#dialog,#modal)[open] .modal-heading{margin:0;padding:0}
dialog:is(#dialog,#modal)[open] .modal-description{margin:6px 0 0}
dialog:is(#dialog,#modal)[open] .modal-close{position:static;float:none;flex:none;margin:0}
dialog:is(#dialog,#modal)[open] .modal-close,dialog:is(#dialog,#modal)[open] .close-modal{min-width:44px;min-height:44px}
dialog:is(#dialog,#modal)[open] .modal-body{
  display:block;min-width:0;min-height:0;height:auto;max-height:none;overflow:visible;
  padding:var(--dialog-pad);
}
dialog:is(#dialog,#modal)[open] .modal-foot,dialog:is(#dialog,#modal)[open] .modal-actions{
  position:static;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:12px;margin:0;padding:16px var(--dialog-pad);border-top:1px solid var(--t-border,#e6e6e6);background:var(--t-surface,#fff);z-index:2;
}
dialog:is(#dialog,#modal)[open]>form>.form-error{margin:0;padding:8px var(--dialog-pad);max-height:none;overflow:visible}
dialog:is(#dialog,#modal)[open]>form>.form-error:empty{display:none}
dialog:is(#dialog,#modal)[open] :is(.chat-messages,.table-wrap,.table-panel,.scroll-table,.line-editor,.import-preview,.preview-values,.assistant-content){height:auto;min-height:0;max-height:none;overflow:visible}
dialog:is(#dialog,#modal)[open] :is(.form-grid,.decision-form,.check-grid,.permission-grid){min-width:0}
dialog:is(#dialog,#modal)[open] .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
dialog:is(#dialog,#modal)[open] :is(.form-grid,.check-grid,.permission-grid)>*{min-width:0}
dialog:is(#dialog,#modal)[open] :is(.actions,.toolbar,.chat-toolbar,.summary-strip,.split-heading){flex-wrap:wrap;min-width:0}
dialog:is(#dialog,#modal)[open] :is(button,.btn,.button){white-space:normal;max-width:100%}
dialog:is(#dialog,#modal)[open] :is(input,select,textarea){max-width:100%;box-sizing:border-box}
dialog:is(#dialog,#modal)[open] :is(.metrics,.finance-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
dialog:is(#dialog,#modal)[open] .metric{min-height:0}
dialog:is(#dialog,#modal)[open] :is(.metric strong,.metric b){white-space:normal;overflow-wrap:anywhere}
dialog:is(#dialog,#modal)[open] :is(.image-comparison img,.image-compare img){height:auto;max-height:none;max-width:100%}
:is(dialog[open],#main,#content) textarea{max-height:none!important;overflow:hidden;resize:none}
.assistant-workspace .chat-messages,.assistant-workspace .preview-values{height:auto;min-height:0;max-height:none;overflow:visible}
/* Tables reflow into labelled records when their columns no longer fit comfortably. */
:is(dialog[open],#main,#content) table{width:100%;min-width:0;table-layout:fixed}
:is(dialog[open],#main,#content) :is(td,th){min-width:0;max-width:none;white-space:normal;overflow-wrap:anywhere}
:is(dialog[open],#main,#content) .line-editor :is(input,select){width:100%!important;min-width:0}
:is(dialog[open],#main,#content) table.dialog-table-cards{display:block}
:is(dialog[open],#main,#content) .dialog-table-cards>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:is(dialog[open],#main,#content) .dialog-table-cards>tbody{display:block}
:is(dialog[open],#main,#content) .dialog-table-cards>tbody>tr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:16px;margin:0 0 20px;padding:16px;border:1px solid var(--t-border,#e5e5e5);border-radius:8px}
:is(dialog[open],#main,#content) .dialog-table-cards>tbody>tr>td{display:block;min-width:0;width:auto;padding:0;border:0;text-align:left}
:is(dialog[open],#main,#content) .dialog-table-cards td[data-column-label]:before{content:attr(data-column-label);display:block;font-weight:500;color:var(--t-text,#666);margin-bottom:6px}
:is(dialog[open],#main,#content) .dialog-table-cards :is(.line-description,[data-full-row]){grid-column:1/-1}
:is(dialog[open],#main,#content) .dialog-table-cards.with-header-controls>thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
:is(dialog[open],#main,#content) .dialog-table-cards.with-header-controls>thead :is(tr,th){display:block}
:is(dialog[open],#main,#content) .dialog-table-cards.with-header-controls>thead th:not(:has(input,button,select)){display:none}
dialog button,dialog input,dialog select,dialog textarea,dialog a{pointer-events:auto}
dialog button{min-height:44px}
dialog[open]::backdrop{pointer-events:auto}
dialog:not([open]){display:none!important}
dialog[inert]{pointer-events:none}
button svg,a svg{pointer-events:none}
#toast{pointer-events:none!important}
@media(max-width:650px){
  dialog:is(#dialog,#modal)[open]{--dialog-pad:16px;width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  dialog:is(#dialog,#modal)[open][data-dialog-layout="wide"]{width:calc(100vw - 16px)}
  dialog:is(#dialog,#modal)[open] .modal-head{padding-top:max(12px,env(safe-area-inset-top));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  dialog:is(#dialog,#modal)[open] .modal-body{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  dialog:is(#dialog,#modal)[open] .modal-foot,dialog:is(#dialog,#modal)[open] .modal-actions{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  dialog:is(#dialog,#modal)[open] :is(.form-grid,.check-grid,.permission-grid,.quick-actions,.unified-drawer){grid-template-columns:minmax(0,1fr)}
  dialog .form-grid .full{grid-column:auto}
}
@media(max-height:500px){
  dialog:is(#dialog,#modal)[open]{--dialog-pad:12px}
  dialog:is(#dialog,#modal)[open] .modal-head{padding-top:8px;padding-bottom:8px}
  dialog:is(#dialog,#modal)[open] .modal-foot,dialog:is(#dialog,#modal)[open] .modal-actions{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* Primary pages use the same table and long-text reflow as secondary pages. */
:is(#main,#content) :is(.table-wrap,.table-panel,.scroll-table,.line-editor,.import-preview){min-width:0;max-height:none;overflow:visible}
:is(dialog[open],#main,#content) :is(.tabs,.status-tabs,.detail-tabs,.composer-tools){flex-wrap:wrap;overflow:visible}
:is(#main,#content) .form-grid>*{min-width:0}