:root {
--fx-spring: cubic-bezier(.34, 1.45, .5, 1);
--fx-spring-soft: cubic-bezier(.25, 1.15, .4, 1);
--ring-w: 3.2;
--ring-w-active: 4.2;
--tone-primary: var(--chart-blue);
--tone-success: var(--chart-green);
--tone-warning: var(--chart-amber);
--tone-danger: var(--chart-red);
--tone-coral: var(--chart-pink);
--tone-beige: var(--chart-sand);
--tone-violet: var(--chart-teal);
--tone-muted: var(--color-faint);
}
@supports (transition-timing-function: linear(0, 1)) and (not (font: -apple-system-body)) {
:root {
--fx-spring: linear(0, 0.006 1%, 0.03 2.2%, 0.068 3.5%, 0.13 5%, 0.259 7.5%, 0.552 12.5%, 0.678 14.8%, 0.791 17%, 0.889 19.2%, 0.968 21.5%, 1.03 23.8%, 1.075 26%, 1.105 28.2%, 1.125 31.8%, 1.121 35.5%, 1.103 39%, 1.018 51.5%, 0.998 56%, 0.987 60.8%, 0.984 68%, 0.999 86.5%, 1);
--fx-spring-soft: linear(0, 0.006 1.5%, 0.026 3.2%, 0.064 5.2%, 0.113 7.2%, 0.218 10.8%, 0.571 21.5%, 0.672 25%, 0.754 28.2%, 0.819 31.2%, 0.878 34.5%, 0.925 37.8%, 0.962 41%, 0.994 44.8%, 1.017 48.8%, 1.031 53%, 1.038 57.8%, 1.036 65.5%, 1);
}
}
:root,
html[data-theme="light"] {
--fx-spot: rgba(0, 91, 255, .075);
--fx-spot-edge: rgba(0, 91, 255, .55);
--fx-edge: inset 0 1px 0 rgba(255, 255, 255, .9);
--fx-well: inset 0 1px 2px rgba(12, 14, 18, .07);
--chart-blue: #1F6FFF;
--chart-green: #17B26A;
--chart-red: #F04452;
--chart-pink: #EE2D6F;
--chart-teal: #0EA5B7;
--chart-hatch: rgba(22, 24, 29, .1);
--tile: #F5F6F9;
--tile-line: rgba(12, 14, 18, .055);
--chip-bg: #FFFFFF;
--chip-ring: rgba(12, 14, 18, .1);
--chip-ring-hover: rgba(12, 14, 18, .22);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6675' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--shadow-card:
0 1px 2px rgba(12, 14, 18, 0.05),
0 20px 40px -24px rgba(12, 14, 18, 0.24),
0 0 0 0.5px rgba(12, 14, 18, 0.03);
}
html[data-theme="dark"] {
--fx-spot: rgba(65, 135, 255, .12);
--fx-spot-edge: rgba(110, 165, 255, .7);
--fx-edge: inset 0 1px 0 rgba(255, 255, 255, .075);
--fx-well: inset 0 1px 3px rgba(0, 0, 0, .45);
--chart-blue: #4B8DFF;
--chart-green: #35D488;
--chart-red: #FF6B72;
--chart-pink: #FF6E9E;
--chart-teal: #4ECDE0;
--chart-hatch: rgba(255, 255, 255, .085);
--tile: #222327;
--tile-line: rgba(255, 255, 255, .055);
--chip-bg: #1A1B1E;
--chip-ring: rgba(255, 255, 255, .09);
--chip-ring-hover: rgba(255, 255, 255, .22);
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9DA4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--shadow-card:
inset 0 1px 0 rgba(255, 255, 255, .085),
inset 0 56px 64px -56px rgba(255, 255, 255, .055),
0 2px 6px rgba(0, 0, 0, .34),
0 24px 48px -28px rgba(0, 0, 0, .95);
--shadow-pop:
inset 0 1px 0 rgba(255, 255, 255, .085),
0 22px 60px rgba(0, 0, 0, .7),
0 6px 18px rgba(0, 0, 0, .5);
}
.metric-card:hover { box-shadow: var(--fx-edge), var(--shadow-soft); }
.dash-widget.row-link:hover { box-shadow: var(--fx-edge), var(--shadow-soft); }
:where(.input, .form-control) { box-shadow: var(--fx-well); }
@media (min-width: 820px) {
.page__title {
font-size: 30px;
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.035em;
}
.page__subtitle { font-size: 14.5px; margin-top: 6px; }
}
.page__hello {
margin: 0 0 3px;
font-size: 14px;
font-weight: 650;
line-height: 1.3;
letter-spacing: 0;
color: var(--color-primary);
}
.metric-card__unit {
margin-left: .08em;
font-size: max(.52em, 12px);
font-weight: 600;
letter-spacing: -0.01em;
color: color-mix(in srgb, currentColor 56%, transparent);
}
.btn {
transition:
transform .34s var(--fx-spring-soft),
box-shadow .2s var(--ease),
background-color .2s var(--ease),
border-color .2s var(--ease),
color .2s var(--ease),
filter .2s var(--ease);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-icon:hover { transform: none; }
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-danger:active,
.btn-success:active,
.btn-warning:active {
transform: scale(.965);
transition-duration: .09s, .2s, .2s, .2s, .2s, .2s;
}
.btn > svg { transition: transform .4s var(--fx-spring); }
.btn:hover > svg { transform: scale(1.12); }
.btn[data-fx-trail]:hover > svg:last-child { transform: translateX(3px); }
.topbar .btn-icon > svg { transition: transform .4s var(--fx-spring); }
.topbar .btn-icon:hover > svg { transform: scale(1.12) rotate(-6deg); }
.topbar .btn-icon:active > svg { transform: scale(.92); transition-duration: .09s; }
.dash-list__item {
background: var(--tile);
box-shadow: inset 0 0 0 1px var(--tile-line);
}
.dash-list__item[data-row-href]:hover {
background: color-mix(in srgb, var(--color-primary) 8%, var(--tile));
}
.dstat__link {
border-color: transparent;
border-radius: var(--radius-pill);
background: var(--tile);
box-shadow: inset 0 0 0 1px var(--tile-line);
}
.dstat__link:hover { border-color: transparent; transform: none; box-shadow: inset 0 0 0 1px var(--chip-ring-hover); }
.dstat__item--danger .dstat__link {
background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 18%, transparent);
}
.dstat__item--warning .dstat__link {
background: color-mix(in srgb, var(--chart-amber) 11%, var(--color-surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-amber) 26%, transparent);
}
.dstat__item--danger .dstat__link:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-danger) 46%, transparent); }
.dstat__item--warning .dstat__link:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-amber) 60%, transparent); }
@media (min-width: 820px) {
.dsec .dblock:not(.dblock--tile):not(.dblock--metric) .card__title {
font-size: 15px;
letter-spacing: -0.015em;
color: var(--color-heading);
}
.dsec .dblock:not(.dblock--tile):not(.dblock--metric) .card__subtitle { font-size: 12.5px; color: var(--color-muted); }
.dash-list__item { padding: 11px 14px; border-radius: 16px; }
.dstat__link { padding-inline: 14px; }
}
.tone--primary { --seg: var(--tone-primary); }
.tone--success { --seg: var(--tone-success); }
.tone--danger { --seg: var(--tone-danger); }
.tone--coral { --seg: var(--tone-coral); }
.tone--violet { --seg: var(--chart-teal); }
.dsec [data-donut-legend] li:has(.tone--primary) .chart-legend__fill { background: var(--tone-primary); }
.dsec [data-donut-legend] li:has(.tone--success) .chart-legend__fill { background: var(--tone-success); }
.dsec [data-donut-legend] li:has(.tone--danger) .chart-legend__fill { background: var(--tone-danger); }
.dsec [data-donut-legend] li:has(.tone--coral) .chart-legend__fill { background: var(--tone-coral); }
.dsec [data-donut-legend] li:has(.tone--violet) .chart-legend__fill { background: var(--chart-teal); }
.dash-donut__ring .dash-donut__bg { stroke: transparent; stroke-width: var(--ring-w); }
.dash-donut__ring .dash-donut__seg {
stroke-width: var(--ring-w);
stroke-linecap: round;
transition: stroke-width .3s var(--fx-spring-soft), opacity .16s var(--ease);
}
.dash-donut__ring .dash-donut__seg.is-active { stroke-width: var(--ring-w-active); }
.dash-donut.has-active .dash-donut__ring .dash-donut__seg:not(.is-active) { opacity: .38; }
.dash-gauge__ring .dash-gauge__bg { stroke-width: var(--ring-w); }
.dash-gauge__ring .dash-gauge__arc { stroke-width: var(--ring-w); stroke-linecap: round; }
.dsec .dash-gauge__ring .dash-gauge__arc.tone--success { stroke: var(--chart-blue); }
.dash-donut__center strong,
.dash-gauge__center strong { letter-spacing: -0.035em; }
.dsec .dash-donut__center { padding: 0 20px; }
.dsec .dash-donut__center strong { font-size: 23px; }
.dsec .dash-donut__center--md strong { font-size: 18px; }
.dsec .dash-donut__center--sm strong,
.dsec .dash-donut__center--xs strong { font-size: 15px; }
@container donutcard (min-width: 560px) {
.dsec .dash-donut__center { padding: 0 26px; }
.dsec .dash-donut__center strong { font-size: 30px; }
.dsec .dash-donut__center--md strong { font-size: 23px; }
.dsec .dash-donut__center--sm strong,
.dsec .dash-donut__center--xs strong { font-size: 17px; }
}
@container donutcard (min-width: 900px) {
.dsec .dash-donut__center { padding: 0 32px; }
.dsec .dash-donut__center strong { font-size: 36px; }
.dsec .dash-donut__center--md strong { font-size: 28px; }
.dsec .dash-donut__center--sm strong { font-size: 22px; }
.dsec .dash-donut__center--xs strong { font-size: 18px; }
}
.dash-donut__center.is-active strong { color: var(--color-heading); }
[data-donut-legend] .chart-legend__dot,
.dash-linechart .chart-legend__dot,
.dash-cols .chart-legend__dot {
background: transparent;
box-shadow: inset 0 0 0 2px var(--seg);
transition: background-color .16s var(--ease);
}
[data-donut-legend] li.is-active .chart-legend__dot {
background: var(--seg);
box-shadow: inset 0 0 0 2px var(--seg);
}
.chart-legend__val { font-weight: 650; color: var(--color-heading); }
.chart-legend__pct { font-weight: 500; }
.dsec [data-donut-legend] .chart-legend__track { height: 4px; }
.dash-chart__track {
height: 10px;
border-radius: 5px;
background:
repeating-linear-gradient(135deg, var(--chart-hatch) 0 1.5px, transparent 1.5px 6px),
color-mix(in srgb, var(--color-text) 3.5%, transparent);
}
.dash-chart__fill {
border-radius: 5px;
background: linear-gradient(90deg, color-mix(in srgb, var(--chart-blue) 68%, var(--color-surface)), var(--chart-blue));
}
.dash-chart__value { font-weight: 650; color: var(--color-heading); }
.dash-linechart__line { stroke-width: 2.6; }
.dash-linechart__grid { stroke-dasharray: 2 6; }
.dash-linechart__area { opacity: .2; }
a.dash-linechart__plot:hover .dash-linechart__area { opacity: .28; }
.dash-linechart__dot--end {
width: 9px;
height: 9px;
box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px color-mix(in srgb, var(--seg) 28%, transparent);
}
.dash-linechart__tip {
padding: 10px 12px;
border-color: transparent;
border-radius: 14px;
box-shadow: var(--shadow-pop), 0 0 0 1px var(--color-divider);
}
.dash-linechart__tip-val { font-weight: 650; }
.dash-cols { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-cols__legend { min-height: 0; }
.dash-cols__plot {
--cols-axis: 24px;
--cols-gutter: 42px;
position: relative;
display: block;
height: 224px;
padding: 10px 0 0 var(--cols-gutter);
color: inherit;
text-decoration: none;
container-type: inline-size;
}
a.dash-cols__plot { cursor: pointer; }
a.dash-cols__plot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 12px; }
.dash-cols__grid {
position: absolute;
inset: 10px 0 var(--cols-axis) var(--cols-gutter);
pointer-events: none;
border-bottom: 1px solid var(--color-divider);
}
.dash-cols__grid > span {
position: absolute;
left: 0;
right: 0;
border-top: 1px dashed color-mix(in srgb, var(--color-text) 11%, transparent);
}
.dash-cols__grid i {
position: absolute;
right: calc(100% + 8px);
top: 0;
transform: translateY(-50%);
font-style: normal;
font-size: 10.5px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
color: var(--color-faint);
font-variant-numeric: tabular-nums;
}
.dash-cols__bars { position: relative; display: flex; height: 100%; }
.dash-cols__col {
--bar-w: min(62%, 44px);
position: relative;
flex: 1 1 0;
min-width: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) var(--cols-axis);
justify-items: center;
}
.dash-cols--tracks .dash-cols__col::before {
content: "";
grid-area: 1 / 1;
width: var(--bar-w);
border-radius: 10px 10px 4px 4px;
background:
repeating-linear-gradient(135deg, var(--chart-hatch) 0 1.5px, transparent 1.5px 6px),
color-mix(in srgb, var(--color-text) 3%, transparent);
}
.dash-cols--tracks .dash-cols__col { --bar-w: min(62%, 76px); }
.dash-cols__stack,
.dash-cols__group {
grid-area: 1 / 1;
align-self: end;
width: var(--bar-w);
transform-origin: 50% 100%;
transition: opacity .16s var(--ease), filter .16s var(--ease);
}
.dash-cols__stack {
height: var(--h);
display: flex;
flex-direction: column-reverse;
gap: 1.5px;
overflow: hidden;
border-radius: 5px 5px 2px 2px;
}
.dash-cols__seg {
flex: var(--v) 1 0;
min-height: 2px;
background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 18%, var(--seg)), var(--seg));
}
.dash-cols__group { height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.dash-cols__bar {
flex: 1 1 0;
height: var(--h);
min-height: 2px;
border-radius: 4px 4px 2px 2px;
background: linear-gradient(180deg, color-mix(in srgb, #FFFFFF 18%, var(--seg)), var(--seg));
}
.dash-cols__x {
grid-area: 2 / 1;
align-self: end;
font-size: 11px;
line-height: 1;
white-space: nowrap;
color: var(--color-faint);
font-variant-numeric: tabular-nums;
}
.dash-cols--daily .dash-cols__plot { --cols-axis: 36px; }
.dash-cols--daily .dash-cols__x {
align-self: start;
display: grid;
justify-items: center;
gap: 3px;
padding-top: 7px;
font-size: clamp(9px, calc((100cqi - var(--cols-gutter)) / var(--n, 14) * .44), 11.5px);
}
.dash-cols--daily .dash-cols__x b { font-weight: 600; color: var(--color-muted); }
.dash-cols--daily .dash-cols__x i {
font-style: normal;
font-size: 10px;
font-weight: 600;
letter-spacing: .02em;
color: var(--color-faint);
}
.dash-cols--values .dash-cols__plot { padding-top: 20px; }
.dash-cols--values .dash-cols__grid { top: 20px; }
.dash-cols__val {
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--cols-axis) + (100% - var(--cols-axis)) * var(--hv, 0) / 100 + 4px);
text-align: center;
font-size: clamp(9px, calc((100cqi - var(--cols-gutter)) / var(--n, 14) * .42), 11.5px);
font-weight: 650;
line-height: 1;
white-space: nowrap;
color: var(--color-text);
font-variant-numeric: tabular-nums;
pointer-events: none;
transition: opacity .16s var(--ease);
}
.dash-cols__zero {
grid-area: 1 / 1;
align-self: end;
width: var(--bar-w);
height: 2px;
border-radius: 1px;
background: color-mix(in srgb, var(--color-text) 16%, transparent);
}
.dash-cols__bars:hover .dash-cols__col:not(:hover) > :is(.dash-cols__stack, .dash-cols__group, .dash-cols__val) { opacity: .4; }
.dash-cols__col:hover > :is(.dash-cols__stack, .dash-cols__group) { filter: brightness(1.08); }
.dash-cols__col:hover > .dash-cols__x { color: var(--color-text); }
.dash-cols__tip {
position: absolute;
z-index: 6;
top: 2px;
left: calc(50% + var(--bar-w) / 2 + 10px);
width: max-content;
--tip-room: calc(var(--room, .5) * 100cqi - var(--bar-w) / 2 + 12px);
min-width: min(164px, var(--tip-room));
max-width: min(330px, var(--tip-room));
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 5px;
padding: 11px 13px;
border-radius: 14px;
background: var(--color-surface);
box-shadow: var(--shadow-pop), 0 0 0 1px var(--color-divider);
font-size: 12px;
line-height: 1.3;
text-align: left;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .14s var(--ease), transform .24s var(--fx-spring-soft), visibility 0s linear .14s;
}
.dash-cols__col.is-flip > .dash-cols__tip { left: auto; right: calc(50% + var(--bar-w) / 2 + 10px); }
.dash-cols__col:hover > .dash-cols__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dash-cols__tip-date { color: var(--color-muted); font-weight: 550; }
.dash-cols__tip-total {
margin-bottom: 3px;
font-size: 17px;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--color-heading);
font-variant-numeric: tabular-nums;
}
.dash-cols__tip-row { display: flex; align-items: center; gap: 8px; }
.dash-cols__tip-row > i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--seg); }
.dash-cols__tip-row > span { min-width: 0; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-cols__tip-row > b {
flex: none;
margin-left: auto;
padding-left: 14px;
font-weight: 650;
white-space: nowrap;
color: var(--color-heading);
font-variant-numeric: tabular-nums;
}
[data-dash-motion] [data-sec-reveal]:not(.is-in) :is(.dash-cols__stack, .dash-cols__group),
[data-dash-motion] [data-dash-reveal]:not(.is-in) :is(.dash-cols__stack, .dash-cols__group) { transform: scaleY(0); }
[data-dash-motion] .is-in :is(.dash-cols__stack, .dash-cols__group) {
animation: fx-cols-grow 1s var(--ease) calc(var(--i, 0) * 30ms) backwards;
transition: opacity .16s var(--ease), filter .16s var(--ease);
}
@keyframes fx-cols-grow { from { transform: scaleY(0); } }
.dash-cal { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dash-cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.dash-cal__total { font-size: 13px; color: var(--color-muted); }
.dash-cal__total b {
margin-right: 4px;
font-size: 26px;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--color-heading);
font-variant-numeric: tabular-nums;
}
.dash-cal__delta { font-size: 12.5px; font-weight: 650; color: var(--color-muted); white-space: nowrap; }
.dash-cal__delta--danger { color: var(--color-danger); }
.dash-cal__delta--success { color: var(--color-success); }
.dash-cal__grid {
container: dash-cal / inline-size;
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
.dash-cal__wd {
padding-bottom: 2px;
font-size: 11px;
font-weight: 600;
text-align: center;
color: var(--color-faint);
}
.dash-cal__cell {
--cal-bg: var(--tile);
--cal-ink: var(--color-heading);
--cal-sub: var(--color-faint);
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
justify-items: center;
min-height: 52px;
padding: 5px 4px 6px;
border-radius: 10px;
background: var(--cal-bg);
color: var(--cal-ink);
text-decoration: none;
transition: filter .15s var(--ease);
}
.dash-cal__cell--void { background: transparent; }
.dash-cal__day {
justify-self: start;
font-size: 10.5px;
font-weight: 600;
line-height: 1;
color: var(--cal-sub);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.dash-cal__day i { font-style: normal; font-weight: 500; }
@container dash-cal (max-width: 371px) {
.dash-cal__day i { display: none; }
}
.dash-cal__val {
align-self: center;
font-size: 17px;
font-weight: 750;
line-height: 1;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.dash-cal__base { font-size: 10px; line-height: 1; color: var(--cal-sub); white-space: nowrap; }
.dash-cal__cell.is-l0 { --cal-ink: var(--color-faint); }
.dash-cal__cell.is-l1 { --cal-bg: color-mix(in srgb, var(--color-warning) 20%, var(--tile)); }
.dash-cal__cell.is-l2 { --cal-bg: color-mix(in srgb, var(--color-warning) 42%, var(--tile)); }
.dash-cal__cell.is-l3 { --cal-bg: color-mix(in srgb, var(--color-danger) 52%, var(--tile)); }
.dash-cal__cell.is-l4 {
--cal-bg: color-mix(in srgb, var(--color-danger) 86%, #000);
--cal-ink: #FFFFFF;
--cal-sub: rgba(255, 255, 255, .78);
}
.dash-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--color-primary); }
a.dash-cal__cell:hover { filter: brightness(.97); }
html[data-theme="dark"] a.dash-cal__cell:hover { filter: brightness(1.12); }
a.dash-cal__cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dash-cal__tip {
position: absolute;
z-index: 6;
bottom: calc(100% + 8px);
left: 50%;
width: max-content;
max-width: 240px;
display: grid;
gap: 5px;
padding: 10px 12px;
border-radius: 14px;
background: var(--color-surface);
box-shadow: var(--shadow-pop), 0 0 0 1px var(--color-divider);
color: var(--color-text);
font-size: 12px;
line-height: 1.3;
text-align: left;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translate(-50%, 4px);
transition: opacity .14s var(--ease), transform .24s var(--fx-spring-soft), visibility 0s linear .14s;
}
.dash-cal__cell.is-start > .dash-cal__tip { left: 0; transform: translate(0, 4px); }
.dash-cal__cell.is-end > .dash-cal__tip { left: auto; right: 0; transform: translate(0, 4px); }
.dash-cal__cell:hover > .dash-cal__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.dash-cal__cell.is-start:hover > .dash-cal__tip,
.dash-cal__cell.is-end:hover > .dash-cal__tip { transform: none; }
.dash-cal__tip-date { color: var(--color-muted); font-weight: 550; }
.dash-cal__tip-row { display: flex; align-items: center; gap: 8px; }
.dash-cal__tip-row > i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--seg); }
.dash-cal__tip-row > span { min-width: 0; color: var(--color-muted); white-space: nowrap; }
.dash-cal__tip-row > b { margin-left: auto; padding-left: 14px; font-weight: 650; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.dash-cal__legend { min-height: 0; }
@media (min-width: 820px) {
.dash-cal__grid { gap: 6px; }
.dash-cal__cell { min-height: 56px; }
.dash-cal__val { font-size: 19px; }
}
.dash-heat__cell { border-radius: 7px; }
.dash-heat__cell.tone--muted,
.dash-heat__legend .chart-legend__dot.tone--muted {
border-color: transparent;
background:
repeating-linear-gradient(135deg, var(--chart-hatch) 0 1.5px, transparent 1.5px 5px),
color-mix(in srgb, var(--color-text) 3%, transparent);
}
.dash-heat__legend .chart-legend__dot {
width: 11px;
height: 11px;
border-radius: 3.5px;
background: color-mix(in srgb, var(--seg) 30%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg) 44%, transparent);
}
.dash-heat__legend .chart-legend__dot.tone--muted { box-shadow: none; }
select.input,
select.form-control,
select.input:focus,
select.form-control:focus {
background-image: var(--icon-chevron);
background-position: right 14px center;
background-size: 15px 15px;
background-repeat: no-repeat;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
opacity: .55;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
input[data-fx-empty]:not(:focus)::-webkit-datetime-edit { color: var(--color-faint); }
.fx-probe { position: absolute; left: -999px; top: 0; visibility: hidden; pointer-events: none; }
.fx-probe::before { content: "x"; display: block; }
@media (min-width: 820px) {
.filters-bar {
--control-h: 40px;
--chip-lift: 0 1px 2px rgba(12, 14, 18, .04);
}
.card.filters-bar,
.card .filters-bar {
--chip-bg: var(--tile);
--chip-ring: var(--tile-line);
--chip-lift: 0 0 transparent;
}
.filters-bar .input {
padding: 9px 14px;
border-color: transparent;
border-radius: var(--radius-pill);
background-color: var(--chip-bg);
box-shadow: inset 0 0 0 1px var(--chip-ring), var(--chip-lift);
font-size: 13px;
font-weight: 550;
transition: box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.filters-bar select.input { padding-right: 34px; background-position: right 12px center; }
.filters-bar .filters-bar__search .input { padding-left: 44px; }
.filters-bar .input:hover {
border-color: transparent;
box-shadow: inset 0 0 0 1px var(--chip-ring-hover), var(--chip-lift);
}
.filters-bar .input:focus,
.filters-bar .pvz-pick.is-open .pvz-pick__button {
border-color: transparent;
background-color: var(--chip-bg);
box-shadow: inset 0 0 0 1.5px var(--color-primary), var(--ring-soft);
}
.filters-bar .input::placeholder { font-weight: 500; color: var(--color-muted); }
.filters-bar select.input:has(option:checked[value=""]) { color: var(--color-muted); font-weight: 500; }
.filters-bar .pvz-pick__button,
.filters-bar .pvz-pick__button:focus {
padding-right: 34px;
background-image: var(--icon-chevron);
background-position: right 12px center;
background-size: 15px 15px;
background-repeat: no-repeat;
}
html[data-fx-datelabel] .filters-bar > input[type="date"][aria-label][data-fx-empty] { position: relative; }
html[data-fx-datelabel] .filters-bar > input[type="date"][aria-label][data-fx-empty]:not(:focus)::-webkit-datetime-edit { opacity: 0; }
html[data-fx-datelabel] .filters-bar > input[type="date"][aria-label][data-fx-empty]:not(:focus)::before {
content: attr(aria-label);
position: absolute;
left: 14px;
right: 40px;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
color: var(--color-muted);
pointer-events: none;
}
}
.metric-card::before,
.metric-card::after,
.report-card::before,
.report-card::after,
.dash-widget.row-link::before,
.dash-widget.row-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity .3s var(--ease);
}
.metric-card::after,
.report-card::after,
.dash-widget.row-link::after {
z-index: -1;
background: radial-gradient(260px circle at var(--fx-x, 50%) var(--fx-y, 0%), var(--fx-spot), transparent 72%);
}
.metric-card::before,
.report-card::before,
.dash-widget.row-link::before {
padding: 1px;
background: radial-gradient(220px circle at var(--fx-x, 50%) var(--fx-y, 0%), var(--fx-spot-edge), transparent 72%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.metric-card:hover::before,
.metric-card:hover::after,
.dash-widget.row-link:hover::before,
.dash-widget.row-link:hover::after,
.report-card:hover::before,
.report-card:hover::after,
.set-card:hover > .report-card::before,
.set-card:hover > .report-card::after { opacity: 1; }
.metric-card { isolation: isolate; }
.dash-widget.row-link { isolation: isolate; }
.report-card { position: relative; isolation: isolate; }
.report-card:hover,
.set-card:hover > .report-card,
.set-card:focus-within > .report-card { border-color: var(--color-border-strong); }
html[data-theme="light"] .metric-card:hover { background: var(--tile-bg); }
html[data-theme="light"] .dash-widget.row-link:hover { background: var(--color-surface); }
.metric-card__overlay::after {
transition: background-color .18s var(--ease), opacity .18s var(--ease), transform .4s var(--fx-spring);
}
.dash-widget__open::after { transition: opacity .18s var(--ease), transform .4s var(--fx-spring); }
.metric-card:hover .metric-card__overlay::after,
.dash-widget:hover .dash-widget__open::after { transform: translate(2px, -2px); }
.report-card__cta { transition: transform .4s var(--fx-spring); transform-origin: left center; display: inline-block; }
.report-card:hover .report-card__cta { transform: translateX(3px); }
.sidebar-item {
transition: background-color .18s var(--ease), color .18s var(--ease),
box-shadow .18s var(--ease), transform .34s var(--fx-spring-soft);
}
.sidebar-item__icon {
transition: transform .4s var(--fx-spring), opacity .18s var(--ease), background-color .18s var(--ease);
}
.sidebar-item:hover .sidebar-item__icon { transform: translateX(2px) scale(1.1); }
.sidebar-item:active { transform: scale(.985); transition-duration: .18s, .18s, .18s, .09s; }
.sidebar-item:active .sidebar-item__icon { transform: scale(.92); transition-duration: .09s; }
.sidebar__brand .brand__logo { transition: transform .45s var(--fx-spring); transform-origin: 30% 60%; }
.sidebar__brand .brand:hover .brand__logo { transform: rotate(-4deg) scale(1.05); }
.topbar__user-button:hover { transform: none; }
.topbar__user-avatar { transition: transform .4s var(--fx-spring); }
.topbar__user-button:hover .topbar__user-avatar { transform: scale(1.08); }
@keyframes fx-ring {
0%, 100% { transform: rotate(0); }
15% { transform: rotate(-16deg); }
30% { transform: rotate(13deg); }
45% { transform: rotate(-9deg); }
60% { transform: rotate(6deg); }
75% { transform: rotate(-3deg); }
}
.topbar__bell.is-fx-ringing > svg,
.sidebar-item.is-fx-ringing .sidebar-item__icon {
animation: fx-ring .9s var(--ease);
transform-origin: 50% 12%;
}
.dropdown-menu { animation: dropdown-in .3s var(--fx-spring-soft) both; }
.cmdk { animation: pop-in .34s var(--fx-spring-soft) both; }
.cmdk__input:focus-visible { box-shadow: none; }
.toast { animation: toast-in .42s var(--fx-spring-soft) both; }
.hub-tabs__tab,
.eco-tabs__tab {
transition: background-color .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease), transform .34s var(--fx-spring-soft);
}
.view-switch__btn {
transition: color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), transform .34s var(--fx-spring-soft);
}
.hub-tabs__tab:active,
.eco-tabs__tab:active,
.view-switch__btn:active {
transform: scale(.955);
transition-duration: .16s, .16s, .16s, .09s;
}
.period-quick__item {
transition: background-color .16s var(--ease), color .16s var(--ease), transform .34s var(--fx-spring-soft);
}
.period-quick__item:active { transform: scale(.95); transition-duration: .16s, .16s, .09s; }
a.chip:active,
button.chip:active { transform: scale(.96); }
html[data-tab-switch] .page.fade-in { animation-duration: 0s; animation-delay: 0s; }
html[data-tab-switch] .page > :is(.hub-tabs, .eco-tabs) ~ * {
animation: fx-tab-in .75s var(--ease) 30ms backwards;
}
html[data-tab-switch="back"] .page > :is(.hub-tabs, .eco-tabs) ~ * { animation-name: fx-tab-in-back; }
@keyframes fx-tab-in {
from { opacity: 0; transform: translateX(28px); }
60% { opacity: 1; }
to { transform: none; }
}
@keyframes fx-tab-in-back {
from { opacity: 0; transform: translateX(-28px); }
60% { opacity: 1; }
to { transform: none; }
}
.checkbox__box { transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .34s var(--fx-spring); }
.checkbox__box::after { transition: transform .34s var(--fx-spring); }
.checkbox:active .checkbox__box { transform: scale(.88); transition-duration: .18s, .18s, .18s, .09s; }
.table tbody tr[data-row-href]:active > td,
.table tbody tr.row-link:active > td { background-color: color-mix(in srgb, var(--color-primary) 17%, transparent); }
.field__label,
.form-label { transition: color .2s var(--ease); }
.field:focus-within > .field__label,
.form-field:focus-within > .form-label { color: var(--color-heading); }
.crew--mini {
--k: .62;
--w: 220;
--h: 160;
display: block;
width: calc(var(--w) * var(--k) * 1px);
height: calc(var(--h) * var(--k) * 1px);
margin: 0 auto 10px;
}
.crew--mini > .crew__scene {
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
}
.crew--mini > .crew__scene > .crew__mate { left: 0; }
.crew--mini .crew__mate--kraft {
--mouth-x: 97px;
--mouth-y: 102px;
--mouth-w: 26px;
--mouth-h: 13px;
border-radius: 7px 7px 0 0;
}
.crew--mini .crew__mate--kraft > .crew__flap {
border-radius: 7px 7px 3px 3px;
background: var(--crew-kraft-deep);
}
.crew--mini .crew__mate--kraft > .crew__tape {
border-radius: 0 0 2px 2px;
background:
linear-gradient(180deg, transparent 40px, rgba(12, 14, 18, .08) 40px 43px, transparent 43px),
var(--crew-tape);
}
.crew--mini--cube { --w: 90; --h: 84; --k: 1; }
.crew--mini--locker { --w: 132; --h: 320; --k: .4; }
.crew--mini--duo { --h: 244; --k: .56; }
.crew--mini .crew__led { box-shadow: none; }
.crew--mini .crew__mate--locker .crew__mouth { filter: none; }
.crew--mini--sheet { --w: 164; --h: 200; --k: .56; }
.crew--mini--badge { --w: 160; --h: 226; --k: .54; }
.crew--mini--van { --w: 244; --h: 150; --k: .6; }
.crew--mini--tape { --w: 226; --h: 140; --k: .64; }
.crew__mate--sheet,
.crew__mate--badge,
.crew__mate--van,
.crew__mate--tape {
height: calc(var(--h) * 1px);
translate: 0 calc(var(--stretch) * -.5px);
transition: translate .5s var(--crew-ease);
}
.crew__mate:is(.crew__mate--sheet, .crew__mate--badge, .crew__mate--van, .crew__mate--tape) > .crew__mouth {
left: var(--mouth-x);
top: var(--mouth-y);
width: var(--mouth-w);
height: var(--mouth-h);
}
.crew__mate--sheet {
--h: 188;
--eye: 26px;
--pupil: 14px;
--crew-eye: transparent;
--mouth-x: 69px;
--mouth-y: 94px;
--mouth-w: 26px;
--mouth-h: 13px;
--sign-x: -22px;
--sign-y: -20px;
--zzz-x: 4px;
width: 164px;
border-radius: 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-kraft-deep) 88%, #fff), var(--crew-kraft-deep) 55%);
}
.crew__paper {
position: absolute;
left: 13px;
right: 13px;
top: 20px;
bottom: 13px;
border-radius: 5px;
background:
linear-gradient(#BDC4D0, #BDC4D0) 17px 108px / 104px 5px no-repeat,
linear-gradient(#BDC4D0, #BDC4D0) 17px 122px / 104px 5px no-repeat,
linear-gradient(#BDC4D0, #BDC4D0) 17px 136px / 62px 5px no-repeat,
#FFFDF8;
}
.crew__clip {
position: absolute;
left: 44px;
top: 6px;
width: 76px;
height: 24px;
border-radius: 6px 6px 4px 4px;
background: #8F98A9;
}
.crew__clip::before {
content: "";
position: absolute;
left: 21px;
top: -18px;
width: 34px;
height: 19px;
border-radius: 10px 10px 0 0;
background: radial-gradient(circle at 50% 10px, transparent 0 4.4px, #7B8496 5px);
}
.crew__mate--sheet > .crew__face { left: 47px; top: 58px; gap: 18px; }
.crew__mate--badge {
--h: 226;
--eye: 26px;
--pupil: 14px;
--crew-eye: transparent;
--mouth-x: 67px;
--mouth-y: 140px;
--mouth-w: 26px;
--mouth-h: 13px;
--sign-x: -20px;
--sign-y: 34px;
--zzz-x: 0px;
--zzz-y: -52px;
width: 160px;
}
.crew__strap {
position: absolute;
left: 0;
top: 0;
width: 160px;
height: 60px;
overflow: hidden;
}
.crew__strap::before,
.crew__strap::after {
content: "";
position: absolute;
left: 73px;
bottom: 0;
width: 14px;
height: 90px;
background: var(--crew-blue-deep);
transform-origin: 50% 100%;
}
.crew__strap::before { rotate: -38deg; }
.crew__strap::after { rotate: 38deg; }
.crew__card {
position: absolute;
left: 5px;
top: 56px;
box-sizing: border-box;
width: 150px;
height: 170px;
border: 7px solid var(--crew-blue);
border-top-width: 20px;
border-radius: 14px;
background:
linear-gradient(#5B6474, #5B6474) 50% 108px / 80px 7px no-repeat,
linear-gradient(#BDC4D0, #BDC4D0) 50% 123px / 54px 5px no-repeat,
#FFFDF8;
}
.crew__card::after {
content: "";
position: absolute;
left: 50%;
top: 10px;
width: 108px;
height: 86px;
margin-left: -54px;
border-radius: 10px;
background: #DCE8FF;
}
.crew__card::before {
content: "";
position: absolute;
left: 50%;
top: -32px;
z-index: 1;
width: 28px;
height: 24px;
margin-left: -14px;
border-radius: 5px;
background: linear-gradient(180deg, #A6AEBD, #8F98A9);
}
.crew__mate--badge > .crew__face { left: 45px; top: 104px; gap: 18px; }
.crew__mate--van {
--h: 150;
--eye: 28px;
--pupil: 11px;
--mouth-x: 65px;
--mouth-y: 76px;
--mouth-w: 26px;
--mouth-h: 13px;
--sign-x: 66px;
--sign-y: -16px;
--zzz-x: 34px;
--zzz-y: -34px;
width: 244px;
}
.crew__cargo {
position: absolute;
left: 0;
top: 6px;
width: 156px;
height: 108px;
border-radius: 12px 8px 4px 10px;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-blue) 80%, #fff), var(--crew-blue) 75%);
}
.crew__cab {
position: absolute;
left: 152px;
top: 40px;
width: 86px;
height: 74px;
border-radius: 6px 28px 6px 4px;
background: var(--crew-blue-deep);
}
.crew__cab::before {
content: "";
position: absolute;
left: 16px;
top: 12px;
width: 46px;
height: 28px;
border-radius: 4px 16px 4px 4px;
background: linear-gradient(180deg, #E6F0FF, #BFD6FF);
}
.crew__cab::after {
content: "";
position: absolute;
right: -3px;
bottom: 14px;
width: 10px;
height: 13px;
border-radius: 3px;
background: var(--crew-warn);
}
.crew__wheels {
--tyre: #1E2029;
position: absolute;
left: 4px;
top: 108px;
width: 238px;
height: 14px;
border-radius: 7px;
background: #2B2F3A;
}
html[data-theme="dark"] .crew__wheels { --tyre: #4A5162; background: #5A6274; }
.crew__wheels::before,
.crew__wheels::after {
content: "";
position: absolute;
top: -2px;
width: 44px;
height: 44px;
border-radius: 50%;
background: radial-gradient(circle, #C9CED8 0 8px, var(--tyre) 8.7px);
}
.crew__wheels::before { left: 24px; }
.crew__wheels::after { left: 160px; }
.crew__mate--van > .crew__face { left: 30px; top: 32px; gap: 40px; }
.crew__mate--tape {
--h: 140;
--eye: 28px;
--pupil: 11px;
--mouth-x: 73px;
--mouth-y: 104px;
--mouth-w: 26px;
--mouth-h: 13px;
--sign-x: 36px;
--sign-y: -16px;
--zzz-x: 52px;
--zzz-y: 2px;
width: 226px;
}
.crew__tail {
position: absolute;
left: 160px;
top: 66px;
width: 62px;
height: 34px;
background: #F4DCAE;
clip-path: polygon(0 0, 100% 0, 91% 17%, 100% 33%, 91% 50%, 100% 67%, 91% 83%, 100% 100%, 0 100%);
}
.crew__roll {
position: absolute;
left: 0;
top: 26px;
width: 172px;
height: 114px;
border-radius: 0 0 50% 50% / 0 0 26px 26px;
background: linear-gradient(180deg, color-mix(in srgb, var(--crew-kraft) 92%, #fff), var(--crew-kraft) 45%, color-mix(in srgb, var(--crew-kraft) 90%, #000));
}
.crew__roll::before {
content: "";
position: absolute;
left: 0;
top: -26px;
width: 172px;
height: 52px;
border-radius: 50%;
background: radial-gradient(closest-side, #8A5A2C 0 33%, var(--crew-kraft-deep) 34.5% 52%, #F2D29C 53.5%);
}
.crew__mate--tape > .crew__face { left: 38px; top: 64px; gap: 40px; }
.crew--mini.is-unposed .crew__mate,
.crew--mini.is-unposed .crew__face,
.crew--mini.is-unposed .crew__mouth,
.crew--mini.is-unposed .crew__pupil,
.crew--mini.is-unposed .crew__led { transition: none; }
.empty-state:has(> .crew--mini) > .empty-state__icon { display: none; }
.chat-pane__placeholder:has(> .crew--mini) > svg { display: none; }
.chat-pane__placeholder > .crew--mini { margin-bottom: 4px; }
@media (max-width: 819px) {
.crew--mini { --k: .5; }
.crew--mini--cube { --k: .8; }
.crew--mini--duo { --k: .46; }
.crew--mini--sheet { --k: .45; }
.crew--mini--badge { --k: .44; }
.crew--mini--van { --k: .48; }
.crew--mini--tape { --k: .52; }
}
.crew--mini:is([data-fx-mood="is-puzzled"], [data-fx-mood="is-alert"], [data-fx-mood="is-asleep"]) { margin-top: 18px; }
.crew--mini .crew__mate > .crew__sign {
right: var(--sign-x, -16px);
top: var(--sign-y, -24px);
width: calc(25px / var(--k));
height: calc(25px / var(--k));
font-size: calc(15.5px / var(--k));
box-shadow: none;
}
.crew--mini.is-puzzled .crew__mate > .crew__sign { background: var(--crew-blue); color: #FFFFFF; }
.crew--mini.is-puzzled .crew__mate:is(.crew__mate--van, .crew__mate--badge) > .crew__sign { background: var(--crew-coral-deep); }
.crew--mini.is-puzzled .crew__face { rotate: none; }
.crew--mini.is-puzzled .crew__mouth { --mr: 0; }
.crew--mini.is-puzzled .crew__mate > .crew__smile {
left: calc(var(--mouth-x) + var(--mouth-w) * .42);
top: calc(var(--mouth-y) + var(--mouth-h) * .4);
width: calc(var(--mouth-w) * .56);
height: 4px;
border: 0;
border-radius: 2px;
background: var(--crew-pupil);
}
.crew--mini.is-alert .crew__mate > .crew__face .crew__pupil { scale: .66; }
.crew--mini.is-alert .crew__mate > .crew__smile {
left: calc(var(--mouth-x) + (var(--mouth-w) - var(--mouth-h) * 1.08) / 2);
width: calc(var(--mouth-h) * 1.08);
height: calc(var(--mouth-h) * 1.08);
border: 0;
border-radius: 50%;
background: var(--crew-pupil);
}
.crew--mini.is-alert .crew__screen { animation: none; box-shadow: inset 0 0 0 3px var(--crew-warn); }
.crew--mini.is-asleep .crew__face,
.crew--mini.is-asleep .crew__mouth { animation: none; }
.crew--mini .crew__mate > .crew__zzz {
display: none;
left: auto;
right: var(--zzz-x, 30px);
bottom: calc(100% + var(--zzz-y, 4px));
}
.crew--mini.is-asleep .crew__mate > .crew__zzz { display: block; }
.crew--mini .crew__zzz i::before { content: "z"; }
.crew--mini.is-asleep .crew__zzz i { animation: none; opacity: .9; font-size: calc(15px / var(--k)); }
.crew--mini.is-asleep .crew__zzz i:nth-child(2) { left: calc(10.5px / var(--k)); bottom: calc(10.5px / var(--k)); font-size: calc(12px / var(--k)); opacity: .62; }
.crew--mini.is-asleep .crew__zzz i:nth-child(3) { left: calc(19px / var(--k)); bottom: calc(19px / var(--k)); font-size: calc(9.5px / var(--k)); opacity: .38; }
.crew--mini.is-happy .crew__mate > .crew__face .crew__eye,
.crew--mini .crew__mate.is-poked > .crew__face .crew__eye {
height: calc(var(--eye) * .5);
margin-top: calc(var(--eye) * .36);
border-radius: var(--eye) var(--eye) 0 0;
background: transparent;
border: calc(var(--eye) * .145) solid var(--crew-pupil);
border-bottom: 0;
}
.crew--mini.is-happy .crew__mate > .crew__face .crew__pupil,
.crew--mini .crew__mate.is-poked > .crew__face .crew__pupil { opacity: 0; }
.crew--mini.is-happy .crew__mate > .crew__smile,
.crew--mini .crew__mate.is-poked > .crew__smile {
left: var(--mouth-x);
top: var(--mouth-y);
width: var(--mouth-w);
height: calc(var(--mouth-h) * 1.4);
border: 3px solid var(--crew-pupil);
border-top: 0;
border-radius: 0 0 14px 14px;
background: var(--crew-pupil);
}
.crew__mate:is(.crew__mate--sheet, .crew__mate--badge, .crew__mate--van, .crew__mate--tape).is-poked > .crew__face,
.crew__mate:is(.crew__mate--sheet, .crew__mate--badge, .crew__mate--van, .crew__mate--tape).is-poked > .crew__mouth { animation: crew-giggle .8s var(--ease); }
.crew__mate--badge { transform-origin: 50% 0; }
.crew__mate--badge.is-poked { animation: fx-mate-swing .8s var(--crew-ease); }
.crew__mate--van.is-poked,
.crew__mate--tape.is-poked > .crew__roll { animation: crew-squish .8s var(--crew-ease); }
.crew__mate--tape > .crew__roll { transform-origin: 50% 100%; }
@keyframes fx-mate-swing {
0%, 100% { rotate: 0deg; }
25% { rotate: -7deg; }
60% { rotate: 5deg; }
85% { rotate: -2deg; }
}
.errorp__card > .crew--mini {
position: absolute;
left: 50%;
bottom: 100%;
margin: 0;
translate: -50% 0;
}
.errorp__card > .crew--mini--locker { --k: .5; }
.errorp__code {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--color-heading);
}
@keyframes fx-bump {
0% { transform: scale(1); }
35% { transform: scale(1.28); }
100% { transform: scale(1); }
}
.is-fx-bumped { animation: fx-bump .5s var(--fx-spring-soft); }
.page--chat-list,
.page--chat,
.page:has(> .chat-card),
.chat-dock {
--shadow-card: var(--shadow-sm);
--fx-edge: 0 0 0 transparent;
--fx-well: 0 0 0 transparent;
}
.page--chat-list .btn-icon,
.page--chat-list .btn-secondary,
.page--chat .btn-icon,
.page--chat .btn-secondary,
.chat-card .btn-icon,
.chat-card .btn-secondary,
.chat-dock .btn-icon,
.chat-dock .btn-secondary { box-shadow: none; }
@media (min-width: 820px) {
.page--chat-list .filters-bar .input {
background-color: var(--color-surface-alt);
border-color: var(--color-border);
box-shadow: none;
font-weight: 500;
}
.page--chat-list .filters-bar .input:hover { box-shadow: none; border-color: var(--color-border-strong); }
.page--chat-list .filters-bar .input:focus {
background-color: var(--color-surface);
border-color: var(--color-primary);
box-shadow: var(--ring-soft);
}
}
.chat-split .chat-thread {
transition: background-color .16s var(--ease), transform .3s var(--fx-spring-soft);
}
.chat-split .chat-thread:active { transform: scale(.985); transition-duration: .16s, .09s; }
.chat-thread__aside .badge.is-fx-bumped { animation: fx-bump .5s var(--fx-spring-soft); }
.chat-pane__actions .btn-icon > svg,
.chat-pane__actions .chat-dock-min > svg { transition: transform .4s var(--fx-spring); }
.chat-pane__actions .btn-icon:hover > svg,
.chat-pane__actions .chat-dock-min:hover > svg { transform: scale(1.12); }
.chat-pane__actions .btn-icon:active > svg { transform: scale(.9); transition-duration: .09s; }
.chat-msg--in { animation: chat-msg-in .46s var(--fx-spring-soft) both; }
.chat-msg__tile img,
.chat-msg__tile video { transition: transform .6s var(--fx-spring-soft); }
.chat-msg__tile:hover img,
.chat-msg__tile:hover video { transform: scale(1.03); }
@media (min-width: 820px) {
.chat-form__row .btn-icon > svg { transition: transform .4s var(--fx-spring); }
.chat-form__row .btn-icon:hover > svg { transform: scale(1.14); }
.chat-form__row .chat-attach:hover > svg { transform: rotate(-16deg) scale(1.12); }
.chat-form__row .btn-icon:active > svg { transform: scale(.9); transition-duration: .09s; }
.chat-send {
transition: transform .3s var(--fx-spring-soft), opacity .2s var(--ease), color .22s var(--ease),
background-color .22s var(--ease), box-shadow .2s var(--ease);
}
.chat-form:not(.is-fx-ready) .chat-send,
.chat-form:not(.is-fx-ready) .chat-form__field,
.chat-form:not(.is-fx-ready) .chat-form__input { transition: none; }
.chat-form__row .chat-send,
.chat-form__row .chat-send:hover { box-shadow: none; }
.chat-form.is-empty .chat-send { color: var(--color-muted); transform: scale(.92); }
.chat-form.is-empty .chat-send:hover { color: var(--color-heading); }
.chat-form:not(.is-empty) .chat-send,
.chat-form:not(.is-empty) .chat-send:hover {
background: var(--chat-bubble-own); color: #FFFFFF; filter: none;
}
.chat-form:not(.is-empty) .chat-send:hover { filter: brightness(1.08); }
.chat-form.is-fx-sending .chat-send__icon { animation: fx-plane .5s var(--ease) both; }
}
@keyframes fx-plane {
0% { transform: translate(0, 0); opacity: 1; }
45% { transform: translate(18px, -14px) rotate(-8deg); opacity: 0; }
46% { transform: translate(-12px, 10px); opacity: 0; }
100% { transform: translate(0, 0); opacity: 1; }
}
.chat-emoji__pop { animation: pop-in .3s var(--fx-spring-soft) both; transform-origin: bottom right; }
.chat-emoji__item { transition: transform .3s var(--fx-spring), background-color .16s var(--ease); }
.chat-emoji__item:hover { transform: scale(1.28); }
@media (min-width: 1100px) {
.chat-split { transition: grid-template-columns .34s var(--ease); }
html.is-chat-resizing .chat-split,
html.is-chat-silent .chat-split { transition: none; }
.chat-info { animation: fx-info-in .32s var(--ease) both; }
.chat-split__info.is-silent .chat-info { animation: none; }
.chat-info__tile img,
.chat-info__video { transition: transform .6s var(--fx-spring-soft); }
.chat-info__tile:hover img,
.chat-info__tile:hover .chat-info__video { transform: scale(1.06); }
.chat-info__member { border-radius: 12px; margin: 0 -8px; padding-inline: 8px; transition: background-color .16s var(--ease); }
.chat-info__member:hover { background: var(--color-surface-soft); }
.chat-info__file { border-radius: 12px; margin: 0 -8px; padding-inline: 8px; transition: background-color .16s var(--ease); }
.chat-info__file:hover { background: var(--color-surface-soft); }
.chat-info__file-name { transition: color .16s var(--ease); }
}
@keyframes fx-info-in {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: none; }
}
html[data-lite] .metric-card::before,
html[data-lite] .metric-card::after,
html[data-lite] .report-card::before,
html[data-lite] .report-card::after,
html[data-lite] .dash-widget.row-link::before,
html[data-lite] .dash-widget.row-link::after { display: none; }
html[data-lite] .btn:hover > svg,
html[data-lite] .topbar .btn-icon:hover > svg,
html[data-lite] .sidebar-item:hover .sidebar-item__icon,
html[data-lite] .report-card:hover .report-card__cta,
html[data-lite] .metric-card:hover .metric-card__overlay::after,
html[data-lite] .dash-widget:hover .dash-widget__open::after,
html[data-lite] .sidebar__brand .brand:hover .brand__logo,
html[data-lite] .topbar__user-button:hover .topbar__user-avatar,
html[data-lite] .chat-form__row .btn-icon:hover > svg,
html[data-lite] .chat-emoji__item:hover,
html[data-lite] .chat-msg__tile:hover img,
html[data-lite] .chat-info__tile:hover img { transform: none; }
@media (prefers-reduced-motion: reduce) {
.btn:hover > svg,
.btn[data-fx-trail]:hover > svg:last-child,
.topbar .btn-icon:hover > svg,
.sidebar-item:hover .sidebar-item__icon,
.report-card:hover .report-card__cta,
.metric-card:hover .metric-card__overlay::after,
.dash-widget:hover .dash-widget__open::after,
.sidebar__brand .brand:hover .brand__logo,
.topbar__user-button:hover .topbar__user-avatar,
.btn:active,
.hub-tabs__tab:active,
.eco-tabs__tab:active,
.view-switch__btn:active,
.period-quick__item:active,
a.chip:active,
button.chip:active,
.sidebar-item:active,
.checkbox:active .checkbox__box,
.chat-split .chat-thread:active,
.chat-pane__actions .btn-icon:hover > svg,
.chat-pane__actions .chat-dock-min:hover > svg,
.chat-form__row .btn-icon:hover > svg,
.chat-form__row .chat-attach:hover > svg,
.chat-emoji__item:hover,
.chat-msg__tile:hover img,
.chat-msg__tile:hover video,
.chat-info__tile:hover img,
.chat-info__tile:hover .chat-info__video,
.chat-form.is-empty .chat-send { transform: none; }
}
@media print {
.crew--mini { display: none; }
}
.skel {
background-image: linear-gradient(100deg, transparent 0 40%,
color-mix(in srgb, var(--color-surface) 72%, transparent) 50%, transparent 60% 100%);
background-size: 220vw 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -140vw 0;
transform-origin: 0 50%;
animation:
fx-skel-draw .7s cubic-bezier(.2, .8, .2, 1) backwards,
fx-skel-shine 2.2s cubic-bezier(.45, 0, .2, 1) .9s 3 backwards;
}
.skel-lock__col:first-child > .skel:nth-child(2) { animation-delay: .06s, .9s; }
.skel-lock__col:first-child > .skel:nth-child(3) { animation-delay: .12s, .9s; }
.skel-lock__col:first-child > .skel:nth-child(4) { animation-delay: .18s, .9s; }
.skel-lock__bars .skel--bar {
transform-origin: 50% 100%;
animation:
fx-skel-grow .8s var(--fx-spring-soft) backwards,
fx-skel-shine 2.2s cubic-bezier(.45, 0, .2, 1) .9s 3 backwards;
}
.skel-lock__bars .skel--bar:nth-child(2) { animation-delay: .07s, .9s; }
.skel-lock__bars .skel--bar:nth-child(3) { animation-delay: .14s, .9s; }
.skel-lock__bars .skel--bar:nth-child(4) { animation-delay: .21s, .9s; }
.skel-lock__bars .skel--bar:nth-child(5) { animation-delay: .28s, .9s; }
.skel-lock__bars .skel--bar:nth-child(6) { animation-delay: .35s, .9s; }
.skel-lock:hover .skel,
tr:hover > td .skel { animation-iteration-count: 1, infinite; }
.skel-lock__plaque { animation: fx-skel-rise .55s var(--fx-spring-soft) .3s backwards; }
.skel-lock__icon svg { transform-origin: 50% 62%; animation: fx-skel-click .7s var(--fx-spring) .8s backwards; }
.skel-lock:hover .skel-lock__icon svg { animation: fx-skel-click .7s var(--fx-spring); }
@keyframes fx-skel-draw { from { transform: scaleX(.18); opacity: 0; } }
@keyframes fx-skel-grow { from { transform: scaleY(.08); opacity: 0; } }
@keyframes fx-skel-shine { from { background-position: -140vw 0; } to { background-position: 20vw 0; } }
@keyframes fx-skel-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes fx-skel-click {
0% { transform: rotate(0) scale(1); }
30% { transform: rotate(-14deg) scale(1.1); }
60% { transform: rotate(8deg) scale(1); }
100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.skel, .skel-lock__plaque, .skel-lock__icon svg { animation: none; }
}
html[data-lite] .skel,
html[data-lite] .skel-lock__plaque,
html[data-lite] .skel-lock__icon svg { animation: none; }
:root,
html[data-theme="light"] {
--fx-sk: color-mix(in srgb, var(--color-muted) 16%, transparent);
--fx-sk-shine: rgba(255, 255, 255, .72);
}
html[data-theme="dark"] {
--fx-sk-shine: rgba(255, 255, 255, .065);
}
.fx-sk,
.is-fx-skel :where(tbody, tfoot) > tr > td::after,
.is-fx-skel :is(.metric-card__value, .metric-card__delta, .metric-card__hint)::after,
.is-fx-skel :where(.card__foot, .pager) > .cell-muted::after {
background-color: var(--fx-sk);
background-image: linear-gradient(100deg, transparent 0 40%, var(--fx-sk-shine) 50%, transparent 60% 100%);
background-size: 220vw 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: -140vw 0;
animation: fx-sk-shine 1.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes fx-sk-shine { to { background-position: 20vw 0; } }
.is-fx-skel :where(tbody, tfoot) > tr > td,
.is-fx-skel :is(.metric-card__value, .metric-card__delta, .metric-card__hint),
.is-fx-skel :where(.card__foot, .pager) > .cell-muted {
position: relative;
-webkit-text-fill-color: transparent;
}
.is-fx-skel :where(tbody, tfoot) > tr > td > *,
.is-fx-skel :where(tbody, tfoot) > tr > td::before,
.is-fx-skel :is(.metric-card__value, .metric-card__delta, .metric-card__hint) > *,
.is-fx-skel :where(.card__foot, .pager) > .cell-muted > * { visibility: hidden; }
.is-fx-skel :where(tbody, tfoot) > tr > td::after {
content: "";
position: absolute; z-index: 1;
top: 50%; left: 10px;
width: min(var(--fx-sk-w, 60%), calc(100% - 20px));
height: 12px; margin-top: -6px;
border-radius: 999px;
}
.is-fx-skel :where(tbody) > tr > td:nth-child(4n+2)::after { --fx-sk-w: 44%; }
.is-fx-skel :where(tbody) > tr > td:nth-child(4n+3)::after { --fx-sk-w: 68%; }
.is-fx-skel :where(tbody) > tr > td:nth-child(4n)::after { --fx-sk-w: 36%; }
.is-fx-skel :where(tbody) > tr > td:first-child::after { --fx-sk-w: 76%; }
.is-fx-skel :where(tbody) > tr:nth-child(3n+2) > td::after { width: min(calc(var(--fx-sk-w, 60%) * .78), calc(100% - 20px)); }
.is-fx-skel :where(tbody) > tr:nth-child(3n) > td::after { width: min(calc(var(--fx-sk-w, 60%) * .9), calc(100% - 20px)); }
.is-fx-skel :where(tbody, tfoot) > tr > td.ta-right::after { left: auto; right: 10px; }
.is-fx-skel :where(tbody, tfoot) > tr > td.ta-center::after { left: 0; right: 0; margin-inline: auto; }
.is-fx-skel :where(tbody) > tr > td:has(> input[type="checkbox"], > .checkbox)::after {
width: 18px; height: 18px; margin-top: -9px; border-radius: 6px;
}
.is-fx-skel .table.table--cards:not(#_) > :is(tbody, tfoot) > tr > td { position: relative; }
.is-fx-skel .table--cards > :is(tbody, tfoot) > tr > td::after { left: 0; width: min(var(--fx-sk-w, 60%), 100%); }
.is-fx-skel .table--cards > :is(tbody, tfoot) > tr > td.ta-right::after { left: auto; right: 0; }
.is-fx-skel .metric-card__value::after {
content: "";
position: absolute; left: 0; top: 50%;
width: min(100%, calc(max(2, var(--metric-value-len, 4)) * .56em));
height: .7em; margin-top: -.35em;
border-radius: 10px;
}
.is-fx-skel :is(.metric-card__delta, .metric-card__hint)::after,
.is-fx-skel :where(.card__foot, .pager) > .cell-muted::after {
content: "";
position: absolute; left: 0; top: 50%;
width: min(100%, 140px); height: 10px; margin-top: -5px;
border-radius: 999px;
}
.is-fx-skel .empty-state { opacity: .45; }
.htmx-request.is-fx-wait { opacity: 1; transition: none; }
.is-fx-skel-done :is(.table-wrap, .metric-card__value, .metric-card__delta, .card__foot) {
animation: fx-sk-reveal .24s var(--ease) backwards;
}
@keyframes fx-sk-reveal { from { opacity: .3; } }
.page.is-fx-leaving > [data-fx-hide] { display: none; }
.fx-skel {
display: flex; flex-direction: column; gap: var(--gap-cards);
min-width: 0;
animation: fx-sk-in .18s var(--ease) backwards;
}
@keyframes fx-sk-in { from { opacity: 0; } }
.fx-sk { display: block; flex: none; height: 12px; border-radius: 999px; }
@media (min-width: 1100px) {
.page.page--chat-list > .fx-skel { padding: 28px; overflow: hidden; }
}
.fx-skel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fx-skel__lead { display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.fx-skel__titles { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding-top: 3px; }
.fx-sk--title { width: min(280px, 70%); height: 26px; border-radius: 10px; }
.fx-sk--sub { width: min(420px, 92%); height: 13px; }
.fx-sk--btn { width: 156px; height: 40px; }
.fx-sk--back { width: 36px; height: 36px; border-radius: 50%; }
.fx-skel__card,
.fx-skel__tile {
display: flex; flex-direction: column; gap: 18px; min-width: 0;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-2xl); box-shadow: var(--shadow-card);
padding: 24px;
}
.fx-skel__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cards); }
.fx-skel__tile { padding: 22px 22px 20px; min-height: 118px; }
.fx-sk--label { width: 56%; }
.fx-sk--num { width: 44%; height: 30px; border-radius: 10px; margin-top: auto; }
.fx-sk--h { width: min(220px, 46%); height: 16px; }
.fx-skel__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-sk--field { width: min(340px, 100%); height: 40px; }
.fx-sk--chip { width: 132px; height: 40px; }
.fx-skel__rows { display: flex; flex-direction: column; margin: -6px -10px; }
.fx-skel__row {
display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1.3fr .9fr; gap: 24px; align-items: center;
padding: 22px 10px; border-top: 1px solid var(--color-divider);
}
.fx-skel__row:first-child { border-top: 0; }
.fx-skel__row > :nth-child(1) { width: 82%; }
.fx-skel__row > :nth-child(2) { width: 56%; }
.fx-skel__row > :nth-child(3) { width: 70%; }
.fx-skel__row > :nth-child(4) { width: 48%; }
.fx-skel__row > :nth-child(5) { width: 64%; justify-self: end; }
.fx-skel__row:nth-child(3n+2) > :nth-child(odd) { width: 62%; }
.fx-skel__row:nth-child(3n) > :nth-child(even) { width: 74%; }
.fx-skel__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-cards); align-items: start; }
.fx-skel__stack { display: flex; flex-direction: column; gap: var(--gap-cards); min-width: 0; }
.fx-skel__pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 24px; align-items: center; }
.fx-skel__pairs > :nth-child(odd) { width: 64%; height: 11px; }
.fx-skel__pairs > :nth-child(4n+2) { width: 82%; }
.fx-skel__pairs > :nth-child(4n) { width: 58%; }
.fx-skel__lines { display: flex; flex-direction: column; gap: 14px; }
.fx-skel__lines > :nth-child(3n+1) { width: 90%; }
.fx-skel__lines > :nth-child(3n+2) { width: 64%; }
.fx-skel__lines > :nth-child(3n) { width: 78%; }
.fx-skel__card--form { max-width: 760px; gap: 22px; }
.fx-skel__field { display: flex; flex-direction: column; gap: 10px; }
.fx-sk--flabel { width: 132px; height: 11px; }
.fx-sk--input { width: 100%; height: 44px; border-radius: 14px; }
.fx-sk--submit { width: 172px; height: 42px; margin-top: 4px; }
.fx-skel__chat {
display: grid; grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
min-height: 560px; padding: 0; gap: 0; overflow: hidden;
}
.fx-skel__threads { display: flex; flex-direction: column; gap: 22px; padding: 24px 20px; border-right: 1px solid var(--color-border); }
.fx-skel__thread { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 9px 14px; align-items: center; }
.fx-sk--ava { width: 48px; height: 48px; border-radius: 50%; grid-row: span 2; }
.fx-skel__thread > :nth-child(2) { width: 58%; }
.fx-skel__thread > :nth-child(3) { width: 84%; height: 10px; }
.fx-skel__thread:nth-child(even) > :nth-child(2) { width: 44%; }
.fx-skel__thread:nth-child(3n) > :nth-child(3) { width: 66%; }
.fx-skel__pane { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px 28px; }
.fx-sk--bubble { width: 46%; height: 40px; border-radius: 18px; }
.fx-sk--bubble:nth-child(3n+2) { width: 30%; }
.fx-sk--bubble:nth-child(even) { align-self: flex-end; width: 36%; }
.fx-skel__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.fx-skel__grid > .fx-sk { width: auto; height: 64px; border-radius: 12px; }
.fx-skel__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); }
.fx-sk--chart { width: 100%; height: 188px; border-radius: 16px; }
.fx-skel--talk { height: 100%; min-height: 0; gap: 0; }
.fx-skel__talk { padding: 0; gap: 0; min-height: 560px; overflow: hidden; }
.fx-skel__talk-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); }
.fx-skel__talk-head .fx-sk--ava { width: 40px; height: 40px; grid-row: auto; }
.fx-skel__talk-head .fx-skel__titles { gap: 9px; padding-top: 0; }
.fx-skel__talk-head .fx-skel__titles > :first-child { width: min(200px, 50%); }
.fx-skel__talk-head .fx-skel__titles > :last-child { width: min(120px, 34%); height: 10px; }
:is(.fx-skel--talk, .fx-skel__talk) .fx-skel__pane { flex: 1; }
.fx-skel__talk-form { padding: 10px 16px 14px; }
.fx-sk--compose { width: 100%; height: 52px; border-radius: 26px; }
.chat-split__view.is-fx-covered > [data-fx-hide] { display: none; }
.fx-skel-slot { display: flex; flex-direction: column; height: 100%; min-height: 420px; }
.fx-skel-slot > .fx-skel--talk { flex: 1; }
.fx-skel-dialog { display: flex; flex-direction: column; gap: 18px; animation: fx-sk-in .18s var(--ease) backwards; }
.fx-skel-dialog .fx-sk--title { width: min(240px, 70%); height: 22px; }
.fx-skel-dialog .fx-sk--input { height: 42px; }
.fx-skel__foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.fx-sk--eyebrow { width: 96px; height: 10px; }
.fx-sk--close { width: 32px; height: 32px; border-radius: 50%; }
.is-fx-skel-done > :is(.cell-modal__dialog, .qadd__dialog, .camadd__dialog) { animation: fx-sk-reveal .24s var(--ease) backwards; }
@media (max-width: 1099px) {
.fx-skel__chat { grid-template-columns: minmax(0, 1fr); }
.fx-skel__threads { border-right: 0; }
.fx-skel__chat .fx-skel__pane { display: none; }
}
@media (max-width: 900px) {
.fx-skel__cols, .fx-skel__pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.fx-sk--btn { display: none; }
.fx-skel__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fx-skel__tile { padding: 16px; min-height: 96px; gap: 14px; }
.fx-skel__card { padding: 18px; }
.fx-skel__row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 18px 10px; }
.fx-skel__row > :nth-child(n+3) { display: none; }
.fx-skel__row > :nth-child(2) { width: 64px; justify-self: end; }
.fx-skel__grid { gap: 4px; }
.fx-skel__grid > .fx-sk { height: 44px; border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
.fx-skel,
.fx-skel-dialog,
.fx-sk,
.is-fx-skel :where(tbody, tfoot) > tr > td::after,
.is-fx-skel :is(.metric-card__value, .metric-card__delta, .metric-card__hint)::after,
.is-fx-skel :where(.card__foot, .pager) > .cell-muted::after,
.is-fx-skel-done :is(.table-wrap, .metric-card__value, .metric-card__delta, .card__foot) { animation: none; }
}
html[data-lite] .fx-skel,
html[data-lite] .fx-skel-dialog,
html[data-lite] .fx-sk,
html[data-lite] .is-fx-skel :where(tbody, tfoot) > tr > td::after,
html[data-lite] .is-fx-skel :is(.metric-card__value, .metric-card__delta, .metric-card__hint)::after,
html[data-lite] .is-fx-skel :where(.card__foot, .pager) > .cell-muted::after,
html[data-lite] .is-fx-skel-done :is(.table-wrap, .metric-card__value, .metric-card__delta, .card__foot) { animation: none; }
@media (hover: none) and (pointer: coarse) {
.tabbar__item,
.sidebar-item,
.btn,
.btn-icon,
.chip,
.mx-week__day,
.mx-week__nav,
.mx-closedtoggle,
.mx-grouptoggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.mx-week__day,
.mx-week__nav { transition: transform .34s var(--fx-spring-soft), background-color .16s var(--ease); }
.mx-week__day:active,
.mx-week__nav:active {
transform: scale(.92);
background-color: var(--color-surface-soft);
transition-duration: .09s, .09s;
}
.mx-week__day.is-on:active { background-color: var(--color-primary-soft); }
.mx-closedtoggle {
transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), transform .34s var(--fx-spring-soft);
}
.mx-closedtoggle:active { transform: scale(.95); transition-duration: .15s, .15s, .15s, .09s; }
.mx-grouptoggle :is(.mx-grouprow__label, .mx-grouptoggle__chevron) { transition: opacity .2s var(--ease), transform .15s var(--ease); }
.mx-grouptoggle:active :is(.mx-grouprow__label, .mx-grouptoggle__chevron) { opacity: .45; transition-duration: .06s, .15s; }
.mx-person { transition: border-color .15s var(--ease), background .15s var(--ease), transform .34s var(--fx-spring-soft); }
.mx-person:active { transform: scale(.97); transition-duration: .15s, .15s, .09s; }
.mx-cellbtn:active {
background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
box-shadow: inset 0 0 0 2px var(--color-primary);
transition-duration: 0s;
}
.sched-matrix .mx-chip:active { opacity: .55; }
.sched-matrix--day .sched-matrix__row--closed:active > :is(th, td) {
background-image: linear-gradient(
color-mix(in srgb, var(--color-text) 7%, transparent),
color-mix(in srgb, var(--color-text) 7%, transparent)
);
}
.btn-icon > svg { transition: transform .4s var(--fx-spring); }
.btn-icon:active > svg { transform: scale(.88); transition-duration: .09s; }
:is(a.metric-card, .metric-card--link):active {
transform: scale(.975);
transition-duration: .09s, .2s, .2s;
}
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
.mx-week__day:active,
.mx-week__nav:active,
.mx-closedtoggle:active,
.mx-person:active,
.btn-icon:active > svg,
:is(a.metric-card, .metric-card--link):active { transform: none; }
}
input.fx-tap:not(#_) {
position: fixed; z-index: 2147483000;
margin: 0; padding: 0; border: 0; border-radius: 0;
min-width: 0; min-height: 0; max-width: none; max-height: none;
opacity: 0; background: none; box-shadow: none; outline: none;
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
pointer-events: auto; transform: none; transition: none; animation: none;
}