/* Exercise widget: a block centered at its own max-width, filling the
   column when that is narrower. Not a flex container: a flex item shrinks
   to its content's width, which squeezed the widget to ~165px. */
.widget-wrap {
  margin: 1.5em 0;
}

.widget-wrap german-exercise-widget {
  margin: 0 auto;
}

/* Until widget-loader.js has loaded widget.js and the tag upgrades, it has
   no size of its own: reserve the widget's box, so the page doesn't jump
   when it appears. The size comes from the widget's own --gew-max-width and
   --gew-height (set on its :host, so only once it's defined — hence the
   fallbacks, which match widget.js's defaults). Border only, no background:
   the widget follows the OS color scheme, not this site's toggle, so a
   filled box could flash in the opposite scheme. */
german-exercise-widget:not(:defined) {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: var(--gew-max-width, 28rem);
  height: var(--gew-height, 16rem);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.7rem;
  color: var(--md-default-fg-color--light);
}

german-exercise-widget:not(:defined)::before {
  content: "…";
}

.print-footer {
  display: none;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  font-family: inherit;
}

.print-btn:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

@media print {
  /* Black on white whatever the color scheme, as on the hand-written site. */
  :root,
  [data-md-color-scheme] {
    --md-default-bg-color: #ffffff;
    --md-default-fg-color: #000000;
    --md-default-fg-color--light: #333333;
    --md-typeset-color: #000000;
  }

  .print-btn {
    display: none !important;
  }

  /* The theme wraps tables in a horizontal scroller (in JS, at load): let
     the whole table print instead of clipping its right-hand columns. */
  .md-typeset__scrollwrap,
  .md-typeset__table {
    overflow: visible !important;
  }

  .md-typeset table:not([class]) tr {
    break-inside: avoid;
  }

  /* print.js tags every element outside the clicked .print-group. */
  .print-hide {
    display: none !important;
  }

  .print-footer {
    display: block;
    margin-top: 0.6em;
    padding-top: 0.4em;
    border-top: 1px solid #ccc;
    font-size: 0.75rem;
  }
}

/* The theme's auto-fit stretches the cards of a short row, so a section with
   one topic would get a full-width card and a section with two half-width
   ones. auto-fill keeps the empty tracks, so a card has the same width in
   every section. Same track size as the theme's .grid. */
.md-typeset .grid.cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* Home page topic cards: a plain title + muted description, and the whole
   card is the link (the title link's ::after stretches over it). */
.md-typeset .grid.cards > ul > li {
  position: relative;
  padding: 0.8rem 1rem;
}

.md-typeset .grid.cards > ul > li > p {
  margin: 0;
}

.md-typeset .grid.cards > ul > li > p + p {
  margin-top: 0.3rem;
  font-size: 0.85em;
  color: var(--md-default-fg-color--light);
}

.md-typeset .grid.cards a {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .grid.cards a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.md-typeset .grid.cards > ul > li:hover a {
  color: var(--md-accent-fg-color);
}

/* Round logo with a thin border, as on the hand-written site (header and
   the mobile nav drawer). */
.md-logo img {
  border-radius: 50%;
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* On a phone, the theme's cell padding and 5rem column minimum push a
   five-column table (case × four genders) off the screen, so the last
   columns hide behind a horizontal scroll. Tighter cells fit it on a
   390px screen; narrower screens still scroll. */
@media screen and (max-width: 44.9375em) {
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    min-width: 0;
    padding: 0.6em 0.3em;
  }
}

/* The theme sizes a table to its content, so a short table (three forms of
   one verb, a conjugation) sits at the left with empty space beside it.
   Fill the text column instead. A table wider than the column still
   scrolls: .md-typeset__scrollwrap around it has overflow-x: auto. */
.md-typeset__table {
  display: block;
}

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
}