/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · genre: modern-minimal · macrostructure: workbench · design-system: default.css.php · designed-as-app */
.rootd {
    --rootd-bg: var(--bg-color, #f7f7f5);
    --rootd-panel: var(--container-bg-color, #ffffff);
    --rootd-panel-alt: var(--card-bg-color, #f3f3f0);
    --rootd-border: var(--container-border-color, #ddddda);
    --rootd-border-strong: var(--card-border-color, #c9c9c4);
    --rootd-text: var(--content-font-color, #222222);
    --rootd-title: var(--title-font-color, var(--rootd-text));
    --rootd-muted: var(--text-muted, #767676);
    --rootd-secondary: var(--text-secondary, #575757);
    --rootd-accent: var(--accent-color, #c75f65);
    --rootd-primary: var(--primary-color, var(--rootd-accent));
    --rootd-success: var(--success-color, #3e9a70);
    --rootd-error: var(--error-color, #d85151);
    --rootd-calendar: var(--secondary-color, #617aa5);
    --rootd-progress: var(--rootd-accent);
    --rootd-on-color: var(--btn-accent-text, #ffffff);
    --rootd-form-bg: var(--form-bg-color, #ffffff);
    --rootd-form-border: var(--form-border-color, var(--rootd-border-strong));
    --rootd-form-text: var(--form-text-color, var(--rootd-text));
    --rootd-radius: var(--container-border-radius, 14px);
    --rootd-card-radius: var(--card-border-radius, 10px);
    --rootd-input-radius: var(--form-border-radius, 8px);
    --rootd-button-radius: var(--btn-secondary-radius, 8px);
    --rootd-space-1: var(--spacing-xs, 4px);
    --rootd-space-2: var(--spacing-sm, 8px);
    --rootd-space-3: var(--spacing-md, 12px);
    --rootd-space-4: var(--spacing-lg, 20px);
    --rootd-space-5: var(--spacing-xl, 24px);
    --rootd-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, .06));
    --rootd-ease-out: cubic-bezier(.16, 1, .3, 1);

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    color: var(--rootd-text);
    font-family: var(--content-font-family, sans-serif);
    font-size: var(--content-font-size, 14px);
    line-height: 1.5;
    overflow-x: clip;
}

.rootd,
.rootd * {
    box-sizing: border-box;
}

.rootd :where(button, input, select, textarea) {
    color: inherit;
    font: inherit;
}

.rootd :where(button) {
    white-space: nowrap;
}

.rootd button:focus-visible,
.rootd input:focus-visible,
.rootd select:focus-visible,
.rootd textarea:focus-visible,
.rootd [tabindex]:focus-visible {
    outline: 2px solid var(--rootd-primary);
    outline-offset: 2px;
}

.rootd button:active:not(:disabled) {
    transform: translateY(1px);
}

.rootd button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.rootd [hidden] {
    display: none !important;
}

.rootd-login-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rootd-space-3);
    margin-bottom: var(--rootd-space-3);
    padding: 10px 12px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-card-radius);
    background: var(--rootd-panel-alt);
    color: var(--rootd-secondary);
    font-size: .86em;
}

.rootd-login-note a {
    color: var(--rootd-title);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rootd-layout {
    display: grid;
    gap: var(--rootd-space-3);
    margin-top: 20px;
    min-width: 0;
}

.rootd-side,
.rootd-main {
    display: grid;
    align-content: start;
    gap: var(--rootd-space-3);
    min-width: 0;
}

.rootd-panel {
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-radius);
    background: var(--rootd-panel);
    box-shadow: var(--rootd-shadow);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.rootd-panel--tracker {
    background: color-mix(in srgb, var(--rootd-primary) 7%, var(--rootd-panel));
    color: var(--rootd-text);
}

.rootd-panel--planner {
    box-shadow: none;
}

.rootd-tracker-head .rootd-icon-button {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.rootd-icon-button--primary,
#rootd-add-tracker {
    border: 0;
    background: var(--rootd-primary);
    color: var(--rootd-on-color);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
}

.rootd-panel-head {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: var(--rootd-space-3);
    padding: 12px 14px;
    border-bottom: 1px solid var(--rootd-border);
}

.rootd-panel-head h2,
.rootd-dialog-head h2 {
    margin: 0;
    color: inherit;
    font-family: var(--title-font-family, inherit);
    font-size: min(var(--title-font-size, 18px), 1.15em);
    font-weight: 700;
    line-height: 1.25;
}

.rootd-tracker-head {
    min-height: 38px;
    gap: 6px;
    padding: 6px 10px;
    background: var(--container-bg-color, var(--rootd-panel));
}

.rootd-tracker-head h2 {
    min-width: 0;
    overflow: hidden;
    font-size: .9em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-tracker-head .rootd-head-actions {
    flex: 0 0 auto;
    gap: 3px;
}

.rootd-tracker-head .rootd-text-button {
    min-height: 24px;
    padding: 2px 5px;
    font-size: .7em;
}

.rootd-tracker-head #rootd-add-tracker {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border-radius: 6px;
}

.rootd-panel-body {
    min-width: 0;
    padding: 6px 14px 8px;
}

.rootd-panel--memo .rootd-panel-body {
    padding-top: 8px;
}

.rootd-head-actions,
.rootd-planner-actions,
.rootd-dialog-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rootd-small-button,
.rootd-text-button,
.rootd-add-button,
.rootd-primary-button,
.rootd-icon-button,
.rootd-step-button,
.rootd-remove-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: background-color .16s var(--rootd-ease-out), border-color .16s var(--rootd-ease-out), color .16s var(--rootd-ease-out), opacity .16s var(--rootd-ease-out), transform .1s var(--rootd-ease-out);
}

.rootd-small-button,
.rootd-add-button {
    min-height: 32px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--rootd-button-radius);
    background: var(--btn-secondary-bg, var(--rootd-panel-alt));
    color: var(--btn-secondary-text, var(--rootd-text));
    font-size: .84em;
    font-weight: 700;
}

.rootd-tracker-block--routine .rootd-panel-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

.rootd-tracker-block--progress .rootd-panel-body {
    padding: 3px 10px 4px;
}

.rootd-tracker-block--routine {
    border-top: 2px solid color-mix(in srgb, var(--rootd-primary) 24%, var(--rootd-border-strong));
}

.rootd-text-button {
    padding: 5px 4px;
    background: transparent;
    color: inherit;
    font-size: .78em;
    opacity: .7;
}

.rootd-primary-button {
    min-height: 34px;
    padding: 6px 12px;
    border-radius: var(--btn-primary-radius, var(--rootd-button-radius));
    background: var(--btn-primary-bg, var(--rootd-title));
    color: var(--btn-primary-text, #ffffff);
    font-size: .84em;
    font-weight: 700;
}

.rootd-icon-only {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
}

.rootd-icon-button,
.rootd-step-button,
.rootd-remove-button {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-button-radius);
    background: transparent;
    color: var(--rootd-secondary);
    font-weight: 700;
}

.rootd-remove-button {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-color: transparent;
    color: var(--rootd-muted);
    font-size: 17px;
    line-height: 1;
}

.rootd-check-list,
.rootd-progress-list,
.rootd-todo-list,
.rootd-memo-list,
.rootd-schedule-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rootd-check-row,
.rootd-todo-row,
.rootd-memo-row,
.rootd-schedule-row {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--rootd-border);
}

.rootd-check-row:last-child,
.rootd-todo-row:last-child,
.rootd-memo-row:last-child,
.rootd-schedule-row:last-child {
    border-bottom: 0;
}

.rootd-check-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 7px 0;
}

.rootd-check-row--inactive {
    opacity: .58;
}

.rootd-check-row--inactive .rootd-check-copy strong {
    font-weight: 500;
}

.rootd-tracker-block--routine .rootd-check-row {
    border-color: color-mix(in srgb, var(--rootd-primary) 18%, var(--rootd-border));
}

.rootd-check-row input,
.rootd-todo-row input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--rootd-accent);
}

.rootd-check-copy,
.rootd-todo-copy,
.rootd-memo-copy {
    min-width: 0;
}

.rootd-check-copy strong,
.rootd-todo-copy strong,
.rootd-memo-copy strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: .92em;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-check-copy small,
.rootd-todo-copy small,
.rootd-memo-copy small {
    display: block;
    margin-top: 2px;
    color: inherit;
    font-size: .72em;
    opacity: .62;
}

.rootd-check-row input:checked + .rootd-check-copy strong,
.rootd-todo-row input:checked ~ .rootd-todo-copy strong {
    text-decoration: line-through;
    opacity: .55;
}

.rootd-count {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--rootd-panel-alt);
    color: var(--rootd-muted);
    font-size: .74em;
    text-align: center;
}

.rootd-inline-form,
.rootd-todo-form {
    display: grid;
    gap: 6px;
    padding: 6px 0 10px;
}

.rootd-inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
}

.rootd-todo-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.rootd-entry-row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.rootd-entry-row > input,
.rootd-entry-row > select,
.rootd-color-control {
    flex: 0 1 auto;
}

.rootd-category-control,
.rootd-color-control {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.rootd-category-control {
    position: relative;
    width: 124px;
    min-height: 34px;
    flex: 0 0 124px;
}

.rootd-category-control select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    flex: 1;
    padding: 4px 36px 4px 9px;
    font-size: .8em;
}

.rootd-category-select-wrap::before {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rootd-category-color, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rootd-category-color, transparent) 72%, var(--rootd-border));
    content: '';
    pointer-events: none;
    transform: translateY(-50%);
}

.rootd-category-select-wrap[data-has-color="false"]::before {
    background: var(--rootd-panel-alt);
    box-shadow: 0 0 0 1px var(--rootd-border-strong);
}

.rootd-entry-row #rootd-entry-kind {
    width: 120px;
    min-width: 120px;
    flex: 0 0 120px;
    padding-right: 0;
    padding-left: 9px;
}

.rootd-entry-row #rootd-todo-input {
    width: auto;
    min-width: 180px;
    flex: 1;
}

.rootd-entry-row #rootd-todo-date,
.rootd-entry-row #rootd-entry-end-date {
    width: 120px;
    min-width: 120px;
    flex: 0 0 120px;
}

.rootd-entry-row #rootd-entry-time {
    width: 84px;
    min-width: 84px;
    flex: 0 0 84px;
}

.rootd-entry-row #rootd-entry-repeat {
    width: 100px;
    min-width: 100px;
    flex: 0 0 100px;
}

.rootd-entry-row > .rootd-add-button {
    flex: 0 0 auto;
}

.rootd-entry-weekdays,
.rootd-entry-weekdays label {
    display: flex;
    align-items: center;
}

.rootd-entry-weekdays {
    justify-content: flex-end;
    gap: 3px;
    padding: 2px 0 0;
}

.rootd-entry-weekdays label {
    cursor: pointer;
}

.rootd-entry-weekdays input {
    position: absolute;
    opacity: 0;
}

.rootd-entry-weekdays span {
    display: grid;
    width: 27px;
    height: 25px;
    place-items: center;
    border-radius: 6px;
    background: var(--btn-secondary-bg, var(--rootd-panel-alt));
    color: var(--btn-secondary-text, var(--rootd-text));
    font-size: .72em;
}

.rootd-entry-weekdays input:checked + span {
    background: var(--btn-primary-bg, var(--rootd-primary));
    color: var(--btn-primary-text, var(--rootd-on-color));
}

.rootd-option-button {
    display: grid;
    min-width: 34px;
    min-height: 34px;
    padding: 4px 8px;
    place-items: center;
    border: 1px solid var(--rootd-form-border);
    border-radius: var(--rootd-input-radius);
    background: var(--rootd-panel-alt);
    color: var(--rootd-secondary);
    cursor: pointer;
}

.rootd-period-button[aria-pressed="true"] {
    border-color: var(--rootd-primary);
    background: color-mix(in srgb, var(--rootd-primary) 12%, var(--rootd-panel));
    color: var(--rootd-primary);
}

.rootd-color-control {
    flex: 0 0 auto;
    margin-right: 20px;
    margin-left: auto;
    min-height: 32px;
    padding: 2px 5px;
    border: 1px solid var(--rootd-form-border);
    border-radius: var(--rootd-input-radius);
    background: var(--rootd-form-bg);
}

.rootd-color-control input[type="color"],
.rootd-inline-edit input[type="color"] {
    width: 28px;
    height: 26px;
    padding: 1px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.rootd-color-history {
    display: flex;
    align-items: center;
    gap: 3px;
}

.rootd-color-swatch {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--rootd-swatch);
    box-shadow: 0 0 0 1px var(--rootd-border-strong);
    cursor: pointer;
}

.rootd-color-swatch[aria-pressed="true"] {
    border-color: var(--rootd-panel);
    box-shadow: 0 0 0 2px var(--rootd-primary);
}

.rootd input[type="text"],
.rootd input[type="date"],
.rootd input[type="time"],
.rootd input[type="number"],
.rootd select,
.rootd textarea {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 9px;
    border: 1px solid var(--rootd-form-border);
    border-radius: var(--rootd-input-radius);
    background: var(--rootd-form-bg);
    color: var(--rootd-form-text);
}

.rootd textarea {
    resize: vertical;
}

.rootd input::placeholder {
    color: var(--rootd-muted);
    opacity: .8;
}

.rootd input[aria-invalid="true"] {
    border-color: var(--rootd-error);
}

.rootd-memo-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 6px 0;
}

.rootd-memo-copy strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

.rootd-form-error {
    margin: -4px 0 7px;
    color: var(--rootd-error);
    font-size: .76em;
}

.rootd-empty {
    margin: 8px 0 0;
    padding: 18px 10px;
    color: var(--rootd-muted);
    font-size: .82em;
    text-align: center;
}

.rootd-progress-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
}

.rootd-progress-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    align-items: center;
    min-width: 0;
    padding: 8px 9px 7px 10px;
    border: 1px solid color-mix(in srgb, var(--rootd-accent) 28%, var(--rootd-border));
    border-radius: var(--rootd-card-radius);
    background: color-mix(in srgb, var(--rootd-accent) 4%, var(--rootd-panel));
}

.rootd-progress-row:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--rootd-accent) 28%, var(--rootd-border));
}

.rootd-tracker-block--progress .rootd-progress-row {
    padding: 5px 0 4px;
    border: 0;
    border-bottom: 1px solid var(--rootd-border);
    border-radius: 0;
    background: transparent;
}

.rootd-tracker-block--progress .rootd-progress-row:last-child {
    border-bottom: 0;
}

.rootd-progress-summary {
    grid-column: 1 / -1;
    display: grid;
    min-width: 0;
    gap: 4px;
}

.rootd-progress-title-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.rootd-progress-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: .86em;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-progress-title-row .rootd-row-actions {
    flex: 0 0 auto;
    gap: 0;
}

.rootd-progress-title-row .rootd-row-button {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    border-radius: 5px;
    font-size: .7em;
}

.rootd-progress-title-row .rootd-row-button--remove {
    font-size: 13px;
}

.rootd-progress-track {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: block;
    height: 7px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--rootd-secondary) 24%, var(--rootd-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--rootd-secondary) 28%, var(--rootd-panel-alt));
}

.rootd .rootd-progress-fill {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background-color: var(--rootd-progress) !important;
}

.rootd-progress-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 27px;
    width: 100%;
    align-items: center;
    gap: 4px;
}

.rootd-tracker-block--progress .rootd-step-button {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border: 0;
    border-radius: 6px;
    background: var(--btn-secondary-bg, var(--rootd-panel-alt));
    color: var(--btn-secondary-text, var(--rootd-text));
}

.rootd-progress-controls > .rootd-step-button:first-child {
    justify-self: start;
}

.rootd-progress-controls > .rootd-step-button:last-child {
    justify-self: end;
}

.rootd-progress-value {
    justify-self: center;
    min-width: 90px;
    padding: 2px 5px;
    border: 0;
    border-radius: var(--rootd-input-radius);
    background: transparent;
    color: var(--rootd-title);
    cursor: text;
    font-size: .86em;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
}

.rootd-progress-inputs {
    display: flex;
    justify-self: center;
    align-items: center;
    gap: 3px;
}

.rootd-progress-inputs input[type="number"] {
    width: 62px;
    min-height: 27px;
    padding: 2px 4px;
    text-align: center;
}

.rootd-section-icon-title {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--rootd-button-radius);
    background: color-mix(in srgb, var(--rootd-primary) 10%, var(--rootd-panel));
    color: var(--rootd-primary) !important;
    font-size: 1em !important;
}

.rootd-planner-head {
    align-items: center;
}

.rootd-planner-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--rootd-border);
}

.rootd-planner-toolbar .rootd-view-switch {
    margin-top: 0;
}

.rootd-planner-toolbar .rootd-todo-form {
    padding: 0;
}

.rootd-planner-toolbar .rootd-form-error {
    grid-column: 2;
    margin-top: -5px;
}

.rootd-view-switch {
    display: flex;
    padding: 2px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-button-radius);
    background: var(--rootd-panel-alt);
}

.rootd-view-divider {
    width: 1px;
    margin: 4px 2px;
    background: var(--rootd-border);
}

.rootd-view-switch button {
    width: 30px;
    min-height: 28px;
    padding: 4px;
    border: 0;
    border-radius: calc(var(--rootd-button-radius) - 2px);
    background: transparent;
    color: var(--rootd-muted);
    cursor: pointer;
    font-size: .8em;
}

.rootd-view-switch button[aria-pressed="true"] {
    background: var(--rootd-panel);
    color: var(--rootd-title);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
    font-weight: 700;
}

#rootd-toggle-completed[aria-pressed="true"] {
    background: var(--btn-secondary-bg, var(--rootd-panel));
    color: var(--btn-secondary-text, var(--rootd-title));
}

.rootd-todo-row {
    grid-template-columns: 58px auto auto minmax(0, 1fr) auto auto;
    padding: 6px 0;
}

.rootd-agenda {
    margin-top: 0;
    padding-top: 0;
}

.rootd-list-todos {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rootd-border);
}

.rootd-agenda h3,
.rootd-list-todos h3 {
    margin: 0 0 2px;
    color: var(--rootd-secondary);
    font-size: .76em;
    font-weight: 700;
    letter-spacing: .04em;
}

.rootd-schedule-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    padding: 5px 0;
}

.rootd-schedule-row--agenda {
    grid-template-columns: 58px auto minmax(0, 1fr) auto auto auto;
}

.rootd-list-date {
    display: inline-flex;
    min-width: 52px;
    align-self: center;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    color: var(--rootd-title);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rootd-list-date strong {
    font-size: .76em;
    font-weight: 800;
}

.rootd-list-date small {
    font-size: .62em;
    font-weight: 800;
}

.rootd-schedule-mark {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--rootd-calendar);
}

.rootd-schedule-mark--todo {
    background: var(--rootd-accent);
}

.rootd-schedule-mark--schedule,
.rootd-schedule-mark--anniversary {
    background: var(--rootd-item-color, var(--rootd-success));
}

.rootd-schedule-category {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 18px;
    align-items: center;
    justify-self: start;
    overflow: hidden;
    padding: 2px 5px;
    border-radius: 2px;
    background: var(--rootd-item-color, var(--rootd-calendar));
    color: var(--rootd-item-text, var(--rootd-on-color));
    font-size: .64em;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-schedule-category-space {
    display: block;
    width: 0;
    min-width: 0;
}

.rootd-schedule-copy {
    min-width: 0;
    overflow: hidden;
    font-size: .88em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-schedule-copy.is-done {
    text-decoration: line-through;
    opacity: .5;
}

.rootd-schedule-meta {
    color: var(--rootd-muted);
    font-size: .74em;
    font-variant-numeric: tabular-nums;
}

.rootd-row-actions,
.rootd-inline-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.rootd-row-button {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--rootd-button-radius);
    background: transparent;
    color: var(--rootd-muted);
    cursor: pointer;
    font-size: .78em;
    opacity: .7;
}

.rootd-note-button,
.rootd-note-trigger {
    color: var(--rootd-muted);
}

.rootd-note-button.has-note,
.rootd-note-trigger.has-note {
    background: var(--btn-secondary-bg, var(--rootd-panel-alt));
    color: var(--btn-secondary-text, var(--rootd-primary));
}

.rootd-calendar-bar > .fa-comment {
    margin-right: 3px;
    font-size: .85em;
}

.rootd-row-button--save {
    color: var(--rootd-success);
}

.rootd-row-button--remove {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.rootd-inline-edit {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    align-items: center;
}

.rootd-inline-edit--routine,
.rootd-inline-edit--todo {
    grid-template-columns: minmax(110px, 1fr) minmax(105px, .45fr) minmax(132px, .45fr) 34px auto;
}

.rootd-inline-edit--routine {
    display: flex;
    flex-wrap: wrap;
}

.rootd-inline-edit--routine input[name="text"] {
    min-width: 120px;
    flex: 1 1 180px;
}

.rootd-inline-edit--routine input[name="meta"] {
    min-width: 100px;
    flex: 1 1 130px;
}

.rootd-inline-edit--routine input[type="date"] {
    width: 132px;
    flex: 0 1 132px;
}

.rootd-inline-edit--progress {
    grid-template-columns: minmax(100px, 1fr) 68px auto 68px auto;
}

.rootd-inline-edit--event {
    display: flex;
    flex-wrap: wrap;
}

.rootd-inline-edit--event input[name="title"] {
    min-width: 150px;
    flex: 1 1 220px;
}

.rootd-inline-edit--event :where(select, input:not([name="title"])) {
    width: auto;
    flex: 0 1 132px;
}

.rootd-inline-edit--event input[type="color"] {
    flex-basis: 34px;
}

.rootd-inline-edit--planner {
    display: flex;
    flex-wrap: wrap;
}

.rootd-inline-edit--planner select[name="kind"] {
    width: 74px;
    flex: 0 0 74px;
}

.rootd-inline-edit--planner input[name="title"] {
    min-width: 170px;
    flex: 1 1 240px;
}

.rootd-inline-edit--planner select[name="category"] {
    width: 112px;
    flex: 0 0 112px;
}

.rootd-inline-edit--planner input[type="date"] {
    width: 136px;
    min-width: 136px;
    flex: 0 0 136px;
}

.rootd-inline-edit--planner input[type="time"] {
    width: 84px;
    flex: 0 0 84px;
}

.rootd-inline-edit--planner select[name="repeat"] {
    width: 100px;
    flex: 0 0 100px;
}

.rootd-inline-edit input,
.rootd-inline-edit select {
    min-height: 30px !important;
    padding: 4px 6px !important;
}

.rootd-inline-edit input[type="color"] {
    min-height: 30px !important;
    padding: 1px !important;
}

.rootd-row--editing {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 4px 0;
}

.rootd-progress-row.rootd-row--editing {
    padding: 5px;
}

.rootd-inline-separator {
    color: var(--rootd-muted);
    text-align: center;
}

.rootd-calendar-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--rootd-space-2);
    padding: 5px 0 10px;
    text-align: center;
}

.rootd-calendar-label,
.rootd-calendar-month-input {
    justify-self: center;
}

.rootd-calendar-label {
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--rootd-input-radius);
    background: transparent;
    color: var(--rootd-title);
    font-family: var(--title-font-family, inherit);
    font-size: 1.5em;
    font-weight: 700;
    cursor: text;
}

.rootd-calendar-month-input {
    width: 148px !important;
    min-height: 28px !important;
    padding: 2px 7px !important;
}

.rootd-calendar-weekdays,
.rootd-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rootd-calendar-weekdays {
    border: 1px solid var(--rootd-border);
    border-bottom: 0;
    border-radius: var(--rootd-card-radius) var(--rootd-card-radius) 0 0;
    background: var(--rootd-panel-alt);
}

.rootd-calendar-weekdays span {
    padding: 6px 2px;
    color: var(--rootd-muted);
    font-size: .7em;
    text-align: center;
}

.rootd-calendar-day {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 82px;
    flex-direction: column;
    gap: 5px;
    margin: -1px 0 0 -1px;
    padding: 7px;
    border: 1px solid var(--rootd-border);
    border-radius: 0;
    background: var(--rootd-panel);
    color: var(--rootd-text);
    cursor: pointer;
    text-align: left;
}

.rootd-calendar-day[data-outside="true"] {
    background: var(--rootd-panel-alt);
    color: var(--rootd-muted);
    opacity: .65;
}

.rootd-calendar-day[aria-pressed="true"] {
    z-index: 1;
    border-color: var(--rootd-primary);
    box-shadow: inset 0 0 0 1px var(--rootd-primary);
}

.rootd-calendar-day[aria-current="date"] {
    z-index: 2;
    border-color: var(--rootd-accent);
    box-shadow: inset 0 0 0 1px var(--rootd-accent);
}

#rootd-calendar-prev,
#rootd-calendar-next {
    border: 0;
    background: var(--btn-primary-bg, var(--rootd-primary));
    color: var(--btn-primary-text, var(--rootd-on-color));
}

.rootd-calendar-number {
    font-size: .75em;
    font-variant-numeric: tabular-nums;
}

.rootd-calendar-items {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.rootd-calendar-bar {
    display: block;
    min-width: 0;
    overflow: hidden;
    padding: 2px 4px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--rootd-calendar) 18%, var(--rootd-panel));
    color: var(--rootd-calendar);
    font-size: .62em;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rootd-calendar-bar[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.rootd-calendar-bar.is-dragging {
    cursor: grabbing;
    opacity: .45;
}

.rootd-calendar-day.is-drop-target {
    z-index: 3;
    border-color: var(--rootd-accent);
    background: color-mix(in srgb, var(--rootd-accent) 10%, var(--rootd-panel));
    box-shadow: inset 0 0 0 1px var(--rootd-accent);
}

.rootd-calendar-bar--schedule,
.rootd-calendar-bar--anniversary {
    background: var(--rootd-item-color, var(--rootd-calendar));
    color: var(--rootd-item-text, var(--rootd-on-color));
}

.rootd-calendar-bar--todo {
    background: var(--rootd-item-color, var(--rootd-accent));
    color: var(--rootd-item-text, var(--rootd-on-color));
}

.rootd-calendar-bar--range-middle {
    border-radius: 0;
}

.rootd-calendar-bar--range-start {
    border-radius: 3px 0 0 3px;
}

.rootd-calendar-bar--range-end {
    border-radius: 0 3px 3px 0;
}

.rootd-calendar-bar--more {
    background: transparent;
    color: var(--rootd-muted);
}

.rootd-day-detail {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-card-radius);
    background: var(--rootd-panel-alt);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.rootd-day-detail > strong {
    display: block;
    margin-bottom: 4px;
    font-size: .82em;
}

.rootd-dialog {
    width: min(92vw, 430px);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: var(--rootd-radius);
    background: transparent;
    color: var(--rootd-text);
}

.rootd-dialog[open] {
    position: fixed !important;
    inset: 0 !important;
    max-height: calc(100dvh - 32px);
    margin: auto !important;
}

.rootd-dialog::backdrop {
    background: var(--bg-overlay, rgba(0, 0, 0, .42));
}

.rootd-dialog-card {
    display: grid;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-radius);
    background: var(--rootd-panel);
    box-shadow: var(--shadow-lg, 0 18px 50px rgba(0, 0, 0, .16));
}

.rootd-tracker-kind-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-button-radius);
    background: var(--rootd-panel-alt);
}

.rootd-tracker-kind-switch button {
    min-height: 32px;
    border: 0;
    border-radius: calc(var(--rootd-button-radius) - 3px);
    background: transparent;
    color: var(--rootd-muted);
    cursor: pointer;
    font-size: .82em;
    font-weight: 700;
}

.rootd-tracker-kind-switch button[aria-pressed="true"] {
    background: var(--rootd-primary);
    color: var(--rootd-on-color);
}

.rootd-tracker-fields {
    display: grid;
    gap: 13px;
}

.rootd-tracker-fields[hidden] {
    display: none;
}

.rootd-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rootd-field,
.rootd-field-row {
    display: grid;
    gap: 6px;
}

.rootd-field-row {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.rootd-field > span {
    color: var(--rootd-secondary);
    font-size: .78em;
    font-weight: 700;
}

.rootd-dialog-actions {
    justify-content: flex-end;
    margin-top: 2px;
}

.rootd-category-list {
    display: flex;
    min-height: 32px;
    flex-wrap: wrap;
    gap: 5px;
}

.rootd-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--rootd-border);
    border-radius: 999px;
    background: var(--rootd-panel-alt);
    color: var(--rootd-secondary);
    font-size: .78em;
}

.rootd-category-chip > i:first-child {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--rootd-category-color);
}

.rootd-category-private-icon {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--rootd-muted);
    font-size: .76em;
}

.rootd-category-private-field,
.rootd-category-lock {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--rootd-secondary);
    font-size: .8em;
}

.rootd-category-private-field input,
.rootd-category-lock input {
    width: auto;
    min-height: 0;
}

.rootd-category-color-field input[type="color"] {
    width: 100%;
    min-height: 40px;
    padding: 4px;
}

.rootd-category-chip button {
    display: grid;
    width: 16px;
    height: 16px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--rootd-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.rootd-category-edit {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 40px auto auto;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-card-radius);
    background: var(--rootd-panel-alt);
}

.rootd-category-edit > input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 32px;
}

.rootd-category-edit > input[type="color"] {
    width: 40px;
    height: 32px;
    padding: 2px;
}

.rootd-category-edit-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rootd-category-edit-actions button {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--rootd-button-radius);
    background: var(--btn-secondary-bg, var(--rootd-panel-alt));
    color: var(--btn-secondary-text, var(--rootd-text));
    cursor: pointer;
}

.rootd-category-empty {
    color: var(--rootd-muted);
    font-size: .78em;
}

.rootd-weekday-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.rootd-weekday-field legend {
    margin-bottom: 6px;
    color: var(--rootd-secondary);
    font-size: .78em;
    font-weight: 700;
}

.rootd-weekday-options,
.rootd-inline-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rootd-inline-weekdays {
    flex: 1 1 100%;
}

.rootd-weekday-options label,
.rootd-inline-weekdays label {
    cursor: pointer;
}

.rootd-weekday-options input,
.rootd-inline-weekdays input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rootd-weekday-options span,
.rootd-inline-weekdays span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-button-radius);
    background: var(--rootd-panel-alt);
    color: var(--rootd-muted);
    font-size: .76em;
}

.rootd-weekday-options input:checked + span,
.rootd-inline-weekdays input:checked + span {
    border-color: var(--rootd-primary);
    background: color-mix(in srgb, var(--rootd-primary) 14%, var(--rootd-panel));
    color: var(--rootd-primary);
    font-weight: 700;
}

.rootd-weekday-options input:focus-visible + span,
.rootd-inline-weekdays input:focus-visible + span {
    outline: 2px solid var(--rootd-primary);
    outline-offset: 2px;
}

.rootd-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000;
    display: flex;
    max-width: min(390px, calc(100vw - 32px));
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--rootd-border);
    border-radius: var(--rootd-card-radius);
    background: var(--rootd-title);
    color: var(--header-font-color, #ffffff);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s var(--rootd-ease-out), transform .18s var(--rootd-ease-out);
}

.rootd-toast[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.rootd-toast span {
    min-width: 0;
    flex: 1;
    font-size: .82em;
}

.rootd-toast button {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: .78em;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rootd-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

@media (hover: hover) and (pointer: fine) {
    .rootd-small-button:hover,
    .rootd-add-button:hover,
    .rootd-icon-button:hover,
    .rootd-step-button:hover {
        border-color: var(--rootd-primary);
    }

    .rootd-primary-button:hover {
        filter: brightness(.94);
    }

    .rootd-remove-button:hover {
        background: color-mix(in srgb, var(--rootd-error) 12%, transparent);
        color: var(--rootd-error);
    }

    .rootd-check-row:hover .rootd-row-button,
    .rootd-memo-row:hover .rootd-row-button,
    .rootd-progress-row:hover .rootd-row-button,
    .rootd-todo-row:hover .rootd-row-button,
    .rootd-schedule-row:hover .rootd-row-button,
    .rootd-row-button:hover {
        background: color-mix(in srgb, var(--rootd-primary) 8%, transparent);
        color: var(--rootd-title);
        opacity: 1;
    }

    .rootd-row-button--danger:hover {
        background: color-mix(in srgb, var(--rootd-error) 12%, transparent);
        color: var(--rootd-error);
    }

    .rootd-calendar-day:hover {
        z-index: 2;
        border-color: var(--rootd-accent);
        background: color-mix(in srgb, var(--rootd-accent) 6%, var(--rootd-panel));
        box-shadow: inset 0 0 0 1px var(--rootd-accent);
    }
}

@media (min-width: 900px) {
    .rootd-layout {
        grid-template-columns: minmax(240px, .72fr) minmax(0, 2.1fr);
        align-items: start;
    }

}

@media (max-width: 720px) {
    .rootd-panel-head {
        align-items: flex-start;
    }

    .rootd-todo-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .rootd-entry-row {
        flex-wrap: wrap;
    }

    .rootd-entry-row #rootd-todo-input {
        flex: 1 1 calc(100% - 130px);
    }

    .rootd-color-control {
        max-width: 100%;
        margin-right: 0;
    }

    .rootd-progress-controls {
        justify-content: flex-start;
    }

    .rootd-calendar-day {
        min-height: 62px;
        padding: 5px;
    }

    .rootd-calendar-bar {
        height: 4px;
        padding: 0;
        color: transparent;
    }

    .rootd-calendar-bar--more {
        height: auto;
        color: var(--rootd-muted);
        font-size: .58em;
    }

    .rootd-schedule-row--agenda {
        grid-template-columns: 58px auto minmax(0, 1fr) auto auto;
    }

    .rootd-schedule-row .rootd-remove-button {
        grid-column: auto;
    }

    .rootd-schedule-row--agenda .rootd-schedule-meta {
        grid-column: 3;
        grid-row: 2;
    }

    .rootd-schedule-row--agenda > .rootd-note-button {
        grid-column: 4;
        grid-row: 1;
    }

    .rootd-schedule-row--agenda > .rootd-row-actions {
        grid-column: 5;
        grid-row: 1;
    }

    .rootd-schedule-row--day {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
    }

    .rootd-schedule-row--day .rootd-schedule-meta {
        grid-column: 2;
        grid-row: 2;
    }

    .rootd-schedule-row--day > .rootd-note-button {
        grid-column: 3;
        grid-row: 1;
    }

    .rootd-schedule-row--day > .rootd-row-actions {
        grid-column: 4;
        grid-row: 1;
    }
}

@media (max-width: 430px) {
    .rootd-panel-head,
    .rootd-panel-body {
        padding-left: 11px;
        padding-right: 11px;
    }

    .rootd-todo-row {
        grid-template-columns: 54px auto auto minmax(0, 1fr) auto auto;
        gap: 5px;
    }

    .rootd-schedule-row--agenda {
        grid-template-columns: 54px auto minmax(0, 1fr) auto auto;
        gap: 5px;
    }

    .rootd-list-date {
        min-width: 48px;
    }

    .rootd-planner-toolbar {
        padding-right: 11px;
        padding-left: 11px;
    }

    .rootd-primary-button {
        min-height: 34px;
    }

    .rootd-entry-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(74px, .72fr) auto;
    }

    .rootd-entry-row .rootd-category-control {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .rootd-entry-row #rootd-entry-kind {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    .rootd-entry-row #rootd-todo-input {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .rootd-entry-row .rootd-add-button {
        grid-column: 3;
        grid-row: 1;
    }

    .rootd-entry-row > :where(input:not(#rootd-todo-input), select:not(#rootd-entry-kind):not(#rootd-entry-category), .rootd-option-button, .rootd-color-control) {
        grid-column: 1 / -1;
        width: 100%;
    }

    .rootd-progress-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rootd-progress-row {
        padding: 8px 7px 7px 9px;
    }

    .rootd-progress-controls {
        grid-column: 1 / -1;
    }

    .rootd-inline-edit,
    .rootd-inline-edit--routine,
    .rootd-inline-edit--todo,
    .rootd-inline-edit--progress,
    .rootd-inline-edit--event {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rootd-inline-edit > :where(input, select) {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .rootd-inline-weekdays {
        grid-column: 1 / -1;
    }

    .rootd-inline-edit .rootd-inline-actions {
        grid-column: 2;
    }

    .rootd-field-row {
        grid-template-columns: 1fr;
    }

    .rootd-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }
}

@media (max-width: 360px) {
    .rootd-progress-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rootd *,
    .rootd *::before,
    .rootd *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}