/* Design layer: Tabler 1.5 tokens and components tuned with UI/UX Pro Max rules (docs/design-system.md).
   Loaded after styles.css and dashboard.css, so it only re-themes: no layout, no markup contracts.
   Every colour is a light-dark() token driven by color-scheme, which Tabler sets from data-bs-theme. */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:light;
  --bme-canvas:light-dark(#f1f5f9,#0d1520);
  --bme-surface:light-dark(#ffffff,#172231);
  --bme-surface-2:light-dark(#f6f8fb,#1c2a3b);
  --bme-surface-3:light-dark(#ebf0f6,#25364a);
  --bme-line:light-dark(#dce4ee,#2b3b50);
  --bme-line-strong:light-dark(#c2cedd,#3f526b);
  --bme-ink:light-dark(#142033,#e7edf5);
  --bme-muted:light-dark(#526175,#a0b1c5);
  --bme-primary:light-dark(#1767c2,#2a74c9);
  --bme-primary-hover:light-dark(#0f56a5,#3d86dc);
  --bme-primary-text:light-dark(#1258a8,#7db7f5);
  --bme-primary-soft:light-dark(#e7f0fb,#1d3350);
  --bme-ring:light-dark(rgba(23,103,194,.28),rgba(125,183,245,.4));
  --bme-ok-fg:light-dark(#146c2e,#6fdc8c);--bme-ok-bg:light-dark(#e2f5e7,rgba(47,179,68,.16));
  --bme-warn-fg:light-dark(#8a5300,#ffcb6b);--bme-warn-bg:light-dark(#fff1cf,rgba(245,159,0,.16));
  --bme-err-fg:light-dark(#b3261e,#ff9a92);--bme-err-bg:light-dark(#fde7e5,rgba(214,57,57,.2));
  --bme-info-fg:light-dark(#0f5aa5,#8cc4ff);--bme-info-bg:light-dark(#e1eefc,rgba(23,103,194,.28));
  --bme-mute-fg:light-dark(#465468,#b4c2d4);--bme-mute-bg:light-dark(#e8ecf2,rgba(160,177,197,.14));
  --bme-radius-sm:6px;--bme-radius:8px;--bme-radius-lg:14px;
  --bme-shadow-1:0 1px 2px light-dark(rgba(16,42,67,.06),rgba(0,0,0,.35)),0 1px 1px light-dark(rgba(16,42,67,.04),rgba(0,0,0,.2));
  --bme-shadow-2:0 4px 14px light-dark(rgba(16,42,67,.09),rgba(0,0,0,.4));
  --bme-shadow-3:0 14px 36px light-dark(rgba(16,42,67,.16),rgba(0,0,0,.55));
  --bme-ease:cubic-bezier(.2,.7,.2,1);--bme-fast:.15s;

  --tblr-body-bg:var(--bme-canvas);--tblr-body-color:var(--bme-ink);--tblr-secondary:var(--bme-muted);--tblr-secondary-color:var(--bme-muted);
  --tblr-bg-surface:var(--bme-surface);--tblr-bg-surface-secondary:var(--bme-surface-2);--tblr-bg-surface-tertiary:var(--bme-surface-3);
  --tblr-border-color:var(--bme-line);--tblr-border-color-translucent:var(--bme-line);--tblr-border-radius:var(--bme-radius);--tblr-border-radius-lg:var(--bme-radius-lg);
  --tblr-shadow-card:var(--bme-shadow-1);--tblr-primary:var(--bme-primary);--tblr-link-color:var(--bme-primary-text);
}
[data-bs-theme=dark]{color-scheme:dark}

/* ---------- 2. Base ---------- */
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--bme-canvas);color:var(--bme-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{color:var(--bme-ink);line-height:1.4;text-wrap:balance}
::selection{background:var(--bme-primary-soft);color:var(--bme-ink)}
/* Tabler styles scrollbars twice (::-webkit-scrollbar and scrollbar-color); Chrome then ignores the first, which brings back the arrow buttons.
   Dropping scrollbar-color in Chromium lets Tabler's slim rounded bar (no arrows) apply; Firefox keeps the scrollbar-color one. */
@supports selector(::-webkit-scrollbar){*{scrollbar-color:auto;scrollbar-width:auto}}
a{text-underline-offset:.2em}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--bme-primary-text);outline-offset:2px}
.form-control:focus-visible,.form-select:focus-visible{outline:0}
.btn,[data-act],summary,select,label[for],.dropdown-item,.module-dock-item,.app-tile,.quick-action{cursor:pointer}
:disabled,.disabled{cursor:not-allowed}
.num,.amount,td.text-end,th.text-end,.stat-value,.kpi-value{font-variant-numeric:tabular-nums}

/* ---------- 3. Header and module dock ---------- */
.page>header.navbar{background:var(--bme-surface);border-bottom:1px solid var(--bme-line);box-shadow:none}
.header-inner{min-height:62px;gap:1.5rem}
.brand-mark{display:block;flex:none;width:auto;height:36px;max-width:none}.brand-mark-dark{display:none}[data-bs-theme=dark] .brand-mark-light{display:none}[data-bs-theme=dark] .brand-mark-dark{display:block}
.search-trigger{height:40px;min-width:340px;padding:0 .75rem;gap:.6rem;border-radius:10px;border:1px solid var(--bme-line);background:var(--bme-surface-2);color:var(--bme-muted);transition:border-color var(--bme-fast),background var(--bme-fast),box-shadow var(--bme-fast)}
.search-trigger:hover{border-color:var(--bme-line-strong);background:var(--bme-surface)}
.search-trigger:focus-visible{border-color:var(--bme-primary);box-shadow:0 0 0 3px var(--bme-ring);outline:0}
.search-trigger .icon{width:18px;height:18px}
.search-trigger kbd{padding:1px 7px;border-radius:6px;border:1px solid var(--bme-line-strong);border-bottom-width:2px;background:var(--bme-surface);color:var(--bme-muted);font-size:11px;box-shadow:none}
.header-end{gap:.5rem}
.header-end>.btn-icon{width:40px;height:40px;padding:0;border-radius:10px}
.header-context{border-radius:10px;background:var(--bme-surface-2);border-color:var(--bme-line)}
.app-launcher-button{height:40px;padding:0 .9rem;border-radius:10px}
.avatar{border-radius:50%;font-weight:600}
/* signed-in user and company chooser (session-ui.mjs) */
.user-menu-button{height:40px;padding:0 .5rem;gap:.5rem;border-radius:10px}
.user-menu-button:hover,.user-menu-button.show,.user-menu-button:focus-visible{background:var(--bme-surface-3);color:var(--bme-ink);border-color:var(--bme-line)}
.user-menu-name{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu{min-width:15rem}.user-menu .dropdown-item .icon{margin-right:.35rem}
.user-menu .dropdown-header{text-transform:none;letter-spacing:0;color:var(--bme-ink)}
.workspace-chooser{display:flex;align-items:center;gap:.4rem;margin:0}.workspace-chooser .form-select{max-width:16rem}
@media(min-width:1200px){.workspace-chooser .context-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}  /* the context pill beside it already says บริษัท */
.nav-bar{position:sticky;top:0;min-height:64px;background:color-mix(in srgb,var(--bme-surface) 90%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:0;border-bottom:1px solid var(--bme-line);box-shadow:0 1px 0 var(--bme-line),0 6px 16px -12px rgba(16,42,67,.35)}
.module-dock-item,.module-dock-all{border-radius:10px;transition:background var(--bme-fast),color var(--bme-fast)}
.module-dock-item:hover,.module-dock-item:focus-visible,.module-dock-all:hover,.module-dock-all:focus-visible{background:var(--bme-surface-3);color:var(--bme-primary-text)}
.module-dock-item.active{background:var(--bme-primary-soft);color:var(--bme-primary-text)}
.module-dock-item.active:after{background:var(--bme-primary)}
.module-dock-all{border-left-color:var(--bme-line)}

/* ---------- 4. Page heading and cards ---------- */
.page-heading{margin-bottom:20px}
.page-pretitle{font-weight:500;color:var(--bme-muted)}
.page-title{font-size:1.55rem;font-weight:650;letter-spacing:-.015em}
.card,.dashboard-surface .card{--tblr-card-bg:var(--bme-surface);--tblr-card-border-color:var(--bme-line);--tblr-card-cap-bg:var(--bme-surface-2);border-radius:var(--bme-radius-lg);box-shadow:var(--bme-shadow-1)}
.card-header{border-bottom:1px solid var(--bme-line);background:transparent}
.card-title{font-size:1rem;font-weight:650;color:var(--bme-ink)}
.card-footer{background:var(--bme-surface-2);border-top:1px solid var(--bme-line)}
.card>.table-responsive:last-child{border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg)}
.card>.toolbar:not(:last-child){border-bottom:1px solid var(--bme-line)}
.toolbar{padding:14px 16px;gap:12px}
.dashboard-stat:hover,.app-tile:hover,.app-tile:focus-visible{box-shadow:var(--bme-shadow-2)}
.footer{color:var(--bme-muted);background:var(--bme-surface);border-top:1px solid var(--bme-line)}
.section-head h3{font-weight:650}
.section-rule{border-top-color:var(--bme-line)}
.impact-banner{background:var(--bme-primary-soft);color:var(--bme-primary-text);border-radius:var(--bme-radius)}
.quick-kicker,.grand strong,.tax-result strong,.line-details summary,.menu-card a:hover,.module-sidebar .active{color:var(--bme-primary-text)}
.tax-details{border-radius:var(--bme-radius-lg);border-color:var(--bme-line)}
.paper-stage{background:var(--bme-surface-3);border-radius:var(--bme-radius)}

/* ---------- 5. Buttons ---------- */
.btn{min-height:38px;padding:.4rem .95rem;gap:.4rem;border-radius:var(--bme-radius);font-weight:500;letter-spacing:0;transition:background-color var(--bme-fast),border-color var(--bme-fast),box-shadow var(--bme-fast),color var(--bme-fast),transform .1s}
.btn-sm{min-height:32px;padding:.2rem .7rem;font-size:.8125rem}
.btn{--tblr-btn-focus-box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px var(--bme-primary-text)}
.btn .icon{width:18px;height:18px}
.btn-icon{padding-inline:0;min-width:38px;justify-content:center}
.btn-icon.btn-sm{min-width:32px}
.btn-primary{--tblr-btn-bg:var(--bme-primary);--tblr-btn-border-color:transparent;--tblr-btn-hover-bg:var(--bme-primary-hover);--tblr-btn-hover-border-color:transparent;--tblr-btn-active-bg:var(--bme-primary-hover);--tblr-btn-color:#fff;--tblr-btn-hover-color:#fff;--tblr-btn-box-shadow:0 1px 2px rgba(16,42,67,.25)}
.btn-outline-primary{--tblr-btn-color:var(--bme-primary-text);--tblr-btn-border-color:var(--bme-primary);--tblr-btn-hover-bg:var(--bme-primary-soft);--tblr-btn-hover-color:var(--bme-primary-text);--tblr-btn-hover-border-color:var(--bme-primary)}
.btn-outline-danger{--tblr-btn-color:var(--bme-err-fg);--tblr-btn-border-color:var(--bme-err-fg);--tblr-btn-hover-bg:var(--bme-err-bg);--tblr-btn-hover-color:var(--bme-err-fg);--tblr-btn-hover-border-color:var(--bme-err-fg)}
.btn-ghost-secondary{--tblr-btn-color:var(--bme-muted);--tblr-btn-hover-bg:var(--bme-surface-3);--tblr-btn-hover-color:var(--bme-ink)}
/* row actions in tables: compact, quiet until hovered */
.table .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-icon){min-height:30px;padding:.15rem .65rem;font-size:.8125rem;--tblr-btn-bg:transparent;--tblr-btn-border-color:var(--bme-line);--tblr-btn-color:var(--bme-primary-text);--tblr-btn-hover-bg:var(--bme-primary-soft);--tblr-btn-hover-border-color:var(--bme-primary);--tblr-btn-hover-color:var(--bme-primary-text);--tblr-btn-box-shadow:0 0 0 0 transparent}
.table .btn-outline-danger{--tblr-btn-color:var(--bme-err-fg);--tblr-btn-hover-bg:var(--bme-err-bg);--tblr-btn-hover-color:var(--bme-err-fg);--tblr-btn-hover-border-color:var(--bme-err-fg)}
.table .btn-sm{min-height:30px}

/* ---------- 6. Forms ---------- */
.form-label{font-size:.8125rem;font-weight:500;color:var(--bme-ink);margin-bottom:.35rem}
.form-control,.form-select{min-height:40px;border-radius:var(--bme-radius);border-color:var(--bme-line-strong);background-color:var(--bme-surface);color:var(--bme-ink);transition:border-color var(--bme-fast),box-shadow var(--bme-fast),background-color var(--bme-fast)}
.form-control::placeholder{color:light-dark(#7d8da1,#7488a0);opacity:1}
.form-control:hover:not(:focus):not(:disabled),.form-select:hover:not(:focus):not(:disabled){border-color:var(--bme-muted)}
.form-control:focus,.form-select:focus{border-color:var(--bme-primary);box-shadow:0 0 0 3px var(--bme-ring)}
.form-control:disabled,.form-select:disabled,.form-control[readonly],.form-grid input:read-only{background-color:var(--bme-surface-2);color:var(--bme-muted)}
.form-control:user-invalid,.form-select:user-invalid{border-color:var(--bme-err-fg)}
/* a form-grid split into parts: a full-width heading per part, and fields that take a whole row */
.form-grid .span-all{grid-column:1/-1}
.form-grid .form-section{grid-column:1/-1;margin-bottom:-6px;padding-top:12px;border-top:1px solid var(--bme-line);font-size:.8125rem;font-weight:600;color:var(--bme-muted)}
.form-grid .form-section:first-child{padding-top:0;border-top:0}
/* a settlement's live result under its withholding fields: the tax withheld and what actually changes hands */
.settle-summary{display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;padding:.6rem .85rem;border-radius:var(--bme-radius);background:var(--bme-surface-2);font-size:.875rem;color:var(--bme-muted)}
.settle-summary strong{color:var(--bme-ink);font-variant-numeric:tabular-nums}
.form-check-input:checked{background-color:var(--bme-primary);border-color:var(--bme-primary)}
.form-check-input:focus{box-shadow:0 0 0 3px var(--bme-ring)}
.form-check-input[type=checkbox]{border-radius:5px}          /* the 8px control radius would turn a 20px box into a circle */
.form-switch .form-check-input{border-radius:999px}
.form-switch .form-check-input:not(:checked){background-color:var(--bme-surface-3);border-color:var(--bme-line-strong)}
.form-hint{color:var(--bme-muted)}
.calendar-btn{height:38px;border-radius:0 var(--bme-radius) var(--bme-radius) 0;display:grid;place-items:center}
.calendar-btn:hover{color:var(--bme-primary-text)}
.calendar-btn .icon{width:18px;height:18px}
/* CAL-MY-1: a calendar's year chosen from its list of พ.ศ. years (calendar-year.mjs) - flatpickr's number box of the Gregorian year hidden */
.bme-thai-year .flatpickr-current-month .numInputWrapper{display:none}
/* CAL-MY-1 (line A's review): the month and the year lists on one line in flatpickr's head (75% of the calendar, 34px high - a list that
   wrapped was cut off): side by side, never wrapping, a little smaller than flatpickr's 135% */
.bme-thai-year .flatpickr-current-month{display:flex;align-items:center;justify-content:center;gap:.5ch;white-space:nowrap;font-size:120%}
.bme-thai-year .flatpickr-current-month select{flex:0 1 auto;min-width:0}
.text-red{color:var(--bme-err-fg)!important}.text-green{color:var(--bme-ok-fg)!important}
/* search field inside table toolbars */
.toolbar input[data-filter-table]{max-width:380px}
input[data-filter-table],#commandQuery{padding-left:2.5rem;background-repeat:no-repeat;background-position:.85rem center;background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")}

/* ---------- 7. Tables ---------- */
.table{--tblr-table-border-color:var(--bme-line);--tblr-table-hover-bg:var(--bme-surface-2)}
.table thead th{padding:.7rem 1rem;background:var(--bme-surface-2);color:var(--bme-muted);font-size:.78rem;font-weight:600;border-bottom:1px solid var(--bme-line-strong)}
.table td{padding:.7rem 1rem;border-color:var(--bme-line)}
.table tbody tr{transition:background-color var(--bme-fast)}
.card-table tbody tr:hover>*{background-color:var(--bme-surface-2)}
.items-table td{padding:.6rem .35rem}
.items-table thead th{padding-inline:.35rem}
.table-responsive{scrollbar-gutter:stable}
.table tbody tr:last-child td{border-bottom:0}

/* ---------- 8. Badges ---------- */
.badge{padding:.32em .7em;border-radius:999px;font-weight:500;line-height:1.3}
.badge[class*="-lt"]{border:1px solid transparent!important}
.badge.bg-green-lt{color:var(--bme-ok-fg)!important;background:var(--bme-ok-bg)!important}
.badge.bg-yellow-lt,.badge.bg-orange-lt{color:var(--bme-warn-fg)!important;background:var(--bme-warn-bg)!important}
.badge.bg-red-lt{color:var(--bme-err-fg)!important;background:var(--bme-err-bg)!important}
.badge.bg-blue-lt,.badge.bg-azure-lt,.badge.bg-cyan-lt,.badge.bg-indigo-lt,.badge.bg-purple-lt{color:var(--bme-info-fg)!important;background:var(--bme-info-bg)!important}
.badge.bg-secondary-lt{color:var(--bme-mute-fg)!important;background:var(--bme-mute-bg)!important}
.badge.bg-green-lt:before,.badge.bg-yellow-lt:before,.badge.bg-red-lt:before,.badge.bg-secondary-lt:before,.badge.bg-blue-lt:before{content:"";display:inline-block;width:6px;height:6px;margin-right:.4em;border-radius:50%;background:currentColor;vertical-align:.1em}

/* ---------- 9. Dropdowns, modals, toasts, alerts ---------- */
.dropdown-menu{padding:.35rem;border:1px solid var(--bme-line);border-radius:12px;background:var(--bme-surface);box-shadow:var(--bme-shadow-3)}
.dropdown-item{padding:.5rem .75rem;border-radius:var(--bme-radius);color:var(--bme-ink)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--bme-surface-3);color:var(--bme-ink)}
.dropdown-item.active,.dropdown-item:active{background:var(--bme-primary-soft);color:var(--bme-primary-text)}
.modal-content{border:1px solid var(--bme-line);border-radius:var(--bme-radius-lg);background:var(--bme-surface);box-shadow:var(--bme-shadow-3)}
.modal-header{padding:1rem 1.25rem;border-bottom:1px solid var(--bme-line)}
.modal-title{font-weight:650}
.modal-footer{padding:.8rem 1.25rem;gap:.5rem;background:var(--bme-surface-2);border-top:1px solid var(--bme-line);border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg)}
.modal-footer:not(:has(*)){display:none}
.modal.fade .modal-dialog{transition:transform .22s var(--bme-ease),opacity .22s}
.toast{width:auto;min-width:280px;max-width:min(440px,calc(100vw - 32px));border:1px solid var(--bme-line);border-left:4px solid var(--bme-primary);border-radius:12px;background:var(--bme-surface);box-shadow:var(--bme-shadow-3);cursor:pointer}
.toast-body{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;font-size:.875rem;font-weight:500;color:var(--bme-ink)}
.toast-body>.icon{margin-top:.15rem}
.toast-ok{border-left-color:var(--bme-ok-fg)}.toast-ok .toast-body>.icon{color:var(--bme-ok-fg)}
.toast-err{border-left-color:var(--bme-err-fg)}.toast-err .toast-body>.icon{color:var(--bme-err-fg)}
.alert{border-radius:var(--bme-radius-lg)}
.alert-warning{--tblr-alert-color:var(--bme-warn-fg);--tblr-alert-bg:var(--bme-warn-bg)}
.demo-banner{border-radius:var(--bme-radius-lg)}

/* ---------- 10. Empty and loading states ---------- */
.empty-state{padding:56px 24px}
.empty-state>.icon{box-sizing:content-box;width:30px;height:30px;padding:16px;margin-bottom:4px;border-radius:50%;background:var(--bme-primary-soft);color:var(--bme-primary-text);opacity:1}
.empty-state h3{font-weight:650}
.skeleton{background:linear-gradient(100deg,var(--bme-surface-2) 30%,var(--bme-surface-3) 50%,var(--bme-surface-2) 70%);background-size:220% 100%}

/* ---------- 10b. Selects as Tabler dropdowns (select-ui.mjs) ----------
   select-ui.mjs hides each native <select> (it stays the source of truth) and shows a Tabler dropdown: a button with a caret and a
   menu of dropdown-items, with dropdown-headers for option groups and a search box on long lists. */
.bme-dd{position:relative;display:block}
.bme-dd-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.bme-dd>.bme-dd-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:40px;padding:.4rem .75rem;text-align:left;font-weight:400;color:var(--bme-ink);background:var(--bme-surface);border-color:var(--bme-line-strong)}
.bme-dd>.bme-dd-toggle.btn-sm{min-height:32px;padding:.2rem .6rem;font-size:.8125rem}
.bme-dd>.bme-dd-toggle:hover:not(:disabled){border-color:var(--bme-muted)}
.bme-dd>.bme-dd-toggle.show,.bme-dd>.bme-dd-toggle:focus-visible{border-color:var(--bme-primary);box-shadow:0 0 0 3px var(--bme-ring)}
.bme-dd>.bme-dd-toggle:disabled{color:var(--bme-muted);background:var(--bme-surface-2);opacity:1}
.bme-dd-toggle::after{flex:none;margin-left:auto}
.bme-dd-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bme-dd-menu{width:max-content;max-width:min(92vw,520px);padding:.35rem}
.bme-dd-list{max-height:min(340px,50vh);overflow-y:auto;overscroll-behavior:contain}
.bme-dd-search{padding:.15rem .15rem .45rem}
.bme-dd-search input{padding-left:2.25rem;background-repeat:no-repeat;background-position:.75rem center;background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")}
.bme-dd-menu .dropdown-item{display:flex;align-items:center;gap:.5rem;white-space:normal;line-height:1.35}
.bme-dd-menu .dropdown-item.active{font-weight:500}
.bme-dd-menu .dropdown-item.active:after{content:"";flex:none;width:1rem;height:1rem;margin-left:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat}
.bme-dd-menu .dropdown-header{padding:.55rem .75rem .25rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--bme-muted)}
.bme-dd-menu .dropdown-header:not(:first-child){margin-top:.25rem;border-top:1px solid var(--bme-line)}
.bme-dd-empty{padding:1rem;text-align:center;font-size:.875rem;color:var(--bme-muted)}
/* sizes that were set on the select element itself now belong to its wrapper */
.bme-dd:has(>#workspaceChooser){max-width:180px}
.dashboard-surface .heading-actions .bme-dd{min-width:130px}
.toolbar>.btn{align-self:flex-end;min-height:40px;white-space:nowrap}

/* ---------- 10c. Report filter panel: fields and actions on one row, status pills and options on a band below ---------- */
#reportToolbar{align-items:flex-end;gap:12px 16px}
#reportToolbar>label{flex:1 1 180px;min-width:0}
.toolbar-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.toolbar-actions .btn{min-height:40px;white-space:nowrap}
.report-filter-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;padding:.7rem 1rem;border-top:1px solid var(--bme-line);background:var(--bme-surface-2)}
.bme-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.bme-filter-group>.form-label{color:var(--bme-muted)}
/* status pills: Tabler form-selectgroup with a tone per status; a ring while off, a check mark while on (never colour alone) */
.form-selectgroup-pills{gap:.5rem}
.bme-chip{--tone-fg:var(--bme-primary-text);--tone-bg:var(--bme-primary-soft);display:inline-flex;align-items:center;gap:.5rem;min-height:36px;padding:.3rem .95rem .3rem .65rem;border:1px solid var(--bme-line-strong);border-radius:999px;background:var(--bme-surface);color:var(--bme-muted);font-size:.875rem;font-weight:500;line-height:1.25;cursor:pointer;transition:background var(--bme-fast),border-color var(--bme-fast),color var(--bme-fast),box-shadow var(--bme-fast)}
.bme-chip-ok{--tone-fg:var(--bme-ok-fg);--tone-bg:var(--bme-ok-bg)}
.bme-chip-warn{--tone-fg:var(--bme-warn-fg);--tone-bg:var(--bme-warn-bg)}
.bme-chip-err{--tone-fg:var(--bme-err-fg);--tone-bg:var(--bme-err-bg)}
.bme-chip:before{content:"";flex:none;box-sizing:border-box;width:1rem;height:1rem;border:2px solid var(--tone-fg);border-radius:50%;opacity:.6}
.bme-chip:hover{background:var(--bme-surface-2);border-color:var(--bme-muted);color:var(--bme-ink)}
.form-selectgroup-input:focus+.bme-chip{box-shadow:none}
.form-selectgroup-input:focus:not(:checked)+.bme-chip{color:var(--bme-muted);border-color:var(--bme-line-strong)}
.form-selectgroup-input:focus-visible+.bme-chip{box-shadow:0 0 0 2px var(--bme-surface),0 0 0 4px var(--bme-primary-text)}
.form-selectgroup-input:checked+.bme-chip{color:var(--tone-fg);background:var(--tone-bg);border-color:color-mix(in srgb,var(--tone-fg) 55%,transparent)}
.form-selectgroup-input:checked+.bme-chip:before{border:0;opacity:1;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- 10d. Editable tables and row actions ---------- */
/* numbers are typed, not stepped: no spinner arrows on any number field */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* line items of a document: every cell starts on the same line as the code field, all controls are 38px, numbers align right */
.items-table{min-width:900px;table-layout:fixed;margin-bottom:0}
.items-table thead th{padding:.65rem .35rem;white-space:nowrap}
.items-table thead th:first-child,.items-table tbody td:first-child{padding-left:.75rem}
.items-table th:nth-child(1){width:auto}
.items-table th:nth-child(2){width:80px}
.items-table th:nth-child(3){width:88px}
.items-table th:nth-child(4){width:108px}
.items-table th:nth-child(5){width:74px}
.items-table th:nth-child(6){width:88px}
.items-table th:nth-child(7){width:108px}
.items-table th:nth-child(8){width:120px}
.items-table th:nth-child(9){width:48px}
.items-table tbody td{padding:.55rem .35rem;vertical-align:top;border-color:var(--bme-line)}
.items-table td>.form-control,.items-table td>.lookup-field>.form-control{height:38px;min-height:38px;padding:.3rem .55rem;font-size:.875rem}
.items-table td>.form-control+.form-control,.items-table td>.lookup-field+.form-control{margin-top:.35rem}
.items-table td>.bme-dd>.bme-dd-toggle{height:38px;min-height:38px;padding:.3rem .55rem}
.items-table td.num{padding-right:.5rem;line-height:38px;font-weight:600;white-space:nowrap}
.items-table .items-remove{padding-inline:0;text-align:center}
.items-table .items-remove .btn{width:34px;min-width:34px;height:34px;min-height:34px;margin-top:2px}
.items-table .line-details{margin-top:.4rem}

/* journal lines: the account picker already names the account, so the columns are account, debit, credit */
.ledger-table{table-layout:fixed;margin-bottom:.75rem}
.ledger-table th:nth-child(2),.ledger-table th:nth-child(3){width:180px}
.ledger-table .ledger-remove{width:52px;text-align:center}
.ledger-table td{vertical-align:middle;padding:.5rem}
.ledger-table th:first-child,.ledger-table td:first-child{padding-left:.75rem}
.ledger-table td .form-control{text-align:right}

/* the actions cell of a register: one or two visible actions and a "more" menu (row-actions.mjs) */
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:nowrap}
.actions-col{width:1%;white-space:nowrap}
.card-table tbody td:first-child{white-space:nowrap}             /* the code or document number is never split */
.record-card td:nth-child(-n+2){white-space:nowrap}               /* nor is the date of a register row */
.master-table td:nth-child(2){min-width:13rem}                    /* a long name ends in …, but the column is never narrower than 13rem */
/* a long name, account or description (a table() column with clip:true) stays on one line and ends in … with its whole
   text as the tooltip: the column is as wide as the name while the table has room and gives way first, down to 7rem
   (or the width of its longest text, --clip-w from plainTable(), when that is less), when it has not; the other cells
   keep their own rules, so a table that fitted before still fits */
td.cell-clip{min-width:min(7rem,var(--clip-w,7rem))}
.cell-clip>.cell-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden;overflow-wrap:anywhere;white-space:normal}
/* a wide register (the tax registers): smaller type and tighter cells so every row stays on one line - a long name
   column ends in … (above); a heading wraps only after " / " */
.table-compact{font-size:.8125rem}
.table-compact>:not(caption)>*>*{padding:.5rem .6rem}
.table-compact thead th{white-space:normal;word-break:keep-all;line-height:1.25;vertical-align:bottom;padding:.5rem .6rem} /* at spaces only, never inside a Thai word; the padding again because .table thead th is more specific than the rule above (first/last cells keep the card's outer padding) */
.table-compact td{white-space:nowrap}
@media(max-width:1279.98px){.table-compact>:not(caption)>*>*,.table-compact thead th{padding-inline:.5rem}} /* below 1280px a register tightens its cells so it still fits one line at 1180px (before the phone rule, which wins there) */
.row-actions .dropdown-menu{min-width:11.5rem}
.dropdown-item{display:flex;align-items:center;gap:.6rem}
.dropdown-item .icon{flex:none;width:18px;height:18px;color:var(--bme-muted)}
.dropdown-item.text-danger,.dropdown-item.text-danger .icon{color:var(--bme-err-fg)!important}
.dropdown-item.text-danger:hover,.dropdown-item.text-danger:focus{background:var(--bme-err-bg)}
.dropdown-item:disabled,.dropdown-item.disabled{opacity:.5;cursor:not-allowed}
/* a menu entry offered but not available yet: its label over the reason, which wraps inside the menu and stays readable */
.dropdown-item.dropdown-note:disabled{flex-direction:column;align-items:flex-start;gap:.15rem;max-width:20rem;white-space:normal;text-align:left;opacity:1;color:var(--bme-muted)}
.dropdown-item.dropdown-note small{font-size:.75rem;line-height:1.4}
.dropdown-divider{margin:.3rem 0;border-top-color:var(--bme-line)}

/* ---------- 10e. Lookups: a magnifier inside the field opens a search dialog (lookup-ui.mjs) ---------- */
.lookup-field{position:relative;display:block}
.lookup-field>.form-control{padding-right:2.75rem}
.lookup-field>input[list]::-webkit-calendar-picker-indicator{display:none!important}      /* the browser's own arrow would sit under the magnifier */
.lookup-btn{position:absolute;top:50%;right:.3rem;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:6px;background:transparent;color:var(--bme-muted);cursor:pointer;transition:background var(--bme-fast),color var(--bme-fast)}
.lookup-btn .icon{width:18px;height:18px}
.lookup-btn:hover{background:var(--bme-primary-soft);color:var(--bme-primary-text)}
.lookup-btn:focus-visible{outline:0;background:var(--bme-primary-soft);color:var(--bme-primary-text);box-shadow:0 0 0 3px var(--bme-ring)}
fieldset:disabled .lookup-btn,.lookup-btn:disabled{opacity:.45;pointer-events:none}
.items-table td>.lookup-field>.form-control{padding-right:2.4rem}
.items-table .lookup-btn{width:30px;height:30px;right:.25rem}
/* a select marked data-lookup: no caret, the magnifier is the end of the field and the whole field opens the search */
.bme-dd-toggle.is-lookup .bme-dd-value.is-placeholder{color:var(--bme-muted)}
.bme-lookup-icon{flex:none;width:18px;height:18px;color:var(--bme-muted)}
.bme-dd-toggle.is-lookup:hover:not(:disabled) .bme-lookup-icon,.bme-dd-toggle.is-lookup:focus-visible .bme-lookup-icon{color:var(--bme-primary-text)}
/* the search dialog */
.lookup-search{position:relative;margin-bottom:.75rem}
.lookup-search>.icon{position:absolute;top:50%;left:.85rem;transform:translateY(-50%);width:18px;height:18px;color:var(--bme-muted);pointer-events:none}
.lookup-search>.form-control{padding-left:2.6rem}
/* the count in a tab: no status dot, it follows the colour of the tab */
.tab-count{display:inline-block;margin-left:.45rem;padding:.05rem .5rem;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.75rem;font-weight:600;line-height:1.5}
.lookup-scroll{max-height:min(52vh,28rem);border:1px solid var(--bme-line);border-radius:var(--tblr-border-radius)}
#appModal.wide-modal .modal-dialog{max-width:min(1000px,calc(100vw - 1rem))}       /* below 1200px Tabler shrinks every dialog to 500px */
.lookup-table{margin:0}
.lookup-table td,.lookup-table th{white-space:nowrap}
.lookup-table td.lookup-main{white-space:normal;min-width:11rem;max-width:26rem}
.lookup-table thead th{position:sticky;top:0;z-index:1;background:var(--bme-surface-2);white-space:nowrap}
/* PP09b: the deemed sale's lines on the VAT end card - a long list scrolls in its own frame, its head kept (390 px too) */
.vat-deemed-frame{max-height:28rem;overflow:auto;border:1px solid var(--bme-line);border-radius:6px}
.vat-deemed-frame .table thead th{position:sticky;top:0;z-index:1;background:var(--bme-surface-2);white-space:nowrap}   /* .table: over design v2's transparent table head (design-v2.css loads after, same weight) */
.vat-deemed-frame input[name="deemedPrice"]{min-width:8rem}
.lookup-row{cursor:pointer}
.lookup-row td:first-child{white-space:nowrap}
/* a list where several rows are ticked (the invoices of a billing note): the whole row is the target, the box only shows the state */
.lookup-check-cell{width:2.75rem;padding-right:0!important}
.lookup-check{margin:0;vertical-align:middle;pointer-events:none}
.lookup-row.is-picked>td{background:var(--bme-primary-soft)}
.lookup-row:focus-visible{outline:2px solid var(--bme-primary);outline-offset:-2px}
.lookup-row:focus-visible>td{background:var(--bme-primary-soft)}
.lookup-foot{margin-top:.6rem;font-size:.8125rem}
.lookup-empty{padding:32px 16px}
.pull-side .form-hint{margin-bottom:.6rem}
.pull-side .table td,.pull-side .table th{white-space:nowrap}

/* ---------- 10f. Paged lists: rows per page and the page numbers under a long list (pager-ui.mjs) ---------- */
.card>.paged:last-child>.paged-body:last-child>.table-responsive{border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg)}
.pager-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;padding:.7rem 1rem;background:var(--bme-surface-2);border-top:1px solid var(--bme-line)}
.card>.paged:last-child>.pager-bar{border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg)}
.pager-count{font-size:.875rem}
.pager-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem}
.pager-size{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;white-space:nowrap}
.pager-size .bme-dd{width:auto;min-width:5.75rem}
.pager-bar .page-link{min-width:2rem;justify-content:center;font-variant-numeric:tabular-nums}
.pager-bar .page-item.active .page-link{background:var(--bme-primary);border-color:var(--bme-primary);color:#fff}
.pager-bar .page-link:disabled,.pager-bar .page-item.disabled .page-link{color:var(--bme-muted);background:var(--bme-surface-2);opacity:.75}

/* ---------- 10g. Text contrast: Tabler colours not yet on BME tokens (PA-10, owner-approved 2026-09-27) ----------
   Every text passes WCAG 2.2 AA 1.4.3 (4.5:1, large 3:1) in both themes: checked on the 115 design screens with
   docs/design/check.html (line B), 0 failures with these rules against 2,014 texts without them. Values are the existing
   tokens; the two button fills are dark enough for white text. */
.text-danger{color:var(--bme-err-fg)!important}
.text-success{color:var(--bme-ok-fg)!important}
.text-warning{color:var(--bme-warn-fg)!important}
.valid-feedback{color:var(--bme-ok-fg)}
.invalid-feedback{color:var(--bme-err-fg)}
.bg-blue-lt,.bg-azure-lt,.bg-cyan-lt{color:var(--bme-info-fg)!important;background:var(--bme-info-bg)!important}
.bg-yellow-lt{color:var(--bme-warn-fg)!important;background:var(--bme-warn-bg)!important}
.alert-info{--tblr-alert-color:var(--bme-info-fg);color:var(--bme-info-fg)}
.alert-danger{--tblr-alert-color:var(--bme-err-fg);color:var(--bme-err-fg)}
.alert-success{--tblr-alert-color:var(--bme-ok-fg);color:var(--bme-ok-fg)}
.alert-warning{--tblr-alert-color:var(--bme-warn-fg);color:var(--bme-warn-fg)}
.btn-danger{--tblr-btn-bg:light-dark(#b3261e,#c62828);--tblr-btn-border-color:light-dark(#b3261e,#c62828);--tblr-btn-hover-bg:light-dark(#8f1e18,#a82020);--tblr-btn-hover-border-color:light-dark(#8f1e18,#a82020);--tblr-btn-active-bg:light-dark(#8f1e18,#a82020);--tblr-btn-color:#fff;--tblr-btn-hover-color:#fff}
.btn-success{--tblr-btn-bg:light-dark(#146c2e,#1e7d36);--tblr-btn-border-color:light-dark(#146c2e,#1e7d36);--tblr-btn-hover-bg:light-dark(#0f5524,#18692d);--tblr-btn-hover-border-color:light-dark(#0f5524,#18692d);--tblr-btn-active-bg:light-dark(#0f5524,#18692d);--tblr-btn-color:#fff;--tblr-btn-hover-color:#fff}
.btn-ghost-danger{--tblr-btn-color:var(--bme-err-fg)}
.btn-ghost-primary{--tblr-btn-color:var(--bme-primary-text)}
.btn-outline-warning{--tblr-btn-color:var(--bme-warn-fg);--tblr-btn-border-color:var(--bme-warn-fg);--tblr-btn-hover-bg:var(--bme-warn-bg);--tblr-btn-hover-color:var(--bme-warn-fg)}
.btn-check+.btn{color:var(--bme-ink)}
.btn-check:checked+.btn{color:var(--bme-primary-text);background:var(--bme-primary-soft);border-color:var(--bme-primary)}
.nav-tabs .nav-link:not(.active),.nav-pills .nav-link:not(.active),.card-header-tabs .nav-link:not(.active),.nav-segmented .nav-link:not(.active){color:var(--bme-muted)}
.nav-tabs .nav-link.active,.nav-pills .nav-link.active,.card-header-tabs .nav-link.active,.nav-segmented .nav-link.active{color:var(--bme-primary-text)}
.nav-link .tab-count{color:var(--bme-ink)}
.form-selectgroup-input:checked+.form-selectgroup-label{color:var(--bme-primary-text)}
.step-item.active~.step-item{color:var(--bme-muted)}   /* a step not reached yet is text to read, not a disabled control */
.list-group-header{color:var(--bme-muted)}

/* ---------- 11. Small screens and touch (targets at least 44px) ---------- */
@media(max-width:1200px){.search-trigger{min-width:240px}}
@media(max-width:900px){.search-trigger{min-width:0}}
@media(max-width:767.98px){
  .btn,.form-control,.form-select,.calendar-btn{min-height:44px}.calendar-btn{height:42px}
  .btn-sm,.table .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning){min-height:40px;padding-inline:.85rem}
  .form-control,.form-select{font-size:1rem}
  .module-dock-item{min-width:72px;min-height:56px}
  .header-end>.btn-icon,.app-launcher-button,.user-menu-button{min-height:44px;height:44px}.header-end>.btn-icon{width:44px}
  .workspace-chooser .context-label{display:none}.workspace-chooser .form-select{max-width:9rem}
  .page-title{font-size:1.3rem}
  .toast-container{left:0;right:0}.toast{min-width:0;max-width:none;width:100%}
  .modal-footer .btn{flex:1}
  .toolbar input[data-filter-table]{max-width:none}
  .lookup-btn{width:2.5rem;height:2.5rem;right:.15rem}
  .pager-controls{width:100%;justify-content:space-between}.pager-bar .page-link{min-height:44px;min-width:44px}.pager-size .bme-dd{min-width:6.5rem}
  .row-actions .btn{min-height:40px!important}.row-actions .btn-icon{min-width:40px}   /* the quiet table-button rule is more specific; touch targets win */
  .ledger-table{min-width:560px}.ledger-table th:nth-child(2),.ledger-table th:nth-child(3){width:130px}
  .bme-chip{min-height:44px}.toolbar-actions{width:100%}.toolbar-actions .btn{flex:1}.report-filter-foot .form-switch{margin-left:0!important}
  .dashboard-surface .heading-actions .bme-dd{width:100%}.bme-dd>.bme-dd-toggle{min-height:44px}.bme-dd>.bme-dd-toggle.btn-sm{min-height:40px}
  .card-table td:nth-child(-n+2){white-space:nowrap}
  .table thead th,.table td{padding-inline:.75rem}
  .quick-action{min-width:150px;white-space:nowrap}
  .heading-actions{gap:8px}.heading-actions>.btn,.heading-actions>.dropdown{flex:1 1 calc(50% - 4px);justify-content:center}.heading-actions>.dropdown>.btn{width:100%;justify-content:center}
  /* POLISH-1 (line E, 2026-10-08; #master/accounts at 390: four buttons squeezed to 88px, their words over each other): the actions a
     screen puts in a .btn-list inside the heading wrap two to a row like the heading's own, never narrower than their words
     (styles.css's .heading-actions .btn{flex:1} at 600px put every one of them on one line) */
  .heading-actions>.btn-list{width:100%;gap:8px}.heading-actions>.btn-list>.btn,.heading-actions>.btn-list>.dropdown{flex:1 1 calc(50% - 4px);justify-content:center}
  .heading-actions .btn{min-width:max-content}
}
/* RPT-01: a report's totals row (the whole report's, on every page) and the checks under it */
.table tfoot .table-total>*{font-weight:600;color:var(--bme-ink);background:var(--bme-canvas);border-top:2px solid var(--bme-line-strong);border-bottom:0;box-shadow:none}
.report-checks{display:grid;gap:4px;font-size:.875rem}
.report-checks .text-green{color:var(--bme-ok-fg)!important}.report-checks .text-red{color:var(--bme-err-fg)!important}
@media(prefers-reduced-motion:reduce){.btn,.form-control,.form-select,.toast,.modal.fade .modal-dialog,.table tbody tr{transition:none!important}}
/* WP2-3b: a value the server sent masked (masked-fields.mjs) - read-only, and it says so on hover */
.form-control.is-masked{cursor:not-allowed;letter-spacing:.04em}
/* CY-01: where a document stands - the documents before and after it (a dashed node = the next step not made yet), its own steps */
.doc-cycle{display:grid;gap:8px;margin:-4px 0 14px}
.doc-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.doc-chain-node{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:220px;padding:6px 10px;border:1px solid var(--bme-line);border-radius:var(--bme-radius-sm);background:var(--bme-surface);color:var(--bme-ink);font-size:.8125rem;line-height:1.3;text-decoration:none}
a.doc-chain-node:hover{border-color:var(--bme-primary);color:var(--bme-ink)}
.doc-chain-node.is-self{border-color:var(--bme-primary);background:var(--bme-primary-soft)}
.doc-chain-node.is-todo{border-style:dashed;background:transparent;color:var(--bme-muted)}
.doc-chain-kind{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-chain-no{color:var(--bme-muted);white-space:nowrap}
.doc-chain-open{color:var(--bme-warn-fg);white-space:nowrap}.doc-chain-open.is-done{color:var(--bme-ok-fg)}
.doc-chain-sep{align-self:center;color:var(--bme-muted)}
.doc-life{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:.8125rem}
.doc-life-step{position:relative;padding-left:14px;color:var(--bme-muted)}
.doc-life-step::before{content:"";position:absolute;left:0;top:.45em;width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.doc-life-step.is-done{color:var(--bme-ok-fg)}.doc-life-step.is-done::before{background:currentColor}
.doc-life-step.is-now{color:var(--bme-primary-text);font-weight:600}
.doc-life-when{color:var(--bme-muted);font-weight:400}
.doc-life-undo{font-size:.75rem;color:var(--bme-muted)}
@media(max-width:640px){.doc-chain-node{max-width:100%}.doc-chain-sep{display:none}}
/* CY-19: the step cards of a cycle overview (29/30-…-cycle-overview) - a card filters the table; 375px: two columns */
.cycle-steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin-bottom:6px}
.cycle-step{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1 1 140px;min-width:0;padding:10px 12px;border:1px solid var(--bme-line);border-radius:var(--bme-radius-sm);background:var(--bme-surface);color:var(--bme-ink);text-align:left;font:inherit;line-height:1.3;cursor:pointer}
.cycle-step:hover{border-color:var(--bme-primary)}
.cycle-step.is-active{border-color:var(--bme-primary);background:var(--bme-primary-soft)}
.cycle-step.is-empty{color:var(--bme-muted)}
.cycle-step-label{font-size:.8125rem;font-weight:600}
.cycle-step-count{font-size:1.25rem;font-weight:700}.cycle-step-count small{font-size:.75rem;font-weight:400;color:var(--bme-muted)}
.cycle-step-amount{font-size:.8125rem;font-variant-numeric:tabular-nums}
.cycle-step-note{font-size:.75rem;color:var(--bme-warn-fg)}.cycle-step-note.is-late{color:var(--bme-err-fg)}
.cycle-step-sep{align-self:center;color:var(--bme-muted)}
.cycle-tools .form-control{flex:1 1 220px}.cycle-tools .form-select{flex:0 1 180px}
@media(max-width:640px){.cycle-step{flex:1 1 calc(50% - 6px)}.cycle-step-sep{display:none}
  /* the table keeps the document, the amount and the actions (step, partner, due and status: 1, 3, 5, 6) */
  .cycle-table :is(th,td):is(:nth-child(1),:nth-child(3),:nth-child(5),:nth-child(6)){display:none}}

/* ---------- DS-1a: the frame (spec (c), mockup docs/design/ds1-shell-mockup.html) - the tokens above, light and dark ---------- */
.shell-top{position:sticky;top:0;z-index:1030;background:var(--bme-surface);border-bottom:1px solid var(--bme-line)}
.shell-row1{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 20px;max-width:1440px;margin:0 auto}
.shell-brand{display:flex;align-items:center;gap:6px;margin:0;padding:0}
.shell-brand .brand-mark{height:30px}
.shell-erp{font-weight:700;font-size:17px;color:var(--bme-primary-text);letter-spacing:.02em}
.shell-top .search-trigger{flex:1;max-width:440px}
.shell-spacer{flex:1}
.shell-burger{display:none}
.shell-ctx{display:flex;align-items:center;gap:10px;min-height:40px;max-width:420px;padding:0 12px;border:1px solid var(--bme-line);border-radius:var(--bme-radius);background:var(--bme-surface);color:var(--bme-ink);cursor:pointer;text-align:left}
.shell-ctx:hover,.shell-ctx[aria-expanded="true"]{border-color:var(--bme-line-strong);background:var(--bme-surface-2)}
.shell-ctx-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.shell-ctx{flex:0 1 auto;min-width:0}.shell-ctx-text{overflow:hidden}.shell-row1>*{flex-shrink:0}.shell-row1>.shell-ctx,.shell-row1>.search-trigger{flex-shrink:1}
.shell-ctx-text strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-ctx-text small{color:var(--bme-muted);font-size:12px;white-space:nowrap}
.shell-ctx .icon{transform:rotate(90deg);color:var(--bme-muted);width:16px;height:16px}
.shell-ctx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bme-ok-fg)}
.shell-ctx-dot.closed{background:var(--bme-warn-fg)}
.shell-ctx-panel{position:absolute;right:20px;top:58px;z-index:1040;width:min(360px,calc(100vw - 32px));box-shadow:var(--bme-shadow-3)}
.shell-ctx-panel .workspace-chooser{display:flex;flex-direction:column;gap:4px}
.shell-ctx-panel .workspace-chooser .context-label{display:none}
.ctx-now{display:flex;align-items:center;gap:6px;font-weight:600}
.ctx-now .icon{color:var(--bme-ok-fg);width:16px;height:16px}
.shell-ctx-panel .workspace-chooser .context-label{font-size:12px;color:var(--bme-muted)}
.shell-menu{position:relative;border-top:1px solid var(--bme-line)}
.topmenu-bar{display:flex;align-items:stretch;gap:2px;min-height:44px;padding:0 12px;max-width:1440px;margin:0 auto;overflow-x:auto;scrollbar-width:none}
.topmenu-btn{display:flex;align-items:center;gap:6px;padding:0 12px;border:0;border-bottom:2px solid transparent;border-radius:var(--bme-radius) var(--bme-radius) 0 0;background:none;color:var(--bme-ink);white-space:nowrap;cursor:pointer;font:inherit}
.topmenu-btn .icon{width:18px;height:18px;color:var(--bme-muted)}
.topmenu-btn:hover{background:var(--bme-surface-2)}
.topmenu-btn:focus-visible{outline:2px solid var(--bme-ring);outline-offset:-2px}
.topmenu-btn.on{border-bottom-color:var(--bme-primary);color:var(--bme-primary-text);font-weight:600}
.topmenu-btn.on .icon{color:var(--bme-primary-text)}
.topmenu-btn.open{background:var(--bme-primary-soft)}
.mega{position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:1035;width:max-content;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain;background:var(--bme-surface);border:1px solid var(--bme-line-strong);border-radius:0 0 var(--bme-radius-lg) var(--bme-radius-lg);box-shadow:var(--bme-shadow-3);padding:16px 18px}
.mega-grid{display:grid;grid-template-columns:repeat(var(--mega-cols,3),minmax(200px,260px));gap:18px}
.shell-drawer .mega-grid{grid-template-columns:1fr;gap:6px}
.mega-col h5{margin:8px 0 6px;font-size:12px;font-weight:600;color:var(--bme-muted)}
.mega-col h5:first-child{margin-top:0}
.mega-sub{margin:8px 0 2px;font-size:11px;color:var(--bme-muted)}
.mega-item{display:flex;align-items:center}
.mega-item a{flex:1;padding:5px 8px;border-radius:var(--bme-radius-sm);color:var(--bme-ink);font-size:13px;text-decoration:none}
.mega-item a:hover,.mega-item a:focus-visible{background:var(--bme-surface-2)}
.mega-pin{border:0;background:none;color:var(--bme-line-strong);font-size:12px;padding:2px 6px;cursor:pointer;opacity:0}
.mega-item:hover .mega-pin,.mega-pin:focus-visible,.mega-pin.on{opacity:1}
.mega-pin.on{color:var(--bme-warn-fg)}
.mega-all{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:4px 8px;font-size:12px;color:var(--bme-primary-text)}
.mega-all .icon{width:14px;height:14px}
.shell-drawer{position:fixed;inset:56px auto 0 0;z-index:1045;width:min(340px,88vw);overflow:auto;background:var(--bme-surface);border-right:1px solid var(--bme-line);box-shadow:var(--bme-shadow-3);padding:8px}
.shell-drawer details{border-bottom:1px solid var(--bme-line)}
.shell-drawer summary{display:flex;align-items:center;gap:8px;padding:10px 8px;cursor:pointer;font-weight:600}
.shell-drawer .drawer-body{padding:0 4px 10px}
.shell-drawer .mega-col{margin-bottom:8px}
.notice-center{padding-top:12px}
.notice-center:not(:has(.alert,.demo-banner,[data-notice])){padding-top:0}
.notice-slot{display:flex;align-items:flex-start;gap:8px}
.notice-slot>:first-child{flex:1;margin-bottom:8px}
.notice-hide{flex:none;margin-top:4px}
.notice-more{margin-bottom:8px}
@media (max-width:899.98px){
  .shell-burger{display:inline-flex}
  .shell-menu{display:none}
  .shell-row1{gap:8px;padding:0 12px}
  .shell-top .search-trigger{flex:0 0 auto;max-width:none}
  .shell-top .search-trigger span,.shell-top .search-trigger kbd{display:none}
  .shell-ctx{max-width:46vw}
  .shell-erp{display:none}
}
@media (max-width:420px){.shell-ctx-text small{display:none}#shellTasks{display:none}}
/* ---------- DS-1b: the KPI card (spec b.5, the mockup's .kpi) - the name and ⓘ, the figure with its unit small, the comparison as an
   arrow and its change, the footer with the period, the site and the state against its rule ---------- */
.kpi-card .card-body{display:flex;flex-direction:column;gap:4px}
.kpi-t{font-size:13px;color:var(--bme-muted)}
.kpi-v{font-size:var(--bme-fs-kpi);font-weight:700;line-height:1.2;color:var(--bme-ink)}
.kpi-v small{font-size:13px;font-weight:500;color:var(--bme-muted);margin-left:4px}
.kpi-cmp{font-size:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.kpi-up{color:var(--bme-ok-fg);font-weight:600}.kpi-down{color:var(--bme-err-fg);font-weight:600}
.kpi-foot{font-size:11px;color:var(--bme-muted);margin-top:auto;border-top:1px dashed var(--bme-line);padding-top:6px}
/* ---------- DS-1a-2: one type scale (the owner: "ใหญ่กว่าปกติทั่วไป") - text from these tokens, not page by page. html stays 16px so
   every rem-based size (spacing, buttons, table heads) keeps its place; the body text and the pieces that set their own size come down.
   A phone keeps 16px in its form fields (no zoom on focus, the rule above). ---------- */
:root{--bme-fs-base:14px;--bme-fs-sm:13px;--bme-fs-xs:12px;--bme-fs-table:13.5px;--bme-fs-nav:14px;--bme-fs-title:21px;--bme-fs-card-title:15px;--bme-fs-stat:24px;--bme-fs-kpi:22px;--tblr-body-font-size:.875rem}
body{font-size:var(--bme-fs-base);line-height:1.55}
.page-title{font-size:var(--bme-fs-title)}
.card-title{font-size:var(--bme-fs-card-title)}
.table{font-size:var(--bme-fs-table)}
.topmenu-btn{font-size:var(--bme-fs-nav)}
.topmenu-btn .icon{width:17px;height:17px}
.shell-ctx-text{font-size:var(--bme-fs-base)}
.shell-erp{font-size:16px}
.stat-value{font-size:clamp(20px,1.9vw,var(--bme-fs-stat))}
.kpi-value{font-size:var(--bme-fs-kpi)}
.h2,h2{font-size:1.25rem}
@media (max-width:767.98px){.page-title{font-size:19px}.stat-value{font-size:20px}}
/* the mega-menu: a column's title stands out (ink, bold, a rule under it), a group's name inside a column is its own small muted label,
   an item is one line */
.mega-col h5{display:flex;align-items:center;gap:6px;margin:14px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--bme-line);font-size:var(--bme-fs-sm);font-weight:700;color:var(--bme-ink)}
.mega-col h5 .icon{width:16px;height:16px;color:var(--bme-primary-text)}
.mega-col h5:first-child{margin-top:0}
.mega-sub{margin:12px 0 3px 8px;font-size:var(--bme-fs-xs);font-weight:600;letter-spacing:.03em;color:var(--bme-muted)}
.mega-col h5+.mega-sub{margin-top:6px}
.mega-item a{font-size:var(--bme-fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-grid{grid-template-columns:repeat(var(--mega-cols,3),minmax(220px,max-content))}
.mega{left:var(--mega-left,0px);transform:none}
.shell-drawer .mega-item a{white-space:normal}
/* DS-1i: the mega-menu's foot (the group's own page), and that page - its columns as cards, a search over them */
.mega-foot{margin-top:10px;padding-top:8px;border-top:1px solid var(--bme-line)}
.group-search{max-width:420px;margin-bottom:16px}
.group-page{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
.group-page .card-title{margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bme-line);font-size:var(--bme-fs-sm);font-weight:700}
.group-page .mega-pin{opacity:.35}
.group-items .mega-item a{white-space:normal}
/* DS-1a-2: the one notice (ui-kit notice()) - stacked in the notice center, one line wide, two on a phone */
.ui-notice{display:flex;align-items:center;gap:8px;padding:7px 12px;margin-bottom:8px;font-size:var(--bme-fs-sm)}
.ui-notice>.icon{flex:none;width:18px;height:18px}
.ui-notice-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-notice-act{display:flex;align-items:center;gap:6px;flex:none}
.ui-notice-act .btn-close{margin-left:2px}
@media (max-width:767.98px){.ui-notice{flex-wrap:wrap}.ui-notice-text{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex-basis:calc(100% - 30px)}.ui-notice-act{margin-left:auto}}
.mega-col h5.mega-cont{color:transparent;user-select:none}
.kpi-v.num{text-align:left}   /* the figure reads from the left as in the mockup (.num is right-aligned for table columns) */
/* a card with no figure yet: a quiet line where the figure would be, not a headline */
.kpi-empty{font-size:var(--bme-fs-sm);color:var(--bme-muted);padding:8px 0 6px}
/* WP7-3d: the wait for a record fetched whole (ui-kit loadingState) - a quiet outline of the fields, light and dark from the tokens */
.ui-loading-title{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--bme-ink)}
.ui-loading-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ui-skel{display:block;height:38px;border-radius:var(--bme-radius-sm);background:linear-gradient(90deg,var(--bme-surface-2),var(--bme-surface-3),var(--bme-surface-2));background-size:200% 100%;animation:ui-skel 1.4s ease-in-out infinite}
@keyframes ui-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.ui-skel{animation:none}}
/* ---------- DS-1: a wide matrix (a month or a period a column - the 12-period comparisons, the budget grid): denser cells, figures on one
   line, the first column held while the rest scroll, a number field wide enough for its figure ---------- */
.table-matrix{font-size:var(--bme-fs-xs)}
.table-matrix th,.table-matrix td{padding:.35rem .5rem;white-space:nowrap}
.table-matrix thead th{font-size:var(--bme-fs-xs)}
.table-matrix th:first-child,.table-matrix td:first-child{position:sticky;left:0;z-index:1;background:var(--bme-surface)}
.table-matrix thead th:first-child{background:var(--bme-surface-2)}
.table-matrix input.form-control-sm{min-width:9ch;padding:.2rem .35rem;font-size:var(--bme-fs-xs)}

/* FD-1b-1: the designer's blocks (form-designer-ui.mjs) - one line per block, its moves at the end; a text block's editor under it */
.fd-block-list{list-style:none;margin:0 0 .5rem;padding:0;border-top:1px solid var(--tblr-border-color)}
.fd-block{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;padding:.375rem 0;border-bottom:1px solid var(--tblr-border-color)}
.fd-block .fd-name{flex:1 1 auto;min-width:0}
.fd-block textarea,.fd-block .fd-text-opts{flex:1 1 100%}
.fd-text-opts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.fd-text-opts .form-select{width:auto}
.fd-moves{display:inline-flex;gap:.25rem}
.fd-lock{font-size:.75rem;color:var(--tblr-secondary)}
.fd-adds{display:flex;flex-wrap:wrap;gap:.5rem}
/* FD-1b-2: an image block's choice on a line of its own; the company's images (form-images-ui.mjs) - a thumbnail on a checked background
   (a transparent stamp shows as such), its name and size, delete; adding one under the list */
.fd-block > select[name^="fd-image-"]{flex:1 1 100%}
.fd-images{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.fd-image-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--tblr-border-color)}
.fd-image{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;border-bottom:1px solid var(--tblr-border-color)}
.fd-thumb{flex:none;width:48px;height:48px;object-fit:contain;border:1px solid var(--tblr-border-color);border-radius:var(--tblr-border-radius);
  background:repeating-conic-gradient(var(--bme-surface-2) 0% 25%,var(--bme-surface) 0% 50%) 50%/12px 12px}
.fd-image-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fd-image-name small{display:block;color:var(--tblr-secondary)}
.fd-image-add{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.fd-image-add .form-select,.fd-image-add #fdImgName{flex:1 1 10rem;width:auto}
.fd-image-add input[type=file]{flex:1 1 100%}
/* FD-1c: the set a print uses, or the designer edits - its select across the panel, a new set's button beside it */
.fd-sets{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--tblr-border-color)}
.fd-sets label{flex:1 1 12rem;margin:0}
/* E-3 (style-picker-ui.mjs): the styles as cards, each a small drawing of its page - the paper stays white in dark mode too (it is
   paper); the picked card outlined in the action colour (:checked, so it follows a click with no redraw), one that cannot be picked dimmed with its reason under its name */
.fd-styles{border:0;margin:0 0 .75rem;padding:0;min-width:0}
.fd-styles legend{float:none;width:auto;margin-bottom:.25rem}
.fd-style-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.5rem}
.fd-style{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;margin:0;padding:.5rem .375rem;border:1px solid var(--bme-line);border-radius:var(--tblr-border-radius);cursor:pointer;text-align:center;min-width:0}
.fd-style:hover{border-color:var(--bme-line-strong)}
.fd-style:has(.fd-style-input:checked){border-color:var(--bme-action);box-shadow:0 0 0 1px var(--bme-action)}
.fd-style.is-off{cursor:not-allowed;opacity:.6}
.fd-style-input{position:absolute;opacity:0;pointer-events:none}
.fd-style:has(.fd-style-input:focus-visible){outline:2px solid var(--bme-action);outline-offset:2px}
.fd-style-name{font-size:.8125rem;font-weight:var(--bme-fw-semibold,600);color:var(--bme-ink);overflow-wrap:anywhere}
.fd-style-why{font-size:.75rem;color:var(--bme-muted);line-height:1.3}
.fd-style-page{display:grid;grid-template-rows:9px 8px 1fr 9px;gap:3px;width:56px;aspect-ratio:210/297;padding:5px;background:#fff;border:1px solid #d5dae1;color-scheme:light;
  --a:#0f5e5a;--t:#e9f0f0;--g:#c4c9cf}
.fd-style-page i{display:block;min-width:0}
.fd-style-page i:nth-child(1){background:linear-gradient(var(--g) 0 0) left/45% 100% no-repeat,linear-gradient(var(--a) 0 0) right/30% 60% no-repeat}
.fd-style-page i:nth-child(2){background:linear-gradient(var(--t) 0 0) left/58% 100% no-repeat,linear-gradient(var(--t) 0 0) right/38% 100% no-repeat}
.fd-style-page i:nth-child(3){background:repeating-linear-gradient(transparent 0 4px,var(--g) 4px 5px);border-top:2px solid var(--a)}
.fd-style-page i:nth-child(4){background:linear-gradient(var(--a) 0 0) right/50% 100% no-repeat}
.fd-style-page[data-style=modern]{border-top:3px solid var(--a)}
.fd-style-page[data-style=classic]{--a:#1f3f8f;--t:#e8ecf5;border-top:3px double var(--a)}
.fd-style-page[data-style=formal]{--a:#1b1f24;--t:#fff;--g:#9aa1a8}
.fd-style-page[data-style=formal] i:nth-child(2){outline:1px solid var(--g);outline-offset:-1px}
/* r2-cards (ฉ): no edge, rounded grey cards, the total a figure in the company colour rather than a band */
.fd-style-page[data-style=r2-cards]{--a:#3b4cca;--t:#eef0f4;--g:#dfe3e9}
.fd-style-page[data-style=r2-cards] i:nth-child(1){background:var(--t);border-radius:2px;background-image:linear-gradient(#1a2230 0 0);background-size:30% 3px;background-position:right 2px center;background-repeat:no-repeat}
.fd-style-page[data-style=r2-cards] i:nth-child(2){background:linear-gradient(var(--t) 0 0) left/58% 100% no-repeat,linear-gradient(var(--t) 0 0) right/38% 100% no-repeat;border-radius:2px}
.fd-style-page[data-style=r2-cards] i:nth-child(3){border-top:0}
.fd-style-page[data-style=r2-cards] i:nth-child(4){background:var(--t) linear-gradient(var(--a) 0 0) right 2px center/35% 4px no-repeat;border-radius:2px;margin-left:45%}
/* r2-minimal (ก): white, a hairline under the header, a firm rule under the table head, the total a coloured figure */
.fd-style-page[data-style=r2-minimal]{--a:#0f5e5a;--t:#fff;--g:#e3e7eb}
.fd-style-page[data-style=r2-minimal] i:nth-child(1){background:linear-gradient(#14191f 0 0) left top/40% 3px no-repeat,linear-gradient(#14191f 0 0) right top/34% 4px no-repeat;border-bottom:1px solid var(--g)}
.fd-style-page[data-style=r2-minimal] i:nth-child(2){background:linear-gradient(#56606b 0 0) left center/45% 2px no-repeat,linear-gradient(#56606b 0 0) right center/35% 2px no-repeat}
.fd-style-page[data-style=r2-minimal] i:nth-child(3){border-top:2px solid #14191f}
.fd-style-page[data-style=r2-minimal] i:nth-child(4){background:linear-gradient(var(--a) 0 0) right center/32% 4px no-repeat;border-top:1px solid #14191f;margin-left:50%}
/* r2-formal (ช): every part framed in thin black, grey label cells, a fully ruled table */
.fd-style-page[data-style=r2-formal]{--a:#2b3036;--t:#f3f4f5;--g:#2b3036;padding:4px}
.fd-style-page[data-style=r2-formal] i{outline:1px solid var(--g);outline-offset:-1px}
.fd-style-page[data-style=r2-formal] i:nth-child(1){background:linear-gradient(var(--g) 0 0) 64% 0/1px 100% no-repeat}
.fd-style-page[data-style=r2-formal] i:nth-child(2){background:linear-gradient(var(--t) 0 0) 60% 0/18% 100% no-repeat}
.fd-style-page[data-style=r2-formal] i:nth-child(3){background:linear-gradient(var(--t) 0 0) top/100% 4px no-repeat,repeating-linear-gradient(90deg,transparent 0 9px,var(--g) 9px 10px)}
.fd-style-page[data-style=r2-formal] i:nth-child(4){background:var(--t)}
/* FD-1d: the form check beside the designer - a failing rule first, in red, with its button to find it on the paper; the part found flashes */
.fd-check{margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--tblr-border-color)}
.fd-check-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fd-findings{list-style:none;margin:.25rem 0 0;padding:0;max-height:16rem;overflow:auto}
.fd-finding{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:var(--bme-fs-xs,.8125rem)}
.fd-finding .fd-mark{flex:none;width:1rem;color:var(--tblr-success)}
.fd-finding.is-bad .fd-mark{color:var(--tblr-danger)}
.fd-finding-text{flex:1 1 auto;min-width:0}
.fd-finding-text small{display:block;color:var(--tblr-secondary)}
.fd-flash{outline:3px solid var(--tblr-danger);outline-offset:2px;animation:fd-flash 1.8s ease-out}
@keyframes fd-flash{from{outline-color:var(--tblr-danger)}to{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.fd-flash{animation:none}}
/* FD-2a: the free layout's panel - the paper, the grid, the chosen boxes' buttons and fields, what is wrong with the layout */
.fd-layout{margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--tblr-border-color)}
.fd-layout-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.375rem;margin-bottom:.375rem}
.fd-mini{display:flex;flex-direction:column;gap:.125rem;margin:0;font-size:.8125rem;color:var(--tblr-secondary)}
.fd-mini .form-control,.fd-mini .form-select{width:auto;min-width:5.5rem}
.fd-box-fields .fd-name{flex:1 1 100%;font-weight:600}
.fd-layout-problems{margin:.25rem 0 .5rem;padding-left:1.1rem;color:var(--tblr-danger);font-size:.8125rem}
/* the canvas: each box outlined, the chosen ones marked with handles at their corners and edges; a locked one stays put; the grid behind */
.fd-canvas .paper.p-free{background-image:linear-gradient(to right,#0f5e5a14 1px,transparent 1px),linear-gradient(to bottom,#0f5e5a14 1px,transparent 1px);background-size:var(--grid,5mm) var(--grid,5mm)}
.fd-canvas .p-box{outline:1px dashed #64748b99;cursor:move;touch-action:none}
.fd-canvas .p-box.is-chosen{outline:2px solid var(--tblr-primary)}
.fd-canvas .p-box.is-locked{cursor:default;outline-style:dotted}
.fd-handle{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#fff;border:1.5px solid var(--tblr-primary);border-radius:2px;z-index:5}
.fd-handle--n{left:50%;top:0;cursor:ns-resize}.fd-handle--s{left:50%;top:100%;cursor:ns-resize}.fd-handle--e{left:100%;top:50%;cursor:ew-resize}.fd-handle--w{left:0;top:50%;cursor:ew-resize}
.fd-handle--ne{left:100%;top:0;cursor:nesw-resize}.fd-handle--sw{left:0;top:100%;cursor:nesw-resize}.fd-handle--nw{left:0;top:0;cursor:nwse-resize}.fd-handle--se{left:100%;top:100%;cursor:nwse-resize}
@media print{.fd-handle{display:none}}