/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer components {
  body {
    margin: 0 auto;
    padding: 0 calc(var(--spacing) * 8);
    @media (width < 41rem) {
      padding: 0 calc(var(--spacing) * 4);
    }
  }
  header.site-header {
    align-items: center;
    background-color: var(--color-taskr-400);
    border-radius: var(--radius-md);
    color: var(--color-white);
    column-gap: calc(var(--spacing) * 8);
    display: grid;
    /* minmax(0, 1fr), not auto: the icon row gets exactly the room left beside the logo, so the organization's
       name in it can shrink to fit. */
    grid-template-columns: 150px minmax(0, 1fr);
    margin: calc(var(--spacing) * 10) auto calc(var(--spacing) * 8);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    max-width: var(--breakpoint-2xl);
    position: relative;  /* on phones the organization menu is placed against the header (ul.dropdown-menu) */
    /* Phones: just the checkmark logo and tighter spacing, so all the icons fit on one row.  The logo is
       swapped here rather than with <picture>, whose response to a window resize varies between browsers. */
    .logo-mark {
      display: none;
    }
    @media (width < 41rem) {
      column-gap: calc(var(--spacing) * 2);
      grid-template-columns: auto minmax(0, 1fr);
      padding: calc(var(--spacing) * 2);
      .logo-full {
        display: none;
      }
      .logo-mark {
        display: block;
      }
    }
    /* From 92rem the full header fits: New Task, Focus Mode and the search box, and still the organization's
       name beside the switcher (measured: from 1448px with a 12rem name).  Below that they're hidden and the
       plus, binoculars and magnifying-glass icons (li.compact-nav) stand in for them, so the search box is
       never shown without the name. */
    @media (width >= 92rem) {
      grid-template-columns: 200px 1fr auto;
    }
    ul.site-nav {
      display: none;
      font-weight: var(--font-weight-bold);
      margin: calc(var(--spacing) * -1) auto 0;
      @media (width >= 92rem) {
        display: block;
      }
      li {
        display: inline;
        margin: 0 calc(var(--spacing) * 1);
        a {
          background: transparent;
          border: 1px var(--color-taskr-50) solid;
          border-radius: var(--radius-lg);
          padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
          white-space: nowrap;
          &:hover {
            background: var(--color-taskr-500);
            border-color: var(--color-taskr-600);
          }
          & > span {
            font-family: var(--font-icon);
          }
        }
      }
      li.search {
        position: relative;
        span.search-icon {
          color: var(--color-taskr-400);
          font-family: var(--font-icon);
          left: calc(var(--spacing) * 3);
          position: absolute;
          top: calc(var(--spacing) * -0.5);
          z-index: 10;
        }
        input[type='text'] {
          border: 0;
          border-radius: var(--radius-lg);
          color: var(--color-gray-600);
          font-weight: var(--font-weight-normal);
          padding-left: calc(var(--spacing) * 10);
          width: calc(var(--spacing) * 96);
        }
      }
      span {
        font-size: var(--text-md);
        margin: 0 0 calc(var(--spacing) * 1);
      }
    }
    ul.site-utility-nav {
      place-self: center end;
      font-weight: var(--font-weight-bold);
      /* One row: the icons keep their size and the organization switcher, the only part allowed to shrink,
         gets the room that's left, its name cut off with an ellipsis.  Below 41rem, where the name is hidden,
         the icons wrap instead. */
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 100%;
      @media (width >= 41rem) {
        flex-wrap: nowrap;
      }
      li {
        display: inline;
        flex: none;
        font-family: var(--font-icon);
        margin: 0 calc(var(--spacing) * 3);
        &.user {
          font-size: var(--text-xl);
          margin-right: calc(var(--spacing) * 3);
          @media (width >= 92rem) {
            margin-right: calc(var(--spacing) * 1);
          }
        }
        /* Phones: no gaps between the icons; instead each is a 32px-square tap target, so they sit closer
           together without getting harder to tap. */
        @media (width < 41rem) {
          &,
          &.user {
            margin: 0;
          }
          & > a {
            align-items: center;
            display: inline-flex;
            justify-content: center;
            min-height: calc(var(--spacing) * 8);
            min-width: calc(var(--spacing) * 8);
          }
        }
        &.compact-nav {
          @media (width >= 92rem) {
            display: none;
          }
        }
        /* Features & Pricing, on pages that offer it (the privacy policy): the white button from the sign-in page,
           in text, not an icon. */
        &.pricing-button {
          font-family: var(--font-sans);
          /* Phones: a row of its own under the icons, which then keep their single row as on every other page. */
          @media (width < 41rem) {
            flex-basis: 100%;
            margin-top: calc(var(--spacing) * 2);
            order: 1;
            text-align: right;
          }
          a {
            background: var(--color-white);
            border-radius: var(--radius-lg);
            color: var(--color-taskr-600);
            display: inline-block;
            font-size: var(--text-sm);
            padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
            white-space: nowrap;
            /* As on the sign-in page in dark mode: a dark card with Taskr's softer teal. */
            @media (prefers-color-scheme: dark) {
              background: var(--color-gray-800);
              color: var(--color-taskr-300);
            }
          }
        }
        a.notification {
          position: relative;
          span {
            background: var(--color-rose-600);
            border-radius: var(--radius-2xl);
            font-family: var(--font-sans);
            font-size: var(--text-xs);
            padding: calc(var(--spacing) * 0)	calc(var(--spacing) * 1);
            position: absolute;
            top: calc(var(--spacing) * -2);
            right: calc(var(--spacing) * -2);
          }
        }
        /* The organization switcher: a <details>, so it works from the keyboard.  The menu shows while it's open. */
        &.org-switcher {
          flex: 0 1 auto;
          min-width: 0;
          position: relative;
          @media (width < 41rem) {
            position: static;
          }
          details {
            display: block;
            min-width: 0;
          }
          summary {
            align-items: center;
            cursor: pointer;
            display: flex;
            list-style: none;
            min-width: 0;
            white-space: nowrap;
            & > span[aria-hidden]:not(.org-name) {
              flex: none;
            }
            &::-webkit-details-marker {
              display: none;
            }
            &::after {
              content: 'caret-down';
              flex: none;
              font-family: var(--font-icon);
              margin-left: calc(var(--spacing) * 2);
              margin-right: -12px;
            }
            &:focus-visible {
              outline: 2px solid var(--color-white);
              outline-offset: 4px;
              border-radius: var(--radius-sm);
            }
            /* Phones: a 32px-tall tap target like the other icons, and the caret kept inside it rather than
               pulled over the next icon. */
            @media (width < 41rem) {
              min-height: calc(var(--spacing) * 8);
              padding: 0 calc(var(--spacing) * 1.5);
              &::after {
                margin-left: calc(var(--spacing) * 1);
                margin-right: 0;
              }
            }
          }
          /* The current organization's name: in full up to 12rem, and cut shorter with an ellipsis when the header
             has less room.  Hidden below 41rem, where there'd only be room for a letter or two (measured: about
             45px, four or five characters, are left at 41rem). */
          .org-name {
            display: none;
            flex: 0 1 auto;
            font-family: var(--font-sans);
            font-size: var(--text-sm);
            margin-left: calc(var(--spacing) * 2);
            max-width: 12rem;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            @media (width >= 41rem) {
              display: block;
            }
          }
          details[open] ul.dropdown-menu {
            display: block;
          }
        }
      /* Opens leftward from the switcher's right edge, which sits near the right of the header, so a long
         organization name can't push the menu off the screen.  On phones, where the icons wrap and the
         switcher can end up anywhere, it drops down below the header instead, across its width. */
      ul.dropdown-menu {
        display: none;
        max-width: calc(100vw - calc(var(--spacing) * 8));
        position: absolute;
        right: 0;
        top: 2em;
        white-space: nowrap;
        z-index: 20;
        @media (width < 41rem) {
          left: calc(var(--spacing) * 4);
          max-width: none;
          right: calc(var(--spacing) * 4);
          top: 100%;
        }
        li {
          display: block;
          font-family: var(--font-sans);
          margin: 0;
          &:first-child button {
            border-radius: 5px 5px 0 0;
          }
          &:last-child button {
            border-radius: 0 0 5px 5px;
          }
          &.current-org button {
            font-weight: var(--font-weight-bold);
          }
        }
        /* Buttons, so each organization can be reached and chosen from the keyboard. */
        button {
          background: var(--color-gray-700);
          border: 0;
          color: inherit;
          cursor: pointer;
          display: block;
          font: inherit;
          font-weight: var(--font-weight-normal);
          overflow: hidden;
          padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
          text-align: left;
          text-overflow: ellipsis;
          width: 100%;
          &:hover,
          &:focus-visible {
            background: var(--color-gray-500);
          }
          &:focus-visible {
            outline: 2px solid var(--color-white);
            outline-offset: -2px;
          }
        }
      }
      }

    }
  }
  /* A billing notice for the organization you're in (billing-banner.html), between the header and the page. */
  .billing-banner {
    background: color-mix(in oklab, var(--color-red-200) 45%, white);
    border: 1px var(--color-red-200) solid;
    border-radius: var(--radius-md);
    color: var(--color-gray-700);
    margin: calc(var(--spacing) * -4) auto calc(var(--spacing) * 8);
    max-width: var(--breakpoint-2xl);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    a {
      color: inherit;
      font-weight: var(--font-weight-bold);
      text-decoration: underline;
    }
    @media (prefers-color-scheme: dark) {
      background: color-mix(in oklab, var(--color-red-500) 20%, var(--color-gray-900));
      border-color: color-mix(in oklab, var(--color-red-500) 40%, var(--color-gray-900));
      color: var(--color-gray-50);
    }
  }
  .wrapper {
    display: grid;
    gap: calc(var(--spacing) * 8);
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
    max-width: var(--breakpoint-2xl);
    /* Phones: eleven 32px gaps between the twelve columns would make the page at least 352px wide, wider than
       a small phone, and scroll sideways. */
    @media (width < 41rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  aside.sidebar {
    grid-column: span 12 / span 12;
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
      section {
        padding-left: calc(var(--spacing) * 4);
      }
    }
    /* Below 64rem the sidebar sits above the content instead of beside it.  An empty one (Focus, Profile, Create
       Task, Search, ...) would still take a row of the grid, and the gap after it, putting the title 96px below the
       header instead of 32 as on wider screens; so it's left out, and the content starts where it would have.  (From
       64rem the empty sidebar stays: it holds the columns that line the title up with Home's "Prioritized".) */
    @media (width < 64rem) {
      &:not(:has(*)) {
        display: none;
        + main.content {
          margin-top: 0;
        }
      }
    }
  }
  main.content {
    /* main is stretched to the height of a tall left sidebar; keep its rows at their content's height
       instead of spreading the extra height between them (which pushed the task below its title). */
    align-content: start;
    display: grid;
    gap: calc(var(--spacing) * 8);
    grid-column: 4 / span 8;
    grid-template-columns: repeat(9, 1fr);
    margin: calc(var(--spacing) * 8);
    width: 0 auto;
    max-width: 64rem;
    /* Phones, as for .wrapper: the gaps between its columns (eleven of them on Prioritize's twelve) would make it
       wider than the screen, and the page scroll sideways.  On phones nearly everything spans every column anyway. */
    @media (width < 41rem) {
      column-gap: calc(var(--spacing) * 2);
    }
  }
  main.content.full-width {
	grid-column: 1 / span 12;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: calc(var(--spacing) * 8);
	max-width: none;

	@media (width < 72rem) {
		grid-template-columns: repeat(1, 1fr);
	}
  }
  /* A page of reading, such as the privacy policy: one centred column, the width its typography (prose.css) is
     made for. */
  main.content.reading {
    display: block;
    grid-column: 1 / span 12;
    justify-self: center;
    max-width: 65ch;
    width: 100%;
  }
  main.content.prioritize {
	grid-column: 1 / span 12;
	grid-template-columns: repeat(12, 1fr);
	max-width: none;

	.prioritize-header {
		font-size: var(--text-2xl);
		grid-column: span 12 / span 12;
		text-align: center;

		#task_progress {
			height: 5px;
			max-width: 200px;
		}
	}

	.prioritize-task {
		border: 1px var(--color-gray-500) solid;
		border-radius: var(--radius-lg);
		grid-column: span 6 / span 6;
		padding: calc(var(--spacing) * 8);

		.task-title {
			margin-bottom: calc(var(--spacing) * 4);
		}

		&:hover {
			border-color: var(--color-taskr-400);
			cursor: pointer;
		}

		@media (width < 48rem) {
			grid-column: span 12 / span 12;
		}
	}
  }
  aside.sidebar + main.content {
    display: grid;
    gap: calc(var(--spacing) * 8);
    grid-column: span 12 / span 12;
    @media (width >= 64rem) {
      grid-column: span 9 / span 9;
      grid-template-columns: repeat(9, 1fr);
      /* Beside the sidebar, start level with it, so the title lines up with its "Prioritized" heading.  (Below
         64rem the sidebar sits above the content, and the top margin keeps them apart.) */
      margin-top: 0;
    }
  }
  main.content article {
    grid-column: 1 / span 7;
  }
  main.content.new-task {
    form {
      border-top: 1px var(--color-gray-300) solid;
      grid-column: span 6 / span 6;
      padding: calc(var(--spacing) * 6) 0;
      li {
        &:not(:last-child) {
          margin-bottom: calc(var(--spacing) * 6);
        }
        label {
          display: block;
          font-size: var(--text-sm);
          font-weight: var(--font-weight-bold);
          text-transform: uppercase;
          margin-bottom: calc(var(--spacing) * 2);
        }
        input.task-title {
          font-size: var(--text-xl);
          padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3);
        }
        input,	textarea,	select {
          border-radius: var(--radius-lg);
        }
        input[type='text'],	input[type='number'],	textarea,	select {
          width: 100%;
        }
        /* The task owner picker: sized like the text boxes around it (global.css styles form inputs, not selects). */
        select {
          border: 1px var(--color-gray-300) solid;
          display: block;
          max-width: calc(var(--spacing) * 120);
          padding: calc(var(--spacing) * 4) calc(var(--spacing) * 10) calc(var(--spacing) * 4) calc(var(--spacing) * 4);
        }
      }
      @media (prefers-color-scheme: dark) {
        border-top-color: var(--color-gray-500);
        input,	textarea,	select {
          background-color: var(--color-gray-800);
          color-scheme: dark;
        }
      }
    }
  }
  footer.site-footer {
    border-top: 1px var(--color-taskr-400) solid;
    color: var(--color-gray-400);
    font-size: var(--text-xs);
    margin-top: calc(var(--spacing) * 8);
    /* Reaches the page edges by cancelling body's side padding, so it follows that padding on phones. */
    margin: calc(var(--spacing) * 8) calc(var(--spacing) * -8) 0;
    padding: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
    @media (width < 41rem) {
      margin: calc(var(--spacing) * 8) calc(var(--spacing) * -4) 0;
      padding: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
    }
    .copyright {
      margin: 0 auto;
      max-width: var(--breakpoint-2xl);
      text-align: center;
    }
  }
  @media (prefers-color-scheme: dark) {
    body {
      background: var(--color-gray-900);
      color: var(--color-gray-50);
    }
    header.site-header {
      background-color: var(--color-taskr-500);
    }
    ul.site-nav {
      li {
        a {
          &:hover {
            background-color: var(--color-taskr-600);
            border-color: var(--color-taskr-700);
          }
        }
      }
      li.search {
        input[type='text'] {
          background: var(--color-gray-800);
          color: var(--color-gray-100) !important;
        }
      }
    }
  }
}
@layer components {
  .task-meta {
    grid-column: span 9 / span 9;
  }
  .task-content {
    grid-column: span 9 / span 9;
    @media (width >= 48rem) {
      grid-column: span 6 / span 6;
    }
  }
  .task-category {
    color: var(--color-taskr-500);
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 4);
    text-transform: uppercase;
  }
  .task-sidebar {
    grid-column: span 9 / span 9;
    @media (width >= 48rem) {
      grid-column: span 3 / span 3;
    }
  }
  h1.task-title {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    letter-spacing: var(--tracking-tight);
    line-height: var(--text-4xl--line-height);
    /* Task titles, organization and people's names are typed by people: wrap at spaces, and break inside a word
       too long for the line rather than running off the page. */
    overflow-wrap: anywhere;
  }
  .task-element {
    border-top: 1px var(--color-gray-300) solid;
    padding: calc(var(--spacing) * 6) 0;
    h2 {
      font-size: var(--text-sm);
      font-weight: bold;
      display: inline-block;
      margin-bottom: calc(var(--spacing) * 4);
      text-transform: uppercase;
    }
  }
  ul.profile-list {
    li {
      align-items: center;
      display: flex;
      gap: calc(var(--spacing) * 4);
      justify-content: space-between;
      padding: calc(var(--spacing) * 2) 0;
    }
    input[type='button'] {
      border-radius: var(--radius-lg);
      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3.25);
    }
    .member-actions {
      display: flex;
      flex-shrink: 0;
      gap: calc(var(--spacing) * 2);
    }
  }
  /* What an AI app can and can't do, on the page that asks whether to connect it (oauth-consent.html). */
  ul.consent-list {
    list-style: disc;
    padding-left: calc(var(--spacing) * 5);
    &:not(:last-child) {
      margin-bottom: calc(var(--spacing) * 6);
    }
    li {
      padding: calc(var(--spacing) * 1) 0;
    }
  }
  .consent-fine-print {
    color: var(--color-gray-500);
    font-size: var(--text-sm);
    margin-top: calc(var(--spacing) * 2);
    overflow-wrap: anywhere;
  }
  progress {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-gray-200);
    border-radius: var(--radius-lg);
    height: calc(var(--spacing) * 6);
    width: 100%;
    &::-moz-progress-bar {
      background-color: var(--color-taskr-400);
      border-radius: var(--radius-lg);
    }
    &::-webkit-progress-value {
      background-color: var(--color-taskr-400);
      border-radius: var(--radius-lg);
    }
    &::-webkit-progress-bar {
      background: var(--color-gray-200);
      border-radius: var(--radius-lg);
    }
  }
  .progress-info {
    display: grid;
    grid-template-columns: auto auto;
    margin: calc(var(--spacing) * 1) 0;
    li {
      color: var(--color-gray-500);
      font-size: var(--text-sm);
      &:last-child {
        text-align: right;
      }
    }
  }
  .description {
    p + p {
      margin-top: var(--text-base);
    }
  }
  .icon-list {
    a {
      display: block;
      padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.25);
    }
    span {
      display: inline-block;
      font-family: var(--font-icon);
      font-weight: bold;
      text-align: center;
      width: calc(var(--spacing) * 6);
    }
  }
  .list-buttons {
    color: var(--color-taskr-500);
    li {
      margin-bottom: calc(var(--spacing) * 2);
    }
    a {
      border: 1px var(--color-taskr-500) solid;
      border-radius: var(--radius-lg);
      &:hover {
        background: var(--color-taskr-500);
        color: var(--color-white);
      }
    }
  }
  .list-files {
    li {
      &:nth-of-type(odd) {
        background: var(--color-gray-200);
        @supports (color: color-mix(in lab, red, red)) {
          background: color-mix(in oklab, var(--color-gray-200) 75%, transparent);
        }
      }
    }
  }
  .task-list {
    border-top: 1px var(--color-gray-300) solid;
    display: none;
    & > li {
      margin-top: calc(var(--spacing) * 2);
    }
    .task {
      border: 1px transparent solid;
      border-radius: var(--radius-lg);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 30px 1fr;
      padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.25);
      position: relative;
      input[type='checkbox'] {
        appearance: none;
        border-radius: var(--radius-sm);
        margin-top: calc(var(--spacing) * 1);
        padding: calc(var(--spacing) * 2.125);
        &:checked {
          background-color: var(--color-taskr-400);
          border-color: var(--color-taskr-400);
        }
        &:checked ~ a > p:first-child {
          text-decoration: line-through;
        }
      }
      /* The title and the details line each use the card's full width, and end in "…" when they don't fit. */
      a {
        display: block;
        min-width: 0;
        & > p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .date {
        font-size: var(--text-xs);
      }
      &.unread {
        font-weight: bold;
      }
      &.danger {
        background: var(--color-red-200);
        .danger-icon {
          color: var(--color-red-500);
          font-weight: var(--font-weight-bold);
          margin-right: calc(var(--spacing) * 1);
        }
        &:hover {
          border-color: var(--color-red-400);
        }
      }
      &.highlighted {
        background: var(--color-taskr-50);
        &:hover {
          border-color: var(--color-taskr-300);
        }
      }
      &:hover {
        border-color: var(--color-gray-300);
      }
    }
    /* The columns on /tasks you drag cards between: tall enough to drop into even when empty. */
    &[data-column] {
      min-height: 220px;
    }
    /* Where a dragged card will land (all-tasks.html adds and removes it). */
    .task-placeholder {
      border: 2px dashed var(--color-gray-400);
      border-radius: var(--radius-sm);
      height: 60px;
      list-style: none;
      margin: 4px 0;
    }
  }
  .toggle-checkbox {
    display: none;
  }main.content.full-width {
	grid-column: 1 / span 12;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: calc(var(--spacing) * 8);
	max-width: none;

	@media (width < 72rem) {
		grid-template-columns: repeat(1, 1fr);
	}
}
  h2.task-list-label,
  .toggle-label {
	color: var(--color-taskr-500);
	cursor: pointer;
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-weight-bold);
	margin-bottom: calc(var(--spacing) * 3);
	text-transform: uppercase;

	span {
		display: inline-block;
		font-family: var(--font-icon);
		font-weight: var(--font-weight-bold);
		margin-right: calc(var(--spacing) * 1);
	}
  }
  .toggle-label {
    color: var(--color-taskr-500);
    cursor: pointer;
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 3);
    text-transform: uppercase;
    span {
      display: inline-block;
      font-family: var(--font-icon);
      font-weight: var(--font-weight-bold);
      margin-right: calc(var(--spacing) * 1);
    }
  }
  .toggle-checkbox:not(:checked) ~ .toggle-label > span {
    rotate: -90deg;
  }
  .toggle-checkbox:checked ~ .task-list {
    display: block;
  }
  .show-all ul.task-list {
    display:block;
  }
  main.content.full-width .tasks-owner,
  main.content.full-width .org-members {
    grid-column: 1 / -1;
  }
  .show-all.org-members ul.task-list {
    display: grid;
    column-gap: calc(var(--spacing) * 8);
    grid-template-columns: repeat(3, 1fr);
    @media (width < 72rem) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  /* Member cards on /org (member-card.html): the member's name, which links to their tasks, their role, and the
     task at the top of their list.  Same look as a highlighted task card. */
  .show-all.org-members .member-card {
    background: var(--color-taskr-50);
    border: 1px transparent solid;
    border-radius: var(--radius-lg);
    min-width: 0;
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.25);
    &:hover {
      border-color: var(--color-taskr-300);
    }
    a,
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .member-name {
      display: block;
    }
    .member-role,
    .member-top-task {
      font-size: var(--text-xs);
    }
    .member-top-task a {
      text-decoration: underline;
    }
  }
  @media (prefers-color-scheme: dark) {
    .task-category {
      color: var(--color-taskr-400);
    }
    .task-element {
      border-top-color: var(--color-gray-500);
    }
    .consent-fine-print {
      color: var(--color-gray-400);
    }
    progress {
      background: var(--color-gray-600);
      &::-moz-progress-bar {
        background-color: var(--color-taskr-300);
      }
      &::-webkit-progress-bar {
        background: var(--color-gray-600);
      }
    }
    .progress-info {
      li {
        color: var(--color-gray-300);
      }
    }
    h1.task-title {
      color: var(--color-gray-100);
    }
    .list-buttons {
      color: var(--color-taskr-300);
      a {
        border: 1px var(--color-taskr-300) solid;
        &:hover {
          background: var(--color-taskr-300);
          color: var(--color-gray-900);
        }
      }
    }
    .list-files {
      li {
        &:nth-of-type(odd) {
          background: var(--color-gray-600);
          @supports (color: color-mix(in lab, red, red)) {
            background: color-mix(in oklab, var(--color-gray-600) 75%, transparent);
          }
        }
      }
    }
    .task-list {
      border-top-color: var(--color-gray-500);
      .task {
        &.highlighted,	&.danger {
          color: var(--color-gray-900);
        }
      }
      .member-card {
        color: var(--color-gray-900);
      }
      .task-placeholder {
        border-color: var(--color-gray-500);
      }
    }
    .toggle-label {
      color: var(--color-taskr-400);
    }
  }
}
@layer components {
  .feed {
    .comment {
      background: var(--color-gray-100);
      border-radius: var(--radius-lg);
      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
      width: 95%;
      &.self {
        background: var(--color-taskr-50);
        margin-left: 5%;
      }
      & + .comment {
        margin-top: calc(var(--spacing) * 4);
      }
      .comment-meta {
        font-size: var(--text-sm);
        margin-bottom: calc(var(--spacing) * 3);
        width: 100%;
        li {
          display: inline-block;
          margin-right: -2px;
          /* Top-aligned, so the author stays level with the time when "(edited)" wraps under it. */
          vertical-align: top;
          width: 50%;
        }
      }
      .author {
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
      }
      .time {
        color: var(--color-gray-500);
        text-align: right;
      }
      .edited {
        font-style: italic;
      }
      /* Your own comments: Edit and Delete as small text buttons under the comment, and the box Edit swaps in. */
      .comment-actions {
        display: flex;
        font-size: var(--text-sm);
        gap: calc(var(--spacing) * 4);
        justify-content: flex-end;
        margin-top: calc(var(--spacing) * 2);
        button {
          cursor: pointer;
          text-decoration: underline;
        }
      }
      .comment-edit {
        textarea {
          border-radius: var(--radius-lg);
          width: 100%;
        }
        .comment-edit-error {
          color: var(--color-rose-600);
          font-size: var(--text-sm);
          margin: calc(var(--spacing) * 1) 0;
        }
        input[type='button'] {
          border-radius: var(--radius-lg);
          padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
        }
      }
    }
  }
  .comment-editor {
    margin-top: calc(var(--spacing) * 8);
    position: relative;
    span.textarea {
      border: 1px var(--color-gray-300) solid;
      border-radius: var(--radius-lg);
      box-sizing: border-box;
      display: block;
      field-sizing: content;
      padding: calc(var(--spacing) * 4);
      resize: both;
      width: 100%;
      &:empty::before {
        content: 'Type comments here';
        color: gray;
      }
    }
    .comment-send {
      color: var(--color-taskr-500);
      cursor: pointer;
      font-family: var(--font-icon);
      font-size: var(--text-lg);
      font-weight: var(--font-weight-bold);
      padding: calc(var(--spacing) * 4);
      position: absolute;
      top: calc(var(--spacing) * 0);
      right: calc(var(--spacing) * 1);
    }
  }
  @media (prefers-color-scheme: dark) {
    .feed {
      .comment {
        background: var(--color-gray-700);
        &.self {
          background: var(--color-taskr-500);
        }
        .time {
          color: var(--color-gray-100);
        }
        /* Like the task form's boxes in dark mode. */
        .comment-edit {
          textarea {
            background-color: var(--color-gray-800);
            color-scheme: dark;
          }
          .comment-edit-error {
            color: var(--color-red-400);
          }
          /* On your comment's teal background, the dark theme's teal outline button would barely show. */
          .btn-secondary:not(:hover) {
            border-color: var(--color-gray-50);
            color: var(--color-gray-50);
          }
        }
      }
    }
    .comment-editor {
      span.textarea {
        &:empty::before {
          color: var(--color-gray-400);
        }
      }
      .comment-send {
        color: var(--color-taskr-400);
      }
    }
  }
}
/* Buttons: feedback when you point at one, press it, reach it from the keyboard, and while it's disabled (e.g.
   Create Organization and the task checkboxes lock themselves while a request runs).  Covers plain buttons
   (<input type="button"/"submit">, which otherwise look like form fields), .btn-primary, .btn-secondary, and
   .btn-danger for destructive ones.  Hover colours for .btn-primary and .btn-secondary are in global.css. */
@layer components {
  input:is([type='button'], [type='submit']),
  button {
    cursor: pointer;
    transition: background-color 0.1s, border-color 0.1s, color 0.1s;
    &:focus-visible {
      outline: 2px solid var(--color-taskr-700);
      outline-offset: 2px;
      @media (prefers-color-scheme: dark) {
        outline-color: var(--color-taskr-300);
      }
    }
    &:active:not(:disabled) {
      transform: translateY(1px);
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  /* Plain buttons have no colour of their own: tint them on hover, and a little more while pressed. */
  input:is([type='button'], [type='submit']):not(.btn-primary, .btn-secondary, .btn-danger) {
    &:hover:not(:disabled) {
      background-color: var(--color-gray-100);
      border-color: var(--color-gray-400);
    }
    &:active:not(:disabled) {
      background-color: var(--color-gray-200);
    }
    @media (prefers-color-scheme: dark) {
      &:hover:not(:disabled) {
        background-color: var(--color-gray-700);
        border-color: var(--color-gray-500);
      }
      &:active:not(:disabled) {
        background-color: var(--color-gray-600);
      }
    }
  }
  .btn-primary {
    &:active:not(:disabled) {
      background: var(--color-taskr-700);
      border-color: var(--color-taskr-700);
    }
    @media (prefers-color-scheme: dark) {
      &:active:not(:disabled) {
        background: var(--color-taskr-50);
        border-color: var(--color-taskr-50);
      }
    }
  }
  .btn-secondary {
    &:active:not(:disabled) {
      background: var(--color-taskr-600);
      border-color: var(--color-taskr-600);
      color: var(--color-white);
    }
    /* A disabled button shouldn't light up on hover. */
    &:disabled:hover {
      background: transparent;
      color: var(--color-taskr-500);
    }
    @media (prefers-color-scheme: dark) {
      &:active:not(:disabled) {
        background: var(--color-taskr-100);
        border-color: var(--color-taskr-100);
        color: var(--color-gray-900);
      }
      &:disabled:hover {
        color: var(--color-taskr-300);
      }
    }
  }
  /* Destructive: Delete Account, Delete Organization, Remove member.  Red outline, filled red on hover. */
  .btn-danger {
    background: transparent;
    border: 1px var(--color-rose-600) solid;
    border-radius: var(--radius-lg);
    color: var(--color-rose-600);
    &:hover:not(:disabled) {
      background: var(--color-rose-600);
      color: var(--color-white);
    }
    &:active:not(:disabled) {
      background: color-mix(in oklab, var(--color-rose-600) 80%, black);
      border-color: color-mix(in oklab, var(--color-rose-600) 80%, black);
      color: var(--color-white);
    }
    @media (prefers-color-scheme: dark) {
      border-color: var(--color-red-400);
      color: var(--color-red-400);
      &:hover:not(:disabled) {
        background: var(--color-red-400);
        color: var(--color-gray-900);
      }
      &:active:not(:disabled) {
        background: var(--color-red-500);
        border-color: var(--color-red-500);
        color: var(--color-gray-900);
      }
    }
  }
}