@layer components {
  textarea {
    display: block;
    width: 100%;
    min-height: 8rem;
    resize: vertical;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .6rem;
    font: inherit;
    color: var(--ink);
    background: var(--card);
  }
  label {
    display: block;
    font-weight: 650;
    margin-block-end: .5rem;
  }
  .toolbar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-block: 1rem;
  }
  .toolbar span,
  #status {
    color: var(--muted);
  }
  details {
    margin-block: 1.5rem;
  }
  summary {
    cursor: pointer;
    padding-block: .75rem;
  }
  #languages {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block: .75rem;
  }
  #languages label {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: normal;
  }
  #languages input {
    width: 1.25rem;
    min-height: 1.25rem;
  }
  #translations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1rem;
  }
  article {
    padding: 1.25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 1rem;
    min-width: 0;
  }
  article h2 {
    font-size: 1.25rem;
    margin-block: 0 1rem;
  }
  article textarea {
    font-size: 1.4rem;
  }
  article p {
    font-size: .9rem;
  }
  article button {
    margin-block-start: .75rem;
  }
  button:disabled {
    opacity: .5;
    cursor: default;
  }
}

@layer components {
  dialog {
    width: min(38rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    color: var(--ink);
    background: var(--paper);
  }
  dialog::backdrop {
    background: oklch(20% 0.02 170 / .45);
  }
  #language-form {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 5rem);
  }
  #language-title {
    margin: 0;
  }
  #language-help,
  #language-count {
    font-size: .9rem;
    margin-block: .5rem;
  }
  #language-search {
    width: 100%;
  }
  #languages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    overflow-y: auto;
    gap: .25rem .75rem;
    min-height: 0;
  }
  #languages label {
    min-height: 44px;
    margin: 0;
    padding: .25rem;
  }
  #languages label:has(input:disabled) {
    opacity: .55;
  }
  #languages [hidden],
  #no-languages[hidden] {
    display: none;
  }
  .dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: .75rem;
  }
  #cancel-languages {
    background: var(--card);
    color: var(--accent);
    border: 1px solid var(--line);
  }
}