/* The 8 3R Compensation & Benefits pages only (#1471). Linked by Calculators.cshtml AFTER the page's
   own <style>, and only on a page whose ui.json declares result_envelope (#1473): every rule here
   styles markup that only such a page draws. They sat at the end of that block, in this order,
   so their cascade position is unchanged, and every other calculator page no longer carries
   them, which keeps the shared document inside its 60 KiB Brotli budget
   (CompressionCachingTests). */
/* 3R result envelope (spec 2.2 and 2.6; 3R DESIGN-r1 4): the export buttons and their note
   on the Run bar, the result warnings after the layout, and the Custom assumptions
   badge. Drawn only on a page whose ui.json declares result_envelope. */
.run-export { min-height:40px; padding:6px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
              background:var(--surface); color:var(--ink); font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; }
.run-export:hover:not(:disabled) { border-color:var(--accent-strong); color:var(--accent-strong); }
.run-export:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.run-export:disabled { cursor:not-allowed; opacity:.55; }
.run-cancel { min-height:40px; padding:6px 14px; border:1px solid var(--required-ink); border-radius:var(--radius-sm);
              background:var(--surface); color:var(--required-ink); font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; }
.run-cancel:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.run-export-note { margin:0; color:var(--muted); font-size:.85rem; }
.run-export-note:empty { display:none; }
.result-envelope { margin-top:20px; padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius-sm);
                   background:var(--surface); min-width:0; }
.result-envelope.is-stale .result-envelope-warnings { opacity:.6; }
.result-envelope-stale { margin:0 0 8px; color:var(--muted); font-style:italic; font-size:.88rem; }
.result-envelope-warnings-title { margin:0 0 6px; font-size:1rem; }
.result-envelope-warnings { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:.88rem; }
.result-envelope-warnings th, .result-envelope-warnings td { padding:4px 12px 4px 0; text-align:left; vertical-align:top; }
.result-envelope-warnings thead th { color:var(--muted); font-weight:600; }
/* A tinted, fully bordered note (the model-check pattern), never a left-edge bar. */
.custom-assumptions-badge { margin:0 0 12px; padding:8px 12px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
                            border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size:.88rem; }
.custom-assumptions-badge:last-child { margin-bottom:0; }
.custom-assumptions-title { color:var(--accent-strong); }
@media (max-width:640px) {
    .result-envelope { padding:12px 16px; }
}
/* #1471 (Ugur, 3R Compensation & Benefits): WIDE TABLES SCROLL, THEY ARE NEVER SQUEEZED. Scoped to
   .result-envelope-page, the run wrapper only a ui.json result_envelope page draws (composition/app.js),
   which is the 8 3R apps and no other page. Everywhere else the fixed, min-width:0 dense tables
   (.template-workspace .grid-in in Calculators.cshtml, .grid-in.grid-slider-popover-table in site.css) are unchanged.
   Here a table lays out automatically from its content: each editable column and its control keep a
   readable minimum, so headers wrap only at word boundaries and never overlap, and a table wider
   than the card scrolls inside its wrapper. The wrapper's own width never grows from its content
   (contain:inline-size; size containment does not capture the fixed slider editor), and it is the
   containing block of the cells' visually hidden labels (position:relative), which would otherwise
   sit at the table's far edge outside the scroller, so the page never scrolls sideways. The toolbar, panels and Add row stay in view while the table scrolls.
   The phone card layouts (records at 40em, slider-editor tables at 900px) still apply.
   DENSE_GRID_CONTROL_STANDARD.md, acceptance check 1, records this exception. */
.result-envelope-page .field:has(.grid-in-wrap) { min-width:0; }
.result-envelope-page .grid-in-wrap { position:relative; box-sizing:border-box; width:100%; max-width:100%; min-width:0;
                                      overflow-x:auto; contain:inline-size; }
.result-envelope-page .grid-in-wrap > .grid-in { table-layout:auto; width:auto; min-width:100%; }
.result-envelope-page .grid-in-wrap > :not(table) { position:sticky; left:0; }
.result-envelope-page .grid-in-wrap > .grid-in th { padding-inline:9px; font-size:.72rem; letter-spacing:.035em;
                                                    overflow-wrap:normal; word-break:normal; hyphens:none; }
.result-envelope-page .grid-in-wrap > .grid-in th.editable { min-width:7.5rem; }
.result-envelope-page .grid-in-wrap > .grid-in th.editable.grid-col-checkbox { min-width:4.5rem; }
.result-envelope-page .grid-in-wrap > .grid-in td > input:not([type=checkbox]),
.result-envelope-page .grid-in-wrap > .grid-in td > select,
.result-envelope-page .grid-in-wrap > .grid-in td .grid-slider-popover-control { min-width:7rem; }
.result-envelope-page .grid-in-wrap > .grid-in td > input[type=date] { min-width:9.5rem; }
.result-envelope-page .grid-in-wrap > .grid-in td.grid-col-text > input { min-width:9rem; }
/* The column minima above are for the TABLE layout only. A phone card keeps its own sizing (#1473
   review, REVIEW LC): at 900px and below a slider-editor table is a card of label and value
   (site.css, min-width:0 on the cell and its control), and at 40em and below a records grid is a
   card of label above value (the records block in Calculators.cshtml). Without these resets the
   7rem and 9.5rem minima would override the card's min-width:0 and push a control past a 320px
   card. Same selectors, one class more specific, so they win wherever the card applies. */
@media (max-width:900px) {
    .result-envelope-page .grid-in-wrap > .grid-in.grid-slider-popover-table th.editable,
    .result-envelope-page .grid-in-wrap > .grid-in.grid-slider-popover-table td > input:not([type=checkbox]),
    .result-envelope-page .grid-in-wrap > .grid-in.grid-slider-popover-table td > select,
    .result-envelope-page .grid-in-wrap > .grid-in.grid-slider-popover-table td .grid-slider-popover-control,
    .result-envelope-page .grid-in-wrap > .grid-in.grid-slider-popover-table td.grid-col-text > input { min-width:0; }
}
@media (max-width:40em) {
    .result-envelope-page .grid-in-wrap > .grid-in.records-table th.editable,
    .result-envelope-page .grid-in-wrap > .grid-in.records-table td > input:not([type=checkbox]),
    .result-envelope-page .grid-in-wrap > .grid-in.records-table td > select,
    .result-envelope-page .grid-in-wrap > .grid-in.records-table td .grid-slider-popover-control,
    .result-envelope-page .grid-in-wrap > .grid-in.records-table td.grid-col-text > input { min-width:0; }
}
.result-envelope-page .grid-in-wrap > .grid-in .grid-action-heading,
.result-envelope-page .grid-in-wrap > .grid-in .grid-action-cell { width:auto; white-space:nowrap; }
/* #1471 item 4: ONE button style on these pages. Primary (filled): Run, + Add, and the paste panel's
   commit. Secondary (outlined, the same height, radius and type): every other text button, which
   is Paste rows, Sort rows, Clear all and its confirmation, the paste panel's Cancel, the pager,
   the row form's buttons, export, copy, Cancel calculation and the slider editor's Done. Icon (the
   secondary look, square): a row's actions and .records-icon-btn, with a 16px SVG
   that paints in currentColor (the markup's own fill or stroke); a remove turns the required ink on hover. The cell controls
   (slider-editor triggers) and the problem list's links keep their own look.
   The standard grid's own "+ Add" (.grid-add) and Remove (.grid-remove) take this same look on EVERY page now (Ugur,
   2026-11-06, rule 21: the Subscription Pricing Plans grid is the standard look): their rules are the base ones in
   Pages/Calculators.cshtml, and are not repeated here. */
.result-envelope-page :is(.run-btn, .records-commit),
.result-envelope-page :is(.run-action, .run-copy, .run-export, .run-cancel, .grid-slider-popover-close),
.result-envelope-page :is(.records-toolbar, .records-confirm, .records-panel-actions, .records-pager) button:not(.grid-add, .records-commit),
.result-envelope-page .records-detail > button {
    -webkit-appearance:none; appearance:none; box-sizing:border-box; display:inline-flex; align-items:center;
    justify-content:center; gap:6px; min-height:40px; margin:0; padding:0 16px; border:1px solid var(--line-strong);
    border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; font-size:.88rem;
    font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; }
.result-envelope-page :is(.run-btn, .records-commit) {
    border-color:var(--accent-strong); background:var(--accent-strong); color:var(--hero-ink); font-weight:700; }
.result-envelope-page :is(.run-btn, .records-commit):hover:not([aria-disabled="true"]):not(:disabled) {
    border-color:var(--accent); background:var(--accent); color:var(--hero-ink); }
.result-envelope-page :is(.run-action, .run-copy, .run-export, .run-cancel, .grid-slider-popover-close):hover:not(:disabled),
.result-envelope-page :is(.records-toolbar, .records-confirm, .records-panel-actions, .records-pager) button:not(.grid-add, .records-commit):hover:not(:disabled),
.result-envelope-page .records-detail > button:hover:not(:disabled) {
    border-color:var(--accent-strong); color:var(--accent-strong); }
.result-envelope-page :is(.records-actions button, .records-icon-btn) {
    -webkit-appearance:none; appearance:none; box-sizing:border-box; display:inline-flex; align-items:center;
    justify-content:center; gap:4px; min-width:32px; min-height:32px; margin:0; padding:0 7px; vertical-align:middle;
    border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--muted);
    font:inherit; font-size:.78rem; font-weight:600; line-height:1; cursor:pointer; }
.result-envelope-page .records-actions button + button { margin-left:6px; }
.result-envelope-page :is(.records-actions button, .records-icon-btn) svg {
    display:block; width:16px; height:16px; flex:0 0 auto; pointer-events:none; }
.result-envelope-page :is(.records-actions button, .records-icon-btn):hover:not(:disabled) {
    border-color:var(--accent-strong); color:var(--accent-strong); }
/* A records row's remove icon (.records-icon-btn.grid-remove) still turns the required ink on hover, over the rule above. */
.result-envelope-page .grid-remove:hover:not(:disabled) { border-color:var(--required-ink); color:var(--required-ink); }
.result-envelope-page :is(.run-btn, .records-commit)[aria-disabled="true"],
.result-envelope-page :is(.run-btn, .records-commit):disabled {
    border-color:var(--line-strong); background:var(--surface); color:var(--muted); cursor:not-allowed; }
.result-envelope-page :is(.run-action, .run-copy, .run-export, .run-cancel, .grid-slider-popover-close,
                          .records-actions button, .records-icon-btn):disabled,
.result-envelope-page :is(.records-toolbar, .records-confirm, .records-panel-actions, .records-pager) button:not(.grid-add, .records-commit):disabled,
.result-envelope-page .records-detail > button:disabled { opacity:.55; cursor:not-allowed; }
.result-envelope-page :is(.run-btn, .records-commit, .run-action, .run-copy, .run-export, .run-cancel,
                          .grid-slider-popover-close, .records-actions button, .records-icon-btn):focus-visible,
.result-envelope-page :is(.records-toolbar, .records-confirm, .records-panel-actions, .records-pager) button:not(.grid-add, .records-commit):focus-visible,
.result-envelope-page .records-detail > button:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.result-envelope-page .grid-slider-popover-close { display:flex; margin:8px 0 0 auto; }
@media (pointer:coarse) {
    .result-envelope-page :is(.run-btn, .records-commit, .run-action, .run-copy, .run-export, .run-cancel,
                              .grid-slider-popover-close),
    .result-envelope-page :is(.records-toolbar, .records-confirm, .records-panel-actions, .records-pager) button:not(.grid-add, .records-commit),
    .result-envelope-page .records-detail > button { min-height:44px; }
    .result-envelope-page :is(.records-actions button, .records-icon-btn) { min-width:44px; min-height:44px; }
}
/* The 3R print summary: the calculator, its result warnings and the disclaimer, without the
   page's inputs, buttons or articles (the site chrome is left out by the page's own print rules). */
@media print {
    .result-envelope-page .field, .result-envelope-page .form-head,
    .result-envelope-page input, .result-envelope-page select, .result-envelope-page textarea,
    .result-envelope-page button { display:none !important; }
    /* The page's articles are left out of the 3R print summary only. Every other page prints
       its prose sections, opened for printing (Ugur, 2026-10-28; page/content-sections.js). */
    body:has(.result-envelope-page) .content-section { display:none !important; }
    .result-envelope { break-inside:avoid; border-color:#999; }
}