/* Otakuchar: card and Pokémon comparison. Inherits the theme's colors. */
.otk-cmp { --otk-best: #22c55e; --otk-accent: var(--brand, #8b74ff); }

.otk-cmp__tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.otk-cmp__tabs a { padding: .4em 1em; border: 1px solid var(--otk-border); border-radius: 999px; font-weight: 600; font-size: .92em; text-decoration: none; color: inherit; background: var(--otk-soft); }
.otk-cmp__tabs a:hover { border-color: var(--otk-accent); }
.otk-cmp__tabs a[aria-current] { background: var(--otk-accent); border-color: var(--otk-accent); color: #fff; }

.otk-cmp__intro, .otk-cmp__group { margin: 0 0 .8rem; }
.otk-cmp__group a { margin-left: .6em; font-size: .9em; }
.otk-cmp__vs { margin: .4rem 0 .6rem; }
.otk-cmp__msg { margin: 0 0 1rem; padding: .7em 1em; border-radius: 10px; border: 1px solid rgba(224,138,30,.45); background: rgba(224,138,30,.12); }

/* Search */
.otk-cmp__search { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.otk-cmp__search .otk-fx__submit { background: var(--otk-accent); color: #fff; }
.otk-cmp__search input[type="search"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: .7em 0 !important; font: inherit; color: inherit; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
.otk-cmp__results { list-style: none; margin: 0; padding: .3rem; flex: 1 1 100%; display: grid; gap: .2rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--surface, #fff); box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.18)); max-height: 26rem; overflow-y: auto; }
.otk-cmp__results[hidden] { display: none; }
.otk-cmp__results li { margin: 0; }
.otk-cmp__results a { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem; border-radius: 8px; text-decoration: none; color: inherit; }
.otk-cmp__results a:hover, .otk-cmp__results a:focus, .otk-cmp__results a.is-active { background: var(--otk-soft); outline: none; }
.otk-cmp__results img, .otk-cmp__noimg { flex: 0 0 auto; width: 40px; height: 56px; object-fit: contain; border-radius: 4px; background: var(--otk-soft); }
.otk-cmp__results span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.otk-cmp__results small { opacity: .7; font-size: .8em; }
.otk-cmp__results em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .85em; color: var(--otk-accent); white-space: nowrap; }
.otk-cmp__none { padding: .7rem; opacity: .75; }

/* Table */
.otk-cmp__wrap { margin: 0 0 1.5rem; border: 1px solid var(--otk-border); border-radius: 14px; }
.otk-cmp__table { width: 100%; min-width: calc(8.5rem + var(--cols, 2) * 10.5rem); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.otk-cmp__table th, .otk-cmp__table td { padding: .55em .7em; border-bottom: 1px solid var(--otk-border); text-align: left; vertical-align: top; font-size: .95em; }
.otk-cmp__table tbody tr:last-child > * { border-bottom: 0; }
.otk-cmp__table tbody th { width: 8.5rem; font-weight: 600; font-size: .88em; opacity: .85; }
.otk-cmp__table thead > tr > :first-child, .otk-cmp__table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface, #fff); }
.otk-cmp__table thead th, .otk-cmp__table thead td { vertical-align: top; background: var(--otk-soft); }
/* Size card columns as if four were picked, so one or two cards do not stretch across the page. */
.otk-cmp__table thead th[scope="col"] { width: 21%; }
.otk-cmp__corner { vertical-align: bottom !important; }
.otk-cmp__table thead > tr > :first-child { width: 8.5rem; }
.otk-cmp__corner { font-size: .78em; opacity: .8; }
.otk-cmp__legend { display: inline-flex; align-items: center; gap: .4em; }
.otk-cmp__legend i { width: .8em; height: .8em; border-radius: 3px; background: var(--otk-best); }
.otk-cmp__head { position: relative; display: flex; flex-direction: column; gap: .15rem; font-weight: 400; }
.otk-cmp__head > a:not(.otk-cmp__remove) { display: flex; flex-direction: column; gap: .3rem; color: inherit; text-decoration: none; }
.otk-cmp__head img { width: 100%; max-width: 150px; height: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.otk-cmp__head img.is-art { border-radius: 12px; box-shadow: none; background: var(--otk-soft); }
.otk-cmp__head strong { font-size: 1.02em; line-height: 1.25; }
.otk-cmp__head small { opacity: .7; font-size: .8em; }
.otk-cmp__remove { position: absolute; top: -.2rem; right: -.2rem; z-index: 2; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff !important; font-size: 1.2rem; line-height: 1; text-decoration: none; }
.otk-cmp__remove:hover { background: #d23c3c; }
.otk-cmp__wins { align-self: flex-start; margin-top: .25rem; padding: .05em .6em; border-radius: 999px; background: color-mix(in srgb, var(--otk-best) 18%, transparent); color: var(--otk-best); font-size: .75em; font-weight: 700; }
.otk-cmp__blank { min-width: 9rem; }
.otk-cmp__add { max-width: 11rem; display: grid; place-items: center; gap: .3rem; min-height: 9rem; border: 2px dashed var(--otk-border); border-radius: 12px; color: inherit; text-decoration: none; font-size: 2rem; font-weight: 300; }
.otk-cmp__add span { font-size: .85rem; font-weight: 600; }
.otk-cmp__add:hover { border-color: var(--otk-accent); color: var(--otk-accent); }
.otk-cmp__table td.is-best { background: color-mix(in srgb, var(--otk-best) 14%, transparent); box-shadow: inset 3px 0 0 var(--otk-best); font-weight: 700; }
.otk-cmp__na { opacity: .4; }
.otk-cmp__sub { opacity: .7; font-size: .85em; font-weight: 400; }
.otk-cmp__kw { display: inline-block; margin: 0 .25em .25em 0; padding: 0 .5em; border-radius: 6px; background: var(--otk-soft); border: 1px solid var(--otk-border); font-size: .8em; font-weight: 700; white-space: nowrap; }
.otk-cmp__mult { display: inline-block; min-width: 2em; margin-right: .2em; font-weight: 700; font-size: .85em; }
.otk-cmp__table .otk-type, .otk-cmp__table .otk-color { font-size: .72rem; }
.otk-cmp__effect { max-height: 11em; overflow-y: auto; font-size: .85em; line-height: 1.5; padding-right: .3em; }
.otk-cmp__effect p { margin: 0 0 .5em; }
.otk-cmp__effect p:last-child { margin: 0; }
.otk-cmp__bar { display: grid; grid-template-columns: 2.2em 1fr; align-items: center; gap: .4em; }
.otk-cmp__bar b { font-variant-numeric: tabular-nums; }
.otk-cmp__bar i { display: block; height: .55rem; border-radius: 999px; background: linear-gradient(90deg, var(--otk-stat) var(--w), var(--otk-soft) var(--w)); }

/* Notes and matchups */
.otk-cmp__notes ul { margin: 0; padding-left: 1.2em; }
.otk-cmp__notes li { margin: 0 0 .4em; }
.otk-cmp__matchups .otk-facts th { width: auto; }
.otk-cmp__matchups thead th { font-size: .85em; }
.otk-cmp__tone { display: inline-block; padding: .05em .6em; border-radius: 999px; font-weight: 700; font-size: .9em; }
.otk-cmp__tone.is-good { background: rgba(34,197,94,.18); color: #22c55e; }
.otk-cmp__tone.is-bad { background: rgba(239,68,68,.16); color: #ef4444; }
.otk-cmp__tone.is-even { background: var(--otk-soft); }
.otk-cmp__rules { padding: 1rem 1.2rem; border: 1px solid var(--otk-border); border-radius: 14px; background: var(--otk-soft); }
.otk-cmp__rules h2 { margin-top: 0; }
.otk-cmp__rules p:last-child { margin-bottom: 0; }

/* Block on card and Pokémon pages */
.otk-cmp-cta { margin-top: 2rem; }
.otk-cmp-cta__list { margin-bottom: 1rem !important; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
.otk-cmp-cta__list .otk-cards__code { font-weight: 700; text-transform: uppercase; color: var(--otk-accent, #8b74ff); opacity: 1; }
.otk-cmp-cta__btn { display: inline-block; padding: .55em 1.2em; border-radius: 12px; background: var(--brand, #8b74ff); color: #fff !important; font-weight: 700; text-decoration: none; }
.otk-cmp-cta__btn:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
	.otk-cmp__table { min-width: calc(6.5rem + var(--cols, 2) * 8.5rem); }
	.otk-cmp__table tbody th, .otk-cmp__table thead > tr > :first-child { width: 6.5rem; }
	.otk-cmp__table th, .otk-cmp__table td { padding: .45em .5em; font-size: .88em; }
	.otk-cmp__corner .otk-cmp__legend { font-size: .9em; }
	.otk-cmp__blank { min-width: 6rem; }
	.otk-cmp__table thead th[scope="col"] { width: 8.5rem; }
	.otk-cmp__add { min-height: 6rem; }
}