/* ---------------------------------------------------------------- search */

.searchbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.searchbar:focus-within { border-color: var(--primary); }

.searchbar-icon { color: var(--ink-faint); }

.searchbar-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  color: var(--ink);
  font-size: var(--text-sm);
}

.searchbar-input:focus { outline: none; }

.searchbar-input::placeholder { color: var(--ink-faint); }

.searchbar-input::-webkit-search-cancel-button { display: none; }

.searchbar-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
}

@media (hover: hover) {
  .searchbar-clear:hover {
    background: var(--surface-3);
    color: var(--ink);
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: var(--text-2xs);
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .chip:hover { color: var(--ink); }
}

.chip-on {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-medium);
}

.search-hint,
.search-count {
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.empty-small {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------- tags */

/* The sidebar has its own .tag-chip inside component-scoped CSS, so these names
   do not collide. This is the editable one. */
.tagbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.tagbar-icon { color: var(--ink-faint); flex: none; }

.tag-chip-on {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--space-1) 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tag-remove {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .tag-remove:hover { opacity: 1; }
}

/* No border until it is focused: an empty box with a frame reads as a required
   field, and tags are optional on every note. */
.tagbar-input {
  flex: 1;
  min-width: 8ch;
  height: 24px;
  border: none;
  background: none;
  color: var(--ink);
  font-size: var(--text-xs);
}

/* The outline goes and the row takes it on, which is what the search box does
   ten lines up. Removing it and replacing it with nothing is what this used to
   do: the tag field was the one input in the app a keyboard could reach and
   not see. */
.tagbar-input:focus { outline: none; }

.tagbar:focus-within { border-bottom-color: var(--primary); }

.tagbar-input::placeholder { color: var(--ink-faint); }

.tagbar-error {
  font-size: var(--text-2xs);
  color: var(--danger);
}

/* The tag a search is filtered to, shown so the result count is explainable. */
.active-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  height: 26px;
  padding: 0 var(--space-1) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------- trash */

.trash-note {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* Not a link, unlike every other row in the app: a deleted note has nowhere to
   open. The row is a thing with two buttons on it instead. */
.trash-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
}

.trash-when {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  white-space: nowrap;
}

.trash-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* On a phone the two buttons and the timestamp will not sit on one line beside
   the title, so the row becomes two. */
@media (max-width: 640px) {
  .trash-row {
    flex-wrap: wrap;
  }

  .trash-actions {
    margin-inline-start: auto;
  }
}

/* The end of a truncated list. Quiet: it is a statement of fact, not a call to
   action, and most lists never reach it. */
.list-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) 0 var(--space-4);
}

.list-more-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---- the list ---- */

.select-list {
  position: absolute;
  z-index: var(--z-dropdown);
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  /* Which way it opens is decided when it opens, by measuring against whatever
     is closest to cutting it off. A dialog four hundred pixels tall sliced this
     in half while the viewport had room to spare. */
  /* At least as wide as the control, and free to be wider when an option needs
     it. A list narrower than its trigger reads as a different control. */
  min-inline-size: 100%;
  max-inline-size: min(22rem, 90vw);
  max-block-size: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  box-shadow: var(--shadow-md);
}

.opens-above .select-list {
  inset-block-start: auto;
  inset-block-end: calc(100% + 4px);
}

.select-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  min-block-size: 2.25rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

/* Where the keyboard is. Follows the pointer as well, so there is never more
   than one row that looks reachable. */
.select-option.is-active {
  background: var(--surface-2);
}

.select-option-text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  flex: 1;
}

.select-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-option-detail {
  color: var(--ink-muted);
  font-size: var(--text-xs);
}

/* Chosen, which is not the same as highlighted, and most of the time is a
   different row. A tick says which one is yours; the background says where the
   keyboard is. */
.select-tick {
  flex: none;
  color: var(--primary);
}

/* ---- naming a search ---- */

.chip-save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Set apart from the filters beside it: those change what is shown, this keeps
     what is shown. Dashed, so it reads as an action rather than a state. */
  border-style: dashed;
  color: var(--ink-muted);
}

@media (hover: hover) {
  .chip-save:hover {
    color: var(--ink);
    border-color: var(--border-strong);
  }
}

.save-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: var(--space-3);
}

.save-search-input {
  flex: 1;
  min-inline-size: 12rem;
  max-inline-size: 22rem;
  min-block-size: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

/* ------------------------------------------------------- bringing notes in
 *
 * Under the export and separated by a rule, because it is the same subject from
 * the other side and reads as a pair rather than as two features that happen to
 * be near each other. */

.import {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.setting-subheading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.import-picker {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-inline-size: 100%;
}

/* What it would do, before it does any of it. Bordered rather than plain so it
   reads as a thing being offered rather than as more of the paragraph above. */
.import-plan {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  max-inline-size: 100%;
}

.import-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.import-sample {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  max-inline-size: 46ch;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.import-sample li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-more {
  color: var(--ink-faint);
}

.import-done {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--primary);
}

/* A recording that is on the device and has not gone up yet. Not an error and
   not coloured as one: nothing was lost, and the only thing missing is a
   connection. */
.recorder-kept {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}