/* ==========================================================================
   記事を聴く（listen.js）

   記事見出しの下のボタンと、画面下に出るミニプレーヤー。
   いまのサイトの約束ごと（白地、黒の細い罫線、角は立てる、影なし、差し色は淡いセージ）に合わせる。
   ========================================================================== */

.ot-listen {
	margin: 1.1rem 0 1.4rem;
}

.ot-listen[hidden] { display: none; }

.ot-listen__btn {
	display: inline-flex;
	align-items: center;
	gap: .75em;
	padding: .7em 1.15em .7em .8em;
	border: 1px solid var(--ot-ink);
	border-radius: var(--ot-r);
	background: var(--ot-card);
	color: var(--ot-ink);
	font: inherit;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .25s var(--ot-ease);
}

.ot-listen__btn:hover { background: var(--ot-accent); }
.ot-listen__btn:active { background: var(--ot-soft); }

.ot-listen__btn:focus-visible {
	outline: 2px solid var(--ot-ink);
	outline-offset: 3px;
}

.ot-listen__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.1em;
	height: 2.1em;
	flex: none;
	background: var(--ot-ink);
	color: #fff;
}

.ot-listen__icon svg { width: 1.15em; height: 1.15em; }

.ot-listen__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25em;
	text-align: left;
}

.ot-listen__meta {
	font-weight: 500;
	font-size: .78rem;
	color: var(--ot-muted);
	letter-spacing: .02em;
}

/* 再生中はボタンのアイコンを小さなイコライザーに */
.ot-listen__btn .ot-listen__eq { display: none; }
.ot-listen__btn.is-playing .ot-listen__eq { display: flex; }
.ot-listen__btn.is-playing .ot-listen__play { display: none; }

.ot-listen__eq,
.ot-player__eq {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 12px;
}

.ot-listen__eq i,
.ot-player__eq i {
	display: block;
	width: 3px;
	height: 100%;
	background: currentColor;
	transform-origin: bottom;
	animation: ot-eq 1s ease-in-out infinite;
}

.ot-listen__eq i:nth-child(2),
.ot-player__eq i:nth-child(2) { animation-delay: -.35s; animation-duration: .8s; }

.ot-listen__eq i:nth-child(3),
.ot-player__eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.2s; }

@keyframes ot-eq {
	0%, 100% { transform: scaleY(.3); }
	50% { transform: scaleY(1); }
}

/* 読んでいる段落 */
.entry-content .is-reading,
.ot-article__title.is-reading {
	background: var(--ot-accent);
	box-shadow: -.5em 0 0 var(--ot-accent), .5em 0 0 var(--ot-accent);
	transition: background-color .35s var(--ot-ease), box-shadow .35s var(--ot-ease);
}

/* ==========================================================================
   ミニプレーヤー
   ========================================================================== */

.ot-player {
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	z-index: 90;
	width: min(720px, calc(100% - 24px));
	transform: translateX(-50%);
	background: var(--ot-ink);
	color: #fff;
	font-size: .9rem;
}

.ot-player[hidden] { display: none; }

.ot-player.is-entering { animation: ot-player-in .38s var(--ot-ease); }

@keyframes ot-player-in {
	from { opacity: 0; transform: translate(-50%, 16px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

.ot-player__bar {
	height: 3px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}

.ot-player__bar span {
	display: block;
	height: 100%;
	background: var(--ot-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .6s linear;
}

.ot-player__row {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 8px 10px;
}

.ot-player button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.ot-player button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.ot-player__ctl {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	opacity: .85;
	transition: opacity .2s, background-color .2s;
}

.ot-player__ctl:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.ot-player__ctl svg { width: 20px; height: 20px; }

.ot-player__play {
	width: 44px;
	height: 44px;
	background: #fff;
	color: var(--ot-ink);
	opacity: 1;
	margin: 0 2px;
}

.ot-player__play:hover { background: var(--ot-accent); }

.ot-player__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	padding: 0 8px;
}

.ot-player__show {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.ot-player__show .ot-player__eq { height: 9px; color: var(--ot-accent); display: none; }
.ot-player.is-playing .ot-player__show .ot-player__eq { display: flex; }
.ot-player__eq i { width: 2px; }

.ot-player__chapter {
	display: block;
	max-width: 100%;
	padding: 0;
	text-align: left;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ot-player__chapter::after {
	content: "";
	display: inline-block;
	width: .4em;
	height: .4em;
	margin-left: .45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-.2em) rotate(45deg);
	opacity: .6;
}

.ot-player__chapter[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }
.ot-player__chapter:disabled { cursor: default; }
.ot-player__chapter:disabled::after { display: none; }

.ot-player__left {
	flex: none;
	font-size: .75rem;
	color: rgba(255, 255, 255, .55);
	font-variant-numeric: tabular-nums;
	padding: 0 6px;
}

.ot-player__opt {
	flex: none;
	min-width: 40px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	font-size: .78rem !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-left: 4px;
	display: grid;
	place-items: center;
}

.ot-player__opt:hover { border-color: rgba(255, 255, 255, .7) !important; }
.ot-player__music svg { width: 16px; height: 16px; }
.ot-player__music.is-off { opacity: .45; }
.ot-player__music.is-off { background: linear-gradient(to top right, transparent calc(50% - .75px), currentColor calc(50% - .75px), currentColor calc(50% + .75px), transparent calc(50% + .75px)) !important; }

.ot-player__close { margin-left: 2px; }
.ot-player__close svg { width: 16px; height: 16px; }

.ot-player [hidden] { display: none !important; }

.ot-player__panel {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding: 8px 14px 12px;
	max-height: min(46vh, 360px);
	overflow-y: auto;
}

.ot-player__chapters {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ch;
}

.ot-player__chapters button {
	display: flex;
	gap: .8em;
	width: 100%;
	padding: .55em .2em;
	text-align: left;
	line-height: 1.45;
	color: rgba(255, 255, 255, .78);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ot-player__chapters button::before {
	counter-increment: ch;
	content: counter(ch, decimal-leading-zero);
	font-size: .72rem;
	padding-top: .2em;
	color: rgba(255, 255, 255, .4);
	font-variant-numeric: tabular-nums;
}

.ot-player__chapters button:hover { color: #fff; }
.ot-player__chapters button.is-current { color: var(--ot-accent); font-weight: 700; }
.ot-player__chapters button.is-current::before { color: var(--ot-accent); }

.ot-player__voice {
	display: flex;
	align-items: center;
	gap: .6em;
	margin-top: 10px;
	font-size: .78rem;
	color: rgba(255, 255, 255, .6);
}

.ot-player__voice select {
	font: inherit;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 0;
	padding: .3em .5em;
	max-width: 100%;
}

.ot-player__voice select option { color: var(--ot-ink); }

/* プレーヤーが出ている間は、下端の要素が隠れないように */
html.ot-player-open body { padding-bottom: 96px; }

@media (max-width: 600px) {
	.ot-player {
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.ot-player__row { padding: 6px 6px; }
	.ot-player__left { display: none; }
	.ot-player [data-act="prev"] { display: none; }
	.ot-player__ctl { width: 34px; height: 34px; }
	.ot-player__opt { min-width: 36px; padding: 0 4px; }
	.ot-player.is-entering { animation-name: ot-player-in-sp; }
	@keyframes ot-player-in-sp {
		from { opacity: 0; transform: translate(-50%, 100%); }
		to { opacity: 1; transform: translate(-50%, 0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.ot-listen__eq i,
	.ot-player__eq i { animation: none; transform: scaleY(.7); }
	.ot-listen__btn,
	.ot-player__bar span { transition: none; }
}

@media print {
	.ot-listen,
	.ot-player { display: none !important; }
}

/* 右下の「上へ戻る」ボタンをプレーヤーの上に逃がす */
html.ot-player-open .ot-totop { bottom: 100px; }
@media (max-width: 600px) {
	html.ot-player-open .ot-totop { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 12px; }
}

/* --------------------------------------------------------------------------
   置き場所：記事タイトル下、カテゴリタグの列の右端（3.5.1）
   タグと高さをそろえた、1行の横長ボタン
   -------------------------------------------------------------------------- */
.ot-article__meta .ot-listen {
	margin: 0 0 0 auto;
}

.ot-article__meta .ot-listen__btn {
	gap: .7em;
	min-width: 230px;
	padding: .45em 1.1em .45em .45em;
	font-size: .85rem;
}

.ot-article__meta .ot-listen__icon {
	width: 1.9em;
	height: 1.9em;
}

.ot-article__meta .ot-listen__icon svg { width: 1em; height: 1em; }

.ot-article__meta .ot-listen__text {
	flex-direction: row;
	align-items: baseline;
	gap: .8em;
	flex: 1;
	justify-content: space-between;
	white-space: nowrap;
}

.ot-article__meta .ot-listen__meta { font-size: .74rem; }

@media (max-width: 600px) {
	.ot-article__meta .ot-listen__btn { min-width: 0; }
	.ot-article__meta .ot-listen__meta { display: none; }
}