/* Shared staff/portal components. All colours come from the active CRM palette.
   Printed business documents retain their own independent paper layouts. */
@media screen {
 body.mcrm-admin-workspace #wpcontent,body.mcrm-admin-workspace #wpbody,body.mcrm-admin-workspace #wpbody-content{background:var(--wash);color:var(--ink)}
 body.mcrm-admin-workspace #wpcontent{padding-left:0}
 body.mcrm-admin-workspace #wpbody-content>.wrap:has(#mcrm){margin:0}
 body.mcrm-admin-workspace #wpfooter{background:var(--wash);color:var(--muted)}
 body.mcrm-admin-workspace #mcrm{margin:0;border-radius:0;border-inline:0}
 body.mcrm-admin-workspace #mcrm>header{border-radius:0}
 #mcrm{font:15px/1.5 system-ui,sans-serif}
 #mcrm .mcrm-main{padding:22px 24px;min-width:0;container-type:inline-size;container-name:crm-content}
 #mcrm .service-report-email{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;scroll-margin-top:110px}
 #mcrm .service-report-email form.grid{grid-template-columns:minmax(0,1fr)}
 #mcrm .service-report-email :is(input,textarea,button){max-inline-size:100%;min-inline-size:0}
 #mcrm .service-report-email textarea.service-report-message{resize:none;overflow-y:hidden;line-height:1.5;overflow-wrap:anywhere}
 #mcrm .mcrm-main>h2{font-size:24px;line-height:1.25;margin:0 0 6px}
 #mcrm .mcrm-main>h2+.muted{margin:0 0 18px;max-width:85ch}
 #mcrm .mcrm-main :is(h3,h4,h5,h6):not(.document-paper *){margin-block:22px 8px;line-height:1.35}
 #mcrm .mcrm-main :is(h3,h4,h5,h6):first-child:not(.document-paper *){margin-block-start:0}
 #mcrm .mcrm-main>section+section{margin-block-start:22px}
 #mcrm .mcrm-main :is(.toolbar,.form-actions){gap:8px 10px;margin-block:12px}
 #mcrm .mcrm-main .toolbar .form-actions{margin:0}
 #mcrm .mcrm-main .card{padding:16px;margin-block:14px;min-width:0}
 #mcrm .mcrm-main .cards{gap:12px;margin-block:16px;align-items:stretch}
 #mcrm .mcrm-main .cards>.card{margin:0}
 #mcrm .mcrm-main .card>p{margin-block:6px 12px}
 #mcrm .mcrm-main .card>:last-child{margin-block-end:0}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card){display:flex;flex-direction:column;grid-row:auto;grid-template-rows:none;gap:8px;min-height:0;align-self:stretch}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>:is(h3,h4){margin:0;min-height:0;font-size:16px;line-height:1.35}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>.amount{font-size:28px;line-height:1.2;margin:0;letter-spacing:-.5px;white-space:normal;overflow-wrap:normal}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>p{flex:none;margin:0;font-size:13px}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>button:not(.metric-drill){margin:4px 0 0;align-self:start}
 #mcrm .metric-drill:focus-visible{outline-color:var(--focus)!important}
 #mcrm button,#mcrm .m-button{line-height:1.35;min-height:44px;padding:9px 14px;color:var(--button-text)}
 #mcrm button.secondary,#mcrm .m-button.secondary{color:var(--ink);background:var(--paper);border-color:var(--control-line)}
 #mcrm button.page-primary{background:var(--accent);color:var(--button-text);border-color:var(--accent);font-weight:750}
 #mcrm button.danger{color:var(--error);background:var(--error-bg);border-color:var(--error)}
 #mcrm button.sort-heading{min-height:0;padding:0;background:transparent;color:var(--ink);border:0;font-size:inherit;line-height:1.4}
 #mcrm .sort-heading span{color:var(--muted)}
 #mcrm .workspace-context{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px}
 #mcrm .workspace-location{flex:1 1 230px;width:auto;min-width:0;font-size:13px;padding:5px 10px}
 #mcrm .workspace-location>strong{font-size:15px}
 #mcrm .workspace-returns{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
 #mcrm .workspace-returns>button{font-size:12px;padding:6px 10px;min-height:36px;border-color:transparent}
 #mcrm .area-related{margin-block:22px}
 #mcrm .area-related>.toolbar{margin:8px 0 0}
 #mcrm .module-settings-shortcut{display:flex;justify-content:flex-end;margin:0 0 10px}
 #mcrm .module-settings-shortcut button{font-size:12px;padding:6px 10px;min-height:36px}
 #mcrm .section-help,#mcrm .action-guidance{font-size:13px;color:var(--muted);margin:4px 0 12px;max-width:85ch}
 #mcrm .report-directory,#mcrm .workspace-directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:14px;margin-block:16px;align-items:stretch}
 #mcrm .report-directory>.card,#mcrm .workspace-directory>.card{margin:0;display:flex;flex-direction:column;gap:8px;grid-row:auto;grid-template-rows:none}
 #mcrm .report-directory .card>h3,#mcrm .workspace-directory .card>h3{margin:0;min-height:0}
 #mcrm .report-directory .card>p,#mcrm .workspace-directory .card>p{margin:0;font-size:13px}
 #mcrm .directory-actions{display:grid;gap:8px;margin-top:4px}
 #mcrm .directory-actions>button{text-align:left;width:100%;margin:0;font-size:14px}
 #mcrm .record-identity{display:grid;gap:3px;line-height:1.4;min-width:0}
 #mcrm .record-identity strong{font-size:14px;overflow-wrap:anywhere}
 #mcrm .record-identity small{font-size:12px;line-height:1.4}
 #mcrm .scroll{margin-block:10px 18px}
 #mcrm .scroll table{line-height:1.4;table-layout:auto}
 #mcrm .scroll th,#mcrm .scroll td{padding:10px 12px;vertical-align:middle}
 #mcrm .scroll th{font-size:12px;letter-spacing:0}
 #mcrm .scroll .action-column{width:1%;white-space:nowrap}
 #mcrm .scroll .numeric-column{width:1%;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:normal;word-break:normal}
 #mcrm .scroll td>button{font-size:13px;min-height:40px;padding:8px 10px}
 #mcrm .mcrm-main .choice-label,#mcrm .mcrm-main label:has(>input[type=checkbox]),#mcrm .mcrm-main label:has(>input[type=radio]){display:flex;flex-direction:row;align-items:center;gap:9px;grid-row:auto;grid-template-rows:none;line-height:1.45}
 #mcrm .mcrm-main label>input:is([type=checkbox],[type=radio]){width:20px;height:20px;min-height:20px;margin:0;flex:none;align-self:center}
 #mcrm .report-directory button,#mcrm .area-links button{white-space:normal}
 @container crm-content (max-width:650px){
  #mcrm .mcrm-main .area-metrics,#mcrm .mcrm-main .area-parts-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  #mcrm .mcrm-main .area-metric{padding:12px}
  #mcrm .mcrm-main .area-metric :is(h3,h4){font-size:14px;min-height:0}
  #mcrm .mcrm-main .area-metric>.amount{font-size:24px}
  #mcrm .mcrm-main .area-metric button{font-size:12px;padding:8px}
 }
 @media(max-width:719px){
  body.mcrm-admin-workspace{min-width:0}
  body.mcrm-admin-workspace #wpbody-content>.wrap:has(#mcrm){min-inline-size:0;max-inline-size:100%}
  #mcrm .mcrm-main{padding:18px 12px}
  #mcrm .mcrm-main .service-report-email{padding:12px;scroll-margin-top:16px}
  #mcrm .service-report-email :is(input,textarea){font-size:16px}
  #mcrm .service-report-email .form-actions>button{width:100%}
  #mcrm .workspace-context{padding:8px 10px}
  #mcrm .workspace-returns{width:100%}
  #mcrm .scroll .action-column,#mcrm .scroll .numeric-column{width:auto;white-space:normal;text-align:left}
  #mcrm .scroll td.numeric-column{overflow-wrap:normal}
 }
}

@media screen{
 #mcrm .directory-actions>button>small{display:block;font-size:12px;line-height:1.4;font-weight:400;color:inherit;margin-top:4px}
 #mcrm .money-tabs button[aria-current=page]{border-color:var(--accent);box-shadow:inset 0 -3px var(--accent);font-weight:750}
 #mcrm .mcrm-main>p:empty{display:none}
}

@media screen{
 #mcrm .scroll th.action-column,#mcrm .scroll td.action-column{width:140px;min-width:120px}
 #mcrm .scroll td.action-column>button{width:auto;min-width:76px;max-width:none}
 #mcrm .scroll th.numeric-column,#mcrm .scroll td.numeric-column{width:8ch;min-width:8ch}
 #mcrm button.sort-heading{min-height:28px;min-width:28px;padding-block:3px}
 #mcrm input:is([type=checkbox],[type=radio]):not(.document-paper *),#mcrm .mcrm-main label>input:is([type=checkbox],[type=radio]){width:24px;min-width:24px;height:24px;min-height:24px}
 @media(max-width:719px){#mcrm .scroll th.action-column,#mcrm .scroll td.action-column,#mcrm .scroll th.numeric-column,#mcrm .scroll td.numeric-column{width:auto;min-width:0}}
}

@media screen{#mcrm .directory-entry{display:grid;gap:4px}#mcrm .directory-entry>button{width:100%;text-align:left}#mcrm .directory-entry>small{font-size:12px;line-height:1.4;margin:0 2px;color:var(--muted)}}

@media screen{
 #mcrm .scroll button.row-primary:not(.danger){background:var(--accent);border-color:var(--accent);color:var(--button-text)}
 #mcrm .workspace-returns>button{max-width:36ch;white-space:normal;text-align:left}
 #mcrm .workspace-panel{scroll-margin-top:110px}
 @media(max-width:719px){#mcrm>.area-navigation,#mcrm .workspace-context{position:static;top:auto}#mcrm .workspace-panel{scroll-margin-top:16px}}
}

/* Individual forms share the same rhythm as the module overview pages. */
@media screen{
 #mcrm :is(.mcrm-main,dialog) form.grid,#mcrm :is(.mcrm-main,dialog) form .grid:not(.line){row-gap:14px;align-items:start}
 #mcrm :is(.mcrm-main,dialog) form.grid>label:not(:has(>input[type=checkbox],>input[type=radio])),#mcrm :is(.mcrm-main,dialog) form .grid:not(.line)>label:not(:has(>input[type=checkbox],>input[type=radio])){display:grid;grid-row:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;min-width:0}
 #mcrm :is(.mcrm-main,dialog) form.grid>label>:is(input,select,textarea),#mcrm :is(.mcrm-main,dialog) form .grid:not(.line)>label>:is(input,select,textarea){margin:5px 0 0}
 #mcrm :is(.mcrm-main,dialog) form label>small{margin-top:5px;line-height:1.4}
 #mcrm :is(.mcrm-main,dialog) form>fieldset,#mcrm :is(.mcrm-main,dialog) form .record-search-picker{margin:0;min-width:0;padding:12px}
 #mcrm :is(.mcrm-main,dialog) form>.form-actions{border-top:1px solid var(--line);padding-top:14px;margin:4px 0 0;align-items:center;grid-column:1/-1}
 #mcrm :is(.mcrm-main,dialog) form>.form-actions>button{width:auto;max-width:100%;white-space:normal}
 #mcrm .record-picker-results{max-height:224px;overscroll-behavior:contain;scrollbar-gutter:stable}
 #mcrm .record-picker-results>button{font-size:14px;padding:8px 10px}
 #mcrm .entry-complete{background:var(--success-bg);color:var(--success)}
 #mcrm .entry-next{margin-top:12px}
 #mcrm :is(.mcrm-main,dialog) form .choice-label{align-self:start}
}

@media screen{
 #mcrm .receipt-exception-options[open]{min-width:0;width:100%;max-width:100%}
 #mcrm .repair-receipt-cell,#mcrm .receipt-exception-options form,#mcrm .choice-label-text{min-width:0;max-width:100%}
 @media(max-width:719px){#mcrm .scroll td:has(.receipt-exception-options){grid-column:1/-1}}
}

@media screen{
 #mcrm dialog .form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 #mcrm .repair-photo-dialog>div:not(.repair-photo-dialog-heading)>button+button{margin-inline-start:8px}
}

@media screen{#mcrm [role=tablist] button[aria-selected=true]{background:var(--accent);color:var(--button-text);border-color:var(--accent);font-weight:750}}

@media screen{#mcrm .migration-actions button:disabled{cursor:not-allowed}}

/* A wrapped confirmation starts beside its checkbox, including in dialogs. */
@media screen{
 #mcrm :is(.mcrm-main,dialog) label.choice-label{align-items:flex-start}
 #mcrm :is(.mcrm-main,dialog) label.choice-label>input:is([type=checkbox],[type=radio]){align-self:flex-start;margin-block-start:0}
}

@media screen{#mcrm .migration-actions{align-items:stretch}}

/* Align rows by their content, without fixed card heights or clipped text. */
@media screen {
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card){display:grid;grid-template-rows:auto auto 1fr auto;align-items:start;align-self:stretch;gap:8px}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>:is(h3,h4){grid-row:1}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>.amount{grid-row:2}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>p{grid-row:3}
 #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card)>button:not(.metric-drill){grid-row:4;align-self:end;justify-self:stretch;width:100%;min-height:44px;margin:0}
 #mcrm .mcrm-main :is(.report-directory,.workspace-directory){align-items:stretch}
 #mcrm .mcrm-main :is(.report-directory,.workspace-directory)>.card{align-self:stretch;display:grid;grid-template-rows:auto auto 1fr;align-items:start}
 #mcrm .mcrm-main :is(.report-directory,.workspace-directory) .directory-actions{align-content:start;margin:0}
 #mcrm .business-dashboard .business-charts{align-items:stretch}
 #mcrm .business-dashboard .chart-card{display:grid;grid-template-rows:auto auto 1fr auto auto;align-self:stretch;gap:8px;margin:0}
 #mcrm .business-dashboard .chart-card>h3{grid-row:1;margin:0}
 #mcrm .business-dashboard .chart-card>p{grid-row:2;margin:0}
 #mcrm .business-dashboard .chart-visual{grid-row:3;min-height:186px;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:flex-end}
 #mcrm .business-dashboard .chart-visual.pie-layout{justify-content:center;align-items:center;flex-wrap:nowrap}
 #mcrm .business-dashboard .chart-visual>.empty{margin:0;padding:20px 12px;align-self:stretch}
 #mcrm .business-dashboard .chart-scale{font-size:12px;margin:0 0 6px}
 #mcrm .business-dashboard .chart-data-table{grid-row:4;margin:0}
 #mcrm .business-dashboard .chart-data-table>summary{padding:8px 0;min-height:44px;font-size:13px}
 #mcrm .business-dashboard .chart-card>button:last-child{grid-row:5;align-self:end;justify-self:stretch;width:100%;min-height:44px;margin:0}
 #mcrm .business-dashboard .chart-breakdown{grid-column:1/-1;display:block;margin:0;padding:14px}
 #mcrm .business-dashboard .chart-breakdown>summary{font-weight:650;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}
 #mcrm .business-dashboard .chart-breakdown>summary:before{content:'▸'}
 #mcrm .business-dashboard .chart-breakdown[open]>summary:before{content:'▾'}
 #mcrm .business-dashboard .pie-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px;max-height:none;overflow:visible;margin:12px 0 0}
 #mcrm .business-dashboard .pie-legend li{margin:0;min-width:0}
 #mcrm .business-dashboard .pie-legend button{width:100%;min-height:44px}
 #mcrm .business-dashboard .business-panels{align-items:stretch}
 #mcrm .business-dashboard .business-panels>.card{display:flex;flex-direction:column;margin:0;gap:8px}
 #mcrm .business-dashboard .business-panels>.card>button:last-child{margin-top:auto;align-self:stretch}
 #mcrm .mcrm-main .area-related{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:20px 0;padding-top:14px;border-top:1px solid var(--line)}
 #mcrm .mcrm-main .area-related>h3{font-size:14px;margin:0}
 #mcrm .mcrm-main .area-related>.toolbar{margin:0;gap:8px}
 #mcrm .mcrm-main .area-related button{font-size:13px;padding:8px 12px;min-height:44px}
 @supports(grid-template-rows:subgrid){
  #mcrm .mcrm-main :is(.area-metric,.financial-summary-card,.summary-metric,.metric-card){grid-row:span 4;grid-template-rows:subgrid}
  #mcrm .mcrm-main :is(.report-directory,.workspace-directory)>.card{grid-row:span 3;grid-template-rows:subgrid}
  #mcrm .business-dashboard .chart-card{grid-row:span 5;grid-template-rows:subgrid}
 }
}

@media screen {
 /* Actions have a filled, raised outline; fields retain their flat input surface. */
 #mcrm .mcrm-main button.secondary:not(.sort-heading,.chart-bar,.metric-drill,.danger,.row-primary,.page-primary,[role=tab],[aria-current],[aria-pressed=true]),#mcrm dialog button.secondary{border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--paper));border-color:var(--control-line);box-shadow:0 1px 0 var(--control-line)}
 #mcrm .mcrm-main button.secondary:not(.sort-heading,.chart-bar,.metric-drill,.danger,.row-primary,.page-primary,[role=tab],[aria-current],[aria-pressed=true]):hover,#mcrm dialog button.secondary:hover{background:color-mix(in srgb,var(--accent) 17%,var(--paper))}
 #mcrm .mcrm-main .directory-actions :is(button,.m-button){width:auto;max-width:100%;justify-self:start;text-align:left;display:inline-flex;align-items:center;gap:10px}
 #mcrm .mcrm-main .directory-actions button:after,#mcrm .mcrm-main .area-related button:after{content:'→';font-size:1.15em;flex:none}
 #mcrm .mcrm-main .directory-actions button.secondary{border:0;border-radius:4px;box-shadow:none;background:transparent;padding:8px 0;text-decoration:underline;text-underline-offset:4px}
 #mcrm .mcrm-main .directory-actions button.secondary:hover{background:var(--wash);color:var(--ink)}
 #mcrm .directory-entry{display:grid;align-content:start;gap:2px;padding-bottom:8px}
 #mcrm .directory-entry small{display:block;font-size:12px}
 #mcrm .chart-breakdowns{display:grid;gap:10px}
}

@media screen{#mcrm .metric-hint{display:block;margin-top:6px;font-size:11px;font-weight:400;color:var(--muted)}#mcrm .money-receipt-actions{margin-block:20px}#mcrm .money-receipt-actions>.toolbar{margin:8px 0}#mcrm .money-receipt-actions>p{font-size:13px;margin:0 0 8px}}

@media screen{#mcrm .mcrm-main .report-directory{grid-template-columns:minmax(0,1fr)}@container crm-content (min-width:620px){#mcrm .mcrm-main .report-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}@container crm-content (min-width:1100px){#mcrm .mcrm-main .report-directory{grid-template-columns:repeat(3,minmax(0,1fr))}}}

@media screen{#mcrm .mcrm-main .module-settings-state{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:12px}#mcrm .mcrm-main .module-settings-state>p{flex:1 1 250px;margin:0;font-size:13px}#mcrm .mcrm-main .module-settings-state>button{margin:0}#mcrm .mcrm-main .module-settings-state>strong{font-size:14px}}

@media screen{#mcrm .module-core-info>summary{font-weight:650;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}#mcrm .module-core-info>summary:before{content:'▸'}#mcrm .module-core-info[open]>summary:before{content:'▾'}#mcrm .module-settings-card .notice{font-size:12px}#mcrm .mcrm-main .workspace-directory>.card>.directory-actions{align-self:start}}

/* Keep filter labels beside their controls, and document identity beside its actions. */
@media screen {
 #mcrm .mcrm-main .control-toolbar>.toolbar-field{grid-template-rows:auto auto auto;align-content:start;row-gap:5px}
 #mcrm .mcrm-main .control-toolbar .control-label{min-height:0;align-self:end}
 #mcrm .document-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;align-items:start}
 #mcrm .document-summary{min-width:0;display:grid;gap:6px}
 #mcrm .document-summary>:is(h4,p){margin:0;overflow-wrap:anywhere}
 #mcrm .document-summary>h4{font-size:16px;line-height:1.4}
 #mcrm .document-summary>.muted{font-size:12px}
 #mcrm .document-actions{margin:0;max-width:320px;justify-content:flex-end;align-items:start}
 #mcrm .document-actions>button{max-width:100%}
 #mcrm .document-details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:4px}
 #mcrm .document-details>summary,#mcrm .document-scan-notice summary{cursor:pointer;font-size:13px;font-weight:650;padding:8px 0;min-height:44px}
 #mcrm .document-details>p{font-size:12px;overflow-wrap:anywhere;margin:6px 0}
 #mcrm .document-scan-notice>p{font-size:13px;margin:6px 0}
 #mcrm .document-scan-notice>details>p{font-size:13px;max-width:80ch}
 #mcrm .document-upload{margin:12px 0}
 #mcrm .mail-templates>h3{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
 @container crm-content (max-width:650px){#mcrm .document-card{grid-template-columns:minmax(0,1fr)}#mcrm .document-actions{justify-content:flex-start;max-width:none}}
}

@media screen {
 #mcrm .mcrm-main .control-toolbar>.toolbar-field>:is(input,select,.status-filter){margin-top:0}
 @supports(grid-template-rows:subgrid){
  #mcrm .mcrm-main .control-toolbar:not(.record-filters)>.toolbar-field{grid-row:span 3;grid-template-rows:subgrid}
 }
 #mcrm .mcrm-main>:is(button,.m-button):has(+button),#mcrm .mcrm-main>section>:is(button,.m-button):has(+button){margin-inline-end:8px;margin-block:4px}
}

@media screen{#mcrm .record-picker-results>button{display:flex;justify-content:space-between;align-items:center;gap:12px}#mcrm .record-picker-results>button:after{content:'Select →';flex:none;font-size:11px;font-weight:650}#mcrm .record-search-picker>p[role=status]{font-size:12px;margin:4px 0}}

@media screen{
 #mcrm .module-config-nav{display:flex;align-items:end;flex-wrap:wrap;gap:10px 16px;margin:14px 0}
 #mcrm .module-config-nav>label{flex:1 1 260px;max-width:420px;margin:0}
 #mcrm .module-config-nav select{margin:5px 0 0;width:100%}
 #mcrm .module-config-links{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
 #mcrm .action-column>div{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
 #mcrm td>button+button{margin-inline-start:8px}
 #mcrm fieldset>legend{font-weight:650;font-size:14px;padding-inline:4px}
}

@media screen{
 #mcrm .catalogue-editor>.work-type-control>label{grid-template-rows:auto auto auto}
 #mcrm .catalogue-editor>.work-type-control>label>select{margin:5px 0 0}
 #mcrm .document-output-actions{margin:8px 0;gap:8px}
 #mcrm .action-group-label{font-size:12px;font-weight:650;margin-inline-end:4px}
 #mcrm .document-more-actions{margin:8px 0 14px;font-size:13px}
 #mcrm .document-more-actions>summary{cursor:pointer;font-weight:650;min-height:44px;padding:10px 0;width:fit-content}
 #mcrm .document-more-actions>.toolbar{padding:8px 0;margin:0}
}

@media screen{#mcrm .scroll td.action-column button,#mcrm .scroll td.action-column>button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:normal}#mcrm .scroll td.action-column>div{min-width:0;max-width:100%}}

@media screen{#mcrm .record-picker-match{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:left;overflow-wrap:anywhere}}

/* Keep the control beside the first text line, including 44px touch labels. */
@media screen{
 #mcrm :is(.mcrm-main,dialog) label.choice-label,
 #mcrm :is(.mcrm-main,dialog) label:has(>input[type=checkbox]),
 #mcrm :is(.mcrm-main,dialog) label:has(>input[type=radio]){align-items:flex-start}
 #mcrm :is(.mcrm-main,dialog) label.choice-label>input:is([type=checkbox],[type=radio]){align-self:flex-start;margin:calc((1lh - 24px)/2) 0 0!important}
}


@media screen and (max-width:650px){
 #mcrm .document-paper{min-inline-size:0;overflow-wrap:anywhere}
 #mcrm .document-paper :is(.document-head,.document-parties,.document-dates,.document-table-wrap,.document-totals){min-inline-size:0;max-inline-size:100%}
 #mcrm .document-paper .document-head>*{min-inline-size:0}
 #mcrm .document-paper .document-logo{max-inline-size:100%;height:auto}
 #mcrm .document-paper .document-parties{grid-template-columns:minmax(0,1fr)}
 #mcrm .document-paper .document-dates{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:5px 12px}
 #mcrm .document-paper .document-totals{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
 #mcrm .document-paper .document-items{display:block;min-inline-size:0}
 #mcrm .document-paper .document-items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #mcrm .document-paper .document-items tbody{display:block}
 #mcrm .document-paper .document-items tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:12px 0;border-bottom:1px solid #dbe3e8}
 #mcrm .document-paper .document-items td{display:block;width:auto;min-inline-size:0;padding:0;border:0;text-align:start;white-space:normal;overflow-wrap:anywhere}
 #mcrm .document-paper .document-items td:first-child{grid-column:1/-1}
 #mcrm .document-paper .document-items td[data-document-label]::before{display:block;content:attr(data-document-label);font-weight:650}
 #mcrm .document-paper .document-items .document-work-type{white-space:normal;overflow-wrap:anywhere}
}