/* ツールの見出し（xmediadownload.css と同じ） */
.tool-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.tool-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent-200);
  color: var(--color-accent-800);
}
.tool-head h1 { font-size: 28px; margin: 0; }
/* 狭い画面では語の途中ではなく「X（Twitter）」の後ろで折り返す */
.nowrap { display: inline-block; }
.lead { margin: 0; color: var(--color-neutral-800); }

/* 入力フォーム */
.tool-body { margin-top: var(--space-6); scroll-margin-top: 88px; /* リセット後に戻るとき sticky ヘッダーの下に隠れないように */ }
.tool-body .btn, .result .btn { min-height: 48px; font-size: 15px; white-space: nowrap; }
.group {
  min-inline-size: 0; /* fieldset は既定で中身の最小幅より狭くならず、画面からはみ出すため */
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.group legend {
  float: left; /* legend を枠線の上ではなく枠の中に置く */
  width: 100%;
  margin-bottom: var(--space-3);
  padding: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.2;
}
/* float した legend の横に回り込まないようにする */
.group legend + * { clear: both; }
.field + .field { margin-top: var(--space-3); }
.field > label { font-size: 13px; color: var(--color-neutral-800); }
.group .input {
  min-height: 48px;
  font-size: 16px; /* 16px未満だとiOSでズームされる */
  background: var(--color-bg);
}
/* iOS の日付・時刻入力は値が空だと高さが潰れ、値が中央寄せになる */
.group input[type="date"], .group input[type="time"] { -webkit-appearance: none; appearance: none; }
.group input::-webkit-date-and-time-value { text-align: left; }
.row { display: flex; gap: var(--space-2); }
/* 日付と時刻。× ボタンとブラウザのカレンダー・時計アイコンが入っても値が切れないよう、幅は比率で分ける */
.row .clearable { flex: 1.25 1 0; min-width: 0; }
.row .clearable:has(input[type="time"]) { flex: 1 1 0; }

/* 入力欄の × ボタン（xsearch.js が入力欄を .clearable で包んで追加する） */
.clearable { position: relative; display: block; }
/* × が出ている間だけ、文字が × の下に潜らないよう右の余白を広げる */
.clearable:has(.clear-btn:not([hidden])) .input { padding-right: 36px; }
.clear-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-neutral-700);
  transform: translateY(-50%);
  cursor: pointer;
}
.clear-btn[hidden] { display: none; }
.clear-btn:hover { background: var(--color-surface); color: var(--color-text); }
.clear-btn:active { background: var(--color-accent-200); }
.clear-btn svg { display: block; }
/* 反応の数。3列だと1欄が狭く桁の多い数が × ボタンに隠れるので、ラベルを左に置いて1行ずつ並べる */
.count-row { display: flex; align-items: center; gap: var(--space-3); }
.count-row + .count-row { margin-top: var(--space-2); }
.count-row label { flex: 0 0 4.5em; font-size: 14px; color: var(--color-neutral-800); }
.count-row .clearable { flex: 1; min-width: 0; }
.note { margin: var(--space-3) 0 0; color: var(--color-neutral-700); font-size: 13px; }

/* 「リセット」と「生成」。生成を広くする */
.form-actions { display: flex; gap: var(--space-2); }
.form-actions .btn { flex: 1; min-width: 0; }
.form-actions .btn-primary { flex: 2; }

/* セレクトボックス。ブラウザ標準の矢印を消して、代わりの矢印を ::after で描く */
.select { position: relative; }
.select select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* 生成結果 */
.result { margin-top: var(--space-8); scroll-margin-top: 88px; /* sticky ヘッダーの下に隠れないように */ }
.result h2 { font-size: 24px; margin: 0; }
#status { margin: var(--space-2) 0; min-height: 1.55em; color: var(--color-neutral-700); }
#status.error { color: var(--color-accent-700); font-weight: 600; }
#output {
  display: block;
  min-height: 96px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 16px;
  line-height: 1.6;
  word-break: break-all; /* 「-filter:…」などコマンドの途中の記号だけで改行されないよう、行末で均等に折り返す */
  resize: none;
  overflow: hidden; /* 高さは xsearch.js で中身に合わせる */
}
.actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.actions .btn { flex: 1; min-width: 0; }
/* 生成前の「Xで検索」（href なし）は押せない見た目にする */
.actions a.btn:not([href]) { opacity: 0.45; cursor: not-allowed; }
#copyBtn.copied { border-color: var(--color-accent-2); background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.back-link { min-height: 44px; margin-top: var(--space-4); color: var(--color-accent-700); }

/* 使い方・FAQ（検索エンジン向けの説明コンテンツ。xmediadownload.css と同じ） */
.guide { margin-top: var(--space-8); }
.guide h2 { font-size: 24px; margin: var(--space-8) 0 var(--space-3); }
.guide h3 { font-size: 17px; margin: var(--space-4) 0 var(--space-1); }
.guide p { margin: 0; }
.guide ol { margin: 0; padding-left: 1.4em; }
.guide li + li { margin-top: var(--space-2); }
.guide details {
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.guide summary {
  padding: var(--space-3) var(--space-4); /* タップしやすい高さを確保 */
  font-weight: 600;
  cursor: pointer;
}
.guide summary:hover { color: var(--color-accent-700); }
.guide details p { padding: 0 var(--space-4) var(--space-3); color: var(--color-neutral-800); }
/* コマンド一覧 */
.commands { margin: 0; }
.commands dt {
  margin-top: var(--space-3);
  font-weight: 600;
  color: var(--color-accent-700);
  overflow-wrap: anywhere;
}
.commands dd { margin: 0; color: var(--color-neutral-800); }