:root {
    --insp-primary: #0077b3;
    --insp-primary-dark: #006c9f;
    --insp-accent: #00aad3;
    --insp-link: #0073ac;
    --icon-moon: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.6A8.6 8.6 0 0 1 9.4 3.5 8.6 8.6 0 1 0 20.5 14.6z'/%3E%3C/svg%3E");
    --icon-sun: 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' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.4M12 19.2v2.4M2.4 12h2.4M19.2 12h2.4M5.2 5.2l1.7 1.7M17.1 17.1l1.7 1.7M18.8 5.2l-1.7 1.7M6.9 17.1l-1.7 1.7'/%3E%3C/svg%3E");
    --icon-chevrons: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5.5 4.5 12 11 18.5M19.5 5.5 13 12l6.5 6.5'/%3E%3C/svg%3E");
    --insp-yellow: #ffed36;
    --insp-yellow-dark: #ebd713;
    --icon-logout: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 21H5.2A2.2 2.2 0 0 1 3 18.8V5.2A2.2 2.2 0 0 1 5.2 3h4.3'/%3E%3Cpath d='M16.2 16.5 20.7 12l-4.5-4.5M20.7 12H9.4'/%3E%3C/svg%3E");
    --icon-bell: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208.6a6%206%200%200%200-12%200c0%206.4-2.6%208.4-2.6%208.4h17.2s-2.6-2-2.6-8.4%27%2F%3E%3Cpath%20d%3D%27M13.7%2020.4a2%202%200%200%201-3.4%200%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-hand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%2012V5.8a1.6%201.6%200%200%201%203.2%200V11%27%2F%3E%3Cpath%20d%3D%27M11.2%2010.6V4.6a1.6%201.6%200%200%201%203.2%200v6%27%2F%3E%3Cpath%20d%3D%27M14.4%2010.8V6.8a1.6%201.6%200%200%201%203.2%200v8.4a5.6%205.6%200%200%201-5.6%205.6h-1a5%205%200%200%201-3.6-1.5L4%2015.6a1.6%201.6%200%200%201%202.3-2.3L8%2015%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2012.6%209.5%2017.6%2019.5%206.6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-ban: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%2F%3E%3Cpath%20d%3D%27M6.2%206.2l11.6%2011.6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275.5%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3.6%206.8%2012%2013l8.4-6.2%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-clipboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%204.5h6v3H9z%27%2F%3E%3Cpath%20d%3D%27M15%206h2.5A1.5%201.5%200%200%201%2019%207.5v11A1.5%201.5%200%200%201%2017.5%2020h-11A1.5%201.5%200%200%201%205%2018.5v-11A1.5%201.5%200%200%201%206.5%206H9%27%2F%3E%3Cpath%20d%3D%27M8.8%2013.4%2011%2015.6l4.2-4.2%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2021V4%27%2F%3E%3Cpath%20d%3D%27M6%204.8h11.5l-2.3%203.8%202.3%203.8H6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-target: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021s6.2-6%206.2-10.3A6.2%206.2%200%200%200%205.8%2010.7C5.8%2015%2012%2021%2012%2021z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710.6%27%20r%3D%272.4%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278.2%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M5%2020a7%207%200%200%201%2014%200%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-unlock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2711%27%20width%3D%2714%27%20height%3D%279%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8.5%2011V7.8a3.5%203.5%200%200%201%206.8-1.2%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-key: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278.2%27%20cy%3D%2714%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M10.9%2011.4%2019%203.4%27%2F%3E%3Cpath%20d%3D%27M16.2%206.2l2%202%27%2F%3E%3Cpath%20d%3D%27M14.2%208.2l2%202%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-box: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%208.2%2012%204l8.5%204.2v8L12%2020.4%203.5%2016.2z%27%2F%3E%3Cpath%20d%3D%27M3.5%208.2%2012%2012.4l8.5-4.2%27%2F%3E%3Cpath%20d%3D%27M12%2012.4V20.4%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.2%2021%2019.4H3z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4%27%2F%3E%3Cpath%20d%3D%27M12%2016.6h.01%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%2F%3E%3Cpath%20d%3D%27M12%208.2v7.6M8.2%2012h7.6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-megaphone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010.5v3a1.5%201.5%200%200%200%201.5%201.5H8l8%204.5V6L8%2010.5H5.5A1.5%201.5%200%200%200%204%2012z%27%2F%3E%3Cpath%20d%3D%27M18.6%209.4a4%204%200%200%201%200%205.2%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-plug: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%203.4v5M15%203.4v5%27%2F%3E%3Cpath%20d%3D%27M6.5%208.4h11v3.2a5.5%205.5%200%200%201-11%200z%27%2F%3E%3Cpath%20d%3D%27M12%2017.1V21%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-file: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203.5H7.5A1.5%201.5%200%200%200%206%205v14a1.5%201.5%200%200%200%201.5%201.5h9A1.5%201.5%200%200%200%2018%2019V7.5z%27%2F%3E%3Cpath%20d%3D%27M14%203.5v4h4%27%2F%3E%3Cpath%20d%3D%27M12%2010.6v6M9%2013.6h6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-rule: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%2016.5V11a6%206%200%200%201%2012%200v5.5l1.5%201.8h-15z%27%2F%3E%3Cpath%20d%3D%27M10%2020.6a2.2%202.2%200%200%200%204%200%27%2F%3E%3Cpath%20d%3D%27M12%202.6v1.6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-digest: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%206.5h14%27%2F%3E%3Cpath%20d%3D%27M5%2011.5h14%27%2F%3E%3Cpath%20d%3D%27M5%2016.5h9%27%2F%3E%3Ccircle%20cx%3D%2718.5%27%20cy%3D%2717%27%20r%3D%271.6%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275.5%27%20width%3D%2717%27%20height%3D%2715%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3.5%2010h17%27%2F%3E%3Cpath%20d%3D%27M8%203.5v4M16%203.5v4%27%2F%3E%3Cpath%20d%3D%27M8.5%2014.5h3%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-sparkle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5l1.9%205.1%205.1%201.9-5.1%201.9L12%2017.5l-1.9-5.1L5%2010.5l5.1-1.9z%27%2F%3E%3Cpath%20d%3D%27M19%2016.5l.8%202%202%20.8-2%20.8-.8%202-.8-2-2-.8%202-.8z%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-calendar-move: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%275.5%27%20width%3D%2717%27%20height%3D%2715%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3.5%2010h17%27%2F%3E%3Cpath%20d%3D%27M8%203.5v4M16%203.5v4%27%2F%3E%3Cpath%20d%3D%27M8%2015.5h7.5M13.5%2013l2.5%202.5-2.5%202.5%27%2F%3E%3C%2Fsvg%3E");
    --icon-notif-repeat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17%204.5l3%203-3%203%27%2F%3E%3Cpath%20d%3D%27M20%207.5H8.5A4.5%204.5%200%200%200%204%2012%27%2F%3E%3Cpath%20d%3D%27M7%2019.5l-3-3%203-3%27%2F%3E%3Cpath%20d%3D%27M4%2016.5h11.5a4.5%204.5%200%200%200%204.5-4.5%27%2F%3E%3C%2Fsvg%3E");
    --insp-text: #475363;
    --insp-bg: #eff0f2;
    --area-color: #ff2d78;
    --icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    --icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 3.5l16 17' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
    --icon-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --fs-2xs: 0.72rem;
    --fs-xs: 0.78rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.15rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.4rem;
    --fs-stat: 1.6rem;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--insp-bg);
}

h1 {
    font-size: var(--fs-stat);
    font-weight: 650;
    color: var(--insp-text);
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--insp-yellow);
    display: inline-block;
    padding-bottom: 0.2rem;
}

h4 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--insp-primary-dark);
    margin-top: 1.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #dde7f0;
}

.table {
    font-size: var(--fs-sm);
}

a, .btn-link {
    color: var(--insp-link);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--insp-primary-dark);
    }

.btn-primary {
    color: #fff;
    background-color: var(--insp-primary);
    border-color: var(--insp-primary-dark);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--insp-primary-dark) !important;
        border-color: var(--insp-primary-dark) !important;
    }

.btn-outline-primary {
    color: var(--insp-primary);
    border-color: var(--insp-primary);
}

    .btn-outline-primary:hover, .btn-check:checked + .btn-outline-primary {
        background-color: var(--insp-primary) !important;
        border-color: var(--insp-primary) !important;
        color: #fff;
    }

.badge.bg-primary {
    background-color: var(--insp-primary) !important;
}

.badge.bg-warning {
    background-color: var(--insp-yellow) !important;
    color: #475363 !important;
}

.card {
    --bs-card-bg: var(--card-bg, var(--bs-body-bg));
    border: var(--card-border, none);
    border-radius: 0.6rem;
    box-shadow: var(--card-shadow, 0 1px 4px rgba(14, 42, 71, 0.08));
}

.relation-toggle {
    background: none;
    border: none;
    padding: 0 0.4rem 0 0;
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    vertical-align: baseline;
}

    .relation-toggle.off {
        color: #b6c2cc;
    }

        .relation-toggle.off:hover {
            color: #6c757d;
        }

    .relation-toggle.on-favorite {
        color: #f0a904;
    }

    .relation-toggle.on-blocked {
        color: #dc3545;
        font-weight: 700;
    }

.entity-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

    .entity-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.entity-avatar-technician {
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #8b5cf6, #6f42c1);
}

.entity-avatar-company {
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.icon-action {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: var(--fs-lg);
    line-height: 1.3;
    color: #6c757d;
    cursor: pointer;
    text-decoration: none;
}

    .icon-action:hover {
        background: #eef2f7;
        border-color: #ced4da;
        color: #212529;
    }

    .icon-action.primary {
        color: var(--insp-primary);
    }

    .icon-action.success {
        color: #198754;
    }

    .icon-action.danger:hover {
        background: #fdecee;
        border-color: #f1aeb5;
        color: #dc3545;
    }

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.25;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

    .btn-action.compact {
        padding: 0.1rem 0.5rem;
        font-size: var(--fs-xs);
        font-weight: 500;
    }

    .btn-action.success {
        color: #146c43;
        background: rgba(25, 135, 84, 0.14);
        border-color: rgba(25, 135, 84, 0.5);
    }

    .btn-action.success:hover {
        background: rgba(25, 135, 84, 0.24);
        border-color: #198754;
        color: #0f5132;
    }

    .btn-action.primary {
        color: var(--insp-primary-dark);
        background: rgba(0, 136, 202, 0.12);
        border-color: rgba(0, 136, 202, 0.45);
    }

    .btn-action.primary:hover {
        background: rgba(0, 136, 202, 0.22);
        border-color: var(--insp-primary);
        color: var(--insp-primary-dark);
    }

    .btn-action.neutral {
        color: #495057;
        background: rgba(108, 117, 125, 0.12);
        border-color: rgba(108, 117, 125, 0.4);
    }

    .btn-action.neutral:hover {
        background: rgba(108, 117, 125, 0.2);
        border-color: #6c757d;
        color: #212529;
    }

    .btn-action.danger {
        color: #b02a37;
        background: rgba(220, 53, 69, 0.11);
        border-color: rgba(220, 53, 69, 0.45);
    }

    .btn-action.danger:hover {
        background: rgba(220, 53, 69, 0.2);
        border-color: #dc3545;
        color: #842029;
    }

.markdown-page h1 {
    font-size: var(--fs-2xl);
    margin-bottom: 1rem;
}

.markdown-page h2 {
    font-size: var(--fs-xl);
    margin: 1.75rem 0 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.markdown-page h3 {
    font-size: var(--fs-lg);
    margin: 1.25rem 0 0.4rem;
}

.markdown-page p,
.markdown-page li {
    font-size: var(--fs-md);
}

.markdown-page table {
    width: 100%;
    margin-bottom: 1rem;
    font-size: var(--fs-sm);
}

    .markdown-page table th,
    .markdown-page table td {
        border: 1px solid #dee2e6;
        padding: 0.35rem 0.5rem;
        vertical-align: top;
    }

    .markdown-page table th {
        background: #f8f9fa;
    }

.markdown-page code {
    background: #f1f5f9;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
}

.markdown-page hr {
    display: none;
}

.markdown-page :is(h1, h2, h3, h4, h5) {
    scroll-margin-top: 4.75rem;
}

.help-highlight {
    animation: help-pulse 1.15s ease-in-out 3;
    border-radius: 4px;
}

@keyframes help-pulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 237, 54, 0.35); }}

html[data-bs-theme="dark"] .help-highlight {
    animation-name: help-pulse-dark;
}

@keyframes help-pulse-dark {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 237, 54, 0.16); }
}

.copyable {
    cursor: pointer;
    border-bottom: 1px dotted #adb5bd;
}

    .copyable:hover {
        background: #eef2f7;
    }

    .copyable.copied {
        background: #d1e7dd;
        color: #0f5132;
        border-bottom-color: transparent;
        border-radius: 0.3rem;
        padding: 0 0.25rem;
        animation: copied-in var(--motion-base) var(--ease-spring);
    }

@keyframes copied-in {
    from {
        opacity: 0.4;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.copied-flash {
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 0.3rem;
    background: #d1e7dd;
    color: #0f5132;
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.chart-bar {
    cursor: pointer;
    transition: fill-opacity var(--motion-fast) var(--ease-out);
}

    .chart-bar:hover {
        fill-opacity: 0.7;
        stroke: #1f2937;
        stroke-width: 1;
    }

.address-suggestions {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: calc(100% + 0.15rem);
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.address-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font-size: var(--fs-sm);
    line-height: 1.25;
}

    .address-suggestion:hover,
    .address-suggestion:focus {
        background: var(--insp-surface-2, #eef2f7);
    }

.map-box {
    height: 16rem;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid var(--insp-border, #dee2e6);
    z-index: 0;
}

[data-bs-theme="dark"] .map-box .leaflet-tile-pane {
    filter: brightness(0.78) saturate(0.85);
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.table-scroll.fit {
    width: max-content;
}

.chart-dot {
    cursor: pointer;
    transition: r var(--motion-fast) var(--ease-out);
}

    .chart-dot:hover {
        r: 4.5;
        stroke: #1f2937;
        stroke-width: 1;
    }

.searchable-select {
    display: inline-block;
    width: 100%;
}

.searchable-select-arrow {
    position: absolute;
    top: 0;
    right: 0.25rem;
    height: 100%;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: var(--fs-xs);
    cursor: pointer;
    padding: 0 0.35rem;
}

    .searchable-select-arrow:hover {
        color: var(--insp-primary);
    }

.searchable-select-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 15rem;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(14, 42, 71, 0.18);
    animation: motion-pop-in var(--motion-fast) var(--ease-out);
}

.searchable-select-item {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0.35rem 0.75rem;
    font-size: var(--fs-sm);
    color: inherit;
}

    button.searchable-select-item:hover {
        background-color: rgba(13, 110, 253, 0.08);
        cursor: pointer;
    }

    .searchable-select-item.active {
        background-color: rgba(13, 110, 253, 0.12);
        font-weight: 600;
    }

html[data-bs-theme="dark"] button.searchable-select-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.date-presets {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

    .date-presets > .btn {
        white-space: nowrap;
    }

.date-presets-menu {
    position: absolute;
    top: calc(100% + 0.2rem);
    left: 0;
    z-index: 30;
    min-width: 7.5rem;
    padding: 0.15rem 0;
    box-shadow: 0 4px 16px rgba(14, 42, 71, 0.18);
    animation: motion-pop-in var(--motion-fast) var(--ease-out);
}

.date-presets-title {
    display: none;
}

/* On a phone the button may sit at either edge of a wrapped row, so the menu rises from the bottom like ConfirmButton. */
@media (max-width: 575.98px) {
    .date-presets-menu {
        position: fixed;
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        z-index: 1060;
        padding: 0.35rem 0;
        border-top: 3px solid var(--insp-primary);
        border-radius: 0.6rem;
        box-shadow: 0 10px 28px rgba(14, 42, 71, 0.22);
        animation-name: motion-rise-in;
    }

        .date-presets-menu .searchable-select-item {
            padding: 0.55rem 1rem;
        }

    .date-presets-title {
        display: block;
        padding: 0.3rem 1rem 0.2rem;
        color: var(--bs-secondary-color);
        font-size: var(--fs-xs);
        font-weight: 600;
    }

    .chooser-backdrop.date-presets-backdrop {
        z-index: 1059;
        background: rgba(15, 23, 42, 0.25);
    }
}

.chooser-grip {
    cursor: grab;
    color: #94a3b8;
    user-select: none;
    font-size: var(--fs-xs);
    line-height: 1;
}

.chart-legend-link {
    color: inherit;
    text-decoration: none;
}

    .chart-legend-link:hover {
        text-decoration: underline;
    }

.chart-slice {
    cursor: pointer;
    transition: opacity var(--motion-fast) var(--ease-out);
}

    .chart-slice:hover {
        opacity: 0.75;
    }

.profile-stat {
    background: #f1f5f9;
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
    height: 100%;
}

.profile-stat.stat-tinted {
    border-left: 3px solid var(--tile-accent, transparent);
    background: color-mix(in srgb, var(--tile-accent, transparent) 9%, #f1f5f9);
}

    .profile-stat .value {
        font-size: var(--fs-2xl);
        font-weight: 650;
        line-height: 1.1;
        color: var(--insp-primary-dark);
    }

    .profile-stat .label {
        font-size: var(--fs-xs);
        color: #64748b;
        margin-left: 0.35rem;
    }

.sidebar .about-link {
    display: flex;
    align-items: center;
    padding: 0.12rem 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--fs-xs);
    text-decoration: none;
}

    .sidebar .about-link:hover {
        color: rgba(255, 255, 255, 0.85);
    }

html.sidebar-collapsed .sidebar .about-link,
html.sidebar-collapsed .sidebar .operator-logo {
    display: none;
}

.nav-scrollable > .nav {
    min-height: 100%;
}

.sidebar .nav-footer {
    margin-top: auto;
    padding-top: 2.5rem;
    margin-bottom: 1.5rem;
}

.sidebar .operator-row {
    margin-top: 1rem;
}

html.sidebar-collapsed .sidebar .nav-footer {
    display: none;
}

a.link-operator, .link-operator {
    color: var(--bs-secondary-color);
    font-style: italic;
}

a.link-technician, .link-technician {
    color: #6f42c1;
}

    a.link-technician:hover {
        color: #59359c;
    }

a.link-company, .link-company {
    color: #0f766e;
}

    a.link-company:hover {
        color: #0b5d57;
    }

a.link-project, .link-project {
    color: #b45309;
}

    a.link-project:hover {
        color: #92400e;
    }

.filter-tag {
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
    border-radius: 0.4rem;
    padding: 0.1rem 0.55rem;
    font-size: var(--fs-xs);
    line-height: 1.4;
    cursor: pointer;
}

    .filter-tag:hover {
        border-color: var(--insp-primary);
    }

    .filter-tag.active {
        background: var(--insp-primary);
        border-color: var(--insp-primary);
        color: #fff;
    }

.sort-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .sort-link:hover {
        color: var(--insp-primary);
    }

.rating-star {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: var(--fs-xl);
    line-height: 1;
    color: #cbd5e1;
    cursor: pointer;
}

    .rating-star.on {
        color: #f0a904;
    }

.stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

    .stat-link .card {
        transition: box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
    }

    .stat-link:hover {
        color: inherit;
    }

        .stat-link:hover .card {
            box-shadow: 0 4px 12px rgba(14, 42, 71, 0.2);
            transform: translateY(-2px);
        }

.widget-donut-card {
    container-type: inline-size;
}

.widget-donut {
    flex-shrink: 0;
    width: 200px;
    width: clamp(120px, 30cqw, 360px);
}

.widget-fixed .widget-donut {
    width: 132px;
}

.widget-grid .region-map svg {
    margin: 0 auto;
    max-width: min(100%, calc(min(var(--h, 1) * 4px - 104px, var(--map-max-height)) * var(--map-aspect, 1.72)));
}

/* A map never grows past this height whatever rows the widget has — a tall country would otherwise fill four rows. */
.widget-grid {
    --map-max-height: 560px;
}

.widget-grid .map-breakdown {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: .5rem;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.widget-grid .map-breakdown-map {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
}

.widget-grid .map-breakdown .region-map svg {
    max-width: min(100%, calc(min(var(--h, 1) * 4px - 220px, var(--map-max-height)) * var(--map-aspect, 1.72)));
}

.widget-grid .map-breakdown .category-breakdown {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}

.widget-grid .map-breakdown .category-breakdown .legend-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    min-width: 0;
    height: auto;
    flex: 1 1 auto;
}

.widget-grid .map-breakdown .legend-tile {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .6rem;
}

.widget-grid .map-breakdown .legend-tile .value {
    font-size: var(--fs-md);
}

.widget-grid .map-breakdown .legend-tile .label {
    font-size: var(--fs-2xs);
}

/* A tall country's map sits beside its tiles from 520 px, a wide one from 900 px — narrower it stays above them. */
@container widget (min-width: 520px) {
    .widget-grid .map-breakdown:has(.is-tall) {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .widget-grid .map-breakdown:has(.is-tall) .map-breakdown-map {
        flex: 0 1 auto;
        width: auto;
        max-width: 60%;
    }

    /* The map column is exactly as wide as the map, so no empty strip stays beside it. */
    .widget-grid .map-breakdown:has(.is-tall) .region-map svg {
        width: calc(min(var(--h, 1) * 4px - 148px, var(--map-max-height)) * var(--map-aspect, 1.72));
        max-width: 100%;
    }

    .widget-grid .map-breakdown:has(.is-tall) .category-breakdown {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .widget-grid .map-breakdown:has(.is-tall) .category-breakdown .legend-tiles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .widget-grid .map-breakdown:has(.is-tall) .legend-tile {
        display: block;
        padding: .55rem .7rem;
    }

    .widget-grid .map-breakdown:has(.is-tall) .legend-tile .value {
        font-size: var(--fs-2xl);
    }

    .widget-grid .map-breakdown:has(.is-tall) .legend-tile .label {
        display: block;
        font-size: var(--fs-xs);
    }
}

@container widget (min-width: 900px) {
    .widget-grid .map-breakdown {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .widget-grid .map-breakdown-map {
        flex: 0 1 auto;
        width: auto;
        max-width: 60%;
    }

    /* The map column is exactly as wide as the map, so no empty strip stays beside it. */
    .widget-grid .map-breakdown .region-map svg {
        width: calc(min(var(--h, 1) * 4px - 148px, var(--map-max-height)) * var(--map-aspect, 1.72));
        max-width: 100%;
    }

    .widget-grid .map-breakdown .category-breakdown {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .widget-grid .map-breakdown .category-breakdown .legend-tiles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .widget-grid .map-breakdown .legend-tile {
        display: block;
        padding: .55rem .7rem;
    }

    .widget-grid .map-breakdown .legend-tile .value {
        font-size: var(--fs-2xl);
    }

    .widget-grid .map-breakdown .legend-tile .label {
        display: block;
        font-size: var(--fs-xs);
    }
}

.widget-grid .widget-donut {
    max-width: calc(var(--h, 1) * 4px - 112px);
    align-self: center;
}

.widget-grid .widget-donut-card {
    justify-content: safe center;
    row-gap: .5rem;
}

.widget-grid .widget-donut-card .category-breakdown {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    align-items: safe center;
    justify-content: safe center;
    column-gap: 1rem;
    flex-wrap: wrap;
}

.widget-grid .widget-donut-card .category-donut {
    flex: 0 0 min(46%, calc(var(--h, 1) * 4px - 116px));
    min-width: 96px;
    align-self: center;
}

.widget-grid .widget-donut-card .legend-tiles {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    align-content: center;
    grid-auto-rows: minmax(min-content, 4.4rem);
}

.widget-grid .widget-donut-card .legend-tile {
    justify-content: center;
}

    .widget-grid .widget-donut-card .legend-tile .value {
        font-size: var(--fs-xl);
    }

/* Not the Bootstrap utility: its !important would beat the fold-width override that stacks the row. */
.widget-donut-card .donut-stats-row {
    flex-wrap: wrap;
}

@container widget (max-width: 419px) {
    .widget-donut-card .category-breakdown,
    .widget-grid .widget-donut-card .category-breakdown {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        align-items: center;
    }

    .widget-donut-card .category-donut,
    .widget-grid .widget-donut-card .category-donut {
        flex: 0 0 auto;
        width: min(58%, 200px);
    }

    .widget-donut-card .legend-tiles,
    .widget-grid .widget-donut-card .legend-tiles {
        width: 100%;
        flex: 0 0 auto;
    }

    .widget-donut-card .donut-stats-row,
    .widget-grid .widget-body .card > .donut-stats-row.d-flex {
        flex-direction: column;
        flex-wrap: nowrap;
        height: auto;
        align-items: center;
    }

    .widget-donut-card .donut-stats-row .widget-donut,
    .widget-grid .widget-donut-card .donut-stats-row .widget-donut {
        flex: 0 0 auto;
        width: min(58%, 200px);
    }

    .widget-donut-card .donut-stats-row .tile-grid,
    .widget-grid .widget-donut-card .donut-stats-row .tile-grid {
        width: 100%;
    }
}

.widget-fixed .chart-bars,
.widget-fixed .chart-lines {
    max-width: 520px;
}

.legend-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: .35rem;
    flex: 1 1 200px;
}

.legend-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    padding: .3rem .4rem;
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--tile-color, var(--insp-primary));
    border-radius: 6px;
    background: color-mix(in srgb, var(--tile-color, var(--insp-primary)) 9%, var(--bs-body-bg));
    color: inherit;
    text-decoration: none;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

    .legend-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 3px 6px rgba(9, 30, 55, .16);
        color: inherit;
    }

    .legend-tile.chart-key-on {
        border-color: var(--tile-color, var(--insp-primary));
        box-shadow: inset 0 0 0 1px var(--tile-color, var(--insp-primary)), 0 3px 7px rgba(9, 30, 55, .18);
        transform: translateY(-2px);
    }

.legend-tiles:has(.chart-key-on) .legend-tile.chart-key-dim {
    opacity: .45;
}

    .legend-tile .value {
        font-size: var(--fs-2xl);
        font-weight: 700;
        line-height: 1.1;
    }

    .legend-tile .label {
        font-size: var(--fs-xs);
        color: var(--bs-secondary-color);
        text-align: center;
        overflow-wrap: break-word;
    }

html[data-bs-theme="dark"] .legend-tile:hover {
    box-shadow: 0 3px 7px rgba(0, 0, 0, .55);
}

.filter-badges:not(:has(*)) {
    display: none !important;
}

.color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--sw, #888);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 0;
}

.color-swatch.selected {
    border-color: var(--bs-body-color);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.btn-cta {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    --ring-color: rgba(25, 135, 84, .55);
    --ring-size: 9px;
    animation: motion-ring 3.2s var(--ease-out) infinite;
}

.btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(25, 135, 84, .5);
    animation: none;
}

@keyframes motion-ring {
    0% { box-shadow: 0 0 0 0 var(--ring-color, rgba(0, 136, 202, .35)); }
    58%, 100% { box-shadow: 0 0 0 var(--ring-size, 9px) transparent; }
}

.open-anyone {
    display: inline-block;
    padding: 0.08rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--insp-primary) 35%, transparent);
    --ring-color: rgba(0, 136, 202, 0.3);
    --ring-size: 7px;
    animation: motion-ring 3.2s var(--ease-out) infinite;
}

tr:nth-child(even) .open-anyone {
    animation-delay: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
    .open-anyone { animation: none; }
}

.btn-apply {
    font-size: var(--fs-md);
    padding: 0.4rem 1.1rem;
    --ring-color: rgba(255, 237, 54, 0.55);
    --ring-size: 12px;
    animation: motion-ring 2.8s var(--ease-out) infinite;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(255, 237, 54, 0.45);
    animation: none;
}

.apply-hand {
    display: inline-block;
    transform-origin: 70% 85%;
    animation: apply-wave 2.8s ease-in-out infinite;
}

@keyframes apply-wave {
    0%, 18%, 100% { transform: rotate(0); }
    6% { transform: rotate(-16deg); }
    12% { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-apply, .apply-hand { animation: none; }
    .btn-cta { animation: none; transition: none; }
}

.hint-bar {
    --hint-tone: var(--insp-yellow, #ffed36);
    --hint-shadow: 0 14px 34px -10px rgba(10, 25, 47, .42), 0 2px 6px rgba(10, 25, 47, .14),
                   0 0 20px -6px color-mix(in srgb, var(--hint-tone) 55%, transparent);
    position: fixed;
    left: calc(164px + 1.25rem);
    right: 1rem;
    bottom: 0.75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: color-mix(in srgb, var(--hint-tone) 13%, var(--bs-body-bg, #fff));
    border: 1px solid color-mix(in srgb, var(--insp-yellow-dark, #ebd713) 60%, var(--bs-border-color, #dee2e6));
    border-left: 4px solid var(--insp-yellow-dark, #ebd713);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--hint-shadow);
}

html[data-bs-theme="dark"] .hint-bar {
    --hint-shadow: 0 16px 38px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .4),
                   0 0 24px -6px color-mix(in srgb, var(--hint-tone) 40%, transparent);
    background: color-mix(in srgb, var(--hint-tone) 9%, var(--insp-surface, #1d2228));
    border-color: color-mix(in srgb, var(--hint-tone) 34%, var(--insp-border, #333b45));
    border-left-color: color-mix(in srgb, var(--hint-tone) 75%, transparent);
}

.hint-bar.intro {
    animation: hint-intro 12s linear forwards, hint-glow var(--motion-emphasis) var(--ease-out) 0.35s 2 alternate;
}

.hint-dock:has(> .hint-bar.intro)::before {
    content: "";
    position: fixed;
    left: calc(164px + 0.5rem);
    right: 0;
    bottom: 0;
    height: 7.5rem;
    z-index: 29;
    pointer-events: none;
    background: linear-gradient(to top, var(--insp-bg) 38%, color-mix(in srgb, var(--insp-bg) 0%, transparent));
    animation: hint-scrim 12s linear forwards;
}

.hint-dock:has(> .hint-bar.intro:hover)::before {
    animation-play-state: paused;
}

html.sidebar-collapsed .hint-dock:has(> .hint-bar.intro)::before {
    left: calc(4rem + 0.5rem);
}

main:has(> .hint-dock) > article.content {
    padding-bottom: 5.5rem;
}

@keyframes hint-glow {
    to {
        box-shadow: var(--hint-shadow), 0 0 0 4px color-mix(in srgb, var(--hint-tone) 30%, transparent),
                    0 0 30px 4px color-mix(in srgb, var(--hint-tone) 38%, transparent);
    }
}

@keyframes hint-scrim {
    0% { opacity: 0; }
    3%, 95% { opacity: 1; }
    99%, 100% { opacity: 0; }
}

html.sidebar-collapsed .hint-bar {
    left: calc(4rem + 1.25rem);
}

.hint-more {
    display: inline-block;
    margin-left: 0.4rem;
    white-space: nowrap;
}

.hint-bar-bulb {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

    .hint-bar-bulb:hover {
        filter: drop-shadow(0 0 6px rgba(255, 237, 54, 0.8));
    }

.hint-rows {
    flex: 1 1 auto;
    min-width: 0;
}

.hint-tip-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

    .hint-tip-row > span {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .hint-tip-row + .hint-tip-row {
        border-top: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 60%, transparent);
    }

    .hint-panel-card .hint-tip-row::before {
        content: "💡";
        filter: grayscale(1);
        opacity: 0.6;
    }

    .hint-tip-row .hint-x {
        align-self: center;
    }

.hint-x,
.hint-wrench {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border: 0;
    border-radius: 50%;
    background: none;
    padding: 0;
    position: relative;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .hint-x::before,
    .hint-wrench::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 0.85rem;
        height: 0.85rem;
        background: currentColor;
        -webkit-mask: var(--icon-x) center / contain no-repeat;
        mask: var(--icon-x) center / contain no-repeat;
    }

    .hint-wrench::before {
        -webkit-mask-image: var(--icon-wrench);
        mask-image: var(--icon-wrench);
    }

    .hint-x:hover {
        color: #dc3545;
        background: color-mix(in srgb, #dc3545 12%, transparent);
    }

    .hint-wrench:hover {
        color: var(--insp-primary);
        background: color-mix(in srgb, var(--insp-primary) 12%, transparent);
    }

    .hint-bar.intro:hover {
        animation-play-state: paused;
    }

@keyframes hint-intro {
    0% { transform: translateY(130%); opacity: 0; }
    3% { transform: none; opacity: 1; }
    95% { transform: none; opacity: 1; }
    99% { transform: translateX(60%); opacity: 0; }
    100% { transform: translateX(60%); opacity: 0; visibility: hidden; }
}

.hint-bar.docked {
    display: none;
}

.hint-bulb-wrap {
    position: fixed;
    right: 1rem;
    bottom: 0.85rem;
    z-index: 30;
    opacity: 0;
    animation: hint-bulb-in var(--motion-slow) var(--ease-spring) 11.85s forwards;
}

    .hint-bulb-wrap.settled {
        opacity: 1;
        animation: none;
    }

.hint-bulb {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    border: 1px solid color-mix(in srgb, var(--insp-yellow) 55%, var(--bs-border-color, #dee2e6));
    border-radius: 50%;
    background: var(--bs-body-bg, #fff);
    font-size: var(--fs-stat);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(10, 25, 47, .22);
    transition: transform var(--motion-fast) var(--ease-out);
}

    .hint-bulb::before {
        content: "";
        position: absolute;
        inset: -13px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 237, 54, 0.55), rgba(255, 237, 54, 0) 70%);
        filter: blur(7px);
        z-index: -1;
        pointer-events: none;
    }

.hint-bulb-wrap:hover .hint-bulb {
    transform: scale(1.08);
}

.hint-bulb-wrap.settled .hint-bulb {
    animation: bulb-breathe 7s ease-in-out infinite;
}

    .hint-bulb-wrap.settled .hint-bulb::before {
        animation: bulb-halo 7s ease-in-out infinite;
    }

@keyframes bulb-breathe {
    0%, 80%, 100% {
        box-shadow: 0 4px 14px rgba(10, 25, 47, .22);
    }

    90% {
        box-shadow: 0 4px 18px rgba(10, 25, 47, .24), 0 0 24px 5px rgba(255, 237, 54, .5);
    }
}

@keyframes bulb-halo {
    0%, 80%, 100% {
        transform: none;
    }

    90% {
        transform: scale(1.3);
    }
}

@keyframes hint-bulb-in {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: none; }
}

.hint-bulb-panel {
    position: absolute;
    right: 0;
    bottom: 100%;
    padding-bottom: 0.6rem;
    width: min(30rem, calc(100vw - 2rem));
    opacity: 0;
    transform: translateY(0.4rem) scale(0.97);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.hint-bulb-wrap:hover:not(.muted) .hint-bulb-panel,
.hint-bulb-wrap:focus-within:not(.muted) .hint-bulb-panel,
.hint-bulb-wrap.open .hint-bulb-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.hint-panel-card {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(10, 25, 47, .28);
    padding: 0.5rem 0.65rem;
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color, #6c757d);
    text-align: left;
}

.hint-panel-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    font-size: var(--fs-xs);
}

@media (max-width: 767.98px) {
    .hint-bar {
        left: 0.75rem;
        right: 0.75rem;
    }

    .hint-dock:has(> .hint-bar.intro)::before,
    html.sidebar-collapsed .hint-dock:has(> .hint-bar.intro)::before {
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hint-bar.intro,
    .hint-dock::before {
        display: none;
    }

    .hint-bulb-wrap {
        opacity: 1;
        animation: none;
    }

    .hint-bulb-wrap .hint-bulb {
        box-shadow: 0 4px 14px rgba(10, 25, 47, .22), 0 0 20px 3px rgba(255, 237, 54, .38);
    }

    .hint-bulb,
    .hint-bulb-panel {
        transition: none;
    }

    .hint-bulb-wrap.settled .hint-bulb,
    .hint-bulb-wrap.settled .hint-bulb::before {
        animation: none;
    }
}

/* js/motion.js sets data-collapsed once the actions no longer fit in one row. */
.head-actions {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 100%;
    margin-left: auto;
}

.head-actions-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

.head-actions-more {
    display: none !important;
}

.head-actions[data-measure] > .head-actions-list {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    width: max-content !important;
}

.head-actions[data-quiet] > .head-actions-list {
    transition: none !important;
}

.head-actions[data-collapsed]:not([data-measure]) > .head-actions-more {
    display: inline-flex !important;
}

.head-actions[data-collapsed]:not([data-measure]) > .head-actions-list {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1040;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: max-content;
    max-width: calc(100vw - 1.5rem);
    padding: 0.5rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(10, 25, 47, 0.25);
    opacity: 0;
    translate: 0 -4px;
    transition: opacity var(--motion-fast) var(--ease-out), translate var(--motion-fast) var(--ease-out),
                display var(--motion-fast) allow-discrete;
}

.head-actions[data-collapsed].open:not([data-measure]) > .head-actions-list {
    display: flex;
    opacity: 1;
    translate: none;
}

@starting-style {
    .head-actions[data-collapsed].open:not([data-measure]) > .head-actions-list {
        opacity: 0;
        translate: 0 -4px;
    }
}

    .head-actions[data-collapsed] > .head-actions-list > :is(.btn-action, .action-button, .confirm-action > .btn-action) {
        justify-content: flex-start;
    }

    .head-actions[data-collapsed] > .head-actions-list > .confirm-action > .confirm-trigger {
        flex: 1 1 auto;
    }

.confirm-action {
    position: relative;
    display: inline-flex;
}

.confirm-trigger[aria-expanded="true"] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, #dc3545) 22%, transparent);
}

.chooser-backdrop.confirm-backdrop {
    z-index: 40;
}

.confirm-strip {
    --confirm-tone: #dc3545;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--confirm-tone) 40%, var(--bs-border-color, #dee2e6));
    border-left: 3px solid var(--confirm-tone);
    border-radius: 0.6rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 10px 28px rgba(14, 42, 71, 0.22);
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    transform-origin: top right;
    animation: motion-slide-in var(--motion-base) var(--ease-spring);
}

    .confirm-strip.confirm-success {
        --confirm-tone: #198754;
    }

    .confirm-strip.confirm-primary {
        --confirm-tone: var(--insp-primary);
    }

.confirm-choices {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.confirm-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transform-origin: right center;
    animation: motion-slide-in var(--motion-base) var(--ease-spring);
}

html[data-bs-theme="dark"] .confirm-strip {
    background: var(--insp-surface, #1f2530);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

@media (max-width: 575.98px) {
    html .band-action {
        min-width: 0;
    }

    .section-tile > .section-head {
        row-gap: 0.3rem;
    }

    .section-tile > .section-head > .section-head-tools:has(> .band-action),
    .job-item-tile .job-item-head > .band-action {
        flex: 1 1 100%;
        justify-content: flex-end;
        margin: 0 calc(-1 * var(--band-pad-x, 0.55rem)) calc(-1 * var(--band-pad-y, 0.3rem));
        border-top: 1px solid color-mix(in srgb, var(--insp-primary) 12%, var(--bs-border-color, #dee2e6));
        border-top-right-radius: 0;
    }

    .section-head-tools:has(> .band-action) > :not(.band-action) {
        margin-right: auto;
        padding-left: var(--band-pad-x, 0.55rem);
    }

    .section-head-tools > .band-action,
    .job-item-tile .job-item-head > .band-action {
        min-height: 2rem;
        border-top-right-radius: 0;
    }

    .section-head-tools > .band-action:first-child {
        border-left: 0;
    }

    .job-item-tile .job-item-head > .band-action {
        border-left: 0;
    }

    .confirm-strip {
        position: fixed;
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        z-index: 1060;
        width: auto;
        max-width: none;
        animation-name: motion-rise-in;
    }

    .chooser-backdrop.confirm-backdrop {
        z-index: 1059;
        background: rgba(15, 23, 42, 0.25);
    }
}

.markdown-page .guide-locked {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: underline dotted;
    cursor: help;
}

[data-anchor-align="start"] {
    scroll-margin-top: 4.25rem;
}

.anchor-highlight {
    outline: 3px solid #ffed36;
    outline-offset: 3px;
    border-radius: 6px;
    animation: anchor-pulse 1s ease-in-out 3;
}

@keyframes anchor-pulse {
    50% { outline-color: rgba(255, 237, 54, 0.25); }
}

.availability-pin {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    vertical-align: -0.1rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.page-header-tools {
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

/* In the bar a page's controls stand by the profile on the right. */
@media (min-width: 1200px) {
    .page-header-tools:not(.tools-below) {
        justify-content: flex-end;
        transition: transform .45s cubic-bezier(.2, .7, .2, 1);
    }

    /* A thin divider parts the page's controls from the profile (and its name), like the one before signing out. */
    .page-header-tools.has-shown:not(.tools-below)::after {
        content: "";
        flex: 0 0 auto;
        width: 1px;
        height: 1.63rem;
        margin-left: .5rem;
        background: rgba(232, 244, 251, .32);
    }

    html[data-bs-theme="dark"] .page-header-tools.has-shown:not(.tools-below)::after {
        background: rgba(230, 237, 243, .2);
    }

    /* A search field may narrow further in the bar before the controls have to drop below it. */
    .page-header-tools > .search-field {
        min-width: 150px !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .page-header-tools,
        main > .top-row .top-row-title {
            transition: none !important;
        }
    }

    /* The profile's name unrolls on hover; the controls beside it step aside by its width. */
    main:has(> .top-row:not(.shows-name) .top-row-profile:hover, > .top-row:not(.shows-name) .demo-switch > summary:hover, > .top-row:not(.shows-name) .demo-switch[open]) .page-header-tools:not(.tools-below) {
        transform: translateX(calc(-1 * var(--profile-name-room, 0px)));
    }

    /* A title already cut to fit the controls gives way by the same width, so nothing slides over it. */
    main > .top-row .top-row-title {
        transition: max-width .45s cubic-bezier(.2, .7, .2, 1);
    }

    main:has(> .top-row:not(.shows-name) .top-row-profile:hover, > .top-row:not(.shows-name) .demo-switch > summary:hover, > .top-row:not(.shows-name) .demo-switch[open]) > .top-row .top-row-title[style*="max-width"] {
        max-width: calc(var(--title-squeezed, 0px) - var(--profile-name-room, 0px)) !important;
    }

    .page-header-tools {
        position: sticky;
        top: 1.75rem;
        z-index: 45;
        height: 0;
        overflow: visible;
        margin-top: -3.5rem;
        margin-bottom: 3.5rem;
        margin-left: var(--tools-offset, 12rem);
        margin-right: var(--tools-reserve, 22.5rem);
        flex-wrap: nowrap;
    }
}

    .page-header-tools.tools-below {
        position: static;
        height: auto;
        margin: 0 0 0.75rem;
        flex-wrap: wrap;
    }

.top-ribbon {
    --ribbon-fg: var(--insp-link);
    --ribbon-tab: var(--bs-secondary-color);
    --ribbon-strong: var(--bs-emphasis-color);
    --ribbon-line: var(--bs-border-color);
    --ribbon-hover: color-mix(in srgb, var(--insp-link) 9%, transparent);
    --ribbon-active: color-mix(in srgb, var(--insp-link) 14%, transparent);
    --ribbon-danger: var(--bs-danger-text-emphasis);
    --ribbon-success: var(--bs-success-text-emphasis);
    --ribbon-radius: .5rem;
    display: flex;
    flex: 1 1 100%;
    align-items: stretch;
    height: 3.1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ribbon-radius);
    background: var(--bs-body-bg);
}

.top-ribbon-group,
.top-ribbon-more,
.top-ribbon .confirm-action {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .top-ribbon .top-ribbon-btn {
        padding: 0 .15rem;
        font-size: .66rem;
    }

    .top-ribbon .top-ribbon-count {
        display: none;
    }

    .top-ribbon .top-ribbon-label {
        display: block;
    }
}

.top-ribbon-btn {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0 .45rem;
    border: 0;
    border-left: 1px solid var(--ribbon-line);
    border-radius: 0;
    background: transparent;
    --ribbon-ink: var(--ribbon-fg);
    color: var(--ribbon-ink);
    font-size: .72rem;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .top-ribbon > :first-child,
    .top-ribbon > :first-child > :first-child,
    .top-ribbon > :first-child > :first-child > .top-ribbon-btn {
        border-top-left-radius: var(--ribbon-radius);
        border-bottom-left-radius: var(--ribbon-radius);
    }

    .top-ribbon > :last-child,
    .top-ribbon > :last-child > :last-child,
    .top-ribbon > :last-child > :last-child > .top-ribbon-btn {
        border-top-right-radius: var(--ribbon-radius);
        border-bottom-right-radius: var(--ribbon-radius);
    }

    .top-ribbon > :first-child > .top-ribbon-btn:first-child,
    .top-ribbon > :first-child > :first-child > .top-ribbon-btn {
        border-left: 0;
    }

    .top-ribbon-btn:hover,
    .top-ribbon-btn.is-on {
        background: var(--ribbon-hover);
        color: var(--ribbon-ink);
    }

    .top-ribbon-btn:focus-visible {
        outline: 2px solid var(--insp-yellow);
        outline-offset: -2px;
    }

    .top-ribbon-btn.is-tab {
        --ribbon-ink: var(--ribbon-tab);
    }

    .top-ribbon-btn.is-active {
        --ribbon-ink: var(--ribbon-strong);
        background: var(--ribbon-active);
        font-weight: 600;
    }

        .top-ribbon-btn.is-active::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 3px;
            background: var(--insp-yellow);
        }

    .top-ribbon-btn.is-danger {
        --ribbon-ink: var(--ribbon-danger);
    }

        .top-ribbon-btn.is-danger:hover {
            background: color-mix(in srgb, var(--bs-danger) 14%, transparent);
        }

    .top-ribbon-btn.is-success {
        --ribbon-ink: var(--ribbon-success);
    }

        .top-ribbon-btn.is-success:hover {
            background: color-mix(in srgb, var(--bs-success) 14%, transparent);
        }

    .top-ribbon-btn.is-primary {
        --ribbon-ink: #1d2228;
        background: var(--insp-yellow);
        font-weight: 600;
    }

        .top-ribbon-btn.is-primary:hover {
            background: color-mix(in srgb, var(--insp-yellow) 84%, #000);
        }

.top-ribbon-label {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-ribbon-ico {
    display: inline-flex;
    position: relative;
    color: var(--ribbon-ink);
}

    .top-ribbon-ico .ribbon-icon {
        display: block;
    }

.top-ribbon-count {
    padding: 0 .3rem;
    border-radius: .55rem;
    background: color-mix(in srgb, var(--ribbon-ink) 16%, transparent);
    font-size: .64rem;
    font-weight: 700;
    line-height: 1.45;
}

.top-ribbon-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--insp-yellow);
}

.top-ribbon-menu {
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .28);
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    white-space: normal;
    text-align: left;
}

    .top-ribbon-menu.is-panel {
        gap: .2rem;
        padding: .6rem .75rem;
    }

.top-ribbon-menu-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .45rem .55rem;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .top-ribbon-menu-item:hover,
    .top-ribbon-menu-item:focus-visible {
        background: color-mix(in srgb, var(--insp-primary) 11%, transparent);
        color: var(--bs-body-color);
        outline: none;
    }

    .top-ribbon-menu-item > .ribbon-icon {
        flex: none;
        margin-top: .1rem;
        color: var(--insp-link);
    }

    .top-ribbon-menu-item > span {
        display: flex;
        flex-direction: column;
        min-width: 0;
        font-weight: 600;
        line-height: 1.25;
    }

    .top-ribbon-menu-item small {
        color: var(--bs-secondary-color);
        font-size: var(--fs-xs);
        font-weight: 400;
    }

    .top-ribbon-menu-item.is-danger,
    .top-ribbon-menu-item.is-danger > .ribbon-icon {
        color: var(--bs-danger-text-emphasis);
    }

.top-ribbon-menu .confirm-action {
    display: block;
}

.top-ribbon-menu-sep {
    height: 1px;
    margin: .3rem .2rem;
    background: var(--bs-border-color);
}

@media (min-width: 1200px) {
    .page-header-tools:not(.tools-below) .top-ribbon {
        --ribbon-tab: var(--bs-body-color);
        --ribbon-line: color-mix(in srgb, var(--insp-link) 18%, var(--bs-border-color));
        --ribbon-radius: 0;
        flex: 0 0 auto;
        height: 3.5rem;
        border: 0;
        border-right: 1px solid var(--ribbon-line);
        background: transparent;
    }

        .page-header-tools:not(.tools-below) .top-ribbon > :first-child > .top-ribbon-btn:first-child,
        .page-header-tools:not(.tools-below) .top-ribbon > :first-child > :first-child > .top-ribbon-btn {
            border-left: 1px solid var(--ribbon-line);
        }

        .page-header-tools:not(.tools-below) .top-ribbon-group,
        .page-header-tools:not(.tools-below) .top-ribbon-more,
        .page-header-tools:not(.tools-below) .top-ribbon .confirm-action {
            flex: 0 0 auto;
        }

        .page-header-tools:not(.tools-below) .top-ribbon-btn {
            flex: 0 0 auto;
            min-width: 4.9rem;
            padding: 0 .85rem;
        }

            .page-header-tools:not(.tools-below) .top-ribbon-btn.is-active::after {
                bottom: -2px;
                height: 2px;
            }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .top-ribbon {
        --ribbon-fg: #e8f4fb;
        --ribbon-tab: rgba(232, 244, 251, .82);
        --ribbon-strong: #ffffff;
        --ribbon-line: rgba(255, 255, 255, .2);
        --ribbon-hover: rgba(255, 255, 255, .1);
        --ribbon-active: rgba(255, 255, 255, .17);
        --ribbon-danger: #ffc6c6;
        --ribbon-success: #bdf3d2;
    }
}

/* Holds the shown item's picture (a job, project, place, company or technician); without one it takes no room. */
.top-row-title-lead {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: .7rem;
    vertical-align: middle;
}

    .top-row-title-lead:empty {
        display: none;
    }

.top-row-title-pic {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .top-row-title-lead {
        display: none;
    }
}

.tech-picker {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}

.tech-picker-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
}

    .tech-picker-filters > .form-control,
    .tech-picker-filters > .form-select {
        width: auto;
        max-width: 15rem;
    }

    .tech-picker-filters .tech-picker-search {
        flex: 1 1 12rem;
    }

.tech-picker-cats,
.tech-picker-switches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    flex-basis: 100%;
}

.tech-picker-cat {
    padding: .1rem .55rem;
    border: 1px solid var(--tag-accent, var(--bs-border-color));
    border-radius: 999px;
    background: transparent;
    color: var(--tag-fg, var(--bs-body-color));
    font-size: var(--fs-xs);
    font-weight: 600;
}

    .tech-picker-cat.is-on {
        background: var(--tag-bg, var(--bs-tertiary-bg));
    }

html[data-bs-theme="dark"] .tech-picker-cat {
    color: var(--tag-fg-d, var(--bs-body-color));
}

    html[data-bs-theme="dark"] .tech-picker-cat.is-on {
        background: var(--tag-bg-d, var(--bs-tertiary-bg));
    }

.tech-picker-add-cat {
    width: auto;
    max-width: 12rem;
}

.tech-picker-list {
    display: flex;
    flex-direction: column;
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
}

.tech-picker-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
}

    .tech-picker-row + .tech-picker-row {
        border-top: 1px solid var(--bs-border-color);
    }

.tech-picker-who {
    flex: 1 1 auto;
    min-width: 0;
}

.tech-picker-name {
    font-weight: 600;
}

.tech-picker-badges,
.tech-picker-quals {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-top: .1rem;
}

    .tech-picker-quals .tag-cat.is-other {
        opacity: .6;
    }

.tech-picker-pick {
    flex: none;
}

/* One search field everywhere: the lens leads, a page with filters adds the filter chip inside on the right. */
.search-field {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 70%, transparent);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    backdrop-filter: blur(6px);
    color: var(--bs-body-color);
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

    .search-field:focus-within {
        border-color: color-mix(in srgb, var(--insp-link) 60%, transparent);
        background-color: var(--bs-body-bg);
    }

.search-field-lens {
    display: grid;
    flex: none;
    place-items: center;
    padding-left: .7rem;
    color: var(--bs-secondary-color);
}

.search-field svg,
.filter-chip svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-field-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 .55rem 0 .5rem;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font-size: var(--fs-sm);
}

    .search-field-input::placeholder {
        color: var(--bs-secondary-color);
        opacity: 1;
    }

/* The filters as a chip: a funnel, the count of the filters on and a cross clearing them all. */
.filter-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 55%, transparent);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.search-field .filter-chip {
    height: 1.6rem;
    margin-right: .2rem;
    border-color: transparent;
}

    .filter-chip button {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        height: 100%;
        padding: 0 .6rem;
        border: 0;
        border-radius: 999px;
        background: none;
        color: inherit;
        font-size: var(--fs-xs);
        font-weight: 700;
    }

        .filter-chip button:hover,
        .filter-chip button:focus-visible {
            color: var(--bs-body-color);
            background: color-mix(in srgb, var(--insp-link) 12%, transparent);
        }

    .filter-chip.is-active,
    .filter-chip.is-open {
        background: color-mix(in srgb, var(--insp-link) 16%, transparent);
        color: var(--insp-link);
    }

    .filter-chip .filter-chip-clear {
        padding: 0 .5rem 0 .1rem;
    }

        .filter-chip .filter-chip-clear svg {
            width: .85rem;
            height: .85rem;
        }

.page-header-tools .btn {
    border-radius: 999px;
}

.mono-emoji {
    filter: grayscale(1);
    opacity: 0.72;
}

.report-tile .icon,
.widget-chip > .flex-fill {
    filter: grayscale(1);
}

.widget-title .mono-emoji {
    margin-right: 0.35rem;
}

.btn .mono-emoji,
.badge .mono-emoji {
    margin-right: 0.3rem;
}

.pill-select,
.page-header-tools select.form-select {
    border-radius: 999px;
    color: var(--bs-secondary-color, #6c757d);
    border-color: color-mix(in srgb, var(--bs-border-color, #dee2e6) 55%, transparent);
    background-color: transparent;
    padding-left: 0.9rem;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .pill-select:hover,
    .pill-select:focus,
    .page-header-tools select.form-select:hover,
    .page-header-tools select.form-select:focus {
        color: var(--bs-body-color);
        border-color: var(--bs-border-color, #dee2e6);
        background-color: color-mix(in srgb, var(--bs-body-bg) 60%, transparent);
    }

.submit-blocked {
    opacity: 0.7;
}

.submit-ready {
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.18);
}

.table-scroll.auto-hide {
    overflow-x: clip;
}

.table-scroll.auto-hide[data-overflow] {
    overflow-x: auto;
}

.table-scroll.auto-hide table[data-hide="1"] > * > tr > :is([data-rank="1"]),
.table-scroll.auto-hide table[data-hide="2"] > * > tr > :is([data-rank="1"], [data-rank="2"]),
.table-scroll.auto-hide table[data-hide="3"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"]),
.table-scroll.auto-hide table[data-hide="4"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"]),
.table-scroll.auto-hide table[data-hide="5"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"]),
.table-scroll.auto-hide table[data-hide="6"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"]),
.table-scroll.auto-hide table[data-hide="7"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"]),
.table-scroll.auto-hide table[data-hide="8"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"]),
.table-scroll.auto-hide table[data-hide="9"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"]),
.table-scroll.auto-hide table[data-hide="10"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"]),
.table-scroll.auto-hide table[data-hide="11"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"], [data-rank="11"]),
.table-scroll.auto-hide table[data-hide="12"] > * > tr > :is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"], [data-rank="11"], [data-rank="12"]) {
    display: none;
}

.dt-stacked {
    display: none;
    margin-top: 0.15rem;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .table-scroll.auto-hide > .table > :not(caption) > * > * {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

.table-scroll.auto-hide table[data-hide="1"] > tbody > tr > td > .dt-stacked:is([data-rank="1"]),
.table-scroll.auto-hide table[data-hide="2"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"]),
.table-scroll.auto-hide table[data-hide="3"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"]),
.table-scroll.auto-hide table[data-hide="4"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"]),
.table-scroll.auto-hide table[data-hide="5"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"]),
.table-scroll.auto-hide table[data-hide="6"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"]),
.table-scroll.auto-hide table[data-hide="7"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"]),
.table-scroll.auto-hide table[data-hide="8"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"]),
.table-scroll.auto-hide table[data-hide="9"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"]),
.table-scroll.auto-hide table[data-hide="10"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"]),
.table-scroll.auto-hide table[data-hide="11"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"], [data-rank="11"]),
.table-scroll.auto-hide table[data-hide="12"] > tbody > tr > td > .dt-stacked:is([data-rank="1"], [data-rank="2"], [data-rank="3"], [data-rank="4"], [data-rank="5"], [data-rank="6"], [data-rank="7"], [data-rank="8"], [data-rank="9"], [data-rank="10"], [data-rank="11"], [data-rank="12"]) {
    display: block;
}

.table-scroll.auto-hide thead th {
    position: sticky;
    top: 3.5rem;
    z-index: 2;
}

.widget-grid .table-scroll.auto-hide thead th {
    top: 0;
}

@media (max-width: 767.98px) {
    .table-scroll.auto-hide thead th {
        top: 0;
    }
}

.chart-slice,
.chart-series {
    transition: opacity var(--motion-fast) var(--ease-out);
}

svg .chart-series {
    transition: fill-opacity var(--motion-fast) var(--ease-out), stroke-opacity var(--motion-fast) var(--ease-out);
}

.chart-slice.chart-key-dim,
.chart-series.chart-key-dim {
    opacity: 0.25;
}

/* SVG series dim by fill and stroke: an opacity transition is GPU-composited and blurs the stretched chart. */
svg .chart-series.chart-key-dim {
    opacity: 1;
    fill-opacity: 0.25;
    stroke-opacity: 0.25;
}

.chart-slice.chart-key-on,
.chart-series.chart-key-on {
    opacity: 1;
}

.tile-stat.chart-key-on {
    background-color: rgba(13, 110, 253, 0.08);
}

html[data-bs-theme="dark"] .tile-stat.chart-key-on {
    background-color: rgba(255, 255, 255, 0.08);
}

.chart-legend-item.chart-key-on {
    color: var(--bs-body-color);
    text-shadow: .3px 0 0 currentColor, -.3px 0 0 currentColor;
}

.tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.75rem;
    height: 100%;
}

.tile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    height: 100%;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--tile-accent);
    border-radius: 0.6rem;
    background: var(--tile-bg);
    box-shadow: 0 1px 4px rgba(14, 42, 71, 0.06);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

    .tile-stat:hover {
        color: inherit;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(14, 42, 71, 0.18);
    }

    .tile-stat.active {
        box-shadow: inset 0 0 0 2px var(--tile-accent);
    }

    .tile-stat .value {
        font-size: var(--fs-stat);
        font-weight: 700;
        line-height: 1;
        color: var(--tile-accent);
    }

    .tile-stat .label {
        font-size: var(--fs-xs);
        color: #475569;
    }

.tile-progress {
    --tile-accent: #b45309;
    --tile-bg: #fffbeb;
}

.tile-invite {
    --tile-accent: #1d4ed8;
    --tile-bg: #eff6ff;
}

.tile-applied {
    --tile-accent: #475569;
    --tile-bg: #f8fafc;
}

.tile-done {
    --tile-accent: #15803d;
    --tile-bg: #f0fdf4;
}

.table {
    background-color: #fff;
    border-radius: 0.6rem;
    overflow: clip;
    box-shadow: 0 1px 4px rgba(14, 42, 71, 0.06);
}

    .table thead th {
        background-color: #e9eef4;
        color: var(--insp-primary-dark);
        font-weight: 600;
        border-bottom: none;
    }

.list-group-item {
    border-color: #e3e9f0;
}

.btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--insp-accent);
}

.form-control:focus, .form-select:focus {
    border-color: var(--insp-accent);
}

.content {
    padding-top: 0.65rem;
}

/* A page change: the bar's moves are instant and the new page fades in once rendered and loaded (js/page-title.js). */
main > article.content {
    transition: opacity .22s ease;
}

html.page-entering main > article.content {
    opacity: 0;
    transition: none;
}

html.bar-settling main > .top-row *:not(.top-row-load),
html.bar-settling .page-header-tools,
html.bar-settling .page-head-gear {
    transition: none !important;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.sidebar-toggle {
    display: none;
}

.theme-lang-row {
    display: flex;
    gap: 0.35rem;
}

.theme-toggle {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 0;
    line-height: 1;
}

    .theme-toggle::before {
        content: "";
        display: block;
        width: 1.15rem;
        height: 1.15rem;
        margin: 0 auto;
        background: currentColor;
        -webkit-mask: var(--icon-moon) center / contain no-repeat;
        mask: var(--icon-moon) center / contain no-repeat;
    }

html[data-bs-theme="dark"] .theme-toggle::before {
    -webkit-mask-image: var(--icon-sun);
    mask-image: var(--icon-sun);
}

    .theme-toggle:hover {
        border-color: rgba(255, 255, 255, 0.45);
        background: rgba(255, 255, 255, 0.08);
    }

.lang-toggle {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.3rem auto;
}

    .lang-toggle:hover {
        border-color: rgba(255, 255, 255, 0.45);
        background-color: rgba(255, 255, 255, 0.08);
    }

    .lang-pick {
        width: 2rem;
        height: 1.6rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 6px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.3rem auto;
        opacity: 0.45;
    }

        .lang-pick:hover {
            opacity: 0.8;
        }

        .lang-pick.active {
            opacity: 1;
            border-color: #0088CA;
            box-shadow: 0 0 0 1px #0088CA;
        }

    .lang-toggle.lang-en,
    .lang-pick.lang-en {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
    }

    .lang-toggle.lang-cs,
    .lang-pick.lang-cs {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'%3E%3Crect width='6' height='4' fill='%23fff'/%3E%3Crect y='2' width='6' height='2' fill='%23d7141a'/%3E%3Cpath d='M0,0 L3,2 L0,4 z' fill='%2311457e'/%3E%3C/svg%3E");
    }

@media (min-width: 768px) {
    .sidebar {
        position: relative;
    }

    .sidebar .nav-scrollable {
        padding-bottom: 0.5rem;
    }

    .theme-lang-row {
        position: absolute;
        bottom: 0.6rem;
        left: 1rem;
        right: 1rem;
    }

    .sidebar-toggle {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        height: 2.1rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 6px;
        background: transparent;
        color: #fff;
        font-size: var(--fs-sm);
    }

        .sidebar-toggle:hover {
            border-color: rgba(255, 255, 255, 0.45);
            background: rgba(255, 255, 255, 0.08);
        }

        .sidebar-toggle::before {
            content: "";
            display: block;
            width: 1.05rem;
            height: 1.05rem;
            margin: 0 auto;
            background: currentColor;
            -webkit-mask: var(--icon-chevrons) center / contain no-repeat;
            mask: var(--icon-chevrons) center / contain no-repeat;
        }

    html.sidebar-collapsed .sidebar {
        width: 4rem;
    }

    html.sidebar-collapsed .sidebar-toggle::before {
        transform: rotate(180deg);
    }

    html.sidebar-collapsed .theme-lang-row {
        flex-direction: column;
    }

    html.sidebar-collapsed .theme-toggle,
    html.sidebar-collapsed .lang-toggle,
    html.sidebar-collapsed .sidebar-toggle {
        flex: 0 0 auto;
        border-color: transparent;
    }

        html.sidebar-collapsed .theme-toggle:hover,
        html.sidebar-collapsed .lang-toggle:hover,
        html.sidebar-collapsed .sidebar-toggle:hover {
            border-color: rgba(255, 255, 255, 0.45);
        }

    html.sidebar-collapsed .sidebar .nav-scrollable {
        margin-bottom: 8.1rem;
    }

    html.sidebar-collapsed .sidebar .nav-link {
        font-size: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html.sidebar-collapsed .sidebar .nav-link .bi {
        margin-right: 0;
    }

    html.sidebar-collapsed .sidebar .navbar-brand strong,
    html.sidebar-collapsed .sidebar .brand-divider {
        display: none;
    }

    html.sidebar-collapsed .sidebar .navbar-brand img {
        margin-right: 0 !important;
        height: 42px !important;
    }

    html.sidebar-collapsed .sidebar .top-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex: 0 0 auto;
    }

    html.sidebar-collapsed .sidebar .top-row .container-fluid {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.35rem 0;
    }

    html.sidebar-collapsed .sidebar .navbar-brand {
        margin: 0;
        padding: 0;
    }

    html.sidebar-collapsed .sidebar .nav-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

html[data-bs-theme="dark"] {
    --insp-bg: #14181d;
    --insp-text: #d7dee8;
    --insp-primary: #35a6db;
    --insp-primary-dark: #79c8ec;
    --insp-link: var(--insp-accent);
    --insp-surface: #1d2228;
    --insp-surface-2: #262d35;
    --insp-border: #333b45;
    --area-color: #ff5c94;
}

html[data-bs-theme="dark"] body {
    color: var(--insp-text);
}

html[data-bs-theme="dark"] .btn-primary {
    color: #08151c;
    background-color: var(--insp-primary);
    border-color: var(--insp-primary);
}

html[data-bs-theme="dark"] h4 {
    border-bottom-color: var(--insp-border);
}

html[data-bs-theme="dark"] .table {
    background-color: var(--insp-surface);
}

html[data-bs-theme="dark"] .table thead th {
    background-color: var(--insp-surface-2);
    color: var(--insp-primary-dark);
}

html[data-bs-theme="dark"] .list-group-item {
    border-color: var(--insp-border);
}

html[data-bs-theme="dark"] .profile-stat {
    background: var(--insp-surface-2);
}

html[data-bs-theme="dark"] .profile-stat.stat-tinted {
    background: color-mix(in srgb, var(--tile-accent, transparent) 14%, var(--insp-surface-2));
}

.profile-actions-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
}

.profile-actions-row .btn-action {
    justify-content: flex-start;
}

.profile-owner-panel {
    min-width: min(520px, 84vw);
    text-align: left;
}

.section-add {
    margin-left: .5rem;
    text-decoration: none;
    opacity: .4;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.profile-section:hover .section-add,
.section-add:focus-visible {
    opacity: 1;
}

.page-header-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: 0 0 .75rem;
}

.id-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

    .id-chip.is-ok {
        background: #198754;
        color: #fff;
    }

    .id-chip.is-bad {
        background: #c82333;
        color: #fff;
    }

    .id-chip.is-warn {
        background: #f0b429;
        color: #1d2228;
    }

    .id-chip.is-info {
        background: #6edff6;
        color: #1d2228;
    }

    .id-chip.is-rating {
        color: #9a6700;
    }

    .id-chip.is-muted {
        color: var(--bs-secondary-color);
    }

@media (min-width: 1200px) {
    .page-header-chips {
        position: sticky;
        top: calc(2rem + 1px);
        z-index: 46;
        height: 0;
        overflow: visible;
        flex-wrap: nowrap;
        align-items: flex-start;
        max-width: var(--chips-width, 40rem);
        margin: -3.5rem 0 3.5rem var(--chips-left, 4rem);
    }

        .page-header-chips .id-chip {
            background: rgba(255, 255, 255, .16);
            color: #fff;
        }

            .page-header-chips .id-chip.is-ok {
                background: #1f9d5c;
            }

            .page-header-chips .id-chip.is-bad {
                background: #d63b4a;
            }

            .page-header-chips .id-chip.is-warn {
                background: #f0b429;
                color: #1d2228;
            }

            .page-header-chips .id-chip.is-info {
                background: #6edff6;
                color: #1d2228;
            }

            .page-header-chips .id-chip.is-rating {
                color: #ffd76a;
            }

            .page-header-chips .id-chip.is-muted {
                color: rgba(255, 255, 255, .75);
            }

    main > .top-row.has-chips .top-row-title {
        margin-top: -.6rem;
        padding-top: .6rem;
    }

    main > .top-row.has-chips .top-row-title-text {
        position: relative;
        top: -.6rem;
    }
}

/* A profile: the card of who it is on the left, the map and what to browse on the right. */
.profile-layout {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.profile-main {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.profile-lower {
    display: grid;
    gap: .75rem;
}

    .profile-lower.is-split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }

.profile-sep {
    margin: .75rem 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 1;
}

.profile-card-aside {
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.profile-note-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    max-width: 100%;
    margin-bottom: .6rem;
    padding: .1rem .6rem;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #f0b429 22%, var(--bs-body-bg));
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-align: left;
}

    .profile-note-flag .ribbon-icon {
        flex: none;
        width: 14px;
        height: 14px;
    }

    .profile-note-flag span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.profile-panel-title {
    color: var(--insp-link);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.profile-seen-panel,
.profile-note-panel {
    min-width: 21rem;
    gap: .4rem;
}

.profile-seen-lines {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--fs-sm);
}

.profile-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .7rem .9rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-card-bg, var(--bs-body-bg));
}

.profile-card-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.6rem;
    margin-bottom: .55rem;
}

.profile-card-title {
    margin: 0;
    color: var(--insp-link);
    font-size: var(--fs-md);
    font-weight: 700;
}

.profile-card-count {
    margin-left: .35rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.profile-card-actions {
    display: inline-flex;
    gap: .25rem;
    margin-left: auto;
}

    .profile-card-actions .band-action {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        padding: .1rem .45rem;
        border: 0;
        border-radius: .35rem;
        font-size: var(--fs-xs);
        line-height: 1.5;
        white-space: nowrap;
        opacity: 1;
    }

.profile-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem .9rem;
    margin: 0;
    font-size: var(--fs-sm);
}

    .profile-facts dt {
        color: var(--bs-secondary-color);
        font-weight: 400;
    }

    .profile-facts dd {
        min-width: 0;
        margin: 0;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .5rem;
}

    .profile-stats.is-list {
        grid-template-columns: minmax(0, 1fr);
    }

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.profile-view-note {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
    padding: .5rem .8rem;
    border: 1px solid color-mix(in srgb, #f0b429 55%, var(--bs-border-color));
    border-radius: .6rem;
    background: color-mix(in srgb, #f0b429 12%, var(--bs-body-bg));
    font-size: var(--fs-sm);
}

.profile-card .showcase-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: .5rem;
}

.profile-card .showcase-tile {
    padding: .5rem .6rem;
}

.showcase-thumb {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
}

.profile-jobs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-job {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: var(--fs-sm);
}

    .profile-job:last-child {
        border-bottom: 0;
    }

.profile-job-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.profile-job-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-job-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: var(--fs-2xs);
}

.profile-job-status {
    flex: none;
}

.profile-job-place {
    flex: 0 0 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-job-items {
    flex: 0 0 3.6rem;
    text-align: right;
}

.profile-job-date {
    flex: 0 0 5.6rem;
    color: var(--bs-secondary-color);
    text-align: right;
}

@media (max-width: 991.98px) {
    .profile-layout,
    .profile-lower.is-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-job-place {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .profile-job-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }

    .profile-job-items {
        display: none;
    }

    .profile-job-date {
        flex-basis: auto;
    }
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: .75rem;
}

.showcase-tile {
    border: 1px solid #dbe3ec;
    border-radius: .6rem;
    padding: .7rem .8rem;
    background: #f8fafc;
}

.showcase-tool {
    border: 0;
    background: transparent;
    border-radius: .35rem;
    padding: .1rem .3rem;
    line-height: 1.2;
    cursor: pointer;
    opacity: .55;
    transition: opacity var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.showcase-tile:hover .showcase-tool {
    opacity: .85;
}

.showcase-tool:hover {
    opacity: 1;
    background: rgba(108, 117, 125, .18);
}

.showcase-add {
    width: 96px;
    height: 96px;
    border: 2px dashed #b6c2d2;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    cursor: pointer;
    color: var(--bs-secondary-color);
    margin: 0;
    text-align: center;
    transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.showcase-add:hover {
    border-color: var(--insp-primary);
    color: var(--insp-primary);
}

.showcase-add-plus {
    font-size: var(--fs-2xl);
    line-height: 1;
}

.showcase-add-label {
    font-size: var(--fs-2xs);
    padding: 0 .3rem;
}

.section-file-pdf {
    width: 96px;
    height: 96px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

a.section-file-pdf:hover {
    border-color: var(--insp-primary);
    color: var(--insp-primary);
}

.section-file-pdf .mono-emoji {
    font-size: var(--fs-2xl);
    line-height: 1;
}

.section-file-pdf-kind {
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .04em;
}

.section-file-pdf-size {
    font-size: var(--fs-2xs);
    color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .section-file-pdf {
    border-color: var(--insp-border);
    background: var(--insp-surface-2);
}

.photo-markup {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.photo-markup > img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    height: auto;
    border-radius: var(--bs-border-radius);
}

.photo-markup[data-editable] {
    touch-action: none;
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}

.photo-marker {
    --marker: var(--bs-danger, #dc3545);
    position: absolute;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: transform var(--motion-fast) var(--ease-out);
}

.photo-markup[data-editable] .photo-marker {
    cursor: grab;
    touch-action: none;
}

.photo-marker.active,
.photo-marker:focus-visible {
    z-index: 2;
    outline: none;
    transform: translate(-50%, -50%) scale(1.3);
}

.photo-marker-pin {
    border-radius: 50%;
    background: var(--marker);
    box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .5);
}

.photo-marker-circle {
    border-radius: 50%;
    border: 3px solid var(--marker);
    box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1.5px #fff, 0 1px 4px rgba(0, 0, 0, .5);
}

.photo-marker-cross {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

    .photo-marker-cross::before,
    .photo-marker-cross::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 26px;
        height: 4px;
        border-radius: 2px;
        background: var(--marker);
        box-shadow: 0 0 0 1.5px #fff;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .photo-marker-cross::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

.photo-marker-cross .photo-marker-no,
.photo-marker-circle .photo-marker-no {
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--marker);
    font-size: 10px;
    line-height: 16px;
    box-shadow: 0 0 0 1.5px #fff;
}

.photo-markup-legend,
.photo-markup-editor-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: var(--fs-sm);
}

    .photo-markup-legend li,
    .photo-markup-editor-list li {
        display: flex;
        align-items: center;
        gap: .45rem;
        padding: .15rem .4rem;
        border-radius: .4rem;
    }

    .photo-markup-legend li.active,
    .photo-markup-legend li:focus-visible,
    .photo-markup-editor-list li.active {
        outline: none;
        background: color-mix(in srgb, var(--bs-danger) 13%, transparent);
    }

.photo-markup-editor-list .form-control {
    max-width: 360px;
}

.photo-markup-legend-no {
    flex: none;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.photo-markup-kind-label {
    min-width: 4.5rem;
}

.photo-markup-editor {
    padding: .6rem;
    border: 1px dashed color-mix(in srgb, var(--bs-danger) 45%, var(--bs-border-color));
    border-radius: .5rem;
}

.photo-thumb-marked {
    position: relative;
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}

.photo-marker-count {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bs-danger);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 0 0 1px #fff;
}

    /* A grey pin vanishes on the red badge, so it becomes a white silhouette like the count. */
    .photo-marker-count .mono-emoji {
        opacity: 1;
        filter: brightness(0) invert(1);
    }

.photo-markup-open .mono-emoji {
    opacity: 1;
}

.photo-markup-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 12, 18, .82);
    outline: none;
}

.photo-markup-lightbox-body {
    max-width: min(96vw, 1400px);
    max-height: 100%;
    overflow: auto;
    /* A hovered edge marker reaches 30px past the photo (badge 23px × scale 1.3); .photo-markup must stay the image. */
    padding: .75rem 2rem;
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.photo-markup-lightbox-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

/* An item's photos before and after the work: two labelled rows and a comparer that lays them over each other. */
.ba-photos {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    align-items: flex-start;
}

.ba-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.ba-label {
    min-width: 2.4rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ba-thumb {
    display: inline-block;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: none;
    line-height: 0;
    overflow: hidden;
}

    .ba-thumb img {
        width: 72px;
        height: 72px;
        object-fit: cover;
    }

    .ba-thumb.is-picked {
        border-color: var(--insp-primary);
        box-shadow: 0 0 0 2px var(--insp-primary);
    }

.ba-compare-body {
    padding: .75rem 1rem;
}

.ba-compare-stage {
    position: relative;
    display: grid;
    width: min(92vw, 1100px);
    height: min(72vh, 760px);
    background: #0b0f14;
    border-radius: .4rem;
    overflow: hidden;
    user-select: none;
}

    .ba-compare-stage > img {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

.ba-compare-before {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ba-compare-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, .6);
    pointer-events: none;
}

    .ba-compare-line::after {
        content: "⇆";
        position: absolute;
        top: 50%;
        left: 50%;
        display: grid;
        place-items: center;
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background: #fff;
        color: #1f2937;
        font-weight: 700;
        transform: translate(-50%, -50%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    }

.ba-compare-tag {
    position: absolute;
    top: .6rem;
    padding: .1rem .55rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    pointer-events: none;
}

    .ba-compare-tag.is-before {
        left: .6rem;
    }

    .ba-compare-tag.is-after {
        right: .6rem;
    }

/* The range covers the whole photo, so dragging anywhere moves the cut; arrows move it from the keyboard. */
.ba-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}

    .ba-compare-range:focus-visible ~ .ba-compare-line,
    .ba-compare-stage:has(.ba-compare-range:focus-visible) .ba-compare-line {
        box-shadow: 0 0 0 3px color-mix(in srgb, #ffed36 80%, transparent);
    }

.ba-compare-picks {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .6rem;
}

html[data-bs-theme="dark"] .showcase-tile {
    border-color: var(--insp-border);
    background: var(--insp-surface-2);
}

.job-item-tile {
    border: 1px solid color-mix(in srgb, var(--insp-primary) 16%, #dbe3ec);
    border-radius: .6rem;
    padding: .6rem .8rem;
    background: #f8fafc;
}

.section-locked {
    cursor: help;
}

/* Blazor drops the whitespace between the effect's sentences, so the gap is drawn instead. */
.section-stage-effect > span + span:not(.d-block) {
    margin-left: 0.3em;
}

.job-brief.is-preview > .section-tile {
    border-color: color-mix(in srgb, var(--insp-primary) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--insp-primary) 35%, transparent);
}

.item-note {
    padding: 0.3rem 0 0.35rem;
}

    .item-note + .item-note {
        border-top: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 60%, transparent);
    }

    .item-note .item-note-meta {
        display: block;
        margin-bottom: 0.1rem;
    }

    .item-note .item-note-text {
        white-space: pre-line;
    }

.job-item-notes .btn:focus:not(:focus-visible),
.band-action:focus:not(:focus-visible),
.section-toggle:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

.job-item-head {
    --band-pad-y: 0.35rem;
    --band-pad-x: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: -0.6rem -0.8rem 0.55rem;
    padding: var(--band-pad-y) var(--band-pad-x);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: color-mix(in srgb, var(--insp-primary) 9%, var(--bs-body-bg, #fff));
    border-bottom: 1px solid color-mix(in srgb, var(--insp-primary) 24%, var(--bs-border-color, #dee2e6));
}

    .job-item-head > span.text-muted:first-child {
        color: var(--insp-primary) !important;
        font-weight: 700;
    }

    .job-item-head > strong {
        min-width: 0;
        overflow-wrap: break-word;
    }

    .job-item-tile + .job-item-tile {
        margin-top: .7rem;
    }

html[data-bs-theme="dark"] .job-item-tile {
    border-color: color-mix(in srgb, var(--insp-primary) 32%, var(--insp-border));
    background: color-mix(in srgb, var(--insp-primary) 4%, var(--insp-surface-2));
}

.item-card {
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.item-card:hover {
    border-color: color-mix(in srgb, var(--insp-primary) 45%, var(--bs-border-color, #dee2e6));
    box-shadow: 0 2px 8px rgba(14, 42, 71, 0.10);
}

.item-add {
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.item-add:hover {
    border-color: var(--insp-primary);
    color: var(--insp-primary);
    background: color-mix(in srgb, var(--insp-primary) 7%, transparent);
}

.job-item-tile {
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

    .job-item-tile .job-item-head {
        transition: background-color var(--motion-fast) var(--ease-out);
    }

.job-item-tile:hover {
    border-color: color-mix(in srgb, var(--insp-primary) 55%, #dbe3ec);
    background: color-mix(in srgb, var(--insp-primary) 5%, #f8fafc);
    box-shadow: 0 3px 14px rgba(14, 42, 71, 0.14);
}

    .job-item-tile:hover .job-item-head {
        background: color-mix(in srgb, var(--insp-primary) 15%, var(--bs-body-bg, #fff));
    }

html[data-bs-theme="dark"] .job-item-tile:hover {
    border-color: color-mix(in srgb, var(--insp-primary) 65%, var(--insp-border));
    background: color-mix(in srgb, var(--insp-primary) 9%, var(--insp-surface-2));
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.45);
}

.item-photos img {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.item-photos .text-center:hover img {
    transform: scale(1.06);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.job-history li {
    border-radius: 0.35rem;
    transition: background-color var(--motion-fast) var(--ease-out);
}

.job-history li:hover {
    background: color-mix(in srgb, var(--insp-primary) 6%, transparent);
}

.job-history li:hover::before {
    opacity: 1;
}

.icon-no-photo::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    margin-right: 0.25em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 4.2 6.5 2.7h3L10.6 4.2H13a1.6 1.6 0 0 1 1.6 1.6v5.8A1.6 1.6 0 0 1 13 13.2H3a1.6 1.6 0 0 1-1.6-1.6V5.8A1.6 1.6 0 0 1 3 4.2z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8.5' r='2.3' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M2.2 1.8 13.8 14.2' stroke='black' stroke-width='1.7' stroke-linecap='round'/%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 16 16'%3E%3Cpath d='M5.4 4.2 6.5 2.7h3L10.6 4.2H13a1.6 1.6 0 0 1 1.6 1.6v5.8A1.6 1.6 0 0 1 13 13.2H3a1.6 1.6 0 0 1-1.6-1.6V5.8A1.6 1.6 0 0 1 3 4.2z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8.5' r='2.3' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M2.2 1.8 13.8 14.2' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rating-comment-view {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    min-height: calc(1.5em + 0.5rem + 2px);
    color: inherit;
    cursor: text;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.rating-comment-view:hover {
    border-color: var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

.rating-star {
    transition: transform var(--motion-fast) var(--ease-out);
}

.rating-star:hover {
    transform: scale(1.25);
}

.section-tile .table > tbody > tr > td {
    transition: background-color var(--motion-fast) var(--ease-out);
}

.section-tile .table > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--insp-primary) 5%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .job-item-tile,
    .section-tile,
    .widget-grid .widget-body > .card,
    .item-photos img,
    .rating-star {
        transition: none;
    }
}

.item-facts {
    font-size: var(--fs-sm);
}

.item-facts .item-fact-value {
    font-size: var(--fs-md);
}

.job-item-notes {
    flex: 1 1 100%;
    margin: 0.35rem -0.8rem -0.6rem;
    padding: 0.3rem 0.8rem 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 55%, transparent);
    border-radius: 0 0 0.55rem 0.55rem;
    background: #eef2f6;
    font-size: var(--fs-xs);
    transition: background-color var(--motion-fast) var(--ease-out);
}

.job-item-notes:hover {
    background: #e3edf6;
}

.job-item-notes > button.btn-link {
    display: block;
    width: 100%;
    text-align: left;
}

html[data-bs-theme="dark"] .job-item-notes {
    background: rgba(255, 255, 255, 0.045);
}

html[data-bs-theme="dark"] .job-item-notes:hover {
    background: rgba(120, 205, 255, 0.08);
}

html[data-bs-theme="dark"] .showcase-add {
    border-color: #4a5766;
}

html[data-bs-theme="dark"] .profile-stat .label,
html[data-bs-theme="dark"] .tile-stat .label {
    color: #9fb0c3;
}

html[data-bs-theme="dark"] .tile-stat {
    border-color: var(--insp-border);
    background: var(--tile-bg-dark, var(--insp-surface-2));
}

html[data-bs-theme="dark"] .tile-progress { --tile-accent: #f0b45e; --tile-bg-dark: #2c2418; }
html[data-bs-theme="dark"] .tile-invite   { --tile-accent: #7aa7f5; --tile-bg-dark: #1b2436; }
html[data-bs-theme="dark"] .tile-applied  { --tile-accent: #a6b4c6; --tile-bg-dark: #232830; }
html[data-bs-theme="dark"] .tile-done     { --tile-accent: #63c98a; --tile-bg-dark: #182a1e; }

html[data-bs-theme="dark"] .filter-tag {
    background: var(--insp-surface-2);
    border-color: var(--insp-border);
    color: var(--insp-text);
}

html[data-bs-theme="dark"] .filter-tag.active {
    background: var(--insp-primary);
    border-color: var(--insp-primary);
    color: #08151c;
}

html[data-bs-theme="dark"] .icon-action {
    color: #a6b4c6;
}

html[data-bs-theme="dark"] .icon-action:hover {
    background: var(--insp-surface-2);
    border-color: var(--insp-border);
    color: #f1f5f9;
}

html[data-bs-theme="dark"] .btn-action.success {
    color: #6ee7b7;
    background: rgba(25, 135, 84, 0.22);
    border-color: rgba(110, 231, 183, 0.55);
}

html[data-bs-theme="dark"] .btn-action.success:hover {
    background: rgba(25, 135, 84, 0.34);
    border-color: #6ee7b7;
    color: #d1fae5;
}

html[data-bs-theme="dark"] .btn-action.primary {
    color: #7dd3fc;
    background: rgba(0, 136, 202, 0.24);
    border-color: rgba(125, 211, 252, 0.5);
}

html[data-bs-theme="dark"] .btn-action.primary:hover {
    background: rgba(0, 136, 202, 0.36);
    border-color: #7dd3fc;
    color: #e0f2fe;
}

html[data-bs-theme="dark"] .btn-action.neutral {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(203, 213, 225, 0.4);
}

html[data-bs-theme="dark"] .btn-action.neutral:hover {
    background: rgba(148, 163, 184, 0.28);
    border-color: #cbd5e1;
    color: #f1f5f9;
}

html[data-bs-theme="dark"] .btn-action.danger {
    color: #fca5a5;
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(252, 165, 165, 0.45);
}

html[data-bs-theme="dark"] .btn-action.danger:hover {
    background: rgba(220, 53, 69, 0.32);
    border-color: #fca5a5;
    color: #fee2e2;
}

html[data-bs-theme="dark"] .copyable {
    border-bottom-color: #5a6674;
}

html[data-bs-theme="dark"] .copyable:hover {
    background: var(--insp-surface-2);
}

html[data-bs-theme="dark"] .copied-flash {
    background: #1c3b2c;
    color: #9ce0b7;
}

html[data-bs-theme="dark"] a.link-technician, html[data-bs-theme="dark"] .link-technician { color: #b69bf5; }
html[data-bs-theme="dark"] a.link-company, html[data-bs-theme="dark"] .link-company { color: #5cc6bc; }
html[data-bs-theme="dark"] a.link-project, html[data-bs-theme="dark"] .link-project { color: #f0b168; }

html[data-bs-theme="dark"] .chart-bar:hover,
html[data-bs-theme="dark"] .chart-dot:hover {
    stroke: #e5e7eb;
}

html[data-bs-theme="dark"] .markdown-page h2 { border-top-color: var(--insp-border); }
html[data-bs-theme="dark"] .markdown-page table th,
html[data-bs-theme="dark"] .markdown-page table td { border-color: var(--insp-border); }
html[data-bs-theme="dark"] .markdown-page table th { background: var(--insp-surface-2); }

html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--insp-bg), 0 0 0 0.25rem var(--insp-accent);
}

html[data-bs-theme="dark"] .top-row {
    background-color: var(--insp-surface);
    background-image: none;
    --bar-tail: var(--insp-border);
}

@media (min-width: 1200px) {
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .btn-outline-secondary,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .btn-outline-primary,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) > .filter-chip {
        color: #e8f4fb;
        border-color: rgba(255, 255, 255, 0.45);
    }

    /* Coloured outlines vanish on the blue bar, so they keep only a light tint of their colour. */
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .btn-outline-success {
        color: #bdf3d2;
        border-color: rgba(189, 243, 210, 0.6);
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .btn-outline-danger {
        color: #ffc6c6;
        border-color: rgba(255, 198, 198, 0.6);
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .text-muted {
        color: rgba(232, 244, 251, 0.8) !important;
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-select,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) select.form-select {
        color: #e8f4fb;
        border-color: rgba(255, 255, 255, 0.45);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8f4fb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-select:hover,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-select:focus,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) select.form-select:hover,
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) select.form-select:focus {
        color: var(--bs-body-color);
        background-image: var(--bs-form-select-bg-img);
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .mono-emoji {
        filter: grayscale(1) brightness(1.9);
        opacity: 0.9;
    }
}

.page-head-gear .table-gear:hover {
    color: #ffffff;
}

/* The brand bar must never shrink with the sidebar column, or its yellow rule steps off the main bar's. */
.sidebar .top-row {
    flex-shrink: 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.project-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-top: 3px solid var(--proj-accent, var(--insp-primary));
    border-radius: 0.55rem;
    padding: 0.9rem 1rem;
    transition: box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

    .project-card:hover {
        box-shadow: 0 4px 14px rgba(15, 40, 70, 0.12);
        transform: translateY(-1px);
    }

    .project-card.archived {
        opacity: 0.65;
        border-top-color: #94a3b8;
    }

.project-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--proj-accent);
    margin-top: 0.42rem;
    flex: 0 0 auto;
}

.project-name {
    font-weight: 600;
    font-size: var(--fs-md);
    text-decoration: none;
}

    .project-name:hover {
        text-decoration: underline;
    }

.project-progress {
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--insp-primary) 10%, var(--bs-secondary-bg));
    overflow: hidden;
}

    .project-progress > div {
        height: 100%;
        border-radius: 999px;
        background: var(--proj-accent, var(--insp-primary));
        transition: width var(--motion-slow) var(--ease-out);
    }

.project-facts {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

    .project-facts a {
        flex: 1 1 0;
        text-align: center;
        text-decoration: none;
        border: 1px solid color-mix(in srgb, var(--proj-accent) 25%, transparent);
        background: color-mix(in srgb, var(--proj-accent) 7%, transparent);
        border-radius: 0.45rem;
        padding: 0.35rem 0.2rem;
    }

        .project-facts a:hover {
            background: color-mix(in srgb, var(--proj-accent) 15%, transparent);
        }

    .project-facts .value {
        display: block;
        font-weight: 700;
        font-size: var(--fs-md);
        color: var(--proj-accent);
    }

    .project-facts .label {
        display: block;
        font-size: var(--fs-2xs);
        color: var(--bs-secondary-color);
    }

html[data-bs-theme="dark"] .project-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.table-scroll th {
    position: relative;
}

/* A sticky header cell is its own stacking context, so a grip reaching into the next cell is half unreachable. */
.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
}

    .col-resizer::after {
        content: "";
        position: absolute;
        top: 15%;
        bottom: 15%;
        right: 0;
        width: 2px;
        border-radius: 1px;
        background: transparent;
    }

    th:hover > .col-resizer:not(:hover, .resizing)::after {
        background: #cbd5e1;
    }

    .col-resizer:hover::after,
    .col-resizer.resizing::after {
        background: var(--insp-primary);
    }

.table-gear-cell {
    width: 1.75rem;
    text-align: right;
}

.table-gear {
    background: none;
    border: none;
    padding: 0 0.1rem;
    color: #94a3b8;
    line-height: 1;
    cursor: pointer;
}

    .table-gear:hover {
        color: var(--insp-primary);
    }

.column-chooser {
    position: absolute;
    top: 2.1rem;
    right: 0;
    z-index: 30;
    min-width: 12rem;
    border: 1px solid var(--insp-border, #dee2e6);
    border-radius: 0.6rem;
    box-shadow: 0 10px 28px rgba(14, 42, 71, 0.22);
    animation: motion-pop-in var(--motion-fast) var(--ease-out);
}

    .column-chooser > strong,
    .column-chooser strong.small {
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: var(--fs-2xs);
        color: var(--bs-secondary-color);
    }

    .column-chooser .form-check,
    .column-chooser > label {
        border-radius: 0.35rem;
        padding: 0.15rem 0.3rem 0.15rem 2.6rem;
    }

    .column-chooser .form-check-input[type="checkbox"] {
        width: 2em;
        height: 1em;
        margin-left: -2.3rem;
        border-radius: 2em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E");
        background-position: left center;
        background-repeat: no-repeat;
        transition: background-position var(--motion-fast) var(--ease-in-out);
    }

        .column-chooser .form-check-input[type="checkbox"]:checked {
            background-position: right center;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
        }

        .column-chooser .form-check:hover,
        .column-chooser > label:hover {
            background: var(--insp-surface-2, #eef2f7);
        }

    .column-chooser.widget-picker .d-flex.small {
        border-radius: 0.35rem;
        padding: 0.15rem 0.3rem;
    }

        .column-chooser.widget-picker .d-flex.small:hover {
            background: var(--insp-surface-2, #eef2f7);
        }

    .column-chooser select,
    .column-chooser input[type="text"] {
        border-radius: 0.4rem;
    }

.chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}

.modal-backdrop-soft {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(15, 23, 42, 0.35);
}

.leave-guard {
    position: fixed;
    z-index: 1051;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(30rem, calc(100vw - 2rem));
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.3);
}

th[draggable="true"] {
    cursor: grab;
}

.th-dragging {
    opacity: 0.5;
    background: var(--insp-surface-2, #e9eef4);
}

.widget-grid > .widget-caret {
    display: none;
    grid-column: span var(--w, 1);
    grid-row: span var(--h, 1);
    align-items: center;
    justify-content: center;
    padding: .5rem;
    text-align: center;
    font-weight: 600;
    color: var(--insp-primary);
    outline: 2px dashed var(--insp-primary);
    outline-offset: -2px;
    border-radius: .75rem;
    background: color-mix(in srgb, var(--insp-primary) 10%, transparent);
    pointer-events: none;
    overflow: hidden;
}

.col-narrow {
    width: 30px;
}

.page-head-gear {
    /* The box reaches back over the title to stand after it, so only the gear itself takes clicks. */
    position: fixed;
    top: 0;
    height: 3.5rem;
    display: flex;
    align-items: center;
    left: calc(164px + 1.25rem);
    padding-left: var(--gear-offset, 7rem);
    z-index: 45;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out);
}

    .page-head-gear > * {
        pointer-events: auto;
    }

    /* The active tab card sits low in the bar, so its gear follows it down. */
    main:has(.top-row-tabs) .page-head-gear {
        padding-top: .55rem;
    }

/* The cards of a section's tabs stand on the bar's bottom edge, so the title block takes the bar's full height (TopBarTitle.razor.css draws them). */
html[data-bs-theme="dark"] main > .top-row .top-row-tab {
    color: rgba(230, 237, 243, .75);
}

html[data-bs-theme="dark"] main > .top-row .top-row-tab.is-active {
    color: #e6edf3;
}

@media (min-width: 768px) {
    main > .top-row .top-row-title:has(.top-row-tabs) {
        align-self: stretch;
        display: flex;
        align-items: flex-end;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    main > .top-row .top-row-title:has(.top-row-tabs) .top-row-title-line {
        display: flex;
        align-items: flex-end;
    }
}

    .page-head-gear:hover,
    .page-head-gear:focus-within,
    .page-head-gear.open {
        opacity: 1;
    }

    .page-head-gear .column-chooser {
        top: 3rem;
        right: auto;
        left: var(--gear-offset, 7rem);
        min-width: 17rem;
        padding: .7rem .85rem !important;
    }

        .page-head-gear .column-chooser .form-switch {
            margin-bottom: .2rem;
            font-size: var(--fs-sm);
            white-space: nowrap;
        }

/* A page setting with its own choice: the label on the left, the choice on the right, on one line. */
.page-gear-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: var(--fs-sm);
    white-space: nowrap;
}

    .page-gear-row .form-select {
        width: auto;
    }

html.sidebar-collapsed .page-head-gear {
    left: calc(4rem + 2rem);
}

@media (max-width: 767.98px) {
    .page-head-gear {
        position: absolute;
        left: 0.75rem;
        padding-top: 0.75rem;
        opacity: 1;
        pointer-events: none;
    }

        .page-head-gear > * {
            pointer-events: auto;
        }

        .page-head-gear .table-gear {
            width: 1.5rem;
            height: 1.5rem;
        }

        .page-head-gear .column-chooser {
            left: 0;
            width: max-content;
            max-width: calc(100vw - 1.5rem);
        }
}

.widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: grab;
}

.dashboard-widget {
    margin-bottom: 1.5rem;
}

.widget-fill > .card {
    display: flex;
    flex-direction: column;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}

    .widget-fill .tile-grid {
        align-content: stretch;
        align-items: stretch;
        height: 100%;
        gap: 0.5rem;
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .widget-fill > .card > .d-flex {
        flex-wrap: nowrap !important;
    }

    .widget-fill > .card > .d-flex > svg {
        flex: 0 0 auto;
    }

.tile-stat.chart-key-on {
    box-shadow: 0 0 0 2px var(--tile-accent, var(--insp-primary));
}

.chart-slice.chart-key-on {
    filter: brightness(1.15);
    stroke: #fff;
    stroke-width: 1.5;
}

.dashboard-widget .widget-head .table-gear,
.dashboard-widget .widget-head .widget-remove {
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.dashboard-widget:hover .widget-head .table-gear,
.dashboard-widget:hover .widget-head .widget-remove,
.dashboard-widget:focus-within .widget-head .table-gear,
.dashboard-widget:focus-within .widget-head .widget-remove {
    opacity: 1;
}

.table-gear {
    border-radius: 50%;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
    font-size: var(--fs-md);
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
}

    .table-gear:hover,
    .page-head-gear.open .table-gear {
        background: var(--insp-surface-2, #eef2f7);
        color: var(--insp-primary);
    }

.item-info {
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    padding: 0 0.25rem 0 0;
    line-height: 1;
    cursor: pointer;
}

    .item-info:hover {
        color: var(--insp-primary);
    }

.widget-remove {
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    padding: 0 0.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
}

    .widget-remove:hover {
        color: #dc3545;
        opacity: 1;
    }

.dashboard-widget .card > svg:not([style*="width"]),
.dashboard-widget .card > div > svg:not([style*="width"]) {
    max-height: 13rem;
}

.widget-chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.widget-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--insp-border, #dee2e6);
    border-left: 3px solid var(--insp-primary, #0088CA);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--insp-primary, #0088CA) 7%, var(--insp-surface, #fff));
    font-size: var(--fs-sm);
    cursor: grab;
}

    .widget-chip:hover {
        border-color: var(--insp-primary);
    }

    .widget-chip > span.flex-fill {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .widget-chip > .chooser-grip,
    .widget-chip > .widget-chip-remove {
        flex: 0 0 auto;
    }

.widget-chip-add {
    justify-content: center;
    border-style: dashed;
    border-left: 1px dashed var(--insp-border, #dee2e6);
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    font-size: var(--fs-md);
    cursor: pointer;
    opacity: 0.8;
}

    .widget-chip-add:hover {
        opacity: 1;
        color: var(--insp-primary);
    }

.widget-chip-remove {
    border: 0;
    background: none;
    color: var(--bs-secondary-color);
    line-height: 1;
    padding: 0 0.1rem;
    cursor: pointer;
}

    .widget-chip-remove:hover {
        color: #dc3545;
    }

.widget-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    align-self: stretch;
    border: 0;
    background: none;
    padding: 0.1rem 0.3rem;
    border-radius: 0.4rem;
    text-align: left;
    color: inherit;
    cursor: grab;
}

    .widget-title:hover {
        background: var(--insp-surface-2, #eef2f7);
    }

    .widget-title:active {
        cursor: grabbing;
    }

    .widget-title h4 {
        font-size: var(--fs-md);
        font-weight: 600;
        color: var(--insp-primary-dark);
        border: 0;
        padding-bottom: 0;
    }

    .widget-title .widget-chevron {
        color: var(--bs-secondary-color);
        font-size: var(--fs-xs);
        line-height: 1;
    }

.dashboard-widget .list-group-item:hover {
    background: var(--insp-surface-2, #eef2f7);
}

        .widget-fill .tile-stat {
            padding: 0.3rem 0.55rem;
            min-height: 0;
            height: 100%;
        }

            .widget-fill .tile-stat .value {
                font-size: var(--fs-2xl);
            }

            .widget-fill .tile-stat .label {
                font-size: var(--fs-xs);
            }

@media (max-width: 991.98px) {
    .widget-fill > .card {
        height: auto;
        min-height: 0;
    }
}

.avatar-edit {
    position: relative;
    display: inline-block;
    line-height: 0;
}

    .avatar-edit .avatar-edit-action,
    .avatar-edit .avatar-edit-remove {
        position: absolute;
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        border: 1px solid var(--insp-border, #dee2e6);
        background: var(--insp-surface, #fff);
        color: inherit;
        font-size: var(--fs-sm);
        line-height: 1;
        cursor: pointer;
        opacity: 0;
        transition: opacity var(--motion-fast) var(--ease-out);
        box-shadow: 0 1px 4px rgba(14, 42, 71, 0.2);
    }

    .avatar-edit .avatar-edit-action {
        right: -0.4rem;
        bottom: -0.4rem;
    }

    .avatar-edit .avatar-edit-remove {
        right: -0.4rem;
        top: -0.4rem;
        color: #dc3545;
    }

    .avatar-edit:hover .avatar-edit-action,
    .avatar-edit:hover .avatar-edit-remove,
    .avatar-edit:focus-within .avatar-edit-action,
    .avatar-edit:focus-within .avatar-edit-remove {
        opacity: 1;
    }

    .avatar-edit .avatar-edit-action input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

@media (hover: none) {
    .avatar-edit .avatar-edit-action,
    .avatar-edit .avatar-edit-remove {
        opacity: 1;
    }
}

.avatar-edit-block {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.avatar-edit-confirm {
    display: flex;
    gap: 0.3rem;
}

.avatar-edit-error {
    max-width: 14rem;
}

.job-head-body {
    display: flex;
    gap: 0.75rem 1rem;
    align-items: flex-start;
}

    .job-head-body > .dl-facts {
        flex: 1 1 auto;
        min-width: 0;
    }

.job-head-image {
    flex: 0 0 auto;
    padding-top: 0.15rem;
}

.job-team {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}

.job-team-chip {
    position: relative;
    display: inline-flex;
}

.job-team-face {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .1rem .65rem .1rem .1rem;
    border: 0;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    line-height: 1.4;
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .job-team-face:hover,
    .job-team-face:focus-visible,
    .job-team-chip.is-open > .job-team-face {
        background: color-mix(in srgb, var(--insp-primary) 12%, var(--bs-tertiary-bg));
    }

    .job-team-face > .entity-avatar {
        transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
    }

    .job-team-face:hover > .entity-avatar,
    .job-team-face:focus-visible > .entity-avatar,
    .job-team-chip.is-open > .job-team-face > .entity-avatar {
        transform: translateY(-2px) scale(1.12);
        box-shadow: 0 0 0 2px var(--insp-primary);
    }

    .job-team-chip.is-pending > .job-team-face > .entity-avatar {
        outline: 2px dashed #d39b2a;
        outline-offset: 1px;
    }

.job-team-past > .job-team-face {
    padding-left: .65rem;
}

.job-team-meta {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.job-team-tip {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 30;
    display: none;
    min-width: 13rem;
    padding: .5rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: var(--fs-xs);
    white-space: nowrap;
    pointer-events: none;
}

    .job-team-face:hover + .job-team-tip,
    .job-team-face:focus-visible + .job-team-tip {
        display: block;
    }

    .job-team-tip > strong {
        display: block;
        font-size: var(--fs-sm);
    }

    .job-team-tip > span {
        display: block;
        color: var(--bs-secondary-color);
    }

    .job-team-tip > .job-team-link {
        color: var(--insp-link);
    }

.job-team-backdrop {
    z-index: 29;
}

.job-team-card {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    width: max-content;
    min-width: 16rem;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: .65rem .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: var(--fs-sm);
}

.job-team-card-head {
    display: flex;
    align-items: center;
    gap: .55rem;
}

    .job-team-card-head > .btn-close {
        margin-left: auto;
        align-self: flex-start;
    }

.job-team-card-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

    .job-team-card-who > a {
        font-weight: 600;
    }

.job-team-card-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .6rem;
}

.job-team-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.job-team-profile {
    align-self: flex-start;
}

.job-team-past-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.job-team-invite-card {
    flex-basis: 100%;
    margin-top: .75rem;
    padding: .6rem .7rem;
    border: 1px dashed color-mix(in srgb, var(--insp-primary) 40%, var(--bs-border-color));
    border-radius: .5rem;
}

.job-team-bar {
    display: block;
    height: 4px;
    margin: .35rem 0 .25rem;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bs-secondary-bg);
}

    .job-team-bar > span {
        display: block;
        height: 100%;
        background: var(--bs-success);
    }

.job-team-card > .job-team-bar {
    margin: 0;
}

.job-team-more {
    padding: .1rem .55rem;
    border: 0;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
}

@media (prefers-reduced-motion: reduce) {
    .job-team-face > .entity-avatar {
        transition: none;
    }
}

.job-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: .6rem 1.25rem;
    align-items: start;
}

    .job-head-split > .job-head-tags {
        grid-column: 1;
        grid-row: 1;
    }

    .job-head-split > .job-head-body {
        grid-column: 1;
        grid-row: 2;
    }

    .job-head-split > .job-when {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .job-head-split.has-wide-tags > .job-head-tags {
        grid-column: 1 / -1;
    }

    .job-head-split.has-wide-tags > .job-when {
        grid-row: 2;
    }

@media (max-width: 1199.98px) {
    .job-head-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

        .job-head-split > .job-head-tags,
        .job-head-split > .job-head-body,
        .job-head-split > .job-when,
        .job-head-split.has-wide-tags > .job-when {
            grid-column: 1;
            grid-row: auto;
        }
}

.job-head-brief:has(*) {
    margin-top: .75rem;
}

.job-head-categories .tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.job-when {
    position: relative;
    min-width: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-tertiary-bg);
}

.job-when-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    margin-bottom: .25rem;
}

    .job-when-head .job-schedule-moved {
        display: inline;
        margin: 0;
    }

section.job-when .band-action,
section.job-when .band-add,
section.job-when .head-actions-band > .head-actions-list > .band-action,
dd.job-team > .band-action {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: .1rem .5rem;
    border-left: 0;
    border-radius: .35rem;
    line-height: 1.5;
    white-space: nowrap;
}

section.job-when .head-actions-band {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 0 0 auto;
}

    section.job-when .head-actions-band > .head-actions-list {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .1rem;
    }

.job-when-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.proj-line-sum {
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.job-when-range {
    margin-right: auto;
}

.job-when-page,
.job-when-today {
    padding: 0 .4rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--insp-link);
    line-height: 1.5;
}

    .job-when-page:hover,
    .job-when-today:hover {
        background: color-mix(in srgb, var(--insp-primary) 12%, transparent);
    }

.job-strip {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 3px;
    margin: .2rem 0 .45rem;
}

@media (max-width: 575.98px) {
    .job-strip {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.job-strip-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 3.7rem;
    padding: 2px 1px 3px;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

    .job-strip-day:hover {
        border-color: var(--insp-primary);
    }

    .job-strip-day.is-weekend {
        background: color-mix(in srgb, var(--bs-body-color) 5%, var(--bs-body-bg));
    }

    .job-strip-day.is-today {
        border-color: var(--bs-success);
        color: var(--bs-body-color);
        font-weight: 700;
    }

    .job-strip-day.is-past {
        opacity: .55;
    }

    .job-strip-day.is-due {
        border-color: var(--bs-danger);
        box-shadow: inset 0 0 0 1px var(--bs-danger);
    }

    .job-strip-day.is-away {
        background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(211, 155, 42, .32) 4px 7px);
    }

    .job-strip-day.is-selected {
        outline: 2px solid var(--insp-primary);
        outline-offset: 1px;
    }

    .job-strip-day.is-drop {
        border-color: var(--insp-primary);
        background-color: color-mix(in srgb, var(--insp-primary) 16%, var(--bs-body-bg));
    }

.job-strip.is-dragging .job-strip-day.is-past {
    cursor: not-allowed;
}

.job-strip-dn {
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    line-height: 1;
}

.job-strip-due {
    color: var(--bs-danger);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1;
}

.job-strip-visit {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    line-height: 0;
    transition: transform var(--motion-fast) var(--ease-out);
}

    .job-strip-visit.is-late {
        box-shadow: 0 0 0 2px var(--bs-danger);
    }

    .job-strip-visit.has-conflict::after {
        content: "!";
        position: absolute;
        top: -5px;
        right: -6px;
        padding: 0 3px;
        border-radius: 5px;
        background: #d39b2a;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        line-height: 1.3;
    }

    .job-strip-visit.is-continued,
    .job-strip-visit.is-past {
        opacity: .55;
    }

.job-strip-due.is-movable,
.job-strip-visit.is-movable {
    cursor: grab;
}

.job-strip-due.is-movable {
    padding: 2px 6px;
    border-radius: .3rem;
}

    .job-strip-due.is-movable:hover {
        background: color-mix(in srgb, var(--bs-danger) 14%, transparent);
    }

    .job-strip-visit.is-movable:hover {
        transform: scale(1.15);
    }

.job-when-day .proj-day-head > strong::first-letter {
    text-transform: uppercase;
}

.job-when-day .proj-day-list > li {
    flex-wrap: wrap;
}

.job-when-day-due {
    color: var(--bs-danger);
    font-weight: 600;
}

.job-when-away {
    display: inline-block;
    width: 12px;
    height: 10px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(211, 155, 42, .55) 3px 5px);
}

.job-when-away-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0 0 .4rem;
    padding: 0;
    list-style: none;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

    .job-when-away-list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem;
    }

.job-when .job-schedule-list {
    gap: .3rem;
    margin-bottom: .4rem;
}

.job-when .job-schedule-visit {
    gap: .2rem .6rem;
    padding: .3rem .5rem;
    background: var(--bs-body-bg);
}

.job-when .job-schedule-who {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.job-when .job-schedule-note {
    flex: 1 1 4rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.job-when .job-schedule-visit.is-past {
    padding-block: .2rem;
}

.job-when-past-head {
    margin: 0 0 .3rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.job-when .job-schedule-links {
    gap: .15rem .9rem;
    margin-top: .15rem;
}

.job-when-tabs {
    display: flex;
    gap: .1rem;
    margin: .3rem 0 .45rem;
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

.job-when-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .3rem;
    margin-bottom: -1px;
    padding: .25rem .7rem;
    border: 1px solid transparent;
    border-radius: .45rem .45rem 0 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

    .job-when-tab:hover {
        color: var(--bs-body-color);
    }

    .job-when-tab.is-active {
        border-color: var(--bs-border-color);
        border-top: 2px solid var(--insp-primary);
        border-bottom-color: var(--bs-tertiary-bg);
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

.job-when-tab-count {
    padding: 0 .4rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.5;
}

    .job-when-tab-count.has-alert {
        background: color-mix(in srgb, #d39b2a 24%, transparent);
        color: var(--bs-warning-text-emphasis);
    }

.job-when-stage {
    position: relative;
}

/* Fixed height, so switching tabs never moves the page. */
.job-when-body {
    height: 11.6rem;
}

    .job-when-body:not(.is-pas) {
        overflow-y: auto;
        scrollbar-width: thin;
    }

.job-when-pop {
    position: absolute;
    top: -.2rem;
    right: 0;
    left: 0;
    z-index: 31;
}

    .job-when .job-when-pop .visit-editor {
        margin: 0;
        border: 1px solid var(--bs-border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }

.job-when-axis {
    margin-top: 0;
}

    .job-when-axis .is-muted {
        opacity: .62;
    }

.proj-flag.job-when-due-flag {
    border-color: var(--bs-danger);
    background: var(--bs-danger);
    color: #fff;
}

    .proj-flag.job-when-due-flag.is-movable {
        cursor: grab;
    }

.is-due-flag > .proj-flag-label {
    color: var(--bs-danger-text-emphasis);
    font-weight: 700;
}

.job-when-strip {
    position: relative;
    grid-template-columns: repeat(21, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 0;
}

    .job-when-strip .job-strip-day {
        min-height: 3.5rem;
        padding: 2px 0 3px;
    }

    .job-when-strip .job-strip-due {
        display: none;
    }

.job-when-day .proj-flag {
    width: 1.3rem;
    height: 1.3rem;
    border-width: 2px;
}

.job-when-rules-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .4rem;
    margin-bottom: .25rem;
    font-size: var(--fs-xs);
}

    .job-when-rules-sub.is-sent {
        margin-top: .4rem;
        padding-top: .35rem;
        border-top: 1px solid var(--bs-border-color);
    }

.job-when-bells {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 0 .2rem;
    padding: 0;
    list-style: none;
}

    .job-when-bells > li {
        display: grid;
        grid-template-columns: 3.2rem minmax(0, 1fr);
        gap: .5rem;
        font-size: var(--fs-xs);
    }

        .job-when-bells > li.is-sent {
            opacity: .8;
        }

.job-when-bell-when {
    display: flex;
    flex-direction: column;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

    .job-when-bell-when > strong {
        color: var(--bs-body-color);
    }

.job-when-ms {
    width: 100%;
    margin-bottom: .35rem;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

    .job-when-ms th {
        padding: .15rem .4rem;
        border-bottom: 1px solid var(--bs-border-color);
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .job-when-ms td {
        padding: .28rem .4rem;
        border-bottom: 1px dashed var(--bs-border-color);
        vertical-align: middle;
    }

    .job-when-ms tr.is-target td {
        border-top: 2px solid var(--bs-border-color);
        border-bottom: 0;
    }

    .job-when-ms tr.is-closed {
        color: var(--bs-secondary-color);
    }

    .job-when-ms .proj-flag {
        width: 1.4rem;
        height: 1.4rem;
        border-width: 2px;
    }

.job-when-ms-day {
    white-space: nowrap;
}

    .job-when-ms-day > strong,
    .job-when-ms-day > small {
        display: block;
        line-height: 1.2;
    }

    .job-when-ms-day > small {
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
    }

.job-when-ms-title {
    width: 100%;
}

.job-when-standing {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    white-space: nowrap;
}

    .job-when-standing.is-done {
        background: color-mix(in srgb, var(--bs-success) 18%, transparent);
        color: var(--bs-success-text-emphasis);
    }

    .job-when-standing.is-ok {
        background: color-mix(in srgb, var(--insp-primary) 16%, transparent);
        color: var(--insp-link);
    }

    .job-when-standing.is-risk {
        background: color-mix(in srgb, var(--bs-danger) 16%, transparent);
        color: var(--bs-danger-text-emphasis);
    }

@media (max-width: 575.98px) {
    .job-when-strip {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

        .job-when-strip .job-strip-due {
            display: inline;
        }

    .job-when-axis {
        display: none;
    }

    .job-when-body {
        height: auto;
        max-height: 26rem;
    }

    .job-when-tab {
        padding: .25rem .45rem;
        font-size: var(--fs-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-strip-visit {
        transition: none;
    }
}

.job-head-settings {
    margin-top: .75rem;
    padding-top: .25rem;
    border-top: 1px solid var(--bs-border-color);
}

.job-image-fallback {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: var(--fs-xs, 0.78rem);
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .job-head-body {
        flex-direction: column;
    }
}

.settings-avatar-color {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.online-dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg, #ced4da);
    border: 1px solid rgba(0, 0, 0, 0.18);
    vertical-align: middle;
}

.online-dot.on {
    background: #22c55e;
    border-color: rgba(34, 197, 94, 0.6);
    animation: online-pulse 2.2s ease-out infinite;
}

@keyframes online-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    }

    70% {
        box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .online-dot.on {
        animation: none;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    }
}

html[data-bs-theme="dark"] .online-dot {
    background: #4b5563;
    border-color: rgba(255, 255, 255, 0.25);
}

.support-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.35rem 1rem;
}

.log-view {
    max-height: 65vh;
    overflow: auto;
    border: 1px solid var(--insp-border, #dee2e6);
    border-radius: 6px;
    font-size: var(--fs-sm);
}

/* Each rail segment bleeds into the row padding, so the segments join across rows. */
.log-day,
.log-line {
    display: grid;
    grid-template-columns: 4.6rem 1.1rem minmax(0, 1fr);
    column-gap: 0.5rem;
    padding: 0.3rem 0.75rem 0.3rem 0.6rem;
}

.log-day {
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    font-weight: 600;
    color: var(--insp-primary-dark, inherit);
    background: var(--insp-surface-2, #eef2f7);
    border-bottom: 1px solid var(--insp-border, #dee2e6);
}

    .log-day::before {
        content: "";
    }

.log-day-mark {
    position: relative;
    align-self: stretch;
}

    .log-day-mark::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 11px;
        height: 11px;
        border-radius: 50%;
        border: 2px solid var(--insp-primary);
        background: var(--bs-body-bg, #fff);
    }

.log-line {
    align-items: baseline;
}

    .log-line:hover {
        background: var(--insp-surface-2, #eef2f7);
    }

    .log-line.log-error {
        background: color-mix(in srgb, #dc3545 7%, transparent);
    }

    .log-line.log-warning {
        background: color-mix(in srgb, #f59e0b 8%, transparent);
    }

    .log-line.log-error:hover {
        background: color-mix(in srgb, #dc3545 13%, transparent);
    }

    .log-line.log-warning:hover {
        background: color-mix(in srgb, #f59e0b 14%, transparent);
    }

    .log-line.log-plain {
        color: var(--bs-secondary-color);
    }

.log-dot {
    position: relative;
    align-self: stretch;
    min-height: 1.2rem;
}

    .log-dot::before {
        content: "";
        position: absolute;
        left: 50%;
        top: -0.3rem;
        bottom: -0.3rem;
        width: 2px;
        margin-left: -1px;
        background: color-mix(in srgb, var(--insp-primary) 18%, var(--insp-border, #dee2e6));
    }

    .log-dot::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0.4rem;
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        border-radius: 50%;
        background: var(--bs-secondary-color);
        box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
    }

.log-line.log-info .log-dot::after {
    background: var(--insp-primary);
}

.log-line.log-warning .log-dot::after {
    background: #f59e0b;
}

.log-line.log-error .log-dot::after {
    background: #dc3545;
    box-shadow: 0 0 0 2px var(--bs-body-bg, #fff), 0 0 7px rgba(220, 53, 69, 0.55);
}

.log-line.log-plain .log-dot::after {
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: transparent;
    border: 2px solid var(--insp-border, #dee2e6);
}

.log-time {
    font-family: var(--bs-font-monospace);
    color: var(--bs-secondary-color);
    white-space: nowrap;
    text-align: right;
}

.log-level {
    min-width: 42px;
}

.log-content {
    min-width: 0;
}

    .log-content summary {
        cursor: pointer;
    }

.log-message {
    font-family: var(--bs-font-monospace);
    white-space: pre-wrap;
    word-break: break-word;
}

.log-details {
    background: var(--insp-surface-2, #eef2f7);
    padding: 0.5rem;
    margin: 0.25rem 0 0;
    font-size: var(--fs-xs);
    border-radius: 4px;
}

.row-expanded > td,
.row-detail > td {
    background: var(--insp-surface-2, #eef2f7);
}

.row-expanded > td {
    border-top: 2px solid var(--insp-primary);
    border-bottom: 0;
}

.row-detail > td {
    border-bottom: 2px solid var(--insp-primary);
    padding-top: 0.25rem;
}

    .row-expanded > td:first-child,
    .row-detail > td:first-child {
        border-left: 2px solid var(--insp-primary);
    }

    .row-expanded > td:last-child,
    .row-detail > td:last-child {
        border-right: 2px solid var(--insp-primary);
    }

.row-link {
    cursor: pointer;
}

    .row-link .no-row-link {
        cursor: auto;
    }

.table > tbody > tr.row-link > * {
    transition: box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.table > tbody > tr.row-link:is(:hover, :focus-within) > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--bs-table-hover-bg);
}

.column-chooser.widget-settings {
    top: 2rem;
    min-width: 14rem;
    max-height: min(75vh, 34rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

.column-chooser.widget-picker {
    min-width: 17rem;
    max-width: min(24rem, calc(100vw - 2rem));
}

.widget-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--insp-primary);
    min-width: 6px;
    opacity: 0.85;
    transition: opacity var(--motion-fast) var(--ease-out);
}

a:hover .widget-bar {
    opacity: 1;
}

.widget-bar-technician {
    background: #6f42c1;
}

.item-todo {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-width: 16rem;
}

.item-todo-row {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: start;
    gap: .25rem .5rem;
}

.item-todo-controls {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

    .item-todo-controls > input.form-control {
        flex: 1 1 6rem;
        min-width: 5.5rem;
        max-width: 10rem;
    }

.item-todo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin-top: .45rem;
}

.item-todo:has(.item-todo-row) + .item-todo-actions {
    padding-left: 1.5rem;
}

.item-todo-mark {
    width: 1rem;
    flex: 0 0 1rem;
    text-align: center;
    font-weight: 700;
    color: #7a5c00;
}

.item-todo-mark.done {
    color: #1b5e38;
}

.item-todo-text {
    flex: 1 1 8rem;
    line-height: 1.15;
}

[data-bs-theme="dark"] .item-todo-mark {
    color: #f0c869;
}

[data-bs-theme="dark"] .item-todo-mark.done {
    color: #7ddba6;
}

.job-form-section {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: 1rem;
}

.job-form-step {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}

.job-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

.item-photos {
    background: #eef6fb;
    border-radius: 8px;
    padding: .45rem .6rem .3rem;
    align-self: flex-start;
}

html[data-bs-theme="dark"] .item-photos {
    background: #1d2b36;
}

.section-tile {
    border: 1px solid #dbe3ec;
    border-radius: 0.6rem;
    background: #fbfcfe;
    padding: 0.4rem 0.55rem 0.45rem;
    margin: 0.7rem 0;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

    .section-tile:hover {
        border-color: color-mix(in srgb, var(--insp-primary) 45%, #dbe3ec);
        box-shadow: 0 2px 10px rgba(14, 42, 71, 0.10);
    }

html[data-bs-theme="dark"] .section-tile:hover {
    border-color: color-mix(in srgb, var(--insp-primary) 55%, var(--insp-border));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

    .section-tile > :last-child {
        margin-bottom: 0;
    }

    .section-tile .table-scroll,
    .section-tile .table {
        margin-bottom: 0;
    }

    .section-tile .table > tbody > tr:last-child > td {
        border-bottom: 0;
    }

html[data-bs-theme="dark"] .section-tile {
    border-color: var(--insp-border);
    background: color-mix(in srgb, var(--insp-surface-2) 45%, transparent);
}

.section-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 .5rem;
}

.section-tile > .section-head {
    --band-pad-y: 0.3rem;
    --band-pad-x: 0.55rem;
    margin: -0.4rem -0.55rem 0.4rem;
    padding: var(--band-pad-y) var(--band-pad-x);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--tile-head-bg, color-mix(in srgb, var(--insp-primary) 4%, var(--bs-body-bg, #fff)));
    border-bottom: 1px solid var(--tile-head-border, color-mix(in srgb, var(--insp-primary) 10%, var(--bs-border-color, #dee2e6)));
    transition: margin-bottom var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out),
                border-radius var(--motion-base) var(--ease-out);
}

    .section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) {
        margin-bottom: -0.45rem;
        border-bottom-color: transparent;
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }

.section-body {
    display: flow-root;
}

    .section-body:empty {
        display: none;
    }

    .section-body > :last-child {
        margin-bottom: 0;
    }

.section-summary {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--insp-primary) 9%, transparent);
    color: var(--bs-secondary-color, #6c757d);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.section-head-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.job-history li {
    position: relative;
    padding: 0.12rem 0 0.12rem 1rem;
}

.job-history li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--insp-primary);
    opacity: 0.55;
}

.section-head.expanded {
    margin-bottom: .75rem;
}

.section-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.section-toggle:hover .section-title {
    text-decoration: underline;
}

.section-toggle.inactive {
    opacity: .55;
    cursor: default;
}

.section-toggle.inactive:hover .section-title {
    text-decoration: none;
}

.section-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--insp-primary-dark);
}

.tile-heading {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--insp-primary-dark);
}

.card > .tile-head-band,
.section-tile > .tile-head-band {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background: var(--tile-head-bg, color-mix(in srgb, var(--insp-primary) 4%, var(--bs-body-bg, #fff)));
    border-bottom: 1px solid var(--tile-head-border, color-mix(in srgb, var(--insp-primary) 10%, var(--bs-border-color, #dee2e6)));
}

.card > .tile-head-band {
    --band-pad-y: 0.35rem;
    --band-pad-x: 1rem;
    margin: -1rem -1rem 0.5rem;
    padding: var(--band-pad-y) var(--band-pad-x);
}

.section-tile > .tile-head-band {
    --band-pad-y: 0.3rem;
    --band-pad-x: 0.55rem;
    margin: -0.4rem -0.55rem 0.4rem;
    padding: var(--band-pad-y) var(--band-pad-x);
}

.band-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: stretch;
    min-width: 10.5rem;
    justify-content: center;
    padding: 0 0.85rem;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--insp-primary) 14%, var(--bs-border-color, #dee2e6));
    border-top-right-radius: inherit;
    background: none;
    color: var(--insp-primary);
    font-size: var(--fs-sm);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .band-action:hover {
        background: color-mix(in srgb, var(--insp-primary) 12%, transparent);
        color: var(--insp-primary-dark);
    }

.tile-head-band > .band-action,
.job-item-head > .band-action {
    margin: calc(-1 * var(--band-pad-y, 0.3rem)) calc(-1 * var(--band-pad-x, 0.55rem))
            calc(-1 * var(--band-pad-y, 0.3rem)) auto;
}

/* CollapsibleSection wraps its header fragment, so the wrapper itself becomes the stretched end segment. */
.section-head > .section-head-tools:has(> .band-action, > .head-actions-band) {
    align-self: stretch;
    align-items: stretch;
    flex-wrap: nowrap;
    margin: calc(-1 * var(--band-pad-y, 0.3rem)) calc(-1 * var(--band-pad-x, 0.55rem))
            calc(-1 * var(--band-pad-y, 0.3rem)) auto;
    border-top-right-radius: inherit;
}

    .section-head-tools:has(> .band-action, > .head-actions-band) > :not(.band-action, .head-actions-band) {
        align-self: center;
    }

.section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) > .section-head-tools,
.section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) > .section-head-tools > .band-action:last-child,
.section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) > .section-head-tools > .head-actions-band,
.section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) > .section-head-tools > .head-actions-band > :is(.head-actions-list, .head-actions-more),
.section-tile > .section-head:is(:last-child, :not(.expanded), :has(+ .section-body:empty)) > .section-head-tools > .head-actions-band > .head-actions-list > .band-action:last-child {
    border-bottom-right-radius: inherit;
}

.tile-head-band > .band-heading {
    display: flex;
    flex: 1 1 8rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.5rem;
    min-width: 0;
}

.section-head > .section-head-tools:has(> .head-actions-band),
.head-actions-band,
.head-actions-band > .head-actions-list {
    min-width: 0;
}

.tile-head-band > .head-actions-band {
    margin: calc(-1 * var(--band-pad-y, 0.3rem)) calc(-1 * var(--band-pad-x, 0.55rem))
            calc(-1 * var(--band-pad-y, 0.3rem)) auto;
}

.head-actions-band,
.head-actions-band > .head-actions-list {
    align-self: stretch;
    align-items: stretch;
    border-top-right-radius: inherit;
}

    .head-actions-band > .head-actions-list {
        gap: 0;
    }

        .head-actions-band > .head-actions-list > .band-action:not(:last-child) {
            border-top-right-radius: 0;
        }

        .head-actions-band[data-collapsed]:not([data-measure]) > .head-actions-list > .band-action {
            min-height: 2.25rem;
            justify-content: flex-start;
            border-left: 0;
            border-radius: 0.4rem;
        }

.band-action.danger {
    color: var(--bs-danger, #dc3545);
}

    .band-action.danger:is(:hover, [aria-expanded="true"]) {
        background: color-mix(in srgb, var(--bs-danger, #dc3545) 10%, transparent);
        color: var(--bs-danger-text-emphasis, #b02a37);
    }

@media (max-width: 575.98px) {
    .tile-head-band > .head-actions-band,
    .section-tile > .section-head > .section-head-tools:has(> .head-actions-band) {
        flex: 1 1 100%;
        max-width: none;
        margin: 0 calc(-1 * var(--band-pad-x, 0.55rem)) calc(-1 * var(--band-pad-y, 0.3rem));
        border-top: 1px solid color-mix(in srgb, var(--insp-primary) 12%, var(--bs-border-color, #dee2e6));
        border-top-right-radius: 0;
    }

    .section-head-tools > .head-actions-band {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .head-actions-band:not([data-collapsed], [data-measure]) > .head-actions-list {
        flex: 1 1 auto;
    }

        .head-actions-band:not([data-collapsed], [data-measure]) > .head-actions-list > .band-action {
            flex: 1 1 0;
            min-height: 2rem;
            border-top-right-radius: 0;
        }

            .head-actions-band:not([data-collapsed]) > .head-actions-list > .band-action:first-child {
                border-left: 0;
            }

    .head-actions-band[data-measure] > .head-actions-list {
        width: min-content !important;
    }

    .head-actions-band:is(:not([data-collapsed]), [data-measure]) > .head-actions-list > .band-action {
        padding: 0.3rem 0.5rem;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    .head-actions-band > .head-actions-more {
        min-height: 2rem;
        margin-left: auto;
        border-top-right-radius: 0;
    }
}

    .tile-heading .tile-heading-meta {
        font-size: var(--fs-xs);
        font-weight: 400;
        color: var(--bs-secondary-color, #6c757d);
    }

    .tile-heading .section-add {
        font-size: var(--fs-sm);
        font-weight: 400;
    }

.section-chevron {
    font-size: var(--fs-xs);
    line-height: 1;
    color: var(--bs-secondary-color);
}

.job-waiting {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    border-left: 4px solid #0dcaf0;
    background: rgba(13, 202, 240, .08);
    border-radius: .375rem;
    padding: .625rem .875rem;
    margin-bottom: 1rem;
}

.profile-stat .hidden-value {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--bs-secondary-color);
}

a.profile-stat.stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.profile-stat.stat-link:hover {
    border-color: var(--bs-primary);
}

@media (max-width: 767.98px) {
    .theme-lang-row {
        padding: 0.25rem 1rem 0.9rem;
    }

    .sidebar .nav-scrollable .nav-link {
        height: 2.4rem !important;
        line-height: 2.4rem !important;
    }

    .sidebar .nav-scrollable .nav-item {
        padding-bottom: 0.35rem;
    }

    main .top-row,
    main article.content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .table-scroll th,
    .table-scroll td {
        white-space: nowrap;
    }
}

.slot-tile {
    position: relative;
    width: 200px;
    padding: 0.5rem 0.65rem;
    border: 1px solid #dbe4ec;
    border-radius: 8px;
    background: #f1f5f9;
}

    .slot-tile.pending {
        background: #fff8e1;
        border-color: #ecd98a;
    }

button.slot-tile.free {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 4.6rem;
    border: 1.5px dashed #9fb3c8;
    background: transparent;
    color: #4a6a8a;
    font-size: var(--fs-xs);
}

    button.slot-tile.free .plus {
        font-size: var(--fs-xl);
        line-height: 1;
    }

    button.slot-tile.free:hover {
        background: rgba(13, 110, 253, 0.06);
        border-color: var(--insp-primary-dark, #0d6efd);
        color: var(--insp-primary-dark, #0d6efd);
    }

html[data-bs-theme="dark"] .slot-tile {
    background: var(--insp-surface-2, #1d2b36);
    border-color: #33475a;
}

html[data-bs-theme="dark"] .slot-tile.pending {
    background: #38311c;
    border-color: #6b5d2a;
}

html[data-bs-theme="dark"] button.slot-tile.free {
    background: transparent;
    color: #9fb0c3;
    border-color: #4a6076;
}

.slot-dots {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}

.slot-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #8aa2b8;
    display: inline-block;
}

    .slot-dot.on {
        background: #198754;
        border-color: #198754;
    }

    .slot-dot.pending {
        background: #f5c542;
        border-color: #d9a520;
    }

.page-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

@media (max-width: 767.98px) {
    .page-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .page-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

.page-tab {
    border: none;
    background: none;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

    .page-tab:hover {
        color: var(--insp-primary-dark, #0d6efd);
    }

    .page-tab.active {
        color: var(--insp-text, #1f2937);
        border-bottom-color: var(--insp-yellow, #ffed36);
    }

html[data-bs-theme="dark"] .page-tab.active {
    color: #fff;
}

.jobs-map-widget .map-breakdown .category-breakdown,
.tech-map-widget .map-breakdown .category-breakdown,
.jobs-map-widget .map-breakdown .category-breakdown.category-callout,
.tech-map-widget .map-breakdown .category-breakdown.category-callout {
    min-width: 0;
    margin-inline: auto;
}

@container breakdown (max-width: 1099px) {
    .jobs-map-widget .map-breakdown-map,
    .tech-map-widget .map-breakdown-map {
        min-width: 0;
    }

    .jobs-map-widget .map-breakdown .category-breakdown.category-callout,
    .tech-map-widget .map-breakdown .category-breakdown.category-callout {
        flex: 1.25 1 0%;
    }
}

@container breakdown (max-width: 959px) {
    .jobs-map-widget .map-breakdown-map,
    .tech-map-widget .map-breakdown-map,
    .jobs-map-widget .map-breakdown .category-breakdown,
    .tech-map-widget .map-breakdown .category-breakdown,
    .jobs-map-widget .map-breakdown .category-breakdown.category-callout,
    .tech-map-widget .map-breakdown .category-breakdown.category-callout {
        flex: 1 1 100%;
    }

    .jobs-map-widget .map-breakdown-map,
    .tech-map-widget .map-breakdown-map {
        max-width: 620px;
        margin-inline: auto;
    }

    .jobs-map-widget .map-breakdown .category-breakdown.category-callout,
    .tech-map-widget .map-breakdown .category-breakdown.category-callout {
        max-width: 820px;
    }
}

.map-breakdown {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    container: breakdown / inline-size;
}

.map-breakdown-map {
    flex: 1 1 0%;
    min-width: min(380px, 100%);
    align-self: center;
}

.map-breakdown .category-breakdown {
    flex: 1 1 0%;
    min-width: min(430px, 100%);
    gap: .875rem;
    flex-direction: row-reverse;
    align-items: center;
    align-self: center;
}

    .map-breakdown .category-donut svg {
        display: block;
    }

.map-breakdown .category-donut {
        flex: 1 1 0%;
        min-width: min(190px, 100%);
        max-width: 30vw;
        padding-right: 9.8%;
    }

    .map-breakdown .category-breakdown .legend-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
        flex: 0 1 17vw;
        min-width: min(220px, 100%);
    }

    .map-breakdown .legend-tile {
        padding: .55rem .7rem;
    }

        .map-breakdown .legend-tile .value {
            font-size: clamp(1.35rem, .95rem + .55vw, 2.4rem);
        }

        .map-breakdown .legend-tile .label {
            font-size: clamp(.78rem, .68rem + .12vw, 1.05rem);
        }

.category-breakdown.category-callout,
.map-breakdown .category-breakdown.category-callout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) minmax(150px, min(26cqw, 320px)) minmax(7.5rem, max-content);
    justify-content: center;
    gap: 1rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding-block: 1rem;
}

.category-callout .callout-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    margin: -1rem 0;
    gap: 1rem;
    min-width: 0;
    z-index: 1;
}

.category-callout .callout-col:has(> :only-child) {
    justify-content: center;
    margin: 0;
}

.category-callout .legend-tile {
    background: var(--bs-body-bg);
}

.category-callout .category-donut,
.map-breakdown .category-breakdown.category-callout .category-donut {
    width: 100%;
    flex: none;
    padding-right: 0;
    max-width: none;
    min-width: 150px;
    display: flex;
    justify-content: center;
}

.category-callout .category-donut svg {
    width: 100%;
    max-width: clamp(180px, 26cqw, 320px);
    height: auto;
}

.callout-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    overflow-anchor: none;
}

.callout-line {
    fill: none;
    stroke-width: 1.5;
    opacity: .5;
    transition: opacity var(--motion-base) var(--ease-out), stroke-width var(--motion-base) var(--ease-out),
        stroke-dashoffset var(--motion-emphasis) var(--ease-in-out);
}

.callout-line.chart-key-on {
    opacity: 1;
    stroke-width: 2.5;
    stroke-dasharray: 7 5;
    animation: callout-dash .5s linear infinite;
    filter: drop-shadow(0 0 3px currentColor);
}

.callout-line.chart-key-dim {
    opacity: .1;
}

.category-callout .legend-tile.chart-key-dim {
    opacity: .45;
}

@keyframes callout-dash {
    to { stroke-dashoffset: -12; }
}

@media (max-width: 991.98px) {
    .category-callout { grid-template-columns: minmax(0, 1fr); }
    .callout-lines { display: none; }
}

.category-callout .callout-grid,
.category-callout .category-donut svg.donut-ranked {
    display: none;
}

/* Without room for the callout its two columns would orphan, so one grid of equal tiles takes over. */
@container breakdown (max-width: 1099px) {
    .map-breakdown .category-breakdown.category-callout {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding-block: 0;
        --cols: var(--cols-3);
        --lone: var(--lone-3);
    }

    .map-breakdown .category-callout .callout-col,
    .map-breakdown .category-callout .callout-lines,
    .map-breakdown .category-callout .category-donut svg.donut-arcs {
        display: none;
    }

    .map-breakdown .category-callout .category-donut svg.donut-ranked {
        display: block;
        max-width: none;
    }

    .map-breakdown .category-breakdown.category-callout .category-donut {
        flex: 0 0 clamp(140px, 15cqw, 210px);
        width: auto;
        min-width: 0;
    }

    .map-breakdown .category-callout .callout-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem;
        flex: 1 1 0%;
        min-width: 0;
    }

        .map-breakdown .category-callout .callout-grid > .legend-tile {
            flex: 0 0 calc((100% - (var(--cols) - 1) * .5rem) / var(--cols));
            min-width: 0;
            justify-content: center;
            padding-inline: .5rem;
        }

        .map-breakdown .category-callout .callout-grid > .legend-tile:last-child {
            flex-grow: var(--lone);
        }
}

@container breakdown (max-width: 959px) {
    .map-breakdown .category-breakdown.category-callout {
        --cols: var(--cols-4);
        --lone: var(--lone-4);
    }

    .map-breakdown .category-breakdown.category-callout .category-donut {
        flex-basis: clamp(150px, 26cqw, 220px);
    }
}

@container breakdown (max-width: 559px) {
    .map-breakdown .category-breakdown.category-callout {
        flex-direction: column;
        --cols: var(--cols-3);
        --lone: var(--lone-3);
    }

    .map-breakdown .category-breakdown.category-callout .category-donut {
        flex: none;
        width: min(220px, 62cqw);
    }

    .map-breakdown .category-callout .callout-grid {
        flex: none;
        width: 100%;
    }
}

@container breakdown (max-width: 419px) {
    .map-breakdown .category-breakdown.category-callout {
        --cols: var(--cols-2);
        --lone: var(--lone-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .callout-line { transition: none; }
    .callout-line.chart-key-on { animation: none; }
}

.dl-facts {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: baseline;
}

.dl-facts dt {
    font-weight: 600;
}

.dl-facts dd {
    margin-bottom: .25rem;
}

dd .badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
}

.multiline-text {
    white-space: pre-line;
    overflow-wrap: break-word;
}

.platform-map-layout {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1200px) {
    .platform-map-layout {
        flex-direction: row-reverse;
        gap: 1rem;
        align-items: flex-start;
    }

    .platform-map-main {
        flex: 1 1 0;
        min-width: 0;
    }

    .platform-map-side {
        flex: 0 0 clamp(460px, 46%, 760px);
        min-width: 0;
        position: sticky;
        top: 4.25rem;
    }
}

.outage-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .5rem;
    padding: .5rem 1.5rem;
    font-size: var(--fs-sm);
    background: color-mix(in srgb, #f59e0b 16%, var(--bs-body-bg));
    border-bottom: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
}

.outage-banner.outage-ongoing {
    background: color-mix(in srgb, #dc3545 14%, var(--bs-body-bg));
    border-bottom-color: color-mix(in srgb, #dc3545 45%, transparent);
}

.outage-banner .outage-text {
    color: color-mix(in srgb, currentColor 75%, transparent);
}

.date-range-field {
    flex-wrap: wrap;
    min-width: 0;
}

.date-range-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.date-range-field .date-range-input {
    width: 165px;
}

/* Two fixed 165px date inputs cannot share a fold-narrow row, so the pair wraps. */
@media (max-width: 575.98px) {
    .date-range-pair {
        flex: 1 1 12rem;
    }

    .date-range-field .date-range-input {
        width: 9rem;
        flex: 1 1 9rem;
        min-width: 9rem;
    }
}

@media (max-width: 575.98px) {
    .dl-facts {
        grid-template-columns: minmax(4.6rem, max-content) minmax(0, 1fr);
        column-gap: 0.75rem;
    }

    .dl-facts dt {
        font-size: var(--fs-xs);
    }
}

@media (max-width: 991.98px) {
    .project-head { flex-wrap: wrap; }
    .project-head .dl-facts { min-width: 12rem; }
}

.region-map .job-dot {
    cursor: pointer;
}

.region-map .job-dot-core {
    fill: var(--dot, #0d6efd);
    stroke: #fff;
    stroke-width: 1.3;
}

.region-map .job-dot-pulse {
    fill: none;
    stroke: var(--dot, #0d6efd);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: job-dot-pulse 2.4s ease-out infinite;
}

@keyframes job-dot-pulse {
    0% { transform: scale(.55); opacity: .85; }
    70%, 100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .region-map .job-dot-pulse { animation: none; }
}

.region-map .job-dot.outside .job-dot-core {
    opacity: .35;
}

.region-map .job-dot-approx {
    fill: color-mix(in srgb, var(--dot, #0d6efd) 28%, transparent);
    stroke: var(--dot, #0d6efd);
    stroke-width: 1.4;
    stroke-dasharray: 3 2.5;
}

.region-map .job-dot.outside .job-dot-approx {
    opacity: .35;
}

.region-map .job-dot.is-approx:hover .job-dot-approx,
.region-map .job-dot.is-approx.chart-key-on .job-dot-approx {
    fill: color-mix(in srgb, var(--dot, #0d6efd) 50%, transparent);
    stroke-width: 2;
}

.region-map .job-dot:hover .job-dot-core,
.region-map .job-dot.chart-key-on .job-dot-core {
    r: 6.5;
    stroke-width: 2;
}

.region-map .job-dot.chart-key-dim {
    opacity: .15;
}

.region-map .region.chart-key-dim {
    opacity: .45;
}

.region-map-wrap {
    --region-accent: #0088CA;
    --region-base: #e6edf5;
    --region-empty: #f2f4f7;
    --region-edge: #9fb4cb;
    --region-label: #12304a;
    --area-halo: rgba(255, 255, 255, .85);
    --region-hatch: rgba(255, 255, 255, .8);
    --region-hatch-empty: rgba(20, 45, 75, .3);
}

.region-map {
    width: 100%;
}

.region-map {
    -webkit-user-select: none;
    user-select: none;
}

:where(.map-breakdown .map-breakdown-map) .region-map svg {
    max-width: min(100%, 860px);
    margin: 0 auto;
}

.region-map svg {
    display: block;
    width: 100%;
    max-width: calc(min(78vh, 520px) * var(--map-aspect, 1.72));
    height: auto;
    margin: 0 auto;
    --map-outline: color-mix(in srgb, var(--insp-primary) 78%, var(--bs-border-color, #dee2e6));
    filter: drop-shadow(1px 0 0 var(--map-outline)) drop-shadow(-1px 0 0 var(--map-outline))
            drop-shadow(0 1px 0 var(--map-outline)) drop-shadow(0 -1px 0 var(--map-outline));
    overflow: hidden;
}

.region-base path {
    fill: var(--region-base);
    stroke: none;
}

.region {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}

.region-shape {
    fill: var(--region-accent);
    fill-opacity: 0;
    stroke: var(--region-edge);
    stroke-width: 1.6;
    transition: fill-opacity var(--motion-fast) var(--ease-out), stroke-width var(--motion-fast) var(--ease-out), stroke var(--motion-fast) var(--ease-out);
}

.region.empty .region-shape {
    fill: var(--region-empty);
    fill-opacity: 1;
}

.region:hover {
    transform: translateY(-4px) scale(1.015);
}

.region:hover .region-shape {
    fill-opacity: 1;
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 3px 3px rgba(9, 30, 55, .38));
    animation: region-pulse 1.5s ease-in-out infinite;
}

.region.empty:hover .region-shape {
    fill-opacity: 1;
    stroke: var(--region-accent);
}

@keyframes region-pulse {
    0%, 100% { stroke-width: 2.4; stroke-opacity: .9; }
    50%      { stroke-width: 4.2; stroke-opacity: 1; }
}

.region-edge-top {
    fill: none;
    stroke: transparent;
    stroke-width: 3;
    pointer-events: none;
    transition: stroke var(--motion-fast) var(--ease-out);
}

    .region-edge-top.chart-key-on {
        stroke: #ffffff;
        animation: region-pulse 1.5s ease-in-out infinite;
    }

    .region-edge-top.empty.chart-key-on {
        stroke: var(--region-accent);
    }

.region.selected .region-shape {
    stroke: #ffb020;
    stroke-width: 3.2;
}

.region.selected .region-shape {
    filter: drop-shadow(0 0 5px rgba(255, 176, 32, .65));
}

.region.highlight .region-shape {
    stroke: #ffffff;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .75));
}

.region.highlight .region-hatch {
    opacity: .7;
}

.area-scan.highlight .area-halo {
    stroke-width: 10;
}

.area-scan.highlight .area-fill {
    fill-opacity: .3;
}

.area-scan.highlight .area-ring {
    stroke-width: 5;
    filter: drop-shadow(0 0 10px var(--area-color));
}

.region-count {
    font-size: 26px;
    font-weight: 600;
    fill: var(--region-label);
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: var(--region-base);
    stroke-width: 4;
    pointer-events: none;
    user-select: none;
}

.region.empty .region-count {
    fill: #6b7787;
    font-weight: 400;
}

.region-name {
    font-size: 17px;
    font-weight: 600;
    fill: var(--region-label);
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: var(--region-base);
    stroke-width: 5;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.region:hover .region-name {
    opacity: 1;
}

.region-hatch {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.region-hatch-line {
    stroke: var(--region-hatch, rgba(255, 255, 255, .75));
    stroke-width: 4.5;
}

.region-map-wrap:hover .region-hatch-line,
.region-map-wrap:has(.region.selected) .region-hatch-line,
.region-map-wrap:has(.region.chart-key-on) .region-hatch-line {
    animation: region-hatch-move 2s linear infinite;
}

.region:hover .region-hatch,
.region.chart-key-on .region-hatch,
.region.selected .region-hatch {
    opacity: .55;
}

.region.empty .region-hatch-line {
    stroke: var(--region-hatch-empty, rgba(20, 40, 70, .35));
}

@keyframes region-hatch-move {
    to { transform: translateX(18px); }
}

.region.chart-key-dim {
    opacity: .45;
}

.region.chart-key-on .region-shape {
    stroke: #ffffff;
    stroke-width: 2.6;
}

.region.chart-key-on .region-name {
    opacity: 1;
}

.region-flat .region-shape {
    fill-opacity: .08;
    animation: region-breathe 7s ease-in-out infinite;
}

.region-flat .region.empty .region-shape,
.region-flat .region.chart-key-on .region-shape {
    animation: none;
}

.region-flat .region.chart-key-on .region-shape {
    fill-opacity: .45;
}

@keyframes region-breathe {
    50% { fill-opacity: .19; }
}

.area-scan {
    pointer-events: none;
}

.area-halo {
    fill: none;
    stroke: var(--area-halo);
    stroke-width: 6;
}

.area-fill {
    fill: var(--area-color);
    fill-opacity: .12;
    stroke: var(--area-color);
    stroke-opacity: .85;
    stroke-width: 2.4;
    stroke-dasharray: 9 6;
    animation: area-march 1.6s linear infinite;
}

.area-ring,
.area-sweep {
    fill: none;
    stroke: var(--area-color);
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: area-scan 2.6s ease-out infinite;
}

.area-sweep {
    animation-delay: 1.3s;
}

.area-center {
    fill: var(--area-color);
    stroke: var(--area-halo);
    stroke-width: 2.5;
}

@keyframes area-scan {
    0%   { transform: scale(.12); stroke-opacity: .95; }
    70%  { stroke-opacity: .4; }
    100% { transform: scale(1); stroke-opacity: 0; }
}

@keyframes area-march {
    to { stroke-dashoffset: -30; }
}

.region-map.drawing {
    cursor: crosshair;
}

.draw-preview-circle {
    fill: var(--area-color);
    fill-opacity: .1;
    stroke: var(--area-color);
    stroke-width: 3;
    stroke-dasharray: 8 5;
    pointer-events: none;
}

.draw-preview-center {
    fill: var(--area-color);
    pointer-events: none;
}

.region-compact .region-count {
    font-size: 30px;
}

.region-compact .region-name {
    font-size: 20px;
}

    .legend-tile.selected {
        border-color: #ffb020;
        box-shadow: inset 0 0 0 1px #ffb020;
        font-weight: 600;
    }

    .legend-tile.empty {
        opacity: .55;
    }

    .legend-tile:disabled {
        cursor: default;
        transform: none;
    }

    .legend-tile:disabled:hover {
        transform: none;
        box-shadow: none;
    }

@media (prefers-reduced-motion: reduce) {
    .area-ring,
    .area-sweep,
    .area-fill,
    .region-hatch-line,
    .region:hover .region-shape,
    .region-flat .region-shape,
    .region-edge-top.chart-key-on {
        animation: none;
    }

    .region-flat .region:not(.empty) .region-shape {
        fill-opacity: .14;
    }

    .area-ring,
    .area-sweep {
        stroke-opacity: .6;
    }

    .region:hover {
        transform: none;
    }
}

    .area-chip-remove {
        border: 0;
        background: transparent;
        color: var(--bs-secondary-color);
        line-height: 1;
        padding: 0 .2rem;
        cursor: pointer;
    }

        .area-chip-remove:hover {
            color: var(--bs-danger);
        }

html[data-bs-theme="dark"] .region-map-wrap {
    --region-accent: #35a6db;
    --region-base: #2b323b;
    --region-empty: #232a32;
    --region-edge: #55647a;
    --region-label: #eaf2f8;
    --area-halo: rgba(10, 14, 20, .85);
    --region-hatch: rgba(233, 245, 252, .7);
    --region-hatch-empty: rgba(200, 220, 240, .35);
}

html[data-bs-theme="dark"] .region.empty .region-count {
    fill: #8a97a6;
}

html[data-bs-theme="dark"] .region:hover .region-shape {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .65));
}

html[data-bs-theme="dark"] .region:hover .region-shape,
html[data-bs-theme="dark"] .region.chart-key-on .region-shape {
    stroke: #d7ecf7;
}

.row-sub > td {
    background: var(--insp-surface-2, #eef2f7);
}

html[data-bs-theme="dark"] .icon-action.danger:hover {
    background: #3a1d22;
    border-color: #7b3b45;
    color: #f19aa5;
}

html[data-bs-theme="dark"] .markdown-page code {
    background: var(--insp-surface-2);
    color: #e4b8ff;
}

html[data-bs-theme="dark"] .copyable.copied {
    background: #123320;
    color: #8fdca9;
}

html[data-bs-theme="dark"] th:hover > .col-resizer:not(:hover, .resizing)::after {
    background: #4a5563;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border-left: 3px solid var(--insp-primary);
    border-radius: 4px;
    background: color-mix(in srgb, var(--insp-primary) 7%, transparent);
}

.filter-chips:empty,
.filter-chips:not(:has(*)) {
    display: none;
}

.filter-chips > .filter-chip-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-hero-flyer,
.demo-hero-spin {
    transform-box: fill-box;
    transform-origin: center;
}

.demo-hero-flyer-back {
    opacity: 0;
}

.demo-hero-bolt {
    opacity: 0;
    filter: drop-shadow(0 0 4px rgba(255, 237, 54, 0.6));
}

.demo-hero-bolt:nth-of-type(2) {
    animation-delay: .12s;
}

.demo-hero-bolt:nth-of-type(3) {
    animation-delay: .22s;
}

.demo-hero .demo-hero-flyer,
.brand-play .demo-hero-flyer {
    animation: demo-hero-fly 26s linear infinite, demo-hero-front 26s steps(1) infinite;
}

.demo-hero .demo-hero-flyer-back,
.brand-play .demo-hero-flyer-back {
    animation-name: demo-hero-fly, demo-hero-back;
}

.demo-hero .demo-hero-spin,
.brand-play .demo-hero-spin {
    animation: demo-hero-spin 26s linear infinite;
}

.demo-hero .demo-hero-bolt,
.brand-play .demo-hero-bolt {
    animation: demo-hero-bolt 26s linear infinite;
}

.demo-hero .demo-hero-emblem {
    animation: demo-hero-float 4.6s ease-in-out infinite;
}

@keyframes demo-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.brand-play .demo-hero-flyer,
.brand-play .demo-hero-flyer-back,
.brand-play .demo-hero-spin,
.brand-play .demo-hero-bolt {
    animation-iteration-count: 1;
    animation-duration: 8s;
}

.brand-play .brand-gear {
    transform-box: view-box;
    transform-origin: 120px 120px;
    animation: demo-hero-gear 8s linear 1;
}

@keyframes demo-hero-gear {
    to { transform: rotate(360deg); }
}

@keyframes demo-hero-fly {
    0%     { transform: translate(0, 0) scale(0.95); }
    0.65%  { transform: translate(2px, 14px) scale(1.25); }
    1.55%  { transform: translate(-8px, 16px) scale(1.22); }
    2.45%  { transform: translate(-78px, 20px) scale(0.82); }
    3.35%  { transform: translate(-112px, 8px) scale(0.66); }
    4.1%   { transform: translate(-58px, -16px) scale(0.56); }
    4.9%   { transform: translate(0, -24px) scale(0.5); }
    5.65%  { transform: translate(58px, -18px) scale(0.54); }
    6.45%  { transform: translate(112px, -6px) scale(0.62); }
    7.35%  { transform: translate(76px, -10px) scale(0.72); }
    9.35%  { transform: translate(30px, -4px) scale(0.86); }
    10%, 50% { transform: translate(0, 0) scale(0.95); }
    50.65% { transform: translate(-2px, 14px) scale(1.25); }
    51.55% { transform: translate(8px, 16px) scale(1.22); }
    52.45% { transform: translate(78px, 20px) scale(0.82); }
    53.35% { transform: translate(112px, 8px) scale(0.66); }
    54.1%  { transform: translate(58px, -16px) scale(0.56); }
    54.9%  { transform: translate(0, -24px) scale(0.5); }
    55.65% { transform: translate(-58px, -18px) scale(0.54); }
    56.45% { transform: translate(-112px, -6px) scale(0.62); }
    57.35% { transform: translate(-76px, -10px) scale(0.72); }
    59.35% { transform: translate(-30px, -4px) scale(0.86); }
    60%, 100% { transform: translate(0, 0) scale(0.95); }
}

@keyframes demo-hero-front {
    0%, 3.5% { opacity: 1; }
    3.55%, 6.8% { opacity: 0; }
    6.85%, 53.5% { opacity: 1; }
    53.55%, 56.8% { opacity: 0; }
    56.85%, 100% { opacity: 1; }
}

@keyframes demo-hero-back {
    0%, 3.5% { opacity: 0; }
    3.55%, 6.8% { opacity: 1; }
    6.85%, 53.5% { opacity: 0; }
    53.55%, 56.8% { opacity: 1; }
    56.85%, 100% { opacity: 0; }
}

@keyframes demo-hero-spin {
    0% { transform: rotate(0deg); }
    10%, 50% { transform: rotate(2160deg); }
    60%, 100% { transform: rotate(4320deg); }
}

/* One slow rise and fall per pass, never a flicker: rapid on-off light is what can trigger a seizure. */
@keyframes demo-hero-bolt {
    0%, 8%, 16%, 58%, 66%, 100% { opacity: 0; }
    11%, 12% { opacity: .85; }
    61%, 62% { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .demo-hero .demo-hero-flyer,
    .demo-hero .demo-hero-flyer-back,
    .demo-hero .demo-hero-spin,
    .demo-hero .demo-hero-bolt,
    .brand-play .demo-hero-flyer,
    .brand-play .demo-hero-flyer-back,
    .brand-play .demo-hero-spin,
    .brand-play .demo-hero-bolt,
    .demo-hero .demo-hero-emblem {
        animation: none;
    }
}

.feedback-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .35rem .75rem;
    align-items: start;
}

.feedback-row-text {
    white-space: pre-wrap;
    min-width: 0;
}

.feedback-row-meta,
.feedback-row .btn-action {
    margin-top: .15rem;
}

@media (max-width: 767.98px) {
    .feedback-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .feedback-row-meta {
        grid-column: 2;
        grid-row: 1;
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    .feedback-row-text {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

.feedback-row-text {
    overflow-wrap: break-word;
}

.feedback-resolved-text {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .feedback-resolved-head {
        flex-wrap: wrap;
    }

    .feedback-resolved-text {
        flex: 1 1 0;
        min-width: 8rem;
    }
}

.category-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start;
}

.category-donut {
    flex: 0 1 150px;
    min-width: 108px;
}

    .category-breakdown .legend-tiles {
        flex: 1 1 150px;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        align-content: flex-start;
    }

    .category-donut .chart-slice {
        cursor: default;
    }

.map-breakdown .category-donut:not(:has(.chart-key-on)) .chart-slice.chart-key-dim {
    opacity: 1;
}

.donut-empty {
    stroke: currentColor;
    opacity: .12;
}

.legend-empty {
    grid-column: 1 / -1;
    align-self: center;
    text-align: center;
    font-size: var(--fs-sm);
}

.map-breakdown .category-donut svg {
    animation: donut-in var(--motion-slow) var(--ease-out) both;
}

@keyframes donut-in {
    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.map-breakdown .category-donut .chart-slice {
    transition: filter var(--motion-fast) var(--ease-out), stroke-width var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

    .map-breakdown .category-donut .chart-slice:hover,
    .map-breakdown .category-donut .chart-slice.chart-key-on {
        opacity: 1;
        stroke: #fff;
        animation: donut-slice-pulse 1.6s ease-in-out infinite;
    }

@keyframes donut-slice-pulse {
    0%, 100% {
        stroke-width: 1;
        filter: brightness(1.06);
    }

    50% {
        stroke-width: 2.6;
        filter: brightness(1.22) drop-shadow(0 0 4px rgba(255, 255, 255, .35));
    }
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(var(--widget-columns, 2), minmax(0, 1fr));
    grid-auto-rows: var(--widget-unit, 4px);
    column-gap: 1rem;
    row-gap: 0;
}

.widget-grid > * {
    min-width: 0;
    grid-column: var(--c, auto) / span var(--w, 1); /* --c = the column the drop pinned */
    grid-row: span var(--h, 1);
    margin-bottom: 1rem; /* the row gap; keep it equal to column-gap and WidgetLayout.RowGapPx */
}

.widget-grid > * {
    display: flex;
    flex-direction: column;
}

.widget-grid > * > .card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.widget-grid .widget-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    container: widget / inline-size;
    display: flex;
    flex-direction: column;
    gap: 0;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.widget-grid .widget-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.widget-grid .widget-body::-webkit-scrollbar-thumb {
    background: var(--widget-scroll-thumb, rgba(120, 140, 170, .55));
    border-radius: 4px;
}

.widget-grid .widget-body > .card,
.widget-grid .widget-body > .card > .d-flex,
.widget-grid .widget-body > div {
    min-height: 0;
}

.widget-grid .widget-body > * {
    min-width: 0;
}

.widget-grid .widget-body > *:last-child {
    flex: 1 1 auto;
    min-height: 0;
}

.widget-grid .widget-body .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .widget-grid .widget-body > .d-flex,
    .widget-grid .widget-body .card > .d-flex {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch !important;
        flex-wrap: wrap;
    }

/* Tiles share the box evenly: the count picks the columns, so no tile is left alone in the last row. */
.widget-grid .legend-tiles,
.widget-grid .tile-grid {
    align-content: stretch;
    grid-auto-rows: minmax(min-content, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    height: 100%;
    min-height: 0;
}

.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 1fr);
}

.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(3)):not(:has(> :nth-child(4))),
.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(5)):not(:has(> :nth-child(7))),
.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(9)):not(:has(> :nth-child(10))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(7)):not(:has(> :nth-child(9))),
.widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(10)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container widget (max-width: 419px) {
    .widget-grid :is(.widget-donut-card .legend-tiles, .tile-grid):has(> :nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A wide map widget lays its category tiles out by count, so the last row is never one or two lonely tiles. */
@container widget (min-width: 1000px) {
    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(3)):not(:has(> :nth-child(4))),
    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(5)):not(:has(> :nth-child(7))),
    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(9)):not(:has(> :nth-child(10))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(4)):not(:has(> :nth-child(5))),
    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(7)):not(:has(> :nth-child(9))) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .widget-grid .map-breakdown .category-breakdown .legend-tiles:has(> :nth-child(10)) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* An unlimited list scrolls inside the widget's chosen height instead of growing past it. */
.widget-scroll {
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
}

.widget-grid .widget-scroll {
    flex: 1 1 auto;
}

.widget-grid .widget-body > .card {
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

    .widget-grid .widget-body > .card:hover {
        border-color: color-mix(in srgb, var(--insp-primary) 45%, #dbe3ec);
        box-shadow: 0 2px 10px rgba(14, 42, 71, 0.10);
    }

html[data-bs-theme="dark"] .widget-grid .widget-body > .card:hover {
    border-color: color-mix(in srgb, var(--insp-primary) 55%, var(--insp-border));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.widget-grid .chart-holder > svg {
    display: block;
    margin-inline: auto;
}

.widget-grid .table-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

.chart-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.widget-grid .chart-block {
    flex: 1 1 auto;
    min-height: 0;
}

.chart-block > .chart-legend-row {
    flex: 0 0 auto;
    align-items: baseline !important;
    margin-bottom: .5rem;
}

@container widget (min-width: 26rem) {
    .chart-block.chart-legend-aside {
        flex-direction: row;
        align-items: stretch;
        gap: .75rem;
    }

    .chart-block.chart-legend-aside > .chart-legend-row {
        order: 2;
        margin-bottom: 0;
        align-content: center;
        max-width: 11rem;
        overflow: auto;
    }

    .chart-block.chart-legend-aside > .chart-legend-row > span {
        flex-direction: column;
        row-gap: .15rem;
    }

    .chart-block.chart-legend-aside > .chart-holder {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
}

.widget-grid .chart-holder {
    flex: 1 1 auto;
    min-height: 5rem;
    position: relative;
    overflow: hidden;
}

.widget-grid .chart-holder > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.chart-holder > svg {
    width: 100%;
    height: auto;
}

/* The "today" divider label rides on the plot; the line itself is drawn in the SVG. */
.chart-today-label {
    position: absolute;
    top: 0.1rem;
    transform: translateX(-50%);
    font-size: var(--fs-2xs);
    color: var(--bs-secondary-color);
    background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
    padding: 0 0.3rem;
    border-radius: 0.5rem;
    pointer-events: none;
}

.chart-explainer {
    font-size: var(--fs-2xs);
    margin-top: 0.4rem;
}

.chart-stretch {
    position: relative;
    --chart-pad-left: 2.25rem;
    --chart-pad-right: .5rem;
    --chart-pad-top: .55rem;
    --chart-pad-bottom: 1.15rem;
    aspect-ratio: 16 / 7;
    min-height: 6rem;
}

.widget-grid .chart-stretch {
    aspect-ratio: auto;
}

.chart-stretch > .chart-plot {
    position: absolute;
    top: var(--chart-pad-top);
    right: var(--chart-pad-right);
    bottom: var(--chart-pad-bottom);
    left: var(--chart-pad-left);
}

.chart-stretch > .chart-plot > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-stretch > .chart-axis {
    position: absolute;
    pointer-events: none;
    font-size: var(--fs-2xs);
    line-height: 1;
    color: var(--bs-secondary-color);
}

.chart-stretch > .chart-axis-y {
    left: 0;
    width: var(--chart-pad-left);
    top: var(--chart-pad-top);
    bottom: var(--chart-pad-bottom);
}

    .chart-stretch > .chart-axis-y > span {
        position: absolute;
        right: .35rem;
        transform: translateY(50%);
        white-space: nowrap;
    }

.chart-stretch > .chart-axis-x {
    left: var(--chart-pad-left);
    right: var(--chart-pad-right);
    bottom: 0;
    height: var(--chart-pad-bottom);
}

    .chart-stretch > .chart-axis-x > span {
        position: absolute;
        top: .15rem;
        text-align: center;
        white-space: nowrap;
    }

.widget-fixed .chart-stretch {
    max-width: 520px;
}

.chart-stretch-edge {
    --chart-pad-right: 1.5rem;
    --chart-pad-top: 1.1rem;
    --chart-pad-bottom: 1.35rem;
}

.chart-stretch > .chart-axis-top {
    left: var(--chart-pad-left);
    right: var(--chart-pad-right);
    top: 0;
    height: var(--chart-pad-top);
}

    .chart-stretch > .chart-axis-top > span {
        position: absolute;
        bottom: .1rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .chart-stretch-edge > .chart-axis-x > span {
        top: .4rem;
        transform: translateX(-50%);
    }

.chart-stretch > .chart-plot > .chart-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chart-stretch .chart-point {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: auto;
    transition: transform var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}

    .chart-stretch a.chart-point::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
    }

    .chart-stretch a.chart-point:hover {
        transform: scale(1.7);
    }

.widget-grid .widget-body > .card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.widget-grid .widget-body > .card:has(> .region-map-wrap) {
    justify-content: safe center;
    padding: 0.6rem !important;
}

@media (max-width: 991.98px) {
    .widget-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .widget-grid > * {
        grid-column: span 1;
    }
}

.widget-size {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.widget-size-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-size-row {
    display: flex;
    gap: 2px;
}

.widget-size-cell {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    background: transparent;
}

    .widget-size-cell.on {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .widget-size-cell:hover {
        border-color: var(--bs-primary);
    }

/* Corner resize handle (WidgetCard + js/widget-resize.js); touch screens keep the ⚙ size picker. */
.widget-grid > [data-widget-id] {
    position: relative;
}

.widget-resize {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .widget-resize {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 1.375rem;
        height: 1.375rem;
        padding: 0;
        border: 0;
        border-radius: .45rem 0 .6rem 0;
        background: transparent;
        color: var(--bs-secondary-color);
        cursor: nwse-resize;
        touch-action: none;
        opacity: 0;
        transition: opacity var(--motion-fast) var(--ease-out),
                    color var(--motion-fast) var(--ease-out),
                    background-color var(--motion-fast) var(--ease-out);
    }

    .widget-grid > [data-widget-id]:not(:has(> .card)) > .widget-resize {
        right: .625rem; /* the body's stable scrollbar gutter: the card ends before the box does */
    }

        .widget-resize svg {
            width: .75rem;
            height: .75rem;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.6;
            stroke-linecap: round;
        }

    .dashboard-widget:hover > .widget-resize,
    .dashboard-widget:focus-within > .widget-resize {
        opacity: 1;
    }

    .widget-resize:hover,
    .widget-resize:focus-visible {
        color: var(--insp-primary);
        background: color-mix(in srgb, var(--insp-primary) 14%, transparent);
    }

    .widget-resize:focus-visible {
        outline: 2px solid var(--focus-ring);
        outline-offset: -2px;
    }

    .widget-grid.drag-active .widget-resize {
        opacity: 0;
    }
}

.widget-resize-ghost {
    position: absolute;
    z-index: 1040;
    box-sizing: border-box;
    pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--insp-primary) 55%, transparent);
    border-radius: .6rem;
    background: color-mix(in srgb, var(--insp-primary) 5%, transparent);
    transition: width var(--motion-fast) var(--ease-out),
                height var(--motion-fast) var(--ease-out),
                left var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out),
                background-color var(--motion-fast) var(--ease-out);
}

    .widget-resize-ghost.changed {
        border-color: var(--insp-primary);
        background: color-mix(in srgb, var(--insp-primary) 11%, transparent);
    }

    .widget-resize-ghost > span {
        position: absolute;
        right: .5rem;
        bottom: .5rem;
        padding: .1rem .5rem;
        border-radius: 999px;
        background: var(--insp-primary);
        color: #fff;
        font-size: var(--fs-xs);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        box-shadow: 0 1px 4px rgba(14, 42, 71, .25);
    }

.bars-animate .bar-grow {
    transition: height .7s var(--ease-in-out) var(--d, 0ms), fill-opacity var(--motion-fast) var(--ease-out);
    animation: bar-grow .7s var(--ease-in-out) var(--d, 0ms) backwards;
}

.bars-animate .widget-bar {
    transition: width .7s var(--ease-in-out) var(--d, 0ms), opacity var(--motion-fast) var(--ease-out);
    animation: bar-grow-x .7s var(--ease-in-out) var(--d, 0ms) backwards;
}

@keyframes bar-grow {
    from {
        height: 0;
    }
}

@keyframes bar-grow-x {
    from {
        width: 0;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chart-slice,
    .chart-series,
    svg .chart-series,
    .bars-animate .bar-grow,
    .bars-animate .widget-bar {
        transition: none;
    }

    .bars-animate .bar-grow,
    .bars-animate .widget-bar,
    .map-breakdown .category-donut svg,
    .map-breakdown .category-donut .chart-slice:hover,
    .map-breakdown .category-donut .chart-slice.chart-key-on {
        animation: none;
    }
}

.area-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.map-breakdown-map {
    position: relative;
}

    .map-breakdown-map .area-head {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 21;
    }

        .map-breakdown-map .area-head .btn {
            padding: 0.1rem 0.5rem;
            font-size: var(--fs-xs);
        }

@media (max-width: 991.98px) {
    .map-breakdown-map .area-head {
        left: auto;
        right: 0;
    }
}

.area-search {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.area-search-hint {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    white-space: nowrap;
    animation: area-search-hint-in .4s ease;
}

@keyframes area-search-hint-in {
    from {
        opacity: 0;
    }
}

.area-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: .1rem .2rem .1rem .35rem;
    border: 1px solid var(--area-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--area-color) 12%, transparent);
    font-size: var(--fs-xs);
    white-space: nowrap;
    overflow: hidden;
}

.area-chip-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--area-color);
    flex: 0 0 auto;
}

.area-chip-km {
    color: var(--bs-secondary-color);
}

.chip-removable {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.chip-area {
    background: color-mix(in srgb, var(--area-color, #ff2d78) 16%, var(--bs-body-bg, #fff));
    color: color-mix(in srgb, var(--area-color, #ff2d78) 72%, var(--bs-body-color, #212529));
    border: 1px dashed color-mix(in srgb, var(--area-color, #ff2d78) 65%, transparent);
}

.chip-area .chip-area-km {
    font-weight: 600;
    opacity: .8;
    font-size: .82em;
}

.chip-clear {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .75;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

    .chip-clear:hover {
        opacity: 1;
    }

.action-toast {
    position: fixed;
    top: 4.1rem;
    right: 1.6rem;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #2e7d32 35%, transparent);
    background: var(--insp-surface, #fff);
    box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.16);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #2e7d32;
    animation: motion-toast-in var(--motion-base) var(--ease-spring);
}

    .action-toast.is-error {
        max-width: min(28rem, calc(100vw - 2rem));
        border-radius: 0.9rem;
        border-color: color-mix(in srgb, #b3261e 35%, transparent);
        color: #b3261e;
    }

.action-mark {
    display: inline-flex;
    flex: 0 0 auto;
    vertical-align: -0.15em;
    color: inherit;
}

    .action-mark svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .action-mark .am-ink {
        fill: currentColor;
    }

    .action-mark .am-ring,
    .action-mark .am-arc {
        fill: none;
        stroke: currentColor;
        stroke-width: 3.4;
        stroke-linecap: round;
    }

    .action-mark .am-bolt,
    .action-mark .am-spark {
        fill: var(--insp-yellow, #ffed36);
        opacity: 0;
    }

    .action-mark .am-check {
        fill: none;
        stroke: #7ce4a8;
        stroke-width: 3.6;
        stroke-linecap: round;
        stroke-dasharray: 22;
        stroke-dashoffset: 22;
        opacity: 0;
    }

.action-mark .am-gear {
    transform-origin: 24px 24px;
    transform-box: view-box;
    animation: am-gear 1.1s linear infinite;
}

.action-mark .am-hammer {
    transform-origin: 33px 12px;
    transform-box: view-box;
    animation: am-hammer 1.1s ease-in-out infinite;
}

.action-mark .am-arc {
    stroke-dasharray: 28 72;
    animation: am-arc 1.2s linear infinite;
}

.action-mark-done .am-gear,
.action-mark-done .am-hammer,
.action-mark-done .am-arc {
    animation: am-out .45s ease-out forwards;
}

.action-mark-done .am-bolt,
.action-mark-done .am-spark {
    animation: am-strike .5s ease-out forwards;
}

.action-mark-done .am-check {
    animation: am-check .5s .28s ease-out forwards;
}

@keyframes am-gear {
    to { transform: rotate(1turn); }
}

@keyframes am-hammer {
    0%, 100% { transform: rotate(-46deg); }
    45% { transform: rotate(4deg); }
    60% { transform: rotate(-16deg); }
}

@keyframes am-arc {
    to { stroke-dashoffset: -100; }
}

@keyframes am-out {
    to { opacity: 0; transform: scale(.85); }
}

@keyframes am-strike {
    0% { opacity: 0; transform: scale(.6); }
    35% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1); }
}

@keyframes am-check {
    from { stroke-dashoffset: 22; opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 1; }
}

.action-button.is-busy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    vertical-align: middle;
    opacity: 1;
}

.action-button-label:empty {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .action-mark .am-gear,
    .action-mark .am-hammer,
    .action-mark .am-arc,
    .action-mark-done .am-bolt,
    .action-mark-done .am-spark {
        animation: none;
    }

    .action-mark-done .am-check {
        animation: none;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* The row's left edge marks unread, so the category colour goes into the icon circle. */
.notif-icon {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    color: var(--notif-accent, var(--insp-primary));
    background: color-mix(in srgb, var(--notif-accent, var(--insp-primary)) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notif-accent, var(--insp-primary)) 35%, transparent);
}

    .notif-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 0.9rem;
        height: 0.9rem;
        background: currentColor;
        -webkit-mask: var(--notif-icon, var(--icon-notif-flag)) center / contain no-repeat;
        mask: var(--notif-icon, var(--icon-notif-flag)) center / contain no-repeat;
    }

.notif-job { --notif-accent: var(--insp-primary); }
.notif-application { --notif-accent: #6f42c1; }
.notif-invitation { --notif-accent: #2563eb; }
.notif-licence { --notif-accent: #b45309; }
.notif-storage { --notif-accent: #dc3545; }
.notif-integration { --notif-accent: #0f766e; }
.notif-project { --notif-accent: #0e7490; }

.bell-item,
.notification {
    cursor: pointer;
}

.place-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    margin: 0.75rem 0 0.375rem;
    padding: 0.375rem 0.75rem;
    border-left: 4px solid var(--insp-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--insp-primary) 8%, var(--bs-body-bg));
}

    .place-group-head:first-child {
        margin-top: 0;
    }

.place-group-row > td {
    background: color-mix(in srgb, var(--insp-primary) 8%, var(--bs-body-bg)) !important;
    border-left: 4px solid var(--insp-primary);
}

.item-asset-tag,
.item-place-tag {
    font-weight: 500;
    color: var(--bs-body-color);
    border: 1px solid color-mix(in srgb, var(--insp-primary) 35%, transparent);
    background: color-mix(in srgb, var(--insp-primary) 10%, var(--bs-body-bg));
}

.item-place-tag {
    border-color: color-mix(in srgb, #6f42c1 35%, transparent);
    background: color-mix(in srgb, #6f42c1 10%, var(--bs-body-bg));
}

a.item-asset-tag:hover,
a.item-asset-tag:focus-visible {
    background: color-mix(in srgb, var(--insp-primary) 20%, var(--bs-body-bg));
}

.place-asset-history > td {
    background: color-mix(in srgb, var(--insp-primary) 5%, var(--bs-body-bg)) !important;
    border-left: 3px solid var(--insp-primary);
}

.place-history-table {
    font-size: 0.875rem;
    background: transparent;
}

.place-history-table > :not(caption) > * > * {
    background: transparent;
}

.place-asset-history-toggle.active {
    font-weight: 600;
}

.job-refresh-panel {
    max-width: 900px;
    border-left: 4px solid var(--insp-primary);
}

.job-refresh-entry + .job-refresh-entry {
    margin-top: 0.5rem;
}

.asset-picker {
    border-style: dashed;
}

.asset-picker-group + .asset-picker-group {
    margin-top: 0.75rem;
}

.asset-picker-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0.125rem 1rem;
    margin: 0 0 0.25rem 1.5rem;
}

.place-card {
    max-width: 960px;
}

.place-list .place-name {
    font-weight: 600;
}

.place-tool {
    border: 1px dashed var(--bs-border-color);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.place-series-preview {
    font-family: var(--bs-font-monospace);
    font-size: var(--fs-sm, 0.875rem);
}

.col-thumb {
    width: 3.4rem;
}

.job-thumb {
    display: inline-flex;
    vertical-align: middle;
    text-decoration: none;
}

    .job-thumb > .entity-avatar {
        background: var(--tag-bg);
        color: var(--tag-fg);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-accent) 30%, transparent);
        font-weight: 700;
        letter-spacing: 0.02em;
    }

.job-cell {
    min-width: 11rem;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
    .job-cell {
        min-width: 8rem;
    }
}

@media (min-width: 1200px) {
    .table:has(.job-cell) > thead > tr > th:has(> .sort-options) {
        width: 1px;
    }

    .table:has(.job-cell) .job-cell {
        width: max-content;
        max-width: min(34rem, 30vw);
    }
}

.job-cell-title {
    line-height: 1.3;
}

.job-cell-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    margin-top: 0.25rem;
    line-height: 1.2;
}

    .job-cell-meta .tag-list {
        display: contents;
    }

    .job-cell-meta:empty {
        display: none;
    }

.job-no {
    font-family: var(--bs-font-monospace);
    font-size: 0.8em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #5b6b7f;
    white-space: nowrap;
}

    a.job-no:hover {
        color: var(--insp-primary);
        text-decoration: underline;
    }

.tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    vertical-align: middle;
}

.badge.tag-cat {
    background: var(--tag-bg);
    color: var(--tag-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-accent) 35%, transparent);
    font-weight: 600;
}

.cat-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-right: 0.35em;
    border-radius: 50%;
    background: var(--tag-accent);
    vertical-align: 0.05em;
}

    .filter-tag.active .cat-dot {
        box-shadow: 0 0 0 1.5px #fff;
    }

.sort-options {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
}

    .sort-options .sort-link:not(.active) {
        opacity: 0.7;
    }

    .sort-options .sort-link:hover {
        opacity: 1;
    }

.dt-merge .form-check {
    padding-left: 1.6em;
}

html[data-bs-theme="dark"] .badge.tag-cat,
html[data-bs-theme="dark"] .job-thumb > .entity-avatar {
    background: var(--tag-bg-d);
    color: var(--tag-fg-d);
}

html[data-bs-theme="dark"] .job-no {
    color: #9fb0c4;
}

.form-select:not(.pill-select) {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23006c9f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 6 4.5 4.5 4.5-4.5'/%3e%3c/svg%3e");
    padding-right: 2.4rem;
    border-color: color-mix(in srgb, var(--bs-border-color, #dee2e6) 85%, var(--insp-primary));
    border-radius: 0.5rem;
    background-position: right 0.75rem center;
    background-size: 14px 14px;
    box-shadow: 0 1px 2px rgba(14, 42, 71, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .form-select:not(.pill-select):where(:hover:not(:disabled)) {
        border-color: color-mix(in srgb, var(--insp-primary) 55%, var(--bs-border-color, #dee2e6));
        background-color: color-mix(in srgb, var(--insp-primary) 3%, var(--bs-body-bg, #fff));
    }

    .form-select:not(.pill-select):where(:focus) {
        border-color: var(--insp-accent);
        box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--insp-accent) 28%, transparent);
    }

    .form-select:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .form-select option {
        background-color: var(--bs-body-bg, #fff);
        color: var(--bs-body-color, #212529);
    }

.form-select-sm:not(.pill-select) {
    padding-right: 2rem;
    border-radius: 0.4rem;
    background-position: right 0.55rem center;
    background-size: 12px 12px;
}

:where(html[data-bs-theme="dark"]) .form-select:not(.pill-select) {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2379c8ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 6 4.5 4.5 4.5-4.5'/%3e%3c/svg%3e");
    border-color: var(--insp-border);
    background-color: var(--insp-surface-2);
}

    :where(html[data-bs-theme="dark"]) .form-select:not(.pill-select):where(:hover:not(:disabled)) {
        border-color: color-mix(in srgb, var(--insp-primary) 55%, var(--insp-border));
        background-color: color-mix(in srgb, var(--insp-primary) 8%, var(--insp-surface-2));
    }

.cal-page {
    --cal-line: color-mix(in srgb, var(--bs-border-color, #dee2e6) 75%, transparent);
    --cal-surface: var(--card-solid, var(--card-bg, var(--bs-body-bg)));
    min-width: 0;
}

.cal-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.cal-nav,
.cal-toolbar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.cal-nav-step {
    min-width: 2.1rem;
    justify-content: center;
    font-size: var(--fs-lg);
    line-height: 1;
}

.cal-period {
    margin: 0 0 0 0.4rem;
    font-size: var(--fs-xl);
    font-weight: 650;
    color: var(--insp-text);
}

    .cal-period::first-letter,
    .cal-mini-title::first-letter {
        text-transform: uppercase;
    }

.cal-views {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--cal-line);
    border-radius: 0.55rem;
    background: var(--cal-surface);
}

.cal-view {
    border: 0;
    border-radius: 0.4rem;
    padding: 0.2rem 0.75rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

    .cal-view:hover {
        background: color-mix(in srgb, var(--insp-primary) 9%, transparent);
    }

    .cal-view.active {
        background: var(--insp-primary);
        color: #fff;
        font-weight: 600;
    }

html[data-bs-theme="dark"] .cal-view.active {
    color: #08151c;
}

.cal-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

    .cal-filter-row:last-child {
        margin-bottom: 0;
    }

.cal-filter-label {
    min-width: 3.2rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.cal-filter-select {
    width: auto;
    max-width: 240px;
}

.cal-filter-color {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

    .cal-filter-color .form-select {
        width: auto;
    }

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    margin-top: 0.6rem;
    font-size: var(--fs-xs);
}

.cal-legend-item {
    display: inline-flex;
    align-items: center;
}

.cal-legend-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.65em;
    height: 0.65em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: var(--kind, var(--insp-primary));
}

.cal-legend-hint {
    margin-left: auto;
}

.cal-month,
.cal-week,
.cal-agenda:not(.is-compact) {
    border: var(--card-border, 1px solid var(--cal-line));
    border-radius: 0.6rem;
    background: var(--cal-surface);
    box-shadow: var(--card-shadow, 0 1px 4px rgba(14, 42, 71, 0.08));
}

.cal-month {
    overflow: hidden;
}

.cal-month-head,
.cal-month-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-weekday {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--cal-line);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 6.6rem;
    padding: 0.2rem 0.25rem 0.3rem;
    border-right: 1px solid var(--cal-line);
    border-bottom: 1px solid var(--cal-line);
    transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

    .cal-month-row .cal-cell:last-child {
        border-right: 0;
    }

    .cal-month-row:last-child .cal-cell {
        border-bottom: 0;
    }

    .cal-cell.is-out {
        background: color-mix(in srgb, var(--bs-body-color) 3%, transparent);
    }

        .cal-cell.is-out .cal-day-number {
            opacity: 0.5;
        }

.cal-day-number {
    align-self: flex-start;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.3rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-day-number:hover {
        background: color-mix(in srgb, var(--insp-primary) 12%, transparent);
    }

.cal-cell.is-today .cal-day-number {
    background: var(--insp-primary);
    color: #fff;
}

html[data-bs-theme="dark"] .cal-cell.is-today .cal-day-number {
    color: #08151c;
}

.cal-cell-entries {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cal-cell-dots {
    display: none;
}

.cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kind, var(--tag-accent));
}

.cal-more {
    align-self: flex-start;
    border: 0;
    padding: 0 0.3rem;
    background: transparent;
    color: var(--insp-accent);
    font-size: var(--fs-2xs);
}

    .cal-more:hover {
        color: var(--insp-primary);
        text-decoration: underline;
    }

.cal-cell.is-drop,
.cal-week-allday-cell.is-drop,
.cal-slot.is-drop {
    background: color-mix(in srgb, var(--insp-accent) 14%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--insp-accent) 70%, transparent);
}

.cal-month.is-dragging .cal-cell.is-past,
.cal-week.is-dragging .is-past {
    cursor: not-allowed;
    opacity: 0.55;
}

.cal-month.is-dragging .cal-chip:not(.is-dragged),
.cal-week.is-dragging .cal-chip:not(.is-dragged) {
    pointer-events: none;
}

.cal-chip {
    display: flex;
    align-items: center;
    gap: 0.3em;
    width: 100%;
    min-width: 0;
    padding: 0.08rem 0.4rem 0.08rem 0.45rem;
    border: 0;
    border-radius: 0.35rem;
    background: var(--tag-bg);
    color: var(--tag-fg);
    box-shadow: inset 3px 0 0 var(--kind, var(--tag-accent)),
                inset 0 0 0 1px color-mix(in srgb, var(--tag-accent) 30%, transparent);
    font-size: 0.74rem;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out),
                opacity var(--motion-fast) var(--ease-out);
}

    .cal-chip:hover,
    .cal-chip:focus-visible {
        color: var(--tag-fg);
        transform: translateY(var(--motion-lift));
        box-shadow: inset 3px 0 0 var(--kind, var(--tag-accent)),
                    inset 0 0 0 1px color-mix(in srgb, var(--tag-accent) 55%, transparent),
                    0 2px 6px rgba(14, 42, 71, 0.14);
    }

    .cal-chip.is-movable {
        cursor: grab;
    }

        .cal-chip.is-movable:active {
            cursor: grabbing;
        }

    .cal-chip.is-dragged {
        opacity: 0.45;
    }

html[data-bs-theme="dark"] .cal-chip {
    background: var(--tag-bg-d);
    color: var(--tag-fg-d);
}

    html[data-bs-theme="dark"] .cal-chip:hover,
    html[data-bs-theme="dark"] .cal-chip:focus-visible {
        color: var(--tag-fg-d);
    }

.cal-chip-icon {
    flex: 0 0 auto;
    font-size: 0.9em;
}

.cal-chip-time {
    flex: 0 0 auto;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.cal-chip-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-chip-who {
    flex: 0 1 auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}

.cal-chip.cal-kind-projectmilestone {
    font-weight: 650;
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--kind) 14%, transparent) 0 5px,
                                                transparent 5px 10px);
    box-shadow: inset 3px 0 0 var(--kind), inset 0 0 0 1px color-mix(in srgb, var(--kind) 60%, transparent);
}

    .cal-chip.cal-kind-projectmilestone:hover,
    .cal-chip.cal-kind-projectmilestone:focus-visible {
        box-shadow: inset 3px 0 0 var(--kind), inset 0 0 0 1px var(--kind), 0 2px 6px rgba(14, 42, 71, 0.14);
    }

.cal-week-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cal-week {
    --slot-h: 1.4rem;
    min-width: 680px;
    overflow: hidden;
}

.cal-week-head,
.cal-week-allday,
.cal-week-body {
    display: grid;
    grid-template-columns: 3.4rem repeat(7, minmax(0, 1fr));
}

.cal-week-head {
    border-bottom: 1px solid var(--cal-line);
}

.cal-week-day-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.35rem 0;
    border: 0;
    border-left: 1px solid var(--cal-line);
    background: transparent;
    color: var(--bs-body-color);
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-week-day-head:hover {
        background: color-mix(in srgb, var(--insp-primary) 7%, transparent);
    }

.cal-week-dayname {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
    text-transform: uppercase;
}

.cal-week-daynum {
    min-width: 1.9rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-weight: 650;
}

.cal-week-day-head.is-today .cal-week-daynum {
    background: var(--insp-primary);
    color: #fff;
}

html[data-bs-theme="dark"] .cal-week-day-head.is-today .cal-week-daynum {
    color: #08151c;
}

.cal-week-allday {
    border-bottom: 1px solid var(--cal-line);
}

.cal-week-gutter {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    text-align: right;
}

.cal-week-allday-label {
    align-self: center;
    padding-right: 0.4rem;
}

.cal-week-allday-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 2.1rem;
    padding: 3px;
    border-left: 1px solid var(--cal-line);
}

.cal-week-hours {
    display: flex;
    flex-direction: column;
}

.cal-hour {
    display: block;
    padding-right: 0.4rem;
    line-height: 1;
    transform: translateY(-0.3em);
}

.cal-week-col {
    position: relative;
    min-width: 0;
    border-left: 1px solid var(--cal-line);
}

    .cal-week-col.is-today {
        background: color-mix(in srgb, var(--insp-primary) 4%, transparent);
    }

.cal-slot {
    height: var(--slot-h);
    border-top: 1px dotted color-mix(in srgb, var(--cal-line) 70%, transparent);
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-slot.is-hour {
        border-top-style: solid;
    }

.cal-chip.cal-chip-timed {
    position: absolute;
    z-index: 1;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    width: auto;
    padding-top: 0.12rem;
    white-space: normal;
}

    .cal-chip.cal-chip-timed .cal-chip-title {
        flex-basis: 100%;
        white-space: nowrap;
    }

.cal-agenda {
    margin: 0;
    padding: 0;
    list-style: none;
    container: cal-agenda / inline-size;
}

.cal-agenda-day {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.4rem 1rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--cal-line);
}

    .cal-agenda-day:last-child {
        border-bottom: 0;
    }

    .cal-agenda-day.is-today .cal-agenda-date {
        color: var(--insp-primary);
    }

    .cal-agenda-day.is-past {
        opacity: 0.75;
    }

.cal-agenda-date {
    font-size: var(--fs-sm);
    font-weight: 650;
}

    .cal-agenda-date::first-letter {
        text-transform: uppercase;
    }

    .cal-agenda-date a {
        color: inherit;
    }

.cal-agenda-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.cal-agenda-item {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 20rem) minmax(8rem, 1fr);
    align-items: center;
    gap: 0.25rem 0.6rem;
    min-width: 0;
}

.cal-agenda-time {
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cal-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

    .cal-agenda-meta > span + span::before {
        content: "\00b7";
        margin-right: 0.5rem;
    }

.cal-agenda.is-compact .cal-agenda-day {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.3rem 0;
}

.cal-agenda.is-compact .cal-agenda-date {
    font-size: var(--fs-xs);
}

.cal-agenda.is-compact .cal-agenda-item {
    grid-template-columns: 2.9rem minmax(0, 1fr);
}

.cal-empty {
    margin: 0;
    padding: 0.5rem 0;
}

.cal-warnings {
    margin-bottom: 0.75rem;
}

.cal-editor-backdrop {
    z-index: 1055;
    background: rgba(15, 23, 42, 0.22);
}

.cal-editor-pop {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1056;
    width: min(440px, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

.visit-editor {
    padding: 0.85rem 1rem 1rem;
}

.cal-editor-pop .visit-editor {
    box-shadow: 0 12px 36px rgba(14, 42, 71, 0.22);
}

.visit-editor-who {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.visit-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
}

.visit-editor-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

.visit-editor-wide {
    grid-column: 1 / -1;
}

.visit-editor-switch {
    padding-bottom: 0.3rem;
}

.visit-editor-fixed {
    background: transparent;
}

.visit-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.cal-add {
    position: relative;
    display: inline-flex;
}

.cal-add-backdrop {
    z-index: 1040;
}

.cal-add-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 1041;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.55rem;
    background: var(--bs-body-bg);
    box-shadow: 0 10px 28px rgba(14, 42, 71, 0.18);
}

.cal-add-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.4rem;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-add-item:hover {
        background: color-mix(in srgb, var(--insp-primary) 9%, transparent);
        color: var(--bs-body-color);
    }

    .cal-add-item small {
        display: block;
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
    }

.cal-add-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.cal-add-google {
    background: #4285f4;
}

.cal-add-outlook {
    background: #0f6cbd;
}

.cal-add-note {
    padding: 0.35rem 0.55rem 0.15rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    white-space: normal;
}

.badge.cal-soft-badge {
    background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    color: var(--bs-body-color);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-body-color) 18%, transparent);
    font-weight: 600;
}

.badge.cal-due-badge {
    background: color-mix(in srgb, var(--insp-primary) 14%, transparent);
    color: var(--insp-primary-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--insp-primary) 35%, transparent);
}

.job-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
}

.job-schedule-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.85rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--insp-primary) 18%, var(--bs-border-color));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--insp-primary) 5%, transparent);
}

.job-schedule-visit.is-past {
    opacity: 0.7;
}

.job-schedule-when {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.45rem;
}

    .job-schedule-when strong::first-letter {
        text-transform: uppercase;
    }

.job-schedule-who {
    font-weight: 500;
}

.job-schedule-note {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
}

.job-schedule-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.job-schedule-editor {
    flex-basis: 100%;
}

.job-schedule-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin-top: 0.35rem;
}

.job-schedule-moved {
    display: block;
    margin-top: 0.1rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    cursor: help;
}

.job-schedule-visit.has-conflict {
    border-color: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-border-color));
}

.job-schedule-conflicts {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.4rem;
}

.visit-conflict {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.08rem 0.5rem 0.08rem 0.2rem;
    border: 1px solid var(--conflict-border);
    border-radius: 999px;
    background: var(--conflict-bg);
    color: var(--conflict-fg);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.35;
}

.visit-conflict.is-danger,
.cal-chip.has-conflict.is-danger {
    --conflict-bg: var(--bs-danger-bg-subtle);
    --conflict-fg: var(--bs-danger-text-emphasis);
    --conflict-border: var(--bs-danger-border-subtle);
    --conflict-mark: var(--bs-danger);
}

.visit-conflict.is-warning,
.cal-chip.has-conflict.is-warning {
    --conflict-bg: var(--bs-warning-bg-subtle);
    --conflict-fg: var(--bs-warning-text-emphasis);
    --conflict-border: var(--bs-warning-border-subtle);
    --conflict-mark: #d39e00;
}

.visit-conflict-mark,
.cal-chip-conflict {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--conflict-mark);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.cal-chip-conflict {
    width: 0.95rem;
    height: 0.95rem;
    font-size: 0.62rem;
}

.cal-chip.has-conflict {
    box-shadow: inset 3px 0 0 var(--kind, var(--tag-accent)),
                inset 0 0 0 1.5px var(--conflict-mark);
}

.visit-free-day-date {
    font-weight: 650;
}

.visit-editor-hint {
    color: var(--insp-primary-dark);
}

html[data-bs-theme="dark"] .visit-editor-hint {
    color: var(--insp-accent);
}

.cal-widget {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    min-height: 0;
}

.cal-widget-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cal-mini-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cal-mini-title {
    color: var(--bs-body-color);
    font-weight: 650;
}

.cal-mini-step {
    width: 1.8rem;
    height: 1.8rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--fs-lg);
    line-height: 1;
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-mini-step:hover {
        background: color-mix(in srgb, var(--insp-primary) 10%, transparent);
    }

.cal-mini {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}

.cal-mini-weekday {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
}

.cal-mini-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 2.15rem;
    padding: 0.2rem 0;
    border-radius: 0.4rem;
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
}

    .cal-mini-day:hover {
        background: color-mix(in srgb, var(--insp-primary) 10%, transparent);
        color: var(--bs-body-color);
    }

    .cal-mini-day.is-out {
        opacity: 0.4;
    }

    .cal-mini-day.is-busy {
        background: color-mix(in srgb, var(--insp-primary) 6%, transparent);
    }

    .cal-mini-day.is-today .cal-mini-num {
        padding: 0 0.35em;
        border-radius: 999px;
        background: var(--insp-primary);
        color: #fff;
    }

    .cal-mini-day.is-overdue .cal-mini-num {
        color: #dc3545;
        font-weight: 700;
    }

html[data-bs-theme="dark"] .cal-mini-day.is-today .cal-mini-num {
    color: #08151c;
}

html[data-bs-theme="dark"] .cal-mini-day.is-overdue .cal-mini-num {
    color: #ff6b7a;
}

.cal-mini-marks {
    display: flex;
    gap: 2px;
}

.cal-mini-mark {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--kind);
}

    .cal-mini-mark.is-milestone {
        border-radius: 1px;
        transform: rotate(45deg) scale(0.85);
    }

.cal-feed-warning {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    border-radius: 0.5rem;
    background: color-mix(in srgb, #f59e0b 11%, transparent);
    font-size: var(--fs-xs);
}

.cal-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cal-feed {
    padding: 0.6rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--bs-border-color, #dee2e6) 75%, transparent);
    border-radius: 0.55rem;
}

.cal-feed-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
}

.cal-feed-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cal-feed-prefix {
    padding: 0 0.35rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--bs-body-color) 7%, transparent);
    font-size: var(--fs-2xs);
}

.cal-feed-meta {
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.cal-feed-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.cal-feed-preview {
    margin-top: 0.5rem;
}

.cal-feed-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

    .cal-feed-url code {
        flex: 1 1 18rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.cal-feed-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
}

@container cal-agenda (max-width: 720px) {
    .cal-agenda-day {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.5rem 0.65rem;
    }

    .cal-agenda-item {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .cal-agenda-meta {
        grid-column: 2;
    }
}

@media (max-width: 767.98px) {
    .cal-legend-hint {
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .cal-toolbar {
        align-items: stretch;
    }

    .cal-period {
        width: 100%;
        margin: 0.25rem 0 0;
        font-size: var(--fs-lg);
        order: -1;
    }

    .cal-nav .btn-action {
        min-height: 2.25rem;
        padding-inline: 0.8rem;
    }

    .cal-view {
        padding: 0.4rem 0.85rem;
    }

    .cal-cell {
        min-height: 3.4rem;
        padding: 2px;
        align-items: center;
    }

    .cal-day-number {
        align-self: center;
    }

    .cal-cell-entries {
        display: none;
    }

    .cal-cell-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }

    .cal-editor-pop {
        top: auto;
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100vh - 1rem);
    }

    .visit-editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-add-menu {
        right: auto;
        left: 0;
    }
}

.photo-add-panel {
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
}

.badge.ai-hint {
    background: #7c3aed;
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-2xs);
    vertical-align: middle;
    margin-left: .35rem;
}

.badge.filter-chip-ai {
    background: #7c3aed;
    color: #fff;
}

.smart-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.smart-photo {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: .75rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

.smart-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.smart-photo-remove {
    position: absolute;
    top: .25rem;
    right: .25rem;
    border: 0;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    line-height: 1;
}

.smart-drop {
    position: relative;
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
    min-width: 14rem;
    min-height: 120px;
    margin: 0;
    padding: .55rem .9rem;
    border: 1.5px dashed color-mix(in srgb, var(--insp-primary, #0088ca) 45%, var(--bs-border-color, #dee2e6));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--insp-primary, #0088ca) 4%, transparent);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.smart-drop:hover,
.smart-drop.is-dragging {
    border-color: var(--insp-primary, #0088ca);
    background: color-mix(in srgb, var(--insp-primary, #0088ca) 11%, transparent);
}

.smart-drop.is-busy {
    opacity: .7;
}

.smart-drop .smart-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.smart-drop-title {
    font-weight: 600;
}

.smart-drop-sub,
.smart-drop-hint {
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
}

.smart-camera video {
    max-width: 100%;
    max-height: 360px;
    border-radius: .75rem;
    background: #000;
}

.smart-progress,
.job-smart-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    border-left: 4px solid #7c3aed;
    background: rgba(124, 58, 237, .08);
    border-radius: .375rem;
    padding: .625rem .875rem;
}

.job-smart-banner {
    margin-bottom: 1rem;
}

.job-smart-banner.smart-failed {
    border-left-color: #dc3545;
    background: rgba(220, 53, 69, .08);
}

.job-smart-banner.smart-queued,
.job-smart-banner.smart-running {
    border-left-color: #6c757d;
    background: rgba(108, 117, 125, .08);
}

.smart-widget {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

    /* The tile keeps its own height: stretched it left the widget a row tall with one number in it. */
    .smart-widget > .profile-stat {
        height: auto;
    }

/* Left-aligned and clear of the corner, where the resize handle sits. */
.smart-widget-foot {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    padding-right: 1.75rem;
}

.smart-jobs-state {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem .9rem;
}

.smart-jobs-state dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.smart-jobs-state dd {
    margin: 0;
}

.smart-jobs-companies {
    width: auto;
    min-width: 22rem;
    max-width: 100%;
}

.smart-jobs-companies td,
.smart-jobs-companies th {
    padding: .15rem .6rem;
}

.smart-jobs-kept .badge {
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .smart-jobs-state {
        grid-template-columns: 1fr;
    }

    .smart-photo,
    .smart-drop {
        width: 100%;
    }
}

.proj-head-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

    .proj-head-bar:empty {
        display: none;
    }

.proj-head-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "main side";
    gap: .75rem 1.5rem;
    align-items: start;
    margin-top: .35rem;
}

@media (max-width: 1199.98px) {
    .proj-head-split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "side";
    }
}

.proj-head-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}

.proj-head-side {
    grid-area: side;
    min-width: 0;
}

/* The right card: milestones, what waits and places as tabs; the milestones' help and + Milník sit on the tab row. */
.proj-side {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

/* Milestones stay in the flow and set the height with the facts beside; the other tabs fill it and scroll, so switching moves nothing. */
.proj-side-body {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    min-height: 9rem;
}

.proj-side-pane {
    grid-area: 1 / 1;
    min-width: 0;
}

    .proj-side-pane.is-off {
        visibility: hidden;
    }

    .proj-side-pane.is-fill {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        scrollbar-width: thin;
    }

.proj-side .proj-places {
    height: 100%;
}

.proj-side .proj-places-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 7rem;
}

/* Tabs wrap on a narrow card, the same on every tab, so switching never changes the height. */
.proj-side-tabs {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 .1rem;
    min-height: 2rem;
    margin-bottom: .45rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.proj-side-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    margin-bottom: -1px;
    padding: .25rem .7rem;
    border: 1px solid transparent;
    border-radius: .45rem .45rem 0 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

    .proj-side-tab:hover {
        color: var(--bs-body-color);
    }

    .proj-side-tab.is-active {
        border-color: var(--bs-border-color);
        border-top: 2px solid var(--insp-primary);
        border-bottom-color: var(--bs-card-bg, var(--bs-body-bg));
        background: var(--bs-card-bg, var(--bs-body-bg));
        color: var(--bs-body-color);
    }

.proj-side-tab-count {
    padding: 0 .4rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.5;
}

    .proj-side-tab-count.has-alert {
        background: color-mix(in srgb, #d39b2a 24%, transparent);
        color: var(--bs-warning-text-emphasis);
    }

@media (max-width: 575.98px) {
    .proj-side-tab {
        padding: .25rem .45rem;
        font-size: var(--fs-xs);
    }
}

.rec-mini {
    padding: .5rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    font-size: var(--fs-sm);
}

.rec-mini-title {
    display: block;
    margin-bottom: .25rem;
}

.rec-mini-item {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    align-items: baseline;
    padding: .15rem 0;
    border-top: 1px dashed var(--bs-border-color);
}

    .rec-mini-item.is-paused .rec-mini-name {
        color: var(--bs-secondary-color);
    }

.rec-mini-name {
    font-weight: 600;
}

.proj-team > .job-team-chip > .band-action {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: .1rem .5rem;
    border-left: 0;
    border-radius: .35rem;
    line-height: 1.5;
    white-space: nowrap;
}

.proj-member-add {
    min-width: 18rem;
}

    .proj-member-add.is-wide {
        width: min(44rem, calc(100vw - 2rem));
        max-width: none;
    }

.proj-places,
.proj-wait {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.proj-places-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
}

    .proj-places-head > .band-action {
        min-width: 0;
        min-height: 0;
        padding: .05rem .45rem;
        border-left: 0;
        border-radius: .35rem;
    }

.proj-places-map {
    height: 13rem;
    border-radius: .45rem;
}

.proj-places-list {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.proj-place {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .1rem .55rem .1rem .15rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
}

    .proj-place:hover,
    .proj-place.is-on {
        border-color: var(--insp-primary);
    }

    .proj-place.is-on {
        background: color-mix(in srgb, var(--insp-primary) 14%, var(--bs-body-bg));
    }

.proj-place-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--insp-primary);
    color: #fff;
    font-weight: 700;
}

.proj-place.is-risk .proj-place-count {
    background: var(--bs-danger);
}

.proj-place-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-place-nopoint {
    color: var(--bs-danger);
}

.proj-pin-icon {
    background: transparent;
    border: 0;
}

.proj-pin {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0077b3;
    color: #fff;
    font: 700 12px/1 system-ui, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: pointer;
}

    .proj-pin.is-risk {
        background: #c42f2f;
    }

    .proj-pin.is-on {
        box-shadow: 0 0 0 3px var(--insp-primary), 0 2px 6px rgba(0, 0, 0, .3);
        transform: scale(1.15);
    }

.proj-wait-empty {
    margin: 0;
    color: var(--bs-success-text-emphasis);
    font-size: var(--fs-sm);
}

.proj-wait-group {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.proj-wait-label {
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.proj-wait-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .5rem;
    padding: .3rem .45rem;
    border-radius: .45rem;
    background: var(--bs-body-bg);
    font-size: var(--fs-sm);
}

    .proj-wait-item.is-risk {
        box-shadow: inset 3px 0 0 var(--bs-danger);
    }

.proj-wait-what {
    flex: 1 1 14rem;
    min-width: 0;
}

    .proj-wait-what > small {
        color: var(--bs-secondary-color);
    }

.proj-wait-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-left: auto;
}

.proj-line {
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px solid var(--bs-border-color);
}

/* The flags' lane above the line; a project without milestones has none, so the line sits right under the toolbar. */
.proj-axis {
    --axis-top: 2.6rem;
    position: relative;
    height: calc(var(--axis-top) + 2.6rem);
    margin: .25rem 0 0;
    user-select: none;
}

    .proj-axis.is-bare {
        --axis-top: .5rem;
    }

.proj-axis-line,
.proj-axis-fill {
    position: absolute;
    top: var(--axis-top);
    left: 0;
    height: 4px;
    border-radius: 2px;
}

.proj-axis-line {
    right: 0;
    background: var(--bs-secondary-bg);
}

.proj-axis-fill {
    background: var(--bs-success);
}

.proj-axis-pt {
    position: absolute;
    top: var(--axis-top);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

    .proj-axis-pt > i {
        display: block;
        width: 10px;
        height: 10px;
        margin-top: -3px;
        border: 2px solid var(--bs-secondary-color);
        border-radius: 50%;
        background: var(--bs-body-bg);
    }

    .proj-axis-pt.is-now > i {
        border-color: var(--bs-success);
        background: var(--bs-success);
    }

    .proj-axis-pt.is-below > span {
        margin-top: .15rem;
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
        white-space: nowrap;
    }

    .proj-axis-pt.is-now > span {
        color: var(--bs-success-text-emphasis);
        font-weight: 700;
    }

    .proj-axis-pt.is-flag {
        top: calc(var(--axis-top) + 2px);
        z-index: 1;
        display: block;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }

.proj-flag-label {
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    color: var(--bs-body-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.lane-1 > .proj-flag-label {
    top: calc(100% + 2px);
    bottom: auto;
}

.is-flag.is-risk .proj-flag-label {
    color: var(--bs-danger-text-emphasis);
}

.proj-flag {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 3px solid var(--bs-secondary-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1;
}

    .proj-flag.is-movable {
        cursor: grab;
    }

.is-met > .proj-flag,
.proj-flag.is-met {
    border-color: var(--bs-success);
    color: var(--bs-success);
}

.is-risk > .proj-flag,
.is-target:not(.is-met) > .proj-flag,
.proj-flag.is-risk,
.proj-flag.is-target:not(.is-met) {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.proj-edge {
    padding: 0 .45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .35rem;
    background: var(--bs-body-bg);
    color: var(--insp-link);
    font-size: var(--fs-2xs);
    line-height: 1.6;
    white-space: nowrap;
}

    .proj-edge:hover {
        border-color: var(--insp-primary);
    }

    .proj-edge.is-right {
        margin-left: .35rem;
    }

.proj-axis-pt.at-start > .proj-flag-label {
    left: 0;
    transform: none;
    text-align: left;
}

.proj-axis-pt.at-end > .proj-flag-label {
    right: 0;
    left: auto;
    transform: none;
    text-align: right;
}

.proj-strip {
    position: relative;
    grid-template-columns: repeat(var(--cells, 42), minmax(0, 1fr));
    gap: 2px;
}

@media (max-width: 575.98px) {
    .proj-strip {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

.proj-strip .job-strip-day {
    min-height: 3.4rem;
    padding: 2px 0 3px;
}

.proj-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

.proj-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--insp-primary);
}

    .proj-dot.is-done {
        background: var(--bs-success);
    }

    .proj-dot.is-open {
        background: transparent;
        box-shadow: inset 0 0 0 2px var(--insp-primary);
    }

    .proj-dot.is-late {
        background: var(--bs-danger);
    }

    .proj-dot.is-dim {
        opacity: .18;
    }

    .proj-dot.is-ring {
        outline: 2px solid #f0b429;
        outline-offset: 1px;
    }

    .proj-dot.is-movable {
        cursor: grab;
    }

/* The strip pans: the track holds buffer cells past both edges and slides under a viewport clipped at the sides. */
.proj-stage {
    position: relative;
}

.proj-viewport {
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
}

    .proj-viewport .proj-axis {
        cursor: grab;
    }

.proj-track {
    width: var(--track, 100%);
    transform: translateX(calc(var(--pan, 0px) - var(--base, 0%)));
}

    .proj-track.is-gliding {
        transition: transform .26s cubic-bezier(.2, .7, .2, 1);
    }

.proj-line.is-panning,
.proj-line.is-panning * {
    cursor: grabbing !important;
    user-select: none;
}

.proj-zoom {
    display: inline-flex;
    margin: 0 .25rem 0 .35rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .4rem;
}

.proj-zoom-btn {
    padding: 0 .5rem;
    border: 0;
    border-left: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    line-height: 1.7;
    white-space: nowrap;
}

    .proj-zoom-btn:first-child {
        border-left: 0;
    }

    .proj-zoom-btn:hover {
        background: color-mix(in srgb, var(--insp-primary) 10%, transparent);
        color: var(--bs-body-color);
    }

    .proj-zoom-btn.is-on {
        background: color-mix(in srgb, var(--insp-primary) 18%, transparent);
        color: var(--insp-link);
        font-weight: 700;
    }

/* Three months by day: narrow cells, the number only on Mondays, the first of a month and today. */
.proj-strip.is-compact .job-strip-day {
    min-height: 2.9rem;
    padding: 2px 0;
    border-radius: .25rem;
}

.proj-strip.is-compact .job-strip-wd {
    display: none;
}

.proj-strip.is-compact .job-strip-dn {
    font-size: var(--fs-2xs);
}

.proj-strip.is-compact .job-strip-day:not(.is-monday):not(.is-first):not(.is-today) .job-strip-dn {
    visibility: hidden;
}

.proj-strip.is-compact .proj-dots {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
}

.proj-strip.is-compact .proj-dot {
    width: 6px;
    height: 6px;
}

.proj-strip.is-weeks .job-strip-day {
    min-height: 3.4rem;
}

.proj-strip.is-weeks .job-strip-wd {
    min-height: 1em;
    color: var(--insp-link);
    font-weight: 700;
    white-space: nowrap;
}

.proj-strip.is-weeks .job-strip-day.is-month {
    border-left: 2px solid var(--insp-primary);
}

.lane-2 > .proj-flag-label {
    display: none;
}

.proj-dot-more {
    color: var(--bs-secondary-color);
    font-size: 9px;
    line-height: 8px;
}

/* Hover lifts a day and enlarges a dot, flag or bell; linked items light up together and the rest of the strip fades. */
.proj-strip .job-strip-day {
    transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .25s ease, background-color .3s ease;
}

    .proj-strip .job-strip-day:not(.is-buffer):hover {
        z-index: 2;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
    }

    .proj-strip .job-strip-day.is-hl {
        border-color: var(--insp-primary);
        background-color: color-mix(in srgb, var(--insp-primary) 12%, var(--bs-body-bg));
    }

.proj-dot {
    transition: transform .18s ease-out, opacity .3s ease, box-shadow .25s ease;
}

    .proj-dot:hover,
    .proj-dot.is-hl {
        transform: scale(1.5);
    }

    .proj-dot.is-hl {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--insp-primary) 30%, transparent);
    }

.proj-flag {
    transition: transform .18s ease-out, box-shadow .25s ease;
}

    .proj-flag:hover,
    .proj-flag.is-hl {
        transform: scale(1.18);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--insp-primary) 22%, transparent);
    }

.proj-axis-pt.is-flag {
    transition: opacity .3s ease;
}

.proj-bell {
    transition: transform .18s ease-out;
}

    .proj-bell.is-hl {
        transform: scale(1.5);
    }

.hl-on .proj-strip .proj-dot:not(.is-hl) {
    opacity: .28;
}

.hl-on .proj-axis-pt.is-flag:not(:has(.is-hl)) {
    opacity: .4;
}

.ms-item,
.proj-wait-item,
.job-when-bells > li {
    transition: background-color .3s ease;
}

    .ms-item.is-hl,
    .proj-wait-item.is-hl,
    .job-when-bells > li.is-hl {
        border-radius: .35rem;
        background-color: color-mix(in srgb, var(--insp-primary) 12%, transparent);
    }

/* The projects list's timeline: a row per project from its start to its target, today as one line across the rows. */
.pg {
    --label: 16rem;
    --gap: .75rem;
    --row-line: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
    container: pg / inline-size;
}

/* Beside other blocks the head keeps one line: the legend gives way first. */
@container pg (max-width: 1000px) {
    .pg .pg-legend {
        display: none;
    }
}

.pg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin-bottom: .35rem;
}

.pg-range {
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.pg-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .75rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
}

    .pg-legend > span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    .pg-legend .pg-mark {
        position: static;
        width: 1.05rem;
        height: 1.05rem;
        border-width: 2px;
        font-size: 8px;
        font-style: normal;
        transform: none;
    }

.pg-body {
    position: relative;
}

.pg-axis,
.pg-row {
    display: grid;
    grid-template-columns: var(--label) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: center;
}

.pg-axis {
    height: 2.3rem;
}

.pg-ticks {
    position: relative;
    height: 100%;
}

.pg-month {
    position: absolute;
    top: 0;
    padding-left: 6px;
    border-left: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

.pg-tick {
    position: absolute;
    bottom: 2px;
    padding-left: 4px;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-variant-numeric: tabular-nums;
}

.pg-now {
    position: absolute;
    bottom: 1px;
    left: calc(var(--today) * 100%);
    z-index: 1;
    padding: 0 .35rem;
    border-radius: .3rem;
    background: var(--bs-success);
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.4;
    transform: translateX(-50%);
}

/* Weekly gridlines behind the bars (monthly on the year scale). */
.pg-grid {
    position: absolute;
    top: 2.3rem;
    bottom: 0;
    left: calc(var(--label) + var(--gap) + (100% - var(--label) - var(--gap)) * var(--at));
    width: 1px;
    background: var(--row-line);
    pointer-events: none;
}

.pg-row {
    position: relative;
    min-height: 2.05rem;
    border-top: 1px solid var(--row-line);
    cursor: pointer;
    transition: background-color .3s ease;
}

    .pg-row:hover,
    .pg-row.is-hl {
        background-color: color-mix(in srgb, var(--pc) 9%, transparent);
    }

.pg-name {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

    .pg-name:hover .pg-title {
        color: var(--insp-link);
    }

.pg-av {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: .35rem;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
}

.pg-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pg-track {
    position: relative;
    height: 2rem;
}

.pg-bar {
    position: absolute;
    top: 50%;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--pc) 30%, transparent);
}

    .pg-bar.is-done {
        background: var(--pc);
    }

    .pg-bar.is-cut-start {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
        mask-image: linear-gradient(90deg, transparent, #000 40px);
    }

    .pg-bar.is-span {
        height: 6px;
        margin-top: -3px;
        border-radius: 3px;
        background: color-mix(in srgb, var(--pc) 35%, transparent);
    }

    .pg-bar.is-cut-end {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .pg-bar.is-open {
        height: 0;
        margin-top: -1px;
        border-top: 2px dashed color-mix(in srgb, var(--pc) 55%, transparent);
        border-radius: 0;
        background: none;
    }

.pg-mark {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--bs-secondary-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transform: translate(-50%, -50%);
    transition: transform .18s ease-out, box-shadow .25s ease;
}

    .pg-mark:hover {
        color: var(--bs-body-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--insp-primary) 22%, transparent);
        transform: translate(-50%, -50%) scale(1.2);
    }

    .pg-mark.is-met {
        border-color: var(--bs-success);
        color: var(--bs-success);
    }

    .pg-mark.is-risk {
        border-color: var(--bs-danger);
        color: var(--bs-danger);
    }

    .pg-mark.is-missed {
        border-color: var(--bs-danger);
        background: var(--bs-danger);
        color: #fff;
    }

    .pg-mark.is-target.is-open {
        border-color: var(--bs-body-color);
    }

/* The target's day right after its flag (a job's due day after its dot), or at the edge when the flag is off the window. */
.pg-tl {
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-left: .85rem;
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
}

    .pg-tl.is-before {
        margin-left: -.85rem;
        transform: translate(-100%, -50%);
    }

    .pg-tl.is-edge {
        right: .35rem;
        margin: 0;
        padding: 0 .4rem;
        border-radius: .3rem;
        background: var(--bs-card-bg);
    }

        .pg-tl.is-edge.is-start {
            right: auto;
            left: .35rem;
        }

    .pg-tl.is-small {
        margin-left: .6rem;
        font-size: var(--fs-2xs);
        font-weight: 600;
    }

        .pg-tl.is-small.is-before {
            margin-left: -.6rem;
        }

    .pg-tl.is-muted {
        color: var(--bs-secondary-color);
        font-weight: 400;
    }

    .pg-tl.is-bad {
        color: var(--bs-danger-text-emphasis);
    }

/* A group of jobs outside any project: a dot per due date, a click unfolds a row per job. */
.pg-group {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

.pg-av.is-group {
    background: var(--pc);
    font-size: 11px;
}

/* Folds or unfolds every group at once. */
.pg-fold {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: .4rem;
    background: transparent;
    color: var(--bs-secondary-color);
    transition: background-color .2s ease, color .2s ease;
}

    .pg-fold:hover,
    .pg-fold:focus-visible {
        background: color-mix(in srgb, var(--insp-primary) 14%, transparent);
        color: var(--bs-body-color);
    }

    .pg-fold svg {
        width: 1.05rem;
        height: 1.05rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.pg-count {
    flex: none;
    margin-left: auto;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-weight: 400;
}

.pg-caret {
    flex: none;
    color: var(--bs-secondary-color);
    font-size: 10px;
    transition: transform .2s ease;
}

.pg-row.is-open .pg-caret {
    transform: rotate(90deg);
}

.pg-dot {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--insp-primary);
    transform: translate(-50%, -50%);
    transition: transform .18s ease-out, box-shadow .25s ease;
}

    .pg-dot.is-open {
        background: var(--bs-body-bg);
        box-shadow: inset 0 0 0 2px var(--insp-primary);
    }

    .pg-dot.is-done {
        background: var(--bs-success);
    }

    .pg-dot.is-late {
        background: var(--bs-danger);
    }

    .pg-dot.is-draft {
        background: var(--bs-body-bg);
        box-shadow: inset 0 0 0 2px var(--bs-secondary-color);
    }

    .pg-dot:hover,
    .pg-dot.is-hl {
        transform: translate(-50%, -50%) scale(1.5);
    }

.pg-row.pg-sub {
    min-height: 1.7rem;
    border-top: 1px dotted var(--row-line);
    cursor: default;
}

.pg-sub .pg-track {
    height: 1.7rem;
}

.pg-sub-name {
    padding-left: 1.8rem;
    font-size: var(--fs-xs);
    font-weight: 400;
}

    .pg-sub-name .job-no {
        flex: none;
        margin-right: .35rem;
        color: var(--bs-secondary-color);
        font-family: var(--bs-font-monospace);
        font-size: var(--fs-2xs);
    }

.pg-bar.is-job {
    height: 3px;
    margin-top: -1.5px;
    background: color-mix(in srgb, var(--pc) 35%, transparent);
}

.pg-sub-more {
    padding: .2rem 0 .3rem calc(1.8rem + .2rem);
    border-top: 1px dotted var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

.pg-today {
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: calc(var(--label) + var(--gap) + (100% - var(--label) - var(--gap)) * var(--today));
    width: 2px;
    margin-left: -1px;
    background: var(--bs-success);
    pointer-events: none;
}

.pg-more {
    margin-top: .35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--insp-link);
    font-size: var(--fs-sm);
}

.project-card.is-hl {
    box-shadow: 0 0 0 2px var(--proj-accent), 0 8px 22px rgba(0, 0, 0, .18);
}

/* The card the job list below is filtered to. */
.project-card.is-picked {
    background: color-mix(in srgb, var(--proj-accent) 6%, var(--bs-body-bg));
    box-shadow: 0 0 0 2px var(--proj-accent);
}

/* A long project name keeps its card in line with the others; the full name is in the tooltip. */
.project-grid .project-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-grid .project-card .flex-grow-1 {
    min-width: 0;
}

.project-grid .project-main-place {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Groups of jobs outside projects are not projects: a dashed accent tells them apart. */
.job-group-card {
    border-top-style: dashed;
}

/* The top bar's thin yellow line: a long soft light drifts along it every 10 s and the yellow grows while a page loads; nothing flashes. */
main > .top-row > .top-row-glow {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
}

.top-row-comet {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -56rem;
    width: 56rem;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 249, 200, .45) 50%, rgba(255, 249, 200, .7) 78%, transparent);
    animation: top-row-comet 10s linear infinite;
}

@keyframes top-row-comet {
    0% {
        left: -56rem;
        opacity: 0;
    }

    3.6% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    60% {
        left: 100%;
        opacity: 0;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.top-row-load {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    opacity: 0;
    background: linear-gradient(90deg, var(--insp-yellow), color-mix(in srgb, var(--insp-yellow) 55%, transparent));
    transition: opacity .6s ease;
}

    .top-row-load.is-busy {
        opacity: 1;
        animation: top-row-load 6s cubic-bezier(.1, .6, .3, 1) forwards;
    }

    .top-row-load.is-done {
        width: 100%;
        opacity: 0;
        transition: width .45s ease-out, opacity .9s ease .45s;
    }

@keyframes top-row-load {
    from {
        width: 0;
    }

    to {
        width: 85%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-row-comet {
        animation: none;
    }

    .top-row-load.is-busy {
        width: 100%;
        opacity: .6;
        animation: none;
    }

    .top-row-load.is-done {
        transition: none;
    }
}

/* Section tabs (Zakázky, Technici) are headings in the top bar on a wider screen; a phone keeps them as a ribbon. */
@media (min-width: 768px) {
    .page-header-tools > .section-ribbon {
        display: none;
    }
}

/* Zakázky: the map in a quarter column beside the project cards, which flow around it; the side is the account's choice. */
.work-flow.has-aside {
    --g: .9rem;
    --cols: 4;
    display: flow-root;
    container: work / inline-size;
}

@container work (max-width: 1150px) {
    .work-flow > * {
        --cols: 3;
    }
}

.work-flow.has-aside > .work-aside {
    box-sizing: border-box;
    width: calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols) + var(--g));
    margin-bottom: var(--g);
}

.work-flow.is-aside-left > .work-aside {
    float: left;
    padding-right: var(--g);
    margin-right: calc(-1 * var(--g));
}

.work-flow.is-aside-right > .work-aside {
    float: right;
    padding-left: var(--g);
    margin-left: calc(-1 * var(--g));
}

/* The head sits beside the float from its very edge, so it keeps the gap itself. */
.work-flow.is-aside-left > .work-cards-head {
    padding-left: var(--g);
}

.work-flow.is-aside-right > .work-cards-head {
    padding-right: var(--g);
}

/* Inline cards shorten their lines beside the float and take the full width under it. */
.work-flow.has-aside > .project-grid {
    display: block;
    font-size: 0;
}

.work-flow.is-aside-left > .project-grid {
    margin-left: calc(-1 * var(--g));
}

.work-flow.is-aside-right > .project-grid {
    margin-right: calc(-1 * var(--g));
}

.work-flow.has-aside > .project-grid > .project-card {
    display: inline-block;
    width: calc((100% - var(--cols) * var(--g)) / var(--cols));
    margin-bottom: var(--g);
    font-size: var(--bs-body-font-size);
    vertical-align: top;
}

.work-flow.is-aside-left > .project-grid > .project-card {
    margin-left: var(--g);
}

.work-flow.is-aside-right > .project-grid > .project-card {
    margin-right: var(--g);
}

.work-aside .jobs-map-widget {
    margin-bottom: 0 !important;
}

    .work-aside .jobs-map-widget .card {
        padding: .75rem !important;
    }

.work-aside .map-breakdown {
    gap: .6rem;
}

.work-aside .map-breakdown-map {
    min-width: 0;
}

    .work-aside .map-breakdown-map .area-head {
        position: static;
        display: flex;
        margin-bottom: .4rem;
    }

.work-aside .map-breakdown .region-map svg {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 330px;
    margin-inline: auto;
}

.work-aside-look svg,
.area-search-btn svg,
.tech-look svg {
    display: block;
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A small two-way choice as a pill (the new-job page's look and its preview's stage). */
.pill-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
}

.pill-switch-option {
    padding: .2rem .8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .25s ease, color .25s ease;
}

    .pill-switch-option:hover:not(.active) {
        color: var(--bs-body-color);
    }

    .pill-switch-option.active {
        background: var(--insp-primary);
        color: #fff;
    }

.pill-switch.is-small .pill-switch-option {
    padding: .1rem .6rem;
    font-size: var(--fs-2xs);
}

@media (min-width: 1200px) {
    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-switch {
        border-color: rgba(255, 255, 255, .45);
        background: rgba(255, 255, 255, .12);
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-switch-option {
        color: rgba(232, 244, 251, .85);
    }

    html:not([data-bs-theme="dark"]) .page-header-tools:not(.tools-below) .pill-switch-option.active {
        background: #fff;
        color: #003c58;
    }
}

/* The new-job page: a guide in three steps, or every part on one page with a nav; the technician's preview on the right either way. */
.job-steps {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    margin-bottom: .9rem;
    padding: .6rem .9rem;
}

.job-step,
.job-part {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .15rem .3rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: inherit;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

    .job-step:disabled {
        opacity: .5;
    }

.job-step-num {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 50%;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    font-weight: 700;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.job-step-label {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

    .job-step-label small {
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
        font-weight: 400;
    }

.job-step.is-current .job-step-num,
.job-part.is-current .job-step-num {
    border-color: var(--insp-primary);
    background: var(--insp-primary);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, #ffed36 70%, transparent);
}

.job-step.is-ok .job-step-num,
.job-part.is-ok .job-step-num {
    border-color: #198754;
    background: #198754;
    color: #fff;
}

.job-step.is-bad .job-step-num {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

.job-steps-bar {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: var(--bs-border-color);
    transition: background-color .3s ease;
}

    .job-steps-bar.is-ok {
        background: #198754;
    }

.job-create-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1rem;
    align-items: start;
}

.job-create.is-one-page .job-create-main {
    grid-template-columns: 13rem minmax(0, 1fr) 22rem;
}

.job-parts,
.job-preview {
    position: sticky;
    top: 4.5rem;
}

.job-parts {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .7rem;
}

.job-parts-head {
    margin-bottom: .2rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.job-part {
    width: 100%;
    padding: .3rem .4rem;
    transition: background-color .3s ease;
}

    .job-part:hover,
    .job-part.is-current {
        background: color-mix(in srgb, var(--insp-primary) 8%, transparent);
    }

.job-parts-foot {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--bs-border-color);
}

.job-steps-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.job-wizard-sep {
    margin: .9rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.job-wizard-quick {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}

.row > .job-wizard-quick-row {
    margin-top: 0;
}

    .job-wizard-quick-row .job-wizard-quick {
        margin-top: .35rem;
    }

.job-preview {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: .85rem;
}

.job-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.job-preview-card {
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
}

.job-preview-top {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: .55rem;
}

.job-preview-name {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

    .job-preview-name > b {
        overflow-wrap: anywhere;
    }

    .job-preview-name > b.is-empty {
        color: var(--bs-secondary-color);
        font-style: italic;
        font-weight: 600;
    }

.job-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.job-preview-facts {
    display: grid;
    gap: .2rem;
    margin: 0 0 .55rem;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
}

    .job-preview-facts > li {
        display: flex;
        gap: .45rem;
    }

.job-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
}

.job-preview-intern {
    padding: .55rem .7rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

    .job-preview-intern > b {
        color: var(--bs-body-color);
    }

.job-preview-required {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .6rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
}

    .job-preview-required .is-ok {
        color: #198754;
    }

@media (max-width: 1199.98px) {
    .job-create-main,
    .job-create.is-one-page .job-create-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-parts,
    .job-preview {
        position: static;
    }

    .job-parts {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .job-parts .job-part {
            width: auto;
        }
}

/* The technician directory's widget: the map, the qualifications as bars and a column of availability, numbers and people (C3). */
.tech-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}

    .tech-overview .tech-overview-map .region-map svg {
        display: block;
        width: 100%;
        max-height: 300px;
    }

    .tech-overview .tech-overview-map .area-head {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 21;
    }

.tech-overview-head {
    margin: 0 0 .45rem;
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .tech-overview-head > span {
        margin-left: .4rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
    }

.tech-overview-side > .tech-overview-head:not(:first-child) {
    margin-top: .9rem;
}

.category-bars {
    display: grid;
    gap: 1px;
}

.category-barrow {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) minmax(3rem, 42%) 1.6rem;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .12rem .4rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: none;
    color: inherit;
    font-size: var(--fs-xs);
    text-align: left;
    transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}

    .category-barrow > i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .category-barrow-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .category-barrow-track {
        height: 6px;
        border-radius: 3px;
        background: color-mix(in srgb, currentColor 10%, transparent);
        overflow: hidden;
    }

        .category-barrow-track > span {
            display: block;
            height: 100%;
            border-radius: 3px;
        }

    .category-barrow > b {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .category-barrow.chart-key-on {
        background-color: color-mix(in srgb, currentColor 8%, transparent);
    }

    .category-barrow.chart-key-dim {
        opacity: .45;
    }

    .category-barrow.selected,
    .tech-avail-row.selected {
        border-color: #ffb020;
        background-color: color-mix(in srgb, #ffb020 14%, transparent);
    }

.tech-avail {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.segment-ring {
    flex: none;
    overflow: visible;
}

    .segment-ring .chart-slice {
        transition: opacity .3s ease;
    }

.segment-ring-center {
    fill: currentColor;
    font-size: 22px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
}

.segment-ring-caption {
    fill: var(--bs-secondary-color);
    font-size: 11px;
    text-anchor: middle;
    dominant-baseline: central;
}

.tech-avail-legend {
    display: grid;
    flex: 1;
    gap: 1px;
    min-width: 0;
}

.tech-avail-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    padding: .1rem .4rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    background: none;
    color: inherit;
    font-size: var(--fs-xs);
    text-align: left;
    transition: background-color .3s ease, opacity .3s ease;
}

    .tech-avail-row > i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .tech-avail-row > b {
        font-variant-numeric: tabular-nums;
    }

    .tech-avail-row.chart-key-on {
        background-color: color-mix(in srgb, currentColor 8%, transparent);
    }

    .tech-avail-row.chart-key-dim {
        opacity: .45;
    }

.tech-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: .45rem;
    margin-top: .8rem;
}

.tech-tile {
    display: flex;
    flex-direction: column;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    line-height: 1.15;
}

    .tech-tile > b {
        font-size: var(--fs-lg);
    }

    .tech-tile > span {
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
    }

.tech-star {
    color: #f59e0b;
}

.tech-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .2rem .35rem;
    border-radius: .45rem;
    color: inherit;
    font-size: var(--fs-xs);
    text-decoration: none;
    transition: background-color .3s ease, opacity .3s ease;
}

    .tech-top:hover,
    .tech-top.chart-key-on {
        background-color: color-mix(in srgb, currentColor 8%, transparent);
        color: inherit;
    }

    .tech-top.chart-key-dim {
        opacity: .5;
    }

.tech-top-av {
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--state);
}

.tech-top-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-top-facts {
    display: inline-flex;
    gap: .5rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .tech-overview {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tech-overview .area-head,
.tech-plane .area-head {
    display: flex;
    gap: .35rem;
}

/* The widget's second look (E): the map as a plane with floating cards, and under it a drifting strip of people (js/tech-strip.js). */
.tech-plane .tech-overview-map {
    position: relative;
    min-height: 300px;
    padding: .4rem 0 .2rem;
    border-radius: .6rem;
    background: color-mix(in srgb, var(--insp-primary) 5%, transparent);
}

    .tech-plane .tech-overview-map .region-map svg {
        display: block;
        width: auto;
        max-width: 100%;
        height: 270px;
        margin: 0 auto;
    }

    .tech-plane .tech-overview-map .area-head {
        position: absolute;
        top: .6rem;
        right: .75rem;
        left: auto;
        z-index: 21;
    }

.tech-plane .tech-map-note {
    text-align: center;
}

.tech-plane-card {
    position: absolute;
    z-index: 5;
    width: 250px;
    max-height: calc(100% - 1.5rem);
    overflow: auto;
    padding: .65rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.tech-plane-cats {
    top: .75rem;
    left: .75rem;
}

.tech-plane-avail {
    right: .75rem;
    bottom: .75rem;
}

.tech-plane .category-barrow {
    grid-template-columns: 8px minmax(0, 1fr) 1.6rem;
}

.tech-plane .category-barrow-track {
    display: none;
}

.tech-plane-facts {
    display: grid;
    gap: .15rem;
    margin-top: .45rem;
    padding: .45rem .4rem 0;
    border-top: 1px solid var(--bs-border-color);
    font-size: var(--fs-xs);
}

    .tech-plane-facts b {
        float: right;
    }

.tech-strip-head {
    margin: .9rem 0 .45rem;
    font-size: var(--fs-sm);
    font-weight: 700;
}

    .tech-strip-head > span {
        margin-left: .5rem;
        color: var(--bs-secondary-color);
        font-size: var(--fs-2xs);
        font-weight: 400;
    }

.tech-strip {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}

    .tech-strip.is-still {
        cursor: default;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .tech-strip.is-dragging {
        cursor: grabbing;
    }

.tech-strip-track {
    display: flex;
    gap: .6rem;
    width: max-content;
    padding: 2px 0;
    will-change: transform;
}

.tech-card {
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    width: 15.5rem;
    padding: .5rem .65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    -webkit-user-drag: none;
    transition: opacity .3s ease, background-color .3s ease, border-color .3s ease;
}

    .tech-card:hover,
    .tech-card.chart-key-on {
        border-color: color-mix(in srgb, var(--insp-primary) 45%, transparent);
        background-color: color-mix(in srgb, var(--insp-primary) 5%, var(--bs-body-bg));
        color: inherit;
    }

    .tech-card.chart-key-dim {
        opacity: .45;
    }

.tech-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: var(--fs-xs);
    line-height: 1.3;
}

.tech-card-name {
    overflow: hidden;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tech-card-state {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--bs-secondary-color);
}

    .tech-card-state > i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
    }

.tech-card-facts {
    display: flex;
    gap: .3rem;
    overflow: hidden;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.tech-card-cats {
    display: flex;
    gap: 3px;
    align-self: start;
}

    .tech-card-cats > i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

.tech-strip-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background: var(--bs-body-bg);
    color: inherit;
    transform: translateY(-50%);
}

    .tech-strip-arrow:first-of-type {
        left: .2rem;
    }

    .tech-strip-arrow:last-of-type {
        right: .2rem;
    }

@media (max-width: 991.98px) {
    .tech-plane-card {
        position: static;
        width: auto;
        max-height: none;
        margin: .6rem .6rem 0;
    }
}

/* Categories in a narrow column: each count once; hover links a part with its chip or row through the shared data-key. */
.category-compact {
    display: block;
    width: 100%;
}

    .category-compact .is-toggle {
        cursor: pointer;
    }

.map-breakdown .category-breakdown.category-compact {
    flex-direction: row;
    min-width: 0;
}

.category-stack {
    display: flex;
    gap: 2px;
    height: 24px;
    margin: .3rem 0 .55rem;
}

.category-stack-part {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 3px;
    border-radius: 3px;
    transition: transform .35s var(--ease-out), opacity .3s ease;
}

.category-stack-count {
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    pointer-events: none;
}

    .category-stack-part:first-child {
        border-radius: 6px 3px 3px 6px;
    }

    .category-stack-part:last-child {
        border-radius: 3px 6px 6px 3px;
    }

    .category-stack-part.chart-slice.chart-key-on {
        transform: translateY(-2px);
        filter: none;
    }

    .category-stack-part.selected {
        box-shadow: inset 0 0 0 2px #ffb020;
    }

    .category-stack-part::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        z-index: 5;
        padding: .15rem .5rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .4rem;
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        font-size: var(--fs-2xs);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateX(-50%);
        transition: opacity .2s ease;
    }

    .category-stack-part:hover::after {
        opacity: 1;
    }

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .3rem;
}

.category-chip,
.category-row {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    border: 1px solid transparent;
    background: none;
    color: inherit;
    font-size: var(--fs-2xs);
    line-height: 1.35;
    text-align: left;
    transition: background-color .3s ease, border-color .3s ease, opacity .3s ease;
}

.category-chip {
    max-width: 100%;
    padding: .05rem .5rem .05rem .4rem;
    border-radius: 999px;
}

    .category-chip > i,
    .category-row > i {
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .category-chip-label,
    .category-row-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .category-chip > b,
    .category-row > b {
        font-variant-numeric: tabular-nums;
    }

    .category-chip.chart-key-on,
    .category-row.chart-key-on {
        background-color: color-mix(in srgb, currentColor 8%, transparent);
    }

    .category-chip.chart-key-dim,
    .category-row.chart-key-dim {
        opacity: .45;
    }

    .category-chip.selected,
    .category-row.selected {
        border-color: #ffb020;
        background-color: color-mix(in srgb, #ffb020 14%, transparent);
    }

.category-ring {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.category-ring-chart {
    flex: none;
    width: 96px;
    height: 96px;
    overflow: visible;
}

.category-ring-part {
    transition: opacity .3s ease;
}

    .category-ring-part.selected {
        stroke: #ffb020;
        stroke-width: 2;
    }

.category-ring-share {
    fill: currentColor;
    font-size: 16px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

    .category-ring-share.chart-key-on {
        opacity: 1;
    }

.category-rows {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 1px;
}

.category-row {
    display: flex;
    padding: .05rem .4rem;
    border-radius: .4rem;
}

    .category-row-label {
        flex: 1;
    }

/* A tablet or a phone puts the map back under the cards, full width. */
@media (max-width: 991.98px) {
    .work-flow.has-aside {
        display: flex;
        flex-direction: column;
    }

    .work-flow.has-aside > .work-aside {
        order: 3;
        float: none;
        width: auto;
        margin: 0 0 .75rem;
        padding: 0;
    }

    .work-flow.has-aside > .work-cards-head {
        padding-inline: 0;
    }

    .work-flow.has-aside > .project-grid {
        display: grid;
        margin: 0 0 .75rem;
        font-size: inherit;
    }

    .work-flow.has-aside > .project-grid > .project-card {
        display: block;
        width: auto;
        margin: 0;
    }

    .work-aside-side {
        display: none;
    }
}

.work-cards-head,
.jobs-list-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin: .25rem 0 .6rem;
}

.jobs-list-head {
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* On a phone the name sits above its bar, so the bars get the whole width; week numbers give way to the months. */
@media (max-width: 767.98px) {
    .pg {
        --label: 0px;
        --gap: .35rem;
    }

    .pg-legend,
    .pg-tick {
        display: none;
    }

    .pg-row > .pg-name {
        position: relative;
        z-index: 1;
        grid-column: 1 / -1;
        justify-self: start;
        max-width: 100%;
        margin-top: .3rem;
        padding-right: .35rem;
        background: var(--bs-card-bg);
    }

    .pg-row > .pg-track {
        grid-row: 2;
        grid-column: 2;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pg-mark,
    .pg-row {
        transition: none;
    }

        .pg-mark:hover {
            transform: translate(-50%, -50%);
        }
}

.strip-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    max-width: 22rem;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    color: var(--bs-body-color);
    font-size: var(--fs-xs);
    line-height: 1.4;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .16s ease, transform .16s ease;
}

    .strip-tip.is-on {
        opacity: 1;
        transform: none;
    }

    .strip-tip::first-line {
        font-weight: 700;
    }

@media (prefers-reduced-motion: reduce) {
    .proj-track.is-gliding,
    .proj-strip .job-strip-day,
    .proj-dot,
    .proj-flag,
    .proj-bell,
    .strip-tip {
        transition: none;
    }

    .proj-strip .job-strip-day:not(.is-buffer):hover,
    .proj-dot:hover,
    .proj-dot.is-hl,
    .proj-flag:hover,
    .proj-flag.is-hl,
    .proj-bell.is-hl {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .proj-track {
        width: 100%;
        transform: none;
    }

    .proj-strip .job-strip-day.is-buffer,
    .proj-viewport .proj-axis,
    .proj-zoom {
        display: none;
    }
}

.proj-day-backdrop {
    z-index: 29;
}

.proj-day-card {
    position: absolute;
    top: calc(100% + .3rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    width: min(28rem, calc(100vw - 2rem));
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: var(--fs-sm);
    cursor: default;
}

.proj-day-head {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.proj-day-close {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: .35rem;
    background: transparent;
    color: var(--bs-secondary-color);
}

.proj-day-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

    .proj-day-actions > .band-action,
    .proj-day-list .band-action {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        padding: .1rem .5rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .35rem;
        line-height: 1.5;
        white-space: nowrap;
    }

.proj-day-list {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .proj-day-list > li {
        display: flex;
        align-items: center;
        gap: .4rem;
        min-width: 0;
    }

.proj-day-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proj-day-flag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--insp-link);
    text-align: left;
}

    .proj-day-flag > .proj-flag {
        width: 1.3rem;
        height: 1.3rem;
        border-width: 2px;
    }

.project-leave-panel {
    min-width: 21rem;
    gap: .4rem;
}

.proj-bell {
    position: absolute;
    top: -6px;
    right: -4px;
    z-index: 1;
    font-size: 10px;
    line-height: 1;
    pointer-events: none;
}

    .proj-bell.is-sent {
        filter: grayscale(1);
        opacity: .55;
    }

.proj-day-sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-top: .35rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.proj-day-bells {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .proj-day-bells > li {
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: .4rem;
        font-size: var(--fs-xs);
    }

        .proj-day-bells > li.is-sent {
            opacity: .75;
        }

.proj-bell-time {
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.proj-bell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .proj-bell-text > small {
        color: var(--bs-secondary-color);
    }

.proj-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-bottom: 1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-body-bg);
}

.proj-sum-cell {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

    .proj-sum-cell + .proj-sum-cell {
        padding-left: 1.25rem;
        border-left: 1px solid var(--bs-border-color);
    }

.proj-sum-donut {
    flex: none;
}

.proj-sum-center {
    fill: currentColor;
    font-size: 14px;
    font-weight: 700;
}

.proj-sum-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.proj-sum-cap {
    color: var(--bs-secondary-color);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.proj-sum-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .5rem;
}

.proj-sum-lg {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .05rem .4rem;
    border-radius: .35rem;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    white-space: nowrap;
    text-decoration: none;
}

    a.proj-sum-lg:hover {
        background: color-mix(in srgb, var(--insp-primary) 10%, transparent);
        text-decoration: none;
    }

    .proj-sum-lg.is-on {
        background: color-mix(in srgb, var(--insp-primary) 18%, transparent);
        box-shadow: inset 0 0 0 1px var(--insp-primary);
    }

    .proj-sum-lg.is-zero {
        opacity: .45;
    }

.proj-sum-dot {
    width: .65rem;
    height: .65rem;
    flex: none;
    border-radius: .2rem;
}

.proj-sum-pace {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    margin-left: auto;
    white-space: nowrap;
    color: var(--bs-secondary-color);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-align: right;
}

    .proj-sum-pace b {
        color: var(--bs-body-color);
    }

.proj-sum-late {
    color: var(--bs-danger-text-emphasis);
}

.proj-sum-ok {
    color: var(--bs-success-text-emphasis);
}

@media (max-width: 767.98px) {
    .proj-sum-cell + .proj-sum-cell {
        padding-left: 0;
        border-left: 0;
    }

    .proj-sum-pace {
        margin-left: 0;
        text-align: left;
    }
}

.pdrawer.project-edit-drawer {
    width: min(34rem, 100vw);
}

.project-edit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-edit-preview {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .6rem;
    background: var(--bs-tertiary-bg);
}

.project-edit-preview-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .3rem;
}

.project-edit-preview-name {
    min-width: 0;
    overflow: hidden;
    font-size: var(--fs-lg);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-edit-photo {
    display: flex;
    align-items: center;
    gap: .25rem;
}

    .project-edit-photo .btn {
        --bs-btn-padding-y: .1rem;
        --bs-btn-padding-x: .5rem;
        --bs-btn-font-size: var(--fs-sm);
    }

    .project-edit-photo-upload:focus-within {
        outline: 2px solid var(--bs-focus-ring-color);
        outline-offset: 1px;
    }

.project-edit-field .form-label {
    margin-bottom: .3rem;
    font-weight: 600;
}

.project-edit-colors {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.pdrawer.project-privacy-drawer {
    width: min(52rem, 100vw);
}

.pdrawer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

/* Dates, prices and distances stay on one line; a long company name ends in an ellipsis instead of growing the row. */
.table-scroll td:is([data-col="termin"], [data-col="cena"], [data-col="vytvoreno"], [data-col="vzdalenost"]) {
    white-space: nowrap;
}

.table-scroll td[data-col="firma"] .link-company {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}