/**
 * テーマの --kg-* トークンに乗る。無いテーマでも成立するようフォールバックを持たせる。
 */

.kgdb-browser,
.kgdb-card,
.kgdb-flow {
	--kgdb-ink: var(--kg-ink, #24312a);
	--kgdb-muted: var(--kg-muted, #5f6e65);
	--kgdb-paper: var(--kg-paper, #fff);
	--kgdb-bg: var(--kg-bg, #f6f8f3);
	--kgdb-line: var(--kg-line, #e1e8dd);
	--kgdb-accent: var(--kg-accent, #3f9d63);
	--kgdb-accent-dark: var(--kg-accent-dark, #2c7a49);
	--kgdb-accent-tint: var(--kg-accent-tint, #eaf5ec);
	--kgdb-radius: var(--kg-radius, 10px);
	--kgdb-mono: var(--kg-font-mono, ui-monospace, Consolas, Menlo, monospace);

	color: var(--kgdb-ink);
	line-height: 1.7;
	font-size: 14px;
}

.kgdb-notice {
	margin: 1em 0;
	padding: 10px 12px;
	border: 1px dashed var(--kg-line, #e1e8dd);
	border-radius: var(--kg-radius, 10px);
	color: var(--kg-muted, #5f6e65);
	font-size: 13px;
}

/* ---------- アイコン(スプライトアトラス) ---------- */
.kgdb-ic {
	--kgdb-z: 1;
	flex: none;
	display: block;
	width: calc(32px * var(--kgdb-z));
	height: calc(32px * var(--kgdb-z));
	background-image: var(--kgdb-atlas);
	background-size: calc(var(--kgdb-aw) * var(--kgdb-z) * 1px) calc(var(--kgdb-ah) * var(--kgdb-z) * 1px);
	background-position: calc(var(--kgdb-ix) * var(--kgdb-z) * -1px) calc(var(--kgdb-iy) * var(--kgdb-z) * -1px);
	background-repeat: no-repeat;
	image-rendering: pixelated;
}

.kgdb-ic--empty {
	background-image: none;
	border: 1px dashed var(--kgdb-line);
	border-radius: 3px;
}

/* ==========================================================
   アイテムカード(サーバ側で描く。本文の一部)
   ========================================================== */
.kgdb-card {
	margin: 1.6em 0;
	padding: 14px 16px;
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-left: 3px solid var(--kgdb-accent);
	border-radius: var(--kgdb-radius);
}

.kgdb-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kgdb-card__title {
	min-width: 0;
}

.kgdb-card__name {
	display: block;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}

.kgdb-card__type {
	display: block;
	font-size: 12px;
	color: var(--kgdb-muted);
}

.kgdb-card__desc {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--kgdb-muted);
}

.kgdb-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 10px 0 0;
	font-size: 13px;
}

.kgdb-card__facts dt {
	color: var(--kgdb-muted);
	font-size: 12px;
}

.kgdb-card__facts dd {
	margin: 0 12px 0 6px;
	font-family: var(--kgdb-mono);
	font-variant-numeric: tabular-nums;
}

.kgdb-card__obtain {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--kgdb-line);
}

.kgdb-card__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--kgdb-muted);
	margin-bottom: 4px;
}

.kgdb-card__obtain ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.kgdb-card__obtain li {
	padding: 3px 0;
}

.kgdb-kind {
	display: inline-block;
	min-width: 5.2em;
	font-size: 11px;
	color: var(--kgdb-muted);
}

.kgdb-map,
.kgdb-obt__m .kgdb-map {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 7px;
	border-radius: 3px;
	background: var(--kgdb-accent-tint);
	color: var(--kgdb-accent-dark);
	font-size: 11px;
	font-weight: 700;
}

/* ==========================================================
   攻略フロー(サーバ側で描く。本文の一部)

   折りたたみは <details> に任せる。JavaScript を使っていないので、
   畳んだままでも中身は HTML に出ている。
   ========================================================== */
.kgdb-flow {
	margin: 1.8em 0;
	font-size: 14px;
}

.kgdb-flow__note {
	margin: 0 0 10px;
	padding: 8px 12px;
	border-left: 3px solid var(--kgdb-accent);
	background: var(--kgdb-accent-tint);
	color: var(--kgdb-accent-dark);
	font-size: 12px;
	border-radius: 0 var(--kgdb-radius) var(--kgdb-radius) 0;
}

.kgdb-flow__ch {
	margin: 0 0 6px;
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-radius: var(--kgdb-radius);
	overflow: hidden;
}

.kgdb-flow__sum {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 14px;
	cursor: pointer;
	list-style: none;
	background: var(--kgdb-bg);
}

/* Safari は list-style を見ないので、マーカーを個別に消す */
.kgdb-flow__sum::-webkit-details-marker {
	display: none;
}

.kgdb-flow__sum::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--kgdb-muted);
	border-bottom: 2px solid var(--kgdb-muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.kgdb-flow__ch[open] > .kgdb-flow__sum::after {
	transform: translateY(2px) rotate(-135deg);
}

.kgdb-flow__ch[open] > .kgdb-flow__sum {
	border-bottom: 1px solid var(--kgdb-line);
}

.kgdb-flow__no {
	flex: none;
	padding: 2px 8px;
	border-radius: 3px;
	background: var(--kgdb-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.kgdb-flow__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	display: inline;
}

.kgdb-flow__count {
	flex: none;
	margin-left: auto;
	color: var(--kgdb-muted);
	font-size: 11px;
	white-space: nowrap;
}

.kgdb-flow__lead {
	margin: 0;
	padding: 11px 14px 0;
	color: var(--kgdb-muted);
	font-size: 13px;
}

.kgdb-flow__steps {
	margin: 0;
	padding: 10px 14px 14px 34px;
}

.kgdb-flow__steps li {
	margin: 0 0 9px;
	padding-left: 2px;
}

.kgdb-flow__steps li::marker {
	color: var(--kgdb-accent-dark);
	font-weight: 700;
	font-size: 12px;
}

.kgdb-flow__do {
	font-weight: 600;
}

.kgdb-flow__mark {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 7px;
	border-radius: 3px;
	background: var(--kgdb-accent-tint);
	color: var(--kgdb-accent-dark);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.kgdb-flow__marklabel {
	margin-right: 4px;
	opacity: 0.65;
	font-weight: 400;
}

.kgdb-flow__hint {
	display: block;
	margin-top: 2px;
	color: var(--kgdb-muted);
	font-size: 12.5px;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.kgdb-flow__sum {
		flex-wrap: wrap;
		gap: 6px;
	}

	.kgdb-flow__title {
		font-size: 14px;
	}

	.kgdb-flow__count {
		width: 100%;
	}

	.kgdb-flow__steps {
		padding-left: 28px;
	}
}

/* ==========================================================
   図鑑ブラウザ
   ========================================================== */
.kgdb-browser {
	margin: 1.8em 0;
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-radius: var(--kgdb-radius);
	overflow: hidden;
}

/* JavaScript が動く前／動かないときに見える一覧。
   検索エンジンが読むのはこちら。 */
.kgdb-seed {
	max-height: var(--kgdb-h, 620px);
	overflow-y: auto;
	padding: 0 14px 14px;
	font-size: 13px;
}

.kgdb-seed h3 {
	margin: 0 0 8px;
	font-size: 14px;
}

.kgdb-seed dl {
	margin: 0;
}

.kgdb-seed dt {
	font-weight: 700;
	margin-top: 8px;
}

.kgdb-seed dt span {
	font-weight: 400;
	font-size: 11px;
	color: var(--kgdb-muted);
	margin-left: 6px;
}

.kgdb-seed dd {
	margin: 2px 0 0;
	color: var(--kgdb-muted);
}

.kgdb-browser__loading {
	padding: 40px 16px;
	text-align: center;
	color: var(--kgdb-muted);
	font-size: 13px;
}

.kgdb-head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 12px 14px;
	border-bottom: 1px solid var(--kgdb-line);
	background: var(--kgdb-bg);
}

.kgdb-search {
	flex: 1 1 220px;
	min-width: 0;
}

.kgdb-input {
	width: 100%;
	padding: 7px 11px;
	font: inherit;
	font-size: 13px;
	color: var(--kgdb-ink);
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-radius: 6px;
}

.kgdb-tabs {
	display: flex;
	gap: 2px;
}

.kgdb-tab {
	padding: 6px 12px;
	font: inherit;
	font-size: 13px;
	color: var(--kgdb-muted);
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
}

.kgdb-tab[aria-selected="true"] {
	background: var(--kgdb-paper);
	border-color: var(--kgdb-line);
	color: var(--kgdb-accent-dark);
	font-weight: 700;
}

.kgdb-tab__n {
	font-family: var(--kgdb-mono);
	font-size: 11px;
	opacity: 0.7;
	margin-left: 5px;
}

.kgdb-filters {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--kgdb-line);
}

.kgdb-filters:empty {
	display: none;
}

.kgdb-frow {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.kgdb-flabel {
	flex: none;
	width: 3em;
	font-size: 11px;
	color: var(--kgdb-muted);
}

.kgdb-chip {
	padding: 3px 9px;
	font: inherit;
	font-size: 12px;
	color: var(--kgdb-muted);
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-radius: 99px;
	cursor: pointer;
	white-space: nowrap;
}

.kgdb-chip[aria-pressed="true"] {
	background: var(--kgdb-accent);
	border-color: var(--kgdb-accent);
	color: #fff;
	font-weight: 700;
}

.kgdb-chip__n {
	font-family: var(--kgdb-mono);
	font-size: 10px;
	opacity: 0.65;
	margin-left: 4px;
}

.kgdb-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 0;
	align-items: stretch;
	height: var(--kgdb-h, 620px);
}

.kgdb-listpane {
	min-width: 0;
	overflow-y: auto;
	padding: 10px 14px 14px;
}

.kgdb-detail {
	min-width: 0;
	overflow-y: auto;
	border-left: 1px solid var(--kgdb-line);
	background: var(--kgdb-bg);
}

.kgdb-detail[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.kgdb-body {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	.kgdb-listpane {
		max-height: calc(var(--kgdb-h, 620px) * 0.6);
		overflow-y: auto;
	}

	.kgdb-detail {
		border-left: none;
		border-top: 1px solid var(--kgdb-line);
	}
}

.kgdb-count {
	margin: 0 0 6px;
	font-family: var(--kgdb-mono);
	font-size: 11px;
	color: var(--kgdb-muted);
}

.kgdb-list {
	border: 1px solid var(--kgdb-line);
	border-radius: 6px;
	overflow: hidden;
}

.kgdb-row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 9px;
	align-items: center;
	width: 100%;
	padding: 6px 10px;
	font: inherit;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--kgdb-line);
	cursor: pointer;
}

.kgdb-row:last-child {
	border-bottom: none;
}

.kgdb-row:hover {
	background: var(--kgdb-bg);
}

.kgdb-row[aria-current="true"] {
	background: var(--kgdb-accent-tint);
}

.kgdb-row__nm {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 500;
}

.kgdb-row__sub {
	font-size: 11px;
	color: var(--kgdb-muted);
	font-weight: 400;
	margin-left: 6px;
}

.kgdb-row__price {
	font-family: var(--kgdb-mono);
	font-size: 11px;
	color: var(--kgdb-muted);
	font-variant-numeric: tabular-nums;
}

.kgdb-rrow {
	padding: 7px 10px;
	border-bottom: 1px solid var(--kgdb-line);
}

.kgdb-rrow:last-child {
	border-bottom: none;
}

.kgdb-empty {
	padding: 30px 16px;
	text-align: center;
	color: var(--kgdb-muted);
	font-size: 13px;
}

/* ---------- 詳細 ---------- */
.kgdb-dhead {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px;
	border-bottom: 1px solid var(--kgdb-line);
}

.kgdb-dname {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
}

.kgdb-dsub {
	font-size: 11.5px;
	color: var(--kgdb-muted);
}

.kgdb-dbody {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
}

.kgdb-ddesc {
	margin: 0;
	font-size: 13px;
	color: var(--kgdb-muted);
}

.kgdb-sec {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kgdb-sec__h {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--kgdb-muted);
	font-weight: 700;
}

.kgdb-kv {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin: 0;
	font-size: 13px;
}

.kgdb-kv dt {
	color: var(--kgdb-muted);
	font-size: 12px;
}

.kgdb-kv dd {
	margin: 0 10px 0 5px;
	font-family: var(--kgdb-mono);
	font-variant-numeric: tabular-nums;
}

.kgdb-tags {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.kgdb-tag {
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 4px;
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	color: var(--kgdb-muted);
}

.kgdb-tag--love {
	background: var(--kgdb-accent-tint);
	border-color: transparent;
	color: var(--kgdb-accent-dark);
	font-weight: 700;
}

.kgdb-tag--rain {
	color: #2c5e86;
	border-color: rgba(44, 94, 134, 0.35);
}

.kgdb-tag--dry {
	color: #9a5a1e;
	border-color: rgba(154, 90, 30, 0.35);
}

.kgdb-obt__row {
	display: grid;
	grid-template-columns: 4.6em minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
	padding: 4px 0;
	border-bottom: 1px dashed var(--kgdb-line);
}

.kgdb-obt__row:last-child {
	border-bottom: none;
}

.kgdb-obt__k {
	font-size: 11px;
	color: var(--kgdb-muted);
}

.kgdb-obt__v {
	font-size: 13px;
}

.kgdb-obt__m {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 2px;
}

.kgdb-obt__m .kgdb-map {
	margin-left: 0;
}

/* ---------- レシピ ---------- */
.kgdb-rcard {
	padding: 7px 9px;
	background: var(--kgdb-bg);
	border: 1px solid var(--kgdb-line);
	border-radius: 6px;
}

.kgdb-rcard + .kgdb-rcard {
	margin-top: 8px;
}

/* 作る場所。探すときの手がかりなので、いちばん目に入る位置に置く */
.kgdb-rcard__station {
	margin: -7px -9px 7px;
	padding: 5px 10px;
	background: var(--kgdb-accent-tint);
	border-radius: 5px 5px 0 0;
	color: var(--kgdb-accent-dark);
	font-weight: 700;
	font-size: 13px;
}

.kgdb-rline--out {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px dashed var(--kgdb-line);
}

.kgdb-rline {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.kgdb-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px 2px 3px;
	font: inherit;
	font-size: 12px;
	background: var(--kgdb-paper);
	border: 1px solid var(--kgdb-line);
	border-radius: 5px;
	cursor: pointer;
}

.kgdb-pill:hover {
	border-color: var(--kgdb-accent);
}

.kgdb-x {
	font-family: var(--kgdb-mono);
	font-size: 11px;
	color: var(--kgdb-muted);
	font-variant-numeric: tabular-nums;
}

.kgdb-arrow {
	flex: none;
	font-family: var(--kgdb-mono);
	font-size: 12px;
	color: var(--kgdb-muted);
}

.kgdb-rmeta {
	margin-top: 4px;
	font-size: 10.5px;
	color: var(--kgdb-muted);
	letter-spacing: 0.04em;
}

/* ---------- 作物 ---------- */
.kgdb-legend {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

.kgdb-lcard {
	flex: 1 1 120px;
	padding: 7px 10px;
	border: 1px solid var(--kgdb-line);
	border-left-width: 3px;
	border-radius: 6px;
	background: var(--kgdb-paper);
}

.kgdb-lcard.is-rain {
	border-left-color: #2c5e86;
}

.kgdb-lcard.is-dry {
	border-left-color: #9a5a1e;
}

.kgdb-lcard__t {
	font-weight: 700;
	font-size: 13px;
}

/* 凡例が絞り込みボタンになる場合 */
button.kgdb-lcard {
	font: inherit;
	text-align: left;
	cursor: pointer;
}

button.kgdb-lcard:hover {
	border-color: var(--kgdb-accent);
}

button.kgdb-lcard[aria-pressed="true"] {
	background: var(--kgdb-accent-tint);
	border-color: var(--kgdb-accent);
	box-shadow: inset 0 0 0 1px var(--kgdb-accent);
}

.kgdb-lcard__s {
	font-size: 11px;
	color: var(--kgdb-muted);
}

.kgdb-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--kgdb-line);
	border-radius: 6px;
}

.kgdb-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 13px;
}

.kgdb-table th {
	text-align: left;
	padding: 8px 10px;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--kgdb-muted);
	border-bottom: 1px solid var(--kgdb-line);
	white-space: nowrap;
}

.kgdb-table td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--kgdb-line);
	vertical-align: middle;
}

.kgdb-table tr:last-child td {
	border-bottom: none;
}

.kgdb-num {
	font-family: var(--kgdb-mono);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.kgdb-cellname {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.kgdb-browser * {
		transition: none !important;
	}
}