body {
  font-size: 15px;
}

body.loading button,
body.loading input,
body.loading textarea,
body.loading [contenteditable] {
  pointer-events: none;
}

button {
  text-transform: capitalize;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar.is-stuck {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

main {
  min-height: 55vh;
}

.notes-grid {
  --note-gap: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  column-gap: var(--note-gap);
  row-gap: var(--note-gap);
  align-items: start;
}

.notes-grid.is-masonry {
  grid-auto-flow: row dense;
  grid-auto-rows: 1px;
  row-gap: 0;
}

.notes-grid.is-masonry.is-single-column {
  grid-auto-flow: row;
  grid-auto-rows: auto;
  row-gap: var(--note-gap);
}

.note-card {
  --note-color: #e85d4f;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0px;
  border-radius: var(--radius-lg);
  padding: 0.85rem;
  background: color-mix(in srgb, var(--note-color) 50%, transparent);
  color: color-mix(in srgb, var(--note-color) 30%, light-dark(#000, #fff));
  cursor: grab;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.note-card :focus-visible {
  outline-color: var(--note-color) !important;
}

.note-card :is(.note-title, .note-body, .check-item-text):focus-visible {
  outline: none !important;
}

.note-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.note-title {
  width: 100%;
  min-width: 0;
  flex: 1;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 3px 2px;
  background: transparent;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

.note-title:focus {
  border-bottom-color: currentColor;
  outline: none;
}

.note-title:placeholder-shown:not(:focus) {
  position: absolute;
  inset: 0 0 auto;
  height: 0.85rem;
  padding: 0;
  opacity: 0;
}

.note-header:has(.note-title:placeholder-shown:not(:focus)) {
  padding: 0;
}

.note-title::placeholder {
  color: currentColor;
  opacity: 0.55;
}

.note-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.note-footer {
  display: flex;
  min-height: 29px;
  align-items: center;
  gap: 8px;
  margin-top: 0.55rem;
}

.note-footer .note-actions {
  margin-left: auto;
}

.note-footer .add-item-button {
  margin-top: 0;
}

.color-control {
  position: relative;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.color-control::before {
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--note-color) 68%, var(--theme-border-strong));
  border-radius: 50%;
  background: var(--note-color);
  content: "";
}

.color-control input {
  position: absolute;
  width: 42px;
  height: 42px;
  opacity: 0;
  cursor: pointer;
}

.delete-note {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.68;
}

.delete-note:hover,
.delete-note:focus-visible {
  background: color-mix(in srgb, var(--note-color) 20%, transparent);
  opacity: 1;
}

.note-body {
  display: block;
  width: 100%;
  min-height: 34px;
  resize: none;
  overflow: hidden;
  border: 0;
  margin-top: 0.55rem;
  padding: 0.5rem 0.2rem 0.2rem;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.note-body:focus {
  outline: none;
}

.note-body::placeholder {
  color: currentColor;
  opacity: 0.55;
}

.checklist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0.7rem;
}

.check-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  touch-action: pan-y;
}

.check-item-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: stretch;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  outline: 0;
  transition: background 140ms ease;
}

.check-item:hover .check-item-content,
.check-item:has(.check-item-text:focus) .check-item-content,
.check-item.drag-floating .check-item-content {
  background: color-mix(in srgb, var(--note-color) 12%, transparent);
}

.item-drag-handle {
  display: flex;
  width: 27px;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  color: currentColor;
  cursor: grab;
  font-size: 15px;
  opacity: 0.45;
  transform: translateY(1px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.item-drag-handle:hover,
.item-drag-handle:focus-visible {
  opacity: 1;
}

.item-drag-handle:active {
  cursor: grabbing;
}

.item-check-area {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
  cursor: text;
}

.item-check-area input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  --checkbox-color: var(--note-color);
  cursor: pointer;
}

.check-item-text {
  display: block;
  width: 100%;
  min-width: 0;
  resize: none;
  overflow: hidden;
  border: 0;
  padding: 4px 1px 3px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.check-item-text:focus {
  outline: none;
}

.check-item.checked .check-item-text {
  text-decoration: line-through;
  opacity: 0.55;
}

.delete-item {
  display: grid;
  width: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 17px;
  opacity: 0.25;
}

.check-item:focus-within .delete-item,
.check-item:hover .delete-item,
.delete-item:focus-visible {
  opacity: 0.8;
}

.empty-checklist {
  margin: 0.8rem 0 0;
  color: currentColor;
  font-size: 12px;
  opacity: 0.62;
}

.add-item-button {
  margin-top: 0.55rem;
  border-radius: var(--radius);
  border: 0;
  padding: 6px 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.add-item-button:hover,
.add-item-button:focus-visible {
  background: color-mix(in srgb, var(--note-color) 14%, transparent);
}

.dragging-item,
.dragging-item *,
.dragging-note,
.dragging-note * {
  cursor: grabbing !important;
}

.note-card.note-drag-floating {
  position: fixed;
  z-index: 121;
  pointer-events: none;
  opacity: 0.96;
  transform: scale(1.025);
}

.note-card.note-drag-floating .note-actions {
  visibility: hidden;
}

.note-card.note-drag-placeholder {
  opacity: 0;
  pointer-events: auto;
}

.check-item.drag-floating {
  position: fixed;
  z-index: 120;
  pointer-events: none;
  opacity: 0.96;
  transform: scale(1.025);
}

.check-item.drag-floating .delete-item {
  visibility: hidden;
}

.check-item.item-drag-placeholder {
  opacity: 0;
  pointer-events: none;
}

.empty-state {
  width: min(100%, 430px);
  margin: 4rem auto;
  padding: 2rem;
  border: 1px dashed var(--theme-border-strong);
  border-radius: var(--radius-lg);
  color: var(--theme-text-muted);
  text-align: center;
}

.empty-state > span {
  display: block;
  color: var(--theme-accent-strong);
  font-family: Georgia, serif;
  font-size: 42px;
  line-height: 1;
}

.empty-state h2 {
  margin: 0.5rem 0 0.15rem;
  color: var(--theme-heading);
  font-family: Georgia, serif;
  font-weight: 500;
}

.empty-state p {
  margin: 0 0 1rem;
}

.empty-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.no-results {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  color: var(--theme-text-muted);
  text-align: center;
}

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(30, 10, 8, 0.55);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  width: min(100%, 460px);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  background: var(--theme-surface-raised);
}

.modal h2 {
  margin: 0 0 1rem;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 500;
}

.modal label:not(.color-field) {
  display: block;
  margin: 0.75rem 0 0.3rem;
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.modal label span {
  color: var(--theme-text-subtle);
  font-weight: 400;
}

.modal input[type="text"],
.modal textarea {
  width: 100%;
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.modal textarea {
  resize: vertical;
}

.color-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.color-field input {
  width: 54px;
  height: 32px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
}

.modal-error {
  min-height: 1.4em;
  margin: 0.4rem 0 0;
  color: var(--theme-danger);
  font-size: 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .checklist-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .notes-grid.is-masonry {
    grid-auto-flow: row;
    grid-auto-rows: auto;
    row-gap: var(--note-gap);
  }
}

@media (max-width: 420px) {
  .toolbar {
    grid-template-columns: 1fr;
  }

  .toolbar-actions {
    display: grid;
    grid-template-columns: 34px 34px repeat(2, minmax(0, 1fr));
  }
}

@media print {
  body {
    background: #fff;
  }

  .file-actions,
  .toolbar,
  footer,
  .note-footer,
  .item-drag-handle,
  .delete-item,
  .modal-backdrop,
  .empty-state {
    display: none !important;
  }

  header,
  main {
    width: auto;
    max-width: none;
    padding: 0 0 1rem;
  }

  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    row-gap: var(--note-gap);
  }

  .note-card {
    break-inside: avoid;
    grid-column-start: auto !important;
    grid-row-start: auto !important;
    grid-row-end: auto !important;
  }

  .note-title,
  .note-body {
    resize: none;
  }
}