/* components.css（全文置換）
   既存デザインは維持。フォントサイズ変更バー(.menuRange)だけ「進捗塗り」を付ける。
   それ以外はプロジェクトの現状ファイル内容を維持してある。
*/
.muted {
	color: var(--muted);
}

/* bar-like headers: unify button sizes */
:is(.topbar, .paneHead, .midbar, .findHead, .dlgHead, .dlgFoot) .btn {
	height: var(--bar-btn-h);
	padding: 0 var(--bar-btn-px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* pills */
.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid var(--line-2);
	background: rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-weight: 800;
}
body[data-theme="light"] .pill {
	background: rgba(10, 18, 24, 0.04);
}
.pill.small {
	height: 22px;
	padding: 0 8px;
	font-size: 12px;
}

/* buttons */
.btn {
	border: 1px solid var(--line-2);
	background: var(--btn);
	color: var(--text);
	padding: 6px 10px;
	border-radius: 12px;
	cursor: pointer;
	font: inherit;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease),
		transform var(--t-fast) var(--ease);
}
.btn:hover {
	background: var(--btn2);
	border-color: var(--line);
}
.btn:active {
	transform: translateY(1px);
}
.btn:disabled,
.btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

/* FIX: avoid accidental text selection on clickable UI (prevents ::selection fg flip) */
.topbar,
.paneHead,
.midbar,
.menuPanel {
	-webkit-user-select: none;
	user-select: none;
}
.btn,
.menuBtn,
.menuItem,
.pill,
.toggleLine {
	-webkit-user-select: none;
	user-select: none;
}

/* FIX: stable checkbox rendering inside toggleLine (avoid hover visual shifts) */
.toggleLine input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1px solid var(--line-2);
	background: var(--panel2);
	display: inline-grid;
	place-items: center;
	margin: 0;
}
.toggleLine input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: transparent;
	transition: background var(--t-mid) var(--ease);
}
.toggleLine input[type="checkbox"]:checked {
	border-color: var(--accent);
}
.toggleLine input[type="checkbox"]:checked::before {
	background: var(--accent);
}
.toggleLine input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}
/* keep form controls selectable/editable */
.topbar input,
.topbar textarea,
.topbar select,
.paneHead input,
.paneHead textarea,
.paneHead select,
.midbar input,
.midbar textarea,
.midbar select,
.menuPanel input,
.menuPanel textarea,
.menuPanel select {
	-webkit-user-select: text;
	user-select: text;
}

.btn.primary {
	background: var(--btn-primary-bg);
	border-color: var(--btn-primary-bd);
	color: var(--text);
	box-shadow: none;
}

/* ghost */
.btn.ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: inherit;
}
body[data-theme="light"] .btn.ghost {
	border-color: rgba(13, 33, 45, 0.14);
}
body[data-theme="sepia"] .btn.ghost {
	border-color: rgba(245, 234, 214, 0.28);
}

/* bar ghost: give fill so it doesn't collapse */
:is(.paneHead, .midbar, .findHead) .btn.ghost {
	background: var(--btn);
	border-color: var(--line-2);
}
:is(.paneHead, .midbar, .findHead) .btn.ghost:hover {
	background: var(--btn2);
	border-color: var(--line);
}

/* inputs */
:is(.filter, .findInput) {
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--field);
	color: var(--text);
	outline: none;
	transition:
		border-color var(--t-mid) var(--ease),
		background var(--t-mid) var(--ease);
}
/* caret: editorArea以外はテーマ文字色で固定（ダークで見える） */
input,
textarea:not(.editorArea){
  caret-color: var(--text) !important;
}
:is(.filter, .findInput):focus {
	background: var(--field2);
	border-color: var(--focus-ring);
}

/* hoverable rows */
:is(.row, .node, .hit, .srRow) {
	border: 1px solid transparent;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease);
}
:is(.row, .node, .hit, .srRow):hover {
	background: var(--btn);
	border-color: var(--line-2);
}

/* menu components (topbar) */
.menu {
	position: relative;
}

.menuBtn {
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	padding: 6px 10px;
	border-radius: 12px;
	font: inherit;
	cursor: pointer;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease);
}
.menuBtn:hover {
	background: var(--menu-hover-bg);
	border-color: var(--menu-hover-bd);
}
.menu.open .menuBtn {
	background: var(--menu-open-bg);
	border-color: var(--menu-open-bd);
}

.menuPanel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 252px;
	padding: 8px;
	border-radius: var(--radius);
	background: var(--panel);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-1);
	display: none;
	transform-origin: 0 0;
}
.menu.open .menuPanel {
	display: block;
	animation: popIn var(--t-mid) var(--ease) both;
}
@keyframes popIn {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
/* menuPanel select styling (unify with theme colors) */
.menuPanel select {
	padding: 8px 10px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--field);
	color: var(--text);
	outline: none;
}

.menuPanel select:focus {
	border-color: var(--focus-ring);
	background: var(--field2);
}

.menuItem {
	width: 100%;
	text-align: left;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text);
	padding: 7px 10px;
	border-radius: 12px;
	font: inherit;
	cursor: pointer;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease);
}
.menuItem:hover {
	background: var(--btn);
	border-color: var(--line-2);
}
.menuItem[aria-disabled="true"],
.menuItem.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.sep {
	height: 1px;
	background: var(--line-2);
	margin: 8px 2px;
}

.menuRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 6px;
}
.menuLabel{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

.menuGroup {
	display: flex;
	gap: 6px;
}

.miniBtn {
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--text);
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 12px;
	transition:
		background var(--t-mid) var(--ease),
		border-color var(--t-mid) var(--ease);
}
.miniBtn:hover {
	background: var(--btn);
	border-color: var(--line);
}

.toggleLine {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid var(--line-2);
	background: transparent;
	color: var(--text);
	user-select: none;
}

.menuSelect {
	width: 170px;
	padding: 7px 10px;
	border-radius: 12px;
	border: 1px solid var(--line-2);
	background: var(--panel2);
	color: var(--text);
	outline: none;
}

/* ===== menu range (font size) : fill=accent, track=theme bg =====
   - --pct は app.js が input/change と設定読込時(setRangeValue)に更新する
*/
.menuRange {
	width: 170px;
	height: 18px;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	--pct: 50%;
}

.menuRange::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background:
		linear-gradient(var(--accent), var(--accent)) 0 / var(--pct) 100% no-repeat,
		var(--bg);
	border: 1px solid var(--line);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.menuRange::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--accent);
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* Firefox */
.menuRange::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--line);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.menuRange::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--accent);
}
.menuRange::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent);
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* menu checkbox */
.menuPanel input[type="checkbox"] {
	accent-color: var(--accent);
}

/* ========= Custom Select (CSelect) ========= */
/* CSelect host: 基本は100%、メニュー内だけ従来(select)と同じ幅 */
.cselHost{ display:block; width: 100%; }
.menuPanel .cselHost{ width: 170px; }

.csel{
  position: relative;
  display: block;
  width: 100%;
}

.cselBtn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--field);
  color: var(--text);
  cursor: pointer;

  outline: none;
}

.cselBtn:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cselLabel{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cselChev{ opacity: .85; user-select: none; }

.cselPanel{
  position: absolute;
  z-index: 300;
  top: calc(100% + 6px);
  left: 0;

  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-1);
  padding: 6px;

  max-height: 260px;
  overflow: auto;
}

.cselPanel.hidden{ display:none; }

.cselItem{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.cselItem:hover{
  background: var(--btn);
  border: 1px solid var(--line-2);
}

.cselItem.isOn{
  background: color-mix(in srgb, var(--accent) 18%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}
/* keyboard focus (darkでも見える) */
.cselItem:focus{
  outline: none;
}
.cselItem:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  background: var(--btn);
  border: 1px solid var(--line-2);
}


/* caret color (dark theme readable) */
input, textarea{
  caret-color: var(--text);
}


/* pointer defaults inside menu panels */
.menuPanel button,
.menuPanel [role="menuitem"],
.menuPanel label,
.menuPanel select,
.menuPanel input[type="checkbox"],
.menuPanel input[type="range"] {
	cursor: pointer;
}

.menuPanel .disabled,
.menuPanel button:disabled,
.menuPanel select:disabled,
.menuPanel input:disabled {
	cursor: not-allowed;
}