/* Override these variables in your theme if needed */
.ablist {
  --ablist-text: #f1f5f9;           /* soft white */
  --ablist-muted: #9ca3af;          /* grey-400 */
  --ablist-surface: #0a0a0a;        /* row/button background */
  --ablist-border: #333333;         /* borders */
  --ablist-focus: #e5e7eb35;        /* translucent focus ring */
  --ablist-hover: #ef4444;          /* hover ring */

  --ablist-search-bg: var(--ablist-surface);
  --ablist-search-border: var(--ablist-border);
  --ablist-search-text: var(--ablist-text);
  --ablist-search-placeholder: #9ca3af;
  --ablist-search-highlight: #ef444466;

  --ablist-title-color: var(--ablist-text);
  --ablist-title-size: var(--php-tsize, 1.125rem);

  --ablist-header-color: #e5e7eb;
  --ablist-header-grad-one: #ef4444;
  --ablist-header-grad-two: #ef444433;
  --ablist-header-grad-three: #ef444400;
  --ablist-header-size: var(--php-hsize, 0.9rem);

  --ablist-panel-title-color: var(--ablist-text);
  --ablist-panel-title-shadow: #ff0000bf;
  --ablist-panel-surface: #141414;

  --ablist-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ANSI styles */
.ansi-bold{font-weight:700}
.ansi-italic{font-style:italic}
.ansi-underline{text-decoration:underline}
.ansi-fg-black{color:#000000}.ansi-fg-red{color:#cd0000}.ansi-fg-green{color:#00cd00}
.ansi-fg-yellow{color:#cdcd00}.ansi-fg-blue{color:#0000ee}.ansi-fg-magenta{color:#cd00cd}
.ansi-fg-cyan{color:#00cdcd}.ansi-fg-white{color:#e5e5e5}
.ansi-fg-bblack{color:#7f7f7f}.ansi-fg-bred{color:#ff0000}.ansi-fg-bgreen{color:#00ff00}
.ansi-fg-byellow{color:#ffff00}.ansi-fg-bblue{color:#5c5cff}.ansi-fg-bmagenta{color:#ff00ff}
.ansi-fg-bcyan{color:#00ffff}.ansi-fg-bwhite{color:#ffffff}
.ansi-bg-black{background:#000000}.ansi-bg-red{background:#cd0000}.ansi-bg-green{background:#00cd00}
.ansi-bg-yellow{background:#cdcd00}.ansi-bg-blue{background:#0000ee}.ansi-bg-magenta{background:#cd00cd}
.ansi-bg-cyan{background:#00cdcd}.ansi-bg-white{background:#e5e5e5}
.ansi-bg-bblack{background:#7f7f7f}.ansi-bg-bred{background:#ff0000}.ansi-bg-bgreen{background:#00ff00}
.ansi-bg-byellow{background:#ffff00}.ansi-bg-bblue{background:#5c5cff}.ansi-bg-bmagenta{background:#ff00ff}
.ansi-bg-bcyan{background:#00ffff}.ansi-bg-bwhite{background:#ffffff}

/* Small subset of XTERM styles */
.ansi-fg-orange{color:#d75f00}.ansi-fg-borange{color:#ff8700}

/* Base text color */
.ablist { color: var(--ablist-text); }

/* Search bar */
.ablist .ablist-search { margin: 0 0 0.75rem 0; display: flex; align-items: center; gap: .5rem; }
.ablist .ablist-search input[type=\"search\"],
.ablist .ablist-search-filter::placeholder { color: var(--ablist-search-placeholder); }
.ablist .ablist-search-radios { flex: 0 0 auto; }
.ablist .ablist-search-filter {
  width: min(100%, 300px); padding: 0.6rem 0.8rem;
  border: 1px solid var(--ablist-search-border);
  border-radius: 14px;
  background: var(--ablist-search-bg);
  color: var(--ablist-search-text);
}

/* Content highlighting from search bar */
.ablist mark.ablist-hit { background: var(--ablist-search-highlight); color: inherit; padding: 0 .12em; border-radius: 3px }

/* Skillset title */
.ablist .ablist-skillset + .ablist-skillset { margin-top: 1rem; }
.ablist .ablist-skillset-title { margin: .2rem 0 .6rem; font-size: var(--ablist-title-size); color: var(--ablist-title-color); }

/* The list of skills */
.ablist .ablist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ablist .ablist-ab .ablist-ab-name { font-weight: 600; }
.ablist .ablist-ab-summary { color: var(--ablist-muted); }

/* Hover & focus */
.ablist .ablist-ab .ablist-ab-toggle {
  width: 100%; text-align: left; display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem;
  border: 1px solid var(--ablist-border); border-radius: 14px; padding: 0.75rem 0.95rem;
  background: var(--ablist-surface); cursor: pointer; color: var(--ablist-text);
}
.ablist .ablist-ab .ablist-ab-toggle:focus { outline: 2px solid var(--ablist-focus); outline-offset: 2px; }
.ablist .ablist-ab .ablist-ab-toggle:hover{ border-color: var(--ablist-hover); box-shadow:0 0 0 2px rgba(239,68,68,.15) inset; }

/* Responsive */
@media (max-width: 640px) {
  .ablist .ablist-ab .ablist-ab-toggle { grid-template-columns: 1fr; }
}

/* Abillity info panel */
.ablist .ablist-ab-info { border-left: 3px solid var(--ablist-border); margin: 0.25rem 0 0.9rem 0; padding-left: 0.9rem; }
.ablist .ablist-ab-info-inner {
  border: 1px solid var(--ablist-border); border-radius: 14px; padding: 0.75rem;
  background: var(--ablist-panel-surface); color: var(--ablist-text);
}
.ablist .ablist-ab-info-title {
  margin: 0 0 0.4rem 0;
  color: var(--ablist-panel-title-color);
  font-weight: 600;
  text-shadow: 0.1em 0.2em 0.3em var(--ablist-panel-title-shadow);
}

/* Single panel mode */
.ablist .ablist-ab-panel { margin-top: 0.75rem; }
.ablist .ablist-ab-panel .ablist-ab-info-inner {
  border: 1px solid var(--ablist-border); border-radius: 14px; padding: 0.75rem; background: var(--ablist-panel-surface); color: var(--ablist-text);
}

/* Individual sections of the panel */
.ablist .ablist-ab-desc { margin-top: 0.8rem; }
.ablist .ablist-ab-details { margin-top: 1.2rem; }
.ablist .ablist-ab-details-title  { padding: .55rem 0 0 0; }
.ablist .ablist-ab-empty { opacity: .75; font-style: italic; }

/* Details: Numeric notation & bullet points */
.ablist .ablist-ab-details-kv { width: 100%; border-collapse: collapse; margin-top: .35rem; }
.ablist .ablist-ab-details-kv td { padding: .30rem .5rem; border-top: 1px solid var(--ablist-border); width: 40%; }
.ablist .ablist-ab-details-list { margin: .35rem 0rem .55rem 0; }

/* Monospace preservation */
.ablist .ablist-ab-desc > div,
.ablist .ablist-ab-details > div,
.ablist .ablist-ab-details-kv td,
.ablist .ablist-ab-details-list li {
  font-family: var(--ablist-mono);
  white-space: pre-wrap;
  tab-size: 4;
}

/* Style for headers & dividers */
.ablist .ablist-ab-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--ablist-header-color);
}
.ablist .ablist-ab-header::before, .ablist-ab-header::after {
  content: "";
  height: 1px;
  flex: 1 1 0;
  background: linear-gradient(90deg, var(--ablist-header-grad-one) 0%, var(--ablist-header-grad-two) 70%, var(--ablist-header-grad-three) 100%);
  opacity: .9;
}
.ablist .ablist-ab-header::after {
  background: linear-gradient(90deg, var(--ablist-header-grad-three) 0%, var(--ablist-header-grad-two) 30%, var(--ablist-header-grad-one) 100%);
}
.ablist .ablist-ab-header .ablist-ab-header-title { font-size: var(--ablist-header-size); line-height: 1; }

/* Sub-abilities */
.ablist .ablist-sub { margin-top:.75rem; border-top:1px dashed var(--ablist-border); padding-top: .5rem; }
.ablist .ablist-sub-title { font-weight:700; margin:0 0 .4rem; }