:root {
    --sidebar-bg:       #2c3e50;
    --sidebar-active:   #3d5f80;
    --sidebar-text:     #ecf0f1;
    --sidebar-muted:    #bdc3c7;
    --badge-bg:         #e74c3c;
    --input-bg:         #f8f9fa;
    --task-border:      #dee2e6;
    /* the layout sets the user's accent over these */
    --theme-color:      #f47c24;
    --theme-color-rgb:  244, 124, 36;

    /* the main area, dark mode swaps these below */
    --app-bg:           #f5f6f5;
    /* Transparency (Pro, Settings > Themes): the floating cards (task rows, the task panel, the add bar) are this solid,
       0.7 to 1, 0.9 unless they've picked one, the layout's head sets it from their theme; menus, popups and the sidebar stay solid */
    --card-opacity:     0.9;
    --surface:          rgba(255, 255, 255, var(--card-opacity));
    --surface-solid:    #ffffff;
    --surface-border:   #e0e0e0;
    --header-bg:        rgba(255, 255, 255, 0.8);
    --text-strong:      #2c3e50;
    --text-muted:       #6c757d;
    --line-soft:        #eeeeee;
}

[data-bs-theme="dark"] {
    --app-bg:           #15191e;
    --surface:          rgba(33, 37, 41, var(--card-opacity));
    --surface-solid:    #212529;
    --surface-border:   #343a40;
    --header-bg:        rgba(26, 30, 35, 0.85);
    --text-strong:      #e9ecef;
    --text-muted:       #adb5bd;
    --line-soft:        #343a40;
}

.row {
    width: 95%;
}

/* the task list and the task sidebar use the whole width, the sidebar's own margin is the gap at the right edge */
.row.task-columns {
    width: 100%;
}

/* no left margin: the task list's 1rem right padding is the gap between them, the same 1rem as the right edge */
.task-details-card {
    position: relative;
    margin: 1.5rem 1rem 0 0;
    /* a floating card: its own color, so Transparency (--card-opacity) applies to it too */
    --bs-card-bg: var(--surface);
}

/* phones: the task panel takes the whole screen, so it needs its own left edge */
@media (max-width: 991.98px) {
    .task-details-card {
        margin-left: 1rem;
    }
}
body {
    background-color: var(--app-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* the chosen background, fixed behind the main area (the sidebar covers the left) */
.app-background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 280px;
    right: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--app-bg);
}

.app-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* dims bright backgrounds in dark mode so text stays readable */
.app-background::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* (8-Bit and 80s Neon are dark already and use ::after for their own layers) */
[data-bs-theme="dark"] .app-background:not(.appbg-none):not(.appbg-8bit):not(.appbg-synthwave)::after {
    background: rgba(0, 0, 0, 0.45);
}

/* .appbg-<id> are the backgrounds in rockitlist::Model::Theme, also used for the previews in settings */
.appbg-dawn {
    background: linear-gradient(135deg, #ffd8b5 0%, #f7a8a8 50%, #c7b5e6 100%);
}

.appbg-ocean {
    background: linear-gradient(160deg, #b5ecff 0%, #5aa2d6 55%, #1f4e79 100%);
}

.appbg-aurora {
    background: linear-gradient(120deg, #0b1d3a, #134e5e, #3a7bd5, #6a3093, #0b1d3a);
    background-size: 400% 400%;
    animation: aurora-drift 30s ease infinite;
}

@keyframes aurora-drift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* shows while the rain video loads, and as the settings preview */
.appbg-rain {
    background: linear-gradient(180deg, #1b2735 0%, #3a4a5c 100%);
}

/* ---- 8-Bit: pixel art drawn small and scaled up crisp (the images are 192 x 120 and 40 x 40) ----
   the planet bobs a pixel at a time over the scene, and a second layer of stars blinks on and off */
.appbg-8bit {
    background:
        url('/assets/backgrounds/8bit-planet.png') 50% 34% / auto 33% no-repeat,
        url('/assets/backgrounds/8bit-scene.png') center bottom / cover no-repeat,
        #0a0f22;
    image-rendering: pixelated;
    animation: eightbit-float 4s steps(1) infinite;
}

/* two sets of twinkling stars, each on its own slow uneven cycle (13s and 19s, which hardly ever line up),
   so they fade down and back in a few chunky steps at what looks like random moments, never all together */
.appbg-8bit::before,
.appbg-8bit::after {
    content: '';
    position: absolute;
    inset: 0;
    image-rendering: pixelated;
}

.appbg-8bit::before {
    background: url('/assets/backgrounds/8bit-stars.png') center bottom / cover no-repeat;
    animation: eightbit-twinkle-a 13s steps(1) infinite;
}

.appbg-8bit::after {
    background: url('/assets/backgrounds/8bit-stars2.png') center bottom / cover no-repeat;
    animation: eightbit-twinkle-b 19s steps(1) infinite;
    animation-delay: -7s;
}

@keyframes eightbit-float {
    0%   { background-position: 50% 34%, center bottom; }
    25%  { background-position: 50% 35%, center bottom; }
    50%  { background-position: 50% 36%, center bottom; }
    75%  { background-position: 50% 35%, center bottom; }
}

/* mostly bright, with a slow dim-and-back now and then, stepped like an old console's palette fade */
@keyframes eightbit-twinkle-a {
    0%   { opacity: 1; }
    18%  { opacity: 0.7; }
    21%  { opacity: 0.4; }
    24%  { opacity: 0.15; }
    28%  { opacity: 0.4; }
    31%  { opacity: 0.7; }
    34%  { opacity: 1; }
    61%  { opacity: 0.6; }
    64%  { opacity: 0.3; }
    68%  { opacity: 0.6; }
    71%  { opacity: 1; }
}

@keyframes eightbit-twinkle-b {
    0%   { opacity: 1; }
    9%   { opacity: 0.65; }
    11%  { opacity: 0.3; }
    14%  { opacity: 0; }
    19%  { opacity: 0.3; }
    21%  { opacity: 0.65; }
    23%  { opacity: 1; }
    47%  { opacity: 0.55; }
    50%  { opacity: 0.2; }
    53%  { opacity: 0.55; }
    56%  { opacity: 1; }
    82%  { opacity: 0.7; }
    85%  { opacity: 0.35; }
    88%  { opacity: 0.7; }
    90%  { opacity: 1; }
}

/* ---- 70s Retro: a patchwork tile, 8 x 8 squares of stripes, checks and dots, scaled up 4 times ---- */
.appbg-retro {
    background: #2e1a12 url('/assets/backgrounds/retro-tile.png') 0 0 / 512px 512px repeat;
    image-rendering: pixelated;
}

/* ---- 80s Neon: the warrior picture (assets/backgrounds/synthwave-hero.png, 768 x 1152) ----
   the picture fills the height, centred, and its sides fade into a css synthwave scene so it fits any width:
     the element:  purple sky, twinkling stars and neon rays sweeping round behind him
     ::after:      the neon grid floor in perspective, rolling towards you
     ::before:     the picture on top, with the sword's glow humming, his eyes glowing, crt scanlines,
                   and every few seconds a quick vhs glitch
   the glows sit where they are in the picture: 1cqh is 1% of the height the picture fills, and the picture is
   2/3 as wide as it is tall, so a spot x% across it is (x - 50) * 0.667 cqh from the middle */

/* animatable numbers for the hum, the sweep and the twinkle (browsers without @property just show them still) */
@property --synth-rays {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --synth-twinkle {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.appbg-synthwave {
    container-type: size;
    isolation: isolate;
    background:
        radial-gradient(1.5px 1.5px at 22px 28px, rgba(255, 255, 255, var(--synth-twinkle)) 50%, transparent 55%) 0 0 / 140px 110px,
        radial-gradient(1px 1px at 70px 80px, #ffd6ff 50%, transparent 55%) 0 0 / 90px 70px,
        radial-gradient(1.5px 1.5px at 40px 15px, rgba(158, 240, 255, var(--synth-twinkle)) 50%, transparent 55%) 0 0 / 120px 95px,
        repeating-conic-gradient(from var(--synth-rays) at 50% 45%, rgba(255, 90, 170, 0.16) 0deg 2deg, transparent 2deg 16deg),
        radial-gradient(ellipse 55% 35% at 50% 50%, rgba(170, 60, 255, 0.45), transparent 70%),
        linear-gradient(to bottom, #07021a 0%, #160532 35%, #3a0b62 55%, #6a1a8a 60%, #12031f 60%, #12031f 100%);
    animation: synthwave-rays 9s linear infinite, synthwave-twinkle 2.2s steps(1) infinite;
}

.appbg-synthwave::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: auto;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 40%;
    border-top: 2px solid #ff6ad5;
    background-color: #12031f;
    background-image:
        linear-gradient(to right, rgba(255, 61, 240, 0.75) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 61, 240, 0.75) 2px, transparent 2px);
    background-size: 60px 60px;
    transform: perspective(220px) rotateX(55deg);
    transform-origin: top center;
    /* one grid square every 4.5s, a slow steady roll */
    animation: synthwave-grid 4.5s linear infinite;
}

.appbg-synthwave::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        /* crt scanlines */
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(10, 0, 30, 0.22) 2px 3px),
        url('/assets/backgrounds/synthwave-hero.png') center / auto 100% no-repeat;
    /* the picture's left and right edges fade into the scene behind */
    -webkit-mask-image: linear-gradient(to right, transparent calc(50% - 33.4cqh), #000 calc(50% - 24cqh), #000 calc(50% + 24cqh), transparent calc(50% + 33.4cqh));
    mask-image: linear-gradient(to right, transparent calc(50% - 33.4cqh), #000 calc(50% - 24cqh), #000 calc(50% + 24cqh), transparent calc(50% + 33.4cqh));
    animation: synthwave-glitch 7s steps(1) infinite;
}

/* the glows, made from the picture itself (synthwave-sword-glow.png and synthwave-eyes-glow.png, soft halos traced from
   the blade, its gems and the two eyes), laid exactly over it and faded in and out on their own timings.
   they're two empty spans inside the background (default.html.ep, theme.js applyThemeBackground, the Settings preview) */
.synthwave-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    /* adds light, like a real glow */
    mix-blend-mode: screen;
}

/* the sword's edges: a gentle glow in and out */
.synthwave-glow-sword {
    background-image: url('/assets/backgrounds/synthwave-sword-glow.png');
    animation: synthwave-sword 7s ease-in-out infinite;
}

/* his eyes: dark, slowly lit, held a moment, slowly out */
.synthwave-glow-eyes {
    background-image: url('/assets/backgrounds/synthwave-eyes-glow.png');
    animation: synthwave-eyes 6s ease-in-out infinite;
}

@keyframes synthwave-sword {
    0%, 100% { opacity: 0.15; }
    50%      { opacity: 0.55; }
}

@keyframes synthwave-eyes {
    0%, 100% { opacity: 0; }
    45%, 60% { opacity: 0.8; }
}

/* held still for people who've asked for less motion: a soft steady glow */
@media (prefers-reduced-motion: reduce) {
    .synthwave-glow-sword {
        opacity: 0.35;
    }

    .synthwave-glow-eyes {
        opacity: 0.6;
    }
}

@keyframes synthwave-grid {
    from { background-position: 0 0; }
    to   { background-position: 0 60px; }
}

/* the rays repeat every 16deg, so turning 16deg loops without a jump */
@keyframes synthwave-rays {
    from { --synth-rays: 0deg; }
    to   { --synth-rays: 16deg; }
}

@keyframes synthwave-twinkle {
    0%   { --synth-twinkle: 1; }
    30%  { --synth-twinkle: 0.2; }
    45%  { --synth-twinkle: 1; }
    80%  { --synth-twinkle: 0.4; }
}

/* the sword hums */
/* a quick vhs glitch: a jolt sideways and a colour shift, then back, near the end of each 7 seconds */
@keyframes synthwave-glitch {
    0%   { transform: none; filter: none; }
    90%  { transform: translateX(4px); filter: hue-rotate(35deg) saturate(1.6); }
    91%  { transform: translateX(-3px); filter: hue-rotate(-25deg) contrast(1.2); }
    92%  { transform: translateX(2px) skewX(-1deg); filter: none; }
    93%  { transform: none; filter: none; }
}

/* the previews in Settings > Themes hold the layers too */
.theme-bg-preview.appbg-8bit,
.theme-bg-preview.appbg-synthwave {
    position: relative;
    overflow: hidden;
}

.theme-bg-preview.appbg-retro {
    background-size: 128px 128px;
}

@media (prefers-reduced-motion: reduce) {
    .appbg-aurora,
    .appbg-8bit,
    .appbg-8bit::before,
    .appbg-8bit::after,
    .appbg-synthwave,
    .appbg-synthwave::before,
    .appbg-synthwave::after,
    .synthwave-glow {
        animation: none;
    }
}

.theme-color {
    background-color: var(--theme-color);
    color: white;
}

/* small round icon buttons next to the user's name (bell, settings) */
.sidebar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 1.05rem;
}
.sidebar-icon-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}
.sidebar-icon-badge {
    font-size: 0.65rem;
    padding: 0.2em 0.45em;
}

/* the bell's dropdown */
.notifications-menu {
    width: 320px;
    max-width: calc(100vw - 2rem);
}

/* a text button in the theme color, a light theme tint behind it on hover */
.notifications-read-all {
    padding: 0.15rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-color);
    transition: background-color 0.12s;
}

.notifications-read-all:hover,
.notifications-read-all:focus-visible {
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
}

.notifications-list {
    max-height: 60vh;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    white-space: normal;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-icon {
    color: var(--theme-color);
    margin-top: 0.15rem;
}

.notification-text {
    flex-grow: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.notification-meta {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.notification-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.45rem;
    border-radius: 50%;
    background-color: var(--theme-color);
    flex-shrink: 0;
}

.notification-item.is-read .notification-title {
    font-weight: 400;
}

.notification-item.is-read .notification-dot {
    visibility: hidden;
}

.notifications-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* the toast body is a button so it can be clicked to open the task */
.notification-toast-body {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
}

/* looks like a search box, opens the search modal */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.sidebar-search:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}


#sidebar {
  width: 280px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(to top, var(--sidebar-bg), #14202f);
  color: var(--sidebar-text);
  border-right: 1px solid #14202f;
  display: flex;              /* ← important */
  flex-direction: column;     /* ← important */
  /* above the main content, so the bell's dropdown (which lives in here) draws over the page,
     below bootstrap's modals (1050+), tooltips and toasts */
  z-index: 1020;
}

.sidebar-content {
    flex: 1;                    /* take full available height */
    display: flex;
    flex-direction: column;
    min-height: 0;              /* prevents overflow issues in some browsers */
    scrollbar-color: #1a2737 #3d5f80;
    scrollbar-width: thin;
}

.sidebar-bottom {
  background: rgba(0,0,0,0.15); /* subtle separation – optional */
  flex-shrink: 0;             /* don't let it shrink */
}

.add-list-btn {
  color: var(--sidebar-muted);
  transition: all 0.15s;
}

.add-list-btn:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}

#sidebar-header {
    padding: 1.0rem 1.0rem;
    border-bottom: 1px solid #14202f;
    display: flex;
    align-items: center;
    gap: 12px;
}

#sidebar-logo {
    height: 24px;
    width: auto;
}

/* 1rem at the sides, the same as the lists below (bootstrap's list-group-item), the LISTS heading and search,
   so the names and the counts on the right line up all the way down */
.nav-link {
    color: var(--sidebar-muted);
    padding: 0.65rem 1rem;
    transition: all 0.15s;
}

.nav-link:hover {
    color: white;
    background-color: rgba(255,255,255,0.08);
}

.nav-link.active {
    background-color: var(--sidebar-active);
    color: white;
    font-weight: 500;
    border-left: 4px solid var(--theme-color);
}

/* the counts next to Inbox, Today, Week and Assigned to me, in the theme color rather than the default badge red */
#sidebar .nav-link .badge {
    color: #fff;
    background-color: var(--theme-color);
}

.badge {
    background-color: var(--badge-bg);
    font-size: 0.68rem;
    padding: 0.35em 0.6em;
}

/* badges marked theme-color (the Pro tags) are the theme's accent, .badge above would otherwise make them red */
.badge.theme-color {
    background-color: var(--theme-color);
}

.list-group-item {
    border: none;
    cursor: pointer;
    color: var(--sidebar-text);
    background: transparent;
}

.right-sidebar-item {
    color: inherit !important;
    background: inherit !important;
}

.list-group-item-text {
    margin-left: 10px;
}

.list-group-item:hover {
    background-color: rgba(255,255,255,0.06);
}

.list-group-item.active {
    background-color: var(--sidebar-active);
    color: white;
}

/* the open list gets the same accent bar as the open smart list (.nav-link.active) */
#sidebar .list-group-item.active {
    font-weight: 500;
    border-left: 4px solid var(--theme-color);
}

/* search results sit on the white modal, not the dark sidebar, so use the normal page colors */
.list-group-item.search-result {
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.list-group-item.search-result:hover,
.list-group-item.search-result:focus {
    background-color: var(--bs-tertiary-bg);
}

/* Main Content Area */
#main-content {
    margin-left: 280px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#list-header {
    padding: 0.5rem 2.5rem 0.5rem;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--surface-border);
    flex-shrink: 0;
}

/* settings scrolls inside #main-content, which is the height of the screen */
.settings-page {
    flex-grow: 1;
    overflow-y: auto;
    /* keeps room for the scrollbar on short sections too, so the layout doesn't jump between sections */
    scrollbar-gutter: stable;
    padding: 1.5rem 1rem;
}

/* settings menu on the left, the open section on the right, stacked on phones
   minmax(0, 1fr) so wide content in a section can't push the columns around */
.settings-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
}

/* .list-group-item is styled for the dark sidebar, the settings menu sits on the page */
.settings-nav {
    position: sticky;
    top: 0;
}

.settings-nav .list-group-item {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.settings-nav .list-group-item + .list-group-item {
    border-top-width: 0;
}

.settings-nav .list-group-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.settings-nav .list-group-item.active {
    color: white;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

/* the Terms and Privacy links sit on the page, not in the dark sidebar */
.settings-legal-link {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.settings-legal-link + .settings-legal-link {
    border-top-width: 0;
}

.settings-legal-link:hover {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
}

/* Transparency: the settings page's cards and its menu float over the background like the task cards,
   so they use the same see-through card color (--surface, --card-opacity), and the rows and choices inside a card
   let the card show through rather than painting a solid color of their own */
.settings-page .card {
    --bs-card-bg: var(--surface);
}

.settings-nav .list-group-item,
.settings-legal-link {
    background-color: var(--surface);
}

.settings-page .card .shared-row,
.settings-page .card .invite-row,
.settings-page .card .theme-option {
    background-color: transparent;
}

/* invite friends: the big number of invites left, and the list of who's been invited */
.invite-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
    border-radius: 16px;
}

.invite-email:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.invite-row {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.invite-row-icon {
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
}

.invite-row-icon.is-joined {
    color: var(--theme-color);
}

.invite-badge {
    font-weight: 500;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.invite-badge.is-joined {
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
    border-color: transparent;
}

/* switches in settings, in the theme color rather than bootstrap blue */
.settings-switch:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.settings-switch:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 25%, transparent);
}

/* the plan cards' feature lists, icons in the theme color */
/* the icon in a fixed column, the text (one span, so its spaces and bold words stay together) wraps beside it */
/* the price on the right of each plan's header: the amount, then a smaller muted "/yr" */
.plan-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}

.plan-price-period {
    margin-left: 0.1rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.plan-features li > .bi {
    flex-shrink: 0;
    width: 1.1rem;
    margin-top: 0.1rem;
    text-align: center;
    color: var(--theme-color);
}

.plan-features li > span {
    flex: 1;
    min-width: 0;
}

.plan-features li.is-soon {
    color: var(--bs-secondary-color);
}

.plan-soon {
    margin-left: 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.settings-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* theme pickers */
.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.theme-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.theme-option:hover {
    border-color: rgba(var(--theme-color-rgb), 0.6);
}

.theme-option.is-selected {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), 0.25);
}

.theme-option:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

.theme-option .bi {
    font-size: 1.5rem;
}

.theme-option.is-locked .theme-option-label {
    color: var(--text-muted);
}

/* Settings > Themes > Transparency: the slider in the theme color, and the percent it's at */
.theme-opacity-range {
    flex: 1;
}

.theme-opacity-range::-webkit-slider-thumb {
    background-color: var(--theme-color);
}

.theme-opacity-range::-moz-range-thumb {
    background-color: var(--theme-color);
}

.theme-opacity-value {
    min-width: 3rem;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* the small Pro tag in the corner of a locked theme choice */
.theme-lock {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2em 0.45em;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1;
}

/* .theme-option .bi makes the choices' own icons big, not the gem in this tag */
.theme-option .theme-lock .bi {
    font-size: inherit;
}

.theme-swatch {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--swatch);
}

.theme-bg-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.35rem;
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}

.theme-bg-preview.appbg-none {
    background: var(--app-bg);
    color: var(--text-muted);
}

/* summernote's editor is white by default */
[data-bs-theme="dark"] .note-editor .note-editable,
[data-bs-theme="dark"] .note-editor .note-toolbar {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

#list-header h1 {
    font-size: 2.2rem;
    margin: 0;
    font-weight: 600;
    color: var(--text-strong);
}

#new-task-input {
    margin: 1.5rem 1.0rem 0;
    position: relative;
    flex-shrink: 0;
}

#new-task-input input {
    width: 100%;
    padding: 1rem 1.5rem 1rem 3.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    /* a floating card, Transparency applies */
    background: var(--surface);
    color: var(--bs-body-color);
    font-size: 1.1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s;
}

#new-task-input input:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb), 0.25);
}

/* under the note editor: a reminder it saves itself, and a Save button anyway */
.note-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.note-editor-hint {
    margin-right: auto;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- the Reports and Share buttons in the list header: plain matching buttons, the color is in their icons ---- */

.list-print-button,
.list-share-icon,
.list-public-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.75rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    color: var(--bs-body-color);
    background-color: var(--surface);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}

.list-print-button {
    margin-top: 3px;
}

/* every header button keeps 0.5rem on its left (see .list-people), Reports too, so Public doesn't touch it */
#list-print {
    margin-left: 0.5rem;
}

/* the gear (rename, delete): the same look as Reports and Share, square, at the far right */
.list-settings-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 3px 0 0 0.5rem;
    padding: 0;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    color: var(--text-muted);
    background-color: var(--surface);
    font-size: 1rem;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.list-settings-button:hover,
.list-settings-button:focus-visible,
.list-settings-button[aria-expanded="true"] {
    color: var(--bs-body-color);
    border-color: color-mix(in srgb, currentColor 35%, var(--surface-border));
}

.list-print-button .bi,
.list-share-icon .bi,
.list-public-badge .bi {
    font-size: 1rem;
}

/* public: the list has a public page, a blue → teal → green globe on a faint wash of the same */
.list-public-badge {
    margin: 3px 0 0 0.5rem;
    border-color: color-mix(in srgb, #14b8a6 45%, var(--surface-border));
    background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(20, 184, 166, 0.12), rgba(34, 197, 94, 0.12));
}

.list-public-badge .bi,
.list-public-icon {
    background-image: linear-gradient(135deg, #3b82f6 0%, #14b8a6 50%, #22c55e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.list-public-badge:hover,
.list-public-badge:focus-visible {
    border-color: #14b8a6;
    background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(20, 184, 166, 0.2), rgba(34, 197, 94, 0.2));
}

/* the small globe after a public list's name in the sidebar */
.list-public-icon {
    margin-left: 0.4rem;
    font-size: 0.8rem;
}

/* reports: a colorful icon, whatever the theme */
.list-print-button .bi {
    background-image: linear-gradient(135deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.list-print-button:hover,
.list-print-button:focus-visible,
.list-print-button[aria-expanded="true"] {
    border-color: color-mix(in srgb, #ec4899 55%, var(--surface-border));
    background-color: color-mix(in srgb, #ec4899 8%, var(--surface));
}

/* very narrow phones: just the icons */
@media (max-width: 575.98px) {
    .header-action-label {
        display: none;
    }

    .list-print-button,
    .list-share-icon,
    .list-public-badge {
        padding: 0 0.6rem;
    }
}

.print-menu {
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.print-menu-heading {
    padding: 0.35rem 0.6rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color);
}

/* one choice: an icon in a tinted tile, the name, a line about it */
.print-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem;
    border-radius: 10px;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: background-color 0.12s;
}

.print-option:hover,
.print-option:focus-visible {
    color: var(--bs-body-color);
    background-color: color-mix(in srgb, var(--theme-color) 10%, transparent);
}

.print-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    transition: background-color 0.12s, color 0.12s;
}

.print-option:hover .print-option-icon {
    color: #fff;
    background-color: var(--theme-color);
}

.print-option-text {
    min-width: 0;
}

.print-option-title {
    display: block;
    font-weight: 500;
    line-height: 1.25;
}

/* wraps onto a second line rather than being cut off with an ellipsis */
.print-option-desc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

/* a Pro option on a free plan, a little faded with the badge saying why */
.print-option.is-locked .print-option-icon {
    opacity: 0.6;
}

.pro-badge {
    margin-left: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: 0.1em;
}

.print-menu-footer {
    margin-top: 0.35rem;
    padding: 0.65rem 0.6rem 0.3rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    font-size: 0.85rem;
}

/* the switch in the theme color, not bootstrap blue */
.print-menu .form-check-input:checked {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

.print-menu .form-check-input:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 25%, transparent);
}

/* the login card */
.login-card {
    max-width: 420px;
    width: 100%;
    background: linear-gradient(to top, var(--sidebar-bg), #14202f);
    color: var(--sidebar-text);
}

.login-sub {
    color: rgba(255, 255, 255, 0.72);
}

.login-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-link:hover {
    color: #fff;
}

.login-or {
    color: rgba(255, 255, 255, 0.55);
}

.login-or hr {
    border-color: rgba(255, 255, 255, 0.25);
    opacity: 1;
}

/* the 6 digits, big and spaced so they're easy to check */
.login-code-input {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* came from an invite link: who invited them, on the dark login card */
.invite-welcome {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #fff;
    background-color: rgba(244, 124, 36, 0.16);
    border: 1px solid rgba(244, 124, 36, 0.4);
    border-radius: 10px;
}

.invite-welcome .bi {
    font-size: 1.15rem;
    color: #f8a061;
}

/* a wrong invite code, on the dark login card bootstrap's dark red is hard to read, so a lighter one */
.invite-error {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #ffb4ab;
    background-color: rgba(220, 53, 69, 0.15);
    border-radius: 6px;
}

/* ---- terms, privacy and the agree page (login layout) ---- */

/* the same dark card as the login page */
.legal-welcome-card {
    max-width: 460px;
    width: 100%;
    background: linear-gradient(to top, var(--sidebar-bg), #14202f);
    color: var(--sidebar-text);
}

.legal-welcome-sub {
    color: rgba(255, 255, 255, 0.75);
}

.legal-welcome-card .form-check-input {
    border-color: rgba(255, 255, 255, 0.5);
}

.legal-page {
    max-width: 780px;
}

.legal-page article {
    line-height: 1.65;
}

.legal-back {
    color: var(--text-muted);
    text-decoration: none;
}

.legal-back:hover {
    color: var(--text-strong);
}

/* ---- pasting a list into the new task box ---- */

.paste-tasks-bar {
    margin: 0.5rem 1rem 0;
    padding: 0.75rem 1rem;
    background-color: var(--surface-solid);
    border: 1px solid var(--theme-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.paste-tasks-heading {
    font-weight: 500;
    color: var(--text-strong);
}

.paste-tasks-heading .bi {
    color: var(--theme-color);
}

.paste-tasks-preview {
    margin: 0.4rem 0 0.6rem;
    padding-left: 1.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.paste-tasks-preview li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paste-tasks-more {
    list-style: none;
    font-style: italic;
}

.paste-tasks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* ---- sharing ---- */

/* a round face, or initials on a theme tint */
.person-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    font-weight: 600;
    line-height: 1;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 16%, var(--surface-solid, #fff));
}

.person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the faces and share button at the top right of a list */
/* the header buttons float in from the right (gear, faces + Share, Reports), each keeps 0.5rem on its left,
   so they're evenly spaced and the faces don't touch Reports */
.list-people {
    margin: 2px 0 0 0.5rem;
}

.list-people-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 3px 2px 2px;
    border: none;
    border-radius: 999px;
    background: none;
}

.list-avatars {
    display: inline-flex;
}

/* the faces overlap a little, with a ring so each one reads */
.list-avatars .person-avatar {
    box-shadow: 0 0 0 2px var(--header-bg, #fff);
}

.list-avatars .person-avatar + .person-avatar {
    margin-left: -8px;
}

.person-more {
    width: 30px;
    height: 30px;
    font-size: 0.72rem;
}

/* share: the button itself is styled with the Reports one above, its icon is always green whatever the theme */
.list-share-icon .bi {
    color: #22c55e;
}

.list-people-button:hover .list-share-icon,
.list-people-button:focus-visible .list-share-icon {
    border-color: color-mix(in srgb, #22c55e 55%, var(--surface-border));
    background-color: color-mix(in srgb, #22c55e 8%, var(--surface));
}

/* the Share window */
.share-modal .modal-content,
.share-modal {
    border-radius: 16px;
}

.share-email:focus {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 20%, transparent);
}

.share-people-heading {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bs-secondary-color);
}

/* the Public link part of the Share window, under the people */
.share-public {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.share-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.share-person:last-child {
    border-bottom: none;
}

.share-person-text {
    flex: 1;
    min-width: 0;
}

.share-person-name {
    font-weight: 500;
}

.share-person-email {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-owner-badge {
    font-weight: 500;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
}

/* who a task is for, on the task row */
.task-assignee .person-avatar {
    font-size: 0.6rem !important;
}

/* the assign row and its picker in the task sidebar */
.assign-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.assign-row-avatar {
    display: inline-flex;
    width: 24px;
    justify-content: center;
}

.assign-row-label {
    flex: 1;
    margin-left: 0;
}

.assign-row.is-set .assign-row-label {
    color: var(--theme-color);
}

.assign-row-caret {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.assign-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: inherit;
    text-align: left;
}

.assign-option:hover {
    background-color: color-mix(in srgb, var(--theme-color) 10%, transparent);
}

.assign-option.is-current {
    font-weight: 600;
    color: var(--theme-color);
}

.assign-nobody {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

/* Settings > Shared lists */
.shared-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

.shared-row-main {
    flex: 1;
    min-width: 0;
}

/* Settings > Deleted lists: Restore and Delete forever side by side, stacked under the name on phones */
.deleted-list-row {
    cursor: default;
}

.deleted-list-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .deleted-list-row {
        flex-wrap: wrap;
    }

    .deleted-list-actions {
        width: 100%;
    }
}

.shared-row-title {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.shared-row-title:hover {
    color: var(--theme-color);
}

.shared-row-people {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    margin-top: 0.35rem;
}

.shared-person {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

/* ---- installing as an app ---- */

/* the phone banner, along the bottom above everything but dialogs */
.install-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: var(--sidebar-text);
    background: linear-gradient(to top, var(--sidebar-bg), #14202f);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    animation: install-banner-in 0.3s ease-out;
}

@keyframes install-banner-in {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .install-banner {
        animation: none;
    }
}

.install-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.install-banner-text {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.install-banner-text strong {
    display: block;
    font-size: 0.95rem;
}

.install-banner-text span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.install-banner .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.7;
    flex-shrink: 0;
}

/* the install card in Settings > General */
.settings-install-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    border-radius: 12px;
}

/* the iPhone steps */
.install-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.install-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.install-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    font-size: 1.05rem;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    border-radius: 9px;
}

/* ---- keyboard shortcut hints ---- */

.shortcut-hint {
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid var(--surface-border);
    box-shadow: none;
}

/* the N inside the new task box, gone while typing */
#new-task-input .new-task-hint {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

#new-task-input input {
    padding-right: 3rem;
}

#new-task-input input:focus + .new-task-hint {
    display: none;
}

/* the / in the sidebar's search bar */
.sidebar-search .shortcut-hint {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.2);
}

/* the line of shortcuts at the bottom of the sidebar */
.sidebar-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    padding: 0.4rem 1rem 0.6rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
}

.sidebar-shortcuts kbd {
    font-family: inherit;
    font-size: 0.68rem;
    padding: 0.1rem 0.3rem;
    margin-right: 0.2rem;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    box-shadow: none;
}

.sidebar-shortcuts button {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
}

.sidebar-shortcuts button:hover {
    color: #fff;
}

/* the ? list */
.shortcut-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.shortcut-row:last-child {
    border-bottom: none;
}

.shortcut-label {
    flex: 1;
}

.shortcut-keys {
    display: flex;
    gap: 0.25rem;
}

.shortcut-keys kbd {
    font-family: inherit;
    font-size: 0.75rem;
    min-width: 1.6rem;
    text-align: center;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: none;
}

#new-task-input .bi-plus-circle {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.4rem;
}

/* the page scrolls, not this list (it grows with its tasks). clip, not hidden: hidden (or overflow-y: auto) made it
   look like a scroll box to JSort, which then scrolled it instead of the page while dragging, so a task couldn't be
   dragged past the top or bottom of the screen */
#tasks-list {
    padding: 1rem 1.0rem 2rem;
    overflow-x: clip;
    flex: 1;
}

/*.task-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--task-border);
    gap: 1rem;
}*/
.task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* room on the left so the move handle (or the checkbox on completed tasks) isn't against the edge */
    padding: 5px 5px 5px 0.85rem;
    border-bottom: 1px solid var(--surface-border);
    background-color: var(--surface);
    position: relative;
    z-index: 1;
    margin-bottom: 3px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

.task-item:last-child {
    border-bottom: none;
}

/* the task picked in search, a ring in the theme color that pulses then fades */
.task-item.search-hit {
    animation: search-hit 3s ease-out;
    z-index: 2;
}

@keyframes search-hit {
    0%   { box-shadow: 0 0 0 3px var(--theme-color); }
    15%  { box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb),0.35); }
    30%  { box-shadow: 0 0 0 3px var(--theme-color); }
    45%  { box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb),0.35); }
    60%  { box-shadow: 0 0 0 3px var(--theme-color); }
    100% { box-shadow: 0 0 0 3px rgba(var(--theme-color-rgb),0); }
}

.task-checkbox {
    margin-top: 0.3rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
}

.task-checkbox:hover {
    color: var(--theme-color);
}

.task-text {
    flex: 1;
    font-size: 1.0rem;
    color: var(--text-strong);
    font-weight: 400;
}

.task-text.completed {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.8;
}

.task-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.task-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.task-body .task-text {
    flex: 0 1 auto;
}

/* note icon inline with the title, hover it to see the note */
.task-note-indicator {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 1px 4px;
    border-radius: 4px;
    cursor: default;
}

.task-note-indicator:hover,
.task-note-indicator:focus-visible {
    color: var(--theme-color);
    background-color: rgba(var(--theme-color-rgb),0.1);
    outline: none;
}

.task-note-indicator:focus-visible {
    box-shadow: 0 0 0 2px var(--theme-color);
}

/* due date and reminder chips on the task bar */
.task-body {
    flex-wrap: wrap;
}

.task-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---- the calendar (Pro) ---- */

.calendar {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
}

.calendar-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.calendar-month {
    margin: 0 auto 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-strong);
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-nav-button,
.calendar-today-button {
    height: 32px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: none;
    color: var(--text-strong);
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}

.calendar-nav-button {
    width: 32px;
}

.calendar-today-button {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.calendar-nav-button:hover,
.calendar-today-button:hover {
    color: var(--theme-color);
    border-color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 8%, transparent);
}

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

.calendar-weekday {
    padding: 0 0.4rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* one day: the date top left, a few task names under it */
.calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-height: 96px;
    padding: 0.35rem 0.4rem;
    text-align: left;
    color: var(--text-strong);
    background-color: color-mix(in srgb, var(--surface-solid) 70%, transparent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}

.calendar-day:hover {
    background-color: color-mix(in srgb, var(--surface-solid) 85%, var(--theme-color));
}

.calendar-day.is-other-month {
    opacity: 0.45;
}

.calendar-day.is-selected {
    border-color: var(--theme-color);
    box-shadow: 0 0 0 1px var(--theme-color);
}

.calendar-date {
    align-self: flex-start;
    min-width: 1.6rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    border-radius: 999px;
}

/* today's date in a theme color pill */
.calendar-day.is-today .calendar-date {
    color: #fff;
    background-color: var(--theme-color);
    font-weight: 600;
}

.calendar-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.calendar-item {
    padding: 1px 6px;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-strong);
    background-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    border-left: 3px solid var(--theme-color);
    border-radius: 3px;
}

.calendar-item.is-pinned {
    font-weight: 600;
}

.calendar-item.is-overdue {
    background-color: rgba(220, 53, 69, 0.12);
    border-left-color: #dc3545;
}

.calendar-item.is-done {
    color: var(--text-muted);
    text-decoration: line-through;
    background-color: transparent;
    border-left-color: var(--surface-border);
}

.calendar-more {
    padding-left: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* phones: the names don't fit, a dot says there's something that day */
.calendar-dot {
    display: none;
}

@media (max-width: 640px) {
    .calendar {
        padding: 0.6rem;
    }
    .calendar-day {
        min-height: 48px;
        align-items: center;
    }
    .calendar-date {
        align-self: center;
    }
    .calendar-items {
        display: none;
    }
    .calendar-dot {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--theme-color);
    }
}

.calendar-agenda-title {
    padding-top: 0.25rem;
}

/* free plans: a faded made-up month with the Pro note over it */
.calendar-locked {
    position: relative;
    min-height: 420px;
    margin-bottom: 1rem;
}

.calendar-locked-preview {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 1rem;
    opacity: 0.45;
    filter: blur(1.5px);
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
}

.calendar-locked-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 70px;
    padding: 0.4rem;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}

.calendar-locked-bar {
    height: 8px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--theme-color) 35%, transparent);
}

.calendar-locked-bar.is-short {
    width: 60%;
}

.calendar-locked-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 2rem));
    padding: 1.5rem;
    text-align: center;
    background-color: var(--surface-solid);
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.calendar-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 14%, transparent);
    border-radius: 14px;
}

.calendar-locked-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-strong);
}

.calendar-locked-card p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* the Pro tag on the Calendar link in the sidebar */
.sidebar-pro-badge {
    font-size: 0.62rem;
    font-weight: 600;
}

/* the bar chart at the top of Week, one column per day */
.week-strip {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem 0.75rem 0.65rem;
    margin-bottom: 1rem;
    background-color: var(--surface);
    border: 1px solid var(--surface-border);
    border-radius: 12px;
}

.week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.15rem 0.3rem;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s;
}

.week-day:hover,
.week-day:focus-visible {
    background-color: var(--line-soft);
}

.week-day.is-empty {
    cursor: default;
}

.week-day.is-empty:hover {
    background: none;
}

/* the bars stand on a shared baseline */
.week-bar-track {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 64px;
    border-bottom: 1px solid var(--surface-border);
}

.week-bar {
    display: block;
    width: min(60%, 28px);
    border-radius: 4px 4px 0 0;
    background-color: var(--theme-color);
    opacity: 0.55;
    transform-origin: bottom;
    transition: opacity 0.15s;
}

/* today's bar is the solid one, the rest step back */
.week-day.is-today .week-bar,
.week-day:hover .week-bar {
    opacity: 1;
}

.week-day.is-overdue .week-bar {
    background-color: #dc3545;
    opacity: 0.85;
}

/* a day with nothing due still shows a stub, so the row of days reads as a row */
.week-day.is-empty .week-bar {
    height: 3px !important;
    background-color: var(--surface-border);
    opacity: 1;
}

.week-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.week-count {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-strong);
}

.week-day.is-today .week-label {
    color: var(--theme-color);
    font-weight: 700;
}

.week-day.is-overdue .week-label {
    color: #dc3545;
}

.week-day.is-empty .week-count {
    color: var(--text-muted);
    font-weight: 400;
}

.week-strip.is-animated .week-bar {
    animation: week-bar-grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.week-strip.is-animated .week-day:nth-child(2) .week-bar { animation-delay: 0.04s; }
.week-strip.is-animated .week-day:nth-child(3) .week-bar { animation-delay: 0.08s; }
.week-strip.is-animated .week-day:nth-child(4) .week-bar { animation-delay: 0.12s; }
.week-strip.is-animated .week-day:nth-child(5) .week-bar { animation-delay: 0.16s; }
.week-strip.is-animated .week-day:nth-child(6) .week-bar { animation-delay: 0.2s; }
.week-strip.is-animated .week-day:nth-child(7) .week-bar { animation-delay: 0.24s; }
.week-strip.is-animated .week-day:nth-child(8) .week-bar { animation-delay: 0.28s; }

@keyframes week-bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .week-strip.is-animated .week-bar {
        animation: none;
    }
}

/* phones: smaller labels so 8 columns fit */
@media (max-width: 480px) {
    .week-strip {
        gap: 0.15rem;
        padding-inline: 0.4rem;
    }
    .week-label {
        font-size: 0.65rem;
        letter-spacing: 0;
    }
}

/* day headings in the Today and Week views */
.task-group-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.75rem 0.25rem 0.35rem;
}

.task-group-header:first-child {
    padding-top: 0;
}

.task-group-header.is-overdue {
    color: #dc3545;
}

/* the list being switched away from, faded and not clickable until the new one comes (see showTasksLoading) */
.tasks-switching {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* a task just added on this page, shown before the server has saved it (see newItem.js) */
.task-item.is-pending {
    opacity: 0.6;
    pointer-events: none;
}

/* a new task that couldn't be saved, its text is back in the box (see undoTaskNow in newItem.js) */
#new-task-input input.is-invalid {
    color: #dc3545;
}

/* waits a moment before showing, so a quick load never flashes it */
.tasks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
    opacity: 0;
    animation: tasks-loading-in 0.2s ease 0.3s forwards;
}

@keyframes tasks-loading-in {
    to { opacity: 1; }
}

.view-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.task-chip.subtasks-done {
    color: #198754;
}

.task-chip.due-today {
    color: var(--theme-color);
}

.task-chip.due-overdue {
    color: #dc3545;
}

/* overdue doesn't matter once it's done */
#completed-tasks-list .task-chip.due-overdue,
#completed-tasks-list .task-chip.due-today {
    color: var(--text-muted);
}

/* due date and reminder rows in the task sidebar: the row is a button that opens a menu of quick choices */
.task-date-row {
    display: flex;
    align-items: center;
    position: relative;
}

.task-date-toggle {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.task-date-toggle:disabled {
    cursor: not-allowed;
}

.task-date-label {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    color: var(--text-muted);
}

.task-date-row.is-set .task-date-label,
.task-date-row.is-set .task-date-toggle > .bi {
    color: var(--theme-color);
}

.task-date-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.task-date-sub:empty {
    display: none;
}

/* the menu: an icon, the choice, and the day or time it means on the right */
.task-date-menu {
    min-width: 260px;
    padding: 0.35rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.task-date-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}

.task-date-option .bi {
    width: 1.1rem;
    text-align: center;
    color: var(--theme-color);
}

.task-date-option-label {
    flex: 1;
}

.task-date-option-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* the choice that's set now, a tint of the theme color rather than bootstrap's solid blue */
.dropdown-item.task-date-option.active,
.dropdown-item.task-date-option:active {
    color: inherit;
    background-color: color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.task-date-option.text-danger .bi {
    color: inherit;
}

.task-date-option:disabled {
    opacity: 0.45;
}

.task-date-menu-note {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.reminder-custom {
    padding: 0.4rem 0.65rem 0.3rem;
}

.task-date-clear {
    color: var(--text-muted);
    padding: 0 0.25rem;
}

.task-date-clear:hover {
    color: #dc3545;
}

/* sidebar footer: save status | Complete task (centered) | trash */
.task-footer-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
}

.task-footer-actions #delete-task {
    justify-self: end;
}

.list-group-item.task-date-row.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* subtasks checklist in the task sidebar */
.list-group-item.subtasks-row {
    cursor: default;
}

.subtask-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.subtask {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line-soft);
}

.subtask-checkbox {
    color: #198754;
    font-size: 1.05rem;
    cursor: pointer;
}

.subtask-checkbox:focus-visible {
    outline: 2px solid #198754;
    outline-offset: 2px;
    border-radius: 3px;
}

.subtask-title {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.subtask.completed .subtask-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.subtask-delete {
    color: var(--text-muted);
    padding: 0 0.25rem;
    opacity: 0.6;
}

.subtask-delete:hover,
.subtask-delete:focus-visible {
    color: #dc3545;
    opacity: 1;
}

.subtask-add,
.add-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
}

.subtask-add {
    padding-top: 0.35rem;
}

/* the same text spacing as the subtask box beside its + */
.add-note span {
    padding: 0.15rem 0;
}

.subtask-add-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0.15rem 0;
}

/* a shadow, not a border, so focusing doesn't shift anything */
.subtask-add-input:focus {
    box-shadow: inset 0 -1px 0 var(--theme-color);
}

/* the month calendar in the date menus (miniCalendar in dates.js), instead of the browser's own date picker */
.task-date-calendar,
#reminder-calendar {
    padding: 0.35rem 0.35rem 0.15rem;
}

.mini-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.mini-cal-title {
    font-weight: 600;
    font-size: 0.9rem;
}

.mini-cal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
}

.mini-cal-nav:hover:not(:disabled) {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.mini-cal-nav:disabled {
    opacity: 0.3;
}

.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-cal-dow {
    padding: 0.2rem 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mini-cal-day {
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.mini-cal-day:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-color) 16%, transparent);
}

.mini-cal-day.is-today {
    font-weight: 700;
    color: var(--theme-color);
    box-shadow: inset 0 0 0 1.5px var(--theme-color);
}

.mini-cal-day.is-selected,
.mini-cal-day.is-selected:hover:not(:disabled) {
    font-weight: 600;
    color: #fff;
    background-color: var(--theme-color);
}

.mini-cal-day:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.reminder-time-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--text-muted);
}

.task-note-popover {
    max-width: 280px;
}

.task-note-popover .popover-header {
    font-size: 0.85rem;
}

.task-note-popover .popover-body {
    max-height: 220px;
    overflow-y: auto;
}

.task-note-popover .popover-body > :first-child { margin-top: 0; }
.task-note-popover .popover-body > :last-child { margin-bottom: 0; }
.task-note-popover .popover-body h1,
.task-note-popover .popover-body h2,
.task-note-popover .popover-body h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.task-note-popover .popover-body p,
.task-note-popover .popover-body ul,
.task-note-popover .popover-body ol { margin-bottom: 0.4rem; }

/* the sidebar's list-group-item sets a pointer cursor, the editor needs the text one */
.note-editable {
    cursor: text;
}

/* read-only note in the sidebar, click it to edit */
/* .list-group-item in the selector so it beats bootstrap's
   .list-group-item + .list-group-item { border-top-width: 0 } */
.list-group-item.task-note-view {
    cursor: text;
    border: 2px solid var(--surface-border);
    border-radius: 5px;
    /* sticky note yellow, !important to beat .right-sidebar-item's background: inherit !important */
    background-color: #ffffb421 !important;
}

.task-note-view:hover {
    background-color: #ffffb440 !important;
}

.task-note-view-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

#task-note-view-content > :first-child { margin-top: 0; }
#task-note-view-content > :last-child { margin-bottom: 0; }
.task-note-view h1,
.task-note-view h2,
.task-note-view h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.task-note-view p,
.task-note-view ul,
.task-note-view ol { margin-bottom: 0.4rem; }

/* checklists inside task notes */
.note-editable ul.checklist,
.task-note-view ul.checklist,
.task-note-popover ul.checklist {
    list-style: none;
    padding-left: 0.25rem;
}

.note-editable ul.checklist > li,
.task-note-view ul.checklist > li,
.task-note-popover ul.checklist > li {
    position: relative;
    padding-left: 24px;
}

.task-note-popover ul.checklist > li::before,
.task-note-view ul.checklist > li::before,
.note-editable ul.checklist > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    border: 1px solid var(--text-muted);
    border-radius: 3px;
    cursor: pointer;
}

.note-editable ul.checklist > li.checked,
.task-note-view ul.checklist > li.checked,
.task-note-popover ul.checklist > li.checked {
    text-decoration: line-through;
    color: var(--text-muted);
}

.note-editable ul.checklist > li.checked::before,
.task-note-view ul.checklist > li.checked::before,
.task-note-popover ul.checklist > li.checked::before {
    content: '\2713';
    background-color: #198754;
    border-color: #198754;
    color: white;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: center;
}

/* the pin on the right of the task: faint on hover, solid in the theme color once pinned */
.task-pin {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}

.task-item:hover .task-pin,
.task-pin:focus-visible {
    opacity: 0.6;
}

.task-item .task-pin:hover {
    opacity: 1;
    color: var(--theme-color);
    background-color: color-mix(in srgb, var(--theme-color) 12%, transparent);
}

.task-item.is-starred .task-pin {
    opacity: 1;
    color: var(--theme-color);
}

/* the text stops short of the pin */
.task-item .task-body {
    padding-right: 36px;
}

/* clicking the pin gives it a little pop */
.task-item.is-starred.just-starred .task-pin i {
    animation: pin-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes pin-pop {
    0%   { transform: scale(0.6) rotate(-20deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .task-item.is-starred.just-starred .task-pin i {
        animation: none;
    }
}

/* the pin next to the pencil in the task sidebar, a filled pin in the theme color once pinned */
#pin-task.is-starred,
#pin-task.is-starred:hover {
    color: var(--theme-color);
}

/* the Bookmarked heading and the line between bookmarked and the rest */
.starred-header .bi {
    color: var(--theme-color);
}

.starred-divider {
    height: 1px;
    margin: 0.85rem 0.25rem 1rem;
    background-color: var(--surface-border);
}

/* ---- dragging (JSort adds these classes), all in the theme color ---- */

/* the row can be picked up anywhere, the cursor says so once it's held */
#tasks-list .task-item:active {
    cursor: grabbing;
}

/* where the dragged row came from, a faint outline of the gap it left */
.task-item.is-jsort-grab,
.listButton.is-jsort-grab {
    opacity: 0.35;
    outline: 2px dashed color-mix(in srgb, var(--theme-color) 60%, transparent);
    outline-offset: -2px;
}

/* the copy that follows the pointer */
.is-jsort-ghost {
    cursor: grabbing;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--theme-color);
    background-color: color-mix(in srgb, var(--surface-solid, #fff) 90%, var(--theme-color));
    border-radius: 6px;
}

/* the row it's about to land next to */
.task-item.is-jsort-target,
.listButton.is-jsort-target {
    position: relative;
    z-index: 2;
    background-color: color-mix(in srgb, var(--surface) 82%, var(--theme-color));
    box-shadow: inset 0 0 0 2px var(--theme-color);
}

/* a sidebar list a task is about to be dropped into */
#sidebar .listButton.is-jsort-target {
    color: #fff;
    background-color: color-mix(in srgb, var(--theme-color) 45%, transparent);
    box-shadow: inset 4px 0 0 var(--theme-color);
}

/* somewhere it can't go */
.is-jsort-ghost.is-jsort-invalid {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 0 2px #dc3545;
    opacity: 0.7;
}

/* touch: the held row gets a solid ring so it's clear it lifted */
.task-item.is-jsort-touch {
    outline: 2px solid var(--theme-color);
    outline-offset: -2px;
}

/* hovering a task tints it with a little of the theme color, mixed into the row so light and dark both work */
.task-item {
    transition: background-color 0.12s ease;
}

.task-item:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, var(--surface) 88%, var(--theme-color));
}

/* Show/Hide Completed Tasks and Show/Hide Trash: card-colored, so Transparency (--card-opacity) applies to them too */
#toggle-completed-tasks,
#toggle-trash {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--surface-border);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--surface) 85%, var(--theme-color));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--surface-border) 60%, var(--theme-color));
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--surface) 78%, var(--theme-color));
    --bs-btn-active-border-color: color-mix(in srgb, var(--surface-border) 60%, var(--theme-color));
}

/* Complete task in the task panel: still green, as see-through as the cards (Transparency, --card-opacity);
   once done it's the outline "Mark not complete", which is see-through already */
#complete-task.btn-success {
    --bs-btn-bg: color-mix(in srgb, #198754 calc(var(--card-opacity) * 100%), transparent);
    --bs-btn-border-color: color-mix(in srgb, #198754 calc(var(--card-opacity) * 100%), transparent);
    --bs-btn-hover-bg: color-mix(in srgb, #157347 calc(var(--card-opacity) * 100%), transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, #146c43 calc(var(--card-opacity) * 100%), transparent);
    --bs-btn-active-bg: color-mix(in srgb, #146c43 calc(var(--card-opacity) * 100%), transparent);
    --bs-btn-active-border-color: color-mix(in srgb, #13653f calc(var(--card-opacity) * 100%), transparent);
}

#completed-tasks-section {
    padding: 0 1.0rem 2rem;
}

#completed-tasks-list {
    margin-top: 0.5rem;
}

/* the trash sits under the completed tasks */
#toggle-trash {
    display: block;
    margin-top: 0.5rem;
}

#trash-section {
    margin-top: 0.5rem;
}

.trash-note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    background-color: var(--surface);
    border: 1px dashed var(--surface-border);
    border-radius: 8px;
}

.trash-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 3px;
    background-color: var(--surface);
    border-radius: 5px;
}

.trash-item-icon {
    color: var(--text-muted);
}

.trash-item-text {
    flex: 1;
    min-width: 0;
}

.trash-item-title {
    color: var(--text-muted);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.trash-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.trash-restore {
    flex-shrink: 0;
}

.trash-note-link {
    color: var(--theme-color);
    font-weight: 500;
    text-decoration: none;
}

.trash-note-link:hover {
    text-decoration: underline;
}

/* ---- phones and narrow windows (below bootstrap's lg, where #sidebar's offcanvas-lg turns into a slide-in menu) ---- */

/* the ☰ in the header that opens the sidebar, and the ← that closes the task panel, only below lg */
.sidebar-toggle,
.task-panel-back {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    line-height: 1;
}

.sidebar-toggle:hover,
.task-panel-back:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

@media (max-width: 991.98px) {
    #main-content { margin-left: 0; }
    .app-background { left: 0; }

    /* the sidebar slides in over the page: bootstrap hides and moves it, this keeps it above bootstrap's backdrop */
    #sidebar {
        width: min(85vw, 320px);
        z-index: 1045;
    }

    #list-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* a list's header: ☰ and the buttons share the top row, the title gets the whole row under them, so a long
       name wraps there instead of pushing the buttons down (Today, Week and Settings have no buttons, their
       title stays beside the ☰) */
    #list-header.is-list #list-title {
        clear: both;
        margin-top: 0.5rem !important;
        margin-bottom: 0.15rem;
        overflow-wrap: anywhere;
    }

    .sidebar-toggle {
        display: inline-flex;
        float: left;
        width: 2.25rem;
        height: 2.25rem;
        margin-right: 0.5rem;
        font-size: 1.6rem;
    }

    /* the open task covers the task list, the ← in its header goes back */
    #right-sidebar {
        position: fixed;
        inset: 0;
        z-index: 1030;
        width: 100%;
        overflow-y: auto;
        padding-bottom: 1rem;
        background-color: var(--app-bg);
    }

    .task-panel-back {
        display: inline-flex;
        width: 2rem;
        height: 2rem;
        margin-right: 0.35rem;
        font-size: 1.25rem;
        vertical-align: middle;
    }
}

/* Collapsed state: chevron-down (points down) */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
  background-size: 1rem;               /* Good size for chevrons; try 1.125rem or 1.25rem if too small */
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .35s ease;     /* Preserves Bootstrap's smooth animation */
}

/* Expanded state: chevron-left (points left) */
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-left' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

/* Optional: If Bootstrap's auto-rotation (-180deg on expand) makes the left chevron point oddly (e.g. right instead of left), reset it */
.accordion-button:not(.collapsed)::after {
   transform: none !important;    /* Uncomment this line if the direction flips undesirably */
}

/* Optional tweaks for sidebar polish */
.accordion-button::after {
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin-left: auto !important;        /* Pushes icon right, before badge */
  margin-right: 0.5rem !important;     /* Adds breathing room next to badge if present */
}
.accordion-item {
    background: transparent;
    border: none;
    margin-left: 15px;
}
.accordion-header {
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
}
.accordion {
--bs-accordion-active-bg: transparent;
--bs-accordion-active-color: #fff;
}

/* ---- a list's public read-only page, /p/<link> (templates/public/list.html.ep) ---- */

.public-list-page {
    min-height: 100vh;
    padding: 2.5rem 1rem 2rem;
    background-color: var(--app-bg);
}

.public-list {
    max-width: 640px;
    margin: 0 auto;
}

.public-list-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.public-list-meta {
    margin: 0.35rem 0 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.public-tasks,
.public-subtasks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-task {
    margin-bottom: 6px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background-color: var(--surface-solid);
}

.public-task-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.public-task-check {
    margin-top: 0.1rem;
    color: var(--text-muted);
}

.public-task-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    min-width: 0;
}

.public-task-title {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.public-task-pin {
    font-size: 0.8rem;
    color: var(--theme-color);
}

.public-task-due {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.public-subtasks {
    margin: 0.45rem 0 0 1.85rem;
    display: grid;
    gap: 0.25rem;
}

.public-subtask {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.public-subtask .bi {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.public-subtask.is-done span {
    color: var(--text-muted);
    text-decoration: line-through;
}

.public-subtask.is-done .bi {
    color: #198754;
}

.public-list-empty,
.public-list-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}

.public-list-empty .bi,
.public-list-missing .bi {
    font-size: 2rem;
}

.public-list-missing h1 {
    font-size: 1.35rem;
    color: var(--bs-body-color);
}

.public-list-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
}

.public-list-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
}

.public-list-footer a:hover {
    color: var(--theme-color);
}