/* PDF download cards on the home page (docs/index.md).
   Accents follow Catppuccin Latte; the slate scheme switches to Mocha. */

.pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  margin: 1em 0;
}

.pdf-card {
  border-radius: 0.4rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--pdf-accent) 35%, transparent);
  border-left: 0.3rem solid var(--pdf-accent);
  background: color-mix(in srgb, var(--pdf-accent) 7%, var(--md-default-bg-color));
  transition: box-shadow 0.15s, transform 0.15s;
}

.pdf-card:hover {
  box-shadow: 0 0.2rem 0.8rem color-mix(in srgb, var(--pdf-accent) 30%, transparent);
  transform: translateY(-2px);
}

.pdf-card.wide {
  grid-column: 1 / -1;
}

.pdf-card .pdf-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--md-default-fg-color);
  margin-bottom: 0.1rem;
}

.pdf-card .pdf-icon {
  font-size: 1rem;
  margin-right: 0.25rem;
}

.pdf-card .pdf-sub {
  display: block;
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.55rem;
}

.pdf-card .pdf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pdf-card .pdf-links a {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 1rem;
  color: var(--pdf-accent);
  border: 1px solid var(--pdf-accent);
}

.pdf-card .pdf-links a:hover {
  color: var(--md-default-bg-color);
  background: var(--pdf-accent);
}

/* Catppuccin Latte accents (light scheme) */
.pdf-card.commands { --pdf-accent: #40a02b; }  /* green */

/* Catppuccin Mocha accents (dark scheme) */
[data-md-color-scheme="slate"] .pdf-card.commands { --pdf-accent: #a6e3a1; }

/* ------------------------------------------------------------------ */
/* Cheatsheet-style tables: accent header, zebra rows. The page accent
   is set by docs/javascripts/accents.js via body[data-page] — same
   Catppuccin mapping per docs area. Catppuccin Latte (light scheme): */

body { --page-accent: #179299; --page-accent-fg: #ffffff; }  /* teal default */
body[data-page="commands"] { --page-accent: #40a02b; }  /* green */
body[data-page="tips"]     { --page-accent: #df8e1d; }  /* yellow */
body[data-page="server"]   { --page-accent: #d20f39; }  /* red */
body[data-page="builder"]  { --page-accent: #8839ef; }  /* mauve */

/* Catppuccin Mocha (dark scheme): pastel accents, dark header text */
body[data-md-color-scheme="slate"]                      { --page-accent: #94e2d5; --page-accent-fg: #11111b; }
body[data-md-color-scheme="slate"][data-page="commands"] { --page-accent: #a6e3a1; }
body[data-md-color-scheme="slate"][data-page="tips"]     { --page-accent: #f9e2af; }
body[data-md-color-scheme="slate"][data-page="server"]   { --page-accent: #f38ba8; }
body[data-md-color-scheme="slate"][data-page="builder"]  { --page-accent: #cba6f7; }

/* Content tables: accent header block + rounded corners, echoing the
   cheatsheet section cards */
.md-typeset table:not([class]) {
  border: 1px solid color-mix(in srgb, var(--page-accent) 35%, transparent);
  border-radius: 0.4rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--page-accent);
  color: var(--page-accent-fg);
  font-weight: 700;
}

.md-typeset table:not([class]) th code,
.md-typeset table:not([class]) th a {
  color: inherit;
  background: transparent;
}

/* zebra + hover rows, tinted with the page accent */
.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--page-accent) 6%, transparent);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: color-mix(in srgb, var(--page-accent) 14%, transparent);
}

/* Command columns shouldn't wrap mid-command */
.md-typeset table:not([class]) td:first-child {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Command builder (docs/builder.md + javascripts/builder.js) — the
   mc-tui picker as a web page. Uses the page accent (mauve). */

.cb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1em 0 0.6em;
}

#cb-search {
  flex: 1 1 14rem;
}

#cb-search,
#cb-cat,
.cb-addrow input,
.cb-field input {
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.72rem;
}

#cb-search:focus,
#cb-cat:focus,
.cb-addrow input:focus,
.cb-field input:focus {
  outline: none;
  border-color: var(--page-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--page-accent) 25%, transparent);
}

.cb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.cb-toggle input {
  accent-color: var(--page-accent);
}

.cb-hint {
  font-size: 0.66rem;
  color: var(--md-default-fg-color--light);
  margin: 0.3em 0;
}

/* buttons */
.cb-btn {
  border: 1px solid var(--page-accent);
  border-radius: 1rem;
  padding: 0.25rem 0.9rem;
  background: none;
  color: var(--page-accent);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.cb-btn:hover {
  background: var(--page-accent);
  color: var(--page-accent-fg);
}

.cb-btn.cb-primary {
  background: var(--page-accent);
  color: var(--page-accent-fg);
}

.cb-btn.cb-primary:hover {
  box-shadow: 0 0.15rem 0.6rem color-mix(in srgb, var(--page-accent) 45%, transparent);
}

/* saved players */
.cb-players {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.72rem;
  margin: 0.6em 0;
}

.cb-players summary {
  cursor: pointer;
  font-weight: 700;
}

.cb-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0;
}

.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--page-accent) 35%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
  font-weight: 600;
}

.cb-chip button {
  border: 0;
  background: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.1rem;
}

.cb-addrow {
  display: flex;
  gap: 0.4rem;
}

/* command list */
.cb-list {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  max-height: 32rem;
  overflow: auto;
}

.cb-cathead {
  position: sticky;
  top: 0;
  padding: 0.3rem 0.7rem;
  background: color-mix(in srgb, var(--page-accent) 12%, var(--md-default-bg-color));
  color: var(--page-accent);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cb-row {
  display: block;
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--md-default-fg-color) 7%, transparent);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cb-row:hover {
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
}

.cb-row code {
  background: none;
  padding: 0;
  font-size: 0.7rem;
  word-break: break-all;
}

.cb-row .desc {
  display: block;
  font-size: 0.62rem;
  color: var(--md-default-fg-color--light);
}

/* builder panel */
.cb-panel {
  border: 1px solid color-mix(in srgb, var(--page-accent) 35%, transparent);
  border-left: 0.3rem solid var(--page-accent);
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
  margin: 0.8em 0;
  background: color-mix(in srgb, var(--page-accent) 5%, var(--md-default-bg-color));
}

.cb-cat-tag {
  display: inline-block;
  padding: 0.05rem 0.55rem;
  border-radius: 1rem;
  background: var(--page-accent);
  color: var(--page-accent-fg);
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
}

.cb-tmpl {
  background: none;
  padding: 0;
  font-size: 0.72rem;
  word-break: break-all;
}

.cb-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 0.8rem;
  margin: 0.6rem 0;
}

.cb-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cb-field label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--md-default-fg-color--light);
}

.cb-field label em {
  text-transform: none;
  font-weight: 400;
}

.cb-field input {
  font-family: var(--md-code-font-family);
}

/* autocomplete dropdown */
.cb-ac {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 16rem;
  overflow: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  background: var(--md-default-bg-color);
  box-shadow: var(--md-shadow-z2);
}

.cb-ac-item {
  display: block;
  width: 100%;
  padding: 0.3rem 0.6rem;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cb-ac-item:hover,
.cb-ac-item.active {
  background: color-mix(in srgb, var(--page-accent) 14%, transparent);
}

.cb-ac-item code {
  background: none;
  padding: 0;
  font-size: 0.68rem;
}

.cb-ac-item span {
  font-size: 0.6rem;
  color: var(--md-default-fg-color--light);
}

/* preview + copy */
.cb-prevrow {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cb-preview {
  flex: 1;
  margin: 0;
}

.cb-preview code {
  display: block;
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  word-break: break-all;
}