/* dazzle v0.69.6 | MIT License | https://github.com/manwithacat/dazzle */
@layer reset, vendor, tokens, base, utilities, components, overrides;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html,
body {
height: 100%;
}
body {
line-height: var(--leading-normal, 1.5);
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: var(--leading-tight, 1.2);
text-wrap: balance;
}
#root,
#__next {
isolation: isolate;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
textarea {
resize: vertical;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
@layer vendor {
.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:none;box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:6px 8px 3px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:none}.ts-control>*{display:inline-block;vertical-align:initial}.ts-wrapper.multi .ts-control>div{background:#f2f2f2;border:0 solid #d0d0d0;color:#303030;cursor:pointer;margin:0 3px 3px 0;overflow:auto;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#e8e8e8;border:0 solid #cacaca;color:#303030}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#fff;border:0 solid #fff;color:#7d7d7d}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:none;display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #d0d0d0;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#cacaca}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#fff}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #d0d0d0;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#cacaca}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#fff}:root{--ts-pr-clear-button:0px;--ts-pr-caret:0px;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
}
@layer vendor {
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
}
@layer tokens {
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.5rem;
--space-2xl: 2rem;
--space-3xl: 3rem;
--space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem);
--space-fluid-md: clamp(0.75rem, 1.5vw, 1rem);
--space-fluid-lg: clamp(1rem, 2.5vw, 1.5rem);
--text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
--text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
--text-3xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
--text-display: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
--dz-heading-app-page-title: var(--text-lg);
--dz-heading-app-section-title: var(--text-base);
--dz-heading-app-subsection-title: var(--text-sm);
--dz-heading-marketing-hero: var(--dz-font-size-hero-headline, 3.5rem);
--dz-heading-marketing-cta: var(--dz-font-size-cta-headline, 3rem);
--dz-heading-marketing-section: var(--dz-font-size-section-headline, 2.25rem);
--font-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
Consolas, "Liberation Mono", monospace;
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-loose: 1.8;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.75rem;
--radius-full: 9999px;
--shadow-sm:
0 1px 2px hsl(0 0% 0% / 0.04),
0 1px 3px hsl(0 0% 0% / 0.06);
--shadow-md:
0 2px 4px hsl(0 0% 0% / 0.04),
0 4px 8px hsl(0 0% 0% / 0.08);
--shadow-lg:
0 4px 8px hsl(0 0% 0% / 0.04),
0 12px 24px hsl(0 0% 0% / 0.12);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.5, -0.5, 0.5, 1.5);
--ease-spring-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
--ease-spring-2: cubic-bezier(0.5, 1, 0.75, 1.25);
--ease-spring-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--ease-spring-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
--ease-spring-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
--ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
--ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
--ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
--duration-fast: 80ms;
--duration-base: 150ms;
--duration-slow: 300ms;
--animation-fade-in: dz-fade-in var(--duration-base) var(--ease-out);
--animation-fade-out: dz-fade-out var(--duration-base) var(--ease-in);
--animation-scale-up: dz-scale-up var(--duration-base) var(--ease-spring-2);
--animation-scale-down: dz-scale-down var(--duration-base) var(--ease-in);
--animation-slide-in-up: dz-slide-in-up var(--duration-base) var(--ease-out);
--animation-slide-in-down: dz-slide-in-down var(--duration-base) var(--ease-out);
--animation-slide-in-left: dz-slide-in-left var(--duration-base) var(--ease-out);
--animation-slide-in-right: dz-slide-in-right var(--duration-base) var(--ease-out);
--animation-slide-out-up: dz-slide-out-up var(--duration-base) var(--ease-in);
--animation-slide-out-down: dz-slide-out-down var(--duration-base) var(--ease-in);
--animation-slide-out-left: dz-slide-out-left var(--duration-base) var(--ease-in);
--animation-slide-out-right: dz-slide-out-right var(--duration-base) var(--ease-in);
--animation-shake-x: dz-shake-x 0.4s var(--ease-out);
--animation-pulse: dz-pulse 2s var(--ease-in-out) infinite;
--width-prose: 65ch;
--width-content: 56rem;
--width-page: 80rem;
--dz-touch-target-min: 44px;
--neutral-50: oklch(98.5% 0.002 247.84);
--neutral-100: oklch(96.7% 0.003 264.54);
--neutral-200: oklch(92.8% 0.006 264.53);
--neutral-300: oklch(86.9% 0.012 252.89);
--neutral-400: oklch(70.6% 0.022 261.32);
--neutral-500: oklch(55.1% 0.027 264.36);
--neutral-600: oklch(44.6% 0.030 256.80);
--neutral-700: oklch(37.3% 0.034 259.73);
--neutral-800: oklch(27.8% 0.030 256.85);
--neutral-900: oklch(21.0% 0.034 264.66);
--neutral-950: oklch(13.0% 0.028 261.69);
--brand-50: oklch(97.0% 0.014 254.60);
--brand-100: oklch(93.2% 0.032 255.59);
--brand-200: oklch(88.2% 0.059 254.13);
--brand-300: oklch(80.9% 0.105 251.81);
--brand-400: oklch(70.7% 0.165 254.62);
--brand-500: oklch(62.3% 0.214 259.81);
--brand-600: oklch(54.6% 0.245 262.88);
--brand-700: oklch(48.8% 0.243 264.05);
--brand-800: oklch(42.4% 0.199 265.64);
--brand-900: oklch(37.9% 0.146 265.52);
--brand-950: oklch(28.2% 0.091 267.94);
--success-500: oklch(64.8% 0.150 142.50);
--warning-500: oklch(76.9% 0.188 70.08);
--danger-500: oklch(63.7% 0.208 25.33);
--colour-bg: light-dark(var(--neutral-50), var(--neutral-950));
--colour-surface: light-dark(white, var(--neutral-900));
--colour-text: light-dark(var(--neutral-900), var(--neutral-50));
--colour-text-muted: light-dark(var(--neutral-600), var(--neutral-400));
--colour-border: light-dark(var(--neutral-200), var(--neutral-700));
--colour-brand: var(--brand-600);
--colour-brand-contrast: white;
--colour-accent: var(--brand-500);
--colour-success: var(--success-500);
--colour-warning: var(--warning-500);
--colour-danger: var(--danger-500);
--colour-success-soft: oklch(from var(--colour-success) 95% 0.05 h);
--colour-warning-soft: oklch(from var(--colour-warning) 95% 0.05 h);
--colour-danger-soft: oklch(from var(--colour-danger) 95% 0.05 h);
--colour-brand-soft: oklch(from var(--colour-brand) 95% 0.05 h);
color-scheme: light dark;
}
[data-theme="dark"] {
color-scheme: dark;
}
[data-theme="light"] {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
@supports not (color: light-dark(white, black)) {
:root {
--colour-bg: var(--neutral-950);
--colour-surface: var(--neutral-900);
--colour-text: var(--neutral-50);
--colour-text-muted: var(--neutral-400);
--colour-border: var(--neutral-700);
}
}
}
@keyframes dz-fade-in {
from { opacity: 0; }
}
@keyframes dz-fade-out {
to { opacity: 0; }
}
@keyframes dz-scale-up {
from { transform: scale(0.92); opacity: 0; }
}
@keyframes dz-scale-down {
to { transform: scale(0.92); opacity: 0; }
}
@keyframes dz-slide-in-up {
from { transform: translateY(8%); opacity: 0; }
}
@keyframes dz-slide-in-down {
from { transform: translateY(-8%); opacity: 0; }
}
@keyframes dz-slide-in-left {
from { transform: translateX(8%); opacity: 0; }
}
@keyframes dz-slide-in-right {
from { transform: translateX(-8%); opacity: 0; }
}
@keyframes dz-slide-out-up {
to { transform: translateY(-8%); opacity: 0; }
}
@keyframes dz-slide-out-down {
to { transform: translateY(8%); opacity: 0; }
}
@keyframes dz-slide-out-left {
to { transform: translateX(-8%); opacity: 0; }
}
@keyframes dz-slide-out-right {
to { transform: translateX(8%); opacity: 0; }
}
@keyframes dz-shake-x {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
@keyframes dz-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
[style*="animation"], [class*="dz-anim-"], .dz-toast {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
}
@layer tokens {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--success: 142 76% 36%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 98%;
--info: 217 91% 60%;
--info-foreground: 0 0% 98%;
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--radius-sm: 0.25rem;
--radius: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.625rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px 0 hsl(240 5.9% 10% / 0.03);
--shadow-sm: 0 1px 3px 0 hsl(240 5.9% 10% / 0.06), 0 1px 2px -1px hsl(240 5.9% 10% / 0.06);
--shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.07), 0 2px 4px -2px hsl(240 5.9% 10% / 0.05);
--shadow-lg: 0 10px 15px -3px hsl(240 5.9% 10% / 0.07), 0 4px 6px -4px hsl(240 5.9% 10% / 0.05);
--shadow-xl: 0 20px 25px -5px hsl(240 5.9% 10% / 0.08), 0 8px 10px -6px hsl(240 5.9% 10% / 0.05);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--dz-shadow-sm: var(--shadow-sm);
--dz-shadow-card: var(--shadow-sm);
--dz-shadow-md: var(--shadow-md);
--dz-shadow-lg: var(--shadow-lg);
--dz-transition-fast: var(--duration-fast);
--dz-transition-normal: var(--duration-normal);
--dz-accent-glow: hsl(var(--ring) / 0.15);
--dz-hero-bg-from: oklch(0.45 0.18 265);
--dz-hero-bg-to: oklch(0.38 0.20 280);
--dz-shadow-hero: 0 20px 60px -12px oklch(0 0 0 / 0.25);
--dz-shadow-xl: var(--shadow-xl);
--dz-text-foreground: oklch(0.15 0 0);
--dz-text-emphasis: oklch(0.35 0 0);
--dz-text-body: oklch(0.45 0 0);
--dz-text-muted: oklch(0.5 0 0);
--dz-surface-card: white;
--dz-feature-icon-bg: oklch(0.92 0.03 260);
--dz-section-alt-bg: oklch(0.97 0.01 260);
--dz-pricing-highlight-bg: oklch(0.45 0.18 270);
--dz-border-default: oklch(0 0 0 / 0.1);
--dz-border-subtle: oklch(0 0 0 / 0.08);
--dz-border-input: oklch(0 0 0 / 0.15);
--dz-hero-overlay: oklch(1 0 0 / 0.1);
--dz-hero-border: oklch(1 0 0 / 0.5);
--dz-hero-border-hover: oklch(1 0 0 / 0.7);
--dz-hero-text-dimmed: oklch(1 0 0 / 0.8);
--dz-hero-border-dim: oklch(1 0 0 / 0.15);
--dz-hero-btn-hover: oklch(0.98 0 0);
--dz-header-bg: oklch(1 0 0 / 0.95);
--dz-footer-bg: oklch(0.15 0.01 260);
--dz-footer-text: oklch(0.7 0 0);
--dz-footer-link: oklch(0.6 0 0);
--dz-footer-border: oklch(1 0 0 / 0.1);
--dz-footer-heading: oklch(1 0 0);
--dz-logo-color: oklch(0.25 0.02 260);
--dz-error-bg: oklch(0.95 0.03 25);
--dz-error-text: oklch(0.45 0.15 25);
--dz-ring-glow: 0 0 0 3px oklch(0.50 0.18 270 / 0.15);
--dz-spacing-hero-y: 6rem;
--dz-spacing-section-y: 5rem;
--dz-spacing-feature-gap: 2rem;
--dz-spacing-card-padding: 1.5rem;
--dz-font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--dz-font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--dz-font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--dz-font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
--dz-font-size-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
--dz-font-size-fluid-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
--dz-font-size-fluid-3xl: clamp(1.875rem, 1.3rem + 2.875vw, 3rem);
--dz-font-size-hero-headline: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem);
--dz-font-weight-hero-headline: 800;
--dz-line-height-hero-headline: 1.1;
--dz-letter-spacing-hero-headline: -0.02em;
--dz-font-size-subhead: 1.25rem;
--dz-line-height-subhead: 1.5;
--dz-font-size-cta-headline: 3rem;
--dz-font-size-section-headline: 2.25rem;
--dz-font-weight-section-headline: 700;
--dz-line-height-section-headline: 1.2;
--dz-letter-spacing-section-headline: -0.01em;
--dz-font-size-body: 1rem;
--dz-line-height-body: 1.6;
--dz-radius-button: 0.5rem;
--dz-radius-card: 0.75rem;
--dz-radius-lg: 1rem;
--dz-radius-sm: 0.375rem;
}
.dark,
[data-theme="dark"] {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--success: 142 76% 36%;
--success-foreground: 0 0% 98%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 98%;
--info: 217 91% 60%;
--info-foreground: 0 0% 98%;
--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1);
--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15);
--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15);
--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15);
--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2);
--dz-sidebar-from: hsl(240 10% 5%);
--dz-sidebar-to: hsl(240 10% 8%);
--dz-accent-glow: hsl(var(--ring) / 0.2);
--dz-section-alt-bg: oklch(0.08 0.01 260);
--dz-feature-icon-bg: oklch(0.20 0.04 260);
--dz-text-foreground: oklch(0.95 0 0);
--dz-text-emphasis: oklch(0.85 0 0);
--dz-text-body: oklch(0.70 0 0);
--dz-text-muted: oklch(0.55 0 0);
--dz-surface-card: oklch(0.18 0.01 260);
--dz-border-default: oklch(1 0 0 / 0.12);
--dz-border-subtle: oklch(1 0 0 / 0.08);
--dz-border-input: oklch(1 0 0 / 0.15);
--dz-header-bg: oklch(0.15 0.01 260 / 0.95);
--dz-footer-bg: oklch(0.08 0.01 260);
--dz-footer-text: oklch(0.65 0 0);
--dz-footer-link: oklch(0.55 0 0);
--dz-footer-border: oklch(1 0 0 / 0.1);
--dz-footer-heading: oklch(1 0 0);
--dz-logo-color: oklch(0.95 0 0);
--dz-error-bg: oklch(0.20 0.06 25);
--dz-error-text: oklch(0.80 0.15 25);
--dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15);
}
:root,
[data-theme="light"] {
--b1: 0 0% 100%;
--b2: 240 4.8% 95.9%;
--b3: 240 5.9% 90%;
--bc: 240 10% 3.9%;
--p: 240 5.9% 10%;
--pf: 240 5.2% 16%;
--pc: 0 0% 98%;
--s: 240 4.8% 95.9%;
--sf: 240 5.9% 90%;
--sc: 240 5.9% 10%;
--a: 240 4.8% 95.9%;
--af: 240 5.9% 90%;
--ac: 240 5.9% 10%;
--n: 240 5.9% 10%;
--nf: 240 3.7% 15.9%;
--nc: 0 0% 98%;
--su: 142 76% 36%;
--in: 217 91% 60%;
--wa: 38 92% 50%;
--er: 0 84.2% 60.2%;
--rounded-box: var(--radius-lg);
--rounded-btn: var(--radius-md);
--rounded-badge: var(--radius-full);
--animation-btn: var(--duration-fast);
--animation-input: var(--duration-fast);
--btn-focus-scale: 0.98;
}
[data-theme="dark"] {
--b1: 240 10% 3.9%;
--b2: 240 3.7% 10%;
--b3: 240 3.7% 15.9%;
--bc: 0 0% 98%;
--p: 0 0% 98%;
--pf: 0 0% 90%;
--pc: 240 5.9% 10%;
--s: 240 3.7% 15.9%;
--sf: 240 3.7% 20%;
--sc: 0 0% 98%;
--a: 240 3.7% 15.9%;
--af: 240 3.7% 20%;
--ac: 0 0% 98%;
--n: 0 0% 98%;
--nf: 0 0% 90%;
--nc: 240 5.9% 10%;
--su: 142 76% 36%;
--in: 217 91% 60%;
--wa: 38 92% 50%;
--er: 0 62.8% 30.6%;
}
body {
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: hsl(var(--foreground));
background-color: hsl(var(--background));
}
code, pre, kbd, samp {
font-family: var(--font-mono);
}
a, button, .btn, input, select, textarea, .card, .menu li a {
transition: all var(--duration-fast) var(--ease-default);
}
:focus-visible {
outline: 3px solid hsl(var(--ring));
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
@media (prefers-contrast: high) {
:root {
--border: 240 10% 30%;
--input: 240 10% 30%;
--muted-foreground: 240 10% 25%;
}
.btn {
border: 2px solid currentColor;
}
.badge {
border: 1px solid currentColor;
}
.card {
border-width: 2px;
}
.input,
.select,
.textarea {
border-width: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.drawer-side aside,
.drawer-side > aside.bg-base-200,
.drawer-side > aside.bg-base-100 {
background: hsl(var(--card));
border-inline-end: 1px solid hsl(var(--border));
}
.drawer-side aside > div:first-child {
border-block-end-color: hsl(var(--border));
}
.drawer-side aside > div:first-child a {
color: hsl(var(--foreground));
letter-spacing: -0.01em;
}
.drawer-side .menu a {
color: hsl(var(--muted-foreground));
border-radius: var(--radius-md);
margin-bottom: 0.125rem;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
}
.drawer-side .menu a:hover {
background: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
.drawer-side .menu a.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-weight: 500;
box-shadow: none;
}
.drawer-side aside > div:last-child {
border-block-start-color: hsl(var(--border));
}
.navbar {
backdrop-filter: blur(8px);
background: hsl(var(--background) / 0.85);
border-block-end: 1px solid hsl(var(--border));
}
.navbar .text-xl {
font-weight: 600;
letter-spacing: -0.02em;
}
.card {
box-shadow: var(--shadow-sm);
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
background: hsl(var(--card));
color: hsl(var(--card-foreground));
transition: box-shadow var(--duration-normal) var(--ease-default),
transform var(--duration-normal) var(--ease-default);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card[onclick]:hover,
.card a:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.card-title {
font-weight: 600;
letter-spacing: -0.01em;
}
.modal-box {
box-shadow: var(--shadow-xl);
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
background: hsl(var(--card));
}
.modal-backdrop {
background: hsl(var(--foreground) / 0.5);
backdrop-filter: blur(4px);
}
.dz-page-header {
margin-block-end: 1.5rem;
}
.dz-page-header h1,
.dz-page-header .text-2xl {
font-weight: 700;
letter-spacing: -0.02em;
color: hsl(var(--foreground));
}
.dz-page-header .text-sm {
color: hsl(var(--muted-foreground));
}
.dz-empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: hsl(var(--muted-foreground));
}
.dz-empty-state svg {
width: 3rem;
height: 3rem;
margin: 0 auto 1rem;
opacity: 0.4;
}
.dz-action-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-block-end: 1rem;
gap: 1rem;
}
.dz-action-bar .btn {
gap: 0.5rem;
}
.menu.shadow {
border: 1px solid hsl(var(--border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
background: hsl(var(--popover));
color: hsl(var(--popover-foreground));
}
.loading {
color: hsl(var(--primary));
}
.skeleton,
.dz-skeleton {
background: linear-gradient(
90deg,
hsl(var(--muted)) 25%,
hsl(var(--muted) / 0.6) 50%,
hsl(var(--muted)) 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius);
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.dz-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid hsl(var(--muted));
border-top-color: hsl(var(--primary));
border-radius: 50%;
animation: dz-spin 0.6s linear infinite;
}
.dz-spinner--sm {
width: 0.75rem;
height: 0.75rem;
border-width: 1.5px;
}
@keyframes dz-spin {
to { transform: rotate(360deg); }
}
.htmx-request .htmx-hide-on-request {
display: none;
}
.toast .alert {
animation: dz-toast-in var(--duration-slow) var(--ease-out);
}
@keyframes dz-toast-in {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.overflow-x-auto[role="region"] {
container-type: inline-size;
container-name: table-container;
}
@container table-container (max-width: 480px) {
.table thead {
display: none;
}
.table tbody tr {
display: block;
margin-block-end: 0.75rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius-md);
padding: 0.5rem;
}
.table tbody td {
display: flex;
justify-content: space-between;
padding-block: 0.25rem;
padding-inline: 0.5rem;
border-block-end: none;
}
.table tbody td::before {
content: attr(data-label);
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
}
}
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 4px;
min-height: 32px;
padding: 0 12px;
font-size: 13px;
color: hsl(var(--foreground));
box-shadow: none;
transition: box-shadow 120ms cubic-bezier(0.2, 0, 0, 1),
border-color 120ms cubic-bezier(0.2, 0, 0, 1);
}
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 1px hsl(var(--ring));
}
.ts-wrapper.single.disabled .ts-control,
.ts-wrapper.multi.disabled .ts-control {
opacity: 0.6;
cursor: not-allowed;
}
.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control .placeholder {
color: hsl(var(--muted-foreground));
}
.ts-dropdown {
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
border-radius: 4px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
color: hsl(var(--foreground));
margin-top: 4px;
font-size: 13px;
}
.ts-dropdown .option {
padding: 6px 12px;
color: hsl(var(--foreground));
}
.ts-dropdown .active {
background: hsl(var(--muted));
color: hsl(var(--foreground));
}
.ts-dropdown .selected {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.ts-dropdown .no-results {
padding: 8px 12px;
color: hsl(var(--muted-foreground));
font-style: italic;
}
.ts-wrapper[aria-invalid="true"] .ts-control,
select[aria-invalid="true"] + .ts-wrapper .ts-control {
border-color: hsl(var(--destructive));
}
.ts-wrapper.multi .ts-control > .item {
background: hsl(var(--muted));
color: hsl(var(--foreground));
border: 1px solid hsl(var(--border));
border-radius: 3px;
padding: 0 6px;
font-size: 12px;
}
.flatpickr-calendar {
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
border-radius: 4px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
color: hsl(var(--foreground));
font-size: 13px;
margin-top: 4px;
width: auto;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
border-bottom-color: hsl(var(--popover));
border-top-color: hsl(var(--popover));
}
.flatpickr-months {
padding: 8px 8px 4px;
}
.flatpickr-month {
background: transparent;
color: hsl(var(--foreground));
height: 32px;
}
.flatpickr-current-month {
font-size: 13px;
font-weight: 500;
color: hsl(var(--foreground));
padding: 4px 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
background: transparent;
color: hsl(var(--foreground));
font-weight: 500;
}
.flatpickr-prev-month,
.flatpickr-next-month {
color: hsl(var(--muted-foreground));
fill: hsl(var(--muted-foreground));
padding: 4px 8px;
transition: color 80ms cubic-bezier(0.2, 0, 0, 1);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
color: hsl(var(--foreground));
fill: hsl(var(--foreground));
}
.flatpickr-weekdays {
background: transparent;
}
.flatpickr-weekday {
background: transparent;
color: hsl(var(--muted-foreground));
font-size: 12px;
font-weight: 500;
}
.flatpickr-days {
padding: 4px;
}
.dayContainer {
padding: 0;
min-width: auto;
}
.flatpickr-day {
color: hsl(var(--foreground));
border: 0;
border-radius: 3px;
max-width: 36px;
height: 32px;
line-height: 32px;
font-size: 13px;
transition: background-color 80ms cubic-bezier(0.2, 0, 0, 1),
color 80ms cubic-bezier(0.2, 0, 0, 1);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
background: hsl(var(--muted));
color: hsl(var(--foreground));
}
.flatpickr-day.today {
border: 1px solid hsl(var(--primary));
background: transparent;
color: hsl(var(--foreground));
}
.flatpickr-day.today:hover {
background: hsl(var(--muted));
border-color: hsl(var(--primary));
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-color: hsl(var(--primary));
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--foreground));
box-shadow: none;
border-color: transparent;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: hsl(var(--muted-foreground));
opacity: 0.5;
}
.flatpickr-day.flatpickr-disabled:hover {
background: transparent;
}
input[aria-invalid="true"][data-dz-widget="datepicker"],
input[aria-invalid="true"][data-dz-widget="daterange"] {
border-color: hsl(var(--destructive));
}
input[type="range"][data-dz-slider] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
height: 16px;
padding: 0;
}
input[type="range"][data-dz-slider]:focus { outline: none; }
input[type="range"][data-dz-slider]::-webkit-slider-runnable-track {
height: 4px;
background: hsl(var(--muted));
border-radius: 2px;
border: 0;
}
input[type="range"][data-dz-slider]::-moz-range-track {
height: 4px;
background: hsl(var(--muted));
border-radius: 2px;
border: 0;
}
input[type="range"][data-dz-slider]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: hsl(var(--primary));
border: 0;
cursor: pointer;
margin-top: -6px;
transition: filter 80ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 80ms cubic-bezier(0.2, 0, 0, 1);
}
input[type="range"][data-dz-slider]::-webkit-slider-thumb:hover {
filter: brightness(1.05);
}
input[type="range"][data-dz-slider]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.4);
}
input[type="range"][data-dz-slider]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: hsl(var(--primary));
border: 0;
cursor: pointer;
transition: filter 80ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 80ms cubic-bezier(0.2, 0, 0, 1);
}
input[type="range"][data-dz-slider]::-moz-range-thumb:hover {
filter: brightness(1.05);
}
input[type="range"][data-dz-slider]:focus::-moz-range-thumb {
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.4);
}
input[type="range"][data-dz-slider]:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.pcr-app {
background: hsl(var(--popover));
color: hsl(var(--popover-foreground));
border: 1px solid hsl(var(--border));
border-radius: 6px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
font-family: inherit;
padding: 12px;
}
.pcr-app .pcr-selection .pcr-color-preview {
border-radius: 3px;
border: 1px solid hsl(var(--border));
}
.pcr-app .pcr-selection .pcr-color-chooser,
.pcr-app .pcr-selection .pcr-color-opacity {
margin-inline-start: 8px;
}
.pcr-app .pcr-interaction {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid hsl(var(--border));
}
.pcr-app .pcr-interaction input,
.pcr-app .pcr-interaction .pcr-result {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
border-radius: 3px;
color: hsl(var(--foreground));
font-size: 12px;
font-family: ui-monospace, Menlo, monospace;
padding: 4px 8px;
height: 26px;
}
.pcr-app .pcr-interaction input:focus,
.pcr-app .pcr-interaction .pcr-result:focus {
outline: none;
box-shadow: 0 0 0 1px hsl(var(--ring));
border-color: hsl(var(--ring));
}
.pcr-app .pcr-interaction .pcr-type.active,
.pcr-app .pcr-interaction .pcr-type:hover {
background: hsl(var(--muted));
color: hsl(var(--foreground));
}
.pcr-app .pcr-interaction .pcr-type {
background: transparent;
color: hsl(var(--muted-foreground));
border: 1px solid hsl(var(--border));
border-radius: 3px;
padding: 4px 8px;
font-size: 11px;
font-weight: 500;
}
.pcr-app .pcr-interaction .pcr-save {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border: 1px solid hsl(var(--primary));
border-radius: 3px;
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
transition: filter 80ms cubic-bezier(0.2, 0, 0, 1);
}
.pcr-app .pcr-interaction .pcr-save:hover {
filter: brightness(1.1);
}
.pcr-app .pcr-interaction .pcr-cancel,
.pcr-app .pcr-interaction .pcr-clear {
background: transparent;
color: hsl(var(--muted-foreground));
border: 1px solid hsl(var(--border));
border-radius: 3px;
padding: 4px 10px;
font-size: 12px;
}
.pcr-app .pcr-swatches {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid hsl(var(--border));
}
.pcr-app .pcr-swatches > button {
border: 1px solid hsl(var(--border));
border-radius: 3px;
margin: 2px;
}
input[aria-invalid="true"][type="hidden"] + .pcr-app,
[data-dz-widget="colorpicker"] .pcr-trigger[aria-invalid="true"] {
outline: 1px solid hsl(var(--destructive));
}
progress[data-dz-file-progress],
progress[data-dz-progress] {
appearance: none;
-webkit-appearance: none;
border: 0;
height: 4px;
overflow: hidden;
border-radius: 2px;
background: hsl(var(--muted));
}
progress[data-dz-file-progress]::-webkit-progress-bar,
progress[data-dz-progress]::-webkit-progress-bar {
background: hsl(var(--muted));
border-radius: 2px;
}
progress[data-dz-file-progress]::-webkit-progress-value,
progress[data-dz-progress]::-webkit-progress-value {
background: hsl(var(--primary));
border-radius: 2px;
transition: width 120ms cubic-bezier(0.2, 0, 0, 1);
}
progress[data-dz-file-progress]::-moz-progress-bar,
progress[data-dz-progress]::-moz-progress-bar {
background: hsl(var(--primary));
border-radius: 2px;
}
}
@layer base {
body {
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
font-size: var(--text-base);
font-weight: var(--weight-regular);
color: var(--colour-text);
background: var(--colour-bg);
}
h1 {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
}
h2 {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
letter-spacing: -0.015em;
}
h3 {
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
letter-spacing: -0.01em;
}
h4 {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
}
h5 {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
}
h6 {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
a {
color: inherit;
text-decoration-color: var(--colour-border);
text-underline-offset: 0.15em;
}
a:hover,
a:focus-visible {
text-decoration-color: currentColor;
}
input,
textarea,
select {
background: var(--colour-surface);
color: var(--colour-text);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--colour-brand);
outline-offset: 1px;
}
button {
background: var(--colour-surface);
color: var(--colour-text);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
font-weight: var(--weight-medium);
transition: background var(--duration-fast) var(--ease-out);
}
button:hover:not(:disabled) {
background: var(--colour-bg);
}
button:focus-visible {
outline: 2px solid var(--colour-brand);
outline-offset: 1px;
}
button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
"SF Mono",
Menlo,
Monaco,
Consolas,
monospace;
font-size: 0.95em;
}
pre {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
padding: var(--space-md);
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: start;
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--colour-border);
}
th {
font-weight: var(--weight-semibold);
color: var(--colour-text-muted);
font-size: var(--text-sm);
}
}
@layer utilities {
.stack {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.stack-sm {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.stack-lg {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-md);
align-items: center;
}
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: baseline;
}
.between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}
.centre {
display: grid;
place-items: center;
}
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: var(--space-md);
}
.flow {
--flow-space: var(--space-md);
}
.flow > * + * {
margin-block-start: var(--flow-space);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
@layer components {
.dz-badge {
display: inline-flex;
align-items: center;
border-radius: var(--radius-sm);
font-weight: var(--weight-medium);
padding-inline: var(--space-sm);
height: 1.25rem;
font-size: var(--text-xs);
}
.dz-badge-sm {
padding-inline: var(--space-xs);
height: 1rem;
font-size: 0.625rem;
line-height: 1;
}
.dz-badge[data-dz-tone="success"] {
background: var(--colour-success-soft);
color: var(--colour-success);
}
.dz-badge[data-dz-tone="warning"] {
background: var(--colour-warning-soft);
color: var(--colour-warning);
}
.dz-badge[data-dz-tone="info"] {
background: var(--colour-brand-soft);
color: var(--colour-brand);
}
.dz-badge[data-dz-tone="destructive"] {
background: var(--colour-danger-soft);
color: var(--colour-danger);
}
.dz-badge[data-dz-tone="neutral"],
.dz-badge:not([data-dz-tone]) {
background: var(--colour-bg);
color: var(--colour-text-muted);
}
.dz-badge.bordered {
border: 1px solid var(--colour-border);
}
.dz-badge.bordered[data-dz-tone="success"] {
border-color: var(--colour-success);
}
.dz-badge.bordered[data-dz-tone="warning"] {
border-color: var(--colour-warning);
}
.dz-badge.bordered[data-dz-tone="info"] {
border-color: var(--colour-brand);
}
.dz-badge.bordered[data-dz-tone="destructive"] {
border-color: var(--colour-danger);
}
.dz-badge-empty {
color: var(--colour-text-muted);
font-size: var(--text-xs);
}
}
@layer components {
.dz-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
cursor: pointer;
text-decoration: none;
transition:
background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-button-ghost {
background: transparent;
border: 1px solid transparent;
color: var(--colour-text-muted);
}
.dz-button-ghost:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-button-outline {
background: var(--colour-surface);
color: var(--colour-text);
border: 1px solid var(--colour-border);
}
.dz-button-outline:hover {
background: var(--colour-bg);
}
.dz-button-destructive {
background: var(--colour-surface);
color: var(--colour-danger);
border: 1px solid var(--colour-danger);
}
.dz-button-destructive:hover {
background: var(--colour-danger-soft);
}
.dz-button.dz-button-primary {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
border: 1px solid var(--colour-brand);
}
.dz-button.dz-button-primary:hover {
filter: brightness(1.1);
}
.dz-button.dz-button-primary:disabled,
.dz-button.dz-button-primary[aria-disabled="true"] {
opacity: 0.6;
pointer-events: none;
}
.dz-button.dz-button-sm {
height: 1.75rem;
padding-inline: var(--space-md);
font-size: var(--text-xs);
}
}
@layer components {
.dz-workspace {
padding: var(--space-md);
}
.dz-workspace-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
margin-block-end: var(--space-md);
flex-wrap: wrap;
}
.dz-workspace-title {
font-size: var(--dz-heading-app-page-title);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin: 0;
}
.dz-workspace-primary-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
justify-content: flex-end;
}
.dz-workspace-action {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
text-decoration: none;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-workspace-action:hover {
opacity: 0.9;
}
.dz-workspace-context {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-block-end: var(--space-md);
}
.dz-workspace-context-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-workspace-context-select {
height: 2rem;
padding-inline: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
.dz-workspace-context-select:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-workspace-toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-sm);
margin-block-end: var(--space-md);
}
.dz-workspace-toolbar-spacer {
flex: 1 1 0;
}
.dz-workspace-reset {
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-workspace-reset:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-workspace-save {
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid transparent;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.dz-workspace-save[data-dz-save-state="clean"] {
color: var(--colour-text-muted);
cursor: default;
}
.dz-workspace-save[data-dz-save-state="dirty"] {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
}
.dz-workspace-save[data-dz-save-state="saving"] {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
opacity: 0.7;
}
.dz-workspace-save[data-dz-save-state="saved"] {
background: var(--colour-success);
color: white;
}
.dz-workspace-save[data-dz-save-state="error"] {
border-color: var(--colour-danger);
color: var(--colour-danger);
}
.dz-workspace-save-busy {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.dz-workspace-save-busy-icon {
width: 0.75rem;
height: 0.75rem;
animation: dz-spin 1s linear infinite;
}
.dz-dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: start;
}
@media (min-width: 48rem) {
.dz-dashboard-grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.dz-card-wrapper {
position: relative;
outline: none;
}
.dz-card-wrapper:focus {
box-shadow: 0 0 0 2px var(--colour-surface), 0 0 0 4px var(--colour-brand);
}
.dz-card-wrapper.is-animating {
transition: all var(--duration-base) var(--ease-out);
}
.dz-card {
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
overflow: hidden;
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.dz-card.is-resizing {
border-style: dashed;
border-color: var(--colour-brand);
}
.dz-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
cursor: grab;
min-height: 2.25rem;
}
.dz-card-header:active {
cursor: grabbing;
}
.dz-card-header.is-dragging {
cursor: grabbing;
}
.dz-card-titles {
display: flex;
flex-direction: column;
}
.dz-card-eyebrow {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-text-muted);
line-height: 1;
}
.dz-card-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--colour-text);
user-select: none;
margin: 0;
}
.dz-card-actions {
display: flex;
align-items: center;
gap: var(--space-xs);
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-card-wrapper:hover .dz-card-actions,
.dz-card-wrapper:focus-within .dz-card-actions {
opacity: 1;
}
.dz-card-action-button {
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-card-action-button:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-card-notice {
margin-inline: var(--space-md);
margin-block-end: var(--space-sm);
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
border-radius: var(--radius-sm);
border-inline-start-width: 2px;
border-inline-start-style: solid;
}
.dz-card-notice-title {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--colour-text);
}
.dz-card-notice-body {
font-size: var(--text-xs);
line-height: var(--leading-tight);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-card-body {
padding-inline: var(--space-md);
padding-block-end: var(--space-md);
min-height: 280px;
}
.dz-card-body[data-display="summary"],
.dz-card-body[data-display="summary_row"] {
min-height: 96px;
}
.dz-card-body[data-display="metrics"],
.dz-card-body[data-display="metric"] {
min-height: 140px;
}
.dz-card-body[data-display="bar_chart"],
.dz-card-body[data-display="chart"],
.dz-card-body[data-display="line_chart"],
.dz-card-body[data-display="bar_track"],
.dz-card-body[data-display="bullet"],
.dz-card-body[data-display="funnel_chart"],
.dz-card-body[data-display="heatmap"],
.dz-card-body[data-display="radar"] {
min-height: 280px;
}
.dz-card-body[data-display="kanban"] {
min-height: 480px;
}
.dz-card-body[data-display="diagram"] {
min-height: 360px;
}
.dz-card-body[data-display="profile_card"] {
min-height: 200px;
}
.dz-card-body[data-display="action_grid"],
.dz-card-body[data-display="pipeline_steps"],
.dz-card-body[data-display="status_list"] {
min-height: 200px;
}
.dz-card-body[data-display="pivot_table"],
.dz-card-body[data-display="timeline"] {
min-height: 320px;
}
.dz-card-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding-block: var(--space-sm);
animation: dz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dz-card-skeleton-line {
height: 1rem;
background: var(--colour-bg);
border-radius: var(--radius-sm);
}
.dz-card-skeleton-line.is-thin {
height: 0.75rem;
}
.dz-card-skeleton-line.w-3-4 { width: 75%; }
.dz-card-skeleton-line.w-5-6 { width: 83.333%; }
@keyframes dz-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.dz-card-resize {
position: absolute;
top: 0;
inset-inline-end: 0;
width: 0.375rem;
height: 100%;
cursor: col-resize;
opacity: 0;
transition:
opacity var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
border-end-end-radius: var(--radius-md);
border-start-end-radius: var(--radius-md);
}
.dz-card-wrapper:hover .dz-card-resize,
.dz-card-wrapper:focus-within .dz-card-resize {
opacity: 1;
}
.dz-card-resize:hover {
background: color-mix(in oklch, var(--colour-brand) 30%, transparent);
}
.dz-add-card-row {
position: relative;
display: flex;
justify-content: center;
margin-block-start: var(--space-md);
}
.dz-add-card-button {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
height: 2rem;
padding-inline: var(--space-lg);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border-radius: var(--radius-md);
border: 2px dashed var(--colour-border);
color: var(--colour-text-muted);
background: transparent;
cursor: pointer;
transition:
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-add-card-button:hover {
border-color: var(--colour-brand);
color: var(--colour-text);
}
.dz-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: oklch(0% 0 0 / 0.3);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-slow) var(--ease-out);
}
.dz-drawer-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.dz-drawer {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 50;
display: flex;
flex-direction: column;
width: 100%;
background: var(--colour-bg);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--duration-slow) var(--ease-in-out);
}
@media (min-width: 40rem) {
.dz-drawer {
max-width: 42rem;
}
}
.dz-drawer.is-open {
transform: translateX(0);
}
.dz-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-block-end: 1px solid var(--colour-border);
flex-shrink: 0;
}
.dz-drawer-button {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-drawer-button:hover {
background: var(--colour-bg);
}
.dz-drawer-content {
flex: 1;
overflow-y: auto;
padding: var(--space-md);
}
}
@layer components {
.dz-detail {
max-width: 48rem;
margin-inline: auto;
}
.dz-detail-wide {
max-width: 64rem;
}
.dz-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-xl);
}
.dz-detail-header-title {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dz-detail-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-detail-actions {
display: flex;
gap: var(--space-sm);
}
.dz-detail-toolbar {
display: flex;
gap: var(--space-sm);
margin-block-end: var(--space-lg);
}
.dz-detail-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.dz-detail-card-body {
padding: var(--space-lg);
}
.dz-detail-list {
container-type: inline-size;
}
.dz-detail-list > * + * {
border-block-start: 1px solid var(--colour-border);
}
.dz-detail-row {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding-block: var(--space-md);
}
@container (width > 32rem) {
.dz-detail-row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--space-lg);
}
}
.dz-detail-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-detail-value {
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-detail-file-link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
color: var(--colour-brand);
text-decoration: none;
}
.dz-detail-file-link:hover {
text-decoration: underline;
}
.dz-detail-file-icon {
width: 1rem;
height: 1rem;
}
.dz-detail-related-group {
margin-block-start: var(--space-xl);
}
.dz-detail-related-label {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: var(--space-md);
}
.dz-detail-region-grid {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--space-xs) var(--space-md);
margin: 0;
}
.dz-detail-region-grid > dt.dz-detail-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--colour-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0;
}
.dz-detail-region-grid > dd.dz-detail-value {
font-size: var(--text-sm);
color: var(--colour-text);
margin: 0;
}
.dz-empty-dense {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin: 0;
}
}
@layer components {
.dz-form-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
width: 100%;
}
.dz-form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-form-required {
color: var(--colour-danger);
margin-inline-start: var(--space-xs);
}
.dz-form-hint {
font-size: var(--text-xs);
color: var(--colour-text-muted);
line-height: var(--leading-normal);
}
.dz-form-error {
font-size: var(--text-xs);
color: var(--colour-danger);
margin-block-start: var(--space-xs);
}
.dz-form-input {
width: 100%;
height: auto;
min-height: 2.5rem;
line-height: 1.4;
padding-block: var(--space-sm);
padding-inline: var(--space-md);
font-size: var(--text-sm);
color: var(--colour-text);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
transition:
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-form-input::placeholder {
color: var(--colour-text-muted);
}
.dz-form-input:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-form-input[aria-invalid="true"] {
border-color: var(--colour-danger);
}
.dz-form-input[aria-invalid="true"]:focus-visible {
box-shadow: 0 0 0 1px var(--colour-danger);
}
.dz-form-textarea {
height: auto;
min-height: 6rem;
padding-block: var(--space-sm);
resize: vertical;
}
.dz-form-checkbox-label {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-form-checkbox {
width: 1rem;
height: 1rem;
border-radius: var(--radius-sm);
accent-color: var(--colour-brand);
}
.dz-form-money-group {
display: flex;
width: 100%;
}
.dz-form-money-prefix {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding-inline: var(--space-md);
background: var(--colour-bg);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
border: 1px solid var(--colour-border);
border-inline-end: 0;
border-start-start-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
}
.dz-form-money-select {
height: auto;
min-height: 2.5rem;
line-height: 1.4;
padding-block: var(--space-sm);
width: 7rem;
padding-inline: var(--space-sm);
background: var(--colour-surface);
color: var(--colour-text);
font-size: var(--text-sm);
border: 1px solid var(--colour-border);
border-inline-end: 0;
border-start-start-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
}
.dz-form-money-select:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-form-input-trailing {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.dz-file-upload-preview {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
margin-block-end: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-bg);
}
.dz-file-upload-preview-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--colour-success);
}
.dz-file-upload-preview-name {
font-size: var(--text-sm);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-file-upload-preview-clear {
width: 1.5rem;
height: 1.5rem;
margin-inline-start: auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-file-upload-preview-clear:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-file-upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 8rem;
border: 2px dashed var(--colour-border);
border-radius: var(--radius-md);
cursor: pointer;
transition:
background var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-file-upload-zone:hover,
.dz-file-upload-zone.dragging {
background: var(--colour-bg);
border-color: var(--colour-brand);
}
.dz-file-upload-zone-icon {
width: 2rem;
height: 2rem;
margin-block-end: var(--space-sm);
color: var(--colour-text-muted);
opacity: 0.6;
}
.dz-file-upload-zone-prompt {
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-file-upload-progress {
width: 100%;
height: 0.25rem;
margin-block-start: var(--space-sm);
border-radius: 2px;
}
.dz-form-color-group {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dz-form-color-input {
block-size: 2rem;
inline-size: 2rem;
padding: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: transparent;
cursor: pointer;
transition: filter var(--duration-fast) var(--ease-out);
}
.dz-form-color-input:hover {
filter: brightness(1.05);
}
.dz-form-color-input::-webkit-color-swatch-wrapper {
padding: 0;
}
.dz-form-color-input::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--radius-sm) - 1px);
}
.dz-form-color-input::-moz-color-swatch {
border: 0;
border-radius: calc(var(--radius-sm) - 1px);
}
.dz-form-color-hex {
font-family: var(--font-mono, monospace);
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-form-richtext {
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--colour-bg);
}
.dz-form-richtext[aria-invalid="true"] {
border-color: var(--colour-danger);
}
.dz-form-slider-group {
display: flex;
align-items: center;
gap: var(--space-md);
}
.dz-form-slider {
inline-size: 100%;
}
.dz-form-slider-value {
font-family: var(--font-mono, monospace);
font-size: var(--text-xs);
color: var(--colour-text);
min-inline-size: 2rem;
text-align: end;
}
.dz-form-companion {
margin-block: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-md);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
}
.dz-form-companion-eyebrow {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--colour-text-muted);
margin-block-end: var(--space-2xs);
}
.dz-form-companion-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: var(--space-sm);
}
.dz-form-companion-summary-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: var(--space-sm);
}
.dz-form-companion-metric {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
}
.dz-form-companion-metric-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
text-transform: capitalize;
}
.dz-form-companion-metric-value {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--colour-text);
font-variant-numeric: tabular-nums;
}
.dz-form-companion-metric-expr {
display: none;
}
.dz-form-companion-status-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dz-form-companion-entry {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding-inline-start: var(--space-md);
border-inline-start: 2px solid var(--colour-border);
}
.dz-form-companion-entry--ok {
border-inline-start-color: var(--colour-success, hsl(145 55% 45%));
}
.dz-form-companion-entry--warn {
border-inline-start-color: var(--colour-warn, hsl(40 90% 55%));
}
.dz-form-companion-entry--pending {
border-inline-start-color: var(--colour-text-muted);
opacity: 0.85;
}
.dz-form-companion-entry-title {
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-form-companion-entry-caption {
font-size: var(--text-sm);
color: var(--colour-text-muted);
line-height: 1.4;
}
.dz-form-companion-pipeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: var(--space-sm);
counter-reset: pipeline-step;
}
.dz-form-companion-stage {
counter-increment: pipeline-step;
padding: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
position: relative;
}
.dz-form-companion-stage::before {
content: counter(pipeline-step);
display: inline-block;
width: 1.25rem;
height: 1.25rem;
text-align: center;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--colour-text-muted);
margin-block-end: var(--space-2xs);
}
.dz-form-companion-stage-label {
display: block;
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-form-companion-stage-caption {
display: block;
font-size: var(--text-sm);
color: var(--colour-text-muted);
line-height: 1.4;
}
.dz-form-companion-placeholder {
font-size: var(--text-sm);
color: var(--colour-text-muted);
font-style: italic;
}
}
@layer components {
@layer components {
.dz-page {
margin: 0;
min-height: 100vh;
background: var(--colour-bg, var(--colour-surface));
color: var(--colour-text);
font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
.dz-page > .dz-stack:only-child {
max-width: 36rem;
margin: var(--space-xl) auto;
padding: var(--space-xl) var(--space-lg);
}
.dz-app-sidebar {
flex: 0 0 auto;
width: 16rem;
}
.dz-app-header {
display: flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
border-block-end: 1px solid var(--colour-border);
}
.dz-app-main {
flex: 1 1 auto;
padding: var(--space-md);
}
.dz-app-footer {
padding: var(--space-sm) var(--space-md);
border-block-start: 1px solid var(--colour-border);
}
.dz-error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
min-height: 60vh;
padding: var(--space-xl) var(--space-md);
text-align: center;
}
.dz-error-page__code {
margin: 0;
font-size: var(--text-4xl, 3rem);
font-weight: var(--weight-bold);
color: var(--colour-text-muted);
letter-spacing: -0.02em;
}
.dz-error-page__message {
margin: 0;
font-size: var(--text-lg);
color: var(--colour-text);
max-width: 40rem;
}
.dz-error-page__action {
margin-block-start: var(--space-md);
padding: var(--space-sm) var(--space-lg);
color: var(--colour-brand-contrast);
background: var(--colour-brand);
border-radius: var(--radius-sm);
text-decoration: none;
}
.dz-topbar {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) var(--space-md);
border-block-end: 1px solid var(--colour-border);
}
.dz-topbar-leading {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.dz-topbar-title {
flex: 1 1 auto;
min-width: 0;
}
.dz-topbar-title-text {
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-topbar-trailing {
display: flex;
align-items: center;
gap: var(--space-xs);
margin-inline-start: auto;
}
.dz-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
height: 100%;
background: var(--colour-surface);
border-inline-end: 1px solid var(--colour-border);
}
.dz-sidebar__header {
padding-block-end: var(--space-sm);
border-block-end: 1px solid var(--colour-border);
}
.dz-sidebar__items,
.dz-nav-group__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2xs, 2px);
}
.dz-nav-item {
display: block;
}
.dz-nav-link {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
color: var(--colour-text);
text-decoration: none;
border-radius: var(--radius-sm);
}
.dz-nav-link:hover {
background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
}
.dz-nav-link[aria-current="page"] {
background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));
font-weight: var(--weight-medium);
}
.dz-nav-group {
}
.dz-nav-group__header {
cursor: pointer;
padding: var(--space-xs) var(--space-sm);
color: var(--colour-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.05em;
list-style: none;
}
.dz-nav-group__header::-webkit-details-marker {
display: none;
}
.dz-surface {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: var(--space-md);
background: var(--colour-surface);
color: var(--colour-text);
}
.dz-surface__header {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding-block-end: var(--space-sm);
border-block-end: 1px solid var(--colour-border);
}
.dz-surface__body {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dz-surface__footer {
padding-block-start: var(--space-sm);
border-block-start: 1px solid var(--colour-border);
}
.dz-heading {
margin: 0;
color: var(--colour-text);
font-weight: var(--weight-semibold);
line-height: 1.25;
}
.dz-heading--level-1 { font-size: var(--text-xl); }
.dz-heading--level-2 { font-size: var(--text-lg); }
.dz-heading--level-3 { font-size: var(--text-base); }
.dz-heading--level-4 {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.dz-heading--level-5 {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-heading--level-6 {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.dz-stack {
display: flex;
flex-direction: column;
}
.dz-stack--gap-none { gap: 0; }
.dz-stack--gap-sm { gap: var(--space-sm); }
.dz-stack--gap-md { gap: var(--space-md); }
.dz-stack--gap-lg { gap: var(--space-lg); }
.dz-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.dz-row--gap-none { gap: 0; }
.dz-row--gap-sm { gap: var(--space-sm); }
.dz-row--gap-md { gap: var(--space-md); }
.dz-row--gap-lg { gap: var(--space-lg); }
.dz-row--align-start { align-items: flex-start; }
.dz-row--align-center { align-items: center; }
.dz-row--align-end { align-items: flex-end; }
.dz-row--align-stretch { align-items: stretch; }
.dz-grid {
display: grid;
gap: var(--space-md);
}
.dz-grid--columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.dz-grid--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-grid--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dz-grid--columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dz-grid--columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dz-grid--columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dz-grid--columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dz-grid--columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.dz-grid--columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.dz-grid--columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.dz-grid--columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.dz-grid--columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dz-region {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dz-region--kind-list {
overflow-x: auto;
}
.dz-region--kind-list > .dz-table {
width: 100%;
border-collapse: collapse;
background: var(--colour-surface);
}
.dz-region--kind-list > .dz-table thead > tr {
border-block-end: 1px solid var(--colour-border);
text-align: left;
}
.dz-region--kind-list > .dz-table th {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-region--kind-list > .dz-table > tbody > tr {
border-block-end: 1px solid var(--colour-border);
transition: background-color 0.12s ease;
}
.dz-region--kind-list > .dz-table > tbody > tr:last-child {
border-block-end: none;
}
.dz-region--kind-list > .dz-table > tbody > tr:hover {
background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04));
}
.dz-region--kind-list > .dz-table td {
padding: var(--space-sm) var(--space-md);
color: var(--colour-text);
}
.dz-region--kind-detail {
overflow-x: auto;
}
.dz-region--kind-detail .dz-stack {
gap: var(--space-md);
}
.dz-region--kind-detail .dz-row {
display: grid;
grid-template-columns: minmax(8rem, 12rem) 1fr;
gap: var(--space-md);
align-items: baseline;
}
.dz-region--kind-detail .dz-row > .dz-heading {
color: var(--colour-text-muted);
font-weight: var(--weight-medium);
text-align: end;
}
.dz-region--kind-detail .dz-row > .dz-text {
color: var(--colour-text);
}
.dz-region--kind-related {
margin-block-start: var(--space-lg);
padding-block-start: var(--space-md);
border-block-start: 1px solid var(--colour-border);
}
.dz-region--kind-related .dz-heading--level-2 {
margin-block-end: var(--space-sm);
}
.dz-region--kind-form {
}
.dz-form-stack {
display: flex;
flex-direction: column;
gap: var(--space-md);
max-width: 40rem;
}
.dz-field {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dz-field__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-field__input {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
color: var(--colour-text);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
.dz-field__input:focus {
outline: 2px solid var(--colour-accent);
outline-offset: 1px;
}
.dz-combobox {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dz-combobox__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-combobox__select {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
color: var(--colour-text);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
.dz-ref-picker {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.dz-ref-picker__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-ref-picker__select {
padding: var(--space-sm) var(--space-md);
font-size: var(--text-base);
color: var(--colour-text);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
.dz-submit {
align-self: flex-start;
padding: var(--space-sm) var(--space-lg);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--colour-brand-contrast);
background: var(--colour-brand);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
}
.dz-submit--variant-secondary {
background: var(--colour-surface);
color: var(--colour-text);
border: 1px solid var(--colour-border);
}
.dz-submit--variant-danger {
background: var(--colour-danger);
color: var(--colour-brand-contrast);
}
.dz-text {
color: var(--colour-text);
}
.dz-text--tone-default { color: var(--colour-text); }
.dz-text--tone-muted { color: var(--colour-text-muted); }
.dz-text--tone-danger { color: var(--colour-danger); }
.dz-text--tone-success { color: var(--colour-success); }
.dz-text--tone-warning { color: var(--colour-warning); }
}
}
@layer components {
.dz-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-block: var(--space-3xl);
text-align: center;
}
.dz-empty-state-icon {
width: 3rem;
height: 3rem;
margin-block-end: var(--space-sm);
color: var(--colour-text-muted);
opacity: 0.6;
}
.dz-empty-state-message {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin: 0;
}
.dz-empty-state-cta {
margin-block-start: var(--space-md);
display: inline-flex;
align-items: center;
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: none;
transition: filter var(--duration-fast) var(--ease-out);
}
.dz-empty-state-cta:hover {
filter: brightness(1.1);
}
.dz-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: 0.25rem;
padding-block: var(--space-sm);
font-size: var(--text-sm);
}
.dz-pagination-summary {
color: var(--colour-text-muted);
}
.dz-pagination-pages {
display: flex;
align-items: center;
gap: 0.25rem;
}
.dz-pagination-page {
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-pagination-page:hover {
background: var(--colour-bg);
}
.dz-pagination-page.is-current {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
}
.dz-pagination-ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2rem;
padding-inline: var(--space-xs);
font-size: var(--text-sm);
color: var(--colour-text-muted);
user-select: none;
}
.dz-breadcrumbs {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-breadcrumbs > ol {
display: flex;
align-items: center;
gap: 0.375rem;
flex-wrap: wrap;
list-style: none;
padding-inline-start: 0;
margin: 0;
}
.dz-breadcrumbs > ol > li {
display: flex;
align-items: center;
gap: 0.375rem;
}
.dz-breadcrumb-separator {
color: var(--colour-text-muted);
opacity: 0.6;
}
.dz-breadcrumb-link {
color: var(--colour-text-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-breadcrumb-link:hover {
color: var(--colour-text);
}
.dz-breadcrumb-current {
color: var(--colour-text);
font-weight: var(--weight-medium);
}
.dz-alert-banner {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding-inline: var(--space-md);
padding-block: var(--space-md);
border-block-end: 1px solid;
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-alert-banner[data-dz-alert-level="info"] {
background: color-mix(in oklch, var(--colour-brand) 8%, transparent);
border-block-end-color: color-mix(in oklch, var(--colour-brand) 20%, transparent);
}
.dz-alert-banner[data-dz-alert-level="success"] {
background: color-mix(in oklch, var(--colour-success) 8%, transparent);
border-block-end-color: color-mix(in oklch, var(--colour-success) 20%, transparent);
}
.dz-alert-banner[data-dz-alert-level="warning"] {
background: color-mix(in oklch, var(--colour-warning) 8%, transparent);
border-block-end-color: color-mix(in oklch, var(--colour-warning) 20%, transparent);
}
.dz-alert-banner[data-dz-alert-level="error"] {
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
border-block-end-color: color-mix(in oklch, var(--colour-danger) 20%, transparent);
}
.dz-alert-icon {
width: 1rem;
height: 1rem;
margin-block-start: 0.125rem;
flex-shrink: 0;
}
.dz-alert-banner[data-dz-alert-level="info"] .dz-alert-icon { color: var(--colour-brand); }
.dz-alert-banner[data-dz-alert-level="success"] .dz-alert-icon { color: var(--colour-success); }
.dz-alert-banner[data-dz-alert-level="warning"] .dz-alert-icon { color: var(--colour-warning); }
.dz-alert-banner[data-dz-alert-level="error"] .dz-alert-icon { color: var(--colour-danger); }
.dz-alert-message {
flex: 1 1 0;
line-height: var(--leading-tight);
}
.dz-alert-dismiss {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-alert-dismiss:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-toast {
pointer-events: auto;
max-width: 24rem;
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
border-inline-start-width: 4px;
background: var(--colour-surface);
color: var(--colour-text);
box-shadow: var(--shadow-md);
padding-inline: var(--space-md);
padding-block: var(--space-md);
display: flex;
align-items: flex-start;
gap: var(--space-md);
transition: all var(--duration-base) var(--ease-out);
}
.dz-toast[data-dz-toast-level="success"] { border-inline-start-color: var(--colour-success); }
.dz-toast[data-dz-toast-level="error"] { border-inline-start-color: var(--colour-danger); }
.dz-toast[data-dz-toast-level="warning"] { border-inline-start-color: var(--colour-warning); }
.dz-toast[data-dz-toast-level="info"] { border-inline-start-color: var(--colour-brand); }
.dz-toast-icon {
width: 0.75rem;
height: 0.75rem;
margin-block-start: 3px;
flex-shrink: 0;
}
.dz-toast[data-dz-toast-level="success"] .dz-toast-icon { color: var(--colour-success); }
.dz-toast[data-dz-toast-level="error"] .dz-toast-icon { color: var(--colour-danger); }
.dz-toast[data-dz-toast-level="warning"] .dz-toast-icon { color: var(--colour-warning); }
.dz-toast[data-dz-toast-level="info"] .dz-toast-icon { color: var(--colour-brand); }
.dz-toast-message {
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-bulk-actions {
display: none;
align-items: center;
gap: var(--space-md);
}
.dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-actions {
display: flex;
}
.dz-bulk-plural {
display: inline;
}
.dz-table[data-dz-bulk-count="1"] .dz-bulk-plural {
display: none;
}
.dz-bulk-summary-selected {
display: none;
}
.dz-bulk-summary-rows {
display: inline;
}
.dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-summary-selected {
display: inline;
}
.dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-summary-rows {
display: none;
}
.dz-bulk-delete {
display: inline-flex;
align-items: center;
gap: 0.375rem;
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--colour-danger);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-bulk-delete:hover {
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
}
.dz-bulk-clear {
font-size: var(--text-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-bulk-clear:hover {
color: var(--colour-text);
}
.dz-toggle-group {
display: inline-flex;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
padding: 0.125rem;
}
.dz-toggle-item {
height: 1.75rem;
padding-inline: var(--space-md);
border-radius: var(--radius-xs, 0.1875rem);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
background: transparent;
border: 0;
cursor: pointer;
color: var(--colour-text-muted);
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.dz-toggle-item:hover {
color: var(--colour-text);
}
.dz-toggle-item.is-selected,
.dz-toggle-item[aria-pressed="true"] {
background: var(--colour-surface);
color: var(--colour-text);
box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08);
}
.dz-toggle-item:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-form-stepper {
display: flex;
align-items: center;
width: 100%;
margin-block-end: var(--space-xl);
gap: var(--space-sm);
list-style: none;
padding-inline-start: 0;
}
.dz-form-stepper-item {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
cursor: pointer;
}
.dz-form-stepper-item.is-not-last {
flex: 1 1 0;
}
.dz-form-stepper-circle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-full);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
transition: background var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-form-stepper-circle.is-active {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
border-color: var(--colour-brand);
}
.dz-form-stepper-circle > svg {
width: 0.75rem;
height: 0.75rem;
}
.dz-form-stepper-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--colour-text-muted);
transition: color var(--duration-base) var(--ease-out);
}
.dz-form-stepper-label.is-active {
color: var(--colour-text);
}
.dz-form-stepper-connector {
flex: 1 1 0;
height: 1px;
background: var(--colour-border);
transition: background var(--duration-base) var(--ease-out);
}
.dz-form-stepper-connector.is-active {
background: var(--colour-brand);
}
.dz-steps {
display: flex;
align-items: center;
width: 100%;
list-style: none;
padding-inline-start: 0;
margin: 0;
}
.dz-steps-item {
display: flex;
align-items: center;
}
.dz-steps-item.is-not-last {
flex: 1 1 0;
}
.dz-steps-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-steps-circle {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
background: var(--colour-bg);
color: var(--colour-text-muted);
}
.dz-steps-circle.is-completed {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
}
.dz-steps-label {
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-steps-label.is-completed {
color: var(--colour-text);
font-weight: var(--weight-medium);
}
.dz-steps-connector {
flex: 1 1 0;
margin-inline: var(--space-md);
height: 1px;
background: var(--colour-border);
}
.dz-steps-connector.is-completed {
background: var(--colour-brand);
}
.dz-date-range-picker {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-block-end: var(--space-sm);
}
.dz-date-range-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-date-range-input {
height: 1.75rem;
padding-inline: var(--space-sm);
width: 9rem;
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-xs);
color: var(--colour-text);
}
.dz-date-range-input:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-detail-fields-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.dz-detail-fields-body {
padding: var(--space-lg);
}
.dz-detail-fields-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-detail-fields-list {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-xs) var(--space-md);
margin-block-start: var(--space-md);
}
.dz-detail-fields-key {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
text-align: end;
padding-block: 0.25rem;
}
.dz-detail-fields-value {
font-size: var(--text-sm);
padding-block: 0.25rem;
word-break: break-all;
}
.dz-popover {
position: relative;
display: inline-block;
}
.dz-popover-trigger {
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-popover-trigger:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-popover-panel {
position: absolute;
z-index: 50;
margin-block-start: 0.25rem;
padding: var(--space-md);
min-width: 12rem;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-context-menu {
position: relative;
}
.dz-context-menu-panel {
z-index: 50;
min-width: 11rem;
padding-block: 0.25rem;
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
box-shadow: var(--shadow-md);
font-size: var(--text-sm);
list-style: none;
margin: 0;
padding-inline-start: 0;
}
.dz-context-menu-divider {
margin-block: 0.25rem;
border-block-start: 1px solid var(--colour-border);
}
.dz-context-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-inline: var(--space-md);
padding-block: 0.375rem;
color: var(--colour-text);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-context-menu-item:hover {
background: var(--colour-bg);
}
.dz-context-menu-item-icon {
width: 0.875rem;
height: 0.875rem;
color: var(--colour-text-muted);
}
.dz-slideover-backdrop {
position: fixed;
inset: 0;
background: oklch(0% 0 0 / 0.3);
z-index: 40;
}
.dz-slideover-panel {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 50;
width: 100%;
background: var(--colour-bg);
border-inline-start: 1px solid var(--colour-border);
box-shadow: -8px 0 24px oklch(0% 0 0 / 0.12);
overflow-y: auto;
transform: translateX(0);
}
@media (min-width: 40rem) {
[data-dz-width="sm"] .dz-slideover-panel { max-width: 24rem; }
[data-dz-width="md"] .dz-slideover-panel { max-width: 32rem; }
[data-dz-width="lg"] .dz-slideover-panel { max-width: 42rem; }
[data-dz-width="xl"] .dz-slideover-panel { max-width: 56rem; }
}
.dz-slideover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md);
border-block-end: 1px solid var(--colour-border);
}
.dz-slideover-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-slideover-close {
width: 1.75rem;
height: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-slideover-close:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-slideover-close > svg {
width: 1rem;
height: 1rem;
}
.dz-slideover-body {
padding: var(--space-md);
}
.dz-slideover-empty-text {
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-slideover-content {
padding: var(--space-md);
}
.dz-slideover-content-empty {
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-sentinel-cell {
text-align: center;
padding-block: var(--space-md);
}
.dz-sentinel-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
animation: dz-spin 1s linear infinite;
}
.dz-form-errors {
display: flex;
gap: var(--space-md);
padding: var(--space-md);
margin-block-end: var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid var(--colour-danger);
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
}
.dz-form-errors-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: var(--colour-danger);
}
.dz-form-errors-body {
min-width: 0;
}
.dz-form-errors-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-form-errors-message {
font-size: var(--text-sm);
color: var(--colour-text);
margin-block-start: 0.125rem;
}
.dz-form-errors-list {
font-size: var(--text-sm);
color: var(--colour-text);
list-style: disc inside;
margin: 0.125rem 0 0;
padding-inline-start: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.dz-select-result-confirm {
padding: var(--space-md);
font-size: var(--text-sm);
color: var(--colour-success);
}
.dz-select-result-input {
width: 100%;
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-search-result-row {
padding-inline: var(--space-md);
padding-block: var(--space-sm);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-search-result-row:hover {
background: var(--colour-bg);
}
.dz-search-result-name {
font-weight: var(--weight-medium);
font-size: var(--text-sm);
}
.dz-search-result-secondary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-search-result-empty {
padding: var(--space-md);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-experience-transition {
display: inline-flex;
align-items: center;
height: 2.25rem;
padding-inline: var(--space-md);
font-weight: var(--weight-medium);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
border: 0;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
filter var(--duration-fast) var(--ease-out);
}
.dz-experience-transition[data-dz-transition-style="primary"] {
background: var(--colour-brand);
color: var(--colour-brand-contrast);
}
.dz-experience-transition[data-dz-transition-style="primary"]:hover {
filter: brightness(1.1);
}
.dz-experience-transition[data-dz-transition-style="ghost"] {
background: transparent;
color: var(--colour-text-muted);
}
.dz-experience-transition[data-dz-transition-style="ghost"]:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-experience-transition[data-dz-transition-style="default"],
.dz-experience-transition:not([data-dz-transition-style]) {
background: transparent;
color: var(--colour-text);
border: 1px solid var(--colour-border);
}
.dz-experience-transition[data-dz-transition-style="default"]:hover,
.dz-experience-transition:not([data-dz-transition-style]):hover {
background: var(--colour-bg);
}
.dz-auth-card {
width: 100%;
max-width: 24rem;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-lg);
}
.dz-auth-product {
display: block;
text-align: center;
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-brand);
margin-block-end: var(--space-md);
text-decoration: none;
}
.dz-auth-product:hover {
text-decoration: underline;
}
.dz-auth-title {
text-align: center;
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: var(--space-lg);
}
.dz-auth-error {
display: none;
flex-direction: row;
gap: var(--space-sm);
padding: var(--space-md);
margin-block-end: var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid var(--colour-danger);
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-auth-error:not(.hidden) {
display: flex;
}
.dz-auth-success {
display: none;
flex-direction: row;
gap: var(--space-sm);
padding: var(--space-md);
margin-block-end: var(--space-md);
border-radius: var(--radius-sm);
border: 1px solid var(--colour-brand);
background: color-mix(in oklch, var(--colour-brand) 8%, transparent);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-auth-success:not(.hidden) {
display: flex;
}
.dz-auth-subtitle {
text-align: center;
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block: calc(var(--space-md) * -0.5) var(--space-md);
}
.dz-auth-form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dz-auth-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.dz-auth-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-auth-input {
inline-size: 100%;
block-size: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
color: var(--colour-text);
font-size: var(--text-sm);
transition: box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-auth-input::placeholder {
color: var(--colour-text-muted);
}
.dz-auth-input:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-auth-input[aria-invalid="true"] {
border-color: var(--colour-danger);
}
.dz-auth-submit {
inline-size: 100%;
margin-block-start: var(--space-md);
block-size: 2.25rem;
}
.dz-auth-footer-end {
text-align: end;
font-size: var(--text-xs);
margin-block-start: var(--space-sm);
}
.dz-auth-footer-center {
text-align: center;
font-size: var(--text-sm);
margin-block-start: var(--space-md);
}
.dz-auth-link-muted {
color: var(--colour-text-muted);
text-decoration: none;
}
.dz-auth-link-muted:hover {
color: var(--colour-text);
text-decoration: underline;
}
.dz-auth-link-brand {
color: var(--colour-brand);
text-decoration: none;
}
.dz-auth-link-brand:hover {
text-decoration: underline;
}
.dz-auth-hint {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-auth-context-line {
text-align: center;
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: var(--space-md);
}
.dz-auth-context-line strong {
color: var(--colour-text);
font-weight: var(--weight-medium);
}
.dz-auth-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
margin-block: var(--space-md);
}
.dz-auth-qr-image {
inline-size: 12rem;
block-size: 12rem;
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
}
.dz-auth-qr-secret {
font-family: var(--font-mono, monospace);
font-size: var(--text-xs);
color: var(--colour-text-muted);
word-break: break-all;
text-align: center;
padding: var(--space-sm);
background: var(--colour-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
}
.dz-auth-codes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
margin-block: var(--space-md);
padding: var(--space-md);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
font-family: var(--font-mono, monospace);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-auth-input-code {
inline-size: 100%;
block-size: 2.5rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
color: var(--colour-text);
font-size: 1.25rem;
font-weight: var(--weight-semibold);
letter-spacing: 0.4em;
text-align: center;
transition: box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-auth-input-code::placeholder {
color: var(--colour-text-muted);
letter-spacing: 0.4em;
}
.dz-auth-input-code:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-auth-divider {
position: relative;
margin-block: var(--space-md);
}
.dz-auth-divider::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
border-block-start: 1px solid var(--colour-border);
}
.dz-auth-divider-label {
position: relative;
display: inline-block;
padding-inline: var(--space-sm);
background: var(--colour-surface);
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--colour-text-muted);
}
.dz-auth-divider-row {
text-align: center;
}
.dz-auth-link-button {
background: transparent;
border: 0;
cursor: pointer;
padding-inline: var(--space-sm);
block-size: 1.75rem;
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-auth-link-button:hover:not(:disabled) {
color: var(--colour-text);
text-decoration: underline;
}
.dz-auth-link-button:disabled {
opacity: 0.5;
cursor: default;
}
.dz-auth-link-button-row {
text-align: center;
margin-block-start: var(--space-sm);
}
.dz-auth-section-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: 0.25rem;
}
.dz-auth-section-body {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: var(--space-md);
}
.dz-auth-qr-container {
display: flex;
justify-content: center;
margin-block: var(--space-md);
}
.dz-auth-secret-inline {
font-family: var(--font-mono, monospace);
font-size: 0.6875rem;
color: var(--colour-text);
background: var(--colour-bg);
padding-inline: 0.25rem;
padding-block: 0.125rem;
border-radius: var(--radius-xs);
}
.dz-auth-hr {
border: 0;
border-block-start: 1px solid var(--colour-border);
margin-block: var(--space-xl);
}
.dz-auth-recovery-alert {
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: var(--colour-bg);
padding: var(--space-md);
}
.dz-auth-recovery-alert-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-auth-recovery-alert-body {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: 0.25rem;
}
.dz-auth-recovery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
margin-block-start: var(--space-md);
font-family: var(--font-mono, monospace);
font-size: var(--text-xs);
}
.dz-auth-recovery-pill {
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
padding-inline: var(--space-sm);
padding-block: var(--space-sm);
text-align: center;
font-size: var(--text-xs);
color: var(--colour-text);
}
.dz-auth-back-link {
display: block;
inline-size: 100%;
block-size: 2.25rem;
line-height: 2.25rem;
text-align: center;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
text-decoration: none;
margin-block-start: var(--space-xl);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-auth-back-link:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-auth-status-loading {
text-align: center;
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-auth-status-row {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: var(--space-md);
border-block-end: 1px solid var(--colour-border);
}
.dz-auth-status-row.is-last {
border-block-end: 0;
}
.dz-auth-status-label {
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-loading-spinner {
display: flex;
justify-content: center;
padding-block: var(--space-md);
}
.dz-loading-spinner-icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
animation: dz-spin 1s linear infinite;
}
.dz-skip-link {
position: absolute;
inset-block-start: -100vh;
inset-inline-start: 0;
padding: var(--space-sm);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
border-radius: var(--radius-sm);
z-index: 9999;
text-decoration: none;
transition: top var(--duration-fast) var(--ease-out);
}
.dz-skip-link:focus,
.dz-skip-link:focus-visible {
inset-block-start: 0.5rem;
inset-inline-start: 0.5rem;
}
.dz-layout-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.dz-layout-topbar {
display: flex;
align-items: center;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
background: var(--colour-surface);
border-block-end: 1px solid var(--colour-border);
box-shadow: var(--shadow-sm);
}
.dz-layout-topbar-title {
flex: 1 1 0;
}
.dz-layout-topbar-title-text {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
}
.dz-layout-topbar-nav {
display: flex;
gap: var(--space-sm);
flex: none;
}
.dz-layout-nav-link {
display: inline-flex;
align-items: center;
height: 2rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-layout-nav-link:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-layout-main {
flex: 1 1 0;
margin-inline: auto;
padding: var(--space-md);
max-width: 64rem;
width: 100%;
}
@media (min-width: 64rem) {
.dz-layout-main {
padding: var(--space-lg);
}
}
.dz-layout-footer {
text-align: center;
padding: var(--space-md);
background: var(--colour-surface);
color: var(--colour-text);
border-block-start: 1px solid var(--colour-border);
}
.dz-accordion {
}
.dz-accordion-item {
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
background: var(--colour-surface);
}
.dz-accordion-item + .dz-accordion-item {
margin-block-start: 0.25rem;
}
.dz-accordion-summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-accordion-summary::-webkit-details-marker {
display: none;
}
.dz-accordion-summary:hover {
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
}
.dz-accordion-chevron {
width: 1rem;
height: 1rem;
color: var(--colour-text-muted);
transition: transform var(--duration-base) var(--ease-out);
}
.dz-accordion-item[open] > .dz-accordion-summary .dz-accordion-chevron {
transform: rotate(180deg);
}
.dz-accordion-content {
padding-inline: var(--space-md);
padding-block: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text);
border-block-start: 1px solid var(--colour-border);
}
.dz-accordion-loading {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--colour-text-muted);
}
.dz-accordion-loading-icon {
width: 0.75rem;
height: 0.75rem;
animation: dz-spin 1s linear infinite;
}
.dz-related-group {
margin-block-end: var(--space-md);
}
.dz-related-tab-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
margin-block-end: var(--space-sm);
}
.dz-related-create-row {
display: flex;
justify-content: flex-end;
margin-block-end: var(--space-sm);
}
.dz-related-create-button {
display: inline-flex;
align-items: center;
height: 1.75rem;
padding-inline: 0.625rem;
border-radius: var(--radius-sm);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-decoration: none;
transition: filter var(--duration-fast) var(--ease-out);
}
.dz-related-create-button:hover {
filter: brightness(1.1);
}
.dz-related-empty {
text-align: center;
padding-block: var(--space-lg);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-related-status-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 40rem) {
.dz-related-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.dz-related-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dz-related-status-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
padding: var(--space-md);
cursor: pointer;
transition: box-shadow var(--duration-base) var(--ease-out);
}
.dz-related-status-card:hover {
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06);
}
.dz-related-status-card-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
}
.dz-related-status-card-text {
min-width: 0;
}
.dz-related-status-card-primary {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.dz-related-status-card-secondary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.dz-related-status-card-badge {
flex-shrink: 0;
}
.dz-related-tabs {
display: flex;
border-block-end: 1px solid var(--colour-border);
}
.dz-related-tab {
padding-inline: var(--space-md);
padding-block: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: -1px;
border-block-end: 2px solid transparent;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-related-tab:hover {
color: var(--colour-text);
}
.dz-related-tab.is-active {
color: var(--colour-text);
font-weight: var(--weight-medium);
border-block-end-color: var(--colour-brand);
}
.dz-related-tab-count {
margin-inline-start: 0.25rem;
display: inline-flex;
align-items: center;
padding-inline: 0.375rem;
height: 1rem;
border-radius: var(--radius-sm);
background: var(--colour-bg);
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-related-table-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-block-start: var(--space-sm);
}
.dz-related-table-create-row {
display: flex;
justify-content: flex-end;
padding: var(--space-md);
padding-block-end: 0;
}
.dz-related-table-scroll {
overflow-x: auto;
}
.dz-related-table {
width: 100%;
border-collapse: collapse;
}
.dz-related-table > thead > tr {
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
border-block-end: 1px solid var(--colour-border);
}
.dz-related-table th {
text-align: start;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
letter-spacing: -0.01em;
}
.dz-related-table > tbody > tr {
border-block-end: 1px solid var(--colour-border);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-related-table > tbody > tr:last-child {
border-block-end: 0;
}
.dz-related-table > tbody > tr:hover {
background: var(--colour-bg);
}
.dz-related-table td {
font-size: var(--text-sm);
color: var(--colour-text);
padding-inline: var(--space-md);
padding-block: 0.625rem;
}
.dz-related-table-empty-cell {
text-align: center;
padding-block: var(--space-2xl);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-related-file-list {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dz-related-file-list > * + * {
border-block-start: 1px solid var(--colour-border);
}
.dz-related-file-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding-inline: var(--space-md);
padding-block: var(--space-md);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-related-file-row:hover {
background: var(--colour-bg);
}
.dz-related-file-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
color: color-mix(in oklch, var(--colour-text-muted) 60%, transparent);
}
.dz-related-file-text {
flex: 1 1 0;
min-width: 0;
}
.dz-related-file-primary {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.dz-related-file-secondary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.dz-related-file-date {
font-size: var(--text-xs);
color: var(--colour-text-muted);
flex-shrink: 0;
}
.dz-tooltip {
position: relative;
display: inline-block;
}
.dz-tooltip-panel {
position: absolute;
z-index: 50;
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
border-radius: var(--radius-sm);
max-width: 20rem;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
background: var(--colour-text);
color: var(--colour-bg);
box-shadow: var(--shadow-md);
}
.dz-inline-edit {
position: relative;
margin-inline: -0.25rem;
margin-block: -0.125rem;
}
.dz-inline-edit-input {
width: 100%;
height: 1.75rem;
padding-inline: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text);
background: var(--colour-surface);
border-radius: var(--radius-sm);
border: 1px solid var(--colour-brand);
outline: none;
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.dz-inline-edit-input:focus-visible {
box-shadow: 0 0 0 2px color-mix(in oklch, var(--colour-brand) 20%, transparent);
}
.dz-inline-edit-input[data-dz-edit-error="true"] {
border-color: var(--colour-danger);
}
.dz-inline-edit-input[data-dz-edit-error="true"]:focus-visible {
box-shadow: 0 0 0 2px color-mix(in oklch, var(--colour-danger) 30%, transparent);
}
.dz-inline-edit-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dz-inline-edit-select {
padding-inline-end: var(--space-lg);
appearance: none;
}
.dz-inline-edit-bool-row {
display: flex;
align-items: center;
gap: var(--space-sm);
height: 1.75rem;
padding-inline: 0.25rem;
}
.dz-inline-edit-checkbox {
width: 1rem;
height: 1rem;
border-radius: var(--radius-sm);
accent-color: var(--colour-brand);
cursor: pointer;
}
.dz-inline-edit-checkbox:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.dz-inline-edit-bool-label {
font-size: var(--text-sm);
color: var(--colour-text-muted);
user-select: none;
cursor: pointer;
}
.dz-inline-edit-spinner {
position: absolute;
inset-block: 0;
inset-inline-end: 0.25rem;
display: flex;
align-items: center;
pointer-events: none;
}
.dz-inline-edit-spinner-icon {
width: 0.875rem;
height: 0.875rem;
color: var(--colour-text-muted);
animation: dz-spin 1s linear infinite;
}
.dz-inline-edit-error {
position: absolute;
inset-block-start: 100%;
inset-inline-start: 0;
margin-block-start: 0.25rem;
z-index: 50;
max-width: 12.5rem;
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
line-height: var(--leading-tight);
background: var(--colour-danger);
color: white;
box-shadow: var(--shadow-sm);
white-space: nowrap;
pointer-events: none;
}
.dz-skeleton {
border-radius: var(--radius-sm);
background: var(--colour-bg);
animation: dz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.dz-skeleton-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-sm);
}
.dz-skeleton-card-stack {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dz-skeleton-detail {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dz-skeleton-detail-row {
display: flex;
gap: var(--space-md);
}
.dz-skeleton-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 40rem) {
.dz-skeleton-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
.dz-skeleton-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dz-skeleton-h-3 { height: 0.75rem; }
.dz-skeleton-h-4 { height: 1rem; }
.dz-skeleton-h-6 { height: 1.5rem; }
.dz-skeleton-w-full { width: 100%; }
.dz-skeleton-w-3-4 { width: 75%; }
.dz-skeleton-w-1-2 { width: 50%; }
.dz-skeleton-w-1-3 { width: 33.333%; }
.dz-skeleton-w-5-6 { width: 83.333%; }
.dz-skeleton-w-24 { width: 6rem; }
.dz-skeleton-w-48 { width: 12rem; }
.dz-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: flex-end;
}
.dz-filter-cell {
display: flex;
flex-direction: column;
gap: 0.125rem;
width: 10rem;
}
.dz-filter-label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-filter-select,
.dz-filter-input {
height: 2rem;
width: 100%;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
padding-inline: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text);
outline: none;
transition: box-shadow var(--duration-base) var(--ease-out);
}
.dz-filter-select:focus-visible,
.dz-filter-input:focus-visible {
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-ref-link {
color: var(--colour-brand);
text-decoration: none;
transition: text-decoration-color var(--duration-fast) var(--ease-out);
}
.dz-ref-link:hover {
text-decoration: underline;
}
.dz-search-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.dz-search-input-icon {
position: absolute;
inset-inline-start: 0.625rem;
pointer-events: none;
color: var(--colour-text-muted);
}
.dz-search-input {
height: 2rem;
width: 14rem;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
padding-inline-start: 2rem;
padding-inline-end: 1.75rem;
font-size: var(--text-sm);
color: var(--colour-text);
outline: none;
transition: box-shadow var(--duration-base) var(--ease-out);
}
.dz-search-input::placeholder {
color: var(--colour-text-muted);
}
.dz-search-input:focus-visible {
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-search-clear {
position: absolute;
inset-inline-end: 0.5rem;
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-search-clear:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-attn-border {
border-inline-start-width: 4px;
border-inline-start-style: solid;
}
.dz-attn-border.dz-attn-tone-critical { border-inline-start-color: var(--colour-danger); }
.dz-attn-border.dz-attn-tone-warning { border-inline-start-color: var(--colour-warning); }
.dz-attn-border.dz-attn-tone-notice { border-inline-start-color: var(--colour-brand); }
.dz-attn-tint.dz-attn-tone-critical {
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
}
.dz-attn-tint.dz-attn-tone-warning {
background: color-mix(in oklch, var(--colour-warning) 8%, transparent);
}
.dz-attn-tint.dz-attn-tone-notice {
background: color-mix(in oklch, var(--colour-brand) 6%, transparent);
}
.dz-attn-both {
border-inline-start-width: 4px;
border-inline-start-style: solid;
}
.dz-attn-both.dz-attn-tone-critical {
border-inline-start-color: var(--colour-danger);
background: color-mix(in oklch, var(--colour-danger) 4%, transparent);
}
.dz-attn-both.dz-attn-tone-warning {
border-inline-start-color: var(--colour-warning);
background: color-mix(in oklch, var(--colour-warning) 4%, transparent);
}
.dz-attn-both.dz-attn-tone-notice {
border-inline-start-color: var(--colour-brand);
background: color-mix(in oklch, var(--colour-brand) 4%, transparent);
}
.dz-attn-bullet.dz-attn-tone-critical { color: var(--colour-danger); }
.dz-attn-bullet.dz-attn-tone-warning { color: var(--colour-warning); }
.dz-attn-bullet.dz-attn-tone-notice { color: var(--colour-brand); }
.dz-attn-bullet.dz-attn-tone-default { color: var(--colour-brand); }
.dz-cmdk-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: flex-start;
justify-content: center;
padding-block-start: 20vh;
}
.dz-cmdk-backdrop {
position: fixed;
inset: 0;
background: oklch(0% 0 0 / 0.4);
}
.dz-cmdk-card {
position: relative;
width: 100%;
max-width: 32rem;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.dz-cmdk-search-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-block-end: 1px solid var(--colour-border);
}
.dz-cmdk-search-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--colour-text-muted);
}
.dz-cmdk-search-input {
width: 100%;
background: transparent;
font-size: var(--text-base);
color: var(--colour-text);
border: 0;
outline: none;
}
.dz-cmdk-search-input::placeholder {
color: var(--colour-text-muted);
}
.dz-cmdk-results {
max-height: 20rem;
overflow-y: auto;
padding: 0.375rem;
list-style: none;
margin: 0;
}
.dz-cmdk-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-cmdk-item:hover {
background: var(--colour-bg);
}
.dz-cmdk-item.is-selected {
background: color-mix(in oklch, var(--colour-brand) 10%, transparent);
color: var(--colour-brand);
}
.dz-cmdk-item-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.dz-cmdk-item-text {
min-width: 0;
}
.dz-cmdk-item-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-cmdk-item-group {
font-size: var(--text-xs);
color: var(--colour-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-cmdk-empty {
padding-inline: var(--space-md);
padding-block: var(--space-lg);
text-align: center;
font-size: var(--text-sm);
font-style: italic;
color: var(--colour-text-muted);
}
.dz-cmdk-footer {
display: flex;
align-items: center;
gap: var(--space-md);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-block-start: 1px solid var(--colour-border);
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-cmdk-hint {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.dz-cmdk-key {
display: inline-flex;
align-items: center;
height: 1.25rem;
padding-inline: 0.375rem;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: var(--colour-bg);
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--colour-text-muted);
}
.dz-search-select {
position: relative;
width: 100%;
}
.dz-search-select-input {
width: 100%;
height: 2rem;
padding-inline-start: var(--space-md);
padding-inline-end: 2rem;
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-sm);
color: var(--colour-text);
outline: none;
transition:
box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-search-select-input::placeholder {
color: var(--colour-text-muted);
}
.dz-search-select-input:focus-visible {
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-search-select-input[aria-invalid="true"] {
border-color: var(--colour-danger);
}
.dz-search-select-input[aria-invalid="true"]:focus-visible {
box-shadow: 0 0 0 1px var(--colour-danger);
}
.dz-search-select-spinner {
position: absolute;
inset-inline-end: var(--space-md);
inset-block-start: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: var(--colour-text-muted);
}
.dz-search-select-spinner-icon {
width: 1rem;
height: 1rem;
animation: dz-spin 1s linear infinite;
}
.dz-search-select-results {
position: absolute;
z-index: 50;
width: 100%;
margin-block-start: 0.25rem;
max-height: 15rem;
overflow-y: auto;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.dz-search-select-prompt {
padding-inline: var(--space-md);
padding-block: var(--space-md);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-tr-row {
height: 2.25rem;
font-size: var(--text-sm);
color: var(--colour-text);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.dz-tr-row:hover {
background: var(--colour-surface);
}
.dz-tr-row.is-selected {
background: color-mix(in oklch, var(--colour-brand) 10%, transparent);
}
.dz-tr-row.is-saving {
opacity: 0.7;
}
.dz-tr-row.is-error {
border-inline-start: 2px solid var(--colour-danger);
}
.dz-tr-checkbox-cell {
width: 2.5rem;
padding-inline: var(--space-md);
}
.dz-tr-checkbox {
width: 0.875rem;
height: 0.875rem;
border-radius: var(--radius-sm);
accent-color: var(--colour-brand);
cursor: pointer;
}
.dz-tr-cell {
padding-inline: var(--space-md);
}
.dz-tr-cell.is-numeric {
text-align: end;
font-variant-numeric: tabular-nums;
}
.dz-tr-cell-display {
display: block;
width: 100%;
border-radius: var(--radius-sm);
padding-inline: 0.25rem;
margin-inline: -0.25rem;
padding-block: 0.125rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: outline var(--duration-fast) var(--ease-out);
}
.dz-tr-cell-display:hover {
outline: 1px solid var(--colour-border);
cursor: text;
}
.dz-tr-cell-truncate {
display: block;
max-width: 15rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-tr-actions-cell {
width: 4rem;
padding-inline: var(--space-sm);
text-align: end;
}
.dz-tr-actions {
display: inline-flex;
align-items: center;
gap: 0.125rem;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-tr-row:hover .dz-tr-actions {
opacity: 1;
}
.dz-tr-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
text-decoration: none;
}
.dz-tr-action:hover {
background: color-mix(in oklch, var(--colour-bg) 50%, transparent);
color: var(--colour-text);
}
.dz-tr-action.is-destructive:hover {
background: color-mix(in oklch, var(--colour-danger) 10%, transparent);
color: var(--colour-danger);
}
.dz-tr-empty-cell {
text-align: center;
padding-block: var(--space-2xl);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-tr-empty-link {
margin-inline-start: var(--space-sm);
color: var(--colour-brand);
text-decoration: none;
}
.dz-tr-empty-link:hover {
text-decoration: underline;
}
.dz-app-shell {
}
.dz-app-content {
display: flex;
flex-direction: column;
min-height: 100vh;
transition: padding var(--duration-base) var(--ease-out);
}
@media (min-width: 64rem) {
[data-dz-sidebar="open"] .dz-app-content {
padding-inline-start: 16rem;
}
}
.dz-topbar {
position: sticky;
inset-block-start: 0;
z-index: 30;
display: flex;
align-items: center;
height: 3.5rem;
padding-inline: var(--space-md);
gap: var(--space-md);
background: color-mix(in oklch, var(--colour-bg) 85%, transparent);
backdrop-filter: blur(8px);
border-block-end: 1px solid
color-mix(in oklch, var(--colour-border) 50%, transparent);
box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04);
}
@media (min-width: 64rem) {
.dz-topbar {
padding-inline: var(--space-lg);
}
}
.dz-topbar-leading,
.dz-topbar-trailing {
flex: none;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-topbar-title {
flex: 1 1 0;
min-width: 0;
}
.dz-topbar-title-text {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-topbar-user {
font-size: var(--text-sm);
color: var(--colour-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 12.5rem;
display: none;
}
@media (min-width: 40rem) {
.dz-topbar-user {
display: inline;
}
}
.dz-icon-button {
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-icon-button:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-icon-button > svg {
width: 1.25rem;
height: 1.25rem;
}
.dz-icon-button.is-mobile-only { display: inline-flex; }
@media (min-width: 64rem) {
.dz-icon-button.is-mobile-only { display: none; }
}
.dz-icon-button.is-desktop-only { display: none; }
@media (min-width: 64rem) {
.dz-icon-button.is-desktop-only { display: inline-flex; }
}
.dz-app-main {
flex: 1 1 0;
padding: var(--space-md);
}
@media (min-width: 64rem) {
.dz-app-main {
padding: var(--space-lg);
}
}
.dz-page-purpose {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block: 0.25rem var(--space-md);
}
.dz-app-backdrop {
position: fixed;
inset: 0;
background: oklch(0% 0 0 / 0.4);
z-index: 30;
}
@media (min-width: 64rem) {
.dz-app-backdrop {
display: none !important;
}
}
.dz-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
z-index: 40;
width: 16rem;
background: var(--colour-surface);
border-inline-end: 1px solid var(--colour-border);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform var(--duration-base) var(--ease-out);
}
[data-dz-sidebar="open"] .dz-sidebar {
transform: translateX(0);
}
.dz-sidebar-brand {
padding: var(--space-md);
border-block-end: 1px solid var(--colour-border);
display: flex;
align-items: center;
justify-content: space-between;
}
.dz-sidebar-brand-text {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-sidebar-nav {
flex: 1 1 0;
overflow-y: auto;
}
.dz-sidebar-nav-list {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
list-style: none;
margin: 0;
}
.dz-sidebar-nav-link {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-inline: var(--space-md);
padding-block: 0.375rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-sidebar-nav-link:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-sidebar-nav-link[aria-current="page"] {
background: var(--colour-bg);
color: var(--colour-text);
font-weight: var(--weight-medium);
}
.dz-sidebar-nav-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.dz-sidebar-nav-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-sidebar-nav-group-summary {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-inline: var(--space-md);
padding-block: 0.375rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
cursor: pointer;
list-style: none;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-sidebar-nav-group-summary::-webkit-details-marker {
display: none;
}
.dz-sidebar-nav-group-summary:hover {
background: var(--colour-bg);
}
.dz-sidebar-nav-group-children {
padding-inline-start: var(--space-md);
margin-block-start: 0.125rem;
display: flex;
flex-direction: column;
gap: 0.125rem;
list-style: none;
}
.dz-sidebar-footer {
margin-block-start: auto;
border-block-start: 1px solid var(--colour-border);
}
.dz-sidebar-user-block {
padding: 0.75rem;
padding-block-end: 0.25rem;
}
.dz-sidebar-user-name {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-inline: var(--space-md);
}
.dz-sidebar-action-row {
margin-block-start: 0.25rem;
}
.dz-sidebar-action-button {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
padding-inline: var(--space-md);
padding-block: 0.375rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-sidebar-action-button:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-sidebar-action-button > svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.dz-sidebar-darkmode {
padding: 0.75rem;
padding-block-start: 0.25rem;
display: none;
}
@media (min-width: 64rem) {
.dz-sidebar-darkmode {
display: block;
}
}
.dz-app-body {
min-height: 100vh;
background: var(--colour-bg);
}
.dz-toast-stack {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 50;
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-width: 24rem;
pointer-events: none;
}
.dz-form-shell {
max-width: 42rem;
}
.dz-form-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-xl);
}
.dz-form-title {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-form-section-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: var(--space-md);
}
.dz-form-section-note {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: var(--space-md);
}
.dz-form-section {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-block-end: var(--space-lg);
}
.dz-form-body {
display: flex;
flex-direction: column;
gap: var(--space-md);
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-form-body.htmx-request {
opacity: 0.6;
pointer-events: none;
}
.dz-form-actions {
display: flex;
gap: var(--space-md);
padding-block-start: var(--space-md);
border-top: 1px solid var(--colour-border);
}
.dz-review-shell {
max-width: 56rem;
}
.dz-review-progress {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.dz-review-progress-text {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-review-progress-bar {
inline-size: 6rem;
block-size: 0.25rem;
border-radius: var(--radius-xs);
}
.dz-review-nav {
display: flex;
justify-content: space-between;
margin-block-end: var(--space-md);
}
.dz-review-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
}
.dz-review-notes-wrap {
margin-block-end: var(--space-md);
}
.dz-review-notes-wrap[hidden] {
display: none;
}
.dz-review-notes-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin-block-end: var(--space-xs);
}
.dz-review-notes-required {
display: inline;
font-size: var(--text-xs);
font-weight: var(--weight-normal);
color: var(--colour-danger);
margin-inline-start: 0.25rem;
}
.dz-review-notes-textarea {
inline-size: 100%;
min-block-size: 6rem;
resize: vertical;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
color: var(--colour-text);
font-size: var(--text-sm);
transition: box-shadow var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out);
}
.dz-review-notes-textarea::placeholder {
color: var(--colour-text-muted);
}
.dz-review-notes-textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
}
.dz-review-empty {
text-align: center;
padding-block: var(--space-2xl);
}
.dz-review-empty-icon {
font-size: 3rem;
margin-block-end: var(--space-sm);
}
.dz-review-empty-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-end: var(--space-xs);
}
.dz-review-empty-body {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: var(--space-md);
}
.dz-modal {
padding: 0;
background: transparent;
border: 0;
transition: opacity var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.dz-modal::backdrop {
background: oklch(0% 0 0 / 0.5);
backdrop-filter: blur(2px);
}
.dz-modal[open] {
opacity: 1;
transform: scale(1);
}
.dz-modal:not([open]) {
opacity: 0;
transform: scale(0.95);
}
.dz-modal-panel {
inline-size: 100%;
border-radius: var(--radius-lg);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
color: var(--colour-text);
box-shadow: var(--shadow-lg);
}
.dz-modal[data-dz-modal-size="sm"] .dz-modal-panel { max-inline-size: 24rem; }
.dz-modal[data-dz-modal-size="md"] .dz-modal-panel { max-inline-size: 32rem; }
.dz-modal[data-dz-modal-size="lg"] .dz-modal-panel { max-inline-size: 42rem; }
.dz-modal[data-dz-modal-size="xl"] .dz-modal-panel { max-inline-size: 56rem; }
.dz-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--space-xl);
padding-block-start: var(--space-xl);
padding-block-end: var(--space-sm);
}
.dz-modal-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
letter-spacing: -0.01em;
margin: 0;
}
.dz-modal-close-form {
margin: 0;
}
.dz-modal-close-form-floating {
position: absolute;
inset-inline-end: var(--space-md);
inset-block-start: var(--space-md);
margin: 0;
}
.dz-modal-body {
padding-inline: var(--space-xl);
padding-block: var(--space-md);
max-block-size: 70vh;
overflow-y: auto;
font-size: var(--text-sm);
}
.dz-modal-backdrop-form {
position: fixed;
inset: 0;
margin: 0;
z-index: -1;
}
.dz-modal-backdrop-button {
inline-size: 100%;
block-size: 100%;
cursor: default;
background: transparent;
border: 0;
}
.dz-confirm-dialog {
padding: 0;
background: transparent;
border: 0;
}
.dz-confirm-dialog::backdrop {
background: oklch(0% 0 0 / 0.4);
backdrop-filter: blur(2px);
}
.dz-confirm-panel {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
max-inline-size: 24rem;
inline-size: 100%;
padding: var(--space-lg);
}
.dz-confirm-title {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0 0 var(--space-xs) 0;
}
.dz-confirm-message {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin: 0 0 var(--space-lg) 0;
}
.dz-confirm-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
.dz-confirm-spinner {
block-size: 0.875rem;
inline-size: 0.875rem;
animation: dz-spin 0.6s linear infinite;
}
@keyframes dz-spin {
to { transform: rotate(360deg); }
}
.dz-dropdown-root {
position: relative;
display: inline-block;
}
.dz-dropdown-panel {
position: absolute;
inset-block-start: calc(100% + 0.25rem);
inset-inline-start: 0;
z-index: 30;
min-inline-size: 12rem;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding-block: var(--space-xs);
}
.dz-dropdown-item {
display: block;
padding-inline: var(--space-md);
padding-block: var(--space-xs);
font-size: var(--text-sm);
color: var(--colour-text);
text-decoration: none;
cursor: pointer;
}
.dz-dropdown-item:hover {
background: var(--colour-bg);
}
.dz-island {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.dz-island-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-md);
}
.dz-island-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
}
.dz-island-skeleton {
block-size: 8rem;
inline-size: 100%;
border-radius: var(--radius-sm);
}
.dz-error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-block-size: 60vh;
padding-inline: var(--space-md);
}
.dz-error-code {
font-size: 3rem;
font-weight: var(--weight-semibold);
line-height: 1;
color: var(--colour-text);
margin-block-end: var(--space-md);
}
.dz-error-message {
font-size: var(--text-md);
color: var(--colour-text-muted);
margin-block-end: var(--space-md);
text-align: center;
max-inline-size: 30rem;
}
.dz-error-suggestions-card,
.dz-error-detail-card {
inline-size: 100%;
max-inline-size: 30rem;
margin-block-end: var(--space-lg);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
}
.dz-error-suggestions-card {
background: var(--colour-surface);
}
.dz-error-detail-card {
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-error-suggestions-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin-block-end: var(--space-sm);
}
.dz-error-suggestions-list {
display: flex;
flex-direction: column;
gap: var(--space-xs);
list-style: none;
margin: 0;
padding: 0;
}
.dz-error-suggestion-link {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-brand);
text-decoration: none;
}
.dz-error-suggestion-link:hover {
text-decoration: underline;
}
.dz-error-suggestion-url {
font-family: var(--font-mono, monospace);
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-error-detail-grid {
display: grid;
grid-template-columns: auto 1fr;
column-gap: var(--space-md);
row-gap: 0.375rem;
margin: 0;
}
.dz-error-detail-label {
color: var(--colour-text-muted);
}
.dz-error-detail-chip {
display: inline-block;
margin-inline-end: 0.25rem;
padding-inline: 0.25rem;
padding-block: 0.125rem;
border-radius: var(--radius-xs);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
font-size: var(--text-xs);
font-family: var(--font-mono, monospace);
}
.dz-error-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-card-picker {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-block-end: var(--space-sm);
inline-size: 20rem;
background: var(--colour-surface);
color: var(--colour-text);
box-shadow: var(--shadow-md);
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
padding: var(--space-md);
z-index: 50;
max-block-size: 16rem;
overflow-y: auto;
display: none;
}
.dz-workspace[data-show-picker="1"] .dz-card-picker {
display: block;
}
.dz-card-picker-title {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-text-muted);
margin-block-end: var(--space-sm);
}
.dz-card-picker-entry {
inline-size: 100%;
text-align: start;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
background: transparent;
border: 0;
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-sm);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-card-picker-entry:hover {
background: var(--colour-bg);
}
.dz-card-picker-display-tag {
padding-inline: 0.375rem;
padding-block: 0.125rem;
border-radius: var(--radius-sm);
background: var(--colour-bg);
font-size: 0.6875rem;
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-card-picker-title-text {
color: var(--colour-text);
}
.dz-card-picker-entity {
font-size: 0.6875rem;
color: var(--colour-text-muted);
margin-inline-start: auto;
}
.dz-card-picker-empty {
font-size: var(--text-sm);
color: var(--colour-text-muted);
padding-block: var(--space-sm);
}
.dz-pipeline-stages {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-block-start: var(--space-sm);
list-style: none;
padding: 0;
}
@media (min-width: 48rem) {
.dz-pipeline-stages {
flex-direction: row;
}
}
.dz-pipeline-stage {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
}
.dz-pipeline-stage-label {
font-size: 0.6875rem;
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-text-muted);
}
.dz-pipeline-stage-value {
font-size: 1.5rem;
font-weight: var(--weight-semibold);
line-height: 1;
color: var(--colour-text);
}
.dz-pipeline-stage-caption {
font-size: var(--text-xs);
line-height: 1.3;
color: var(--colour-text-muted);
}
.dz-pipeline-stage-progress {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-block-start: var(--space-xs);
}
.dz-pipeline-stage-progress-track {
position: relative;
flex: 1;
block-size: 0.25rem;
border-radius: 9999px;
background: var(--colour-bg);
overflow: hidden;
}
.dz-pipeline-stage-progress-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
background: var(--colour-brand);
border-radius: 9999px;
transition: width 0.2s var(--ease-out);
}
.dz-pipeline-stage-progress-label {
font-size: 0.6875rem;
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
font-variant-numeric: tabular-nums;
}
.dz-pipeline-connector {
position: absolute;
display: none;
align-items: center;
justify-content: center;
inset-inline-end: -0.875rem;
inset-block-start: 50%;
transform: translateY(-50%);
inline-size: 1.75rem;
block-size: 1.75rem;
z-index: 5;
color: var(--colour-text-muted);
}
@media (min-width: 48rem) {
.dz-pipeline-connector {
display: flex;
}
}
.dz-pipeline-connector-mobile {
display: flex;
align-items: center;
justify-content: center;
margin-block-start: var(--space-xs);
color: var(--colour-text-muted);
}
@media (min-width: 48rem) {
.dz-pipeline-connector-mobile {
display: none;
}
}
.dz-empty-dense {
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-experience {
max-inline-size: 56rem;
margin-inline: auto;
}
.dz-experience-title {
font-size: var(--text-xl);
font-weight: var(--weight-bold);
color: var(--colour-text);
margin-block-end: var(--space-xl);
}
.dz-experience-form-shell {
max-inline-size: 42rem;
}
.dz-experience-form-body {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dz-experience-stage-title {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-md);
}
.dz-experience-actions {
display: flex;
gap: var(--space-md);
padding-block-start: var(--space-md);
}
.dz-experience-actions-centered {
justify-content: center;
}
.dz-experience-ready {
display: flex;
align-items: center;
gap: var(--space-md);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--colour-brand) 8%, transparent);
border: 1px solid color-mix(in oklch, var(--colour-brand) 20%, transparent);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-experience-placeholder {
border-radius: var(--radius-md);
background: var(--colour-bg);
padding: var(--space-2xl);
text-align: center;
}
.dz-experience-placeholder-title {
font-size: var(--text-md);
font-weight: var(--weight-medium);
margin-block-end: var(--space-sm);
}
.dz-experience-placeholder-body {
color: var(--colour-text-muted);
}
}
@layer components {
tr.htmx-swapping {
opacity: 0;
transform: translateX(var(--space-lg));
transition:
opacity var(--duration-slow) var(--ease-out),
transform var(--duration-slow) var(--ease-out);
}
tr.htmx-added,
tr.htmx-settling {
animation: dz-row-highlight 600ms var(--ease-out);
}
@keyframes dz-row-highlight {
from {
background-color: var(--colour-success-soft);
}
to {
background-color: transparent;
}
}
button.htmx-request,
.dz-button.htmx-request {
pointer-events: none;
opacity: 0.7;
}
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator {
display: inline-block;
}
.htmx-request.htmx-indicator {
display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
tr.htmx-swapping {
transform: none;
}
tr.htmx-added,
tr.htmx-settling {
animation: none;
}
}
}
@layer components {
.dz-pdf-viewer {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-pdf-viewer-header {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-md);
padding-block: var(--space-sm);
padding-inline: var(--space-lg);
background: var(--colour-surface);
border-block-end: 1px solid var(--colour-border);
}
.dz-pdf-viewer-back {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding-block: var(--space-xs);
padding-inline: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--duration-base) var(--ease-out);
}
.dz-pdf-viewer-back:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-pdf-viewer-back:focus-visible {
background: var(--colour-bg);
color: var(--colour-text);
outline: none;
box-shadow: 0 0 0 2px var(--colour-brand);
}
.dz-pdf-viewer-title {
margin: 0;
font-size: var(--text-base);
font-weight: var(--weight-medium);
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dz-pdf-viewer-nav {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
}
.dz-pdf-viewer-nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
color: var(--colour-text-muted);
text-decoration: none;
border-radius: var(--radius-sm);
transition: background var(--duration-base) var(--ease-out);
}
.dz-pdf-viewer-nav-link:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-pdf-viewer-nav-link:focus-visible {
background: var(--colour-bg);
color: var(--colour-text);
outline: none;
box-shadow: 0 0 0 2px var(--colour-brand);
}
@media (forced-colors: active) {
.dz-pdf-viewer-back:focus-visible,
.dz-pdf-viewer-nav-link:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
}
.dz-pdf-viewer-nav-link[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
.dz-pdf-viewer-body {
position: relative;
background: var(--colour-bg);
overflow: hidden;
}
.dz-pdf-viewer-embed {
display: block;
inline-size: 100%;
block-size: 100%;
border: 0;
}
.dz-pdf-viewer-footer {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-xs);
padding-block: var(--space-xs);
padding-inline: var(--space-lg);
font-size: var(--text-xs);
color: var(--colour-text-muted);
background: var(--colour-surface);
border-block-start: 1px solid var(--colour-border);
}
.dz-pdf-viewer-kbd {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding-block: 0;
padding-inline: var(--space-xs);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
.dz-pdf-viewer-kbd-label {
margin-inline-end: var(--space-md);
}
.dz-pdf-viewer-kbd-sep {
color: var(--colour-border);
}
.dz-pdf-viewer-footer-slot {
display: flex;
align-items: center;
gap: var(--space-xs);
}
@media (max-width: 640px) {
.dz-pdf-viewer-back-label {
display: none;
}
}
.dz-pdf-viewer-panel-toggle {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.dz-pdf-viewer-panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: 360px;
display: grid;
grid-template-rows: auto 1fr;
background: var(--colour-surface);
border-inline-start: 1px solid var(--colour-border);
box-shadow: -4px 0 12px hsl(0 0% 0% / 0.06);
transform: translateX(100%);
transition: transform var(--duration-base) var(--ease-out);
z-index: 1;
}
.dz-pdf-viewer-panel-toggle:checked + .dz-pdf-viewer-panel {
transform: translateX(0);
}
.dz-pdf-viewer-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-block: var(--space-sm);
padding-inline: var(--space-lg);
background: var(--colour-bg);
border-block-end: 1px solid var(--colour-border);
}
.dz-pdf-viewer-panel-title {
margin: 0;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.dz-pdf-viewer-panel-close {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
color: var(--colour-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--duration-base) var(--ease-out);
}
.dz-pdf-viewer-panel-close {
background: transparent;
border: 0;
cursor: pointer;
}
.dz-pdf-viewer-panel-close:hover {
background: var(--colour-surface);
color: var(--colour-text);
}
.dz-pdf-viewer-panel-close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--colour-brand);
}
@media (forced-colors: active) {
.dz-pdf-viewer-panel-close:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
}
.dz-pdf-viewer-panel-body {
overflow-y: auto;
padding: var(--space-lg);
}
@media (max-width: 768px) {
.dz-pdf-viewer-panel {
inline-size: 100%;
}
}
.dz-pdf-viewer-help {
inline-size: min(420px, calc(100vw - var(--space-2xl)));
max-block-size: 80vh;
padding: 0;
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
background: var(--colour-surface);
color: var(--colour-text);
box-shadow: 0 16px 48px hsl(0 0% 0% / 0.16);
}
.dz-pdf-viewer-help::backdrop {
background: hsl(0 0% 0% / 0.32);
}
.dz-pdf-viewer-help-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding-block: var(--space-sm);
padding-inline: var(--space-lg);
border-block-end: 1px solid var(--colour-border);
}
.dz-pdf-viewer-help-title {
margin: 0;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.dz-pdf-viewer-help-close {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
background: transparent;
border: 0;
color: var(--colour-text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
}
.dz-pdf-viewer-help-close:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-pdf-viewer-help-close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--colour-brand);
}
@media (forced-colors: active) {
.dz-pdf-viewer-help-close:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
box-shadow: none;
}
}
.dz-pdf-viewer-help-list {
margin: 0;
padding-block: var(--space-sm);
padding-inline: 0;
font-size: var(--text-sm);
}
.dz-pdf-viewer-help-row {
display: grid;
grid-template-columns: 8rem 1fr;
align-items: baseline;
gap: var(--space-md);
padding-block: var(--space-xs);
padding-inline: var(--space-lg);
}
.dz-pdf-viewer-help-row dt {
margin: 0;
display: flex;
align-items: center;
gap: var(--space-xs);
}
.dz-pdf-viewer-help-row dd {
margin: 0;
color: var(--colour-text-muted);
}
.dz-pdf-viewer-help-row kbd {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding-block: 0;
padding-inline: var(--space-xs);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
}
}
@layer components {
.dz-progress-header {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-block-end: var(--space-sm);
}
.dz-progress-header > progress {
flex: 1 1 0;
height: 0.5rem;
width: 100%;
}
.dz-progress-header > span {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
color: var(--colour-text);
}
.dz-progress-stages {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.dz-progress-chip {
display: inline-flex;
align-items: center;
padding-inline: var(--space-sm);
padding-block: 0.125rem;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border: 1px solid var(--colour-border);
background: var(--colour-bg);
color: var(--colour-text-muted);
}
.dz-progress-chip[data-dz-stage-tone="complete"] {
background: var(--colour-success-soft);
color: var(--colour-success);
border-color: color-mix(in oklch, var(--colour-success) 30%, transparent);
}
.dz-progress-chip[data-dz-stage-tone="active"] {
background: var(--colour-warning-soft);
color: var(--colour-warning);
border-color: color-mix(in oklch, var(--colour-warning) 30%, transparent);
}
.dz-progress-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-bar-track-rows {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-block-start: var(--space-sm);
}
.dz-bar-track-row {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-xs);
}
.dz-bar-track-label {
width: 7rem;
text-align: end;
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-bar-track {
flex: 1 1 0;
position: relative;
height: 1rem;
background: var(--colour-bg);
border-radius: var(--radius-full);
overflow: hidden;
}
.dz-bar-track-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
background: var(--colour-brand);
border-radius: var(--radius-full);
transition: width var(--duration-base) var(--ease-out);
}
.dz-bar-track-value {
width: 4rem;
text-align: end;
font-family: var(--font-mono);
color: var(--colour-text-muted);
}
.dz-bar-track-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
font-family: var(--font-mono);
}
.dz-profile-card {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dz-profile-identity {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.dz-profile-avatar,
.dz-profile-initials {
width: 3rem;
height: 3rem;
border-radius: var(--radius-full);
background: var(--colour-bg);
flex-shrink: 0;
}
.dz-profile-avatar {
object-fit: cover;
}
.dz-profile-initials {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--colour-text-muted);
}
.dz-profile-text {
flex: 1 1 0;
min-width: 0;
}
.dz-profile-primary {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-profile-secondary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-profile-stats {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
border-block-start: 1px solid var(--colour-border);
padding-block-start: var(--space-md);
margin: 0;
}
@media (min-width: 40rem) {
.dz-profile-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.dz-profile-stat-label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-text-muted);
margin: 0;
}
.dz-profile-stat-value {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin-block-start: 0.125rem;
}
.dz-profile-facts {
display: flex;
flex-direction: column;
gap: var(--space-xs);
border-block-start: 1px solid var(--colour-border);
padding-block-start: var(--space-md);
font-size: var(--text-xs);
color: var(--colour-text);
list-style: none;
margin: 0;
padding-inline-start: 0;
}
.dz-profile-fact {
display: flex;
gap: var(--space-sm);
line-height: var(--leading-tight);
}
.dz-profile-fact-bullet {
color: var(--colour-text-muted);
flex-shrink: 0;
}
.dz-profile-fact-text {
min-width: 0;
}
.dz-activity-feed {
position: relative;
padding-inline-start: var(--space-md);
border-inline-start: 1px solid var(--colour-border);
display: flex;
flex-direction: column;
gap: var(--space-md);
list-style: none;
margin: 0;
}
.dz-activity-row {
position: relative;
}
.dz-activity-dot {
position: absolute;
inset-inline-start: -1.3125rem;
top: 0.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.75rem;
height: 0.75rem;
}
.dz-activity-dot > svg {
width: 0.75rem;
height: 0.75rem;
color: var(--colour-brand);
}
.dz-activity-row-inner {
display: flex;
gap: var(--space-md);
}
.dz-activity-time {
font-size: var(--text-xs);
color: var(--colour-text-muted);
min-width: 5rem;
padding-block-start: 0.25rem;
}
.dz-activity-bubble {
flex: 1 1 0;
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-activity-bubble.is-clickable {
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-activity-bubble.is-clickable:hover {
background: var(--colour-bg);
}
.dz-activity-actor {
font-weight: var(--weight-medium);
}
.dz-activity-empty {
text-align: center;
font-size: var(--text-sm);
color: var(--colour-text-muted);
padding-block: var(--space-2xl);
}
.dz-heatmap-scroll {
overflow-x: auto;
}
.dz-heatmap-grid {
width: 100%;
font-size: var(--text-sm);
border-collapse: collapse;
}
.dz-heatmap-grid > thead > tr {
border-block-end: 1px solid var(--colour-border);
}
.dz-heatmap-grid th {
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
text-align: center;
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
}
.dz-heatmap-grid > tbody > tr {
border-block-end: 1px solid var(--colour-border);
}
.dz-heatmap-grid > tbody > tr:last-child {
border-block-end: 0;
}
.dz-heatmap-grid > tbody > tr.is-clickable {
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-heatmap-grid > tbody > tr.is-clickable:hover {
background: var(--colour-bg);
}
.dz-heatmap-row-label {
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-heatmap-cell {
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
text-align: center;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-heatmap-cell[data-dz-heatmap-tone="bad"] {
background: color-mix(in oklch, var(--colour-danger) 15%, transparent);
color: var(--colour-danger);
}
.dz-heatmap-cell[data-dz-heatmap-tone="warn"] {
background: color-mix(in oklch, var(--colour-warning) 15%, transparent);
color: var(--colour-warning);
}
.dz-heatmap-cell[data-dz-heatmap-tone="good"] {
background: color-mix(in oklch, var(--colour-success) 15%, transparent);
color: var(--colour-success);
}
.dz-heatmap-overflow {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-status-list {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding-inline-start: 0;
}
.dz-status-list > li + li {
border-block-start: 1px solid var(--colour-border);
}
.dz-status-list-entry {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding-block: var(--space-md);
}
.dz-status-list-entry:first-child {
padding-block-start: 0.25rem;
}
.dz-status-list-entry:last-child {
padding-block-end: 0.25rem;
}
.dz-status-list-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-block-start: 0.125rem;
flex-shrink: 0;
}
.dz-status-list-icon-spacer {
width: 1.25rem;
flex-shrink: 0;
}
.dz-status-list-text {
flex: 1 1 0;
min-width: 0;
}
.dz-status-list-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
color: var(--colour-text);
}
.dz-status-list-caption {
font-size: var(--text-xs);
line-height: var(--leading-tight);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-status-list-pill {
flex-shrink: 0;
padding-inline: var(--space-sm);
padding-block: 0.125rem;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dz-diagram-scroll {
overflow-x: auto;
}
.dz-diagram-source {
font-size: var(--text-sm);
color: var(--colour-text);
}
.dz-diagram-empty {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin: 0;
}
.dz-tree-node {
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
border-radius: var(--radius-sm);
margin-block-end: var(--space-xs);
}
.dz-tree-summary {
font-size: var(--text-sm);
padding-inline: var(--space-md);
padding-block: 0.375rem;
display: flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
list-style: none;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-tree-summary::-webkit-details-marker {
display: none;
}
.dz-tree-summary:hover {
background: var(--colour-bg);
}
.dz-tree-chevron {
width: 0.75rem;
height: 0.75rem;
color: var(--colour-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
flex-shrink: 0;
}
.dz-tree-node[open] > .dz-tree-summary .dz-tree-chevron {
transform: rotate(90deg);
}
.dz-tree-label {
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-tree-count {
margin-inline-start: auto;
display: inline-flex;
align-items: center;
padding-inline: 0.375rem;
height: 1rem;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
color: var(--colour-text-muted);
background: var(--colour-bg);
}
.dz-tree-children {
padding-inline-start: var(--space-lg);
padding-inline-end: var(--space-sm);
padding-block-end: var(--space-xs);
}
.dz-tree-flat-item {
padding-inline: var(--space-sm);
padding-block: 0.375rem;
font-size: var(--text-sm);
color: var(--colour-text);
border-block-end: 1px solid var(--colour-border);
}
.dz-tree-flat-item:last-child {
border-block-end: 0;
}
.dz-tabbed-list-tabs {
display: flex;
border-block-end: 1px solid var(--colour-border);
margin-block-end: var(--space-md);
}
.dz-tabbed-list-tab {
padding-inline: var(--space-md);
padding-block: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin-block-end: -1px;
border-block-end: 2px solid transparent;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-out);
text-decoration: none;
}
.dz-tabbed-list-tab:hover {
color: var(--colour-text);
}
.dz-tabbed-list-tab.is-active {
border-block-end-color: var(--colour-brand);
color: var(--colour-text);
font-weight: var(--weight-medium);
}
.dz-tabbed-list-panel-loading {
display: flex;
justify-content: center;
padding-block: var(--space-2xl);
color: var(--colour-text-muted);
}
.dz-tabbed-list-panel-loading > svg {
width: 1rem;
height: 1rem;
animation: dz-spin 1s linear infinite;
}
.dz-tabbed-list-empty {
font-size: var(--text-sm);
color: var(--colour-text-muted);
margin: 0;
}
.dz-grid-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 40rem) {
.dz-grid-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.dz-grid-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.dz-grid-cell {
border-radius: var(--radius-sm);
padding: var(--space-md);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-grid-cell.is-clickable {
cursor: pointer;
}
.dz-grid-cell.is-clickable:hover {
background: var(--colour-bg);
}
.dz-grid-cell-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin-block-end: 0.375rem;
}
.dz-grid-cell-field {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin: 0;
}
.dz-grid-cell-field-label {
font-size: var(--text-xs);
}
.dz-sparkline-headline {
display: flex;
align-items: baseline;
gap: var(--space-sm);
}
.dz-sparkline-value {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
color: var(--colour-text);
line-height: 1;
}
.dz-sparkline-bucket-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
font-family: var(--font-mono);
}
.dz-sparkline-svg {
margin-block-start: var(--space-xs);
width: 100%;
height: 2rem;
}
.dz-sparkline-empty {
text-align: center;
padding-block: var(--space-sm);
font-size: var(--text-sm);
color: var(--colour-text-muted);
}
.dz-funnel-stages {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-block-start: var(--space-sm);
}
.dz-funnel-stage-row {
display: flex;
flex-direction: column;
align-items: center;
}
.dz-funnel-stage {
border-radius: var(--radius-sm);
padding-inline: var(--space-md);
padding-block: 0.375rem;
text-align: center;
background: var(--colour-brand);
color: var(--colour-brand-contrast);
min-width: 7.5rem;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-funnel-stage[data-dz-funnel-step="0"] { opacity: 0.9; }
.dz-funnel-stage[data-dz-funnel-step="1"] { opacity: 0.8; }
.dz-funnel-stage[data-dz-funnel-step="2"] { opacity: 0.7; }
.dz-funnel-stage[data-dz-funnel-step="3"] { opacity: 0.6; }
.dz-funnel-stage[data-dz-funnel-step="4"] { opacity: 0.5; }
.dz-funnel-stage[data-dz-funnel-step="5"] { opacity: 0.4; }
.dz-funnel-stage[data-dz-funnel-step="6"] { opacity: 0.3; }
.dz-funnel-stage[data-dz-funnel-step="7"] { opacity: 0.2; }
.dz-funnel-stage-label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.dz-funnel-stage-count {
font-size: var(--text-xs);
opacity: 0.8;
margin-inline-start: 0.25rem;
}
.dz-funnel-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-pivot-scroll {
overflow-x: auto;
}
.dz-pivot-grid {
width: 100%;
font-size: var(--text-sm);
border-collapse: collapse;
}
.dz-pivot-grid > thead > tr {
border-block-end: 1px solid var(--colour-border);
}
.dz-pivot-grid th {
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
text-align: start;
}
.dz-pivot-grid th.is-measure {
text-align: end;
font-family: var(--font-mono);
}
.dz-pivot-grid > tbody > tr {
border-block-end: 1px solid var(--colour-border);
}
.dz-pivot-grid > tbody > tr:last-child {
border-block-end: 0;
}
.dz-pivot-grid td {
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
color: var(--colour-text);
}
.dz-pivot-grid td.is-measure {
text-align: end;
font-family: var(--font-mono);
}
.dz-pivot-null {
color: var(--colour-text-muted);
}
.dz-pivot-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-metrics-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 40rem) {
.dz-metrics-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.dz-metrics-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.dz-metric-tile {
padding: var(--space-md);
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
}
.dz-metric-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
letter-spacing: -0.01em;
}
.dz-metric-value {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--colour-text);
margin-block-start: 0.125rem;
font-variant-numeric: tabular-nums;
}
.dz-metric-delta {
margin-block-start: var(--space-xs);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}
.dz-bullet-rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-block-start: var(--space-sm);
}
.dz-bullet-row {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--text-xs);
}
.dz-bullet-label {
width: 6rem;
text-align: end;
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-bullet-track {
flex: 1 1 0;
position: relative;
height: 1.25rem;
background: var(--colour-bg);
border-radius: var(--radius-sm);
overflow: hidden;
}
.dz-bullet-band {
position: absolute;
inset-block: 0;
opacity: 0.18;
}
.dz-bullet-actual {
position: absolute;
inset-block: 0.25rem;
inset-inline-start: 0;
background: var(--colour-brand);
border-radius: var(--radius-sm);
}
.dz-bullet-target {
position: absolute;
inset-block: 0;
width: 2px;
background: var(--colour-text);
}
.dz-bullet-value {
width: 4rem;
text-align: end;
font-family: var(--font-mono);
color: var(--colour-text-muted);
}
.dz-bullet-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
font-family: var(--font-mono);
}
.dz-timeline-list {
position: relative;
padding-inline-start: var(--space-md);
border-inline-start: 1px solid var(--colour-border);
display: flex;
flex-direction: column;
gap: var(--space-md);
list-style: none;
margin: 0;
}
.dz-timeline-item {
position: relative;
}
.dz-timeline-bullet-wrap {
position: absolute;
inset-inline-start: -1.3125rem;
top: 0.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.75rem;
height: 0.75rem;
}
.dz-timeline-bullet {
width: 0.75rem;
height: 0.75rem;
}
.dz-timeline-row {
display: flex;
gap: var(--space-md);
}
.dz-timeline-date {
font-size: var(--text-xs);
color: var(--colour-text-muted);
min-width: 5rem;
padding-block-start: 0.25rem;
}
.dz-timeline-content {
flex: 1 1 0;
padding-inline: var(--space-sm);
padding-block: var(--space-xs);
border-radius: var(--radius-sm);
}
.dz-timeline-content.is-clickable {
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-timeline-content.is-clickable:hover {
background: var(--colour-bg);
}
.dz-timeline-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin: 0;
}
.dz-timeline-field {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin: 0;
}
.dz-timeline-overflow {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-bar-chart-bars {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-block-start: var(--space-sm);
}
.dz-bar-chart-row {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-bar-chart-label {
width: 6rem;
text-align: end;
font-size: var(--text-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-bar-chart-label.is-wide {
width: 7rem;
color: var(--colour-text-muted);
}
.dz-bar-chart-track {
flex: 1 1 0;
height: 1.25rem;
background: var(--colour-bg);
border-radius: var(--radius-full);
overflow: hidden;
}
.dz-bar-chart-fill {
height: 100%;
background: var(--colour-brand);
border-radius: var(--radius-full);
transition: width var(--duration-base) var(--ease-out);
}
.dz-bar-chart-value {
width: 2.5rem;
text-align: end;
font-size: var(--text-xs);
font-family: var(--font-mono);
color: var(--colour-text-muted);
}
.dz-bar-chart-value.is-wide {
width: 2.5rem;
color: var(--colour-text);
}
.dz-bar-chart-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-action-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-block-start: var(--space-sm);
}
@media (min-width: 40rem) {
.dz-action-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.dz-action-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.dz-action-card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
background: var(--colour-surface);
text-decoration: none;
color: var(--colour-text);
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
a.dz-action-card {
cursor: pointer;
}
a.dz-action-card:hover {
background: var(--colour-bg);
}
.dz-action-card-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
}
.dz-action-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
color: var(--colour-text-muted);
}
.dz-action-card-icon-spacer {
width: 1.25rem;
}
.dz-action-card-count {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding-inline: var(--space-sm);
padding-block: 0.125rem;
border-radius: var(--radius-full);
}
.dz-action-card-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
line-height: var(--leading-tight);
}
.dz-kanban-board {
display: flex;
gap: var(--space-md);
overflow-x: auto;
padding-block-end: var(--space-sm);
min-height: 12.5rem;
}
.dz-kanban-column {
flex-shrink: 0;
width: 16.25rem;
min-width: 16.25rem;
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
border-radius: var(--radius-md);
padding: var(--space-sm);
}
.dz-kanban-column-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-sm);
padding-inline: 0.25rem;
}
.dz-kanban-column-count {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-kanban-stack {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-height: 60vh;
overflow-y: auto;
}
.dz-kanban-card {
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-sm);
box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04);
}
.dz-kanban-card.is-clickable {
cursor: pointer;
transition: box-shadow var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.dz-kanban-card.is-clickable:hover {
box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06);
border-color: color-mix(in oklch, var(--colour-brand) 50%, var(--colour-border));
}
.dz-kanban-card-body {
padding: var(--space-sm);
}
.dz-kanban-card-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin-block-end: 0.25rem;
}
.dz-kanban-card-field {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-kanban-card-attn {
font-size: var(--text-xs);
margin-block-start: 0.25rem;
}
.dz-kanban-card-attn[data-dz-attn="critical"] { color: var(--colour-danger); }
.dz-kanban-card-attn[data-dz-attn="warning"] { color: var(--colour-warning); }
.dz-kanban-card-attn[data-dz-attn="notice"] { color: var(--colour-brand); }
.dz-kanban-empty {
font-size: var(--text-xs);
color: color-mix(in oklch, var(--colour-text-muted) 60%, transparent);
text-align: center;
padding-block: var(--space-md);
}
.dz-kanban-overflow {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-block-start: var(--space-sm);
}
.dz-kanban-overflow-text {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-kanban-load-all {
height: 1.5rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-kanban-load-all:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-tab-data {
}
.dz-tab-data-filterbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-block-end: var(--space-sm);
}
.dz-tab-data-filter-select {
height: 1.75rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-xs);
color: var(--colour-text);
}
.dz-tab-data-scroll {
overflow-x: auto;
}
.dz-tab-data-table {
width: 100%;
font-size: var(--text-sm);
border-collapse: collapse;
}
.dz-tab-data-sort-link {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
color: inherit;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-tab-data-sort-link:hover {
color: var(--colour-text);
}
.dz-tab-data-row.is-clickable {
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-tab-data-row.is-clickable:hover {
background: var(--colour-bg);
}
.dz-tab-data-row[data-dz-attn="critical"] {
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
}
.dz-tab-data-row[data-dz-attn="warning"] {
background: color-mix(in oklch, var(--colour-warning) 8%, transparent);
}
.dz-tab-data-row[data-dz-attn="notice"] {
background: color-mix(in oklch, var(--colour-brand) 8%, transparent);
}
.dz-tab-data-ref-link {
color: var(--colour-brand);
text-decoration: none;
}
.dz-tab-data-ref-link:hover {
text-decoration: underline;
}
.dz-tab-data-overflow {
font-size: var(--text-xs);
opacity: 0.5;
margin-block-start: var(--space-sm);
}
.dz-histogram-svg {
width: 100%;
height: auto;
}
.dz-histogram-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
font-family: var(--font-mono);
}
.dz-queue-count-row {
display: flex;
align-items: center;
justify-content: flex-end;
margin-block-end: var(--space-sm);
}
.dz-queue-count {
display: inline-flex;
align-items: center;
padding-inline: var(--space-sm);
height: 1.25rem;
border-radius: var(--radius-xs, 0.1875rem);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
}
.dz-queue-metrics {
display: flex;
gap: var(--space-md);
margin-block-end: var(--space-md);
}
.dz-queue-metric {
flex: 1 1 0;
text-align: center;
padding: var(--space-sm);
border-radius: var(--radius-sm);
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
border: 1px solid var(--colour-border);
}
.dz-queue-metric-value {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-queue-metric-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-queue-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-block-end: var(--space-sm);
}
.dz-queue-filter-select {
height: 1.75rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-xs);
color: var(--colour-text);
}
.dz-queue-filter-select:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-queue-rows {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.dz-queue-row {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-queue-row:not([data-dz-attn]):hover {
background: var(--colour-bg);
}
.dz-queue-row-main {
flex: 1 1 0;
min-width: 0;
}
.dz-queue-row-main.is-clickable {
cursor: pointer;
}
.dz-queue-row-headline {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-queue-row-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-queue-row-attn {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-queue-row-date {
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-queue-row-actions {
display: flex;
gap: 0.25rem;
flex-shrink: 0;
}
.dz-queue-action {
height: 1.75rem;
padding-inline: 0.625rem;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
background: transparent;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text);
cursor: pointer;
display: inline-flex;
align-items: center;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-queue-action:hover {
background: var(--colour-bg);
}
.dz-queue-overflow {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-queue-empty {
text-align: center;
padding-block: var(--space-md);
}
.dz-list-actions {
display: flex;
align-items: center;
justify-content: flex-end;
margin-block-end: var(--space-md);
}
.dz-list-action-group {
display: flex;
align-items: center;
gap: 0.25rem;
}
.dz-list-action-button {
height: 1.75rem;
padding-inline: 0.625rem;
border-radius: var(--radius-sm);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
transition: filter var(--duration-fast) var(--ease-out);
}
.dz-list-action-button:hover {
filter: brightness(1.1);
}
.dz-list-csv-button {
height: 1.75rem;
width: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: var(--colour-text-muted);
background: transparent;
border: 0;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.dz-list-csv-button:hover {
background: var(--colour-bg);
color: var(--colour-text);
}
.dz-list-csv-button > svg {
width: 1rem;
height: 1rem;
}
.dz-list-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-block-end: var(--space-sm);
}
.dz-list-filter-select {
height: 1.75rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-sm);
background: var(--colour-surface);
border: 1px solid var(--colour-border);
font-size: var(--text-xs);
color: var(--colour-text);
}
.dz-list-filter-select:focus-visible {
outline: none;
box-shadow: 0 0 0 1px var(--colour-brand);
border-color: var(--colour-brand);
}
.dz-list-scroll {
overflow-x: auto;
}
.dz-list-table {
width: 100%;
border-collapse: collapse;
}
.dz-list-table > thead > tr {
background: color-mix(in oklch, var(--colour-bg) 70%, transparent);
border-block-end: 1px solid var(--colour-border);
}
.dz-list-table th {
text-align: start;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
letter-spacing: -0.01em;
}
.dz-list-table > tbody > tr {
border-block-end: 1px solid var(--colour-border);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-list-table > tbody > tr:last-child {
border-block-end: 0;
}
.dz-list-row.is-clickable {
cursor: pointer;
}
.dz-list-row.is-clickable:hover {
background: var(--colour-bg);
}
.dz-list-table td {
font-size: var(--text-sm);
color: var(--colour-text);
padding-inline: var(--space-md);
padding-block: var(--space-sm);
}
.dz-list-sort-link {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
color: inherit;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-list-sort-link:hover {
color: var(--colour-text);
}
.dz-list-overflow {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
}
.dz-confirm-summary {
padding: var(--space-md);
border-radius: var(--radius-md);
border: 1px solid var(--colour-border);
margin-block-end: var(--space-md);
}
.dz-confirm-summary[data-dz-confirm-tone="success"] {
border-color: color-mix(in oklch, var(--colour-success) 40%, transparent);
background: color-mix(in oklch, var(--colour-success) 6%, transparent);
}
.dz-confirm-summary[data-dz-confirm-tone="muted"] {
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
}
.dz-confirm-summary-title {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--colour-text);
}
.dz-confirm-summary-body {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-confirm-checklist {
display: flex;
flex-direction: column;
gap: var(--space-sm);
list-style: none;
margin: 0 0 var(--space-md);
padding-inline-start: 0;
}
.dz-confirm-row {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.dz-confirm-checkbox {
margin-block-start: 0.125rem;
flex-shrink: 0;
width: 1rem;
height: 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--colour-border);
accent-color: var(--colour-brand);
}
.dz-confirm-row-label {
flex: 1 1 0;
cursor: pointer;
}
.dz-confirm-title {
font-size: var(--text-sm);
line-height: var(--leading-tight);
color: var(--colour-text);
}
.dz-confirm-caption {
font-size: var(--text-xs);
line-height: var(--leading-tight);
color: var(--colour-text-muted);
margin-block-start: 0.125rem;
}
.dz-confirm-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
margin-block-start: var(--space-sm);
list-style: none;
}
.dz-confirm-primary {
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
text-decoration: none;
border: 0;
cursor: pointer;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-confirm-primary:hover {
opacity: 0.9;
}
.dz-confirm-primary.is-disabled,
.dz-confirm-primary[aria-disabled="true"] {
background: var(--colour-bg);
color: var(--colour-text-muted);
cursor: not-allowed;
pointer-events: none;
}
.dz-confirm-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid var(--colour-border);
background: transparent;
color: var(--colour-text);
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-confirm-secondary:hover {
background: var(--colour-bg);
}
.dz-confirm-revoke {
display: inline-flex;
align-items: center;
justify-content: center;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
border: 1px solid color-mix(in oklch, var(--colour-danger) 50%, transparent);
background: transparent;
color: var(--colour-danger);
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-confirm-revoke:hover {
background: color-mix(in oklch, var(--colour-danger) 8%, transparent);
}
.dz-confirm-audit {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-md);
line-height: var(--leading-tight);
}
.dz-box-plot-svg {
width: 100%;
height: auto;
}
.dz-box-plot-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
font-family: var(--font-mono);
}
.dz-chart-svg {
width: 100%;
height: auto;
}
.dz-radar-svg {
overflow: visible;
}
.dz-chart-legend {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-md);
row-gap: 0.25rem;
margin-block-start: var(--space-sm);
font-size: var(--text-xs);
color: var(--colour-text-muted);
}
.dz-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.dz-chart-legend-swatch {
display: inline-block;
width: 0.625rem;
height: 0.625rem;
border-radius: var(--radius-sm);
}
.dz-chart-legend-name {
font-family: var(--font-mono);
}
.dz-chart-summary {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: var(--space-sm);
font-family: var(--font-mono);
}
.dz-chart-degenerate-list {
font-size: var(--text-xs);
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-block-start: var(--space-sm);
}
.dz-chart-degenerate-row {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
}
.dz-chart-degenerate-value {
color: var(--colour-text-muted);
}
.dz-chart-degenerate-tile {
text-align: center;
padding-block: var(--space-md);
}
.dz-chart-degenerate-tile-value {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
color: var(--colour-text);
}
.dz-chart-degenerate-tile-label {
font-size: var(--text-xs);
color: var(--colour-text-muted);
margin-block-start: 0.25rem;
font-family: var(--font-mono);
}
}
@layer components {
.dz-table {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.dz-table-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.dz-table-title {
font-size: var(--dz-heading-app-page-title);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin: 0;
}
.dz-table-header-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.dz-table-toolbar {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.dz-table-toolbar-filters {
flex: 1 1 0;
min-width: 0;
}
.dz-table-col-menu {
position: relative;
}
.dz-table-col-menu-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 1.75rem;
padding-inline: var(--space-sm);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--colour-text-muted);
background: var(--colour-bg);
border: 1px solid var(--colour-border);
cursor: pointer;
user-select: none;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-table-col-menu-trigger:hover {
background: var(--colour-surface);
}
.dz-table-col-menu-panel {
position: absolute;
right: 0;
top: 100%;
margin-block-start: var(--space-xs);
width: 11rem;
z-index: 100;
background: var(--colour-surface);
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding-block: var(--space-xs);
overflow: hidden;
}
.dz-table-col-menu-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding-inline: var(--space-md);
padding-block: var(--space-xs);
cursor: pointer;
font-size: var(--text-sm);
color: var(--colour-text);
transition: background var(--duration-fast) var(--ease-out);
}
.dz-table-col-menu-item:hover {
background: var(--colour-bg);
}
.dz-table-col-menu-checkbox {
width: 0.875rem;
height: 0.875rem;
border-radius: var(--radius-sm);
accent-color: var(--colour-brand);
cursor: pointer;
}
.dz-button-primary {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 1.75rem;
padding-inline: var(--space-md);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
background: var(--colour-brand);
color: var(--colour-brand-contrast);
border: 1px solid var(--colour-brand);
cursor: pointer;
text-decoration: none;
user-select: none;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dz-button-primary:hover {
opacity: 0.9;
}
.dz-table-scroll {
position: relative;
border: 1px solid var(--colour-border);
border-radius: var(--radius-md);
overflow: hidden;
min-height: calc(min(var(--dz-list-rows, 10), 10) * 2.75rem + 3rem);
}
.dz-table-scroll-x {
overflow-x: auto;
}
.dz-table-loading {
position: absolute;
inset: 0;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
backdrop-filter: blur(1px);
pointer-events: none;
opacity: 0;
transition: opacity 80ms;
}
.dz-table:has(.htmx-request) .dz-table-loading {
display: flex;
opacity: 1;
}
.dz-table-loading-spinner {
width: 1.25rem;
height: 1.25rem;
color: var(--colour-text-muted);
animation: dz-spin 1s linear infinite;
}
@keyframes dz-spin {
to { transform: rotate(360deg); }
}
.dz-table-grid {
width: 100%;
border-collapse: collapse;
}
.dz-table-head {
position: sticky;
top: 0;
background: var(--colour-surface);
z-index: 10;
box-shadow: 0 1px 0 var(--colour-border);
}
.dz-table-th {
position: relative;
padding-inline: var(--space-md);
padding-block: var(--space-sm);
text-align: start;
white-space: nowrap;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--colour-text-muted);
user-select: none;
}
.dz-table-th-select {
width: 2.5rem;
}
.dz-table-th-actions {
width: 4rem;
}
.dz-table-sort-button {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
cursor: pointer;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-transform: inherit;
letter-spacing: inherit;
transition: color var(--duration-fast) var(--ease-out);
}
.dz-table-sort-button:hover {
color: var(--colour-text);
}
.dz-table-sort-icon {
transition: transform var(--duration-fast) var(--ease-out);
}
.dz-table-resize-handle {
position: absolute;
top: 0;
inset-inline-end: 0;
width: 0.25rem;
height: 100%;
cursor: col-resize;
z-index: 10;
transition: background var(--duration-fast) var(--ease-out);
}
.dz-table-resize-handle:hover {
background: color-mix(in oklch, var(--colour-brand) 50%, transparent);
}
.dz-table-body > tr + tr {
border-block-start: 1px solid var(--colour-border);
}
.dz-table-empty {
display: none;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding-block: var(--space-3xl);
color: var(--colour-text-muted);
}
.dz-table-empty:not(:has(~ tbody tr[data-dz-row-id])) {
display: flex;
}
.dz-table-empty-icon {
width: 2.5rem;
height: 2.5rem;
opacity: 0.3;
}
.dz-table-empty-title {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--colour-text);
margin: 0;
}
.dz-table-empty-hint {
font-size: var(--text-sm);
margin: 0;
}
.dz-table-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
}
@layer components {
@layer components {
@media (pointer: coarse) {
.dz-button,
.dz-button-ghost,
.dz-button-outline,
.dz-button-destructive,
.dz-icon-button,
.dz-card-action-button,
.dz-list-action-button,
.dz-sidebar-action-button,
.dz-add-card-button {
min-height: var(--dz-touch-target-min);
min-width: var(--dz-touch-target-min);
}
.dz-modal-close-form,
.dz-modal-close-form-floating,
.dz-pdf-viewer-help-close,
.dz-pdf-viewer-panel-close,
.dz-slideover-close {
min-height: var(--dz-touch-target-min);
min-width: var(--dz-touch-target-min);
}
button,
[role="button"],
a.dz-link {
min-height: var(--dz-touch-target-min);
}
}
}
}
@layer components {
@layer components {
.dz-card-body,
.dz-drawer-content,
.dz-detail-card-body,
.dz-app-content,
.dz-app-body,
.dz-form-body,
.dz-modal,
.dz-slideover-content,
.dz-pdf-viewer-panel,
.dz-scroll {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.dz-table-wrap,
.dz-scroll-x {
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
}
}
@layer components {
.dz-form-richtext .dz-richtext-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--dz-space-1, 0.25rem);
padding: var(--dz-space-1, 0.25rem);
border: 1px solid var(--dz-color-border, #e5e7eb);
border-bottom: none;
border-radius: var(--dz-radius-sm, 0.25rem) var(--dz-radius-sm, 0.25rem) 0 0;
background: var(--dz-color-surface-subtle, #f9fafb);
}
.dz-form-richtext .dz-richtext-toolbar button[data-cmd] {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--dz-color-text, #111827);
min-width: 2rem;
min-height: 2rem;
padding: 0 var(--dz-space-2, 0.5rem);
border-radius: var(--dz-radius-sm, 0.25rem);
font-family: var(--dz-font-sans);
font-size: var(--text-sm, 0.875rem);
cursor: pointer;
line-height: 1;
}
.dz-form-richtext .dz-richtext-toolbar button[data-cmd]:hover,
.dz-form-richtext .dz-richtext-toolbar button[data-cmd]:focus-visible {
background: var(--dz-color-surface-hover, #f3f4f6);
border-color: var(--dz-color-border, #e5e7eb);
outline: none;
}
.dz-form-richtext .dz-richtext-toolbar button[data-cmd][aria-pressed="true"],
.dz-form-richtext .dz-richtext-toolbar button[data-cmd].is-active {
background: var(--dz-color-surface-selected, #dbeafe);
border-color: var(--dz-color-primary, #3b82f6);
color: var(--dz-color-primary, #3b82f6);
}
.dz-form-richtext [data-dz-editor] {
min-height: 8rem;
padding: var(--dz-space-3, 0.75rem);
border: 1px solid var(--dz-color-border, #e5e7eb);
border-radius: 0 0 var(--dz-radius-sm, 0.25rem) var(--dz-radius-sm, 0.25rem);
background: var(--dz-color-surface, #ffffff);
color: var(--dz-color-text, #111827);
font-family: var(--dz-font-sans);
font-size: var(--text-base, 1rem);
line-height: 1.5;
outline: none;
}
.dz-form-richtext [data-dz-editor]:focus-visible,
.dz-form-richtext [data-dz-editor]:focus-within {
border-color: var(--dz-color-primary, #3b82f6);
box-shadow: 0 0 0 2px var(--dz-color-primary-soft, rgba(59, 130, 246, 0.2));
}
.dz-form-richtext [data-dz-editor] p {
margin: 0 0 var(--dz-space-2, 0.5rem) 0;
}
.dz-form-richtext [data-dz-editor] p:last-child {
margin-bottom: 0;
}
.dz-form-richtext [data-dz-editor] strong { font-weight: 700; }
.dz-form-richtext [data-dz-editor] em { font-style: italic; }
.dz-form-richtext [data-dz-editor] u { text-decoration: underline; }
.dz-form-richtext [data-dz-editor] s { text-decoration: line-through; }
.dz-form-richtext [data-dz-editor] h2 {
font-size: var(--dz-heading-app-section-title, var(--text-base));
font-weight: 700;
margin: var(--dz-space-3, 0.75rem) 0 var(--dz-space-2, 0.5rem) 0;
line-height: 1.25;
}
.dz-form-richtext [data-dz-editor] h3 {
font-size: var(--dz-heading-app-subsection-title, var(--text-sm));
font-weight: 600;
margin: var(--dz-space-2, 0.5rem) 0;
line-height: 1.3;
}
.dz-form-richtext [data-dz-editor] ul,
.dz-form-richtext [data-dz-editor] ol {
margin: 0 0 var(--dz-space-2, 0.5rem) 0;
padding-left: 1.5rem;
}
.dz-form-richtext [data-dz-editor] li {
margin: 0;
}
.dz-form-richtext [data-dz-editor] blockquote {
margin: var(--dz-space-2, 0.5rem) 0;
padding-left: var(--dz-space-3, 0.75rem);
border-left: 3px solid var(--dz-color-border, #e5e7eb);
color: var(--dz-color-text-subtle, #6b7280);
}
.dz-form-richtext [data-dz-editor] code {
font-family: var(--dz-font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 0.9em;
background: var(--dz-color-surface-subtle, #f3f4f6);
padding: 0.1em 0.3em;
border-radius: var(--dz-radius-xs, 0.125rem);
}
.dz-form-richtext [data-dz-editor] a {
color: var(--dz-color-primary, #3b82f6);
text-decoration: underline;
}
.dz-form-richtext .dz-richtext-toolbar-sep {
display: inline-block;
width: 1px;
align-self: stretch;
background: var(--dz-color-border, #e5e7eb);
margin: 0 var(--dz-space-1, 0.25rem);
}
}
@layer components {
[x-cloak] {
display: none !important;
}
#app,
.dz-app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.dz-app__header {
}
.dz-app__main {
flex: 1;
padding: 1.5rem;
max-width: 80rem;
margin: 0 auto;
width: 100%;
}
@media (min-width: 640px) {
.dz-app__main {
padding: 2rem;
}
}
@media (min-width: 1024px) {
.dz-app__main {
padding: 2.5rem 3rem;
}
}
.dz-app__sidebar {
}
.dz-app__footer {
}
.dz-workspace {
}
.dz-metric-card {
}
.dz-list-panel {
}
.dz-detail-panel {
}
.dz-form-panel {
}
.dz-field-label {
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.25rem;
display: block;
}
.dz-field-label--required::after {
content: " *";
color: oklch(var(--er));
}
.dz-text-muted {
opacity: 0.7;
}
.dz-text-label {
font-weight: 500;
font-size: 0.875rem;
}
[data-dazzle-entity]:hover {
}
.dz-btn-ghost {
background: transparent;
border: none;
box-shadow: none;
color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
}
.dz-btn-ghost:hover {
background: hsl(var(--accent, 240 4.8% 95.9%));
color: hsl(var(--accent-foreground, 240 5.9% 10%));
}
.dz-btn-link {
background: transparent;
border: none;
box-shadow: none;
color: hsl(var(--primary, 240 5.9% 10%));
text-decoration: underline;
text-underline-offset: 4px;
}
.dz-btn-link:hover {
text-decoration-thickness: 2px;
}
.dz-label {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground, 240 10% 3.9%));
margin-bottom: 0.375rem;
display: block;
}
.dz-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 12rem;
}
.dz-empty-state h3 {
font-weight: 600;
color: hsl(var(--foreground, 240 10% 3.9%));
margin-bottom: 0.25rem;
}
.dz-empty-state p {
color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
font-size: 0.875rem;
}
}
@layer components {
.dz-section-hero {
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
color: white;
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.dz-section-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, oklch(1 0 0 / 0.1) 0%, transparent 50%);
pointer-events: none;
}
.dz-hero-with-media {
display: flex;
align-items: center;
gap: 3rem;
}
.dz-hero-with-media .dz-section-content {
flex: 1;
text-align: left;
}
.dz-hero-with-media .dz-cta-group {
justify-content: flex-start;
}
.dz-hero-media {
flex: 1;
max-width: 50%;
}
.dz-hero-image {
width: 100%;
height: auto;
border-radius: var(--dz-radius-lg, 1rem);
box-shadow: var(--dz-shadow-xl, 0 20px 50px -12px oklch(0 0 0 / 0.3));
}
@media (max-width: 768px) {
.dz-hero-with-media {
flex-direction: column;
text-align: center;
}
.dz-hero-with-media .dz-section-content {
text-align: center;
}
.dz-hero-with-media .dz-cta-group {
justify-content: center;
}
.dz-hero-media {
max-width: 100%;
order: -1;
}
}
.dz-section-features {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--p, oklch(0.99 0 0));
}
.dz-section-pricing {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-section-faq {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-section-testimonials {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-section-stats {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
color: white;
}
.dz-section-cta {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
text-align: center;
}
.dz-section-cta h2 {
font-size: var(--dz-font-size-cta-headline, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.dz-section-steps {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-section-logo-cloud {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
text-align: center;
}
.dz-section-comparison {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-comparison-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dz-comparison-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.dz-comparison-table th,
.dz-comparison-table td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-comparison-table thead th {
font-weight: 600;
font-size: 1rem;
padding-bottom: 1rem;
}
.dz-comparison-feature {
text-align: left;
font-weight: 500;
}
.dz-comparison-highlighted {
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
}
.dz-section-value-highlight {
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
text-align: center;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-value-headline {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em);
}
.dz-value-body {
max-width: 40rem;
margin: 0 auto 2rem;
font-size: 1.125rem;
line-height: 1.6;
color: var(--dz-text-body);
}
.dz-section-split-content {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.dz-split--reversed .dz-split-grid {
direction: rtl;
}
.dz-split--reversed .dz-split-grid > * {
direction: ltr;
}
.dz-split-text h2 {
text-align: left;
}
.dz-split-text p {
color: var(--dz-text-body);
}
.dz-cta-group--left {
justify-content: flex-start;
}
.dz-split-media img {
width: 100%;
height: auto;
border-radius: var(--dz-radius-lg, 1rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
}
@media (max-width: 768px) {
.dz-split-grid {
grid-template-columns: 1fr;
}
.dz-split--reversed .dz-split-grid {
direction: ltr;
}
.dz-split-text h2 {
text-align: center;
}
.dz-cta-group--left {
justify-content: center;
}
}
.dz-section-card-grid {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.dz-card-item {
background: var(--dz-surface-card);
padding: var(--dz-spacing-card-padding, 1.5rem);
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
display: flex;
flex-direction: column;
transition: transform var(--dz-transition-fast, 150ms),
box-shadow var(--dz-transition-fast, 150ms);
}
.dz-card-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-card-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-card-item p {
color: var(--dz-text-body);
margin: 0 0 1rem;
line-height: var(--dz-line-height-body, 1.6);
flex: 1;
}
.dz-card-icon {
width: 3rem;
height: 3rem;
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--dz-hero-bg-from);
}
.dz-card-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.dz-section-trust-bar {
padding: 2rem 1.5rem;
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
border-top: 1px solid var(--dz-border-subtle);
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-trust-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
align-items: center;
}
.dz-trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-body);
}
.dz-trust-item svg {
width: 1.25rem;
height: 1.25rem;
color: var(--dz-hero-bg-from);
}
.dz-section-team {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
max-width: 64rem;
margin: 0 auto;
}
.dz-team-card {
text-align: center;
padding: 2rem 1.5rem;
}
.dz-team-avatar {
width: 6rem;
height: 6rem;
border-radius: 50%;
margin: 0 auto 1rem;
overflow: hidden;
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.dz-team-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dz-team-initials {
font-size: 1.5rem;
font-weight: 600;
color: white;
letter-spacing: 0.05em;
}
.dz-team-name {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.25rem;
}
.dz-team-role {
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-hero-bg-from);
margin: 0 0 0.75rem;
}
.dz-team-bio {
font-size: 0.875rem;
line-height: 1.6;
color: var(--dz-text-body);
margin: 0 0 1rem;
}
.dz-team-links {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.dz-team-link {
color: var(--dz-text-body);
transition: color var(--dz-transition-fast, 150ms);
}
.dz-team-link:hover {
color: var(--dz-hero-bg-from);
}
.dz-team-link svg {
width: 1.25rem;
height: 1.25rem;
}
.dz-theme-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
border-radius: 0.375rem;
color: var(--dz-text-body);
transition: color var(--dz-transition-fast, 150ms), background var(--dz-transition-fast, 150ms);
display: flex;
align-items: center;
justify-content: center;
}
.dz-theme-toggle:hover {
color: var(--dz-text-foreground);
background: var(--dz-border-subtle);
}
.dz-theme-toggle__icon {
width: 1.25rem;
height: 1.25rem;
}
.dz-theme-toggle__sun { display: none; }
.dz-theme-toggle__moon { display: block; }
[data-theme="dark"] .dz-theme-toggle__sun { display: block; }
[data-theme="dark"] .dz-theme-toggle__moon { display: none; }
.dz-bg-alt {
background: var(--dz-section-alt-bg, oklch(0.97 0.01 260));
}
.dz-bg-primary {
background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%);
color: white;
}
.dz-bg-primary .dz-section-header h2,
.dz-bg-primary .dz-section-header p {
color: white;
}
.dz-bg-dark {
background: oklch(0.15 0.01 260);
color: oklch(0.9 0 0);
}
.dz-bg-dark .dz-section-header h2,
.dz-bg-dark .dz-section-header p {
color: oklch(0.9 0 0);
}
[data-theme="dark"] .dz-bg-alt {
background: oklch(0.12 0.01 260);
}
[data-theme="dark"] .dz-section-features,
[data-theme="dark"] .dz-section-faq,
[data-theme="dark"] .dz-section-steps {
background: oklch(0.12 0.01 260);
}
[data-theme="dark"] .dz-section-pricing,
[data-theme="dark"] .dz-section-testimonials,
[data-theme="dark"] .dz-section-logo-cloud,
[data-theme="dark"] .dz-section-cta,
[data-theme="dark"] .dz-section-value-highlight,
[data-theme="dark"] .dz-section-card-grid,
[data-theme="dark"] .dz-section-trust-bar {
background: oklch(0.08 0.01 260);
}
[data-theme="dark"] .dz-section-comparison,
[data-theme="dark"] .dz-section-split-content {
background: oklch(0.12 0.01 260);
}
[data-theme="dark"] .dz-feature-item,
[data-theme="dark"] .dz-testimonial-item,
[data-theme="dark"] .dz-card-item,
[data-theme="dark"] .dz-pricing-tier:not(.dz-pricing-highlighted) {
background: oklch(0.18 0.01 260);
}
[data-theme="dark"] .dz-comparison-table th,
[data-theme="dark"] .dz-comparison-table td {
border-color: oklch(1 0 0 / 0.1);
}
[data-theme="dark"] .dz-comparison-highlighted {
background: oklch(0.18 0.03 260);
}
[data-theme="dark"] .dz-section h2,
[data-theme="dark"] .dz-feature-item h3,
[data-theme="dark"] .dz-step-item h3,
[data-theme="dark"] .dz-faq-item summary,
[data-theme="dark"] .dz-pricing-tier h3 {
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-feature-item p,
[data-theme="dark"] .dz-step-item p,
[data-theme="dark"] .dz-testimonial-item blockquote,
[data-theme="dark"] .dz-faq-item p {
color: oklch(0.65 0 0);
}
[data-theme="dark"] .dz-faq-item {
border-color: oklch(1 0 0 / 0.1);
}
[data-theme="dark"] .dz-auth-card {
background: oklch(0.18 0.01 260);
}
[data-theme="dark"] .dz-auth-card h1,
[data-theme="dark"] .dz-auth-card .card-title,
[data-theme="dark"] .dz-auth-field label,
[data-theme="dark"] .dz-auth-card .label-text {
color: oklch(0.9 0 0);
}
[data-theme="dark"] .dz-auth-field input,
[data-theme="dark"] .dz-auth-card .input {
background: oklch(0.12 0.01 260);
border-color: oklch(1 0 0 / 0.15);
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-auth-switch {
color: oklch(0.6 0 0);
}
[data-theme="dark"] .dz-prose {
color: oklch(0.85 0 0);
}
[data-theme="dark"] .dz-prose h1,
[data-theme="dark"] .dz-prose h2,
[data-theme="dark"] .dz-prose h3 {
color: oklch(0.95 0 0);
}
[data-theme="dark"] .dz-logo-item img {
filter: grayscale(100%) invert(1);
opacity: 0.5;
}
[data-theme="dark"] .dz-logo-item:hover img {
filter: grayscale(0%) invert(1);
opacity: 0.8;
}
[data-theme="dark"] .dz-btn-secondary,
[data-theme="dark"] .btn-outline {
color: oklch(0.85 0 0);
border-color: oklch(0.85 0 0);
}
[data-theme="dark"] .dz-btn-secondary:hover,
[data-theme="dark"] .btn-outline:hover {
background: oklch(1 0 0 / 0.1);
}
@media (max-width: 768px) {
.dz-section h1 {
font-size: 2.5rem;
}
.dz-section h2 {
font-size: 1.75rem;
}
.dz-section-markdown h2,
.dz-section .prose h2 {
font-size: 1.375rem;
}
.dz-section-markdown h1,
.dz-section .prose h1 {
font-size: 1.75rem;
}
.dz-section-cta h2 {
font-size: 2.25rem;
}
.dz-cta-group {
flex-direction: column;
align-items: center;
}
.dz-pricing-highlighted {
transform: none;
}
.dz-stat-value {
font-size: 2.25rem;
}
}
.dz-site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.dz-site-bg {
background: var(--dz-surface-card, hsl(var(--card)));
}
.dz-site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--dz-header-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-site-nav {
max-width: 72rem;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.dz-site-logo {
font-size: 1.25rem;
font-weight: 700;
color: var(--dz-logo-color);
text-decoration: none;
}
.dz-nav-items {
display: flex;
align-items: center;
gap: 1.5rem;
}
.dz-nav-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-body);
text-decoration: none;
transition: color var(--dz-transition-fast, 150ms);
}
.dz-nav-link:hover {
color: var(--dz-text-foreground);
}
.dz-nav-cta {
font-size: 0.875rem;
font-weight: 600;
color: white;
background: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
padding: 0.5rem 1rem;
border-radius: var(--dz-radius-button, 0.375rem);
text-decoration: none;
transition: background var(--dz-transition-fast, 150ms);
}
.dz-nav-cta:hover {
background: var(--dz-hero-bg-to, oklch(0.45 0.18 270));
}
.dz-site-footer {
margin-top: auto;
background: var(--dz-footer-bg);
color: var(--dz-footer-text);
padding: 3rem 1.5rem 1.5rem;
}
.dz-footer-content {
max-width: 72rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.dz-footer-col h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--dz-footer-heading);
margin: 0 0 1rem;
}
.dz-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.dz-footer-col li {
margin-bottom: 0.5rem;
}
.dz-footer-col a {
font-size: 0.875rem;
color: var(--dz-footer-link);
text-decoration: none;
transition: color var(--dz-transition-fast, 150ms);
}
.dz-footer-col a:hover {
color: var(--dz-footer-heading);
}
.dz-footer-bottom {
max-width: 72rem;
margin: 0 auto;
padding-top: 1.5rem;
border-top: 1px solid var(--dz-footer-border);
text-align: center;
}
.dz-footer-bottom p {
font-size: 0.75rem;
margin: 0;
}
.dz-auth-page {
background: linear-gradient(135deg, var(--dz-hero-bg-from, oklch(0.50 0.18 270)) 0%, var(--dz-hero-bg-to, oklch(0.45 0.18 270)) 100%);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem 1rem;
}
.dz-auth-container {
width: 100%;
max-width: 28rem;
}
.dz-auth-container--wide {
max-width: 30rem;
}
.dz-auth-card {
background: var(--dz-surface-card);
border-radius: var(--dz-radius-lg, 0.75rem);
padding: 2rem;
box-shadow: var(--dz-shadow-xl, 0 20px 50px -12px oklch(0 0 0 / 0.25));
text-align: center;
}
.dz-auth-logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
text-decoration: none;
display: inline-block;
margin-bottom: 1.5rem;
}
.dz-auth-card h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--dz-text-foreground);
margin: 0 0 1.5rem;
}
.dz-auth-error {
background: var(--dz-error-bg);
color: var(--dz-error-text);
padding: 0.75rem 1rem;
border-radius: var(--dz-radius-sm, 0.375rem);
font-size: 0.875rem;
margin-bottom: 1rem;
text-align: left;
}
.dz-auth-error.hidden {
display: none;
}
#dz-auth-form {
text-align: left;
}
.dz-auth-field {
margin-bottom: 1rem;
}
.dz-auth-field label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--dz-text-emphasis);
margin-bottom: 0.375rem;
}
.dz-auth-field input {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: 1rem;
border: 1px solid var(--dz-border-input);
border-radius: var(--dz-radius-sm, 0.375rem);
transition: border-color var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms);
box-sizing: border-box;
}
.dz-auth-field input:focus {
outline: none;
border-color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
box-shadow: var(--dz-ring-glow);
}
.dz-auth-card .btn-primary,
.dz-auth-card .btn.btn-primary {
background: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
color: white;
border: none;
}
.dz-auth-card .btn-primary:hover,
.dz-auth-card .btn.btn-primary:hover {
background: var(--dz-hero-bg-to, oklch(0.45 0.18 270));
}
.dz-auth-switch {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--dz-text-muted);
}
.dz-auth-switch a {
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
text-decoration: none;
font-weight: 500;
}
.dz-auth-switch a:hover {
text-decoration: underline;
}
.dz-section-hero .btn-primary {
background: white;
color: var(--dz-hero-bg-from, oklch(0.50 0.18 270));
border: none;
}
.dz-section-hero .btn-primary:hover {
background: var(--dz-hero-btn-hover);
transform: translateY(-2px);
}
.dz-section-hero .btn-secondary,
.dz-section-hero .btn-outline {
background: transparent;
color: white;
border-color: var(--dz-hero-border);
}
.dz-section-hero .btn-secondary:hover,
.dz-section-hero .btn-outline:hover {
background: var(--dz-hero-overlay);
border-color: var(--dz-hero-border-hover);
}
.dz-section {
width: 100%;
}
.dz-section-content {
max-width: 72rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.dz-section-header {
text-align: center;
max-width: 40rem;
margin: 0 auto 3rem;
}
.dz-section-media {
text-align: center;
margin: 0 auto 2rem;
max-width: 48rem;
}
.dz-section-media img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
}
.dz-section h1 {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em);
margin: 0 0 1.5rem;
}
.dz-section h2 {
font-size: var(--dz-font-size-section-headline, 2.25rem);
font-weight: var(--dz-font-weight-section-headline, 700);
line-height: var(--dz-line-height-section-headline, 1.2);
letter-spacing: var(--dz-letter-spacing-section-headline, -0.01em);
margin: 0 0 2rem;
text-align: center;
}
.dz-section h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-section p {
font-size: var(--dz-font-size-body, 1rem);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-section-markdown h1,
.dz-section-markdown h2,
.dz-section-markdown h3,
.dz-section-markdown h4,
.dz-section-markdown p,
.dz-section .prose h1,
.dz-section .prose h2,
.dz-section .prose h3,
.dz-section .prose h4,
.dz-section .prose p {
text-align: start;
letter-spacing: normal;
}
.dz-section-markdown h1,
.dz-section .prose h1 {
font-size: 2rem;
font-weight: 700;
line-height: 1.25;
margin: 2.5rem 0 1rem;
}
.dz-section-markdown h2,
.dz-section .prose h2 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.3;
margin: 2rem 0 0.75rem;
}
.dz-section-markdown h3,
.dz-section .prose h3 {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
margin: 1.5rem 0 0.5rem;
}
.dz-section-markdown h4,
.dz-section .prose h4 {
font-size: 1.05rem;
font-weight: 600;
line-height: 1.4;
margin: 1.25rem 0 0.5rem;
}
.dz-section-markdown p,
.dz-section .prose p {
font-size: var(--dz-font-size-body, 1rem);
line-height: 1.7;
margin: 0 0 1em;
}
.dz-404-section {
text-align: center;
padding: var(--dz-spacing-hero-y, 6rem) 1.5rem;
}
.dz-404-headline {
font-size: var(--dz-font-size-hero-headline, 3.5rem);
font-weight: var(--dz-font-weight-hero-headline, 800);
line-height: var(--dz-line-height-hero-headline, 1.1);
margin-bottom: 1rem;
}
.dz-404-cta {
margin-top: 2rem;
}
.dz-pricing-description {
color: var(--dz-text-muted);
margin: 0 0 1.5rem;
font-size: var(--dz-font-size-body, 1rem);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-section-markdown {
padding: var(--dz-spacing-section-y, 5rem) 1.5rem;
}
.dz-section-markdown .prose hr {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, var(--dz-border-subtle), transparent);
margin: 3rem auto;
max-width: 200px;
}
.dz-subhead {
font-size: 1.25rem;
line-height: 1.6;
opacity: 0.9;
margin: 0 0 2rem;
}
.dz-cta-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.dz-features-grid,
.dz-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.dz-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.dz-feature-item,
.dz-testimonial-item {
background: var(--dz-surface-card);
padding: var(--dz-spacing-card-padding, 1.5rem);
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms);
}
.dz-feature-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-feature-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0.5rem 0;
}
.dz-feature-item p {
color: var(--dz-text-body);
margin: 0;
line-height: var(--dz-line-height-body, 1.6);
}
.dz-feature-icon {
width: 3rem;
height: 3rem;
background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260));
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
color: var(--dz-hero-bg-from);
}
.dz-feature-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.dz-faq-list {
max-width: 48rem;
margin: 0 auto;
}
.dz-faq-item {
border-bottom: 1px solid var(--dz-border-default);
padding: 1rem 0;
}
.dz-faq-item summary {
font-weight: 600;
cursor: pointer;
list-style: none;
}
.dz-faq-item summary::-webkit-details-marker {
display: none;
}
.dz-faq-item p {
margin: 0.75rem 0 0;
color: var(--dz-text-body);
line-height: var(--dz-line-height-body, 1.6);
}
.dz-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 2rem;
text-align: center;
}
.dz-stat-item {
padding: 1rem;
}
.dz-stat-value {
font-size: 2.5rem;
font-weight: 700;
display: block;
}
.dz-stat-label {
font-size: 0.875rem;
opacity: 0.8;
}
.dz-qa-personas {
padding: 4rem 1.5rem;
max-width: 72rem;
margin: 0 auto;
}
.dz-qa-personas-header {
text-align: center;
margin-bottom: 2.5rem;
}
.dz-qa-banner {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
margin-bottom: 1rem;
border-radius: 9999px;
background: oklch(0.95 0.07 80);
color: oklch(0.35 0.10 70);
font-size: 0.6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dz-qa-banner-icon {
width: 0.75rem;
height: 0.75rem;
}
.dz-qa-personas-title {
font-size: 1.875rem;
font-weight: 600;
letter-spacing: -0.025em;
margin-bottom: 0.75rem;
}
.dz-qa-personas-subtitle {
font-size: 1rem;
color: var(--dz-text-muted, hsl(var(--muted-foreground)));
max-width: 36rem;
margin: 0 auto;
}
.dz-qa-personas-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) {
.dz-qa-personas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.dz-qa-personas-grid { grid-template-columns: repeat(3, 1fr); }
}
.dz-qa-persona {
border-radius: 0.375rem;
border: 1px solid var(--dz-border-default, hsl(var(--border)));
background: var(--dz-surface-card, hsl(var(--card)));
padding: 1.25rem;
transition: border-color 80ms cubic-bezier(0.2, 0, 0, 1);
}
.dz-qa-persona:hover {
border-color: var(--dz-border-strong, hsl(var(--ring)));
}
.dz-qa-persona-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.dz-qa-persona-name {
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0;
}
.dz-qa-persona-id {
padding: 0 0.5rem;
border-radius: 9999px;
background: var(--dz-bg-muted, hsl(var(--muted)));
font-size: 0.6875rem;
font-weight: 500;
color: var(--dz-text-muted, hsl(var(--muted-foreground)));
}
.dz-qa-persona-email {
font-family: var(--dz-font-mono, monospace);
font-size: 0.6875rem;
color: var(--dz-text-muted, hsl(var(--muted-foreground)));
margin-bottom: 0.75rem;
}
.dz-qa-persona-description {
font-size: 0.8125rem;
color: var(--dz-text-emphasis, hsl(var(--foreground)));
margin-bottom: 0.75rem;
}
.dz-qa-persona-stories {
font-size: 0.75rem;
color: var(--dz-text-muted, hsl(var(--muted-foreground)));
margin-bottom: 1rem;
list-style: none;
padding: 0;
}
.dz-qa-persona-stories li {
display: flex;
align-items: flex-start;
gap: 0.375rem;
margin-block: 0.25rem;
}
.dz-qa-persona-login {
width: 100%;
}
.dz-section-steps-list {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
@media (min-width: 1024px) {
.dz-section-steps-list {
flex-direction: row;
align-items: center;
gap: 0;
}
}
.dz-step-connector {
display: none;
}
@media (min-width: 1024px) {
.dz-step-connector {
display: block;
flex: 1;
margin: 0 0.75rem;
height: 1px;
background: var(--dz-border-default, hsl(var(--border)));
}
}
.dz-step-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.dz-step-item.is-not-last {
flex: 1;
}
.dz-step-number {
width: 2.5rem;
height: 2.5rem;
background: var(--dz-hero-bg-from);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
flex-shrink: 0;
}
.dz-step-content h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.25rem;
}
.dz-step-content p {
color: var(--dz-text-body);
margin: 0;
line-height: var(--dz-line-height-body, 1.6);
font-size: 0.925rem;
}
@media (min-width: 1024px) {
.dz-step-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.dz-step-number {
width: 3rem;
height: 3rem;
font-size: 1.25rem;
}
.dz-step-content h3 {
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
.dz-step-content p {
font-size: 0.95rem;
}
}
.dz-logos-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
align-items: center;
}
.dz-logo-item img {
height: 2rem;
opacity: 0.6;
filter: grayscale(100%);
transition: all var(--duration-fast, 150ms);
}
.dz-logo-item:hover img {
opacity: 1;
filter: grayscale(0%);
}
.dz-pricing-tier {
background: var(--dz-surface-card);
padding: 2rem;
border-radius: var(--dz-radius-card, 0.75rem);
box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1));
display: flex;
flex-direction: column;
transition: transform var(--dz-transition-fast, 150ms);
}
.dz-pricing-tier:hover:not(.dz-pricing-highlighted) {
transform: translateY(-4px);
}
.dz-pricing-tier h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
.dz-pricing-price {
margin: 0 0 1.5rem;
}
.dz-price {
font-size: 2.5rem;
font-weight: 700;
}
.dz-period {
font-size: 0.875rem;
color: var(--dz-text-muted);
}
.dz-pricing-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
flex: 1;
}
.dz-pricing-features li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--dz-border-subtle);
}
.dz-pricing-highlighted {
background: var(--dz-pricing-highlight-bg, var(--dz-hero-bg-from));
color: white;
transform: scale(1.05);
box-shadow: var(--dz-shadow-lg);
}
.dz-pricing-highlighted .dz-period,
.dz-pricing-highlighted li {
color: var(--dz-hero-text-dimmed);
border-color: var(--dz-hero-border-dim);
}
.dz-testimonial-item:hover {
transform: translateY(-4px);
box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1));
}
.dz-testimonial-item blockquote {
font-style: italic;
color: var(--dz-text-emphasis);
margin: 0 0 1rem;
line-height: var(--dz-line-height-body, 1.6);
}
.dz-testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
}
.dz-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.dz-testimonial-author strong {
display: block;
font-size: 0.875rem;
}
.dz-testimonial-author span {
display: block;
font-size: 0.75rem;
color: var(--dz-text-muted);
}
.dz-prose {
max-width: 48rem;
margin: 0 auto;
padding: 3rem 1.5rem;
}
.dz-prose h1, .dz-prose h2, .dz-prose h3 {
text-align: left;
}
.dz-page-legal .dz-section-markdown .prose {
max-width: 45rem;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.dz-page-legal .dz-section-markdown .prose h1,
.dz-page-legal .dz-section-markdown .prose h2,
.dz-page-legal .dz-section-markdown .prose h3 {
text-align: left;
}
.dz-page-legal .dz-section-markdown .prose p {
line-height: 1.7;
}
.dz-page-legal .dz-section-markdown .prose h2 {
margin-top: 2em;
margin-bottom: 0.75em;
font-size: 1.25rem;
font-weight: 600;
}
.dz-page-legal .dz-section-markdown .prose h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-size: 1.1rem;
font-weight: 600;
}
.dz-task-surface-container {
max-width: 75rem;
margin: 0 auto;
padding: var(--dz-spacing-card-padding, 1.5rem);
}
.dz-loading {
text-align: center;
padding: 4rem;
color: var(--dz-text-muted);
}
.dz-error {
text-align: center;
padding: 2rem;
color: var(--dz-error-text);
}
.dz-consent-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 1000;
padding: 1.25rem 1rem;
background: var(--dz-bg-card, hsl(var(--card, 0 0% 100%)));
border-top: 1px solid var(--dz-border, hsl(var(--border, 0 0% 89%)));
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}
.dz-consent-panel {
max-width: 64rem;
margin: 0 auto;
color: var(--dz-text-primary, hsl(var(--foreground, 0 0% 10%)));
font-size: 0.9375rem;
line-height: 1.5;
}
.dz-consent-title {
margin: 0 0 0.5rem 0;
font-size: 1.0625rem;
font-weight: 600;
}
.dz-consent-description {
margin: 0 0 1rem 0;
color: var(--dz-text-muted, hsl(var(--muted-foreground, 0 0% 40%)));
font-size: 0.875rem;
}
.dz-consent-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-top: 1rem;
}
.dz-consent-btn {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: inherit;
padding: 0.5rem 1rem;
font: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
border-radius: 0.375rem;
transition:
background-color 0.15s ease,
border-color 0.15s ease;
}
.dz-consent-btn:focus-visible {
outline: 2px solid var(--dz-focus-ring, hsl(var(--primary, 220 80% 50%)));
outline-offset: 2px;
}
.dz-consent-btn-primary {
background: var(--dz-primary, hsl(var(--primary, 220 80% 50%)));
color: var(--dz-primary-foreground, hsl(var(--primary-foreground, 0 0% 100%)));
}
.dz-consent-btn-primary:hover {
filter: brightness(1.05);
}
.dz-consent-btn-secondary {
border-color: var(--dz-border, hsl(var(--border, 0 0% 89%)));
background: var(--dz-bg-card, hsl(var(--card, 0 0% 100%)));
}
.dz-consent-btn-secondary:hover {
background: var(--dz-bg-hover, hsl(var(--muted, 0 0% 96%)));
}
.dz-consent-btn-link {
text-decoration: underline;
text-underline-offset: 2px;
padding: 0.5rem 0;
color: var(--dz-text-link, hsl(var(--primary, 220 80% 50%)));
}
.dz-consent-btn-link:hover {
text-decoration-thickness: 2px;
}
.dz-consent-customize {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--dz-border, hsl(var(--border, 0 0% 89%)));
}
.dz-consent-category {
border: 0;
padding: 0.5rem 0;
margin: 0;
}
.dz-consent-category + .dz-consent-category {
border-top: 1px solid var(--dz-border, hsl(var(--border, 0 0% 89%)));
}
.dz-consent-category label {
display: inline-flex;
gap: 0.5rem;
align-items: center;
font-weight: 500;
cursor: pointer;
}
.dz-consent-category input[type="checkbox"]:disabled + .dz-consent-category-label {
color: var(--dz-text-muted, hsl(var(--muted-foreground, 0 0% 40%)));
cursor: not-allowed;
}
.dz-consent-category-hint {
margin: 0.25rem 0 0 1.5rem;
color: var(--dz-text-muted, hsl(var(--muted-foreground, 0 0% 40%)));
font-size: 0.8125rem;
}
.dz-consent-links {
margin: 0.75rem 0 0 0;
font-size: 0.8125rem;
}
.dz-consent-links a {
color: var(--dz-text-link, hsl(var(--primary, 220 80% 50%)));
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 640px) {
.dz-consent-banner {
padding: 1rem 0.75rem;
}
.dz-consent-actions {
flex-direction: column;
align-items: stretch;
}
.dz-consent-btn {
width: 100%;
}
.dz-consent-btn-link {
width: auto;
align-self: center;
}
}
}
[data-dz-show] {
transition: opacity 150ms ease-in, transform 150ms ease-in;
}
[data-dz-toggleable]:not([data-dz-open]) [data-dz-show] {
display: none;
}
[data-dz-show="dropdown"] {
transition: opacity 150ms ease-out, transform 150ms ease-out;
transform-origin: top right;
}
[data-dz-toggleable][data-dz-open] [data-dz-show="dropdown"] {
opacity: 1;
transform: scale(1) translateY(0);
}
[data-dz-slide-over] [data-dz-show="backdrop"] {
transition: opacity 200ms ease-out;
}
[data-dz-slide-over] [data-dz-show="panel"] {
transition: transform 200ms ease-out;
transform: translateX(100%);
}
[data-dz-slide-over][data-dz-open] [data-dz-show="panel"] {
transform: translateX(0);
}
[data-dz-bulk-bar] {
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dz-toast-enter {
opacity: 0;
transform: translateX(1rem);
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dz-toast-leave {
opacity: 0;
transform: translateX(1rem);
transition: opacity 150ms ease-in, transform 150ms ease-in;
}
#dz-toast .alert {
transition: opacity 200ms ease-out, transform 200ms ease-out;
}
@media (min-width: 1024px) {
.drawer[data-dz-sidebar="open"] {
grid-template-columns: max-content 1fr;
}
.drawer[data-dz-sidebar="open"] > .drawer-side {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
visibility: visible;
pointer-events: auto;
opacity: 1;
display: block;
width: auto;
overscroll-behavior: auto;
}
.drawer[data-dz-sidebar="open"] > .drawer-side > .drawer-overlay {
visibility: hidden;
}
.drawer[data-dz-sidebar="open"] > .drawer-side > *:not(.drawer-overlay) {
translate: 0%;
transform: translateX(0);
}
.drawer[data-dz-sidebar="open"] > .drawer-content > [data-dz-sidebar-navbar] {
display: none;
}
}
tr.htmx-swapping {
opacity: 0;
transform: translateX(1rem);
transition: opacity 300ms ease-out, transform 300ms ease-out;
}
tr.htmx-added,
tr.htmx-settling {
animation: dz-row-highlight 600ms ease-out;
}
@keyframes dz-row-highlight {
from { background-color: oklch(0.85 0.1 145 / 0.3); }
to { background-color: transparent; }
}
.btn.htmx-request {
pointer-events: none;
opacity: 0.7;
}
.htmx-indicator {
display: none;
}
.htmx-request .htmx-indicator {
display: inline-block;
}
.htmx-request.htmx-indicator {
display: inline-block;
}
.dz-skeleton {
background: linear-gradient(90deg, oklch(0.8 0 0 / 0.3) 25%, oklch(0.85 0 0 / 0.5) 50%, oklch(0.8 0 0 / 0.3) 75%);
background-size: 200% 100%;
animation: dz-shimmer 1.5s ease-in-out infinite;
border-radius: 0.25rem;
}
.dz-skeleton-text {
height: 0.75rem;
margin-bottom: 0.5rem;
}
.dz-skeleton-text-lg {
height: 1rem;
margin-bottom: 0.5rem;
width: 60%;
}
.dz-skeleton-cell {
height: 1rem;
}
@keyframes dz-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@view-transition {
navigation: auto;
}
#main-content {
view-transition-name: main-content;
}
::view-transition-old(main-content) {
animation: dz-fade-out 150ms ease-in forwards;
}
::view-transition-new(main-content) {
animation: dz-fade-in 200ms ease-out;
}
@keyframes dz-fade-out {
to {
opacity: 0;
transform: translateY(4px);
}
}
@keyframes dz-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(main-content),
::view-transition-new(main-content) {
animation: none;
}
tr.htmx-swapping {
transition: none;
}
tr.htmx-added,
tr.htmx-settling {
animation: none;
}
.dz-skeleton {
animation: none;
}
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
dialog[open] {
animation: dz-dialog-in 200ms ease-out;
}
@keyframes dz-dialog-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
body.select-none {
user-select: none;
-webkit-user-select: none;
}
body.cursor-col-resize,
body.cursor-col-resize * {
cursor: col-resize !important;
}
.ts-wrapper {
font-family: inherit;
}
.ts-wrapper .ts-control {
border: 1px solid oklch(var(--bc) / 0.2);
border-radius: var(--rounded-btn, 0.5rem);
background-color: oklch(var(--b1));
color: oklch(var(--bc));
padding: 0.5rem 0.75rem;
min-height: 2.5rem;
font-size: 0.875rem;
transition: border-color 0.15s ease;
}
.ts-wrapper .ts-control:focus,
.ts-wrapper.focus .ts-control {
border-color: oklch(var(--p));
outline: 2px solid oklch(var(--p) / 0.2);
outline-offset: 2px;
}
.ts-wrapper .ts-dropdown {
border: 1px solid oklch(var(--bc) / 0.2);
border-radius: var(--rounded-box, 1rem);
background-color: oklch(var(--b1));
color: oklch(var(--bc));
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
margin-top: 4px;
}
.ts-wrapper .ts-dropdown .option {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.ts-wrapper .ts-dropdown .option.active {
background-color: oklch(var(--p) / 0.1);
color: oklch(var(--p));
}
.ts-wrapper .ts-dropdown .option:hover {
background-color: oklch(var(--b2));
}
.ts-wrapper .ts-control .item {
background-color: oklch(var(--p) / 0.1);
color: oklch(var(--p));
border: none;
border-radius: var(--rounded-badge, 1.9rem);
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
font-weight: 500;
}
.ts-wrapper .ts-control .item .remove {
border-left: none;
color: oklch(var(--p) / 0.5);
}
.ts-wrapper .ts-control .item .remove:hover {
color: oklch(var(--er));
}
.flatpickr-calendar {
font-family: inherit;
background: oklch(var(--b1));
border: 1px solid oklch(var(--bc) / 0.2);
border-radius: var(--rounded-box, 1rem);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
.flatpickr-months .flatpickr-month {
background: oklch(var(--b1));
color: oklch(var(--bc));
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
background: oklch(var(--b1));
color: oklch(var(--bc));
}
.flatpickr-day {
color: oklch(var(--bc));
border-radius: var(--rounded-btn, 0.5rem);
}
.flatpickr-day:hover {
background: oklch(var(--b2));
border-color: oklch(var(--b2));
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
background: oklch(var(--p));
border-color: oklch(var(--p));
color: oklch(var(--pc));
}
.flatpickr-day.inRange {
background: oklch(var(--p) / 0.1);
border-color: oklch(var(--p) / 0.1);
box-shadow: -5px 0 0 oklch(var(--p) / 0.1), 5px 0 0 oklch(var(--p) / 0.1);
}
.flatpickr-day.today:not(.selected) {
border-color: oklch(var(--p));
}
.flatpickr-weekday {
color: oklch(var(--bc) / 0.5);
font-weight: 600;
}
.dz-metric-tile[data-dz-tone="positive"] {
background: hsl(var(--success) / 0.10);
}
.dz-metric-tile[data-dz-tone="warning"] {
background: hsl(var(--warning) / 0.10);
}
.dz-metric-tile[data-dz-tone="destructive"] {
background: hsl(var(--destructive) / 0.10);
}
.dz-metric-tile[data-dz-tone="accent"] {
background: hsl(var(--primary) / 0.10);
}
.dz-notice-band[data-dz-notice-tone="positive"] {
background: hsl(var(--success) / 0.08);
border-left-color: hsl(var(--success));
}
.dz-notice-band[data-dz-notice-tone="warning"] {
background: hsl(var(--warning) / 0.10);
border-left-color: hsl(var(--warning));
}
.dz-notice-band[data-dz-notice-tone="destructive"] {
background: hsl(var(--destructive) / 0.08);
border-left-color: hsl(var(--destructive));
}
.dz-notice-band[data-dz-notice-tone="accent"] {
background: hsl(var(--primary) / 0.08);
border-left-color: hsl(var(--primary));
}
.dz-notice-band[data-dz-notice-tone="neutral"],
.dz-notice-band:not([data-dz-notice-tone]) {
background: hsl(var(--muted) / 0.4);
border-left-color: hsl(var(--border));
}
.dz-action-card[data-dz-tone="positive"] {
border-color: hsl(var(--success) / 0.4);
background: hsl(var(--success) / 0.05);
}
.dz-action-card[data-dz-tone="positive"]:hover {
background: hsl(var(--success) / 0.10);
}
.dz-action-card[data-dz-tone="warning"] {
border-color: hsl(var(--warning) / 0.4);
background: hsl(var(--warning) / 0.05);
}
.dz-action-card[data-dz-tone="warning"]:hover {
background: hsl(var(--warning) / 0.10);
}
.dz-action-card[data-dz-tone="destructive"] {
border-color: hsl(var(--destructive) / 0.4);
background: hsl(var(--destructive) / 0.05);
}
.dz-action-card[data-dz-tone="destructive"]:hover {
background: hsl(var(--destructive) / 0.10);
}
.dz-action-card[data-dz-tone="accent"] {
border-color: hsl(var(--primary) / 0.4);
background: hsl(var(--primary) / 0.05);
}
.dz-action-card[data-dz-tone="accent"]:hover {
background: hsl(var(--primary) / 0.10);
}
.dz-action-card[data-dz-tone="neutral"],
.dz-action-card:not([data-dz-tone]) {
border-color: hsl(var(--border));
background: hsl(var(--card));
}
.dz-action-card[data-dz-tone="neutral"]:hover,
.dz-action-card:not([data-dz-tone]):hover {
background: hsl(var(--muted) / 0.4);
}
.dz-action-card-count[data-dz-tone-badge="positive"] {
background: hsl(var(--success) / 0.15);
color: hsl(var(--success));
}
.dz-action-card-count[data-dz-tone-badge="warning"] {
background: hsl(var(--warning) / 0.18);
color: hsl(var(--warning));
}
.dz-action-card-count[data-dz-tone-badge="destructive"] {
background: hsl(var(--destructive) / 0.15);
color: hsl(var(--destructive));
}
.dz-action-card-count[data-dz-tone-badge="accent"] {
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
}
.dz-action-card-count[data-dz-tone-badge="neutral"],
.dz-action-card-count:not([data-dz-tone-badge]) {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.dz-metric-delta[data-dz-delta-tone="positive"] {
color: hsl(var(--success));
}
.dz-metric-delta[data-dz-delta-tone="destructive"] {
color: hsl(var(--destructive));
}
.dz-metric-delta[data-dz-delta-tone="neutral"],
.dz-metric-delta:not([data-dz-delta-tone]) {
color: hsl(var(--muted-foreground));
}
.dz-status-list-entry[data-dz-state="positive"] .dz-status-list-pill {
background: hsl(var(--success) / 0.15);
color: hsl(var(--success));
}
.dz-status-list-entry[data-dz-state="warning"] .dz-status-list-pill {
background: hsl(var(--warning) / 0.18);
color: hsl(var(--warning));
}
.dz-status-list-entry[data-dz-state="destructive"] .dz-status-list-pill {
background: hsl(var(--destructive) / 0.15);
color: hsl(var(--destructive));
}
.dz-status-list-entry[data-dz-state="accent"] .dz-status-list-pill {
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
}
.dz-status-list-entry[data-dz-state="positive"] .dz-status-list-icon {
color: hsl(var(--success));
}
.dz-status-list-entry[data-dz-state="warning"] .dz-status-list-icon {
color: hsl(var(--warning));
}
.dz-status-list-entry[data-dz-state="destructive"] .dz-status-list-icon {
color: hsl(var(--destructive));
}
.dz-status-list-entry[data-dz-state="accent"] .dz-status-list-icon {
color: hsl(var(--primary));
}
.dz-status-list-entry[data-dz-state="neutral"] .dz-status-list-icon,
.dz-status-list-entry:not([data-dz-state]) .dz-status-list-icon {
color: hsl(var(--muted-foreground));
}