/* Small changes on top of Pico.css */

/* Colours of the ratings, used by the buttons and by the dots of answers. The soft one
   (see-through, so it works on light and dark background) is the background of a button. */
:root {
  --rating-ok: #2e9e4f;
  --rating-think: #8cc63f;
  --rating-partial: #f0a030;
  --rating-dontknow: #d9453d;
  --rating-ok-soft: color-mix(in srgb, var(--rating-ok) 28%, transparent);
  --rating-think-soft: color-mix(in srgb, var(--rating-think) 28%, transparent);
  --rating-partial-soft: color-mix(in srgb, var(--rating-partial) 28%, transparent);
  --rating-dontknow-soft: color-mix(in srgb, var(--rating-dontknow) 28%, transparent);
  /* Dots of answers: like the buttons on a light background */
  --dot-ok: var(--rating-ok-soft);
  --dot-think: var(--rating-think-soft);
  --dot-partial: var(--rating-partial-soft);
  --dot-dontknow: var(--rating-dontknow-soft);
  /* The colour of the app: indigo, with a light and a dark shade. Green, orange and red
     belong to the ratings, so there is no other strong colour. */
  --primary: #5b4bc4;
  --primary-light: color-mix(in srgb, var(--primary) 35%, transparent);
  --primary-dark: #44379c;
  /* The logo: eyes in the colour of the page, a solid light card */
  --logo-eye: #fff;
  --logo-card: color-mix(in srgb, var(--primary) 22%, #fff);
  /* One scale of round corners: cards, controls inside them (buttons, fields) and small
     things (bars, labels). Only the account circle and ⋯ are round. */
  --radius-card: 0.75rem;
  --radius-control: 0.5rem;
  --radius-small: 0.25rem;
  /* Pico draws buttons and fields with this one */
  --pico-border-radius: var(--radius-control);
}

/* On a dark background the soft colour of a small dot gets lost, so the dots are stronger
   there (the buttons are big enough and stay soft) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot-ok: color-mix(in srgb, var(--rating-ok) 55%, transparent);
    --dot-think: color-mix(in srgb, var(--rating-think) 55%, transparent);
    --dot-partial: color-mix(in srgb, var(--rating-partial) 55%, transparent);
    --dot-dontknow: color-mix(in srgb, var(--rating-dontknow) 55%, transparent);
    --primary: #a59af2;
    --primary-dark: #7c6ee6;
    --logo-eye: #13171f;
    --logo-card: color-mix(in srgb, var(--primary) 30%, #13171f);
  }
}

/* The same when the dark look is chosen in the account menu (Pico reads data-theme too) */
:root[data-theme="dark"] {
  --dot-ok: color-mix(in srgb, var(--rating-ok) 55%, transparent);
  --dot-think: color-mix(in srgb, var(--rating-think) 55%, transparent);
  --dot-partial: color-mix(in srgb, var(--rating-partial) 55%, transparent);
  --dot-dontknow: color-mix(in srgb, var(--rating-dontknow) 55%, transparent);
  --primary: #a59af2;
  --primary-dark: #7c6ee6;
  --logo-eye: #13171f;
  --logo-card: color-mix(in srgb, var(--primary) 30%, #13171f);
}

/* Pico's colour variables in indigo, so links, buttons, check boxes and focus rings match.
   The same selectors as Pico, so these win (this file comes after Pico). */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-primary: var(--primary);
  --pico-primary-background: var(--primary);
  --pico-primary-border: var(--primary);
  --pico-primary-underline: color-mix(in srgb, var(--primary) 50%, transparent);
  --pico-primary-hover: var(--primary-dark);
  --pico-primary-hover-background: var(--primary-dark);
  --pico-primary-hover-border: var(--primary-dark);
  --pico-primary-hover-underline: var(--primary-dark);
  --pico-primary-focus: color-mix(in srgb, var(--primary) 40%, transparent);
  --pico-primary-inverse: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-primary: var(--primary);
    --pico-primary-background: var(--primary-dark);
    --pico-primary-border: var(--primary-dark);
    --pico-primary-underline: color-mix(in srgb, var(--primary) 50%, transparent);
    --pico-primary-hover: #c4bcf7;
    --pico-primary-hover-background: #6a5bd8;
    --pico-primary-hover-border: #6a5bd8;
    --pico-primary-hover-underline: #c4bcf7;
    --pico-primary-focus: color-mix(in srgb, var(--primary) 45%, transparent);
    --pico-primary-inverse: #fff;
  }
}

[data-theme="dark"] {
  --pico-primary: var(--primary);
  --pico-primary-background: var(--primary-dark);
  --pico-primary-border: var(--primary-dark);
  --pico-primary-underline: color-mix(in srgb, var(--primary) 50%, transparent);
  --pico-primary-hover: #c4bcf7;
  --pico-primary-hover-background: #6a5bd8;
  --pico-primary-hover-border: #6a5bd8;
  --pico-primary-hover-underline: #c4bcf7;
  --pico-primary-focus: color-mix(in srgb, var(--primary) 45%, transparent);
  --pico-primary-inverse: #fff;
}

/* One column on every screen: on a computer the same layout as on a phone, only wider */
header.container,
main.container {
  max-width: 46rem;
}

/* The account menu in the bar: a circle with the first letter (role="button", so Pico draws
   it as a button, not as a form field) */
nav .account-menu > summary.account-button {
  background: var(--primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1;
}

/* No arrow of Pico next to the circle */
nav .account-menu > summary.account-button::after {
  display: none;
}

.account-menu .account-email {
  padding: 0.4rem var(--pico-form-element-spacing-horizontal);
}

/* Light / dark / as the system: three small buttons in the account menu */
.account-menu .theme-switch {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem var(--pico-form-element-spacing-horizontal);
}

nav .account-menu .theme-switch button {
  flex: 1;
  margin: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-control);
  background: none;
  color: var(--page-text);
  font-size: 0.8rem;
  white-space: nowrap;
}

nav .account-menu .theme-switch button[aria-pressed="true"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Logout looks like the other items of the menu */
.inline-form {
  margin: 0;
}

/* Logout looks like the other items of the menu (no underline, same padding) */
nav .account-menu li .inline-form button {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  color: var(--pico-dropdown-color, var(--pico-color));
  text-align: left;
  text-decoration: none;
}

nav .account-menu li:has(.inline-form) {
  padding: 0;
}

/* The logo: the ghost with a card, the name and on a computer the slogan */
.logo-ghost {
  fill: var(--primary);
}

.logo-eye {
  fill: var(--logo-eye);
}

.logo-card {
  fill: var(--logo-card);
  stroke: var(--primary);
}

.logo-line {
  fill: var(--primary);
  opacity: 0.6;
}

nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
}

nav .brand .logo {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
}

nav .brand strong {
  font-size: 1.25rem;
}

/* The slogan only on the login page, the bar has just the ghost and the name */
.brand-slogan {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
}

/* The login page: a big ghost above the name */
.login-brand {
  text-align: center;
}

.login-brand .logo-big {
  width: 5.5rem;
  height: 5.5rem;
}

.login-brand h1 {
  margin: 0.25rem 0 0;
}

.login-brand .brand-slogan {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

/* Statistiky and Nápověda move to the account menu on a phone */
.menu-narrow {
  display: none;
}

/* A line under the phone-only links, between them and the look switch */
.account-menu .menu-group-end {
  border-bottom: 1px solid var(--pico-muted-border-color);
}

@media (max-width: 576px) {
  header nav li {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }

  .nav-wide {
    display: none;
  }

  .menu-narrow {
    display: list-item;
  }

  /* A smaller ghost and tighter gaps, so the bar fits on one line */
  nav .brand {
    gap: 0.3rem;
  }

  nav .brand .logo {
    width: 2rem;
    height: 2rem;
  }

  nav .brand strong {
    font-size: 1.05rem;
  }
}

/* Django messages */
.messages .message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-left: 0.25rem solid var(--pico-primary);
}

.messages .message-success {
  border-left-color: var(--pico-ins-color);
}

.messages .message-error {
  border-left-color: var(--pico-del-color);
}

.message-close {
  margin: 0;
  padding: 0 0.5rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
}

/* An error of the whole form (wrong e-mail or password), right above the button */
.form-error {
  margin-bottom: var(--pico-spacing);
  color: var(--pico-del-color);
  font-size: 0.9rem;
}

/* A password field with the eye button inside it on the right (app.js) */
.password-field {
  position: relative;
  display: block;
}

/* Room for the eye; Pico's red "!" of a wrong field goes left of it */
.password-field > input {
  padding-inline-end: 3rem !important;
  background-position: center right 2.6rem !important;
}

.password-field > .password-eye {
  position: absolute;
  top: 0;
  right: 0.35rem;
  bottom: var(--pico-spacing);
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0 0.45rem;
  border: 0;
  background: none;
  color: var(--pico-muted-color);
}

.password-field > .password-eye:hover,
.password-field > .password-eye:focus-visible {
  color: var(--pico-primary);
}

/* Error and help under the field, like Pico does it right after an input (the input is now
   inside the wrapper); :where keeps the red colour of .field-error */
:where(.password-field) + small,
:where(.password-field) + small + small {
  display: block;
  width: 100%;
  margin-top: calc(var(--pico-spacing) * -0.75);
  margin-bottom: var(--pico-spacing);
  color: var(--pico-muted-color);
}

.password-eye svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Links under the login and registration form: forgotten password · create an account */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.auth-links .link-button {
  padding: 0;
  text-decoration: none;
}

/* The code from the email: big digits with space between them */
.code-input {
  font-size: 1.5rem !important;
  letter-spacing: 0.3em;
  text-align: center;
}

/* A trap for robots in the registration form: people never see it */
.trap-field,
label[for="id_website"] {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Čeština · English under the login box */
.language-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.language-switch button {
  width: auto;
  margin: 0;
  padding: 0.2rem 0.3rem;
  border: 0;
  background: none;
  color: var(--pico-primary);
  font-size: inherit;
}

.language-switch button[aria-current="true"] {
  color: var(--pico-muted-color);
  font-weight: 600;
}

/* The arrow of a language pair or a translation (EN → CS, palm → dlaň), an SVG icon from
   the arrows template tags: as high as capital letters and centred on them */
svg.arrow {
  display: inline-block;
  width: 1em;
  height: 0.72em;
  margin: 0 0.22em;
  vertical-align: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Narrow centered box, e.g. login */
.narrow {
  max-width: 26rem;
  margin: 2rem auto;
}

/* Helpers */
.muted {
  color: var(--pico-muted-color);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.actions [role="button"],
.actions button {
  margin: 0;
  width: auto;
}

/* Pico has no red button, used for delete */
button.danger {
  background-color: var(--pico-del-color);
  border-color: var(--pico-del-color);
  color: #fff;
}

/* Page title with a button on the right */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: var(--pico-spacing);
}

.page-head h1 {
  margin: 0;
}

/* Form pages */
.form-box {
  max-width: 40rem;
}

/* Language pair, e.g. (EN → CS) */
.pair {
  color: var(--pico-muted-color);
  white-space: nowrap;
}

/* Deck tree (dashboard and test setup) */
.deck-tree {
  list-style: none;
  margin: 0;
  /* A line on the left shows what belongs under which folder */
  margin-left: 0.7rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--pico-muted-border-color);
}

.deck-tree-root {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.deck-tree li {
  list-style: none;
  margin: 0;
}

.deck-tree details {
  margin: 0;
  padding: 0;
  border: 0;
}

/* One row: icon, name, language pair, counts on the right */
.deck-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  min-height: 2.25rem;
  padding: 0.2rem 0;
  line-height: 1.4;
}

.deck-tree summary.deck-row {
  cursor: pointer;
  list-style: none;
}

/* No Pico arrow on the right and no browser marker, the folder icon is enough */
.deck-tree summary.deck-row::after {
  display: none;
}

.deck-tree summary.deck-row::-webkit-details-marker {
  display: none;
}

/* Pico adds space under an open summary; rows of the tree should be even */
.deck-tree details[open] > summary.deck-row {
  margin-bottom: 0;
}

.deck-icon {
  width: 1.4rem;
  flex: none;
  text-align: center;
}

.deck-icon-folder::before {
  content: "📁";
}

.deck-tree details[open] > summary .deck-icon-folder::before {
  content: "📂";
}

/* List of sibling decks with order arrows */
.sibling-list {
  padding-left: 0;
}

.sibling-list li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.reorder {
  display: flex;
  gap: 0.25rem;
}

.reorder form {
  margin: 0;
}

.reorder button {
  margin: 0;
  padding: 0.25rem 0.75rem;
}

/* Breadcrumbs that can wrap to more lines on phones.
   Pico's own breadcrumb style fits only one line, so it is replaced here. */
nav[aria-label="breadcrumb"] {
  margin-bottom: var(--pico-spacing);
}

nav[aria-label="breadcrumb"] ul {
  flex-wrap: wrap;
  column-gap: 0.5rem;
  margin: 0;
  padding: 0;
}

nav[aria-label="breadcrumb"] ul li {
  padding: 0.25rem 0;
}

nav[aria-label="breadcrumb"] ul li:not(:first-child) {
  margin-inline-start: 0;
}

nav[aria-label="breadcrumb"] ul li a {
  margin: 0;
  padding: 0;
}

nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
  position: static;
  width: auto;
  margin: 0 0 0 0.5rem;
}

/* Words in a deck */
.term-form-box {
  margin-bottom: var(--pico-spacing);
}

.term-form-box form {
  margin: 0;
}

/* After adding a word the line "✓ Přidáno do …" lights up in light indigo for 2 seconds and
   goes out again. The form is new after every word, so it lights up every time. */
.term-added {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-control);
  color: var(--pico-color);
  animation: added-glow 2.5s ease-out;
}

@keyframes added-glow {
  0%,
  80% {
    background-color: var(--primary-light);
  }

  100% {
    background-color: transparent;
  }
}

/* The button while the word is being sent: pressed and "Adding…" */
.add-button .add-busy {
  display: none;
}

#term-form.htmx-request .add-button {
  transform: scale(0.97);
  opacity: 0.75;
  cursor: progress;
}

#term-form.htmx-request .add-button .add-idle {
  display: none;
}

#term-form.htmx-request .add-button .add-busy {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .term-added {
    animation: none;
  }
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.sort-links {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.sort-links a[aria-current] {
  font-weight: bold;
  text-decoration: none;
  color: inherit;
}

.term-list {
  padding-left: 0;
}

.term-list li {
  list-style: none;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.term-main {
  font-weight: bold;
}

/* Choosing words for moving: check boxes and a bar at the bottom, only after "Vybrat" */
.select-box,
.select-bar,
#term-list.selecting .select-start {
  display: none;
}

#term-list.selecting .select-box {
  display: inline-block;
  flex-shrink: 0;
  margin: 0.2rem 0 0;
}

#term-list.selecting .term-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

#term-list.selecting .select-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  background: var(--pico-background-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

.select-bar label {
  margin: 0;
}

.select-bar button,
.select-start {
  width: auto;
  margin: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
}

.move-words {
  padding-left: 1.25rem;
}

.hint {
  font-style: italic;
}

.term-context {
  font-size: 0.875rem;
  margin-top: 0.15rem;
}

/* Translation of the sentence, on its own line under the sentence */
.sentence-native {
  display: block;
}

/* Error text under a form field */
.field-error,
:where(.password-field) + small.field-error {
  color: var(--pico-del-color);
}

/* Duplicate hints under the word form */
.term-check {
  padding: 0.75rem 1rem;
  margin-bottom: var(--pico-spacing);
  border-left: 0.25rem solid var(--pico-primary);
  background: var(--pico-card-sectioning-background-color);
  border-radius: var(--pico-border-radius);
}

.term-check p {
  margin-bottom: 0.5rem;
}

.term-check .check-block {
  font-weight: bold;
}

.check-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.check-actions button {
  margin: 0;
  width: auto;
  padding: 0.35rem 0.75rem;
}

/* Test screen */
.study {
  max-width: 34rem;
  margin: 0 auto;
}

.legend {
  padding: 0.75rem 1rem;
  margin-top: var(--pico-spacing);
  border-left: 0.25rem solid var(--pico-primary);
  background: var(--pico-card-sectioning-background-color);
  border-radius: var(--pico-border-radius);
}

.legend p {
  margin-bottom: 0.5rem;
}

/* One row per button: the button as it looks, name with the key, what it does */
.legend-list {
  display: grid;
  grid-template-columns: 3rem minmax(9rem, auto) 1fr;
  gap: 0.4rem 0.75rem;
  align-items: center;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.9rem;
}

.legend-list li {
  display: contents;
  list-style: none;
}

.legend-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  font-size: 1.1rem;
}

.legend-plain {
  color: var(--pico-muted-color);
  font-size: 0.75rem;
}

.legend-plain:not(.legend-wide) {
  font-size: 0.95rem;
}

.legend-name .hotkey {
  margin-left: 0.2rem;
}

/* On a phone: what it does under the name */
@media (max-width: 576px) {
  .legend-list {
    grid-template-columns: 3rem 1fr;
  }

  .legend-what {
    grid-column: 2;
    margin-top: -0.35rem;
    font-size: 0.8rem;
  }
}

.legend button {
  margin: 0;
  width: auto;
  padding: 0.35rem 0.75rem;
}

/* How far the test is: a thin bar with the numbers under it */
.card-progress {
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
}

.progress-bar {
  display: block;
  height: 0.35rem;
  margin-bottom: 0.3rem;
  border-radius: var(--radius-small);
  background: var(--pico-muted-border-color);
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-small);
  background: var(--pico-primary-background);
}

/* The card of the test looks like the cards of the dashboard */
article.flashcard {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-card);
  box-shadow: none;
}

.flashcard {
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: var(--pico-spacing);
}

.card-question {
  margin-bottom: 0.5rem;
}

.card-main {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.card-others,
.card-hint {
  color: var(--pico-muted-color);
}

.card-sentence {
  font-style: italic;
}

/* The translation of the sentence is only a help: not in italics, grey */
.card-sentence-native {
  font-style: normal;
  color: var(--pico-muted-color);
}

.card-sentence mark {
  font-style: normal;
  font-weight: bold;
}

.card-answer {
  font-size: 1.5rem;
  font-weight: bold;
}

.card-note {
  font-size: 0.875rem;
}

/* Pronunciation: IPA small and grey under the foreign word */
.ipa {
  display: block;
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--pico-muted-color);
}

/* On a card 🔊 is always at the right edge, in the middle of the line of the word. The word
   stays in the centre: both sides keep room for the icon, so a long word never goes under it. */
.card-main,
.card-word-line {
  position: relative;
  display: block;
  padding: 0 1.75rem;
}

/* A long question would break in the middle on a phone */
.card-main-long {
  font-size: 1.6rem;
}

.card-speak {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  line-height: 1;
}

/* 🔊 is grey and light, so it does not pull the eye from the word; darker when used */
.link-button.speak {
  padding: 0.25rem;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
  filter: grayscale(1);
  opacity: 0.45;
  transition: opacity 0.15s;
}

.link-button.speak[hidden] {
  display: none;
}

/* 🔊 at the end of a sentence: a bit smaller, not in italics */
.card-sentence .link-button.speak,
.term-context .link-button.speak {
  font-size: 1rem;
  font-style: normal;
}

.link-button.speak:hover,
.link-button.speak:focus-visible,
.link-button.speak.speaking {
  opacity: 0.9;
}

/* The user's own words with the same text: as important as the sentence */
.card-own {
  margin-bottom: 0.5rem;
}

/* Meanings from the dictionary: small, at the bottom of the back */
.card-dictionary {
  font-size: 0.875rem;
}

.card-dictionary p {
  margin-bottom: 0;
}

/* One word (meaning) never breaks inside. The dot is added after the word and stays with it,
   so a new line never starts with a dot; the last shown word has none (study.js). */
.meaning {
  white-space: nowrap;
}

.meaning::after {
  content: "\00a0·";
}

.meaning:last-of-type::after,
.meaning.last-shown::after {
  content: none;
}

.meaning[hidden] {
  display: none;
}

.card-dictionary small {
  font-size: 0.75rem;
}

/* A button that looks like a link, e.g. "+3" */
.link-button {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0 0.25rem;
  border: none;
  background: none;
  color: var(--pico-primary);
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.card-show {
  width: 100%;
  min-height: 3.5rem;
  border-radius: var(--radius-control);
  font-weight: bold;
}

/* Rating buttons: one row of four, big enough for a thumb */
.ratings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0;
}

.rating {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 4.5rem;
  margin: 0;
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-control);
  /* Inside a button Pico's colour variables mean the blue button, so use the page text colour */
  color: inherit;
  border: 1px solid var(--pico-muted-border-color);
}

.rating-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.rating-interval {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Soft colours, see-through so they work on light and dark background.
   The emoji and the time are always there too, colour is never the only sign. */
.rating-ok {
  background-color: var(--rating-ok-soft);
}

.rating-think {
  background-color: var(--rating-think-soft);
}

.rating-partial {
  background-color: var(--rating-partial-soft);
}

.rating-dontknow {
  background-color: var(--rating-dontknow-soft);
}

.rating:hover {
  filter: brightness(0.95);
}

/* Key hints only make sense with a keyboard */
.hotkey {
  font-size: 0.65rem;
  padding: 0.05rem 0.3rem;
}

.rating .hotkey {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
}

@media (hover: none) {
  .hotkey {
    display: none;
  }
}

.study-footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.study-footer form {
  margin: 0;
}

/* ? and ✏️ together on the left, "Ukončit test" on the right */
.study-tools {
  display: flex;
  gap: 0.5rem;
}

.study-footer button {
  margin: 0;
  width: auto;
  padding: 0.35rem 0.9rem;
}

/* Test setup: deck tree with checkboxes */
.deck-pick label {
  margin: 0.25rem 0;
}

/* Summary */
.summary-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0;
}

.summary-counts li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.25rem;
  border-radius: var(--pico-border-radius);
  text-align: center;
}

.deck-counts {
  color: var(--pico-muted-color);
  white-space: nowrap;
}

/* Words to review inside the brackets: "(26 ↻ 9)", a bit smaller */
.deck-due {
  font-size: 0.85em;
  cursor: default;
}

/* Text only for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Word page */
/* Inside a card the two directions are only framed boxes, not cards with a shadow */
article.direction-box {
  margin-bottom: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-control);
  background: none;
  box-shadow: none;
}

article.direction-box > header {
  margin: -0.75rem -1rem 0.6rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  background: none;
}

.direction-box p {
  margin-bottom: 0.5rem;
}

.rating-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Accessibility */

/* Hidden until it gets keyboard focus */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--pico-background-color);
  border: 2px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
}

.skip-link:focus {
  top: 1rem;
}

main:focus {
  outline: none;
}

/* Clear focus ring for keyboard users on our own buttons and links */
.rating:focus-visible,
.card-show:focus-visible,
.sibling-list a:focus-visible,
.deck-tree a:focus-visible,
.term-list a:focus-visible {
  outline: 3px solid var(--pico-primary);
  outline-offset: 2px;
}

/* Drag and drop in the dashboard tree */

/* A long press on a phone must start dragging, not select text or open a link menu */
#deck-tree .deck-row {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* While dragging: where the deck would land */
.drop-into > .deck-row,
.drop-into > details > .deck-row {
  background: color-mix(in srgb, var(--pico-primary) 18%, transparent);
  outline: 2px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
}

.drop-before > .deck-row,
.drop-before > details > .deck-row {
  box-shadow: inset 0 3px 0 var(--pico-primary);
}

.drop-after > .deck-row,
.drop-after > details > .deck-row {
  box-shadow: inset 0 -3px 0 var(--pico-primary);
}

/* The copy under the pointer must not hide the row under it from elementFromPoint */
.sortable-fallback {
  pointer-events: none;
}

/* The deck being dragged and its place */
.sortable-ghost {
  opacity: 0.4;
}

/* The dragged copy: only its own row, small and see-through */
.sortable-fallback {
  max-width: 18rem;
  max-height: 2.4rem;
  overflow: hidden;
  opacity: 0.9;
  padding: 0 0.5rem;
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
  border-radius: var(--pico-border-radius);
}

.sortable-fallback summary::after,
.sortable-fallback .deck-counts {
  display: none;
}

/* Gap for the word in a sentence (native → foreign card) */
.cloze {
  display: inline-block;
  min-width: 3em;
  border-bottom: 2px solid var(--pico-primary);
  color: transparent;
  font-style: normal;
}

/* The word in sentences of word lists */
.term-context mark {
  padding: 0 0.15em;
}

/* Help: tabs (each tab is its own page) */
.tabs {
  margin-bottom: calc(var(--pico-spacing) * 1.5);
  border-bottom: 1px solid var(--pico-muted-border-color);
  /* On a phone the tabs scroll sideways instead of making the page wider */
  overflow-x: auto;
}

.tabs ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabs a {
  display: block;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.tabs a[aria-current="page"] {
  color: var(--pico-color);
  font-weight: bold;
  border-bottom-color: var(--primary);
}

/* The sections of the help are cards like on the other pages */
.help section {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-card);
  background: var(--pico-card-background-color);
}

.help section > :last-child {
  margin-bottom: 0;
}

.help section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

@media (max-width: 576px) {
  .help section {
    padding: 0.85rem 0.9rem;
  }
}

.help-tree {
  padding: 0.75rem 1rem;
  line-height: 1.5;
}

/* Small sample cards in the help */
.help-card {
  text-align: center;
  margin-bottom: var(--pico-spacing);
}

.help-card header {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.help-card-main {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

/* Help tables: short words can wrap, so most tables fit a phone without scrolling */
.help td code {
  white-space: normal;
}

/* Word form: less space between the two fields, so everything fits on a phone */
.term-fields {
  margin-bottom: 0;
}

.term-fields input {
  margin-bottom: 0.5rem;
}

/* Translation suggestions: one row is always kept free for them, so for most words the
   button does not move; when there are many, they wrap to more rows */
.suggest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  margin-bottom: 0.5rem;
}

.suggest-label {
  flex: none;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.suggestion {
  flex: none;
  margin: 0;
  width: auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.9rem;
}

.suggestion small {
  color: var(--pico-muted-color);
  font-size: 0.7rem;
}

/* Duplicate hints are under the button, with a little space */
#term-check .term-check {
  margin-top: 0.75rem;
}

/* Other meanings on the word page */
.other-meanings form {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.other-meanings button {
  margin: 0;
  width: auto;
  padding: 0.15rem 0.6rem;
  font-size: 0.85rem;
}

/* Groups on the settings page */
/* Each group is a card (card-section); the heading like on the other pages */
.settings-group h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.settings-group fieldset:last-child {
  margin-bottom: 0;
}

/* The account card under the save button */
.settings-account {
  margin-top: 1.5rem;
}

.settings-account p {
  margin-bottom: 0;
}

/* The save button with a quiet cancel link next to it */
.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-actions button {
  margin-bottom: 0;
}

/* End of a test: the word that does not stick and a form for a sentence */
.sentence-task {
  margin: var(--pico-spacing) 0;
  padding: var(--pico-spacing);
  border-left: 0.25rem solid var(--pico-primary);
  background: var(--pico-card-sectioning-background-color);
  border-radius: var(--pico-border-radius);
}

.sentence-task h2 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

/* Same height with and without 🔊, so the two fields start at the same line */
.sentence-task-word {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.sentence-task textarea {
  margin-bottom: 0.5rem;
}

.sentence-example {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

/* Coloured dots of the last answers: one row for each direction, 10 in a line (8 on a phone) */
.answer-dots {
  margin-bottom: 0.5rem;
}

.dots-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
}

.dots-label {
  flex-shrink: 0;
  width: 4.5rem;
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  white-space: nowrap;
}

.dots {
  display: grid;
  grid-template-columns: repeat(10, 1rem);
  gap: 0.3rem;
}

/* On a narrow phone 10 dots in a line do not fit next to the label; 8 do (as many as the
   summary shows at first) */
@media (max-width: 400px) {
  .dots {
    grid-template-columns: repeat(8, 1rem);
  }
}

.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  /* A thin neutral edge (grey from the text colour, so it fits light and dark mode); the soft
     colours are easier to see with it */
  border: 1px solid color-mix(in srgb, var(--pico-color) 25%, transparent);
}

.dot[hidden],
.dots-history[hidden] {
  display: none;
}

/* A dot has the same soft background as the rating button with the same emoji
   (stronger in the dark mode, see :root) */
.dot-ok {
  background-color: var(--dot-ok);
}

.dot-think {
  background-color: var(--dot-think);
}

.dot-partial {
  background-color: var(--dot-partial);
}

.dot-dontknow {
  background-color: var(--dot-dontknow);
}

.dots-more,
.dots-history {
  flex-shrink: 0;
  font-size: 0.8rem;
}

.dots-more-slot {
  flex-shrink: 0;
  min-width: 1.75rem;
  text-align: right;
}

.dots-more {
  padding: 0;
}

/* Ring with the share of correct answers (word page), only CSS */
.dots-ring {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--rating-ok) calc(var(--percent) * 1%),
    var(--pico-muted-border-color) 0
  );
  font-size: 0.7rem;
  font-weight: bold;
}

.dots-ring::before {
  content: "";
  position: absolute;
  inset: 0.3rem;
  border-radius: 50%;
  background: var(--pico-card-background-color);
}

.dots-ring span {
  position: relative;
}

/* The line under the word form instead of "Více": a short preview of the sentence (two lines
   at most, "…" when longer) and "upravit" on the right; when open, the fields show the sentence,
   so the preview hides and "hotovo" closes them */
.term-more > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.more-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--pico-muted-color);
}

.term-more[open] .more-preview {
  visibility: hidden;
}

.more-done,
.term-more[open] .more-edit {
  display: none;
}

.term-more[open] .more-done {
  display: inline;
  flex-shrink: 0;
  color: var(--pico-primary);
}

.more-edit {
  flex-shrink: 0;
  color: var(--pico-primary);
}

.more-edit[hidden] {
  display: none;
}

/* Settings: what to play automatically, under the check box and only when it is ticked */
.autoplay-content {
  margin: 0.5rem 0 0 1.75rem;
}

.autoplay:has(input[name="autoplay_pronunciation"]:not(:checked)) .autoplay-content {
  display: none;
}

.settings-subgroup {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--pico-muted-color);
}

/* Statistics page */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--pico-border-radius);
}

.stat-number {
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 1.1;
}

/* Soft colours of the rating buttons */
.tone-ok {
  background: var(--rating-ok-soft);
}

.tone-think {
  background: var(--rating-think-soft);
}

.tone-partial {
  background: var(--rating-partial-soft);
}

.tone-dontknow {
  background: var(--rating-dontknow-soft);
}

/* The sections of the statistics page are cards like on the dashboard */
.stat-section {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-card);
  background: var(--pico-card-background-color);
}

.stat-section > :last-child {
  margin-bottom: 0;
}

/* The dates under a line chart hang below it, so the chart keeps its space at the end */
.stat-section > .line-chart:last-child {
  margin-bottom: 1.6rem;
}

.stat-section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

@media (max-width: 576px) {
  .stat-section {
    padding: 0.85rem 0.9rem;
  }
}

/* Simple line chart: y labels on the left, the plot with grid lines, dots and dates */
.line-chart {
  display: flex;
  gap: 0.5rem;
  height: 11rem;
  margin: 0.5rem 0 2rem;
}

.line-chart-y {
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
}

.line-chart-y small,
.line-chart-x small {
  position: absolute;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  white-space: nowrap;
}

.line-chart-y small {
  right: 0;
  transform: translateY(-50%);
}

.line-chart-plot {
  position: relative;
  flex: 1;
}

.line-chart-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.line-chart-grid {
  stroke: var(--pico-muted-border-color);
  stroke-width: 1;
}

.line-chart-line {
  stroke: var(--chart-color);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.line-chart-dot {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--chart-color);
  border-radius: 50%;
  background: var(--pico-background-color);
  transform: translate(-50%, -50%);
}

.line-chart-x {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.5rem;
}

.line-chart-x small {
  top: 0.35rem;
  transform: translateX(-50%);
}

/* The last date ends at the right edge, so it does not go over it */
.line-chart-x small:last-child {
  transform: translateX(-100%);
}

/* The line of the words chart in the second colour (green is for the ratings) */
.chart-words {
  --chart-color: var(--primary);
}

/* "Poslední testy": a table made of grid rows, so a whole row can be a link */
.test-row {
  display: grid;
  grid-template-columns:
    4.6rem minmax(4.5rem, 2fr) 4.2rem minmax(4.5rem, 1fr) 3.8rem 9.2rem 3.4rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  font-size: 0.9rem;
}

.tests-table a.test-row {
  color: inherit;
  text-decoration: none;
}

.tests-table a.test-row:hover {
  background: var(--pico-muted-border-color);
}

.tests-table a.test-row.unfinished {
  color: var(--pico-muted-color);
}

.test-stopped {
  color: var(--pico-muted-color);
  font-variant-emoji: text;
}

.test-head {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  white-space: nowrap;
}

.test-count {
  text-align: right;
}

.test-direction {
  white-space: nowrap;
}

/* The time under the date (on a phone next to it); paths and the limit on their own lines */
.test-when small,
.test-decks small,
.test-scope small {
  display: block;
}

.test-scope {
  font-size: 0.8rem;
  line-height: 1.3;
}

.test-when {
  white-space: nowrap;
}

.test-decks {
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.test-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1.6rem;
}

.test-success-head {
  padding-left: 1.6rem;
}

/* Success: a short bar of a fixed length, filled by the percent */
.test-bar {
  flex-shrink: 0;
  width: 4rem;
  height: 0.5rem;
  border-radius: var(--radius-small);
  overflow: hidden;
  background: var(--pico-muted-border-color);
}

.test-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-small);
  background: var(--pico-primary-background);
}





.test-words-label {
  display: none;
}

/* On a phone: date and time spent, the path, direction with the scope and the words, then
   the bar with the percent */
@media (max-width: 768px) {
  .test-head {
    display: none;
  }

  .test-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "when when time"
      "decks decks decks"
      "direction scope words"
      "success success success";
    gap: 0.15rem 0.5rem;
    padding: 0.6rem 0.25rem;
  }

  .test-when {
    grid-area: when;
  }

  .test-when small {
    display: inline;
  }

  .test-time {
    grid-area: time;
  }

  .test-decks {
    grid-area: decks;
  }

  .test-direction {
    grid-area: direction;
  }

  .test-scope {
    grid-area: scope;
  }

  .test-scope small {
    display: inline;
    margin-left: 0.3rem;
  }

  .test-words {
    grid-area: words;
  }

  .test-words-label {
    display: inline;
  }

  .test-success {
    grid-area: success;
    padding-left: 0;
  }

  .test-bar {
    flex: 1;
  }
}

/* "Co ti nejde": cards like the flashcard, a coloured stripe on the left */
.hard-words {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.75rem;
}

/* The card turns in 3D: both faces lie on the same place, the back one is turned around */
.hard-words .hard-word[role="button"] {
  display: grid;
  perspective: 60rem;
  padding: 0;
  border: 0;
  border-radius: var(--pico-border-radius);
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hard-word:focus-visible {
  outline: 2px solid var(--pico-primary-border);
  outline-offset: 2px;
}

.hard-word-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  /* No frame: a light fill in the colour of the kind (red for the enemy, green for …) */
  border: 0;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--stripe) 14%, var(--pico-card-background-color));
  backface-visibility: hidden;
  transition: transform 0.45s ease, visibility 0s 0.2s;
}

.hard-word:hover .hard-word-face {
  background: color-mix(in srgb, var(--stripe) 22%, var(--pico-card-background-color));
}

.hard-word-back {
  transform: rotateY(180deg);
  visibility: hidden;
}

.hard-word.flipped .hard-word-front {
  transform: rotateY(-180deg);
  visibility: hidden;
}

.hard-word.flipped .hard-word-back {
  transform: rotateY(0deg);
  visibility: visible;
}

/* The small ↻ in the top right corner: the card turns (darker under the mouse) */
.hard-word-face {
  position: relative;
}

.hard-word-turn {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  color: var(--pico-muted-color);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
}

.hard-word:hover .hard-word-turn {
  color: var(--page-text);
  opacity: 1;
}

/* "Detail" on the back: a quiet word, not an underlined link (darker under the mouse) */
.hard-words a.hard-word-detail {
  align-self: flex-end;
  margin-top: 0.25rem;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.hard-words a.hard-word-detail:hover {
  color: var(--page-text);
}

/* Without animations the card only changes */
@media (prefers-reduced-motion: reduce) {
  .hard-word-face {
    transition: none;
  }
}

.hard-word.tone-ok {
  --stripe: var(--rating-ok);
}

.hard-word.tone-think {
  --stripe: var(--rating-think);
}

.hard-word.tone-partial {
  --stripe: var(--rating-partial);
}

.hard-word.tone-dontknow {
  --stripe: var(--rating-dontknow);
}

.hard-word-kind {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.hard-word-animal {
  font-size: 1.75rem;
  line-height: 1;
}

.hard-word-word {
  font-size: 1.4rem;
  line-height: 1.2;
}

/* Smaller cards on the dashboard: 3 in a row (2 on a phone); with fewer cards the row is
   not filled, so the cards keep their size */
.hard-words.hard-words-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.hard-words-compact .hard-word-face {
  padding: 0.7rem 0.75rem;
}

.hard-words-compact .hard-word-kind {
  align-items: flex-start;
  gap: 0.35rem;
  font-size: 0.8rem;
  line-height: 1.25;
}

.hard-words-compact .hard-word-animal {
  font-size: 1.3rem;
}

.hard-words-compact .hard-word-word {
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.hard-words-compact .hard-word-detail {
  font-size: 0.8rem;
}

/* On a phone the 3 cards of the dashboard are low rows of the same height under each other,
   so all of them stay in sight: the animal on the left, the kind small above the big word,
   ↻ on the right; the back has the text and "Details" on one line. Long texts end with "…". */
@media (max-width: 576px) {
  .hard-words.hard-words-compact {
    grid-template-columns: 1fr;
    grid-auto-rows: 5.9rem;
    gap: 0.45rem;
  }

  .hard-words-compact .hard-word-face {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    align-items: center;
    align-content: center;
    height: 5.9rem;
    padding: 0.4rem 2.2rem 0.4rem 0.7rem;
    overflow: hidden;
  }

  .hard-words-compact .hard-word-kind {
    display: contents;
  }

  .hard-words-compact .hard-word-animal {
    grid-row: 1 / span 9;
    justify-self: center;
    font-size: 1.9rem;
  }

  .hard-words-compact .hard-word-kind-text {
    grid-column: 2;
    font-size: 0.78rem;
  }

  .hard-words-compact .hard-word-word,
  .hard-words-compact .hard-word-face > small {
    grid-column: 2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .hard-words-compact .hard-word-word {
    font-size: 1.15rem;
    overflow-wrap: normal;
  }

  .hard-words-compact .hard-word-turn {
    top: 50%;
    transform: translateY(-50%);
  }

  /* The back: no kind (the front has it); "Details" under the text on the left, far from ↻,
     so a tap to turn the card does not open the word */
  .hard-words-compact .hard-word-back .hard-word-kind-text {
    display: none;
  }

  /* The text may take two lines, so "EN → CS yes, CS → EN no" is not cut on a narrow phone */
  .hard-words-compact .hard-word-back > small {
    display: -webkit-box;
    font-size: 0.8rem;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hard-words-compact .hard-word-back .hard-word-detail {
    grid-column: 2;
    justify-self: start;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .hard-words-compact .hard-word-back .hard-word-word {
    font-size: 1.05rem;
  }
}


/* Today on the dashboard: a line with the tests and time, then the ring of today's ratings
   and the bar chart of the last 7 days next to each other (one under the other on a phone) */


/* Four numbers of today in a row (two in a row on a phone); they are buttons, the chosen
   one has a blue line under it */
.today-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.today-stats .today-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0.4rem 0.5rem 0.5rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--page-text);
  text-align: left;
  cursor: pointer;
}

.today-stats .today-stat:hover {
  border-bottom-color: var(--pico-muted-border-color);
}

.today-stats .today-stat[aria-selected="true"] {
  border-bottom-color: var(--primary);
}

.today-stat-value {
  font-size: 1.35rem;
  line-height: 1.2;
}

.today-stat-value span {
  font-size: 1.1rem;
}

/* Sections as cards: a light background, round corners and the same space everywhere */
.card-section {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--radius-card);
  background: var(--pico-card-background-color);
}

.card-section > :last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

/* The one main action of a page (start a test), on the whole width */
/* The test buttons: indigo with a soft gradient. start-test is the big
   one (the setup of a test), test-button a small one (again the wrong words of a test) */
a.start-test,
button.start-test,
button.test-button,
button.save-button {
  border: 0;
  background: linear-gradient(135deg, #7464dc, var(--primary-dark));
  color: #fff;
  font-weight: bold;
  text-align: center;
}

a.start-test:hover,
button.start-test:hover,
button.test-button:hover,
button.save-button:hover {
  background: linear-gradient(135deg, #6a5bd8, #3a2f88);
  color: #fff;
}

a.start-test,
button.start-test {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-control);
  box-shadow: 0 0.35rem 1rem color-mix(in srgb, var(--primary) 25%, transparent);
  font-size: 1.05rem;
}

.practice-row {
  margin-bottom: 1rem;
}

/* "▶ Procvičit" in the bar and "▶ Procvičit slovník" on a deck: both open the setup of a test,
   so they look the same, an indigo frame. The filled buttons really start a test. */
a.practice-button {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 2px var(--pico-primary);
  color: var(--pico-primary);
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

a.practice-button:hover {
  background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
}

/* A fieldset as a card: the legend is the heading of the card */
fieldset.card-section {
  margin-bottom: 1rem;
}

fieldset.card-section > legend.section-title {
  float: left;
  width: 100%;
  padding: 0;
  font-weight: bold;
}

fieldset.card-section > legend.section-title + * {
  clear: both;
}

/* A page heading with a small menu ⋯ next to it, and a grey line under it */
.title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.title-row h1 {
  margin: 0;
  line-height: 1.2;
}

/* Pico moves a dropdown up and down by the spacing of a navigation; here it is not one */
.title-row details.dropdown {
  margin: 0;
}

.page-sub {
  margin: 0.2rem 0 1rem;
}

/* "✎ Upravit" next to the heading of a word */
.title-row a.edit-link {
  margin-left: 0.5rem;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.title-row a.edit-link:hover {
  color: var(--page-text);
}

.title-row {
  flex-wrap: wrap;
}

/* The translation under the word, bigger than other grey lines */
.term-translation {
  font-size: 1.2rem;
}

/* A test button can also be a form button; the save button of the settings looks the same */
button.save-button {
  width: auto;
  padding: 0.5rem 1.6rem;
  border-radius: var(--radius-control);
}

button.test-button {
  display: inline-block;
  width: auto;
  margin-bottom: 0;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-control);
  font-size: 0.95rem;
}

.more-menu summary.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 50%;
  background: none;
  color: var(--pico-muted-color);
  font-size: 1.1rem;
  line-height: 1;
}

.more-menu summary.more-button::after {
  display: none;
}

.more-menu summary.more-button:hover,
.more-menu summary.more-button:focus,
.more-menu[open] summary.more-button {
  background: none;
  /* Pico sets its colour variable to white on a focused button, so the page colour */
  color: var(--page-text);
}

/* The menu opens to the right of the button, so it stays on a phone screen */
.more-menu > ul {
  min-width: 12rem;
}

/* "+ Nový" next to the heading "Slovníky" */
.section-head a.section-add {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 576px) {
  .card-section {
    padding: 0.85rem 0.9rem;
  }
}

/* Bar chart of the chosen number: the value above each bar, the day under it */
/* More room under the numbers, so the chart does not stick to them */
.week-chart {
  display: flex;
  gap: 0.5rem;
  height: 9rem;
  margin-top: 1rem;
}

.week-chart[hidden] {
  display: none;
}

.week-day {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.week-value,
.week-label {
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  white-space: nowrap;
}

/* The space of the bar (with room on top for the value), so 100 % is the highest day; the
   value sits right on top of its bar */
.week-track {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.week-track .week-value {
  margin-bottom: 0.15rem;
}

/* The other days in the light second colour, today in the full one */
.week-bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  background: var(--primary-light);
}

.week-bar.is-today {
  background: var(--primary);
}

.week-label.is-today {
  color: var(--primary);
  font-weight: bold;
}

@media (max-width: 576px) {
  .today-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}




/* Search: the field and one row for each word found */
.search-form {
  margin-bottom: var(--pico-spacing);
}

.search-form input {
  margin-bottom: 0;
}

/* A heading with something right after it (the search next to "Slovníky") and the numbers
   at the right edge (under them on a phone) */
.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.section-head .section-title {
  margin: 0;
}

/* The same height with the magnifier and with the field, so nothing moves */
.section-head {
  min-height: 1.9rem;
}

/* The search on the dashboard: a light strip over the tree, like a filter of the list */
.search-form.search-compact {
  margin: 0 0 0.75rem;
}

.search-compact input[type="search"] {
  width: 100%;
  height: 2.2rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-inline-start: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background-color: color-mix(in srgb, var(--pico-muted-border-color) 45%, transparent);
  background-position: center left 0.6rem;
  box-shadow: none;
  font-size: 0.9rem;
}

.search-compact input[type="search"]:focus {
  border-color: var(--pico-primary-border);
  background-color: var(--pico-background-color);
  box-shadow: none;
}

/* Pico makes a search field round (its own --pico-border-radius on it); the radius of the
   controls again, so the corners are like the other fields. The form has no role="search" on purpose:
   Pico would round it too. */
.search-form input[type="search"] {
  --pico-border-radius: var(--radius-control);
}

#search-results:not(:empty) {
  margin-bottom: calc(var(--pico-spacing) * 1.5);
}

.search-hits {
  margin: 0.5rem 0 0;
  padding: 0;
}

.search-hit {
  list-style: none;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.search-found {
  font-size: 0.9rem;
}

.search-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.search-hit .search-edit {
  color: var(--pico-muted-color);
  text-decoration: none;
}

.search-hit mark {
  padding: 0 0.1rem;
}

/* Tables in a card: dates and directions on one line, the table scrolls sideways on a phone */
.card-section table td,
.card-section table th {
  white-space: nowrap;
}

/* Words from a topic (vocabulary/topic_words.html): the choice, then a list of ticks */
.topic-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.topic-levels legend {
  width: 100%;
}

.topic-words {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.topic-words li {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
  list-style: none;
}

.topic-words label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
  margin: 0;
  cursor: pointer;
}

.topic-words input[type="checkbox"] {
  grid-row: 1 / span 2;
  margin-top: 0.25rem;
}

.topic-words small {
  grid-column: 2;
}

.topic-words .is-owned label {
  cursor: default;
  opacity: 0.6;
}

.topic-level {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-small);
  background: var(--primary-light);
  font-size: 0.7rem;
}

/* "Select all" and the add button: a bar stuck to the bottom of the screen */
.card-section > .topic-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  /* Over the padding of the card (1rem 1.25rem), so the bar reaches its edges */
  margin: 0 -1.25rem -1rem;
  padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pico-muted-border-color);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--pico-card-background-color);
}

.topic-actions .save-button {
  margin-bottom: 0;
}

.topic-pages {
  display: flex;
  gap: 1rem;
}

/* The tip above the words: light indigo with the ghost of the logo */
.topic-tip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 0.9rem;
}

/* The lines of the winking ghost (closed eye, smile) in the colour of its eyes */
.ghost-line {
  stroke: var(--logo-eye);
}

.topic-tip .tip-ghost {
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
}

.topic-count {
  margin-bottom: 0.6rem;
}

/* Quiet check boxes in the list (smaller, thin frame; indigo only when ticked) */
.topic-words input[type="checkbox"],
.topic-all input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  border-width: 1px;
  border-color: var(--pico-muted-border-color);
}

.topic-all {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.topic-pages {
  margin-bottom: 1rem;
}


/* The app on the home screen of an iPhone uses the whole screen (viewport-fit=cover):
   keep the content away from the notch on the sides and the home bar at the bottom */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

#term-list.selecting .select-bar {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* The offer to put the app on the home screen (at the top of the overview, in Settings):
   the phone icon next to the text, the buttons under them */
.install-card-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.install-card-body p {
  margin: 0;
}

.install-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
}

/* The other apps on the phone of the icon, a light shade of the app colour */
.install-app {
  fill: var(--primary);
}

/* The heading of the steps with the small phone icon */
.install-guide-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.install-guide-title .install-icon {
  width: 2rem;
  height: 2rem;
}

.install-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.install-card-actions button {
  width: auto;
  margin: 0;
}

/* The steps for an iPhone in the dialog */
.install-steps li {
  margin-bottom: 0.5rem;
}