/* Table of contents

    1. HTML & Body
    2. Board Stage
    3. Widget Spawner
    4. Shared Widget Styles
    5. Toolbar
    6. Marquee (Selection Box)
    7. Resize Handles
    8. Widgets
        8.1 Text Box
        8.2 Clock
        8.3 Timer
    9. Components
        9.1 Board status
        9.2 Toast
        9.3 Mini editor
    10. Utilities

*/

/* =================================================================================================
                                            1. HTML & Body
================================================================================================= */

html,
body {
    overflow-x: clip;
}

/* =================================================================================================
                                            2. Board Stage
================================================================================================= */

#board-stage {
    position: relative;
    justify-content: unset;
    align-items: unset;
    padding-block: unset;
    overflow: visible;
    overscroll-behavior: contain;
}

body[data-board-mode="editor"] [data-editor-board-viewport],
body[data-board-mode="demo"] [data-editor-board-viewport] {
    position: relative;
    justify-content: unset;
    align-items: unset;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding-block: unset;
    overflow: visible;
    overscroll-behavior: contain;
}

body[data-board-mode="editor"] [data-editor-board-canvas],
body[data-board-mode="demo"] [data-editor-board-canvas] {
    --locked-board-pan-x: 0px;
    --locked-board-pan-y: 0px;

    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-canvas] {
    transform: translate3d(var(--locked-board-pan-x), var(--locked-board-pan-y), 0);
    transform-origin: 0 0;
}

body[data-board-mode="editor"] [data-editor-board-canvas] > #board-stage,
body[data-board-mode="demo"] [data-editor-board-canvas] > #board-stage {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport] {
    overflow: hidden;
    touch-action: none;
    cursor: default;
}

body.fullscreen[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport] {
    overflow: visible;
    clip-path: inset(
        0
        calc(var(--fullscreen-spacing-tight) * -1)
        calc(var(--fullscreen-spacing-tight) * -1)
        calc(var(--fullscreen-spacing-tight) * -1)
    );
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"],
body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"] #board-stage [data-widget],
body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"] #board-stage [data-widget] * {
    cursor: grab;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport].is-panning,
body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport].is-panning #board-stage [data-widget],
body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport].is-panning #board-stage [data-widget] * {
    cursor: grabbing;
}

#board-stage .board-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 10000;
    background-color: transparent;
    cursor: default;
    touch-action: none;
}

#board-stage .board-lock-overlay.hidden {
    display: none;
}

body[data-board-locked="true"] #board-stage [data-widget],
body[data-board-locked="true"] #board-stage .group-resize {
    cursor: default;
}

body[data-board-locked="true"] #board-stage .toolbar,
body[data-board-locked="true"] #board-stage .actions,
body[data-board-locked="true"] #board-stage .resize-handles,
body[data-board-locked="true"] #board-stage .group-resize {
    display: none !important;
}

body[data-board-mode="public"] [data-public-board-viewport] {
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: default;
}

body[data-board-mode="public"] [data-public-board-viewport][data-public-board-pannable="true"],
body[data-board-mode="public"] [data-public-board-viewport][data-public-board-pannable="true"] [data-widget],
body[data-board-mode="public"] [data-public-board-viewport][data-public-board-pannable="true"] [data-widget] * {
    cursor: grab;
}

body[data-board-mode="public"] [data-public-board-viewport].is-panning,
body[data-board-mode="public"] [data-public-board-viewport].is-panning [data-widget],
body[data-board-mode="public"] [data-public-board-viewport].is-panning [data-widget] * {
    cursor: grabbing;
}

body[data-board-mode="public"] #board-stage[data-public-board-canvas] {
    --public-board-pan-x: 0px;
    --public-board-pan-y: 0px;
    --public-board-scale: 1;

    position: absolute;
    left: 0;
    top: 0;
    transform:
        translate3d(var(--public-board-pan-x), var(--public-board-pan-y), 0)
        scale(var(--public-board-scale));
    transform-origin: 0 0;
    overflow: visible;
}

body[data-board-mode="public"] [data-public-board-canvas] .ql-editor {
    touch-action: none;
}

html:has(> body.fullscreen[data-board-mode="public"]),
body.fullscreen[data-board-mode="public"] {
    overflow: hidden;
}

body.fullscreen[data-board-mode="public"] main,
body.fullscreen[data-board-mode="public"] section:has([data-fullscreen-boundary]),
body.fullscreen[data-board-mode="public"] [data-fullscreen-module][data-public-header-hidden],
body.fullscreen[data-board-mode="public"] [data-public-board-viewport] {
    min-height: 0;
    overflow: hidden;
}

/* =================================================================================================
                                        3. Widget Spawner
================================================================================================= */

.spawner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spawner__toolbar {
    background-color: var(--bg-inverse);
    padding: 1rem;
    border-radius: var(--br-600);
}

.spawner__widgets {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.spawner__widget {
    flex: 1 1 0;
    min-width: 7ch;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spawner__trigger {
    --_icon-size: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}

.spawner__icon {
    display: grid;
    place-content: center;
    width: var(--_icon-size);
    height: var(--_icon-size);
    font-size: var(--fs-nav-btn);
    background-color: #f3f3f3;
    border-radius: var(--br-400);
}

.spawner__label {
    display: block;
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
    color: var(--bg-primary);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
}

body[data-board-footer-hidden="true"] [data-fullscreen-footer] {
    display: none;
}

body.fullscreen [data-fullscreen-module]:has(> [data-fullscreen-body] + [data-fullscreen-footer]) {
    position: relative;
}

body.fullscreen [data-fullscreen-module]:has(> [data-fullscreen-body] + [data-fullscreen-footer]) > [data-fullscreen-body] {
    z-index: 0;
}

body.fullscreen [data-fullscreen-module]:has(> [data-fullscreen-body] + [data-fullscreen-footer]) > [data-fullscreen-footer] {
    position: absolute;
    inset: auto 0 var(--fullscreen-spacing-tight) 0;
    padding-inline: var(--fullscreen-spacing-tight);
    z-index: 30;
    pointer-events: none;
}

body.fullscreen [data-fullscreen-module]:has(> [data-fullscreen-body] + [data-fullscreen-footer]) > [data-fullscreen-footer] > .spawner {
    pointer-events: none;
}

body.fullscreen [data-fullscreen-module]:has(> [data-fullscreen-body] + [data-fullscreen-footer]) > [data-fullscreen-footer] .spawner__toolbar {
    pointer-events: auto;
}

body:not([data-board-spawner-ready="true"]) [data-widget-spawner-footer] {
    display: none;
}

[data-widget-spawner-footer][hidden] {
    display: none !important;
}

/* =================================================================================================
                                    4. Shared Widget Styles
================================================================================================= */

[data-widget] {
    --_tx: 0px;
    --_ty: 0px;
    --_scale: 1;
    transform: translate(var(--_tx), var(--_ty)) scale(var(--_scale));
    transform-origin: 0 0;
    isolation: isolate;
    touch-action: none;
    cursor: grab;
}

body[data-widget-transitions="true"] [data-widget] {
    transition: opacity var(--ts-semi-fast) cubic-bezier(.4, 0, .2, 1);
}

body[data-widget-transitions="true"] [data-widget]:not(.is-widget-mounted) {
    opacity: 0;
}

body[data-widget-transitions="true"] [data-widget].is-widget-mounted {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body[data-widget-transitions="true"] [data-widget] {
        transition: none;
    }
}

body[data-board-mode="public"] [data-widget] {
    cursor: default;
    touch-action: auto;
}

[data-bordered-widget] {
    --_widget-border-width: 2cqmin;
    position: relative;
}

[data-bordered-widget]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--_widget-border-width) var(--bg-primary);
}

[data-widget] .actions,
#board-stage .group-resize .actions {
    --_widget-gap: 1rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, calc(100% + var(--_widget-gap)));
    pointer-events: auto;
}

/* [data-widget].is-selected {
    outline: var(--bw-500) solid var(--clr-accent-primary);
} */

[data-widget]:not(.is-selected) .actions,
#board-stage.has-multi [data-widget].is-selected .actions {
    display: none;
}

[data-widget] .actions [data-remove-widget],
#board-stage .group-resize .actions [data-remove-widget] {
    display: grid;
    place-content: center;
    background-color: var(--bg-primary);
    color: var(--clr-secondary);
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    padding: .65rem 1rem;
    line-height: 1;
    border-radius: 100vmax;
    letter-spacing: unset;
    cursor: pointer;
}

#board-stage.has-multi [data-widget].is-selected:active,
#board-stage .group-resize:active {
    cursor: grabbing;
}

#board-stage.has-multi [data-widget].is-selected {
    user-select: none;
}

[data-widget] [data-drag-exclude] {
    touch-action: auto;
}

/* =================================================================================================
                                            5. Toolbar
================================================================================================= */

[data-widget] .toolbar {
    --_widget-gap: 1.25rem;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% + (var(--_widget-gap) * -1)));
    align-items: center;
    background-color: var(--bg-primary);
    color: var(--clr-secondary);
    font-weight: var(--fw-500);
    padding: var(--toolbar-padding);
    border-radius: var(--br-400);
    cursor: default;
    display: none;
}

[data-widget] .toolbar__items {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--toolbar-item-spacing);
    font-size: var(--fs-scalable-300);
}

[data-widget] .toolbar__items > li {
    display: flex;
}

[data-widget] .toolbar__item {
    font-weight: var(--fw-400);
    padding: var(--toolbar-padding) .75rem;
    border-radius: var(--br-300);
    white-space: nowrap;
    cursor: pointer;
}

[data-widget] .toolbar__item,
[data-widget] .dropdown.toolbar__control--more .dropdown__btn {
    color: var(--clr-secondary);
}

[data-widget] .dropdown .toolbar__item {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: var(--bg-accent-secondary);
    color: var(--clr-primary);
    outline: none;
}

[data-widget] .dropdown.secondary .dropdown__btn {
    gap: .5em;
}

[data-widget] .dropdown.secondary .dropdown__btn:not(.toolbar__item.active) {
    color: var(--clr-secondary);
}

[data-widget] .dropdown.secondary .dropdown__btn[aria-expanded="true"],
[data-widget] .dropdown.secondary .dropdown__btn.focused {
    color: var(--clr-primary);
}

[data-widget] .dropdown.toolbar__control--more .dropdown__btn {
    background-color: transparent;
    border: none;
}

[data-widget] .toolbar__item.active,
[data-widget] .dropdown.toolbar__control .dropdown__btn.focused {
    background-color: var(--bg-accent-secondary);
    color: var(--clr-primary);
}

[data-widget] .toolbar__item:hover,
[data-widget] .dropdown.toolbar__control .dropdown__btn:hover {
    background-color: var(--bg-accent-tertiary);
}

[data-widget] .toolbar__item.dropdown__btn:not(.no-caret)::after {
    --_icon-spacing: .5em;
    --_icon-spacing-lg: 2em;
    --_icon-spacing-xl: calc(var(--_icon-spacing-lg) * 2);
    content: "\f107";
    font-weight: 400;
    font-size: .75em;
    color: var(--clr-secondary);
    margin-left: var(--_base-icon-spacing);
    transform: translateY(calc(var(--_font-offset) * -1));
}

[data-widget] .toolbar__item[aria-expanded="true"].dropdown__btn::after {
    transform: translateY(var(--_font-offset, 0));
}

[data-widget] .toolbar__item.dropdown__btn.icon-spacing__lg::after {
    margin-left: var(--_icon-spacing-lg);
}

[data-widget] .toolbar__item.dropdown__btn.icon-spacing__xl::after {
    margin-left: var(--_icon-spacing-xl);
}

#board-stage:not(.has-multi) [data-widget].is-selected .toolbar {
    display: flex;
}

.dropdown__portal .dropdown__menu {
    --_dropdown-menu-bg: var(--bg-primary);
    --_option-padding-block: .65rem;
    --_option-padding-inline: var(--btn-padding-inline);
    --_option-padding: var(--_option-padding-block) var(--_option-padding-inline);
    scrollbar-color: var(--clr-secondary) var(--_dropdown-menu-bg);
}

.dropdown__portal:not(.mobile) .dropdown__menu {
    background-color: var(--_dropdown-menu-bg);
    border: unset;
}

.dropdown__portal[data-origin="board-options"] .dropdown__menu > .dropdown__option:not([aria-selected="true"], [aria-disabled="true"], [data-dropdown-heading], [data-dropdown-nav]) {
    color: var(--clr-primary);
}

.dropdown__portal[data-origin="board-options"] .dropdown__menu > .dropdown__option[data-dropdown-heading],
.dropdown__portal[data-origin="board-options"] .dropdown__menu > .dropdown__option[data-dropdown-nav] {
    color: var(--clr-secondary);
}

.dropdown__portal[data-origin="board-options"] .dropdown__menu > .dropdown__option[aria-disabled="true"] {
    color: var(--clr-muted);
}

.dropdown__portal[data-origin="board-options"]:not(.mobile) .dropdown__menu {
    max-height: 32.5rem;
    padding-block: calc((var(--_option-padding-inline) / 2) - (.65rem / 2));
    transform: translateX(calc(var(--fullscreen-spacing-tight) * -1));
}

.dropdown__portal[data-origin="board-options"]:not(.mobile) .dropdown__option[data-dropdown-nav] {
    border-bottom: none;
}

.dropdown__portal:not(.mobile, [data-origin="board-options"]) {
    margin-top: calc(var(--toolbar-padding) / 2);
}

.dropdown__portal[data-origin="board-options"]:not(.mobile) .dropdown__menu .dropdown__option {
    padding: var(--_option-padding);
}

.dropdown__portal[data-origin="board-options"]:not(.mobile, .no-default) .dropdown__menu > .dropdown__option[aria-selected="true"] {
    color: var(--clr-secondary);
    pointer-events: none;
}

.dropdown__portal[data-menu-view="move-board-category"]:not(.mobile) .dropdown__menu {
    width: max-content;
    min-width: min(10rem, calc(100vw - 2rem));
    max-width: min(12.5rem, calc(100vw - 2rem));
}

[data-widget] .toolbar__items > .toolbar__slot--mobile-actions {
    display: none;
}

@media (max-width: 54.999em) {
    [data-widget] .toolbar__items > .toolbar__slot--inline-toggle,
    [data-widget] .toolbar__items > .toolbar__slot--secondary-select {
        display: none;
    }

    [data-widget] .toolbar__items > .toolbar__slot--mobile-actions {
        display: flex;
    }
}

/* =================================================================================================
                                        6. Marquee (Selection Box)
================================================================================================= */

.marquee {
    position: absolute;
    inset: 0 auto auto 0;
    border: var(--bw-200) solid var(--clr-accent-primary);
    background: color-mix(in srgb, var(--clr-accent-primary) 15%, transparent);
    pointer-events: none;
    z-index: 9999;
}

/* =================================================================================================
                                        7. Resize Handles
================================================================================================= */

[data-widget] .resize-handles,
#board-stage .group-resize {
    --_handle-size: 12px;
    --_handle-offset: calc(var(--_handle-size) / 2 * -1);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

[data-widget]:not(.is-selected) .resize-handles,
#board-stage.has-multi [data-widget].is-selected .resize-handles {
    display: none;
}

[data-widget].is-selected .resize-handles {
    border: var(--bw-200) dashed var(--clr-accent-primary);
}

[data-widget] .resize-handles .handle,
#board-stage .group-resize .handle {
    position: absolute;
    width: var(--_handle-size);
    height: var(--_handle-size);
    background: var(--clr-accent-primary);
    border-radius: 100vmax;
    box-shadow: 0 0 0 2px var(--bg-inverse);
    pointer-events: auto;
    z-index: 1;
}

[data-widget] .resize-handles .handle.nw,
#board-stage .group-resize .handle.nw {
    left: var(--_handle-offset);
    top: var(--_handle-offset);
    cursor: nwse-resize;
}

[data-widget] .resize-handles .handle.ne,
#board-stage .group-resize .handle.ne {
    right: var(--_handle-offset);
    top: var(--_handle-offset);
    cursor: nesw-resize;
}

[data-widget] .resize-handles .handle.sw,
#board-stage .group-resize .handle.sw {
    left: var(--_handle-offset);
    bottom: var(--_handle-offset);
    cursor: nesw-resize;
}

[data-widget] .resize-handles .handle.se,
#board-stage .group-resize .handle.se {
    right: var(--_handle-offset);
    bottom: var(--_handle-offset);
    cursor: nwse-resize;
}

#board-stage .group-resize {
    position: absolute;
    border: var(--bw-200) dashed var(--clr-accent-primary);
    pointer-events: auto;
    cursor: grab;
    z-index: 9999;
}

/* =================================================================================================
                                            8. Widgets
================================================================================================= */

/* 8.1 Text Box */
.text-box {
    --_box-width: 740px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: calc(var(--_box-width) / 2.5);
    min-height: calc(var(--_box-width) / 5);
    width: var(--_box-width);
    height: calc(var(--_box-width) / 2);
    border-radius: var(--br-600);
    overflow: visible;
}

.text-box__editor {
    flex: 1 1 auto;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background-color: var(--bg-inverse);
    border-radius: inherit;
    overflow: hidden;
}

.ql-editor {
    --_text-color: var(--bg-primary);
    --_text-box-padding: clamp(var(--padding-400-min), 8cqi, 2.5rem);
    flex: 1 1 auto;
    color: var(--_text-color);
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-400);
    line-height: var(--lh-400);
    max-height: 100%;
    padding: var(--_text-box-padding);
    outline: none;
    overflow: auto;
    scrollbar-gutter: stable;
    user-select: none;
    -webkit-user-select: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    -webkit-user-modify: read-write-plaintext-only;
}

.ql-editor[contenteditable="true"] {
    cursor: auto;
    outline: none;
    caret-color: currentColor;
    user-select: text;
    -webkit-user-select: text;
}

/* .ql-editor.ql-blank::before {
    content: attr(data-placeholder);
    position: absolute;
    font-family: var(--ph-font, inherit);
    font-size: var(--ph-size, inherit);
    color: var(--ph-color, currentColor);
    font-style: italic;
    white-space: pre-wrap;
    pointer-events: none;
} */

.ql-editor a {
    color: var(--clr-link);
}

.ql-editor[contenteditable="false"] a {
    cursor: inherit;
}

.ql-editor [class*="ql-highlight-tone-"] {
    padding: .02em .14em;
    border-radius: .2em;
    text-decoration-color: currentColor;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.ql-editor [class*="ql-highlight-tone-"] a {
    color: inherit;
}

.ql-editor .ql-highlight-tone-blue {
    color: #3558c8;
    background-color: #dfe9ff;
}

.ql-editor .ql-highlight-tone-purple {
    color: #7241cf;
    background-color: #eee4ff;
}

.ql-editor .ql-highlight-tone-pink {
    color: #bf4e87;
    background-color: #ffe0ef;
}

.ql-editor .ql-highlight-tone-mint {
    color: #2f8f67;
    background-color: #def8ea;
}

.ql-editor .ql-highlight-tone-coral {
    color: #cf6a43;
    background-color: #ffe7dc;
}

body[data-board-mode="public"] .text-box:not(.is-editing) .ql-editor {
    pointer-events: auto;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body[data-board-mode="public"] [data-public-board-viewport][data-public-board-pannable="true"] .text-box:not(.is-editing) .ql-editor {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

body[data-board-mode="public"] [data-public-board-viewport].is-panning .text-box:not(.is-editing) .ql-editor {
    cursor: grabbing;
}

body[data-board-mode="public"] .text-box:not(.is-editing) .ql-editor a {
    pointer-events: auto;
    cursor: pointer;
}

body[data-board-locked="true"] .text-box.is-locked-readonly .ql-editor {
    pointer-events: auto;
    cursor: text;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    user-select: text;
    -webkit-user-select: text;
}

body[data-board-locked="true"] .text-box.is-locked-readonly .ql-editor a {
    pointer-events: auto;
    cursor: pointer;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"] #board-stage .text-box.is-locked-readonly .ql-editor {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"] #board-stage .text-box.is-locked-readonly .ql-editor a[href],
body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport][data-locked-board-pannable="true"] #board-stage .text-box.is-locked-readonly .ql-editor a[href] * {
    cursor: pointer;
}

body[data-board-mode="editor"][data-board-locked="true"] [data-editor-board-viewport].is-panning #board-stage .text-box.is-locked-readonly .ql-editor {
    cursor: grabbing;
}

strong.ql-font-oxanium {
    -webkit-text-stroke: 1px var(--bg-secondary);
    letter-spacing: var(--ls-500);
}

/* 8.2 Clock */
.clock {
    --_clock-size: 12.5rem;
    --_num-fs: var(--fs-300);
    --_num-lh: 1.1;
    --_num-spacing: 4cqmin;
    --_num-reserved-height: calc(var(--_num-fs) * var(--_num-lh) * .5 + var(--_num-spacing));
    --_dot-size: 5.8cqmin;
    --_indicator-base-height: calc(50% - var(--_num-spacing) - var(--_num-reserved-height));
    --_minute-height-retraction: 5.5cqmin;
    --_hour-height-retraction: calc(var(--_minute-height-retraction) * 2.5);
    --_tick-radius: 50%;
    --_tick-length: 1.8cqmin;
    --_tick-width: .55cqmin;
    container-type: size;
    min-inline-size: var(--_clock-size);
    min-block-size: var(--_clock-size);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_clock-size);
    height: var(--_clock-size);
    border-radius: 100vmax;
    background-color: var(--bg-inverse);
    user-select: none;
}

.clock__ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.clock__ticks > span {
    position: absolute;
    left: 50%;
    bottom: 50%;
    height: var(--_tick-radius);
    width: 0;
    transform-origin: 50% 100%;
    transform: translateX(-50%) rotate(calc(var(--_tick-index) * 6deg));
}

.clock__ticks > span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--_tick-width);
    height: var(--_tick-length);
    background: var(--bg-primary);
    border-bottom-left-radius: 100vmax;
    border-bottom-right-radius: 100vmax;
}

.clock__ticks > span:nth-child(5n+1)::after {
    height: 3.15cqmin;
}

.clock__number-wrapper {
    position: absolute;
    inset: var(--_num-spacing);
    transform: rotate(calc(var(--_number-index) * (360deg / 12)));
    text-align: center;
    pointer-events: none;
}

[data-bordered-widget] .clock__number-wrapper {
    inset: calc(var(--_num-spacing) + var(--_widget-border-width));
}

.clock__number {
    display: inline-block;
    color: var(--bg-primary);
    font-size: 7.6cqmin;
    font-weight: var(--fw-600);
    transform: rotate(calc(var(--_number-index) * (-360deg / 12)));
}

.clock__indicator {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    isolation: isolate;
    pointer-events: none;
}

.clock__indicator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--_dot-size);
    height: var(--_dot-size);
    background-color: var(--bg-primary);
    border: 1.25cqmin solid var(--clr-error-primary);
    border-radius: 100vmax;
    z-index: 2;
}

[data-bordered-widget] .clock__ticks,
[data-bordered-widget] .clock__indicator {
    inset: var(--_widget-border-width);
}

.clock__indicator .hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    border-top-left-radius: 100vmax;
    border-top-right-radius: 100vmax;
    transform-origin: 50% 100%;
}

.hand.second {
    height: calc(50% - (calc(var(--_num-spacing) * 1.5)));
    width: 1.05cqmin;
    background-color: var(--clr-error-primary);
}

.hand.minute {
    height: calc(var(--_indicator-base-height) - var(--_minute-height-retraction));
    width: 1.6cqmin;
    background-color: var(--bg-primary);
    transform: translateX(-50%) rotate(0deg);
}

.hand.hour {
    height: calc(var(--_indicator-base-height) - var(--_hour-height-retraction));
    width: 2.7cqmin;
    background-color: var(--bg-primary);
    transform: translateX(-50%) rotate(0deg);
}

.hand.second,
.hand.minute,
.hand.hour {
    transition: none;
}

/* 8.3 Timer */
.timer {
    --_timer-size: 12.5rem;
    --_ring-color: var(--clr-accent-primary);
    --_progress-percentage: 0;
    container-type: size;
    min-inline-size: var(--_timer-size);
    min-block-size: var(--_timer-size);
    position: relative;
    width: var(--_timer-size);
    height: var(--_timer-size);
    background-color: var(--bg-inverse);
    border-radius: 100vmax;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timer .timer__ring {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    user-select: none;
    pointer-events: none;
}

.timer__ring .track,
.timer__ring .progress {
    fill: none;
}

.timer__ring .track {
    stroke: color-mix(in lab, var(--_ring-color) 25%, transparent);
}

.timer__ring .progress {
    stroke: var(--_ring-color);
    stroke-dasharray: 100;
    stroke-dashoffset: var(--_progress-percentage);
    transition: stroke .2s linear, stroke-dashoffset .15s linear;
}

.timer[data-urgency] .timer__ring .progress {
    stroke: var(--clr-error-primary);
}

.timer__display {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding-top: .25rem; */
}

.timer__display span {
    font-family: 'Oxanium', sans-serif;
    background-color: transparent;
    color: var(--bg-primary);
    font-size: 20cqmin;
    font-weight: var(--fw-800);
    line-height: normal;
    letter-spacing: var(--ls-500);
    -webkit-text-stroke: 1px var(--bg-primary);
}

.timer .dropdown.is-disabled .dropdown__btn {
    color: var(--clr-secondary);
    pointer-events: none;
}

/* =================================================================================================
                                            9. Components
================================================================================================= */

/* 9.1 Board status */
.board-status {
    display: flex;
    align-items: center;
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    color: var(--clr-primary);
    padding-top: var(--fullscreen-spacing-tight);
    margin-inline: clamp(.25rem, 1.15vw, var(--fullscreen-spacing-tight));
    line-height: var(--lh-300);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.board-status.hidden {
    display: none;
}

.board-status + .board-status {
    margin-left: var(--fullscreen-spacing-tight);
}

/* 9.2 Toast */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: min(clamp(16rem, 100vw - 2rem, 24rem), calc(100vw - 2rem));
    color: var(--clr-primary);
    background-color: var(--bg-secondary-translucent);
    border: var(--bw-400) solid var(--bg-accent-secondary);
    border-radius: 100vmax;
    padding: .75rem 1rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    transform: translate(-50%, 1rem);
    opacity: 0;
    pointer-events: none;
    z-index: 120;
    transition: opacity var(--ts-semi-fast) ease, transform var(--ts-semi-fast) ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.toast__message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
}

.toast__action {
    color: var(--clr-primary);
    background-color: var(--clr-btn);
    font-size: var(--fs-200);
    font-weight: var(--fw-600);
    line-height: 1;
    white-space: nowrap;
    padding: .55rem .9rem;
    border-radius: 100vmax;
    cursor: pointer;
}

.toast__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-accent-primary);
    font-size: var(--fs-300);
    line-height: 1;
}

.toast__action:focus {
    outline: var(--bw-400) solid var(--clr-accent-primary);
    outline-offset: var(--bw-400);
}

.toast--status {
    gap: 0;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: .75rem 1.1rem;
}

.toast--status .toast__message {
    flex: 0 1 auto;
    min-width: 0;
}

.toast--error {
    background-color: var(--bg-error);
    border-color: var(--bg-error);
}

.toast--error .toast__icon {
    color: var(--clr-error-primary);
}

.toast--status.is-visible {
    pointer-events: none;
}

body.fullscreen .toast {
    bottom: 8.25rem;
}

body.fullscreen:not(:has([data-fullscreen-footer])) .toast,
body.fullscreen[data-board-footer-hidden="true"] .toast {
    bottom: calc(var(--safe-bottom) + var(--fullscreen-spacing-tight));
}

/* 9.3 Mini editor */
.mini-editor {
    --_editor-gap: var(--toolbar-padding);
    position: absolute;
    display: flex;
    max-width: calc(100% - 2rem);
    gap: var(--toolbar-item-spacing);
    color: var(--clr-primary);
    background-color: var(--bg-primary);
    padding: var(--toolbar-padding);
    border-radius: var(--br-400);
    line-height: 1;
    cursor: default;
    box-shadow: var(--popover-shadow);
    z-index: 5;
}

.mini-editor__link {
    width: 13.5rem;
    min-width: 0;
}

.mini-editor .mini-editor__input,
.mini-editor .mini-editor__value {
    width: 100%;
}

.mini-editor .mini-editor__input {
    padding: var(--toolbar-padding) calc(var(--toolbar-padding) * 1.5);
    font-weight: var(--fw-500);
    background-color: var(--bg-accent-secondary);
    border-color: var(--bg-accent-tertiary);
}

.mini-editor .mini-editor__input[aria-invalid="true"] {
    outline: var(--bw-400) solid var(--clr-error-primary);
    outline-offset: calc(var(--bw-400) * -1);
}

.mini-editor .mini-editor__value {
    display: block;
    align-items: center;
    max-width: max-content;
    padding: var(--toolbar-padding) calc(var(--toolbar-padding) * 1.5);
    font-weight: var(--fw-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-editor a.mini-editor__value {
    color: var(--clr-secondary);
    text-decoration: none;
    padding: calc(var(--toolbar-padding) + var(--bw-400) + (var(--outline-offset) * 2)) var(--toolbar-padding);
}

.mini-editor .mini-editor__buttons {
    display: flex;
    gap: var(--toolbar-item-spacing);
}

/* =================================================================================================
                                            10. Utilities
================================================================================================= */

.fullscreen__heading.is-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}