style.css

/*  Design tokens
    Neutrals follow the platform (light/dark via html[data-theme], set by supporter.js);
    the four phase colours are user-configurable and set by theme.js.  */
:root {
    --work: #ea5454;
    --rest: #5490ea;
    --positive: #17a2b8;
    --only-rest: #a26ae5;

    --font-ui: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;

    --canvas: #fefefe;
    --ink: #212529;
    --ink-2: #6c757d;
    --ink-3: #a1a1a6;
    --hairline: #e3e3e8;
    --fill: #f2f2f5;
    --fill-2: #e6e6eb;
    --popover: #ffffff;
    --popover-shadow: 0 10px 30px rgb(0 0 0 / .12), 0 0 0 .5px rgb(0 0 0 / .14);

    color-scheme: light;
    accent-color: var(--rest);
}

:root[data-theme="dark"] {
    --canvas: #191919;
    --ink: #f2f2f4;
    --ink-2: #6c757d;
    --ink-3: #6b6b70;
    --hairline: #38383c;
    --fill: #2c2c2e;
    --fill-2: #3a3a3c;
    --popover: #2c2c2e;
    --popover-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 0 .5px rgb(255 255 255 / .14);

    color-scheme: dark;
}

html, body {
    font-family: var(--font-ui);
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    background-color: #00000000;
    overflow: hidden;
    align-items: center;
    /* center in v/h */
    -webkit-app-region: drag;
    /* let the app draggable */
}

a {
    display: inline-block;
    border: 4px solid transparent;
    background-clip: padding-box;
}

label {
    display: inline-block;
    vertical-align: middle;
    margin: 0px 0px 1px 0px;
}

input, .focuser, .dropdown-default {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
    padding: 1px 0px;
    outline: none;
    border-width: 0;
}

input, .focuser, .dropdown, .settings-sidebar-block-highlighted, .dropdown-item:hover, .dropdown-item:focus, #notes {
    transition: all .08s;
}

input {
    width: 192px;
    background-color: transparent;
}

input:focus, input:active {
    font-weight: bolder;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="time"] {
    width: fit-content !important;
}

input[type="text"], input[type="number"], input[type="password"] {
    border-color: transparent;
    border-bottom-width: 3px;
    border-radius: 0%;
    margin: 1px;
}

input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus {
    border-bottom-width: 3px;
    border-bottom-color: color-mix(in srgb, var(--ink) 20%, transparent);
}

input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover {
    border-bottom-width: 3px;
    border-bottom-color: color-mix(in srgb, var(--ink) 13%, transparent);
}

input[type="range"] {
    -webkit-appearance: none;
    /* remove default style */
    height: 4px;
    width: 400px;
    padding: 0;
    border: none;
    background: color-mix(in srgb, var(--ink) 20%, transparent);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* remove default style */
    cursor: default;
    top: 0;
    height: 20px;
    width: 20px;
    background: var(--rest);
    border-radius: 15px;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    /* remove default style */
    cursor: pointer;
    border: none;
    width: 24px;
    height: 24px;
    margin: -4px 0px 2px 2px;
    position: relative;
}

input[type="checkbox"]::after {
    font-family: "iconfont" !important;
    font-style: normal;
    font-size: 24px;
    content: '\e753';
    color: var(--rest);
    display: block;
    position: absolute;
    margin-top: -10%;
    margin-left: 9%;
}

input[type="checkbox"]:checked::after {
    content: '\e7b9';
}

input::-webkit-input-placeholder {
    color: var(--ink-2);
    transition: color .5s;
}

input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--ink-2) 76%, transparent);
    transition: color .5s;
}

select {
    height: 40px;
    margin-top: 5px;
}

select > option:focus {
    background-color: var(--rest);
    color: var(--canvas);
}

li {
    line-height: 200%;
}

li input[type="checkbox"]::after {
    margin-top: -27%;
    margin-left: 8%;
}

li input:nth-last-child(4)::after {
    margin-left: 12%;
}

::-webkit-scrollbar-track {
    background-color: var(--canvas);
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 2px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--ink-2) 40%, transparent);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--rest) 56%, transparent);
}

.iconfont {
    font-size: inherit;
}

.reset-icon {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    font-style: normal;
    vertical-align: 0em;
}

.display-1 {
    font-weight: lighter;
}

.lead {
    font-weight: inherit;
}

.underlined {
    text-decoration: underline;
}

.work, .work::-webkit-input-placeholder, .work:hover {
    color: var(--work);
}

.work:focus::-webkit-input-placeholder, .work:hover::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--work) 76%, transparent);
}

.rest, .rest::-webkit-input-placeholder, .rest:hover {
    color: var(--rest);
}

.rest:focus::-webkit-input-placeholder, .rest:hover::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--rest) 76%, transparent);
}

.onlyRest, .onlyRest::-webkit-input-placeholder, .onlyRest:hover {
    color: var(--only-rest);
}

.onlyRest:focus::-webkit-input-placeholder, .onlyRest:hover::-webkit-input-placeholder {
    color: color-mix(in srgb, var(--only-rest) 76%, transparent);
}

#rest-time-onlyrest {
    min-width: 0;
}

.text-grey {
    color: #6c757d;
}

.positive, .positive::-webkit-input-placeholder, .positive:hover {
    color: var(--positive);
}

.positive:focus::-webkit-input-placeholder, .positive:hover::-webkit-input-placeholder {
    color: var(--positive);
}

.extreme-small {
    font-size: x-small;
    line-break: loose;
    line-height: 100%;
    margin: 5px;
}

.xx-small {
    font-size: xx-small;
    line-break: loose;
    line-height: 100%;
}

.display-1 {
    font-size: 7.5rem !important;
    font-weight: 200;
}

.controller-msg {
    padding: 0;
    margin: 0 3px 0 3px;
    transform: translateY(-2px);
}

.positive-reset-label {
    font-size: 0.72rem;
    margin: 0 3px 0 3px;
    transform: translateY(-2px);
}

.positive-reset-button {
    display: inline;
}

.positive-reset-button .reset-icon {
    width: 0.9em;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1;
    display: inline-block;
    margin-left: 2px;
    text-align: center;
    transform: translateY(-3px);
    vertical-align: baseline;
}

.controller-msg-big {
    padding: 0;
    margin: 0 3px 0 3px;
    transform: translateY(-3px);
}

.controller-msg-spacing {
    margin-left: 8px;
    margin-right: 10px;
    transform: translateY(-3px) !important;
    display: inline-block;
}

.hotkeyset {
    color: var(--ink-2);
    width: 30px;
    height: 20px;
    text-align: center;
}

.dropdown a {
    text-decoration: none;
}

.dropdown-controller {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    -webkit-appearance: none;
    background-color: color-mix(in srgb, var(--ink-2) 56%, transparent);
    border-radius: 0.25rem;
    padding: 0px;
    vertical-align: middle;
    line-height: inherit;
    font-weight: bolder;
}

.dropdown-menu {
    padding: 5px;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--popover-shadow);
    font-size: 12px;
    margin-top: 9px;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

.dropdown-item {
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.time-bar-focus {
    left: auto !important;
    right: auto !important;
    text-align: center;
}

.header-resize {
    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;
    -webkit-app-region: no-drag;
}

.bottom-resize {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    -webkit-app-region: no-drag;
}

.left-resize, .right-resize {
    position: absolute;
    top: 0;
    height: 100%;
    width: 5px;
    -webkit-app-region: no-drag;
}

.left-resize {
    left: 0;
}

.right-resize {
    right: 0;
}

.settings-msg {
    font-size: x-small;
    color: var(--ink-2) !important;
    line-height: 1.5;
    padding-top: 5px;
}

.settings-coupling {
    font-size: x-small;
    color: var(--ink-2) !important;
    line-height: 1.45;
    margin: 4px 0 0;
}

#settings-container .settings-collapse-toggle {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.locker-field-label {
    display: block;
    font-size: small;
    margin: 10px 0 2px;
}

.locker-submit-row {
    margin: 12px 0 8px;
}

#settings-container input[readonly].hotkeyset {
    opacity: 0.65;
    cursor: not-allowed;
}

#settings-container .dropdown-toggle.disabled {
    pointer-events: none;
    opacity: 0.45;
}

.settings-tip-toggle {
    width: 18px;
    height: 18px;
    margin: 0 0 2px 6px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink-2) 33%, transparent);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

.settings-tip-toggle:hover, .settings-tip-toggle:focus {
    color: var(--rest);
    border-color: var(--rest);
    outline: none;
}

.settings-tip-toggle[aria-expanded="true"] {
    color: var(--rest);
    border-color: var(--rest);
    background: color-mix(in srgb, var(--rest) 7%, transparent);
}

.settings-tip-content.settings-tip-collapsed {
    display: none;
}

.settings-check {
    margin: -4px 6px 2px 2px !important;
}

.switch-slide {
    margin: 0 2px 1px 0;
}

.switch-slide-label {
    display: block;
    width: 50px;
    height: 24px;
    background: #ccc;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.switch-slide-label:after {
    content: '';
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    position: absolute;
    left: 2px;
    top: 1.5px;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}

.switch-slide input:checked + label {
    background: var(--rest);
    transition: 0.3s ease;
}

.switch-slide input:checked + label:after {
    left: 27px;
}

.switch-slide input:disabled + label {
    opacity: 0.45;
    cursor: not-allowed;
}

#controller .dropdown-toggle::before, #controller .dropdown-toggle::after {
    color: var(--rest);
}

#set {
    transform: translate(5px, -8px);
}

#dropdown-tasks {
    margin-bottom: 10px;
}

.field-block {
    margin-bottom: 12px;
}

.field-label {
    display: block;
    width: 192px;
    font-size: 11px;
    line-height: 1.3;
    margin: 0 0 2px 1px;
    -webkit-user-select: none;
}

.field-parsed {
    margin-left: 6px;
    font-weight: 500;
    opacity: 0.8;
}

.time-input-cluster {
    position: relative;
    display: inline-block;
    width: 192px;
    vertical-align: middle;
}

.time-input-cluster.only-rest {
    width: 225px;
}

.time-input-cluster input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.field-unit {
    position: absolute;
    top: 50%;
    transform: translateY(-40%);
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    -webkit-user-select: none;
}

.field-unit.is-hidden {
    display: none;
}

.home-coupling {
    display: block;
    width: 192px;
    font-size: 11px;
    line-height: 1.45;
    margin: 4px 0 0 1px;
    color: var(--ink-2);
    -webkit-user-select: none;
}

#set input[readonly],
#set-onlyrest input[readonly] {
    opacity: 0.65;
    cursor: not-allowed;
}

#bottom-btn:disabled,
#bottom-btn.btn-onlyRest:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#start-invalid {
    margin-top: 2px;
}

#set .dropdown-menu {
    margin-top: 6px;
    transform: translateY(50px) !important;
}

#set #dropdown-menu-extend {
    transform: translate(-235px, -80px) !important;
    z-index: 1000;
    width: 220px;
}

#set #dropdown-menu-extend input {
    width: 200px;
    font-size: 11.5px;
}

#dropdown-button-extend {
    color: color-mix(in srgb, var(--ink-2) 56%, transparent);
}

#dropdown-menu-button, #dropdown-menu-menu {
    width: 256px;
    text-align: left;
}

#dropdown-menu-menu {
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 0 !important;
    max-height: 200px;
    overflow: auto;
}

#dropdown-menu-button #expand-right {
    text-align: right;
    display: inline-block;
    position: absolute;
    right: 7px;
}

#dropdown-menu-button #expand-left {
    text-align: left;
    display: inline-block;
    position: absolute;
    left: 2px;
}

#dropdown-menu-button::after {
    display: none;
}

#edit-defaults {
    width: 40px;
    font-size: xx-small;
}

#predefined-tasks-edit, #dropdown-menu-menu .dropdown-item {
    border-right: 4px solid transparent;
}

#predefined-tasks-edit {
    margin-bottom: 8px;
}

#focus-work-set::after, #focus-work-set:checked::after {
    color: var(--work);
}

#focus-rest-set-onlyrest::after, #focus-rest-set-onlyrest:checked::after,
#focus-continueloop-set-onlyrest::after, #focus-continueloop-set-onlyrest:checked::after {
    color: var(--only-rest);
}

#timer {
    line-height: 90%;
    transform: translateY(-10px);
}

#timer-error {
    line-height: 150%;
}

#only-one {
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

#main {
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: text;
}

html:has(body.settings-page),
body.settings-page {
    -webkit-app-region: no-drag;
}

#settings-drag-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 1;
    -webkit-app-region: drag;
}

/* the close button sits inside the drag strip; it has to stack above it or it can't be clicked */
.settings-page #controller {
    z-index: 5;
}

#settings-header {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 12px 20px 10px;
    border-bottom: color-mix(in srgb, var(--ink) 13%, transparent) solid 1px;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
}

#settings-title {
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    padding-right: 40px;
}

#settings-section-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 10px;
}

.settings-section-nav-item {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    -webkit-app-region: no-drag;
}

.settings-section-nav-item:hover {
    color: var(--rest);
}

.settings-section-nav-item:focus {
    outline: none;
}

.settings-section-nav-item.is-current {
    color: var(--rest);
}

.settings-back-to-top {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 4;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    visibility: hidden;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
}

body.settings-scrolled .settings-back-to-top {
    visibility: visible;
}

.settings-back-to-top:hover,
.settings-back-to-top:focus {
    color: var(--rest);
    outline: none;
}

#predefined-tasks-sidebar {
    border-top: color-mix(in srgb, var(--ink) 13%, transparent) solid 1px;
}

#settings-container {
    -webkit-app-region: no-drag;
    -webkit-user-select: text;
    position: absolute;
    display: block;
    top: 136px;
    left: 18px;
    right: 18px;
    width: auto;
    margin: 0;
    padding: 18px 2px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 484px;
    word-break: normal;
    font-size: 14px;
}

#settings-container .settings-section-anchor {
    margin: 10px 0 2px;
    padding: 4px 0 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
}

#settings-container .settings-section-anchor:first-child {
    margin-top: 0;
}

#settings-container .settings-section-heading {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--rest);
}

#settings-container::-webkit-scrollbar-track {
    margin-top: 3px;
    margin-bottom: 10px;
}

#settings-container p {
    margin-bottom: 0;
}

#settings-container a {
    border: 0;
}

#settings-container input[type="text"], #settings-container input[type="number"], #settings-container input[type="password"], #passcode-rechecker, #extend-form input {
    border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

#settings-container input[type="text"]:hover, #settings-container input[type="number"]:hover, #settings-container input[type="password"]:hover, #passcode-rechecker:hover, #extend-form input:hover {
    border-bottom-color: color-mix(in srgb, var(--ink) 21%, transparent);
}

#settings-container input[type="text"]:focus, #settings-container input[type="number"]:focus, #settings-container input[type="password"]:focus, #passcode-rechecker:focus, #extend-form input:focus {
    border-bottom-color: color-mix(in srgb, var(--ink) 15%, transparent);
}

#settings-container ul {
    padding-inline-start: 1.5rem;
    padding-inline-end: 1rem;
}

#settings-container .personalization-notification {
    width: 150px;
    margin-bottom: 6px;
}

#settings-container .hotkey-set-input {
    width: 125px;
    margin-bottom: 6px;
}

#settings-container .webdav-sync-form {
    margin-top: 6px;
    margin-bottom: 8px;
}

#settings-container .webdav-sync-form-row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 6px;
}

#settings-container .webdav-sync-form-row:last-child {
    margin-bottom: 0;
}

#settings-container .webdav-sync-form-label {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding-right: 10px;
}

#settings-container .webdav-sync-form label {
    margin-bottom: 0;
}

#settings-container .webdav-sync-form input {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
    text-overflow: ellipsis;
}

#settings-container .webdav-sync-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    gap: 4px 8px;
}

#settings-container .webdav-sync-action-sep {
    opacity: 0.4;
}

#settings-container .switch-slide input,
#settings-container .switch-slide input::after {
    display: none !important;
}

#settings-container .webdav-sync-toggle-row > .text-left > label {
    font-size: inherit;
    color: inherit;
}

#settings-container .dropdown-reserved-button {
    font-size: inherit !important;
}

#settings-container .dropdown .btn, #dropdown-menu-button {
    border-color: transparent;
    border-radius: 0;
    border-bottom-width: 3px;
    padding: .375rem .375rem;
    font-size: .875rem;
    color: var(--ink-2);
    transition: all .08s;
    border-bottom-color: color-mix(in srgb, var(--ink) 8%, transparent);
}

#settings-container .dropdown .btn:hover, #dropdown-menu-button:hover {
    background-color: transparent;
    color: color-mix(in srgb, var(--ink-2) 56%, transparent);
    font-weight: bolder;
    border-bottom-color: color-mix(in srgb, var(--ink) 21%, transparent);
}

#settings-container .dropdown .btn:focus, #settings-container .dropdown .btn[aria-expanded=true], #dropdown-menu-button:focus, #dropdown-menu-button[aria-expanded=true] {
    background-color: transparent;
    color: color-mix(in srgb, var(--ink-2) 56%, transparent);
    font-weight: bolder;
    border-bottom-color: color-mix(in srgb, var(--ink) 21%, transparent);
    outline: none;
}

#settings-container .dropdown .btn:after {
    vertical-align: 0;
}

#settings-container .card-body {
    padding: 1.8rem .65rem 0 .75rem;
    margin-top: 3px;
}

#settings-container .btn {
    border: 1px solid #007bff;
}

#settings-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#settings-helper {
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: text;
    position: absolute;
    bottom: 25px;
    right: 14px;
}

#other-things-sidebar {
    height: 61px;
}

#controller, #time-bar, #time-bar-macos, #logo-bar {
    position: absolute;
    top: 8px;
    font-size: 18px;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

#controller, #time-bar-macos {
    right: 10px;
}

#time-bar {
    left: 10px;
    padding: 2px;
    top: 10px;
}

#logo-bar {
    position: absolute;
    top: 4px;
    left: 10px;
    display: none;
    background-clip: padding-box;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

#logo-bar .dropdown-menu {
    margin-top: 6px;
    transform: translate(4px, 36px) !important;
    padding: .36em 0;
}

#logo-bar .dropdown-menu .extreme-small {
    margin: 0;
}

#work-rest, #now-timing {
    -webkit-user-select: none;
}

#all-sum {
    position: absolute;
    bottom: 60px;
    line-height: 1.6;
    z-index: -9999;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

#bottom-btn {
    height: 40px;
    width: 256px;
    position: absolute;
    bottom: 18px;
    z-index: 999;
    -webkit-app-region: no-drag;
    /* let it clickable */
}

#notes {
    padding: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 3px #ffffff00;
    display: inline-block;
    width: 300px;
    word-wrap: break-word;
    line-height: 180%;
    vertical-align: middle;
}

#notes:hover {
    border-bottom: solid 3px color-mix(in srgb, var(--ink) 20%, transparent);
}

#notes::-webkit-scrollbar {
    display: none;
}

#about {
    height: 80%;
    width: 90%;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: text;
}

#switch a {
    font-size: 24px;
    padding: 6px;
    z-index: 9999;
}

#bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2.5%;
    background-color: color-mix(in srgb, var(--work) 60%, transparent);
    z-index: -9999;
}

#window-hide {
    margin-bottom: 3px;
}

#dropdown-more {
    margin-bottom: 1px;
}

#dropdown-extend {
    margin-left: 14px;
    margin-bottom: 2px;
}

#exit {
    margin-bottom: 0.5px;
}

#passcode-rechecker {
    text-align: center;
}

#personalization input[type="text"] {
    width: 216px;
}

#personalization label {
    font-size: smaller;
}

#fullscreen-custom-dialog {
    line-height: 90%;
    transform: translateY(-8px);
    position: fixed;
    width: 240px;
    border: 0;
    box-shadow: var(--popover-shadow);
    border-radius: 12px;
    background-color: var(--popover);
    line-break: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 18px 15px 18px 15px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
}

#emergency-exit-link {
    position: fixed;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    color: var(--ink-2);
    opacity: .35;
    transition: opacity .16s;
    -webkit-app-region: no-drag;
}

#emergency-exit-link:hover {
    opacity: .9;
    text-decoration: none;
}

#emergency-exit-panel {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    width: 420px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    transform: translateY(-50%);
    padding: 18px 18px 14px 18px;
    border: 0;
    border-radius: 12px;
    box-shadow: var(--popover-shadow);
    background-color: var(--popover);
    z-index: 1000;
    -webkit-app-region: no-drag;
}

#emergency-exit-msg {
    line-height: 1.5;
}

#emergency-exit-target {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 15px;
    letter-spacing: 1px;
    -webkit-user-select: none;
    user-select: none;
}

#emergency-exit-input {
    width: 100%;
    margin-bottom: 8px;
    padding: 6px 8px;
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 15px;
    letter-spacing: 1px;
    border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
    border-radius: 0.25rem;
    background: transparent;
    outline: none;
    resize: none;
}

#emergency-exit-input.is-typo {
    border-color: var(--work);
}

#dialog-buttons {
    z-index: 900;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
}

#floating-bottom-bar {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0%;
    height: 100%;
    background-color: color-mix(in srgb, var(--work) 10%, transparent);
    z-index: -9999;
}

#floating-unhover {
    -webkit-app-region: drag;
    -webkit-user-select: none;
    transition: all .16s;
}

#floating-hover {
    opacity: 0;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    transition: all .16s;
}

#floating-hover:hover {
    opacity: 1;
    background-color: var(--canvas);
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    transition: all .16s;
}

#floating-skipper {
    position: absolute;
    right: 0px;
    bottom: 0px;
    -webkit-app-region: no-drag;
}

#floating-back {
    position: absolute;
    left: 0px;
    bottom: 0px;
    -webkit-app-region: no-drag;
}

#floating-recover {
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-app-region: no-drag;
}

#floating-close {
    position: absolute;
    right: 0px;
    top: 0px;
    -webkit-app-region: no-drag;
}

#floating-stopper {
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    -webkit-app-region: no-drag;
}

#new-feature {
    text-align: left;
    line-height: 2.2;
    transform: translateY(10px);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

#new-feature-title {
    flex: 0 0 auto;
}

#new-feature-content {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 4px;
}

#new-feature-description, #new-feature-description-universal {
    padding-top: 5px;
    padding-bottom: 0;
}

#new-feature-btn-container {
    flex: 0 0 auto;
    transform: translateY(-9px);
}

#top-bar {
    position: absolute;
    right: 50%;
    top: 10%;
    width: 90%;
    transform: translate(50%, -50%);
    text-align: center;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    font-weight: bold;
}

#time-statistics-sub-bar {
    position: absolute;
    right: 50%;
    top: 16%;
    width: 90%;
    transform: translate(50%, -50%);
    text-align: center;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    min-height: 30px;
}

#top-bar a, #index-topbar a {
    color: var(--ink-2) !important;
    line-height: 2;
    font-weight: 500 !important;
    -webkit-app-region: no-drag;
}

#top-bar a.is-current {
    font-weight: 500 !important;
}

#time-statistics-sub-bar a {
    color: var(--ink-2) !important;
    line-height: 2;
    display: inline-block;
    padding: 6px 2px;
    vertical-align: middle;
    min-height: 24px;
    white-space: nowrap;
}

#statistics-no-chart, #statistics-with-chart, #statistics-recap {
    position: absolute;
    text-align: center;
    vertical-align: top;
    top: 19%;
    width: 90%;
    -webkit-app-region: no-drag;
    -webkit-user-select: text;
}

#statistics-recap {
    top: 14%;
}

#statistics-no-chart h1 {
    margin: 12px;
}

#statistics-graph {
    height: 240px;
}

#statistics-back {
    position: absolute;
    bottom: 15px;
    left: 10px;
    font-size: 24px;
    display: inline-block;
    z-index: 9999;
    background-clip: padding-box;
    -webkit-app-region: no-drag;
    /* let it clickable */
    -webkit-user-select: none;
}

.index-page #statistics-back {
    top: 6px;
    bottom: auto;
    font-size: 20px;
}

.reserved-cycle, .dropdown-reserved-button, .dropdown-menu-reserved {
    width: 96px !important;
    font-size: small;
}

.reserved-direct-start {
    margin-left: 5px !important;
    margin-top: 10px !important;
}

.tipsy {
    position: absolute;
    z-index: 100000;
    padding: 0;
    font-size: 11.5px;
    pointer-events: none;
}

.tipsy-arrow {
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    border-color: transparent;
    top: 0;
    left: 25%;
    margin-left: -5px;
    border-bottom-style: solid;
    border-top: 0;
    border-left-color: transparent;
    border-right-color: transparent;
}

.tipsy-arrow-n {
    border-bottom-color: color-mix(in srgb, var(--ink-2) 76%, transparent);
    border-bottom-style: dashed;
    border-top-style: solid;
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -5px;
}

.tipsy-arrow-s {
    border-top-color: color-mix(in srgb, var(--ink-2) 76%, transparent);
    border-bottom-style: dashed;
    border-top-style: solid;
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -5px;
}

.tipsy-arrow {
    display: none;
}

.tipsy-inner {
    max-width: 220px;
    padding: 5px 9px;
    border-radius: 7px;
    background-color: color-mix(in srgb, var(--ink) 90%, transparent);
    color: var(--canvas);
    line-height: 1.4;
    text-align: start;
    box-shadow: 0 4px 14px rgb(0 0 0 / .16);
}

.hotkey-set-label {
    padding-top: 0 !important;
}

/*  RTL: Bootstrap text alignment swap  */
[dir="rtl"] .text-left {
    text-align: right !important;
}
[dir="rtl"] .text-right {
    text-align: left !important;
}

/*  RTL: Absolute-positioned elements  */
[dir="rtl"] #settings-title {
    left: auto;
    right: auto;
    padding-right: 0;
    padding-left: 40px;
}
[dir="rtl"] .settings-back-to-top {
    right: auto;
    left: 12px;
}
[dir="rtl"] #settings-helper {
    right: auto;
    left: 14px;
}
[dir="rtl"] #controller,
[dir="rtl"] #time-bar-macos {
    right: auto;
    left: 10px;
}
[dir="rtl"] #time-bar {
    left: auto;
    right: 10px;
}
[dir="rtl"] #logo-bar {
    left: auto;
    right: 10px;
}
[dir="rtl"] .switch-slide-label:after {
    left: auto;
    right: 2px;
}
[dir="rtl"] .switch-slide input:checked + label:after {
    left: auto;
    right: 27px;
}
[dir="rtl"] #settings-container .settings-title,
[dir="rtl"] #settings-container .settings-section-heading {
    text-align: right !important;
    width: 100%;
    display: block;
}

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

.btn-primary:hover, .btn-outline-primary:hover {
    background-color: var(--rest);
    border-color: var(--rest);
    color: #fff;
}

.btn-onlyRest {
    color: var(--only-rest);
    border-color: var(--only-rest);
}

.btn-onlyRest:hover {
    color: #fff;
    background-color: var(--only-rest);
    border-color: var(--only-rest);
}

/* the one default action of a dialog */
.btn-solid {
    color: #fff !important;
    background-color: var(--rest) !important;
    border-color: var(--rest) !important;
}

.btn-solid:hover {
    background-color: color-mix(in srgb, var(--rest) 88%, #000) !important;
}

/* dialogs, About and recap keep their tinted and neutral buttons */
:is(#dialog-buttons, .about-card, .recap-empty) .btn {
    border: 0;
    border-radius: 6px;
    font-weight: 500;
}

:is(#dialog-buttons, .about-card, .recap-empty) .btn-outline-primary {
    color: var(--rest) !important;
    background-color: color-mix(in srgb, var(--rest) 11%, transparent);
}

:is(#dialog-buttons, .about-card, .recap-empty) .btn-outline-primary:hover {
    background-color: color-mix(in srgb, var(--rest) 18%, transparent);
}

:is(#dialog-buttons, .about-card, .recap-empty) .btn-outline-secondary {
    color: var(--ink) !important;
    background-color: var(--fill);
}

:is(#dialog-buttons, .about-card, .recap-empty) .btn-outline-secondary:hover {
    background-color: var(--fill-2);
}

/* home: clicking the word next to a Focus toggle toggles it */
label.focus-toggle {
    display: inline;
    margin: 0;
    vertical-align: baseline;
}

#focus-rest-set-onlyrest:disabled::after,
label.focus-toggle:has(input:disabled) .focuser {
    color: var(--ink-2) !important;
}

/*  Segmented control (statistics)  */
.segmented {
    display: flex;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 2px;
    border-radius: 9px;
    background: var(--fill);
    font-size: 12px;
    line-height: 1.3;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
}

.segment {
    padding: 4px 11px;
    border: 0;
    border-radius: 7px;
    color: var(--ink-2) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .15s;
}

.segment:hover {
    color: var(--ink) !important;
}

.segment.is-current {
    background: var(--popover);
    color: var(--ink) !important;
    font-weight: 500;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 .5px rgb(0 0 0 / .06);
}

:root[data-theme="dark"] .segment.is-current {
    background: var(--fill-2);
    box-shadow: none;
}

/* dark switches, as before the token change: a dark track with a light knob */
:root[data-theme="dark"] .switch-slide-label {
    background: #333;
}

:root[data-theme="dark"] .switch-slide-label:after {
    background: #ccc !important;
}

/*  Statistics and recap  */
#top-bar.segmented {
    width: fit-content;
    top: 9%;
    font-weight: 400;
}

#top-bar .segment {
    line-height: 1.3;
}

#time-statistics-sub-bar {
    top: 15.5%;
    min-height: 0;
}

.pill-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}

#time-statistics-sub-bar .pill-tab {
    display: inline-block;
    min-height: 0;
    padding: 3px 9px;
    border: 0;
    border-radius: 999px;
    color: var(--ink-2) !important;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

#time-statistics-sub-bar .pill-tab:hover {
    color: var(--ink) !important;
}

#time-statistics-sub-bar .pill-tab.is-current {
    color: var(--ink) !important;
    font-weight: 600;
}

/* back sits in the tab row instead of the bottom corner */
.statistics-page-back, #statistics-back {
    top: 9%;
    bottom: auto;
    left: 14px;
    transform: translateY(-50%);
    font-size: 18px;
}

#statistics-back a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    color: var(--ink-2) !important;
    text-decoration: none;
}

#statistics-back a:hover {
    background: var(--fill);
    color: var(--ink) !important;
}

#statistics-back a .iconfont {
    color: inherit !important;
}

#stats-view {
    position: absolute;
    top: 22%;
    right: 24px;
    bottom: 16px;
    left: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 8vh;
    overflow: hidden;
    text-align: center;
    -webkit-app-region: no-drag;
    -webkit-user-select: text;
}

.stats-hero {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 6px 0 18px;
}

.stats-hero-label {
    color: var(--ink-2);
    font-size: 12px;
}

.stats-hero-value {
    font-size: 38px;
    font-weight: 300;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.stats-compare {
    color: var(--ink-2);
    font-size: 12px;
}

.stats-compare:empty {
    display: none;
}

#stats-view.has-chart:not(.is-empty) {
    padding-bottom: 3vh;
}

#stats-view.has-chart .stats-hero {
    margin: 0 0 10px;
}

#stats-view.has-chart .stats-hero-value {
    font-size: 30px;
}

#stats-view #statistics-graph {
    width: 100%;
    margin-bottom: 14px;
}

/* the four kinds as a two-by-two legend, the total beneath */
.stats-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    gap: 8px 28px;
    font-size: 13px;
}

.legend-item {
    --phase: var(--work);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
}

.legend-item[data-phase="rest"] {--phase: var(--rest);}
.legend-item[data-phase="only-rest"] {--phase: var(--only-rest);}
.legend-item[data-phase="positive"] {--phase: var(--positive);}

.legend-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--phase);
}

.legend-label {
    color: var(--ink-2);
}

.legend-value {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.legend-item.is-zero {
    opacity: .45;
}

.stats-total {
    margin-top: 16px;
    color: var(--ink-2);
    font-size: 13px;
}

.stats-total .legend-value {
    font-weight: 600;
}

.stats-empty {
    display: none;
    color: var(--ink-2);
    font-size: 13px;
}

/* empty states start at the same height on every tab, whatever follows the first line */
#stats-view.is-empty {
    justify-content: flex-start;
    padding-top: 17vh;
}

#stats-view.is-empty > :not(.stats-empty) {
    display: none !important;
}

#stats-view.is-empty .stats-empty {
    display: block;
}

/* shared by the statistics and recap empty states */
.empty-state {
    max-width: 280px;
    margin-inline: auto;
    text-align: center;
}

.empty-title {
    margin: 0 0 6px;
    text-wrap: balance;
    color: var(--ink);
    font-size: 14px;
}

.empty-hint {
    margin: 0 0 4px;
    text-wrap: balance;
    word-break: keep-all;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.6;
}

.empty-state .btn {
    margin-top: 12px;
}

.stats-empty .btn {
    border: 0;
    border-radius: 6px;
    color: var(--rest) !important;
    background-color: color-mix(in srgb, var(--rest) 11%, transparent);
}

#statistics-graph {
    height: auto;
}

.bar-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-grid {
    stroke: var(--hairline);
    stroke-width: 1;
}

.chart-axis {
    fill: var(--ink-3);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.chart-axis.is-current {
    fill: var(--ink);
    font-weight: 600;
}

.bar-work {fill: var(--work);}
.bar-rest {fill: var(--rest);}
.bar-only-rest {fill: var(--only-rest);}
.bar-positive {fill: var(--positive);}

#statistics-recap {
    top: 15%;
    right: 24px;
    bottom: 16px;
    left: 24px;
    width: auto;
    height: auto;
}

#recap-list {
    height: 100%;
    padding: 0 4px;
    overflow-y: auto;
    text-align: start;
}

.recap-day + .recap-day {
    margin-top: 16px;
}

.recap-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 6px;
    color: var(--ink-2);
    font-size: 12px;
    font-weight: 600;
}

.recap-entry {
    --phase: var(--work);
    position: relative;
    margin-bottom: 6px;
    padding: 8px 28px 8px 12px;
    border-radius: 8px;
    background: var(--fill);
    box-shadow: inset 3px 0 0 var(--phase);
}

.recap-entry[data-phase="only-rest"] {--phase: var(--only-rest);}
.recap-entry[data-phase="positive"] {--phase: var(--positive);}

.recap-title {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.recap-note {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: 12px;
}

.recap-time {
    display: block;
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.recap-delete {
    border: 0;
    color: var(--ink-3) !important;
    font-size: 15px;
    line-height: 1;
    text-decoration: none !important;
    opacity: 0;
    transition: opacity .15s;
}

.recap-entry .recap-delete {
    position: absolute;
    top: 7px;
    right: 9px;
}

.recap-entry:hover .recap-delete, .recap-date:hover .recap-delete, .recap-delete:focus-visible {
    opacity: 1;
}

/* the recap list starts 7vh higher than the statistics view (no period tabs), so its empty
   state starts 7vh further down to put the first line at the same height */
.recap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24vh 8px 0;
}

/*  Onboarding tour  */
#tourguide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 56px 32px 28px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
}

.tour-mark {
    width: 34px;
    height: 34px;
}

#tourguide .tour-title {
    margin: 18px 0 4px;
    color: var(--ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

.tour-subtitle {
    margin: 0;
    color: var(--ink-2);
    font-size: 14px;
}

.tour-features {
    display: grid;
    gap: 16px;
    margin: auto 0;
    padding-bottom: 8%;
}

.tour-feature dt {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.tour-feature dd {
    margin: 1px 0 0;
    color: var(--ink-2);
    font-size: 12.5px;
    line-height: 1.45;
}

.tour-start {
    width: 100%;
    margin-top: 24px;
    padding: 9px 0;
    border-radius: 10px;
    font-size: 14px;
    -webkit-app-region: no-drag;
}

/*  About  */
.about-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: auto;
    text-align: center;
}

.about-mark {
    width: 64px;
    height: 64px;
}

.about-name {
    margin: 14px 0 2px;
    color: var(--ink);
    font-size: 24px;
    font-weight: 600;
}

.about-version {
    margin: 0 0 12px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.about-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 26px 0 18px;
}

.about-links a {
    padding: 4px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--fill);
    color: var(--ink) !important;
    font-size: 12px;
    text-decoration: none;
}

.about-links a:hover {
    background: var(--fill-2);
}

.about-legal {
    max-width: 420px;
    margin: 0;
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.6;
}

.about-legal a {
    border: 0;
    color: var(--ink-2);
}

#fullscreen-custom-dialog #dialog-title {
    color: var(--ink);
    font-weight: 600;
}

#fullscreen-experience-tip, #fullscreen-too-long-tip {
    max-width: 300px;
    margin: 0 auto;
    color: var(--ink-2) !important;
    font-size: 12px;
    font-weight: 400 !important;
    line-height: 1.5;
}

#fullscreen-experience-tip a, #fullscreen-too-long-tip a {
    border: 0;
    font-weight: 500;
}

#emergency-exit-input {
    border-color: var(--hairline);
    border-radius: 8px;
    background: var(--fill);
}

/* external title window */
#timer > #title.h5 {
    color: var(--ink);
    font-weight: 600;
}

/*  Timer countdown: the size follows the window width, as dynamicResizer() used to
    (2.5rem at the default 376px width); tabular figures keep the digits from shifting  */
#now-timing {
    font-size: calc(1.25rem + 5.32vw);
    font-variant-numeric: tabular-nums;
}

#now-timing.rtl-timer,
.rtl-timer {
    direction: rtl;
    unicode-bidi: isolate;
}

#stopper i::before {
    font-size: 2rem;
}

.quiet-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 12px;
    -webkit-app-region: no-drag;
    transition: background-color .15s, color .15s;
}

.quiet-button:hover, .quiet-button:has(+ :popover-open) {
    background: var(--fill);
    color: var(--ink);
}

.quiet-button .iconfont {
    font-size: 9px;
}

/*  Popovers: native [popover] in the top layer, placed with anchor positioning  */
.wnr-popover {
    inset: auto;
    margin: 0;
    padding: 6px;
    border: 0;
    border-radius: 12px;
    background: var(--popover);
    color: var(--ink);
    box-shadow: var(--popover-shadow);
    font-size: 12px;
    -webkit-app-region: no-drag;
    -webkit-user-select: none;
    opacity: 1;
    transform: none;
    transition: opacity .14s ease, transform .14s ease, overlay .14s allow-discrete, display .14s allow-discrete;
}

.wnr-popover:not(:popover-open) {
    opacity: 0;
    transform: translateY(4px) scale(.98);
}

@starting-style {
    .wnr-popover:popover-open {
        opacity: 0;
        transform: translateY(4px) scale(.98);
    }
}

.popover-action {
    display: block;
    margin: 6px -6px -6px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0 0 12px 12px;
    color: var(--ink-2);
    text-align: center;
    text-decoration: none !important;
}

.popover-action:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
}

#time-adjust-dropdown {
    anchor-name: --time-adjust;
}

#time-adjust-menu {
    position-anchor: --time-adjust;
    position-area: top;
    margin-bottom: 6px;
    position-try-fallbacks: flip-block;
}

.adjust-grid {
    display: grid;
    grid-template-columns: auto 36px 36px;
    align-items: center;
    gap: 4px 6px;
    padding: 4px;
}

.adjust-amount {
    padding-right: 10px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.adjust-step {
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    line-height: 1;
}

.adjust-step:hover {
    background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.adjust-step:active {
    transform: scale(.95);
}

/*  Appearance and phase colours
    supporter.js sets html[data-theme="dark|light"]; theme.js sets html[data-phase-colors]
    and the --work/--rest/--positive/--only-rest properties. These rules used to be injected
    at the end of <body>, so they stay last here, and :where() keeps each selector's own
    specificity unchanged.  */


body {
    color: var(--ink);
    background-color: var(--canvas);
}

.dropdown-menu {background-color: var(--popover); color: var(--ink);}
.dropdown-item {color: var(--ink);}
.dropdown-item:hover, .dropdown-item:focus {background-color: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink);}
.dropdown-divider {border-top-color: var(--hairline);}
#loader-wrapper .loader-section {background: var(--canvas);}

/* frameless dark windows need an edge against dark desktops */
/* dark appearance as it always looked; menus and the in-timer dialogs use the newer surfaces */
:where([data-theme="dark"], [data-theme="dark"] *)::-webkit-scrollbar-track {background-color: #191919;}
:where([data-theme="dark"], [data-theme="dark"] *)::-webkit-scrollbar-thumb {background-color: #999999;}
:where([data-theme="dark"]) input[type="range"] {background-color: #aaaaaa33;}
:where([data-theme="dark"]) hr {border-color: #666666;}
:where([data-theme="dark"]) #title {color: #bbbbbb;}
:where([data-theme="dark"]) :is(#settings-title, #predefined-tasks-sidebar, #settings-sidebar) {border-color: #aaaaaa33;}
:where([data-theme="dark"]) .settings-sidebar-block {color: #fefefe; background-color: #191919;}
:where([data-theme="dark"]) label,
:where([data-theme="dark"]) li,
:where([data-theme="dark"]) select,
:where([data-theme="dark"]) #personalization input[type="text"],
:where([data-theme="dark"]) input[type="password"],
:where([data-theme="dark"]) #settings-container input[type="number"],
:where([data-theme="dark"]) input[type="time"],
:where([data-theme="dark"]) .settings-sidebar-block {color: #bbbbbb !important;}
:where([data-theme="dark"]) #settings-container input[type="text"],
:where([data-theme="dark"]) #settings-container input[type="number"],
:where([data-theme="dark"]) #settings-container input[type="password"],
:where([data-theme="dark"]) #extend-form input,
:where([data-theme="dark"]) #settings-container .dropdown .btn,
:where([data-theme="dark"]) #dropdown-menu-button {border-bottom-color: #cccccc23 !important; color: #aaaaaa;}
:where([data-theme="dark"]) .work {color: var(--work) !important;}
:where([data-theme="dark"]) .rest {color: var(--rest) !important;}
:where([data-theme="dark"]) .text-info,
:where([data-theme="dark"]) .work.positive {color: #17a2b8 !important;}
:where([data-theme="dark"]) :is(input[type="text"], input[type="number"], input[type="password"]):focus,
:where([data-theme="dark"]) #settings-container :is(input[type="text"], input[type="number"]):focus,
:where([data-theme="dark"]) #settings-container .dropdown .btn:focus,
:where([data-theme="dark"]) #dropdown-menu-button:focus {border-bottom-color: #cccccc33 !important;}
:where([data-theme="dark"]) :is(input[type="text"], input[type="number"], input[type="password"]):hover,
:where([data-theme="dark"]) #settings-container :is(input[type="text"], input[type="number"]):hover,
:where([data-theme="dark"]) #settings-container .dropdown .btn:hover,
:where([data-theme="dark"]) #dropdown-menu-button:hover {border-bottom-color: #cccccc28 !important;}
:where([data-theme="dark"]) .hotkey-setting {color: #aaaaaa;}
:where(html[data-theme="dark"]) {border: #ffffff33 1px solid;}
:where([data-theme="dark"]) .card {background-color: #191919; border: 1px solid rgba(255, 255, 255, .125);}
:where([data-theme="dark"]) .settings-title {color: #ddd;}
:where([data-theme="dark"]) #settings-container .settings-section-heading {color: #5490ea;}
:where([data-theme="dark"]) #settings-container .settings-section-anchor {border-bottom-color: #ffffff18;}
:where([data-theme="dark"]) #settings-header {border-bottom-color: #aaaaaa33;}
:where([data-theme="dark"]) .settings-back-to-top {color: #aaaaaa;}
:where([data-theme="dark"]) .home-coupling {color: #999999;}
:where([data-theme="dark"]) .settings-section-nav-item {color: #999999;}
:where([data-theme="dark"]) :is(.settings-section-nav-item:hover, .settings-section-nav-item.is-current) {color: #5490ea;}
:where([data-theme="dark"]) .dropdown-default {color: #aaa;}
:where([data-theme="dark"]) .dropdown-toggle::before {color: #aaa;}
:where([data-theme="dark"]) #emergency-exit-link {color: #aaaaaa;}

/* keyboard focus is visible; pointer focus is not */
:focus {outline: none;}
:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--rest) 60%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}
input[type="text"]:focus-visible, input[type="number"]:focus-visible, input[type="password"]:focus-visible {outline: none;}
.btn:focus, .btn.focus {box-shadow: none !important;}

@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* rest */
:where([data-phase-colors]) input[type="range"]::-webkit-slider-thumb,
:where([data-phase-colors]) .switch-slide input:checked + label,
:where([data-phase-colors]) .rest input[type="range"]::-webkit-slider-thumb {background: var(--rest);}
:where([data-phase-colors]) input[type="checkbox"]::after,
:where([data-phase-colors]) .rest,
:where([data-phase-colors]) .rest::-webkit-input-placeholder,
:where([data-phase-colors]) .rest:hover,
:where([data-phase-colors]) #controller .dropdown-toggle::before,
:where([data-phase-colors]) #controller .dropdown-toggle::after,
:where([data-phase-colors]) .rest input[type="checkbox"]::after,
:where([data-phase-colors]) #rest-time,
:where([data-phase-colors]) #work-rest.rest,
:where([data-phase-colors]) #now-timing.rest,
:where([data-phase-colors]) #fullscreen-experience-tip .rest,
:where([data-phase-colors]) #fullscreen-too-long-tip .rest,
:where([data-phase-colors]) .rest .iconfont,
:where([data-phase-colors]) #external.rest,
:where([data-phase-colors]) #external.rest .iconfont,
:where([data-phase-colors]) #time-left.rest,
:where([data-phase-colors]) #time-left-msg.rest,
:where([data-phase-colors]) #floating-container .rest,
:where([data-phase-colors]) #floating-container .rest .iconfont {color: var(--rest) !important;}
:where([data-phase-colors]) select > option:focus {background-color: var(--rest);}
:where([data-phase-colors]) :is(.rest:focus, .rest:hover)::-webkit-input-placeholder {color: color-mix(in srgb, var(--rest) 76%, transparent) !important;}

/* work */
:where([data-phase-colors]) #focus-work-set::after,
:where([data-phase-colors]) #focus-work-set:checked::after,
:where([data-phase-colors]) .work,
:where([data-phase-colors]) .work::-webkit-input-placeholder,
:where([data-phase-colors]) .work:hover,
:where([data-phase-colors]) #work-time,
:where([data-phase-colors]) #work-rest,
:where([data-phase-colors]) #now-timing,
:where([data-phase-colors]) #external,
:where([data-phase-colors]) #external .iconfont,
:where([data-phase-colors]) .work .iconfont,
:where([data-phase-colors]) #time-left.work,
:where([data-phase-colors]) #time-left-msg.work,
:where([data-phase-colors]) #floating-container .work,
:where([data-phase-colors]) #floating-container .work .iconfont {color: var(--work) !important;}
:where([data-phase-colors]) :is(.work:focus, .work:hover)::-webkit-input-placeholder {color: color-mix(in srgb, var(--work) 76%, transparent) !important;}
:where([data-phase-colors]) .work input[type="range"]::-webkit-slider-thumb,
:where([data-phase-colors]) .work input[type="checkbox"]::after {background: var(--work); color: var(--work);}

/* stopwatch */
:where([data-phase-colors]) .positive,
:where([data-phase-colors]) .positive::-webkit-input-placeholder,
:where([data-phase-colors]) .positive:hover,
:where([data-phase-colors]) #work-rest.positive,
:where([data-phase-colors]) #now-timing.positive,
:where([data-phase-colors]) #external.positive,
:where([data-phase-colors]) #external.positive .iconfont,
:where([data-phase-colors]) .positive .iconfont,
:where([data-phase-colors]) #time-left.positive,
:where([data-phase-colors]) #time-left-msg.positive,
:where([data-phase-colors]) #floating-container .positive,
:where([data-phase-colors]) #floating-container .positive .iconfont {color: var(--positive) !important;}
:where([data-phase-colors]) :is(.positive:focus, .positive:hover)::-webkit-input-placeholder {color: var(--positive) !important;}
:where([data-phase-colors]) .positive input[type="range"]::-webkit-slider-thumb {background: var(--positive) !important;}
:where([data-phase-colors]) .positive input[type="checkbox"]::after {color: var(--positive) !important;}

/* simple countdown */
:where([data-phase-colors]) #focus-rest-set-onlyrest::after,
:where([data-phase-colors]) #focus-rest-set-onlyrest:checked::after,
:where([data-phase-colors]) #focus-continueloop-set-onlyrest::after,
:where([data-phase-colors]) #focus-continueloop-set-onlyrest:checked::after {color: var(--only-rest) !important;}
:where([data-phase-colors]) .onlyRest,
:where([data-phase-colors]) .onlyRest::-webkit-input-placeholder,
:where([data-phase-colors]) .onlyRest:hover,
:where([data-phase-colors]) .rest.onlyRest,
:where([data-phase-colors]) .rest.onlyRest::-webkit-input-placeholder,
:where([data-phase-colors]) .rest.onlyRest:hover,
:where([data-phase-colors]) #work-rest.onlyRest,
:where([data-phase-colors]) #now-timing.onlyRest,
:where([data-phase-colors]) #work-rest.rest.onlyRest,
:where([data-phase-colors]) #now-timing.rest.onlyRest,
:where([data-phase-colors]) #external.onlyRest,
:where([data-phase-colors]) #external.rest.onlyRest,
:where([data-phase-colors]) #external.onlyRest .iconfont,
:where([data-phase-colors]) #external.rest.onlyRest .iconfont,
:where([data-phase-colors]) .onlyRest .iconfont,
:where([data-phase-colors]) .rest.onlyRest .iconfont,
:where([data-phase-colors]) #time-left.onlyRest,
:where([data-phase-colors]) #time-left.rest.onlyRest,
:where([data-phase-colors]) #time-left-msg.onlyRest,
:where([data-phase-colors]) #time-left-msg.rest.onlyRest,
:where([data-phase-colors]) #floating-container .onlyRest,
:where([data-phase-colors]) #floating-container .rest.onlyRest,
:where([data-phase-colors]) #floating-container .onlyRest .iconfont,
:where([data-phase-colors]) #floating-container .rest.onlyRest .iconfont {color: var(--only-rest) !important;}
:where([data-phase-colors]) .onlyRest:focus::-webkit-input-placeholder,
:where([data-phase-colors]) .onlyRest:hover::-webkit-input-placeholder,
:where([data-phase-colors]) .rest.onlyRest:focus::-webkit-input-placeholder,
:where([data-phase-colors]) .rest.onlyRest:hover::-webkit-input-placeholder {color: var(--only-rest) !important;}
:where([data-phase-colors]) .onlyRest input[type="range"]::-webkit-slider-thumb,
:where([data-phase-colors]) .rest.onlyRest input[type="range"]::-webkit-slider-thumb {background: var(--only-rest) !important;}
:where([data-phase-colors]) .onlyRest input[type="checkbox"]::after,
:where([data-phase-colors]) .rest.onlyRest input[type="checkbox"]::after {color: var(--only-rest) !important;}

/* pages cross-fade into each other (home, timer, statistics share the main window) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .18s;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}