/* German Dominion -- Custom AI panel on /live/  (2026-09-01).

   Rides the existing /live panel chrome (.panel.bracketed / .panel-h /
   .panel-b) and only styles what is new.  Every colour is taken from the
   page's own custom properties with a literal fallback, so this file cannot
   change the look of anything that was already on the page, and it still
   renders correctly if it loads before dominion.css.

   No web font, no external URL: German Dominion's privacy posture is
   zero-external-request, and a Google Fonts import here would break it. */

#customai-panel .cai-copy {
  margin: 0 0 14px;
  max-width: 62ch;
  line-height: 1.55;
  color: var(--muted, #a9b1bd);
}

/* ---- status line ------------------------------------------------------- */
#customai-panel .cai-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line, #2a3038);
  border-left-width: 3px;
  border-radius: 4px;
  background: var(--panel-2, rgba(255, 255, 255, .03));
  font-size: 14px;
}
#customai-panel .cai-status .spinner { flex: 0 0 auto; }
#customai-panel .cai-status.ready { border-left-color: var(--go, #6ee7a8); }
#customai-panel .cai-status.ok    { border-left-color: var(--go, #6ee7a8); }
#customai-panel .cai-status.busy  { border-left-color: var(--accent, #d8b26a); }
#customai-panel .cai-status.warn  { border-left-color: var(--warn, #e0a458); }
#customai-panel .cai-status.idle  { border-left-color: var(--line, #2a3038); }

/* ---- the "you are an animal" bar --------------------------------------
   Deliberately the loudest thing in the panel.  A player who is inside a deer
   must never have to hunt for the way back. */
#customai-panel .cai-riding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--accent, #d8b26a);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent, #d8b26a) 10%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  #customai-panel .cai-riding { background: rgba(216, 178, 106, .10); }
}
#customai-panel .cai-riding-copy { flex: 1 1 240px; min-width: 0; }
#customai-panel .cai-riding-text {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
#customai-panel .cai-riding-clock {
  display: block;
  font-size: 13px;
  color: var(--muted, #a9b1bd);
  font-variant-numeric: tabular-nums;
}
#customai-panel .cai-riding .btn { flex: 0 0 auto; }

/* ---- the species grid --------------------------------------------------- */
#customai-panel .cai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
#customai-panel .cai-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  border: 1px solid var(--line, #2a3038);
  border-radius: 5px;
  background: var(--panel-2, rgba(255, 255, 255, .03));
  text-align: center;
}
#customai-panel .cai-card .cai-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
#customai-panel .cai-card .btn { width: 100%; }

/* A locked card stays fully READABLE -- greyed, never hidden, never a
   dead-end.  Hiding the row would make the feature look broken instead of
   incomplete, and the owner needs to see what is left to enable. */
#customai-panel .cai-card.locked { opacity: .55; }
#customai-panel .cai-card.locked .cai-art { filter: grayscale(1); }
#customai-panel .cai-lock {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted, #a9b1bd);
}

/* Art: a CSS-drawn disc carrying the animal's initial.  Deliberately not an
   <img>: an asset that fails to load would leave a broken-image icon on a
   page that is otherwise carefully finished, and this can never 404. */
#customai-panel .cai-art {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line, #2a3038);
  background:
    radial-gradient(circle at 38% 32%,
      color-mix(in srgb, var(--accent, #d8b26a) 26%, transparent),
      transparent 62%),
    var(--panel, rgba(255, 255, 255, .05));
  position: relative;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  #customai-panel .cai-art { background: rgba(216, 178, 106, .14); }
}
#customai-panel .cai-art::after {
  content: attr(data-mono);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent, #d8b26a);
  white-space: nowrap;
}

#customai-panel .cai-empty,
#customai-panel .cai-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted, #a9b1bd);
}
#customai-panel .cai-note.err { color: var(--bad, #e2726e); }

@media (max-width: 520px) {
  #customai-panel .cai-grid { grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); }
  #customai-panel .cai-riding { flex-direction: column; align-items: stretch; }
  #customai-panel .cai-riding .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #customai-panel .cai-status .spinner { animation: none; }
}