.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 0.8rem;
  border: 1px solid var(--text);
  background: var(--bg);
  color: var(--text);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--soft);
}

.button.primary {
  background: var(--accent);
  color: var(--text);
}

.button.secondary,
.button.subtle {
  border-color: var(--line);
}

.button.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.emoji-button {
  width: auto;
  inline-size: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  font-family: var(--emoji-font);
  font-weight: normal;
  font-variant-emoji: text;
  justify-self: start;
  align-self: center;
  line-height: 1;
}

.emoji-glyph {
  display: inline-block;
  font-family: var(--emoji-font);
  font-weight: normal;
  font-style: normal;
  font-variant-emoji: text;
  font-size: 1.35rem;
  line-height: 1;
}

.button.emoji-button,
.button.emoji-button:hover,
.button.emoji-button.primary,
.button.emoji-button.secondary,
.button.emoji-button.subtle,
.button.emoji-button.danger {
  width: auto;
  inline-size: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--emoji-font);
  box-shadow: none;
}

.alert {
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 0.75rem;
}

.list-tools {
  margin-bottom: 1rem;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 0.5rem;
}

.search-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.search-field input {
  border: 0;
  padding-right: 0.5rem;
}

.card-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 1.35rem;
}

.card-body-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

.card-body > :not(.card-body-link) {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.card-body a:not(.card-body-link),
.card-body button,
.card-body input,
.card-body audio,
.card-body .task-line,
.card-body .task-text {
  pointer-events: auto;
}

.recipe-card.is-pinned,
.recipe-detail.is-pinned,
.note-card.is-pinned,
.detail-note.is-pinned {
  background: linear-gradient(
    225deg,
    transparent 0 var(--pin-fold-size, 1.15rem),
    var(--card-bg, #fbf4e8) var(--pin-fold-size, 1.15rem)
  );
}

.recipe-card.is-pinned,
.note-card.is-pinned {
  clip-path: polygon(
    0 0,
    calc(100% - var(--pin-fold-size, 1.15rem)) 0,
    100% var(--pin-fold-size, 1.15rem),
    100% 100%,
    0 100%
  );
}

.pin-fold-form,
.offline-pin-fold {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  margin: 0;
}

.pin-fold {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--card-fg, var(--text));
  cursor: pointer;
}

.pin-fold:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: -0.45rem;
}

.offline-pin-fold {
  pointer-events: none;
}

.card-actions {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.25rem;
  background: #ffffff;
  color: var(--text);
}

.card-action-form,
.card-colour-form {
  margin: 0;
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.card-action:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 0;
}

.card-action .emoji-glyph {
  font-size: 1.15rem;
}

.card-colour-menu {
  position: relative;
}

.card-colour-menu summary {
  list-style: none;
}

.card-colour-menu summary::-webkit-details-marker {
  display: none;
}

.card-colour-options {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1.55rem);
  gap: 0.35rem;
  width: max-content;
  padding: 0.45rem;
  background: var(--bg);
}

.card-colour-button {
  display: block;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  padding: 0;
  border: 0;
  appearance: none;
  background: var(--swatch);
  cursor: pointer;
}

.card-colour-button:hover,
.card-colour-button:focus-visible,
.card-colour-button.is-selected {
  outline: 1px solid var(--text);
  outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .card-actions {
    opacity: 0;
    pointer-events: none;
  }

  .recipe-card:hover .card-actions,
  .recipe-card:focus-within .card-actions,
  .note-card:hover .card-actions,
  .note-card:focus-within .card-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.auth-shell,
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  text-align: center;
}

.auth-panel {
  width: min(420px, 100%);
  text-align: left;
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-actions .form-note {
  margin: 0;
}

.auth-actions .emoji-button {
  flex: 0 0 auto;
}

.form-note,
.date,
.editable-attachment span {
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.form-grid.no-pinned-field {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
}

.checkbox-field input {
  width: auto;
  margin: 0;
}

.checkbox-field span {
  color: var(--text);
}

.colour-field {
  border: 0;
  margin: 0;
  padding: 0;
}

.colour-field legend {
  margin-bottom: 0.65rem;
}

.colour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.content-field {
  gap: 0.65rem;
}

.colour-choice {
  display: block;
  position: relative;
  cursor: pointer;
}

.colour-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.colour-choice span {
  display: block;
  width: 2.35rem;
  height: 2.35rem;
  overflow: hidden;
  border: 1px solid transparent;
  outline: 0;
  background: var(--swatch);
  cursor: pointer;
}

.colour-choice input:checked + span {
  border-color: var(--text);
}

.file-picker {
  position: relative;
}

.file-picker:has(input:focus-visible) {
  outline: 0;
}

.file-preview:not(:empty) {
  margin-top: 0.65rem;
}

.editable-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
}

.editable-attachment strong,
.editable-attachment span {
  display: block;
}

.editable-attachment + .editable-attachment {
  border-top: 1px solid var(--line);
}

.attachment-delete-form {
  display: none;
}

@media (max-width: 720px) {
  .search-form {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .form-grid.no-pinned-field {
    grid-template-columns: 1fr;
  }

  .row-actions {
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .auth-actions {
    align-items: center;
    flex-direction: row;
  }

  .emoji-button {
    width: auto;
  }
}