@charset "utf-8";

@view-transition {
	navigation: auto;
}

:root {
	--ink: #2a2b2e;
	--ink-soft: #6b6f76;
	--bg: #faf9f6;
	--card-bg: #ffffff;
	--line: #e7e4dc;
	--accent: #2f6f5e;
	--accent-soft: #e4f0ec;
	--target: #b5651d;
	--target-bg: #fbeee1;
}

* {box-sizing: border-box;}
html,body {margin:0;padding:0;}
body {
	background: var(--bg);
	color: var(--ink);
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans",sans-serif;
	line-height: 1.7;
	font-size: 17px;
}
a {color: var(--accent); text-decoration: none;}
a:hover {text-decoration: underline;}

/* header */
.site-header {
	border-bottom: 1px solid var(--line);
	background: var(--card-bg);
}
.site-header-inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.site-logo {
	font-weight: 700;
	font-size: 1.2em;
	color: var(--ink);
}
.lang-switch {display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85em;}
.lang-switch a {color: var(--ink-soft);}
.lang-switch a.active {color: var(--accent); font-weight: 700;}

.site-main {max-width: 760px; margin: 0 auto; padding: 30px 20px 60px;}

/* home */
.hero {text-align: center; margin-bottom: 30px;}
.hero h1 {margin: 0 0 8px; font-size: 1.8em;}
.hero .tagline {color: var(--ink-soft); margin: 0;}

/* search */
.search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 34px;
}
.search-input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 1em;
	background: var(--card-bg);
	color: var(--ink);
}
.search-button {
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.95em;
	cursor: pointer;
}
.search-button:hover {opacity: 0.9;}
.similar-link {margin-top: 24px; font-size: 0.9em;}

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 34px;
}
.filter-chip {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--card-bg);
	color: var(--ink-soft);
	font-size: 0.88em;
}
.filter-chip:hover {text-decoration: none; border-color: var(--accent);}
.filter-chip.active {background: var(--accent); border-color: var(--accent); color: #fff;}

.section-title {font-size: 1.1em; color: var(--ink-soft); margin: 0 0 16px; font-weight: 700;}

.empty-state {color: var(--ink-soft); text-align: center; padding: 40px 0;}

.card-list {display: flex; flex-direction: column; gap: 14px;}
.card {
	background: var(--card-bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover {box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-1px);}
.card-link {display: flex; align-items: center; gap: 16px; padding: 14px 20px; color: inherit;}
.card-link:hover {text-decoration: none;}
.card-thumb {width: 72px; height: 72px; flex: none; object-fit: contain;}
.card-text {min-width: 0;}
.card-title {margin: 8px 0 6px; font-size: 1.15em; color: var(--ink);}
.card-excerpt {margin: 0; color: var(--ink-soft); font-size: 0.92em;}

/* target-language badge, shared between cards and the topic page */
.target-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--target-bg);
	color: var(--target);
	font-size: 0.78em;
	font-weight: 700;
}

/* topic detail */
.breadcrumb {margin: 0 0 18px; font-size: 0.9em;}
.topic-hero {display: block; width: 100%; max-width: 320px; margin: 0 auto 20px; object-fit: contain;}
.topic-title {margin: 10px 0 20px; font-size: 1.6em; line-height: 1.4;}
.topic-body p {margin: 0 0 1.1em;}
.unavailable-notice {
	color: var(--ink-soft);
	background: var(--card-bg);
	border: 1px dashed var(--line);
	border-radius: 10px;
	padding: 18px;
}

.examples-list {
	margin: 28px 0 0;
	padding: 18px 20px;
	background: var(--card-bg);
	border: 1px solid var(--line);
	border-radius: 12px;
}
.examples-label {margin: 0 0 12px; font-size: 0.85em; font-weight: 700; color: var(--ink-soft);}
.example-item {margin: 0 0 14px;}
.example-item:last-child {margin-bottom: 0;}
.example-phrase {margin: 0 0 3px; font-weight: 700; color: var(--target);}
.example-meaning {margin: 0; color: var(--ink-soft); font-size: 0.92em;}

.tag-list {margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px;}
.tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 0.82em;
}
.tag:hover {text-decoration: none; opacity: 0.8;}

.lang-available {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.lang-available-label {margin: 0 0 8px; font-size: 0.85em; color: var(--ink-soft);}
.lang-available a {margin-right: 14px; font-size: 0.95em;}

/* word list (cross-language vocabulary table, separate from topic articles) */
.wordlist-link {margin: 10px 0 0;}
.wordlist-link a {margin-right: 14px;}
.wordlist-hero {display: block; width: 100%; max-width: 220px; margin: 0 auto 14px; object-fit: contain;}
/* Horizontal scroll only. The table can be long, so the scrollbar is flipped to the TOP of the
   table (scaleY(-1) on the wrapper and again on the table cancels out visually) where it is
   always in view when the page opens, instead of at the far bottom. */
.wordlist-table-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: grab;
	scrollbar-width: auto;
	transform: scaleY(-1);
}
.wordlist-table-wrap > .wordlist-table {transform: scaleY(-1);}
.wordlist-table-wrap.dragging {cursor: grabbing; user-select: none;}
.wordlist-table-wrap::-webkit-scrollbar {height: 14px;}
.wordlist-table-wrap::-webkit-scrollbar-track {background: var(--accent-soft);}
.wordlist-table-wrap::-webkit-scrollbar-thumb {background: var(--ink-soft); border-radius: 7px; border: 3px solid var(--accent-soft);}
.wordlist-table {width: 100%; border-collapse: collapse; font-size: 0.92em;}
.wordlist-table th, .wordlist-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	white-space: nowrap;
}
.wordlist-table thead th {
	color: var(--ink-soft);
	font-size: 0.82em;
	font-weight: 700;
	border-bottom: 2px solid var(--line);
	position: sticky;
	z-index: 2;
	background: var(--bg);
}
.wordlist-table thead th:first-child {left: 0; z-index: 3;}
.wordlist-table tbody tr:hover {background: var(--accent-soft);}
.wordlist-item {font-weight: 700; color: var(--accent); position: sticky; left: 0; z-index: 1; background: var(--bg);}
.wordlist-table tbody tr:hover .wordlist-item {background: var(--accent-soft);}

/* "get the Android app" promo (home page) and footer badge. The badge PNGs are Google's official ones,
   shown unmodified; the English file has more transparent clear space around it than the others,
   so it is drawn larger to look the same size. */
.app-promo {
	display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
	margin: 0 0 28px; padding: 14px 20px;
	background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px;
}
.app-promo-text {margin: 0; flex: 1 1 260px; font-size: 0.95em; color: var(--ink);}
.app-promo-link {display: inline-block; line-height: 0;}
.app-badge {height: 62px; width: auto; display: block;}
.app-badge.en {height: 71px;}
.footer-app {margin: 14px 0 6px; line-height: 0;}
.footer-app a {display: inline-block;}

/* footer */
.site-footer {
	text-align: center;
	color: var(--ink-soft);
	font-size: 0.85em;
	padding: 30px 20px 50px;
}
.footer-links {margin-top: 8px;}
.footer-links a {color: var(--ink-soft); text-decoration: underline;}

@media (max-width: 480px) {
	body {font-size: 16px;}
	.site-header-inner {flex-direction: column; align-items: flex-start;}
}