/* Small additions on top of simple.css. */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.filters input[type="search"] { flex: 1 1 100%; }
.filters select, .filters button { margin: 0; }
.phrases { list-style: none; padding: 0; }
.phrases li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.tag { font-size: 0.8em; margin-left: 0.4em; padding: 0 0.4em; border: 1px solid var(--border); border-radius: 4px; text-decoration: none; }
.examples { font-style: italic; color: var(--text-light); }
.meta, .hint { color: var(--text-light); font-size: 0.9em; }
.meaning label { display: block; }
.meaning input, .meaning textarea { width: 100%; }
.meaning .remove { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.9em; }

/* Tighter header than simple.css defaults. */
body > header { padding: 0 0.5rem 0.5rem; }
body > header > :only-child { margin-block-start: 0.5rem; }
header nav { padding: 0.5rem 0 0; }
.errors { border: 1px solid #c33; border-radius: 4px; padding: 0 1rem; }
.pager { display: flex; justify-content: space-between; margin-top: 1rem; }
header nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
header nav .auth { margin: 0 0.5rem 1rem; }
/* Name and button may still break apart when the name is too long for the row. */
header nav .logout { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 0.5rem; margin: 0; }
header nav .logout button { margin: 0; padding: 0.2rem 0.6rem; }
header nav .auth a { margin: 0; }

/* Looks like a link: it's an inline action, not a form button. */
.tag-suggestion, .tag-suggestion:enabled:hover {
  font-size: inherit; margin: 0 0 0 0.5em; padding: 0; border: none; background: none;
  color: var(--accent); text-decoration: underline dotted;
}
.tag-suggestion:enabled:hover { color: var(--accent-hover); }

/* Filter selects: collapsible on mobile, always shown inline on desktop. */
.filters .filter-selects { flex: 1 1 100%; margin: 0; }
@media (width > 720px) {
  /* Without ::details-content support it stays a collapsible, rather than hiding the filters. */
  @supports selector(::details-content) {
    .filters .filter-selects { display: contents; }
    .filters .filter-selects > summary { display: none; }
    .filters .filter-selects::details-content { display: contents; content-visibility: visible; }
  }
}

/* Tighter footer than simple.css defaults. */
body > footer { margin-top: 0.5rem; padding: 0.5rem 1rem; }
body > footer p { margin-block: 0; }