/* Approved Fokus design. Screen styles only; existing export/print layouts remain independent. */
@media screen {
:root.focus-design { --bg: #f7f9fa;
    --panel: #fff;
    --surface: #f2f6f7;
    --raised: #fff;
    --ink: #182b35;
    --muted: #586a75;
    --line: #dde6e9;
    --brand: #326c7d;
    --brand-dark: #214e5e;
    --ok: #326c7d;
    --radius: 14px;
    --focus-tint: #edf5f6;
    --focus-selection: #e6f1f3;
    --focus-primary: #326c7d;
    --field-error-bg: #fff4f2;
    --field-error-border: #c8463a;
    --shadow: 0 8px 28px rgba(24,43,53,.045); }
:root.focus-design[data-theme="dark"] { --bg: #101a21;
    --panel: #18252e;
    --surface: #1d2e38;
    --raised: #243843;
    --ink: #e4edf1;
    --muted: #a6b8c2;
    --line: #30434e;
    --brand: #8bc5d4;
    --brand-dark: #b1dbe5;
    --ok: #8bc5d4;
    --focus-tint: #1c303a;
    --focus-selection: #213c47;
    --focus-primary: #377d90;
    --field-error-bg: #34262c;
    --field-error-border: #e18e85;
    --shadow: 0 8px 28px rgba(0,0,0,.08); }
:root.focus-design body { background: var(--bg); color: var(--ink); }
:root.focus-design body::before { display: none; }
:root.focus-design body :is(button,input,select,textarea) { font-family: inherit; }
:root.focus-design body :is(h1,h2,h3,h4) { letter-spacing: -.025em; font-weight: 650; }
:root.focus-design body :is(.panel-title,.carrier-name,.team-member-name,.modal-title) { color: var(--ink); font-weight: 650; }
:root.focus-design body :is(.panel-kicker,.muted,.subtitle) { color: var(--muted); }
:root.focus-design body .workspace-sidebar { background: var(--panel); border-color: var(--line); box-shadow: none; padding-top: 24px; }
:root.focus-design body .workspace-sidebar-brand { margin-bottom: 16px; }
:root.focus-design body :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link) { border-radius: 9px; font-weight: 550; color: var(--muted); min-height: 42px; }
:root.focus-design body .workspace-nav button svg { width: 20px; height: 20px; }
:root.focus-design body .workspace-nav button[aria-current="page"] { background: var(--focus-selection); color: var(--brand-dark); box-shadow: none; font-weight: 650; }
:root.focus-design body .workspace-nav button:hover { background: var(--surface); color: var(--ink); }
:root.focus-design body .workspace-nav button[aria-current="page"]:hover { background: var(--focus-selection); }
:root.focus-design body .workspace-sidebar-bottom { border-color: var(--line); }
:root.focus-design body .topbar { border-color: var(--line); padding-top: 22px; padding-bottom: 19px; }
:root.focus-design body .topbar h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -.04em; }
:root.focus-design body .topbar .subtitle { margin-top: 5px; font-size: .84rem; }
:root.focus-design body :is(.btn,.tab,.tabs button) { border-radius: 9px; font-weight: 600; box-shadow: none; }
:root.focus-design .btn.btn-primary { background: var(--focus-primary); border-color: var(--focus-primary); color: #fff; }
:root.focus-design .btn.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
:root.focus-design #clearFormBtn { background: var(--panel); border: 1px solid var(--line); color: var(--ink); }
:root.focus-design body :is(.btn,.tab,button):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
:root.focus-design body :is(.panel,.stats-card,.stats-visual-card,.team-member-row,.carrier-card,.zone-card,.service-card,.account-settings-section,.fuel-table-card) { border-color: var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; }
:root.focus-design body .panel-header { border-color: var(--line); }
:root.focus-design body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { border-color: var(--line); border-radius: 8px; background-color: var(--panel); color: var(--ink); box-shadow: none; font-weight: 500; }
:root.focus-design body :is(input,select,textarea):focus { border-color: var(--brand); outline-color: var(--brand); }
:root.focus-design body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):is([aria-invalid="true"],.character-limit-error) { border-color: var(--field-error-border); background-color: var(--field-error-bg); box-shadow: none; }
:root.focus-design body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):is([aria-invalid="true"],.character-limit-error):focus { outline-color: var(--field-error-border); }
:root.focus-design body .tier-row.has-error { background: var(--field-error-bg); color: var(--ink); }
:root.focus-design body .draft-offer { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; min-width: 0; }
:root.focus-design body .draft-offer-label { min-width: 0; color: var(--brand-dark); }
:root.focus-design body .draft-offer-actions { display: grid; grid-template-columns: minmax(0,2fr) minmax(max-content,1fr); width: 100%; min-width: 0; }
:root.focus-design body .draft-offer-actions > .btn { width: 100%; min-width: 0; white-space: normal; }
:root.focus-design body input[type="date"] { --input-padding-right: 42px; -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232f6f83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 18px 18px; }
:root.focus-design body input[type="date"]::-webkit-date-and-time-value { margin: 0; min-height: 1.35em; text-align: left; }
:root.focus-design body input[type="date"]::-webkit-datetime-edit { padding: 0; }
:root.focus-design body input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:root.focus-design[data-theme="dark"] body input[type="date"] { color-scheme: dark; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238bc5d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"); }
:root.focus-design body .fuel-table-countries label:not(.disabled):not(:has(input:disabled)):is(:hover,:focus-within) { border-color: var(--offer-outline); box-shadow: none; }
:root.focus-design body .fuel-table-countries label:focus-within { outline: none; }
:root.focus-design body .fuel-table-countries label:not(.disabled):not(:has(input:disabled)):has(input:focus-visible) { outline: 1px solid var(--brand); outline-offset: 2px; }
:root.focus-design body :is(label,.field-label,.step-content h3) { font-weight: 600; }
:root.focus-design body .workspace-page-label { font-size: .66rem; font-weight: 600; letter-spacing: .09em; }
:root.focus-design body .comparison-packages { min-width: 0; }
:root.focus-design body .extra-step-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,145px); align-items: center; gap: 12px; margin-bottom: 12px; }
:root.focus-design body #extrasFilter { width: 100%; min-width: 0; max-width: none; margin: 0; }
:root.focus-design body #extrasFilter:is([hidden],:empty) { display: none; }
:root.focus-design body .comparison-packages > .comparison-package-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .78rem; color: var(--muted); text-align: left; }
:root.focus-design body .comparison-packages > .comparison-package-toggle[hidden] { display: none; }
:root.focus-design body #comparisonSelectedPackages { min-width: 0; overflow-wrap: anywhere; }
:root.focus-design body .comparison-package-action { color: var(--brand-dark); font-weight: 600; flex-shrink: 0; }
:root.focus-design body .comparison-package-action::after { content: ' +'; }
:root.focus-design body .comparison-packages:has([aria-expanded="true"]) .comparison-package-action::after { content: ' −'; }
:root.focus-design body .comparison-packages:has([aria-expanded="true"]) > .comparison-package-toggle { margin-bottom: 12px; }
:root.focus-design body .comparison-price-details { margin: 12px 0; border: 0; padding-top: 12px; }
:root.focus-design body .comparison-price-details > summary { cursor: pointer; color: var(--muted); font-size: .78rem; }
:root.focus-design body .comparison-price-details > summary:hover { color: var(--brand); }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form .panel-body { padding: 20px; }
:root.focus-design body[data-workspace-view="comparison"] .guided-form { grid-template-columns: minmax(0,1fr); gap: 0; }
:root.focus-design body[data-workspace-view="comparison"] .form-step { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 0; gap: 10px;
    background: transparent; grid-template-columns: 24px minmax(0,1fr); }
:root.focus-design body[data-workspace-view="comparison"] .form-step:first-child { padding-top: 8px; }
:root.focus-design body[data-workspace-view="comparison"] .step-marker { width: 24px; height: 24px; background: var(--focus-tint); border: 1px solid var(--line);
    color: var(--brand-dark); font-size: .72rem; font-weight: 650; }
:root.focus-design body[data-workspace-view="comparison"] .step-content h3 { font-size: .91rem; margin-bottom: 13px; }
:root.focus-design body[data-workspace-view="comparison"] .form-step-action { display: block; border: 0; padding: 18px 0 0; }
:root.focus-design body #calculateBtn { min-height: 46px; font-size: .9rem; }
:root.focus-design body #extrasGrid { gap: 8px; }
:root.focus-design #extrasGrid .extra-card { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 11px; box-shadow: none; }
:root.focus-design #extrasGrid .extra-card-title strong { font-weight: 600; font-size: .85rem; }
:root.focus-design #extrasGrid .extra-card:has(input:checked) { --package-meta-color: var(--muted); background: var(--focus-selection); border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
:root.focus-design body .comparison-result-count { font-weight: 550; color: var(--muted); margin: 0 0 12px; }
:root.focus-design body[data-workspace-view="comparison"] .quote-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 22px; box-shadow: none; }
:root.focus-design body[data-workspace-view="comparison"] .quote-card.best { background: var(--focus-tint); border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
:root.focus-design body .quote-card:hover { border-color: var(--brand); }
:root.focus-design body .carrier-name { font-size: 1.05rem; letter-spacing: -.025em; }
:root.focus-design body .comparison-offer-total .price { color: var(--ink); font-size: 1.8rem; font-weight: 650; letter-spacing: -.045em; }
:root.focus-design body .comparison-best-label { color: var(--brand-dark); font-weight: 600; }
:root.focus-design body .comparison-best-label { font-size: .68rem; letter-spacing: .01em; }
:root.focus-design body .comparison-offer-lines { gap: 0; border: 0; padding-block: 9px; margin-block: 14px; }
:root.focus-design body .comparison-offer-lines > div { background: transparent; border: 0; padding: 5px 0; border-radius: 0; font-size: .8rem; }
:root.focus-design body .comparison-offer-lines > div strong { font-weight: 550; color: var(--ink); }
:root.focus-design body :is(.tariff-stamp,.comparison-offer-head .muted) { color: var(--muted); font-size: .75rem; }
:root.focus-design body .comparison-fuel { background: var(--panel); border-color: var(--line); }
:root.focus-design body :is(.comparison-diesel-value,.comparison-fuel-rate strong) { font-weight: 650; }
:root.focus-design body :is(.demo-preview-notice,.section-demo-notice) { background: var(--focus-tint); border-color: var(--line); color: var(--muted); border-radius: 10px; font-size: .79rem; }
:root.focus-design body :is(.stats-filter-bar,.filter-bar,.history-filter-row) { border-color: var(--line); background: transparent; }
:root.focus-design body .stats-card { padding: 18px 20px; }
:root.focus-design body .stats-card strong { color: var(--ink); font-size: 1.65rem; font-weight: 650; letter-spacing: -.035em; }
:root.focus-design body .stats-card :is(span,small) { color: var(--muted); font-weight: 500; }
:root.focus-design body .stats-visual-card { padding: 20px; }
:root.focus-design body :is(.stats-visual-card h3,.stats-ranking-title) { font-size: .95rem; font-weight: 600; }
:root.focus-design body :is(.history-table,.data-table) { border-color: var(--line); }
:root.focus-design body :is(.history-table,.data-table) th { background: var(--surface); color: var(--muted); font-weight: 600; font-size: .73rem; }
:root.focus-design body :is(.history-table,.data-table) td { border-color: var(--line); font-size: .82rem; }
:root.focus-design body :is(.history-table,.data-table) tbody tr:hover { background: var(--focus-tint); }
:root.focus-design body :is(.history-cell-total,.history-cell-total strong) { font-weight: 650; }
:root.focus-design body .team-member-row { padding: 18px; }
:root.focus-design body .workspace-team-page .team-member-card-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); grid-auto-rows: 1fr; }
:root.focus-design body .workspace-team-page .team-member-card-grid > .team-member-row { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: 24px minmax(0,1fr) 32px; align-items: center; gap: 6px; min-height: 184px; padding: 11px 16px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-card-labels { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; justify-content: flex-end; width: 100%; min-height: 24px; padding-bottom: 0; gap: 6px; }
:root.focus-design body .workspace-team-page .team-member-card-grid :is(.team-card-role,.team-self-badge) { max-width: 100%; min-height: 24px; margin: 0; padding: 3px 9px; font-size: .72rem; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-self-badge { margin-right: auto; }
:root.focus-design body .workspace-team-page .team-member-card-grid > .team-member-row:is(:hover,:focus-visible,:focus-within) { border-color: var(--offer-outline); background: var(--panel); box-shadow: 0 5px 18px rgba(23,77,98,.08); }
:root.focus-design body .workspace-team-page .team-member-card-grid > .team-member-row-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-person { grid-column: 1; grid-row: 2; flex-direction: column; align-items: center; text-align: center; justify-content: center; gap: 6px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-row.pending .team-member-actions { grid-column: 1; grid-row: 3; margin-top: 0; }
:root.focus-design body .workspace-team-page .team-member-card-grid > .team-invite-card { width: 100%; height: 100%; min-height: 184px; justify-self: stretch; padding: 16px; border-radius: var(--radius); border-color: var(--brand); background: var(--focus-tint); color: var(--brand-dark); }
:root.focus-design body .workspace-team-page .team-invite-card:is(:hover,:focus-visible):not(:disabled) { background: var(--focus-tint); border-color: var(--offer-outline); box-shadow: 0 5px 18px rgba(23,77,98,.08); }
:root.focus-design body .workspace-team-page .team-invite-card-symbol { width: 42px; height: 42px; background: var(--focus-selection); color: var(--brand-dark); }
:root.focus-design body .workspace-team-page .team-invite-card strong { font-size: .94rem; font-weight: 600; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-avatar { width: 48px; height: 48px; min-width: 48px; flex-basis: 48px; font-size: 1.05rem; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-person > div { text-align: center; align-items: center; min-width: 0; gap: 3px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-person strong { font-size: .94rem; font-weight: 650; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-person > div > span { font-size: .76rem; }
@media (max-width: 700px) {
:root.focus-design body .workspace-team-page .team-member-card-grid > .team-member-row { grid-template-rows: 24px minmax(0,1fr) 44px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-person { gap: 4px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-avatar { width: 40px; height: 40px; min-width: 40px; flex-basis: 40px; }
:root.focus-design body .workspace-team-page .team-member-card-grid .team-member-row.pending .team-member-actions .btn { min-height: 44px; }
}
:root.focus-design body .team-member-avatar { background: var(--focus-selection); color: var(--brand-dark); border: 1px solid var(--line); font-weight: 600; }
:root.focus-design body .team-member-name { font-size: .95rem; }
:root.focus-design body .team-member-email { color: var(--muted); font-size: .8rem; }
:root.focus-design body .workspace-team-page .account-activity-section { width: 100%; }
:root.focus-design body .activity-log-row { grid-template-columns: 12px minmax(0,1fr); gap: 3px 10px; min-height: 0; border-color: var(--line); padding-block: 8px; }
:root.focus-design body .activity-log-row > .activity-log-dot { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-top: 5px; }
:root.focus-design body .activity-log-row > strong { grid-column: 2; grid-row: 1; }
:root.focus-design body .activity-log-row > .activity-log-meta { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; min-width: 0; gap: 0; text-align: left; }
:root.focus-design body .activity-log-meta :is(.activity-log-actor,.activity-log-time) { font-size: .72rem; line-height: 1.3; }
:root.focus-design body .activity-log-actor + .activity-log-time::before { content: '·'; margin-inline: 6px; }
:root.focus-design body .activity-log-row strong { font-weight: 600; }
:root.focus-design body .activity-log-dot { background: var(--brand); box-shadow: 0 0 0 5px var(--focus-tint); }
:root.focus-design body .activity-log-meta { color: var(--muted); }
:root.focus-design body :is(.modal,.account-quick-menu) { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: 0 22px 90px rgba(10,30,40,.2); }
:root.focus-design { --dialog-backdrop: rgba(10,23,32,.6); --dialog-border: var(--line); --dialog-shadow: 0 24px 80px rgba(0,12,20,.32); }
:root.focus-design[data-theme="dark"] { --dialog-backdrop: rgba(2,7,12,.82); --dialog-border: #547080; --dialog-shadow: 0 24px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(169,219,232,.08); }
:root.focus-design body :is(.modal-backdrop,.mfa-dialog-backdrop,.workflow-confirm-overlay,.carrier-leave-backdrop,.matrix-weight-popup-backdrop,.fuel-table-editor-popup-backdrop) { background: var(--dialog-backdrop); backdrop-filter: blur(6px); }
:root.focus-design body :is(.modal-header,.modal-footer) { border-color: var(--line); background: var(--panel); }
:root.focus-design body .modal-header h2 { font-size: 1.25rem; font-weight: 650; }
:root.focus-design body :is(.badge,.pill,.extra-group-badge) { font-weight: 550; }
@media (min-width: 1150px) {
:root.focus-design body[data-workspace-view="comparison"] .layout { grid-template-columns: minmax(340px,370px) minmax(0,1fr); gap: 20px; }
}
@media (max-width: 1149px) {
:root.focus-design body[data-workspace-view="comparison"] .layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
:root.focus-design body .topbar { padding-top: 14px; padding-bottom: 13px; }
:root.focus-design body .topbar h1 { font-size: 1.4rem; }
:root.focus-design body .topbar .subtitle { font-size: .76rem; }
:root.focus-design body .mobile-menu-toggle { background: var(--panel); border-color: var(--line); color: var(--ink); }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form .panel-body { padding: 16px; }
:root.focus-design body[data-workspace-view="comparison"] .quote-card { padding: 18px; }
:root.focus-design body .comparison-offer-total .price { font-size: 1.55rem; }
:root.focus-design body :is(input:not([type="checkbox"]):not([type="radio"]),select) { min-height: 44px; font-size: 16px; }
:root.focus-design body #extrasFilter { font-size: .8rem; }
:root.focus-design body .stats-card { padding: 15px; }
:root.focus-design body .stats-card strong { font-size: 1.35rem; }
:root.focus-design body .modal { border-radius: 16px; }
:root.focus-design body .modal .btn { min-height: 44px; }
:root.focus-design body .modal .icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}
@media (min-width: 360px) and (max-width: 700px) {
:root.focus-design body .comparison-form .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
:root.focus-design body .comparison-form .field > label { font-size: .75rem; }
}
}

/* Compact workspace and vertical offer list. */
@media screen {
:root.focus-design { --radius: 12px;
    --bg: #f5f7f8;
    --line: #e1e7e9; }
:root.focus-design[data-theme="dark"] { --bg: #101a21; --line: #30434e; }
:root.focus-design body .topbar { padding-block: 22px 18px; }
:root.focus-design body .topbar h1 { font-size: 1.65rem; font-weight: 600; letter-spacing: -.045em; }
:root.focus-design body .workspace-page-label { display: none; }
:root.focus-design body .topbar .subtitle { font-size: .79rem; }
:root.focus-design body .workspace-sidebar { --sidebar-font-size: .82rem; padding-top: 25px; }
:root.focus-design body .workspace-sidebar-brand { border: 0; margin-bottom: 12px; }
:root.focus-design body .workspace-nav { padding-top: 4px; }
:root.focus-design body .workspace-sidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link) { border: 0; font-size: var(--sidebar-font-size); font-weight: 500; line-height: 1.25; min-height: 44px; }
:root.focus-design body .workspace-sidebar :is(.workspace-nav button,.workspace-sidebar-bottom button) > span { font: inherit; }
:root.focus-design body #supportMenuToggle { font-size: var(--sidebar-font-size); }
:root.focus-design body .workspace-nav button[aria-current="page"] { font-weight: 600; }
:root.focus-design body .workspace-sidebar-bottom { margin-top: auto; padding-top: 12px; }

:root.focus-design body[data-workspace-view="comparison"] .comparison-form .panel-body { padding: 18px; }
.comparison-form-heading { padding-bottom: 14px; }
.comparison-form-heading h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.035em; }
:root.focus-design body[data-workspace-view="comparison"] .form-step { grid-template-columns: minmax(0,1fr); padding-block: 12px; }
:root.focus-design body[data-workspace-view="comparison"] .form-step:nth-child(-n+2) { padding: 0 0 12px; border: 0; }
:root.focus-design body[data-workspace-view="comparison"] .form-step:nth-child(3) { padding: 12px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
:root.focus-design body .step-marker { display: none; }
:root.focus-design body[data-workspace-view="comparison"] .step-content h3 { font-size: .81rem; font-weight: 600; margin-bottom: 10px; }
:root.focus-design body[data-workspace-view="comparison"] .extra-step-heading > h3 { margin: 0; }
:root.focus-design body[data-workspace-view="comparison"] .form-step-action { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--line); }
:root.focus-design body .field > label { font-weight: 500; font-size: .71rem; }
:root.focus-design body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-weight: 400; }
:root.focus-design body .workflow-templates { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 14px; margin-bottom: 14px; }
:root.focus-design body .workflow-templates label { font-size: .75rem; margin-bottom: 5px; }
:root.focus-design body .workflow-templates select { font-size: .8rem; }
:root.focus-design body #manageTransportTemplatesBtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; padding: 0; line-height: 1; }
:root.focus-design body #manageTransportTemplatesBtn svg { display: block; width: 18px; height: 18px; flex: 0 0 auto; }
:root.focus-design body :is(.demo-preview-notice,.section-demo-notice) { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-top: 0; }
:root.focus-design body .demo-preview-copy { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
:root.focus-design body .demo-preview-copy strong { font-size: .68rem; font-weight: 600; flex-shrink: 0; color: var(--muted); }
:root.focus-design body .demo-preview-copy :is(p,span) { font-size: .68rem; margin: 0; }
:root.focus-design body .demo-preview-actions .btn { padding: 6px 9px; min-height: 30px; min-width: 98px; white-space: nowrap; font-size: .65rem; background: var(--surface); border-color: var(--line); color: var(--muted); }
.comparison-results-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 14px; }
.comparison-results-heading h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.025em; }
:root.focus-design body #results { gap: 10px; }
:root.focus-design body #results > :not(.quote-card) { grid-column: 1 / -1; }
:root.focus-design body #results .quote-card { margin-bottom: 10px; }
:root.focus-design body .carrier-name { font-size: .94rem; font-weight: 600; }
:root.focus-design body .comparison-offer-head .muted { font-size: .7rem; }
:root.focus-design body .comparison-offer-total .price { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
:root.focus-design body .comparison-best-label { background: var(--focus-selection); color: var(--brand-dark); font-weight: 550; font-size: .6rem; padding: 4px 7px; }
:root.focus-design body .comparison-price-details { margin: 12px 0 0; padding-top: 10px; }
:root.focus-design body .comparison-price-details summary { font-size: .7rem; }
:root.focus-design body .quote-card-actions .btn { font-size: .72rem; font-weight: 550; min-height: 32px; padding: 6px 10px; }
:root.focus-design body :is(.history-table,.data-table) th { font-size: .65rem; letter-spacing: .04em; font-weight: 500; }
:root.focus-design body .team-role-pill { background: var(--surface); color: var(--muted); font-weight: 500; border: 1px solid var(--line); }
:root.focus-design body .activity-log-row strong { font-weight: 500; font-size: .79rem; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-card strong { font-weight: 600; font-size: 1.3rem; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-card { padding: 17px; }
:root.focus-design body .comparison-fuel-heading h2 { font-size: .9rem; }
/* Keep the price basis with its inputs, independent of the offer list height. */
:root.focus-design body .comparison-input-stack { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 16px; min-width: 0; }
:root.focus-design body:not([data-workspace-view="comparison"]) .comparison-input-stack { display: none; }
:root.focus-design body .comparison-fuel { grid-column: auto; }
:root.focus-design body .comparison-fuel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
:root.focus-design body .comparison-fuel-heading h2 { margin: 0; }
:root.focus-design body .comparison-fuel-heading p { margin: 0; padding: 3px 7px; background: var(--focus-tint); border-radius: 5px; font-size: .72rem; font-weight: 500; }
:root.focus-design body .comparison-fuel-body { grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 14px; padding: 14px 16px; }
:root.focus-design body .comparison-fuel-rates { grid-template-columns: minmax(0,1fr); gap: 9px; }
:root.focus-design body .comparison-diesel { grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 8px; border: 0; padding: 0; }
:root.focus-design body .comparison-diesel-details { min-width: 0; }
:root.focus-design body .comparison-diesel-details > summary { display: grid; grid-template-columns: minmax(0,1fr) 16px; align-items: center; justify-items: start; gap: 5px 8px; min-height: 44px; cursor: pointer; list-style: none; text-align: left; }
:root.focus-design body .comparison-diesel-details > summary::-webkit-details-marker { display: none; }
:root.focus-design body .comparison-diesel-details > summary::before { content: '+'; grid-column: 2; grid-row: 1; color: var(--brand); font-size: .9rem; }
:root.focus-design body .comparison-diesel-details[open] > summary::before { content: '−'; }
:root.focus-design body .comparison-diesel-details > summary > span { grid-column: 1; grid-row: 1; font-weight: 500; }
:root.focus-design body .comparison-diesel-details > summary > strong { grid-column: 1; grid-row: 2; font-size: 1rem; font-weight: 600; }
:root.focus-design body .comparison-diesel-details > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
:root.focus-design body .comparison-diesel-meta { display: grid; gap: 4px; padding-block: 6px; }
:root.focus-design body .comparison-diesel-heading { padding-top: 1px; }
:root.focus-design body .comparison-fuel-settings { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 6px 0; border: 0; background: transparent; color: var(--brand-dark); text-align: left; }
:root.focus-design body .comparison-fuel-settings:hover { color: var(--brand); background: var(--focus-tint); }
:root.focus-design body :is(.comparison-diesel small,.comparison-diesel-source,.comparison-fuel-settings) { white-space: normal; }
:root.focus-design body .comparison-diesel strong { font-size: 1rem; }
:root.focus-design { --radius: 15px; --bg: #f1f5f6; --focus-tint: #f0f6f7; --focus-selection: #dcecee; --brand: #285f70; --brand-dark: #204b59; --focus-primary: #285f70; --offer-outline: #a4c2ca; --offer-badge-bg: #e5f5eb; --offer-badge-ink: #28734a; }
:root.focus-design[data-theme="dark"] { --bg: #101a21; --focus-tint: #1c303a; --focus-selection: #213c47; --brand: #8bc5d4; --brand-dark: #b1dbe5; --focus-primary: #377d90; --offer-outline: #547f8a; --offer-badge-bg: #203b32; --offer-badge-ink: #a0d8b8; }
:root.focus-design body .workspace-sidebar { --line: #36545e; --muted: #c0d0d5; --surface: #284c59; --panel: #234450; --focus-selection: #365f6c; --brand: #b0d4dc; --brand-dark: #fff; background: #193b48; color: #ecf3f4; border: 0; }
:root.focus-design body .workspace-sidebar-brand img { filter: brightness(0) invert(1); opacity: .95; }
:root.focus-design body .workspace-sidebar .workspace-nav button { color: #bed0d6; }
:root.focus-design body .workspace-sidebar .workspace-nav button[aria-current="page"] { color: #fff; background: #365f6c; }
:root.focus-design body .workspace-sidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link):not(:disabled):is(:hover,:focus-visible) { background: #365f6c; border-color: #7095a2; color: #fff; }
:root.focus-design body .workspace-sidebar :is(#accountMenuToggle,#supportMenuToggle)[aria-expanded="true"] { background: #365f6c; border-color: #7095a2; color: #fff; }
:root.focus-design body .workspace-sidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link):focus-visible { outline: 2px solid #b0d4dc; outline-offset: 2px; }
:root.focus-design body .workspace-sidebar .mobile-menu-close { color: #fff; background: #284c59; border-color: #36545e; }
/* Dark navigation needs brighter labels and a clearly distinct current page. */
:root.focus-design[data-theme="dark"] body #workspaceSidebar { --muted: #e6eff3; --line: #456675; --surface: #294b5a; background: #122e3b; color: #f3f8fa; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link):not(:disabled) { color: #e6eff3; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link) svg { color: inherit; opacity: 1; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar :is(.workspace-nav button,.workspace-sidebar-bottom button,.workspace-sidebar-link):not(:disabled):is(:hover,:focus-visible) { background: #294b5a; color: #fff; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar .workspace-nav button[aria-current="page"] { background: #345d6d; color: #fff; box-shadow: inset 3px 0 0 #a9dbe8; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar .workspace-nav button[aria-current="page"]:is(:hover,:focus-visible) { background: #3c6676; color: #fff; }
:root.focus-design[data-theme="dark"] body #workspaceSidebar :is(#accountMenuToggle,#supportMenuToggle)[aria-expanded="true"] { background: #345d6d; color: #fff; }
:root.focus-design body .topbar h1 { font-weight: 650; }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form { border: 0; box-shadow: 0 5px 25px rgba(25,59,72,.04); }
/* Outer workspace containers must not recreate a white sheet behind the cards. */
:root.focus-design body :is(.comparison-results,.history-section,#statsPanel,#adminPanel),
:root.focus-design body .workspace-team-page .account-team-panel { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
:root.focus-design body .workspace-team-page .account-team-panel { padding: 0; }
:root.focus-design body :is(.comparison-results,.history-section) > .panel-header { background: transparent; }
:root.focus-design body[data-workspace-view="comparison"] .quote-card { padding: 16px 18px; background: var(--panel); border-radius: 12px; box-shadow: 0 3px 12px rgba(24,43,53,.045); }
:root.focus-design body[data-workspace-view="comparison"] .quote-card.best { background: var(--panel); border: 1px solid var(--offer-outline); box-shadow: inset 4px 0 0 var(--brand), 0 3px 12px rgba(24,43,53,.045); }
/* Match the subtle team-card hover; retain the cheapest offer's accent stripe. */
:root.focus-design body[data-workspace-view="settings"] .carrier-card:is(:hover,:focus-visible),
:root.focus-design body[data-workspace-view="comparison"] .quote-card:not(.tariff-expired):is(:hover,:focus-visible) { border-color: var(--offer-outline); background: var(--panel); box-shadow: 0 5px 18px rgba(23,77,98,.08); }
:root.focus-design body[data-workspace-view="comparison"] .quote-card.best:not(.tariff-expired):is(:hover,:focus-visible) { border-color: var(--brand); box-shadow: inset 4px 0 0 var(--brand), 0 5px 18px rgba(23,77,98,.08); }
:root.focus-design body .quote-card .carrier-name { font-size: 1.1rem; }
:root.focus-design body .quote-card:not(.best) .quote-card-actions .btn { background: var(--panel); border: 1px solid var(--offer-outline); color: var(--brand-dark); }
:root.focus-design body .quote-card:not(.best) .quote-card-actions .btn:hover:not(:disabled) { background: var(--focus-tint); border-color: var(--brand); filter: none; }
:root.focus-design body .comparison-carrier-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px; }
:root.focus-design body .comparison-best-label { background: var(--offer-badge-bg); color: var(--offer-badge-ink); }
:root.focus-design { --offer-difference-bg: #fff2c6; --offer-difference-ink: #754900; }
:root.focus-design[data-theme="dark"] { --offer-difference-bg: #44391e; --offer-difference-ink: #ffe183; }
:root.focus-design body .comparison-price-difference { background: var(--offer-difference-bg); color: var(--offer-difference-ink); }
:root.focus-design body .comparison-price-difference strong { font-weight: 800; white-space: nowrap; }
:root.focus-design body .comparison-offer-total :is(.comparison-best-label,.comparison-price-difference) { display: inline-block; max-width: 100%; margin: 0; padding: 3px 7px; border: 0; border-radius: 999px; font-size: .65rem; font-weight: 550; line-height: 1.25; letter-spacing: 0; text-align: center; white-space: normal; }

:root.focus-design body #results { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; }
:root.focus-design body #results .quote-card { margin: 0; }
:root.focus-design body .comparison-results-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
:root.focus-design body .comparison-results-toolbar .comparison-result-count { margin: 0; }
:root.focus-design body .comparison-sort-note { margin-left: auto; color: var(--muted); font-size: .7rem; text-align: right; }
:root.focus-design body .comparison-price-toggle { margin-left: auto; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--brand-dark); font-size: .75rem; }
:root.focus-design body .comparison-price-toggle[hidden] { display: none; }
:root.focus-design body .comparison-price-toggle:hover { border-color: var(--brand); background: var(--focus-tint); }
:root.focus-design body .empty { padding: 20px; border: 1px dashed var(--line); border-radius: 12px; background: transparent; color: var(--muted); text-align: center; font-size: .8rem; font-weight: 400; line-height: 1.55; }
:root.focus-design body .empty-guidance { gap: 8px; justify-items: center; }
:root.focus-design body .empty-guidance > strong { color: var(--muted); font-size: .9rem; font-weight: 550; line-height: 1.4; }
:root.focus-design body .empty-guidance > span { max-width: 64ch; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.55; }
:root.focus-design body .empty-actions { justify-content: center; margin-top: 4px; }
:root.focus-design body .empty-steps { justify-content: center; max-width: none; gap: 6px 16px; margin-top: 4px; }
:root.focus-design body .empty-steps span { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 400; line-height: 1.5; }
@media (max-width: 700px) {
:root.focus-design body .empty { padding: 16px; }
:root.focus-design body .empty-steps { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 5px; }
}
:root.focus-design body .comparison-offer-head { display: flex; align-items: center; }
:root.focus-design body .comparison-offer-total { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 3px; margin-top: 0; }
:root.focus-design body .comparison-offer-total .price { font-size: 1.65rem; font-weight: 600; line-height: 1.1; }
:root.focus-design body .quote-card-actions .btn { width: auto; max-width: 100%; }
:root.focus-design body .comparison-price-details { padding: 0; margin: 10px 0 0; min-width: 0; }
:root.focus-design body .comparison-price-details > summary { display: list-item; width: fit-content; min-height: 32px; align-content: center; font-size: .78rem; }
:root.focus-design body .comparison-offer-lines { margin: 8px 0 0; padding: 0; max-width: 560px; border-top: 1px solid var(--line); }
:root.focus-design body .comparison-offer-lines > div { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .84rem; gap: 16px; }
:root.focus-design body .comparison-offer-lines > div > span { min-width: 0; overflow-wrap: anywhere; }
:root.focus-design body .comparison-offer-lines > div strong { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 701px) {
:root.focus-design body .comparison-diesel-meta :is(small,.comparison-diesel-source) { white-space: nowrap; }
}
@media (min-width: 1150px) {
:root.focus-design body[data-workspace-view="comparison"] .layout { grid-template-columns: 340px minmax(0,1fr); gap: 24px; }
}
/* Wrap the layout before the input or fuel columns have to shrink. */
@media (min-width: 1500px) {
:root.focus-design body[data-workspace-view="comparison"] .layout { grid-template-columns: 340px minmax(460px,1fr) 340px; gap: 16px; }
:root.focus-design body[data-workspace-view="comparison"] .comparison-input-stack { display: contents; }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form { grid-column: 1; grid-row: 1; }
:root.focus-design body[data-workspace-view="comparison"] .layout > .main-stack { grid-column: 2; grid-row: 1; }
:root.focus-design body[data-workspace-view="comparison"] .comparison-fuel { grid-column: 3; grid-row: 1; align-self: start; }
}
@media (min-width: 380px) {
:root.focus-design body #results .quote-card { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 0 16px; align-items: start; }
:root.focus-design body .quote-card .comparison-offer-head { display: contents; }
:root.focus-design body .comparison-offer-head > div:first-child { grid-column: 1; grid-row: 1; }
:root.focus-design body .comparison-offer-total { grid-column: 2; grid-row: 1; }
:root.focus-design body .quote-card-actions { grid-column: 2; grid-row: 4; justify-self: end; align-self: start; margin-top: 10px; }
:root.focus-design body .quote-card > .tariff-warning { grid-column: 1 / -1; grid-row: 3; }
:root.focus-design body .quote-card .comparison-price-details { grid-column: 1; grid-row: 4; }
:root.focus-design body .quote-card .comparison-price-details[open] { grid-column: 1 / -1; }
:root.focus-design body .quote-card .comparison-price-details[open] .comparison-offer-lines { max-width: none; }
:root.focus-design body .quote-card:has(.comparison-price-details[open]) .quote-card-actions { grid-row: 5; }
}
@media (max-width: 700px) {
:root.focus-design body .topbar { padding-block: 16px 12px; }
:root.focus-design body .topbar h1 { font-size: 1.35rem; }
:root.focus-design body .topbar .subtitle { font-size: .74rem; }
:root.focus-design body[data-workspace-view="comparison"] .comparison-form .panel-body { padding: 18px; }
:root.focus-design body .comparison-form .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
:root.focus-design body .form-step .field > label { font-size: .7rem; }
:root.focus-design body .workflow-templates select { font-size: 16px; }
:root.focus-design body #manageTransportTemplatesBtn { width: 44px; min-width: 44px; height: 44px; }
:root.focus-design body .comparison-form-heading { padding-bottom: 14px; }
:root.focus-design body .comparison-results-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); margin-top: 18px; }
:root.focus-design body .comparison-results-heading:has(.comparison-price-toggle[hidden]) { grid-template-columns: minmax(0,1fr); }
:root.focus-design body .comparison-results-heading .comparison-price-toggle { white-space: normal; }
:root.focus-design body .demo-preview-copy { display: block; }
:root.focus-design body .demo-preview-copy :is(p,span) { display: block; margin-top: 4px; font-size: .66rem; line-height: 1.45; }
:root.focus-design body .demo-preview-actions { flex-shrink: 0; }
:root.focus-design body :is(.demo-preview-notice,.section-demo-notice) { flex-direction: row; align-items: center; padding: 12px; }
:root.focus-design body .topbar { border-bottom: 2px solid var(--brand); }
:root.focus-design body .comparison-offer-head { display: flex; align-items: center; }
:root.focus-design body .comparison-offer-total { align-items: flex-end; text-align: right; margin-top: 0; gap: 7px; }
:root.focus-design body .comparison-offer-head > div:first-child { overflow-wrap: anywhere; }
:root.focus-design body .comparison-offer-total .price { font-size: 1.5rem; }
:root.focus-design body[data-workspace-view="comparison"] .quote-card { padding: 14px 16px; }
:root.focus-design body .comparison-carrier-heading { display: grid; justify-items: start; gap: 5px; }
:root.focus-design body .quote-card-actions { margin-top: 10px; }
:root.focus-design body .quote-card-actions .btn { min-height: 44px; }
:root.focus-design body .comparison-price-toggle { min-height: 44px; }
}
@media (max-width: 359px) {
:root.focus-design body .comparison-form .form-grid { grid-template-columns: minmax(0,1fr); }
:root.focus-design body .comparison-offer-head { gap: 8px; }
:root.focus-design body .comparison-offer-total .price { font-size: 1.4rem; }
}
@media (max-width: 379px) {
:root.focus-design body .comparison-offer-total { max-width: 60%; }
}
}

/* Settings and tariff editors share the quiet Fokus typography and surfaces. */
@media screen {
:root.focus-design body :is(.zone-card,.service-card,.fuel-admin-card) { padding: 14px; gap: 8px; background: var(--panel); border-color: var(--line); border-radius: 12px; align-content: start; }
:root.focus-design body :is(.zone-card-title,.service-card-title,.fuel-admin-card-head h4) { font-size: .96rem; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
:root.focus-design body :is(.zone-card-head,.service-card-head) > div:first-child > .muted,
:root.focus-design body .fuel-admin-card-head p { margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.4; font-weight: 400; }
:root.focus-design body :is(.zone-card-meta,.service-card-meta) { gap: 5px; }
:root.focus-design body :is(.zone-card,.service-card) .mini-badge { min-height: 22px; padding: 3px 7px; background: var(--focus-tint); color: var(--muted); font-size: .69rem; font-weight: 500; line-height: 1.3; }
:root.focus-design body :is(.zone-card-ranges,.zone-ranges-details,.table-validity) { color: var(--muted); font-size: .75rem; line-height: 1.5; }
:root.focus-design body .zone-card-ranges strong { color: var(--ink); font-weight: 500; }
:root.focus-design body .zone-ranges-details > summary { padding-block: 4px; font-weight: 500; cursor: pointer; }
:root.focus-design body .price-preview span { padding: 3px 7px; background: var(--focus-tint); border-color: var(--line); color: var(--muted); font-size: .7rem; font-weight: 400; }

/* Cards share the height of their row while their content stays compact at the top. */
:root.focus-design body :is(.zone-list,.service-list,.fuel-admin-list,.carrier-overview-list) { align-items: stretch; }
:root.focus-design body .zone-card { grid-template-columns: minmax(0,1fr); gap: 7px; }
:root.focus-design body .zone-card > :is(.zone-card-head,.zone-card-meta,.price-preview) { grid-column: 1 / -1; }
:root.focus-design body .zone-card > .table-validity { grid-column: 1; grid-row: 3; margin: 0; align-self: center; }
:root.focus-design body .zone-card > .zone-ranges-details { grid-column: 1 / -1; grid-row: 4; margin: 0; min-width: 0; }
:root.focus-design body .zone-card > .zone-ranges-details:not([open]) > summary { white-space: nowrap; }
:root.focus-design body .zone-card > .zone-ranges-details[open] { grid-column: 1 / -1; grid-row: 4; }
:root.focus-design body .zone-card > .zone-ranges-details[open] .zone-card-ranges { margin-top: 6px; }
:root.focus-design body .zone-card > .price-preview { color: var(--muted); font-size: .78rem; line-height: 1.45; }
:root.focus-design body .zone-card .zone-ranges-details > summary { padding-block: 2px; }
:root.focus-design body[data-workspace-view="settings"] .carrier-overview-list .carrier-card { min-height: 0; padding: 14px; gap: 7px; }
:root.focus-design body .carrier-card-title { margin-bottom: 0; }
:root.focus-design body .carrier-card .mini-badge { min-height: 22px; padding: 3px 7px; background: var(--focus-tint); color: var(--muted); font-size: .69rem; font-weight: 500; line-height: 1.3; }
:root.focus-design body .carrier-card-open { margin-top: 0; font-weight: 550; }
:root.focus-design body .fuel-admin-form,
:root.focus-design body .fuel-admin-form .fuel-country-controls { gap: 7px; }
:root.focus-design body .fuel-admin-form .fuel-country-control-row { padding: 6px 8px; }
:root.focus-design body .fuel-admin-tiers { gap: 7px; padding-top: 10px; }
:root.focus-design body .fuel-admin-tier-list { gap: 6px; }

/* Scope editor controls by form so carrier-inline editors receive the same design. */
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup) input[type="checkbox"] { width: 1px; height: 1px; min-height: 0; padding: 0; }
:root.focus-design body .fuel-admin-diesel-content { grid-template-columns: minmax(125px,.8fr) minmax(0,1.7fr) auto; }
@container fuel-admin-diesel (max-width: 520px) {
:root.focus-design body .fuel-admin-diesel-content { grid-template-columns: minmax(0,1fr) auto; }
}
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm) { gap: 12px 14px; }
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) :is(.field > label,.service-tier-head > label,.service-tier-basis,.switch-control,.matrix-weight-field,.matrix-weight-edit-field) { color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) :is(input:not([type=checkbox]),select,textarea) { min-height: 38px; padding: 8px var(--input-padding-right,10px) 8px 10px; color: var(--ink); font-size: .84rem; font-weight: 400; line-height: 1.35; }
/* Reserve the select arrow's space after the shared compact input padding. */
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) select:not([multiple]) { padding-right: 38px; }
:root.focus-design body :is(.combo-field,#serviceEditorForm .combo-field) input { padding-right: 42px; }
:root.focus-design body .combo-toggle { width: 32px; padding: 0; background: var(--surface); color: var(--muted); border-color: transparent; }
:root.focus-design body .combo-toggle svg { width: 16px; height: 16px; }
:root.focus-design body .combo-toggle:is(:hover,:focus-visible) { background: var(--focus-selection); color: var(--brand-dark); border-color: var(--offer-outline); }
:root.focus-design body .combo-menu { max-height: 200px; padding: 4px; background: var(--raised); color: var(--ink); border-color: var(--offer-outline); box-shadow: 0 8px 24px rgba(10,23,32,.18); }
:root.focus-design[data-theme="dark"] body .combo-menu { border-color: var(--dialog-border); box-shadow: 0 10px 28px rgba(0,0,0,.5); }
:root.focus-design body .combo-menu :is(button,span) { min-height: 32px; padding: 6px 9px; background: transparent; color: var(--ink); font-size: .82rem; font-weight: 400; line-height: 1.4; }
:root.focus-design body .combo-menu button:is(:hover,:focus-visible) { background: var(--focus-selection); color: var(--brand-dark); }
:root.focus-design body #serviceTierTable select:not([multiple]) { padding-left: 8px; padding-right: 24px; background-size: 14px; background-position: right 5px center; }
/* Existing weight rows show their fixed unit as plain text. */
:root.focus-design body .matrix-weight-edit-field .matrix-weight-unit { color: var(--ink); font-size: .84rem; font-weight: 400; }
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) .btn { min-height: 36px; padding: 7px 11px; font-size: .78rem; font-weight: 550; }
:root.focus-design body .modal:has(:is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm)) > .panel-header { padding: 16px 20px; }
:root.focus-design body .modal:has(:is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm)) #modalTitle { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
:root.focus-design body .modal:has(:is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm)) #modalSubtitle { margin-top: 3px; font-size: .78rem; font-weight: 400; color: var(--muted); }
:root.focus-design body .modal:has(:is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm)) > .panel-body { padding: 18px 20px; }
:root.focus-design body #serviceEditorForm .choice-grid { gap: 6px; }
:root.focus-design body #serviceEditorForm .choice-btn { min-height: 38px; padding: 8px 10px; border-radius: 8px; background: var(--panel); color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.35; }
:root.focus-design body #serviceEditorForm .choice-btn.active { background: var(--focus-selection); color: var(--brand-dark); border-color: var(--offer-outline); }
:root.focus-design body #serviceEditorForm .choice-btn:is(:hover,:focus-visible) { background: var(--focus-tint); color: var(--brand-dark); border-color: var(--brand); }
:root.focus-design body #serviceEditorForm .choice-btn.active:is(:hover,:focus-visible) { background: var(--focus-selection); }
:root.focus-design body #serviceEditorForm .service-switch-grid { gap: 8px; }
:root.focus-design body #serviceEditorForm .service-switch-grid .switch-control { min-height: 42px; padding: 9px 10px; background: var(--panel); color: var(--ink); white-space: normal; }
:root.focus-design body #serviceEditorForm .service-switch-grid .switch-control:has(input:checked) { background: var(--focus-tint); border-color: var(--offer-outline); }
:root.focus-design body #serviceEditorForm .service-switch-grid .switch-control:is(:hover,:focus-within) { border-color: var(--brand); }
:root.focus-design body :is(.tier-table,.zone-matrix-wrap,.fuel-table-body,.fuel-table-editor-popup,.fuel-table-editor-popup-actions,.matrix-weight-popup) { background: var(--panel); border-color: var(--line); color: var(--ink); }
:root.focus-design body .tier-row.tier-head { background: var(--focus-tint); color: var(--muted); font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
:root.focus-design body .tier-row { gap: 8px; padding: 6px 8px; }
:root.focus-design body .zone-matrix-table th { color: var(--muted); font-size: .75rem; font-weight: 500; background: var(--focus-tint); }
:root.focus-design body #zoneMatrixForm .zone-matrix-table :is(input,textarea) { min-height: 34px; padding: 6px; font-size: .8rem; }
:root.focus-design body #zoneMatrixForm .zone-matrix-table textarea[data-matrix-field="ranges"] { min-height: 52px; }
:root.focus-design body .matrix-row-label { font-weight: 500; }
:root.focus-design body .matrix-weight-popup { border-radius: 14px; padding: 18px; }
:root.focus-design body .matrix-weight-popup h3 { margin-bottom: 14px; font-size: 1rem; font-weight: 600; }

:root.focus-design body .fuel-admin-list { gap: 14px; }
:root.focus-design body .fuel-country-control-row { background: var(--panel); border-color: var(--line); }
:root.focus-design body .fuel-country-control-row strong { font-size: .8rem; font-weight: 550; }
:root.focus-design body .fuel-country-control-row :is([data-fuel-country-main],[data-fuel-country-status]) { font-weight: 400; }
:root.focus-design body .fuel-admin-form .fuel-country-control-row input { font-size: .84rem; font-weight: 400; }
:root.focus-design body .fuel-admin-form .switch-control { color: var(--muted); font-weight: 400; }
:root.focus-design body .fuel-admin-tiers-head > strong { font-size: .8rem; font-weight: 550; }
:root.focus-design body .fuel-admin-tiers-head .btn { min-height: 32px; padding: 6px 9px; font-size: .74rem; }
:root.focus-design body .fuel-admin-tier-item { padding: 9px 11px; background: var(--focus-tint); }
:root.focus-design body :is(.fuel-admin-tier-item strong,.fuel-table-summary-toggle strong) { font-size: .82rem; font-weight: 550; }
:root.focus-design body :is(.fuel-admin-tier-item small,.fuel-table-summary-toggle small) { color: var(--muted); font-size: .72rem; font-weight: 400; line-height: 1.4; }
:root.focus-design body :is(.fuel-admin-tier-item em,.fuel-table-summary-toggle em) { color: var(--muted); font-size: .72rem; font-weight: 500; }
:root.focus-design body :is(.fuel-admin-tier-item,.fuel-table-summary-toggle):is(:hover,:focus-visible) { background: var(--focus-tint); border-color: var(--brand); box-shadow: 0 3px 10px rgba(23,77,98,.06); }
:root.focus-design body .fuel-table-summary-toggle { background: var(--focus-tint); }
:root.focus-design body .fuel-table-body { gap: 10px; }
/* This editor removes the card frame; its old clipping must not cut into controls. */
:root.focus-design body #fuelAdminTableForm .fuel-table-card { border-radius: 0; overflow: visible; }
:root.focus-design body .fuel-tier-header { color: var(--muted); font-size: .72rem; font-weight: 500; }
:root.focus-design body .fuel-table-countries label:not(.disabled) { color: var(--muted); background: var(--panel); font-size: .73rem; font-weight: 500; min-height: 30px; padding: 5px 9px; }
:root.focus-design body .fuel-table-countries label:not(.disabled):has(input:checked) { color: var(--brand-dark); background: var(--focus-selection); border-color: var(--offer-outline); box-shadow: none; }
:root.focus-design body .fuel-table-countries label.disabled { font-size: .73rem; font-weight: 400; min-height: 30px; padding: 5px 9px; }
:root.focus-design body .fuel-table-editor-popup { border-radius: 14px; }
:root.focus-design body .fuel-table-editor-popup-head { padding: 15px 18px 12px; }
:root.focus-design body .fuel-table-editor-popup-head h3 { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .fuel-table-editor-popup-head p { font-size: .78rem; font-weight: 400; }
:root.focus-design body .fuel-table-editor-popup-body { padding: 16px 18px; }
:root.focus-design body .fuel-table-editor-popup-actions { padding: 12px 18px; }
:root.focus-design body :is(#fuelAdminTableForm,.fuel-table-editor-popup-body) .fuel-tier-add { width: auto; justify-self: start; }
:root.focus-design body .fuel-admin-diesel-label { font-weight: 500; }
:root.focus-design body .fuel-admin-diesel-price > strong { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .fuel-admin-diesel-meta dd { font-weight: 400; }
@media (max-width: 700px) {
:root.focus-design body :is(.combo-field,#serviceEditorForm .combo-field) input { padding-right: 48px; }
:root.focus-design body .combo-toggle { width: 38px; }
:root.focus-design body .combo-menu :is(button,span) { min-height: 44px; font-size: 16px; }
:root.focus-design body .matrix-weight-edit-field .matrix-weight-unit { font-size: 16px; }
:root.focus-design body .zone-card .zone-ranges-details > summary { min-height: 44px; align-content: center; }
:root.focus-design body :is(.zone-card,.service-card,.fuel-admin-card) { padding: 14px; }
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) :is(input:not([type=checkbox]),select,textarea) { min-height: 44px; font-size: 16px; }
/* Match the compact mobile header Save action without changing field heights. */
:root.focus-design body :is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm,.fuel-table-editor-popup,.matrix-weight-popup) .btn,
:root.focus-design body .fuel-admin-tiers-head .btn,
:root.focus-design body #manualHistorySubmitBtn { min-height: 38px; padding: 6px 11px; line-height: 1.2; }
:root.focus-design body #modalContent :is(#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#zoneMatrixForm,#serviceEditorForm) > .form-actions .btn { min-height: 38px; padding: 6px 11px; line-height: 1.2; }
:root.focus-design body #serviceEditorForm :is(.choice-btn,.service-switch-grid .switch-control),
:root.focus-design body .fuel-table-countries label:not(.disabled),
:root.focus-design body .fuel-table-countries label.disabled { min-height: 44px; }
:root.focus-design body .fuel-tier-table-compact .icon-btn { width: 44px; height: 44px; }
:root.focus-design body .fuel-tier-header { grid-template-columns: minmax(0,1fr) minmax(80px,.42fr) 44px; }
:root.focus-design body .fuel-tier-table-compact .fuel-tier-row { grid-template-columns: minmax(0,1fr) minmax(80px,.42fr) 44px; }
:root.focus-design body .modal:has(:is(#serviceEditorForm,#zoneMatrixForm,#fuelAdminTableForm,#carrierFuelTablesForm,#countryCreatorForm)) > :is(.panel-header,.panel-body) { padding: 16px; }
:root.focus-design body .tier-row { grid-template-columns: minmax(60px,.7fr) minmax(80px,1fr) minmax(80px,1fr); gap: 6px; }
}
}

/* Confirmation dialogs follow the same compact hierarchy as the editors. */
@media screen {
:root.focus-design body .workflow-confirm-dialog { width: min(100%,440px); padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 16px 50px rgba(15,30,43,.18); }
:root.focus-design body .workflow-confirm-dialog h2 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
:root.focus-design body .workflow-confirm-dialog p { margin: 0; color: var(--muted); font-size: .84rem; font-weight: 400; line-height: 1.55; overflow-wrap: anywhere; }
:root.focus-design body .workflow-confirm-dialog .form-actions { margin-top: 20px; padding-top: 0; border-top: 0; gap: 8px; justify-content: flex-end; }
:root.focus-design body .workflow-confirm-dialog .form-actions > .btn { order: 0; margin: 0; width: auto; min-height: 36px; padding: 8px 12px; border-radius: 8px; font-size: .78rem; font-weight: 550; line-height: 1.35; }
@media (max-width: 700px) {
:root.focus-design body .workflow-confirm-dialog { padding: 18px; }
:root.focus-design body .workflow-confirm-dialog .form-actions { display: grid; grid-template-columns: minmax(0,1fr); }
:root.focus-design body .workflow-confirm-dialog .form-actions > .btn { width: 100%; min-height: 44px; font-size: .82rem; }
}
}

/* System-wide action footers use whitespace rather than separator rules. */
@media screen {
:root.focus-design body :is(.form-actions,.quote-detail-actions,.history-trash-footer,.fuel-table-editor-popup-actions,.carrier-leave-actions,.matrix-weight-popup-actions) { border-top: 0; }
:root.focus-design body #fuelAdminTableForm .fuel-admin-table-scroll { padding-bottom: 0; }
:root.focus-design body #fuelAdminTableForm .fuel-admin-table-actions { padding-top: 16px; }
:root.focus-design body #carrierFuelOverview > .form-actions { padding-top: 0; margin-top: 9px; }
:root.focus-design body .fuel-table-editor-popup-body { padding-bottom: 0; }
:root.focus-design body .fuel-table-editor-popup-actions { padding-top: 16px; }
:root.focus-design body .history-detail-actions { margin-top: 16px; padding-top: 0; }
}

/* History, analytics and carrier maintenance complete the Fokus design. */
@media screen {
:root.focus-design body :is(.carrier-inline-section,.carrier-inline-relations .carrier-detail-grid > section) { padding: 14px; border-color: var(--line); border-radius: 12px; background: var(--panel); }
:root.focus-design body .carrier-inline-relations { padding: 0; border: 0; background: transparent; }
:root.focus-design body .carrier-inline-section.carrier-inline-relation-section { border: 0; }
:root.focus-design body .carrier-inline-relation-section .carrier-detail-card-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
:root.focus-design body :is(.carrier-inline-section-head,.carrier-detail-section-head) { margin-bottom: 10px; }
:root.focus-design body :is(.carrier-inline-section-head h4,.carrier-detail-section-head h4) { font-size: .94rem; font-weight: 600; }
:root.focus-design body .carrier-inline-header h3 { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body :is(.carrier-inline-header p,.carrier-inline-country-note,.carrier-inline-hint) { font-size: .78rem; font-weight: 400; line-height: 1.5; }
:root.focus-design body .carrier-back-link { margin-bottom: 12px; font-size: .78rem; font-weight: 550; }
:root.focus-design body .workflow-readiness { border-color: var(--line); background: var(--focus-tint); padding: 12px 14px; }
:root.focus-design body .workflow-readiness strong { font-size: .84rem; font-weight: 550; }
:root.focus-design body .workflow-readiness span { color: var(--muted); font-size: .76rem; font-weight: 400; line-height: 1.45; }
:root.focus-design body .carrier-country-switch-row:not(.globally-disabled) { background: var(--focus-tint); border-color: var(--line); }
:root.focus-design body .carrier-country-switch-row strong { font-size: .82rem; font-weight: 500; }
:root.focus-design body .carrier-inline-section .switch-control { font-size: .76rem; font-weight: 500; }
:root.focus-design body .carrier-inline-section #carrierInlineFuelForm .fuel-country-control-row { padding: 6px 8px; }
:root.focus-design body .carrier-inline-section input[type="date"] { height: 38px; }
:root.focus-design body .carrier-inline-fuel-section { container: fuel-card / inline-size; }
:root.focus-design body .carrier-inline-section .fuel-table-body { background: var(--panel); }
:root.focus-design body .carrier-leave-dialog { padding: 20px; border-color: var(--line); border-radius: 14px; background: var(--panel); }
:root.focus-design body .carrier-leave-dialog h3 { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .carrier-leave-dialog p { font-size: .84rem; font-weight: 400; line-height: 1.55; }

:root.focus-design body :is(#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.carrier-inline-section) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { min-height: 38px; padding: 8px var(--input-padding-right,10px) 8px 10px; font-size: .84rem; font-weight: 400; line-height: 1.35; }
:root.focus-design body :is(#carrierInlineFuelForm,.fuel-admin-form) .fuel-rate-field input[data-fuel-country-rate] { padding: 8px 24px 8px 6px; }
:root.focus-design body :is(#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.carrier-inline-section) select:not([multiple]):not([size]) { padding-right: 38px; }
:root.focus-design body :is(#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.carrier-inline-section) :is(.field > label,.invoice-field-label) { color: var(--muted); font-size: .75rem; font-weight: 500; }
:root.focus-design body .modal:has(:is(.history-detail-grid,#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.stats-chart-modal)) #modalTitle { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .modal:has(:is(.history-detail-grid,#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.stats-chart-modal)) #modalSubtitle { font-size: .78rem; font-weight: 400; color: var(--muted); }
:root.focus-design body :is(.history-detail-grid > div,.quote-detail-sum,.history-invoice-summary) { background: var(--panel); border-color: var(--line); }
:root.focus-design body .history-detail-grid span { font-size: .7rem; font-weight: 500; line-height: 1.35; text-transform: none; }
:root.focus-design body .history-detail-grid strong { font-size: .84rem; font-weight: 550; line-height: 1.35; }
:root.focus-design body .quote-detail-group { padding: 10px 14px; }
:root.focus-design body .quote-detail-group-label { font-size: .88rem; font-weight: 650; }
:root.focus-design body .quote-detail-group-amount { font-size: .98rem; font-weight: 700; }
:root.focus-design body .quote-detail-group-lines { gap: 6px; padding-left: 12px; border-left: 2px solid var(--line); }
:root.focus-design body .quote-detail-group-lines .quote-detail-row { color: var(--muted); font-size: .82rem; font-weight: 400; }
:root.focus-design body .quote-detail-group-lines .quote-detail-row strong { font-size: .82rem; font-weight: 500; color: var(--ink); }
:root.focus-design body .quote-detail-grand-total { padding: 12px 14px; background: var(--focus-tint); font-weight: 600; }
:root.focus-design body .quote-detail-grand-total :is(span,strong) { font-size: 1.06rem; font-weight: 700; color: var(--brand-dark); }
:root.focus-design body .stats-note { color: var(--muted); font-size: .78rem; font-weight: 400; line-height: 1.5; }
:root.focus-design body .history-detail-actions > .btn { font-size: .78rem; font-weight: 550; }
:root.focus-design body .history-invoice-metrics dd { font-size: .94rem; font-weight: 600; }
:root.focus-design body :is(.history-edited-badge,.history-invoice-toggle) { font-size: .72rem; font-weight: 500; }
/* Read-only invoice states retain their meaning without looking like grey controls. */
:root.focus-design body .history-table .history-invoice-toggle { min-height: 24px; padding: 4px 8px; border: 0; border-radius: 999px; font-size: .7rem; line-height: 1.3; }
:root.focus-design body .history-table .history-invoice-toggle.received { --disabled-background: var(--offer-badge-bg); --disabled-color: var(--offer-badge-ink); color: var(--offer-badge-ink); background: var(--offer-badge-bg); }
:root.focus-design body .history-table .history-invoice-toggle.open { --disabled-background: var(--offer-difference-bg); --disabled-color: var(--offer-difference-ink); color: var(--offer-difference-ink); background: var(--offer-difference-bg); }
:root.focus-design body :is(.history-cell-total,.history-cell-total strong) { font-weight: 600; }
:root.focus-design body .history-table .history-row > .history-cell-carrier { font-weight: 550; }

:root.focus-design body[data-workspace-view="stats"] #statsPanel :is(.stats-card,.stats-visual-card,.stats-overview-kpis .stats-card,.stats-overview-chart-grid .stats-visual-card) { padding: 14px; background: var(--panel); border-color: var(--line); border-radius: 12px; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-visual-card h3 { font-size: .9rem; font-weight: 600; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-visual-head p { font-size: .75rem; font-weight: 400; line-height: 1.4; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel :is(.stats-chart,.stats-bars) { border: 0; padding: 0; background: transparent; }
:root.focus-design body .stats-chart-expandable { border-radius: 8px; }
:root.focus-design body .stats-chart-expandable:hover { background: var(--focus-tint); box-shadow: 0 0 0 1px var(--offer-outline); }
:root.focus-design body .stats-chart :is(text,.axis-label,.axis-value) { fill: var(--muted); font-weight: 500; }
:root.focus-design body .stats-chart .chart-point-value { font-weight: 600; stroke: var(--panel); }
:root.focus-design body[data-workspace-view="stats"] #statsPanel :is(.stats-bar-row span,.stats-cost-row-heading span,.stats-cost-row-track small,.stats-donut span,.stats-insight span) { color: var(--muted); font-weight: 400; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel :is(.stats-bar-row strong,.stats-cost-row-heading strong,.stats-donut-legend strong,.stats-shipment-mix-legend strong,.stats-insight strong,.stats-invoice-open-total strong,.stats-donut strong) { font-weight: 600; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-invoice-open-total { font-weight: 500; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-insight { background: var(--focus-tint); }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-table th { background: var(--focus-tint); color: var(--muted); font-weight: 500; font-size: .7rem; text-transform: none; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-table :is(td,strong) { font-weight: 400; }
:root.focus-design body .stats-history-link { font-weight: 500; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel .stats-success-message { font-size: .82rem; font-weight: 500; }
@media (max-width: 1200px) {
:root.focus-design body .carrier-inline-relation-section .carrier-detail-card-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
:root.focus-design body .carrier-inline-relation-section .carrier-detail-card-list { grid-template-columns: minmax(0,1fr); }
:root.focus-design body .carrier-inline-relations .carrier-detail-section .carrier-detail-card-list { grid-template-columns: minmax(0,1fr); }
:root.focus-design body .fuel-admin-form input[data-fuel-country-rate] { min-height: 44px; font-size: 16px; }
:root.focus-design body :is(#manualHistoryForm,#historyEditForm,#invoiceEditor,#transportTemplateForm,#historyFiltersMenu,#statsFiltersMenu,.carrier-inline-section) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { min-height: 44px; font-size: 16px; }
:root.focus-design body .carrier-inline-section .btn { min-height: 38px; padding: 6px 11px; line-height: 1.2; }
:root.focus-design body[data-workspace-view="stats"] #statsPanel :is(.stats-card,.stats-visual-card,.stats-overview-kpis .stats-card,.stats-overview-chart-grid .stats-visual-card) { padding: 12px; }
:root.focus-design body .history-table .history-invoice-toggle:not(:disabled) { min-height: 44px; }
:root.focus-design body .history-table .history-row > .history-cell-total { font-weight: 600; }
:root.focus-design body :is(.history-table,.stats-table) td::before { font-weight: 500; text-transform: none; }
}
@media (max-width: 520px) {
:root.focus-design body :is(#adminFiltersMenu,#statsFiltersMenu) .workflow-filters { grid-template-columns: minmax(0,1fr); gap: 12px; }
}
}

/* Handbook: readable reference with the same hierarchy and surfaces as the app. */
@media screen {
:root.focus-design body .modal:has(.setup-guide) > .panel-header { padding: 16px 20px; }
:root.focus-design body .modal:has(.setup-guide) #modalTitle { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .modal:has(.setup-guide) #modalSubtitle { font-size: .78rem; font-weight: 400; color: var(--muted); }
:root.focus-design body .modal:has(.setup-guide) > .panel-body { padding: 14px; }
:root.focus-design body .setup-guide { display: flex; flex-direction: column; min-height: 0; }
:root.focus-design body .setup-guide-content { flex: 1 1 auto; grid-template-columns: 220px minmax(0,1fr); gap: 16px; min-height: 0; }
:root.focus-design body .setup-guide-content .setup-guide-nav { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; gap: 3px; padding: 2px; }
:root.focus-design body .setup-guide-content .setup-guide-step { min-height: 40px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); gap: 9px; }
:root.focus-design body .setup-guide-content .setup-guide-step:is(:hover,:focus-visible) { background: var(--focus-tint); border-color: var(--offer-outline); color: var(--brand-dark); }
:root.focus-design body .setup-guide-content .setup-guide-step.active { background: var(--focus-selection); border-color: var(--offer-outline); color: var(--brand-dark); }
:root.focus-design body .setup-guide-step > span { width: 24px; height: 24px; font-size: .7rem; font-weight: 500; border-radius: 6px; background: var(--focus-tint); color: var(--muted); }
:root.focus-design body .setup-guide-step.active > span { background: var(--focus-primary); color: #fff; }
:root.focus-design body .setup-guide-step em { font-size: .77rem; font-weight: 500; line-height: 1.35; }
:root.focus-design body .setup-guide-step.active em { font-weight: 600; }
:root.focus-design body .setup-guide-topic-picker { display: none; }
:root.focus-design body .setup-guide-content .setup-guide-stage { gap: 16px; padding: 14px 16px; border: 0; border-radius: 0; background: var(--panel); box-shadow: none; }
:root.focus-design body .setup-guide-stage-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
:root.focus-design body .setup-guide-stage h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; }
:root.focus-design body .setup-guide-kicker { color: var(--muted); font-size: .67rem; font-weight: 500; letter-spacing: .04em; }
:root.focus-design body .setup-guide-lead { max-width: 78ch; color: var(--muted); font-size: .84rem; font-weight: 400; line-height: 1.6; }
:root.focus-design body .setup-guide :is(strong,b) { font-weight: 600; }
:root.focus-design body .setup-guide-stage-head .btn { min-height: 36px; padding: 7px 10px; font-size: .75rem; font-weight: 550; }
:root.focus-design body .setup-guide-intro-grid article { padding: 14px; border: 0; background: var(--focus-tint); border-radius: 9px; }
:root.focus-design body .setup-guide-intro-grid strong { font-size: .84rem; }
:root.focus-design body .setup-guide-intro-grid span { color: var(--muted); font-size: .8rem; line-height: 1.5; }
:root.focus-design body .setup-guide-access-note { padding: 10px 12px; border-left: 2px solid var(--offer-outline); color: var(--muted); font-size: .78rem; line-height: 1.5; }
:root.focus-design body .setup-guide-procedure { padding: 14px; gap: 10px; border: 0; border-radius: 9px; background: var(--focus-tint); }
:root.focus-design body .setup-guide-procedure ol { grid-template-columns: minmax(0,1fr); gap: 9px; }
:root.focus-design body .setup-guide-procedure li { grid-template-columns: 24px minmax(0,1fr); gap: 10px; }
:root.focus-design body .setup-guide-procedure li > span { width: 22px; height: 22px; border-radius: 50%; background: var(--focus-selection); color: var(--brand-dark); font-weight: 500; }
:root.focus-design body .setup-guide-procedure p { padding: 0; color: var(--ink); font-size: .81rem; font-weight: 400; line-height: 1.5; }
:root.focus-design body .setup-guide :is(.setup-guide-procedure > strong,.setup-guide-cases > strong,.setup-guide-notes > strong) { font-size: .84rem; font-weight: 600; }
:root.focus-design body .setup-guide-cases article { padding: 12px; border-color: var(--line); background: var(--panel); border-radius: 9px; }
:root.focus-design body .setup-guide-cases b { font-size: .8rem; font-weight: 550; color: var(--ink); }
:root.focus-design body .setup-guide-cases span { font-size: .78rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
:root.focus-design body .setup-guide-preview { padding: 12px; border-color: var(--line); background: var(--panel); border-radius: 9px; }
:root.focus-design body .setup-guide-preview figcaption { color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
:root.focus-design body .setup-guide-matrix { background: var(--panel); border-color: var(--line); font-size: .77rem; }
:root.focus-design body .setup-guide-matrix th { color: var(--muted); background: var(--focus-tint); font-weight: 500; }
:root.focus-design body .setup-guide-matrix td { font-weight: 400; color: var(--ink); }
:root.focus-design body .setup-guide :is(.setup-guide-fields > div,.setup-guide-country-order > div,.setup-guide-fuel-head,.setup-guide-mode-row,.setup-guide-history-detail > div,.setup-guide-service-card) { background: var(--focus-tint); border-color: var(--line); }
:root.focus-design body .setup-guide :is(.setup-guide-fields strong,.setup-guide-mode-row strong,.setup-guide-service-card b,.setup-guide-calculation strong,.setup-guide-history-detail strong) { font-size: .88rem; font-weight: 550; color: var(--ink); }
:root.focus-design body .setup-guide :is(.setup-guide-country-order strong,.setup-guide-mini-list,.setup-guide-fields span,.setup-guide-service-card span,.setup-guide-calculation > div,.setup-guide-history-detail span,.setup-guide-preview-note) { font-weight: 400; color: var(--muted); }
:root.focus-design body .setup-guide :is(.setup-guide-calculation,.setup-guide-service-card) { border-color: var(--line); }
:root.focus-design body .setup-guide :is(.setup-guide-calculation > div.total,.setup-guide-history-detail .total) { background: var(--focus-selection); border-color: var(--offer-outline); }
:root.focus-design body .setup-guide-notes ul { color: var(--muted); font-size: .8rem; line-height: 1.55; gap: 7px; }
:root.focus-design body .setup-guide-warning { padding: 10px 12px; border: 1px solid var(--line); background: var(--focus-tint); color: var(--muted); font-size: .72rem; line-height: 1.45; }
:root.focus-design body .setup-guide-warning strong { color: var(--brand-dark); font-weight: 550; }
@media (max-width: 780px) {
:root.focus-design body .modal:has(.setup-guide) { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
:root.focus-design body .modal:has(.setup-guide) > :is(.panel-header,.panel-body) { padding: 14px; }
:root.focus-design body .setup-guide-topic-picker { display: grid; gap: 6px; margin-bottom: 14px; color: var(--muted); font-size: .72rem; font-weight: 500; }
:root.focus-design body .setup-guide-topic-picker select { width: 100%; min-height: 44px; padding: 9px 38px 9px 10px; font-size: 16px; font-weight: 400; }
:root.focus-design body .setup-guide-content { display: block; }
:root.focus-design body .setup-guide-content .setup-guide-nav { display: none; }
:root.focus-design body .setup-guide-content .setup-guide-main { gap: 14px; }
:root.focus-design body .setup-guide-content .setup-guide-stage { padding: 0; overflow: visible; }
:root.focus-design body .setup-guide-stage h3 { font-size: 1rem; }
:root.focus-design body .setup-guide-stage-head .btn { width: auto; min-height: 44px; }
:root.focus-design body .setup-guide :is(.setup-guide-intro-grid,.setup-guide-cases > div) { grid-template-columns: minmax(0,1fr); }
}
}

/* Account dialogs use the same hierarchy as the tariff editors. */
@media screen {
:root.focus-design body .modal:has(:is(.subscription-choice-grid,.appearance-settings)) #modalTitle { font-size: 1.05rem; font-weight: 600; }
:root.focus-design body .modal:has(:is(.subscription-choice-grid,.appearance-settings)) #modalSubtitle { font-size: .78rem; font-weight: 400; color: var(--muted); }
:root.focus-design body .subscription-choice-card { padding: 14px; gap: 10px; border-radius: 12px; background: var(--panel); border-color: var(--line); }
:root.focus-design body :is(.subscription-choice-card,.appearance-settings) h3 { font-size: .94rem; font-weight: 600; }
:root.focus-design body .subscription-choice-card p { font-size: .78rem; font-weight: 400; color: var(--muted); line-height: 1.45; }
:root.focus-design body .subscription-choice-card .btn { min-height: 44px; font-size: .82rem; font-weight: 550; }
:root.focus-design body .subscription-tax-note { font-size: .7rem; font-weight: 400; }
:root.focus-design body .subscription-business-check { font-size: .78rem; font-weight: 400; line-height: 1.5; }
:root.focus-design body .subscription-business-check > span { font-weight: 400; }
:root.focus-design body .subscription-choice-grid > .mini { margin: 0; font-size: .75rem; font-weight: 400; line-height: 1.55; color: var(--muted); }
:root.focus-design body :is(.subscription-business-check,.subscription-choice-grid > .mini) a { color: var(--brand-dark); }
:root.focus-design body :is(.subscription-business-check,.subscription-choice-grid > .mini) a:hover { color: var(--brand); }
}

/* Every dialog has an opaque surface and separates clearly from the dimmed app. */
@media screen {
:root.focus-design body :is(.modal,.mfa-dialog,.workflow-confirm-dialog,.carrier-leave-dialog,.matrix-weight-popup,.fuel-table-editor-popup) { background: var(--panel); border-color: var(--dialog-border); box-shadow: var(--dialog-shadow); }
}

/* Every date field owns its icon; Safari's native date painting cannot hide it. */
@media screen {
:root.focus-design body .field.date-field { min-width: 0; }
:root.focus-design body .date-input-control { position: relative; display: block; width: 100%; min-width: 0; max-width: 100%; }
:root.focus-design body .date-input-control > input[type="date"] { position: relative; background-image: none; }
:root.focus-design body .date-input-control > svg { position: absolute; top: 50%; right: 11px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--brand-dark); pointer-events: none; }
:root.focus-design body .date-input-control > input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; top: 50%; right: 7px; width: 26px; height: 26px; margin: 0; padding: 0; transform: translateY(-50%); opacity: 0; cursor: pointer; }
}

/* One appearance for every standalone pencil action, including nested editors. */
@media screen {
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn) { --edit-button-size: 32px; display: inline-grid; place-items: center; align-self: center; width: var(--edit-button-size); height: var(--edit-button-size); min-width: var(--edit-button-size); min-height: var(--edit-button-size); flex: 0 0 var(--edit-button-size); padding: 0; background: var(--focus-primary); border: 1px solid var(--focus-primary); border-radius: 8px; color: #fff; box-shadow: none; }
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn) svg { width: 18px; height: 18px; }
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn):is(:disabled,.is-disabled,[aria-disabled="true"]) { background: var(--surface); border-color: var(--line); color: var(--muted); filter: none; transform: none; cursor: not-allowed; }
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn):not(:disabled):not(.is-disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) { background: var(--focus-primary); border-color: var(--focus-primary); color: #fff; box-shadow: none; filter: brightness(1.1); transform: none; }
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 700px) {
:root.focus-design body :is(.icon-btn.edit,.matrix-row-edit,.team-name-edit-btn,.history-invoice-edit-btn) { --edit-button-size: 36px; }
}
}

/* Keep mobile dialogs inside the visible area above an on-screen keyboard. */
@media screen and (max-width: 700px) {
:root.focus-design body :is(.modal-backdrop,.mfa-dialog-backdrop,.workflow-confirm-overlay,.carrier-leave-backdrop,.matrix-weight-popup-backdrop) { top: var(--dialog-visible-top,0px); bottom: auto; height: var(--dialog-visible-height,100dvh); padding: 8px; }
:root.focus-design body :is(.modal,.mfa-dialog,.workflow-confirm-dialog,.carrier-leave-dialog,.matrix-weight-popup) { max-height: calc(var(--dialog-visible-height,100dvh) - 16px); overflow-y: auto; overscroll-behavior: contain; }
:root.focus-design[data-dialog-compact="true"] body #modalBackdrop .modal > .panel-header { padding: 10px 12px; }
:root.focus-design[data-dialog-compact="true"] body #modalBackdrop #modalContent .form-actions { position: static; }
}