@layer components{.day{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;block-size:var(--day-height,6rem);padding:var(--day-padding,var(--space-s) var(--space-m));border:var(--border-thin)solid var(--color-border);border-radius:var(--radius-m);background:var(--color-surface);color:var(--color-text-muted);font-family:var(--font-mono);font-weight:500;appearance:none;inline-size:100%;font-size:inherit;text-align:start;&:is(button){cursor:pointer;transition:transform 120ms ease,box-shadow 120ms ease}&:is(button):hover{border-color:var(--color-text-muted)}&:is(button):active{transform:scale(.96)}& .day__number{font-family:inherit;font-size:var(--day-font,var(--size-step-0));font-variant-numeric:tabular-nums;line-height:1}& .day__mark{display:grid;place-items:center;font-size:calc(var(--day-font,var(--size-step-0)) * .8)}&[data-state=done]{border-color:var(--color-done);background:var(--color-done);color:var(--color-on-done);font-weight:600}&[data-state=open]{background:var(--color-surface)}&[data-state=future]{border-style:dashed;background:0 0;opacity:.6}&[data-state=locked]{border-style:dotted;background:0 0;opacity:.7}&[data-state=ghost]{border-color:transparent;background:0 0;opacity:.25}& .day__note{position:absolute;inset-block-start:var(--space-xs);inset-inline-end:var(--space-xs);inline-size:.35rem;block-size:.35rem;border-radius:50%;background:currentColor;opacity:.7}&[data-today=true]{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-text);font-weight:700}&[data-today=true][data-state=open]{border-width:2px;border-color:var(--color-text);color:var(--color-text)}}}