/* =====================================================================
   style.css — あみだくじ ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 入力を2カラム（狭い画面では1カラム） */
.am-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sg-space-4, 16px);
}
@media (max-width: 560px) {
  .am-inputs {
    grid-template-columns: 1fr;
  }
}
.am-textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.7;
  font-family: inherit;
}

/* ボタン群 */
.am-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: var(--sg-space-3, 12px);
}
.am-go {
  flex: 1 1 auto;
  min-width: 180px;
  padding: 14px 16px;
  border: none;
  border-radius: var(--sg-radius, 10px);
  background: var(--sg-primary, #3b5bdb);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.am-go:active {
  transform: translateY(1px);
}
.am-sub {
  border: 1px solid var(--sg-border, #d7dbe7);
  background: var(--sg-surface, #fff);
  color: var(--sg-fg, #243);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.am-sub:active {
  transform: translateY(1px);
}
.am-msg {
  color: var(--sg-primary, #3b5bdb);
  min-height: 1.2em;
  margin-top: var(--sg-space-2, 8px);
}

/* あみだ表示カード */
.am-stage-card {
  margin-top: var(--sg-space-4, 16px);
}
.am-pick-help {
  margin-bottom: var(--sg-space-2, 8px);
}

/* 参加者チップ */
.am-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sg-space-3, 12px);
}
.am-pick {
  border: 1px solid var(--sg-border, #d7dbe7);
  background: var(--sg-surface, #fff);
  color: var(--sg-fg, #243);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.am-pick.is-active {
  background: var(--sg-primary, #3b5bdb);
  border-color: var(--sg-primary, #3b5bdb);
  color: #fff;
}

/* SVGボード（横に長いときはスクロール） */
.am-board {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.am-svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 縦線・横棒 */
.am-line {
  stroke: var(--sg-border, #c7cede);
  stroke-width: 3;
  stroke-linecap: round;
}
.am-rung {
  stroke: var(--sg-fg, #445);
  stroke-width: 3;
  stroke-linecap: round;
}
.am-node {
  fill: var(--sg-border, #c7cede);
}
.am-node--top.is-active {
  fill: var(--sg-primary, #3b5bdb);
}

/* ラベル（参加者・結果） */
.am-toplabel,
.am-botlabel {
  fill: var(--sg-fg, #243);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
}
.am-botlabel {
  fill: var(--sg-muted, #667);
}

/* ハイライト経路 */
.am-path {
  stroke: var(--sg-primary, #3b5bdb);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.92;
}

/* あみだ下のアクション */
.am-stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sg-space-3, 12px);
}
.am-rows {
  margin-top: var(--sg-space-3, 12px);
}
.sg-result-row__value {
  word-break: break-word;
}
.am-copy {
  margin-top: var(--sg-space-3, 12px);
}

/* 結果アクション（コピー / 保存）を横並びに */
.am-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: var(--sg-space-3, 12px);
}
.am-result-actions .am-copy {
  margin-top: 0;
}

/* ダークテーマ調整 */
:root.sg-dark .am-line,
html.sg-dark .am-line {
  stroke: #3a4152;
}
:root.sg-dark .am-rung,
html.sg-dark .am-rung {
  stroke: #cfd6e6;
}
:root.sg-dark .am-node,
html.sg-dark .am-node {
  fill: #3a4152;
}
:root.sg-dark .am-toplabel,
html.sg-dark .am-toplabel {
  fill: #e7ebf4;
}
:root.sg-dark .am-botlabel,
html.sg-dark .am-botlabel {
  fill: #aeb6c8;
}
:root.sg-dark .am-node--top.is-active,
html.sg-dark .am-node--top.is-active {
  fill: #7c96ee;
}
:root.sg-dark .am-path,
html.sg-dark .am-path {
  stroke: #7c96ee;
}

/* reduce-motion 尊重（アニメ無効化はJS側でも判定） */
@media (prefers-reduced-motion: reduce) {
  .am-path {
    transition: none !important;
  }
}