/* SQUARE UI: the Intalio HUB portal charter as tokens and components (CHARTE-UI-PORTAL.md).
   Rounded corners (brand book scale), flat page, neutral first; the module colour (--sq-m) marks the module, its main action and its tab.
   The active element is an ink plate. Classes are prefixed sq- so they live next to other styles (Tailwind, frappe-ui).
   Reference sheet: /portal/charte. */

@font-face{font-family:"League Spartan";src:url("/assets/square_core/fonts/hub/LeagueSpartan-Variable.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/square_core/fonts/hub/Poppins-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/square_core/fonts/hub/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/square_core/fonts/hub/Poppins-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

/* ---------------------------------------------------------------- tokens */
/* BEGIN generated:tokens (design_kit/build.py, do not edit) */
:root{
	--sq-ink:#0F1A1C;--sq-ink-2:#3D4B4E;--sq-ink-3:#6B7A7D;--sq-line:#D5DCDD;--sq-line-strong:#A9B5B7;
	--sq-surface:#FFFFFF;--sq-surface-2:#F2F4F4;--sq-select:rgba(15,26,28,.06);
	--sq-ok:#1E7B34;--sq-warn:#A35A00;--sq-danger:#B42318;--sq-info:#1F5FA8;--sq-canvas:#F6F8F8;--sq-on-solid:#FFFFFF;--sq-edge:rgba(15,26,28,.2);--sq-scrim:rgba(15,26,28,.45);--sq-danger-strong:#8F1C13;--sq-ok-soft:#E9F4EC;--sq-warn-soft:#FBF1E4;--sq-danger-soft:#FCEDEC;--sq-info-soft:#E9F0F8;
	/* Module colour: set per page or per block (:root{--sq-m:..;--sq-m-solid:..} from the module registry). Default: Intalio HUB. */
	--sq-m:#119FA8;--sq-m-solid:#0E7F86;
	--sq-display:"League Spartan","Arial Narrow",Arial,sans-serif;--sq-body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
	/* Spacing scale: nothing else is used. */
	--sq-1:4px;--sq-2:8px;--sq-3:12px;--sq-4:16px;--sq-5:24px;--sq-6:32px;
	--sq-control:36px;--sq-row:44px;--sq-toolbar:52px;
	--sq-fast:.12s;--sq-ease:cubic-bezier(.2,0,0,1);
	/* Corners (brand book): sm badges and checks, md buttons and fields, lg cards and tables, xl dialogs, full avatars and dots. */
	--sq-radius-sm:4px;--sq-radius-md:6px;--sq-radius-lg:12px;--sq-radius-xl:16px;--sq-radius-full:9999px;
	/* Shadows: what floats (menu, dialog, window) and what answers the pointer (raised). The page itself stays flat. */
	--sq-shadow:0 8px 24px rgba(15,26,28,.12);--sq-shadow-raised:0 6px 16px -6px rgba(15,26,28,.16);--sq-shadow-window:0 24px 48px -16px rgba(15,26,28,.18);
}
/* END generated:tokens */

/* ---------------------------------------------------------------- base */
.sq{font:400 14px/1.45 var(--sq-body);color:var(--sq-ink);-webkit-font-smoothing:antialiased}
.sq *,.sq *::before,.sq *::after{box-sizing:border-box}
.sq :focus-visible{outline:2px solid var(--sq-m-solid);outline-offset:2px}
.sq-picto{display:block;flex:none}
.sq-num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- type */
.sq-h1{font:700 24px/1.15 var(--sq-display);letter-spacing:-.01em;margin:0}
.sq-h2{font:700 18px/1.2 var(--sq-display);letter-spacing:-.005em;margin:0}
.sq-figure{font:700 28px/1 var(--sq-display);font-variant-numeric:tabular-nums}
.sq-label{font:500 13px/1.3 var(--sq-body);color:var(--sq-ink-2)}
.sq-meta{font:400 12px/1.4 var(--sq-body);color:var(--sq-ink-3)}
.sq-text{font:400 14px/1.55 var(--sq-body);margin:0;max-width:72ch}

/* ---------------------------------------------------------------- buttons */
.sq-btn{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sq-2);height:var(--sq-control);padding:0 var(--sq-4);
	border:1px solid var(--sq-line-strong);border-radius:var(--sq-radius-md);background:var(--sq-surface);color:var(--sq-ink);font:500 14px/1 var(--sq-body);
	white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color var(--sq-fast),border-color var(--sq-fast),box-shadow var(--sq-fast),transform var(--sq-fast)}
.sq-btn .sq-picto{width:18px;height:18px}
.sq-btn:hover{background:var(--sq-surface-2);border-color:var(--sq-ink-3)}
.sq-btn:active{transform:translateY(1px)}
.sq-btn:focus-visible{outline:2px solid var(--sq-m-solid);outline-offset:2px}
.sq-btn--primary{background:var(--sq-m-solid);border-color:var(--sq-m-solid);color:var(--sq-on-solid);font-weight:600}
.sq-btn--primary:hover{background:color-mix(in srgb,var(--sq-m-solid) 86%,var(--sq-ink));border-color:color-mix(in srgb,var(--sq-m-solid) 86%,var(--sq-ink));box-shadow:var(--sq-shadow-raised)}
.sq-btn--quiet{border-color:transparent;background:transparent}
.sq-btn--quiet:hover{border-color:transparent}
.sq-btn--danger{background:var(--sq-danger);border-color:var(--sq-danger);color:var(--sq-on-solid);font-weight:600}
.sq-btn--danger:hover{background:var(--sq-danger-strong);border-color:var(--sq-danger-strong)}
.sq-btn--icon{width:var(--sq-control);padding:0}
.sq-btn--sm{height:28px;padding:0 var(--sq-2);font-size:13px}.sq-btn--sm.sq-btn--icon{width:28px;padding:0}
.sq-btn:disabled,.sq-btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Waiting for the server: the label stays readable, a spinner replaces the pictogram, a second click does nothing. */
.sq-btn[aria-busy=true]{cursor:progress;pointer-events:none;padding-left:calc(var(--sq-4) + 18px)}
.sq-btn[aria-busy=true] .sq-picto{display:none}
.sq-btn[aria-busy=true]::before{content:"";position:absolute;left:var(--sq-3);width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--sq-radius-full);animation:sq-spin .7s linear infinite}
.sq-btn-group{display:inline-flex}.sq-btn-group .sq-btn+.sq-btn{margin-left:-1px}
.sq-btn-group .sq-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.sq-btn-group .sq-btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}
/* Split button: the main action, and its variants behind the arrow. */
.sq-split{position:relative;display:inline-flex}
.sq-split>.sq-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.sq-split>.sq-btn+.sq-btn{width:32px;padding:0;margin-left:1px;border-top-left-radius:0;border-bottom-left-radius:0}
.sq-split>.sq-menu{position:absolute;right:0;top:calc(100% + var(--sq-1));z-index:30}.sq-split>.sq-menu[hidden]{display:none}

/* ---------------------------------------------------------------- fields */
.sq-input,.sq-select,.sq-textarea{height:var(--sq-control);padding:0 var(--sq-3);border:1px solid var(--sq-line-strong);border-radius:var(--sq-radius-md);background:var(--sq-surface);
	color:var(--sq-ink);font:400 14px var(--sq-body);min-width:0;transition:border-color var(--sq-fast),box-shadow var(--sq-fast)}
.sq-textarea{height:auto;min-height:88px;padding:var(--sq-2) var(--sq-3);line-height:1.5;resize:vertical;width:100%}
.sq-input:hover,.sq-select:hover,.sq-textarea:hover{border-color:var(--sq-ink-3)}
.sq-select{padding-right:var(--sq-6);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%230F1A1C'%3E%3Cpath d='M215.39,92.94A8,8,0,0,0,208,88H48a8,8,0,0,0-5.66,13.66l80,80a8,8,0,0,0,11.32,0l80-80A8,8,0,0,0,215.39,92.94Z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 8px center;background-size:14px}
.sq-input::placeholder,.sq-textarea::placeholder{color:var(--sq-ink-3)}
.sq-input:focus,.sq-select:focus,.sq-textarea:focus{outline:0;border-color:var(--sq-m-solid);box-shadow:0 0 0 3px color-mix(in srgb,var(--sq-m-solid) 22%,transparent)}
.sq-input[aria-invalid=true],.sq-select[aria-invalid=true],.sq-textarea[aria-invalid=true]{border-color:var(--sq-danger)}
.sq-input:disabled,.sq-select:disabled,.sq-textarea:disabled{background:var(--sq-surface-2);color:var(--sq-ink-2);border-color:var(--sq-line)}
.sq-field{display:grid;gap:var(--sq-1)}
.sq-search{position:relative;display:flex;align-items:center}
.sq-search .sq-picto{position:absolute;left:var(--sq-2);width:16px;height:16px;color:var(--sq-ink-3);pointer-events:none}
.sq-search .sq-input{padding-left:var(--sq-6);width:100%}
.sq-help{font:400 12px/1.4 var(--sq-body);color:var(--sq-ink-3)}.sq-help--error{color:var(--sq-danger)}
.sq-check{appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--sq-ink-3);border-radius:var(--sq-radius-sm);background:var(--sq-surface);cursor:pointer;flex:none;display:inline-grid;place-content:center}
.sq-check:checked{background:var(--sq-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23fff'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--sq-ink)}
.sq-check:disabled{opacity:.4;cursor:not-allowed}
.sq-choice{display:flex;align-items:center;gap:var(--sq-2);min-height:var(--sq-control);cursor:pointer}
/* Switch: a checkbox drawn as an on/off control. */
.sq-switch{appearance:none;position:relative;width:32px;height:18px;margin:0;border-radius:var(--sq-radius-full);background:var(--sq-line-strong);cursor:pointer;flex:none;transition:background-color var(--sq-fast)}
.sq-switch::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--sq-radius-full);background:var(--sq-on-solid);transition:transform var(--sq-fast)}
.sq-switch:checked{background:var(--sq-m-solid)}.sq-switch:checked::after{transform:translateX(14px)}
.sq-switch:disabled{opacity:.4;cursor:not-allowed}

/* ---------------------------------------------------------------- side navigation (active = ink plate) */
.sq-nav{display:grid;gap:2px;align-content:start}
.sq-nav__item{appearance:none;display:flex;align-items:center;gap:var(--sq-2);min-height:var(--sq-control);padding:0 var(--sq-3);border:0;border-radius:var(--sq-radius-md);
	background:transparent;color:var(--sq-ink-2);font:500 14px var(--sq-body);text-align:left;text-decoration:none;cursor:pointer;width:100%;transition:background-color var(--sq-fast),color var(--sq-fast)}
.sq-nav__item .sq-picto{width:18px;height:18px;color:var(--sq-ink-3)}
.sq-nav__item:hover{background:var(--sq-surface-2);color:var(--sq-ink)}
.sq-nav__item.is-active,.sq-nav__item[aria-current]{background:var(--sq-ink);color:var(--sq-on-solid)}
.sq-nav__item.is-active .sq-picto,.sq-nav__item[aria-current] .sq-picto{color:var(--sq-on-solid)}
.sq-nav__count{margin-left:auto;font:500 12px var(--sq-body);font-variant-numeric:tabular-nums;color:inherit;opacity:.75}
.sq-nav__title{font:600 12px var(--sq-body);color:var(--sq-ink-3);padding:var(--sq-3) var(--sq-3) var(--sq-1)}
.sq-nav hr{border:0;border-top:1px solid var(--sq-line);margin:var(--sq-2) 0;width:100%}

/* ---------------------------------------------------------------- toolbar */
.sq-toolbar{display:flex;align-items:center;gap:var(--sq-2);min-height:var(--sq-toolbar);padding:var(--sq-2) var(--sq-3);background:var(--sq-surface);border-bottom:1px solid var(--sq-line);flex-wrap:wrap}
.sq-toolbar__sep{width:1px;align-self:stretch;margin:var(--sq-1) var(--sq-1);background:var(--sq-line)}
.sq-toolbar__end{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:0;gap:var(--sq-2)}

/* ---------------------------------------------------------------- tables and lists */
.sq-table{width:100%;border-collapse:collapse;font:400 14px var(--sq-body)}
/* Rounded panel around a table (brand book): border and corners on the wrapper, no double line on the last row. */
.sq-table-wrap{border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);overflow:hidden;background:var(--sq-surface)}
.sq-table-wrap>.sq-table>tbody>tr:last-child>td{border-bottom:0}
.sq-table-wrap>.sq-table>thead>tr>th:first-child,.sq-table-wrap>.sq-table>thead>tr>th:last-child{border-radius:0}
.sq-table th{height:var(--sq-control);padding:0 var(--sq-3);background:var(--sq-surface-2);border-bottom:1px solid var(--sq-line);text-align:left;font:500 13px var(--sq-body);color:var(--sq-ink-2);white-space:nowrap}
.sq-table td{height:var(--sq-row);padding:0 var(--sq-3);border-bottom:1px solid var(--sq-line);vertical-align:middle}
.sq-table tbody tr:hover{background:var(--sq-surface-2)}
.sq-table tr.is-selected{background:var(--sq-select)}
.sq-table .num{text-align:right;font-variant-numeric:tabular-nums}
.sq-table .sq-cell{display:flex;align-items:center;gap:var(--sq-2);min-width:0}
.sq-table .sq-cell .sq-picto{width:20px;height:20px;color:var(--sq-ink-3)}
.sq-table th.is-sorted{color:var(--sq-ink)}
.sq-group td{height:auto;padding:var(--sq-3) var(--sq-3) var(--sq-1);background:var(--sq-surface);font:600 13px var(--sq-body);color:var(--sq-ink);border-bottom:1px solid var(--sq-ink)}
.sq-group:hover{background:none!important}
.sq-group .sq-meta{margin-left:var(--sq-2);font-weight:400}

/* ---------------------------------------------------------------- statuses and tags */
.sq-status{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--sq-body);color:var(--sq-ink-2);white-space:nowrap}
.sq-status::before{content:"";width:8px;height:8px;background:var(--s,var(--sq-ink-3));flex:none;border-radius:var(--sq-radius-full)}
.sq-status--ok{--s:var(--sq-ok)}.sq-status--warn{--s:var(--sq-warn)}.sq-status--danger{--s:var(--sq-danger)}.sq-status--info{--s:var(--sq-info)}
.sq-tag{border-radius:var(--sq-radius-sm);display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--sq-line-strong);font:500 12px/1 var(--sq-body);color:var(--sq-ink-2);white-space:nowrap}
.sq-tag--solid{background:var(--sq-ink);border-color:var(--sq-ink);color:var(--sq-on-solid)}

/* ---------------------------------------------------------------- dialog, menu, toast */
.sq-dialog{border:1px solid var(--sq-edge);border-radius:var(--sq-radius-xl);padding:0;box-shadow:var(--sq-shadow);color:var(--sq-ink);background:var(--sq-surface);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
.sq-dialog::backdrop{background:var(--sq-scrim)}
.sq-dialog[open]{animation:sq-rise var(--sq-fast) var(--sq-ease)}
.sq-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sq-3);padding:var(--sq-4) var(--sq-5);border-bottom:1px solid var(--sq-line)}
.sq-dialog__head h2{font:700 20px/1.2 var(--sq-display);margin:0}
.sq-dialog__body{padding:var(--sq-4) var(--sq-5);display:grid;gap:var(--sq-4);overflow:auto}
.sq-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sq-2);padding:var(--sq-3) var(--sq-5);background:var(--sq-surface-2);border-top:1px solid var(--sq-line)}
.sq-menu{border-radius:var(--sq-radius-lg);overflow:hidden;min-width:200px;padding:var(--sq-1) 0;background:var(--sq-surface);border:1px solid var(--sq-edge);box-shadow:var(--sq-shadow);display:grid}
.sq-menu__item{appearance:none;display:flex;align-items:center;gap:var(--sq-2);height:var(--sq-control);padding:0 var(--sq-3);border:0;background:none;color:var(--sq-ink);font:400 14px var(--sq-body);text-align:left;text-decoration:none;cursor:pointer}
.sq-menu__item .sq-picto{width:18px;height:18px;color:var(--sq-ink-3)}
.sq-menu__item:hover,.sq-menu__item:focus-visible{background:var(--sq-surface-2);outline:0}
.sq-menu__item[hidden]{display:none}
.sq-menu__item--danger{color:var(--sq-danger)}.sq-menu__item--danger .sq-picto{color:var(--sq-danger)}
.sq-menu hr{border:0;border-top:1px solid var(--sq-line);margin:var(--sq-1) 0}
.sq-toast{border-radius:var(--sq-radius-md);display:inline-flex;align-items:center;gap:var(--sq-3);min-height:44px;padding:var(--sq-2) var(--sq-4);background:var(--sq-ink);color:var(--sq-on-solid);font:500 14px var(--sq-body);box-shadow:var(--sq-shadow);animation:sq-rise var(--sq-fast) var(--sq-ease)}
.sq-toast--ok{background:var(--sq-ok)}.sq-toast--danger{background:var(--sq-danger)}
.sq-toast .sq-picto{width:18px;height:18px}

/* ---------------------------------------------------------------- empty state */
.sq-empty{padding:var(--sq-6) var(--sq-4);color:var(--sq-ink-2);display:grid;justify-items:center;text-align:center;gap:var(--sq-1)}
.sq-empty>.sq-picto{width:40px;height:40px;color:var(--sq-ink-3);margin-bottom:var(--sq-2)}
.sq-empty b{display:block;color:var(--sq-ink);font-weight:600}
.sq-empty .sq-btn{margin-top:var(--sq-3)}

/* ---------------------------------------------------------------- avatar */
.sq-avatar{border-radius:var(--sq-radius-full);width:32px;height:32px;display:inline-grid;place-items:center;background:var(--sq-ink);color:var(--sq-on-solid);font:600 12px var(--sq-body);flex:none}

/* ---------------------------------------------------------------- module tabs (intercalaires): the only coloured line of the page sits under them */
.sq-tabs{display:flex;gap:2px;align-items:flex-end;overflow-x:auto;scrollbar-width:thin;padding-top:var(--sq-2);border-bottom:4px solid var(--sq-m)}
.sq-tab{flex:none;display:grid;place-items:center;width:40px;height:34px;color:var(--t-solid,var(--sq-ink-2));background:var(--sq-surface-2);border:1px solid var(--sq-line);border-bottom:0;border-radius:var(--sq-radius-md) var(--sq-radius-md) 0 0;transition:height .12s,width .12s}
.sq-tab .sq-picto{width:20px;height:20px}
.sq-tab:hover{background:var(--sq-surface)}
.sq-tab.is-active,.sq-tab[aria-current]{width:48px;height:42px;background:var(--t-solid,var(--sq-ink));border-color:var(--t-solid,var(--sq-ink));color:var(--sq-on-solid)}
.sq-tab.is-active .sq-picto,.sq-tab[aria-current] .sq-picto{width:24px;height:24px}

/* ---------------------------------------------------------------- ribbon (home quick actions) */
.sq-ribbon{display:flex;align-items:stretch;gap:2px;padding:var(--sq-2) 0;border-bottom:1px solid var(--sq-line);overflow-x:auto}
.sq-rbtn{appearance:none;flex:none;width:88px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sq-2) var(--sq-1);border:1px solid transparent;border-radius:var(--sq-radius-md);background:none;
	color:var(--sq-ink);font:500 12px/1.25 var(--sq-body);text-align:center;text-decoration:none;cursor:pointer}
.sq-rbtn .sq-picto{width:24px;height:24px;color:var(--a,var(--sq-m-solid))}
.sq-rbtn:hover{background:var(--sq-surface-2);border-color:var(--sq-line)}
.sq-rbtn span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sq-ribbon__sep{width:1px;margin:var(--sq-1) var(--sq-2);background:var(--sq-line);flex:none}

/* ---------------------------------------------------------------- module grid (home) */
.sq-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--sq-3)}
.sq-module{border-radius:var(--sq-radius-lg);display:grid;grid-template-rows:auto auto 1fr;gap:var(--sq-3);padding:var(--sq-4);border:1px solid var(--sq-line);background:var(--sq-surface);color:var(--sq-ink);text-decoration:none;min-width:0}
.sq-module{transition:border-color var(--sq-fast),box-shadow var(--sq-fast),transform var(--sq-fast)}
.sq-module:hover{border-color:var(--a,var(--sq-ink));box-shadow:var(--sq-shadow-raised);transform:translateY(-1px)}
.sq-module__head{display:flex;align-items:center;gap:var(--sq-3)}
.sq-module__head .sq-picto{width:32px;height:32px;color:var(--a,var(--sq-m-solid))}
.sq-module__name{font:700 18px/1.1 var(--sq-display)}
.sq-module__figures{display:flex;gap:var(--sq-5);align-self:end;padding-top:var(--sq-3);border-top:1px solid var(--sq-line)}
.sq-module__figures div{display:grid;gap:2px}

/* ---------------------------------------------------------------- card and simple list */
.sq-card{background:var(--sq-surface);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);min-width:0}
.sq-card__head{display:flex;align-items:center;gap:var(--sq-2);min-height:48px;padding:var(--sq-2) var(--sq-4);border-bottom:1px solid var(--sq-line)}
.sq-card__end{margin-left:auto;display:flex;align-items:center;gap:var(--sq-2)}
.sq-card__body{padding:var(--sq-4)}
.sq-list{display:grid;margin:0;padding:0;list-style:none}
.sq-list__item{display:flex;align-items:center;gap:var(--sq-3);min-height:var(--sq-row);padding:var(--sq-2) var(--sq-4);border-bottom:1px solid var(--sq-line);color:inherit;text-decoration:none;min-width:0;transition:background-color var(--sq-fast)}
.sq-list>:last-child>.sq-list__item,.sq-list>.sq-list__item:last-child{border-bottom:0}
a.sq-list__item:hover,a.sq-list__item:focus-visible{background:var(--sq-surface-2)}
.sq-list__item>.sq-picto{width:20px;height:20px;color:var(--a,var(--sq-ink-3))}
.sq-list__main{flex:1;min-width:0;display:grid}
.sq-list__main>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------- counter badge */
.sq-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--sq-radius-full);background:var(--sq-danger);color:var(--sq-on-solid);font:600 11px/1 var(--sq-body);font-variant-numeric:tabular-nums}
.sq-badge--neutral{background:var(--sq-surface-2);color:var(--sq-ink-2)}
.sq-badge[hidden],.sq-toast[hidden],.sq-status[hidden]{display:none}

/* ---------------------------------------------------------------- waiting: skeleton, spinner, progress */
.sq-skeleton{display:block;height:12px;border-radius:var(--sq-radius-sm);background:linear-gradient(90deg,var(--sq-surface-2) 25%,var(--sq-line) 50%,var(--sq-surface-2) 75%);background-size:200% 100%;animation:sq-shimmer 1.4s linear infinite}
.sq-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--sq-line-strong);border-right-color:var(--sq-m-solid);border-radius:var(--sq-radius-full);animation:sq-spin .7s linear infinite;flex:none}
.sq-progress{display:block;height:4px;border-radius:var(--sq-radius-full);background:var(--sq-surface-2);overflow:hidden}
.sq-progress>i{display:block;height:100%;width:var(--v,0%);background:var(--sq-m-solid);border-radius:inherit;transition:width var(--sq-fast)}
.sq-toast .sq-progress{background:var(--sq-ink-2);width:120px}.sq-toast .sq-progress>i{background:var(--sq-on-solid)}

/* ---------------------------------------------------------------- banner: a message that stays on the page */
.sq-banner{display:flex;align-items:center;gap:var(--sq-3);min-height:44px;padding:var(--sq-2) var(--sq-4);border:1px solid var(--s,var(--sq-line));border-radius:var(--sq-radius-md);background:var(--b,var(--sq-surface-2));color:var(--sq-ink);font:500 14px/1.4 var(--sq-body)}
.sq-banner>.sq-picto{width:18px;height:18px;color:var(--s,var(--sq-ink-3))}
.sq-banner[hidden]{display:none}
.sq-banner__end{margin-left:auto;display:flex;align-items:center;gap:var(--sq-2)}
.sq-banner--ok{--s:var(--sq-ok);--b:var(--sq-ok-soft)}.sq-banner--warn{--s:var(--sq-warn);--b:var(--sq-warn-soft)}.sq-banner--danger{--s:var(--sq-danger);--b:var(--sq-danger-soft)}.sq-banner--info{--s:var(--sq-info);--b:var(--sq-info-soft)}

/* ---------------------------------------------------------------- breadcrumb, keyboard key, tooltip */
.sq-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sq-1);font:400 13px var(--sq-body);color:var(--sq-ink-3)}
.sq-breadcrumb a{color:inherit;text-decoration:none}.sq-breadcrumb a:hover{color:var(--sq-ink);text-decoration:underline}
.sq-breadcrumb [aria-current]{color:var(--sq-ink);font-weight:500}
.sq-kbd{display:inline-flex;align-items:center;height:20px;padding:0 var(--sq-1);border:1px solid var(--sq-line);border-radius:var(--sq-radius-sm);background:var(--sq-surface);color:var(--sq-ink-3);font:500 11px/1 var(--sq-body);white-space:nowrap}
[data-sq-tip]{position:relative}
[data-sq-tip]::after{content:attr(data-sq-tip);position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%);z-index:80;padding:var(--sq-1) var(--sq-2);border-radius:var(--sq-radius-sm);background:var(--sq-ink);color:var(--sq-on-solid);font:500 12px/1.3 var(--sq-body);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--sq-fast) .35s}
[data-sq-tip]:hover::after,[data-sq-tip]:focus-visible::after{opacity:1}

/* ---------------------------------------------------------------- motion */
@keyframes sq-spin{to{transform:rotate(360deg)}}
@keyframes sq-shimmer{to{background-position:-200% 0}}
@keyframes sq-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){.sq-btn,.sq-tab,.sq-module,.sq-toast,.sq-dialog[open]{transition:none;animation:none}.sq-skeleton,.sq-spinner{animation-duration:3s}.sq-module:hover{transform:none}}