.ws-carpet-panel { padding-inline: clamp(.5rem, 1vw, .85rem); }
#euko-risk-carpet {
  position: relative; min-width: 0; container-type: inline-size; --ws-carpet-neutral: #dedce2;
  --ws-carpet-risk-0: #7d91ed;
  --ws-carpet-risk-1: #58b680;
  --ws-carpet-risk-2: #b083ac;
  --ws-carpet-risk-3: #5065bd;
  --ws-carpet-risk-4: #e28357;
  --ws-carpet-risk-5: #69a9ad;
  --ws-carpet-risk-6: #c46172;
  --ws-carpet-risk-7: #c0a235;
  --ws-carpet-risk-8: #2e7655;
  --ws-carpet-risk-9: #7f8529;
  --ws-carpet-risk-10: #9b416f;
  --ws-carpet-risk-11: #3e496f;
}
/* Stable risk colours in the carpet, enlarged profile and both legends. */
#euko-risk-carpet [data-risk="0"] { --risk-color: var(--ws-carpet-risk-0); }
#euko-risk-carpet [data-risk="1"] { --risk-color: var(--ws-carpet-risk-1); }
#euko-risk-carpet [data-risk="2"] { --risk-color: var(--ws-carpet-risk-2); }
#euko-risk-carpet [data-risk="3"] { --risk-color: var(--ws-carpet-risk-3); --risk-ink: #fff; }
#euko-risk-carpet [data-risk="4"] { --risk-color: var(--ws-carpet-risk-4); }
#euko-risk-carpet [data-risk="5"] { --risk-color: var(--ws-carpet-risk-5); }
#euko-risk-carpet [data-risk="6"] { --risk-color: var(--ws-carpet-risk-6); }
#euko-risk-carpet [data-risk="7"] { --risk-color: var(--ws-carpet-risk-7); }
#euko-risk-carpet [data-risk="8"] { --risk-color: var(--ws-carpet-risk-8); --risk-ink: #fff; }
#euko-risk-carpet [data-risk="9"] { --risk-color: var(--ws-carpet-risk-9); }
#euko-risk-carpet [data-risk="10"] { --risk-color: var(--ws-carpet-risk-10); --risk-ink: #fff; }
#euko-risk-carpet [data-risk="11"] { --risk-color: var(--ws-carpet-risk-11); --risk-ink: #fff; }
.ws-carpet-toolbar {
  grid-column: 1 / -1; align-self: start; min-width: 0;
  position: sticky; top: var(--ws-header-height, 0px); z-index: 5;
  background: var(--ws-paper); padding: .5rem 0 .6rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--ws-border); box-shadow: 0 4px 8px #43153d08;
  max-height: min(58dvh, calc(100dvh - var(--ws-header-height, 0px) - 144px));
  overflow: auto; scroll-margin-top: var(--ws-header-height, 0px);
}
.ws-carpet-toolbar .ws-carpet-controls { margin-top: .15rem; }
.ws-carpet-toolbar .ws-carpet-inspector { margin: .65rem 0; }
.workshop .ws-carpet-toolbar .ws-carpet-grid-heading { margin: .65rem 0 .3rem; }
.workshop .ws-carpet-prompt { margin: 0; }
.ws-carpet-grid { scroll-margin-top: calc(var(--ws-header-height, 0px) + var(--ws-carpet-toolbar-height, 0px) + 12px); }
.ws-carpet-tile { scroll-margin-top: calc(var(--ws-header-height, 0px) + var(--ws-carpet-toolbar-height, 0px) + 12px); }
.ws-carpet-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.2rem; margin: .8rem 0 .3rem; }
.ws-carpet-age-control { display: grid; gap: .4rem; width: 100%; min-width: 0; color: var(--ws-plum); font-size: .8rem; font-weight: 600; }
.ws-carpet-age-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-carpet-age-buttons button { flex: 0 0 auto; min-height: 32px; padding: .2rem .7rem; border: 1px solid var(--ws-border); border-radius: 999px; background: var(--ws-paper); color: var(--ws-plum); font-size: .72rem; cursor: pointer; }
.ws-carpet-age-buttons button:hover { background: #eef7f1; border-color: var(--ws-green); }
.ws-carpet-age-buttons button:focus-visible { outline-offset: -3px; }
.ws-carpet-age-buttons button[aria-pressed="true"] { background: var(--ws-green-ink); border-color: var(--ws-green-ink); color: #fff; font-weight: 600; }
.ws-carpet-summary { display: grid; flex: 1 1 18rem; min-width: 0; gap: .2rem; font-variant-numeric: tabular-nums; }
.ws-carpet-summary > span:first-child { color: var(--ws-green-ink); font-weight: 600; }
.ws-carpet-inspector { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; align-items: start; margin: 1rem 0 .85rem; }
.ws-carpet-detail-viewport { min-width: 0; overflow: hidden; }
.ws-carpet-detail { display: flow-root; }
.ws-carpet-enlarged { display: block; width: 88px; height: 66px; margin-top: .15rem; }
.ws-carpet-enlarged text { font: 11px Figtree, Arial, sans-serif; fill: var(--ws-ink); pointer-events: none; }
.ws-carpet-enlarged text.is-positive { fill: var(--risk-ink, #111218); }
.ws-carpet-enlarged .ws-carpet-dot, .ws-carpet-enlarged text { transition: fill 1000ms ease-in-out; }
.ws-carpet-dot { fill: var(--ws-carpet-neutral); }
.ws-carpet-dot.is-positive { fill: var(--risk-color); }
.ws-carpet-profile-name { color: var(--ws-plum); font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.ws-carpet-profile-risks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .76rem; }
.ws-carpet-profile-risks li { display: inline; margin: 0; }
.ws-carpet-profile-risks b { font-weight: 600; }
.workshop .ws-carpet-grid-heading { font-size: 1rem; font-weight: 600; margin: 1.15rem 0 .55rem; }
.ws-carpet-key { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .55rem; }
.ws-carpet-key > span { display: inline-flex; align-items: center; gap: .35rem; }
.ws-carpet-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 1px; flex: 0 0 8px; background: var(--risk-color); }
.ws-carpet-swatch.is-multicolor { background: conic-gradient(var(--ws-carpet-risk-0) 0deg 60deg, var(--ws-carpet-risk-1) 60deg 120deg, var(--ws-carpet-risk-7) 120deg 180deg, var(--ws-carpet-risk-4) 180deg 240deg, var(--ws-carpet-risk-6) 240deg 300deg, var(--ws-carpet-risk-2) 300deg 360deg); }
.ws-carpet-swatch.is-neutral { background: var(--ws-carpet-neutral); }
.ws-carpet-profile-risks .ws-carpet-swatch, .ws-carpet-risk-key .ws-carpet-swatch { margin-right: .35rem; }
.ws-carpet-grid { --ws-carpet-side: 0; --ws-carpet-row-height: 44px; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 3px; }
.ws-carpet-cell { display: grid; min-width: 0; }
.ws-carpet-tile { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 35px; margin: 0; padding: 0 8px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-paper); color: var(--ws-ink); cursor: pointer; }
.ws-carpet-tile:hover { background: #f7f5fa; }
.ws-carpet-tile[aria-pressed="true"] { border-color: var(--ws-plum); box-shadow: inset 0 0 0 1px var(--ws-plum); }
.ws-carpet-pattern { display: block; width: 20px; height: 33px; flex: 0 0 20px; overflow: visible; }
.ws-carpet-pattern text { fill: var(--ws-ink); font: 11px Figtree, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.ws-carpet-cell.is-absent .ws-carpet-dot.is-positive { fill: #bcb8c3; }
.ws-carpet-cell.is-absent .ws-carpet-dot:not(.is-positive) { fill: #efedf1; }
.ws-carpet-cell.is-absent .ws-carpet-tile { border-color: #f0eef3; }
.ws-carpet-cell.is-absent .ws-carpet-tile[aria-pressed="true"] { border-color: #c9c6d0; box-shadow: inset 0 0 0 1px #c9c6d0; }
.ws-carpet-cell.is-absent .ws-carpet-pattern text { fill: #aaa6b0; }
/* Reversible silhouette trial: the rectangle styles above remain available. */
#euko-risk-carpet[data-shape="person"] .ws-carpet-grid { --ws-carpet-row-height: 61px; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px 4px; }
#euko-risk-carpet[data-shape="person"] .ws-carpet-tile { min-height: 61px; padding: 2px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
#euko-risk-carpet[data-shape="person"] .ws-carpet-pattern { width: 40px; height: 55px; flex-basis: 40px; }
.ws-carpet-person-outline { fill: #fbfafc; stroke: #d8d3df; stroke-width: 1; stroke-linejoin: round; }
.ws-carpet-person-head { fill: var(--ws-paper); }
.ws-carpet-tile:hover .ws-carpet-person-outline { fill: #f3eff6; stroke: #aaa1b5; }
.ws-carpet-tile[aria-pressed="true"] .ws-carpet-person-outline { fill: #f5edf5; stroke: var(--ws-plum); stroke-width: 1.8; }
.ws-carpet-cell.is-absent .ws-carpet-person-outline { fill: #fdfcfd; stroke: #f0eef3; }
.ws-carpet-cell.is-absent .ws-carpet-tile[aria-pressed="true"] .ws-carpet-person-outline { fill: #f7f5f8; stroke: #c9c6d0; }
/* Compact profile cards: stable profile number, people/count, then 4×3 fields. */
#euko-risk-carpet[data-shape="group"] .ws-carpet-grid { --ws-carpet-row-height: 61px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 3px; }
#euko-risk-carpet[data-shape="group"] .ws-carpet-tile { flex-direction: column; gap: 2px; min-height: 57px; padding: 3px 2px; border-radius: 6px; }
#euko-risk-carpet[data-shape="group"] .ws-carpet-pattern { width: 64px; height: 42px; flex: 0 0 42px; }
#euko-risk-carpet[data-shape="group"] .ws-carpet-pattern text { font-size: 16px; font-weight: 600; }
.ws-carpet-tile-title { color: var(--ws-muted); font-size: 9px; line-height: 1; font-weight: 500; white-space: nowrap; }
.ws-carpet-cell.is-absent .ws-carpet-tile-title { color: #aaa6b0; }
.ws-carpet-avatar-face { fill: #f3e5d9; }
.ws-carpet-avatar-1 .ws-carpet-avatar-shirt { fill: #a7b9de; }
.ws-carpet-avatar-2 .ws-carpet-avatar-shirt { fill: #c8a7c5; }
.ws-carpet-avatar-1 .ws-carpet-avatar-hair { fill: #8d7363; }
.ws-carpet-avatar-2 .ws-carpet-avatar-hair { fill: #c9b578; }
.ws-carpet-cell.is-absent .ws-carpet-avatar-shirt { fill: #e7e4eb; }
.ws-carpet-cell.is-absent .ws-carpet-avatar-face { fill: #f2eff3; }
.ws-carpet-cell.is-absent .ws-carpet-avatar-hair { fill: #d9d5de; }
.workshop .ws-carpet-context { margin: .55rem 0 .8rem; }
.ws-carpet-reference { margin-top: .8rem; }
.ws-carpet-reference summary { color: var(--ws-plum); cursor: pointer; }
.ws-carpet-risk-key { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1.5rem; padding-left: 1.5rem; margin: .75rem 0; }
.ws-carpet-risk-key li { padding-left: .2rem; margin: 0; color: #75727c; transition: color 1000ms ease-in-out; }
.ws-carpet-risk-key li.is-positive { color: color-mix(in srgb, var(--risk-color) 50%, var(--ws-ink)); }
.ws-carpet-risk-key .ws-carpet-swatch { background-color: var(--ws-carpet-neutral); transition: background-color 1000ms ease-in-out; }
.ws-carpet-risk-key li.is-positive .ws-carpet-swatch { background-color: var(--risk-color); }
.workshop .ws-carpet-reference p { margin: .6rem 0 0; }
.ws-carpet-tooltip { position: absolute; z-index: 10; pointer-events: none; width: max-content; max-width: min(310px, 100%); padding: .6rem .75rem; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-paper); color: var(--ws-ink); font-size: .76rem; box-shadow: 0 3px 12px #43153d12; }
@container (min-width: 620px) {
  .ws-carpet-grid { --ws-carpet-side: 1; grid-auto-rows: var(--ws-carpet-row-height); align-items: start; }
  .ws-carpet-toolbar { margin: 0; padding: .75rem; border: 1px solid var(--ws-border); border-radius: 9px; box-shadow: 0 3px 8px #43153d0a; max-height: min(70dvh, calc(100dvh - var(--ws-header-height, 0px) - 144px)); }
  .ws-carpet-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .ws-carpet-summary { font-size: .82rem; }
  .ws-carpet-inspector { grid-template-columns: 1fr; gap: .5rem; }
  .ws-carpet-profile-risks { display: grid; gap: .35rem; }
}
@media (pointer: coarse) {
  .ws-carpet-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .ws-carpet-tile { min-height: 44px; }
}
@media (max-width: 500px) {
  .ws-carpet-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ws-carpet-inspector { grid-template-columns: 88px minmax(0, 1fr); gap: .7rem; }
  .ws-carpet-risk-key { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-carpet-enlarged .ws-carpet-dot, .ws-carpet-enlarged text,
  .ws-carpet-risk-key li, .ws-carpet-risk-key .ws-carpet-swatch { transition: none; }
}
/* Show only the age choice until the participant selects one. */
#euko-risk-carpet[data-awaiting-age="true"] :is(.ws-carpet-cell, .ws-carpet-weight-note, .ws-carpet-summary, .ws-carpet-inspector, .ws-carpet-grid-heading, .ws-carpet-prompt, .ws-carpet-key, .ws-carpet-context, .ws-carpet-reference) { display: none; }
#euko-risk-carpet[data-awaiting-age="true"] .ws-carpet-grid { grid-auto-rows: auto; }
#euko-risk-carpet[data-awaiting-age="true"] .ws-carpet-toolbar { position: static; max-height: none; padding: .8rem; }