@font-face {
  font-family: Urbanist;
  src: url("./assets/Urbanist-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

:root {
  --bg: #fff;
  --text: #575757;
  --text-light: #6c6c6c;
  --text-focus: #000;
  --stroke: #d9d9d9;
  --priority-bg: #575757;
  --task-soul: #ffd9d9;
  --task-orange: #ffdebe;
  --task-yellow: #fffecf;
  --task-green: #e0ffd9;
  --task-aqua: #d9fcff;
  --task-blue: #d9d9ff;
  --task-seth: #fad9ff;
  --border-soul: #d4afaf;
  --border-orange: #cba987;
  --border-yellow: #cdcf99;
  --border-green: #8dc7a3;
  --border-aqua: #afd4d2;
  --border-blue: #afb1d4;
  --border-seth: #ccafd4;
  --icon-soul: #cd7676;
  --icon-orange: #deaa61;
  --icon-yellow: #f2dd69;
  --icon-green: #7ccd76;
  --icon-aqua: #76cdcc;
  --icon-blue: #7f76cd;
  --icon-seth: #ba76cd;
  --motion: 300ms cubic-bezier(0.2, 0.7, 0.25, 1);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Urbanist, "Helvetica Neue", sans-serif;
  font-weight: 300;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline: 2px solid #8b8ba7;
  outline-offset: 3px;
}
button img {
  pointer-events: none;
}
p,
h1,
h2 {
  margin: 0;
  font-weight: 300;
}
.app {
  max-width: 1500px;
  padding: 0 37px;
  margin: auto;
}
.masthead {
  height: 96px;
  position: relative;
  text-align: center;
  padding-top: 20px;
}
.text-title {
  font-size: 24px;
  letter-spacing: 2.16px;
  line-height: 29px;
}
.tagline {
  font-size: 12px;
  letter-spacing: 0.9px;
  margin-top: 7px;
  cursor: pointer;
  user-select: none;
}
.tagline.refreshing {
  animation: tagline-fade-in 180ms ease-out;
}
@keyframes tagline-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.cat {
  position: absolute;
  width: 170px;
  height: 228px;
  left: 92px;
  top: 20px;
  z-index: -1;
}

.privacy-cat {
  position: absolute;
  width: 270px;
  height: 200px;
  right: 200px;
  top: 120px;
  z-index: -1;
}

.rules-cat {
  position: absolute;
  width: 170px;
  height: 228px;
  right: 200px;
  top: 120px;
  z-index: -1;
}

.button {
  height: 35px;
  background: white;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  box-shadow: 0 2px 0 #0000001a;
  font-size: 12px;
  letter-spacing: 1.08px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 17px;
  transition:
    background var(--motion),
    box-shadow var(--motion),
    transform var(--motion);
}
.button:hover {
  background: #f6f6f6;
}
.board-actions {
  position: absolute;
  right: 0;
  top: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.board-action-buttons {
  display: flex;
  gap: 6px;
}
.drive-connection-status {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 1.1px;
  text-align: center;
}
.drive-connection-status[hidden] {
  display: none;
}
.save {
  width: 141px;
}
.board-file-button {
  width: 35px;
  padding: 0;
}
.board-file-button img {
  width: 16px;
  height: 16px;
}
.board-manager {
  min-height: 43px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.board-manager[hidden] {
  display: none;
}
.board-manager label {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.board-manager select {
  width: min(280px, 40vw);
  height: 35px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  background: white;
  font-size: 12px;
}
.board-manager-button {
  min-width: 78px;
}
.drive-loading .board,
.drive-loading .toolbar,
.drive-loading .board-manager {
  opacity: 0.55;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}
.search {
  height: 36px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  background: white;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
}
.search input {
  font-size: 12px;
  letter-spacing: 0.2px;
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}
.actions {
  position: relative;
  display: flex;
  gap: 10px;
}
.actions .button {
  width: 101px;
  touch-action: none;
}
.drag-label {
  position: absolute;
  top: -16px;
  text-align: center;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.9px;
}
.destroy {
  background: var(--text);
  color: var(--stroke);
}
.destroy:hover {
  background: #454545;
}
.destroy.is-holding {
  background: #994c4c;
  box-shadow: inset 0 2px 4px #0003;
  transform: scale(0.97);
}
.board {
  display: flex;
  gap: 11px;
  min-height: 352px;
  align-items: stretch;
}
.board-frame {
  position: relative;
}
.board-loading {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #ffffffb8;
  font-size: 12px;
  letter-spacing: 0.7px;
}
.board-loading[hidden] {
  display: none;
}
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 1px solid var(--stroke);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: loading-spin 700ms linear infinite;
}
@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
.column {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  background: white;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  transition:
    flex-grow var(--motion),
    flex-basis var(--motion);
  overflow: hidden;
}
.column.collapsed {
  flex: 0 0 56px;
}
.column-header {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.text-column {
  font-size: 18px;
  letter-spacing: 1.62px;
  line-height: 27px;
  max-width: calc(100% - 66px);
  white-space: nowrap;
  overflow: hidden;
}
.icon-button {
  border: 0;
  padding: 0;
  background: transparent;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.icon-button img {
  width: 16px;
  height: 16px;
}
.column-toggle {
  position: absolute;
  right: 17px;
  top: 16px;
}
.column.collapsed .column-toggle {
  right: 19px;
}
.column.collapsed .text-column {
  position: absolute;
  top: 53px;
  left: 13px;
  writing-mode: vertical-rl;
  max-width: none;
  overflow: visible;
}
.column-content {
  padding: 0 9px 20px;
  opacity: 1;
  transition:
    opacity 180ms,
    transform var(--motion);
  min-width: 180px;
}
.column.collapsed .column-content {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 180ms,
    transform var(--motion),
    visibility 0s 300ms;
}
.priority {
  border: 1px solid var(--stroke);
  border-radius: 4px;
  background: var(--priority-bg);
  color: var(--stroke);
  transition:
    background var(--motion),
    color var(--motion);
  margin-bottom: 10px;
}
.priority.closed {
  background: white;
  color: var(--text);
}
.priority-header {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.text-priority {
  font-size: 16px;
  letter-spacing: 1.08px;
  line-height: 24px;
}
.priority-toggle {
  position: absolute;
  right: 8px;
  top: 9px;
}
.priority:not(.closed) .priority-toggle {
  filter: brightness(0.42);
}
.priority-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--motion),
    opacity var(--motion);
  opacity: 1;
}
.priority.closed .priority-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
}
.priority-inner {
  min-height: 0;
  overflow: hidden;
}
.card-list {
  display: flex;
  flex-direction: row;
  position: relative;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  padding: 0 10px;
  min-height: 30px;
  flex-wrap: wrap;
}
.priority .card-list {
  padding-bottom: 12px;
}
.regular {
  padding-top: 0;
  gap: 12px;
}
.priority.closed {
  margin-bottom: 13px;
}
.text-column {
  transform: translateY(3px);
}
.column.collapsed .text-column {
  transform: none;
}
.card {
  --card-bg: var(--task-soul);
  --card-border: var(--border-soul);
  width: 160px;
  max-width: 100%;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-focus);
  position: relative;
  padding: 3px 6px 5px;
  cursor: grab;
  touch-action: none;
  transition:
    transform var(--motion),
    box-shadow var(--motion),
    opacity var(--motion);
  flex-shrink: 0;
}
.card:focus-within {
  z-index: 2;
}
.card-top {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 15px;
}
.star {
  width: 18px;
  height: 18px;
}
.star img {
  width: 11.875px;
  height: 11.392px;
}
.text-category {
  font-size: 12px;
  letter-spacing: 0.9px;
  line-height: 18px;
  color: var(--text);
  min-width: 20px;
  flex: 1;
}
.divider {
  display: block;
  width: 118px;
  height: 1px;
  margin: 2px 0 3px;
  max-width: 75%;
  pointer-events: none;
}
.card-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.text-card-title {
  font-size: 14px;
  letter-spacing: 0.2px;
  line-height: 18px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-toggle,
.card-toggle img {
  width: 12px;
  height: 12px;
}
.details-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--motion),
    opacity var(--motion);
}
.card.expanded .details-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.details-inner {
  overflow: hidden;
  min-height: 0;
}
.text-description {
  font-size: 12px;
  letter-spacing: 0.16px;
  line-height: 14px;
  color: var(--text-light);
  padding-top: 5px;
  overflow-wrap: anywhere;
  text-align: left;
}
.card:not(.expanded) .details-inner {
  visibility: hidden;
  transition: visibility 0s 300ms;
}
[contenteditable] {
  cursor: text;
  border-radius: 2px;
  touch-action: auto;
}
[contenteditable]:focus {
  background: #ffffff55;
  outline: 1px solid #0002;
}
[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: var(--text-light);
}
.dragging-source {
  opacity: 0.25;
}
.drag-ghost {
  --drag-rotation: 0deg;
  position: fixed !important;
  z-index: 1000;
  pointer-events: none;
  max-width: none;
  transform: rotate(var(--drag-rotation)) scale(1.1);
  transform-origin: center;
  transition: transform 70ms linear;
  will-change: left, top, transform;
  box-shadow: 0 12px 25px #0003;
  cursor: grabbing;
}
.drop-marker {
  position: absolute;
  z-index: 1100;
  width: 4px;
  min-height: 32px;
  background: #7d7d91;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #fff9;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    left 70ms linear,
    top 70ms linear,
    height 70ms linear;
}
.drop-marker:not(.empty-list)::before,
.drop-marker:not(.empty-list)::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7d7d91;
  transform: translateX(-50%);
}
.drop-marker:not(.empty-list)::before {
  top: -2px;
}
.drop-marker:not(.empty-list)::after {
  bottom: -2px;
}
.drop-marker.empty-list {
  width: 80px;
  min-height: 4px;
  height: 4px;
  transform: translate(-50%, -50%);
}
.drop-target {
  outline: 2px dashed #adadbd;
  outline-offset: -4px;
}
.destroy.drop-target {
  background: #994c4c;
  transform: scale(1.05);
}
body.is-dragging {
  user-select: none;
  cursor: grabbing;
}
body.is-destroying-board .board .card {
  animation: card-wiggle 60ms ease-in-out infinite alternate;
  transform-origin: center;
}
body.is-destroying-board .board .card:nth-child(even) {
  animation-direction: alternate-reverse;
  animation-delay: -60ms;
}
body.is-clearing-board .board .card {
  animation: card-fade-out 360ms ease-in forwards;
  pointer-events: none;
}
@keyframes card-wiggle {
  from {
    transform: translateX(-5px) rotate(-5deg);
  }
  to {
    transform: translateX(5px) rotate(5deg);
  }
}
@keyframes card-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.empty {
  font-size: 10px;
  color: var(--text-light);
  padding: 12px;
  text-align: center;
}
.board-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  font-size: 10px;
  letter-spacing: 0.2px;
}
.board-footer > span:first-child {
  cursor: help;
}
.board-footer #local-status {
  text-align: right;
}
.footer-links,
.legal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.footer-links a,
.legal-page a {
  color: inherit;
  text-underline-offset: 3px;
}
.footer-links a:hover,
.legal-page a:hover {
  color: var(--text-focus);
}
.legal-page {
  width: min(780px, calc(100% - 36px));
  margin: 0 auto;
  padding: 48px 0 32px;
}
.legal-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--stroke);
}
.legal-header p {
  color: var(--text-light);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-align: right;
}
.legal-brand {
  color: var(--text);
  font-size: 24px;
  letter-spacing: 2.16px;
  line-height: 29px;
  text-decoration: none;
}
.legal-card {
  padding: 44px 0 30px;
}
.legal-card h1 {
  color: var(--text-focus);
  font-size: clamp(30px, 6vw, 42px);
  letter-spacing: 2px;
  line-height: 1.15;
}
.legal-meta {
  margin: 9px 0 34px;
  color: var(--text-light);
  font-size: 12px;
  letter-spacing: 0.4px;
}
.legal-card h2 {
  margin: 34px 0 10px;
  color: var(--text-focus);
  font-size: 18px;
  letter-spacing: 0.2px;
}
.legal-card p,
.legal-card li {
  font-size: 15px;
  line-height: 1.75;
}
.legal-card p + p {
  margin-top: 13px;
}
.legal-card ul {
  margin: 9px 0 0;
  padding-left: 23px;
}
.legal-card li + li {
  margin-top: 9px;
}
.legal-card code {
  overflow-wrap: anywhere;
  font-size: 0.88em;
}
.legal-footer {
  padding-top: 20px;
  border-top: 1px solid var(--stroke);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.message {
  font-size: 12px;
  min-height: 18px;
  text-align: center;
}
dialog {
  max-width: 420px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 16px 50px #0002;
}
dialog::backdrop {
  background: #0003;
}
dialog h2 {
  font-size: 20px;
  margin-bottom: 15px;
}
dialog p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}
dialog[open] {
  animation: dialog-in 180ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
dialog[open]::backdrop {
  animation: dialog-backdrop-in 180ms ease-out both;
}
dialog.closing {
  animation: dialog-out 140ms ease-in both;
}
dialog.closing::backdrop {
  animation: dialog-backdrop-out 140ms ease-in both;
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes dialog-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
@keyframes dialog-backdrop-in {
  from {
    background: #0000;
  }
  to {
    background: #0003;
  }
}
@keyframes dialog-backdrop-out {
  from {
    background: #0003;
  }
  to {
    background: #0000;
  }
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dialog-actions-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dialog-field {
  display: grid;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.dialog-field input {
  width: min(340px, 72vw);
  height: 38px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  padding: 0 10px;
}
.dialog-error {
  min-height: 21px;
  margin: 3px 0 10px;
  color: #994c4c;
  font-size: 12px;
}
.danger-button {
  border-color: #c99595;
  color: #8a3030;
}
.danger-button:hover {
  background: #fff1f1;
}
@media (min-width: 1000px) {
  .board {
    min-height: calc(100vh - 215px);
  }
}
@media (max-width: 560px) {
  .app {
    padding: 0 14px;
  }
  .masthead {
    height: 120px;
    text-align: left;
    padding-top: 20px;
  }
  .tagline {
    max-width: 180px;
  }
  .board-actions {
    top: 23px;
  }
  .board-manager {
    justify-content: flex-start;
    overflow-x: auto;
  }
  .board-manager select {
    width: min(190px, 43vw);
    flex: none;
  }
  .board-manager-button {
    min-width: 68px;
    padding: 0 10px;
  }
  .cat {
    left: 50px;
    top: 43px;
  }
  .toolbar {
    gap: 8px;
  }
  .search {
    flex: 1;
  }
  .actions {
    gap: 6px;
  }
  .actions .button {
    width: 76px;
    padding: 0 6px;
  }
  .board {
    gap: 7px;
    overflow-x: auto;
    min-height: 440px;
  }
  .column {
    min-width: 195px;
  }
  .column.collapsed {
    min-width: 46px;
    flex-basis: 46px;
  }
  .column.collapsed .column-toggle {
    right: 14px;
  }
  .column-content {
    padding-left: 6px;
    padding-right: 6px;
  }
  .text-column {
    font-size: 16px;
  }
  .board-footer {
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    font-size: 9px;
  }
  .board-footer .footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .legal-page {
    padding-top: 28px;
  }
  .legal-header {
    align-items: flex-start;
  }
  .legal-header p {
    max-width: 170px;
  }
  .legal-card {
    padding-top: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body.is-destroying-board .board .card {
    animation: none !important;
  }
  .drag-ghost {
    transform: scale(1.1) !important;
  }
}

.search {
  gap: 9px;
  padding-right: 8px;
}
.search > img {
  flex: none;
}
.search input {
  flex: 1;
}
.search-color {
  width: 20px;
  height: 20px;
}
.search-color img {
  width: 17.58px;
  height: 16.82px;
}
.search-color.active {
  border-radius: 3px;
  background: #f3f3f3;
}
.color-palette {
  position: fixed;
  z-index: 1100;
  width: 66px;
  animation: palette-appear 120ms ease-out;
}
.color-palette[hidden] {
  display: none;
}
.palette-surface {
  position: relative;
  width: 66px;
  height: 42px;
}
.palette-artwork {
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  width: 67px;
  height: 43.9467px;
  pointer-events: none;
}
.palette-option {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: transparent;
}
.palette-option:hover {
  background: #57575718;
}
.palette-option[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px #57575755;
}
.palette-option:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 0;
}
.all-colors {
  display: block;
  width: 66px;
  height: 22px;
  margin-bottom: 3px;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  background: white;
  font-size: 10px;
}
.all-colors:hover {
  background: #f3f3f3;
}
@keyframes palette-appear {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}