/* ========================================================================
   VSミュウツー
   おてつだいシミュと同じ個体ボードを使い、ミュウツーを外す時刻ごとの
   週最終エナジーを比較する専用画面。
   ======================================================================== */
.m2s-tool{
  max-width:var(--content-max);
  margin:0 auto;
  padding:14px 16px 28px;
}
.m2s-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.m2s-head-copy{ min-width:0; }
.m2s-head h2{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-lg);
}
.m2s-head p{
  margin:4px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.6;
}
.m2s-announcement-open{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--navy);
  cursor:pointer;
  box-shadow:0 2px 0 var(--line);
  transition:background .15s ease, transform .1s ease, box-shadow .1s ease;
}
.m2s-announcement-open:hover{ background:var(--paper-dim); }
.m2s-announcement-open:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--line);
}
.m2s-announcement-open:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}
.m2s-announcement-card{ max-width:min(94vw, 440px); }
.m2s-announcement-title{
  margin:0 32px 8px 0;
  color:var(--navy);
  font-size:var(--fs-md);
  font-weight:800;
}
.m2s-announcement-body{
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.7;
}
.m2s-announcement-body p{ margin:0 0 8px; }
.m2s-announcement-body p:last-child{ margin-bottom:0; }
/* 条件カード・画面上部で見切れたときのバナーは、おてつだいシミュの
   .cmp-sim-card / .cmp-sim-bannerをそのまま複製して使う。 */
.m2s-sim-condition-host{ margin:0 0 14px; }

/* 対戦する2枠。左右の個体カードは通常のcmp-boardをそのまま使う。 */
.m2s-matchup{
  display:grid;
  grid-template-columns:minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items:center;
  gap:14px;
}
.m2s-side{ min-width:0; }
.m2s-side .cmp-board{
  min-width:0;
  width:100%;
  flex:1 1 auto;
}
.m2s-versus{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:2px solid var(--danger);
  border-radius:50%;
  background:var(--paper);
  color:var(--danger);
  font-size:var(--fs-md);
  font-weight:900;
  letter-spacing:.04em;
}

/* ミュウツーと比較対象の入力枠では、枠の複製・並べ替えは使わない。
   保存/呼び出しはアイコンだけだと用途が分かりにくいため、文字も併記する。 */
.m2s-matchup .cmp-board [data-act="dup"],
.m2s-matchup .cmp-board [data-act="move-left"],
.m2s-matchup .cmp-board [data-act="move-right"],
.m2s-matchup .cmp-board [data-act="remove"]{
  display:none;
}
.m2s-matchup .cmp-board .cmp-icon-btn[data-act="save"],
.m2s-matchup .cmp-board .cmp-icon-btn[data-act="load"]{
  width:auto;
  padding:0 12px;
  gap:6px;
  font-size:var(--fs-xs);
  font-weight:700;
}
.m2s-matchup .cmp-board .cmp-icon-btn[data-act="save"]::after{ content:'ボックスに保存'; }
.m2s-matchup .cmp-board .cmp-icon-btn[data-act="load"]::after{ content:'呼び出し'; }

.m2s-role{
  display:block;
  margin:0 0 6px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  font-weight:700;
}

/* 対戦2枠(ミュウツー/交代候補)の追従バナー。.cmp-sim-bannerの位置決めを流用し、
   条件バナーが出ているときはJS側でtopをその下へずらして積む。クリック操作は
   持たせず、名前・レベル・発動期待値を確認するための表示専用バナーにする。 */
.m2s-matchup-banner{ cursor:default; }
.m2s-matchup-banner-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
/* 左(ミュウツー)=赤・右(交代候補)=青で囲む。個体ボードのバッジ・枠線と
   同じ配色(js/individualCompare.jsのINDIVIDUAL_COLORS[0]/[1])に合わせる。 */
.m2s-matchup-banner-side{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  padding:2px 8px 3px;
  border:1.5px solid #D6473F;
  border-radius:999px;
}
.m2s-matchup-banner-side:last-child{ border-color:#3D72C9; }
.m2s-matchup-banner-main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:100%;
  min-width:0;
}
.m2s-matchup-banner-face{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
.m2s-matchup-banner-name{
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.m2s-matchup-banner-level{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.m2s-matchup-banner-skill{
  flex:none;
  color:var(--navy);
  font-size:var(--fs-2xs);
  font-weight:700;
  white-space:nowrap;
}
.m2s-matchup-banner-detail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  width:100%;
  min-width:0;
  min-height:14px;
}
.m2s-matchup-banner-detail-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:13px;
  height:14px;
  color:var(--ink-soft);
  font-size:10px;
  line-height:1;
}
.m2s-matchup-banner-detail-item.is-empty{ opacity:.42; }
.m2s-matchup-banner-detail-item .cmp-skill-icon{
  width:13px;
  height:13px;
}
.m2s-matchup-banner-nature{
  margin-left:2px;
  padding-left:2px;
  border-left:1px solid var(--line);
}
.m2s-matchup-banner-vs{
  flex:none;
  color:var(--danger);
  font-weight:900;
  font-size:var(--fs-xs);
}

.m2s-team{ margin-top:22px; }
/* 「ミュウツーと別チームで運用」チェックボックス。備蓄オプションと同じ見た目。 */
.m2s-team-mode-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  font-weight:700;
  cursor:pointer;
}
.m2s-team-mode-option input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--navy);
}
.m2s-team-groups{ display:flex; flex-direction:column; gap:14px; }
/* ONのときだけ、ミュウツー側=赤・交代候補側=青の枠で囲んで区別する
   (個体入力のA/Bバッジ・対戦バナーと同じ配色)。 */
.m2s-team-groups.is-separate .m2s-team-group{
  padding:8px 8px 2px;
  border:2px solid var(--line);
  border-radius:12px;
}
.m2s-team-groups.is-separate .m2s-team-group-a{ border-color:#D6473F; }
.m2s-team-groups.is-separate .m2s-team-group-b{ border-color:#3D72C9; }
.m2s-team-group-role{ margin:0 0 6px; }
.m2s-team-group-b[hidden]{ display:none; }
.m2s-team-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.m2s-team-head-copy{ min-width:0; }
.m2s-team-head h3,
.m2s-result h3{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-md);
}
.m2s-team-head p{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.m2s-team-fold-state{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:27px;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
  white-space:nowrap;
}
.m2s-team-head:hover .m2s-team-fold-state{ border-color:var(--navy); color:var(--navy); }
.m2s-team-head:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:6px; }
.m2s-team-fold-state .ui-icon{ width:14px; height:14px; }
/* 展開時は4枠固定グリッドだと横幅が狭い画面で窮屈になるため、
   おてつだいシミュの.cmp-boardsと同じ(1枚ずつ44%幅で横スクロール)レイアウトにする。 */
.m2s-team-grid{
  display:flex;
  gap:8px;
  align-items:stretch;
  overflow-x:auto;
  padding:2px 2px 7px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
/* スキルログの折りたたみ時と同じく、顔・Lv・名前だけを2段で残す。 */
.m2s-team-summary-grid{
  display:none;
  grid-template-columns:repeat(4, minmax(118px, 1fr));
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 7px;
  scrollbar-width:thin;
}
.m2s-team.is-collapsed .m2s-team-grid{ display:none; }
.m2s-team.is-collapsed .m2s-team-summary-grid{ display:grid; }
.m2s-team-summary{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  grid-template-rows:1fr 1fr;
  align-items:center;
  min-width:118px;
  min-height:58px;
  padding:4px 6px;
  border:2px solid var(--line);
  border-radius:10px;
  background:var(--paper);
}
.m2s-team-summary-face{
  grid-column:1;
  grid-row:1 / span 2;
  width:38px;
  height:38px;
  object-fit:contain;
}
.m2s-team-summary-level{
  grid-column:2;
  grid-row:1;
  align-self:end;
  justify-self:start;
  padding:1px 3px;
  border-radius:4px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}
.m2s-team-summary-name{
  grid-column:2;
  grid-row:2;
  align-self:start;
  width:100%;
  overflow:hidden;
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.m2s-result{
  margin-top:24px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
}
.m2s-result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.m2s-result-head h3{ font-size:var(--fs-lg); }
.m2s-stock-options{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  text-align:right;
}
.m2s-stock-option{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin:0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
  cursor:pointer;
}
.m2s-stock-option input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--navy);
}
.m2s-stock-option.is-forced{ opacity:.62; cursor:default; }
/* 週開始時の「きのみゾーン」(週末持ち越し)(cmp-event-bonus-*はindividualCompare.cssのイベントボーナス
   入力欄と同じ見た目を流用)。「結果」の見出し行の次の行として、右寄せの備蓄
   チェックボックス群の下にもう1行追加する形になる。 */
.m2s-zone-carryover-row{ margin-top:6px; }
.m2s-selection{
  margin:12px 0 4px;
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.55;
}
.m2s-selection p{ margin:2px 0; }
.m2s-selection strong{
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.m2s-optimal-detail{ color:#E4578B; }
.m2s-selection[hidden],
.m2s-chart[hidden],
.m2s-chart-legend[hidden]{ display:none; }
.m2s-chart{
  display:block;
  width:100%;
  min-width:0;
  margin-top:10px;
  cursor:crosshair;
  touch-action:none;
}
.m2s-chart:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.m2s-chart-frame,
.m2s-chart-grid,
.m2s-chart-guide{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-grid{ opacity:.8; }
.m2s-chart-zone-tick{
  fill:none;
  stroke:#E4578B;
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-guide{
  stroke:var(--ink-soft);
  stroke-dasharray:3 3;
}
.m2s-chart-line{
  fill:none;
  stroke:var(--navy);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-selection-line{
  fill:none;
  stroke:#8B5CF6;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-mewtwo-line,
.m2s-chart-rival-line{
  fill:none;
  stroke-width:2;
  opacity:.34;
  vector-effect:non-scaling-stroke;
}
/* 個体入力のA(赤) / B(青)バッジと同じ固定色。 */
.m2s-chart-mewtwo-line{ stroke:#D6473F; }
.m2s-chart-rival-line{ stroke:#3D72C9; }
.m2s-chart-zone-line{
  fill:none;
  stroke:#E4578B;
  stroke-width:2.5;
  stroke-dasharray:1 5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-zone-dot{
  fill:var(--paper);
  stroke:#E4578B;
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-dot{
  fill:var(--paper);
  stroke:var(--navy);
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}
.m2s-chart-dot.is-selected{
  fill:var(--navy);
  stroke:var(--paper);
  stroke-width:2.5;
}
.m2s-chart-dot.is-best{
  stroke:var(--danger);
  stroke-width:2.5;
}
.m2s-chart-text{
  fill:var(--ink-soft);
  font-size:12px;
}
.m2s-chart-axis-title{
  fill:var(--ink);
  font-size:12px;
  font-weight:700;
}
.m2s-chart-zone-text,
.m2s-chart-zone-axis-title{ fill:#E4578B; }
.m2s-chart-annotation{
  fill:var(--ink);
  font-size:12px;
  font-weight:800;
}
.m2s-chart-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-top:6px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.m2s-chart-legend span{ display:inline-flex; align-items:center; gap:4px; }
.m2s-chart-legend i{
  width:12px;
  height:3px;
  background:var(--navy);
}
.m2s-chart-legend i.m2s-zone-line{
  background:radial-gradient(circle at 1.5px 50%, #E4578B 0 1.5px, transparent 1.7px) repeat-x;
  background-size:6px 3px;
}
.m2s-chart-legend i.m2s-mewtwo-line{ background:#D6473F; opacity:.34; }
.m2s-chart-legend i.m2s-rival-line{ background:#3D72C9; opacity:.34; }
.m2s-chart-legend i.m2s-best-dot{
  width:9px;
  height:9px;
  border:2px solid var(--danger);
  border-radius:50%;
  background:var(--paper);
}
/* 積み上げ縦棒(日給エナジー内訳)の凡例: 線ではなく塗りの正方形で表す。 */
.m2s-trend-daily-legend{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-top:6px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.m2s-trend-daily-legend span{ display:inline-flex; align-items:center; gap:4px; }
.m2s-trend-daily-legend i{
  width:10px;
  height:10px;
  border-radius:2px;
}
.m2s-trend-daily-legend i.m2s-bar-berry{ background:var(--success); }
.m2s-trend-daily-legend i.m2s-bar-giant{ background:#E4578B; }
.m2s-trend-daily-legend i.m2s-bar-skill{ background:var(--info); }
/* ---- 「日給エナジー推移をみる」ボタン・モーダル ---- */
/* 押し込み感のある立体ボタン(図鑑「きのみ効率」の.tab-open-btnと同じパターン)。
   下端の帯(box-shadow)で浮かせ、押下時はtranslateYで沈める。 */
.m2s-trend-open-btn{
  display:flex;
  width:50%;
  margin:10px auto 0;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  box-shadow:0 2px 0 var(--line);
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .1s ease;
}
.m2s-trend-open-btn:hover{
  background:var(--paper-dim);
  border-color:var(--ink-soft);
}
.m2s-trend-open-btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--line);
}
.m2s-trend-open-btn:focus-visible{
  outline:2px solid var(--selected-bg);
  outline-offset:2px;
}
.m2s-trend-open-btn::after{
  content:'›';
  margin-left:2px;
  color:var(--ink-soft);
  font-size:1.2em;
  line-height:1;
}
.m2s-trend-card{ width:min(560px, 92vw); }
.m2s-trend-option-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
}
.m2s-trend-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  font-weight:700;
  cursor:pointer;
}
.m2s-trend-option input{
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--navy);
}
.m2s-trend-info-btn{
  flex:none;
  width:16px;
  height:16px;
  padding:0;
  border:1px solid var(--ink-soft);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-soft);
  font-size:10px;
  font-weight:800;
  font-style:italic;
  line-height:1;
  cursor:pointer;
}
.m2s-trend-info-btn:hover{ border-color:var(--navy); color:var(--navy); }
.m2s-trend-info-text{
  margin:6px 0 0;
  padding:8px 10px;
  border-radius:8px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.6;
}
.m2s-trend-daily-host,
.m2s-trend-chart-host{ margin-top:8px; }
.m2s-trend-mini-chart{ cursor:default; }
/* 積み上げ縦棒の3色。他ページの週給推移グラフと同じ配色
   (きのみ=緑=cmp-graph-bar-green、マゴのみ=ピンク=cmp-graph-bar-pink、
   スキル=青=cmp-graph-bar-blue相当)。 */
.m2s-chart-bar-berry{ fill:var(--success); }
.m2s-chart-bar-giant{ fill:#E4578B; }
.m2s-chart-bar-skill{ fill:var(--info); }
.m2s-trend-slider-row{
  margin-top:14px;
  padding:10px 4px 0;
}
/* 「最適ポイントに飛ぶ」: スケール(スライダー)のすぐ上に置く、見出し+ピルボタン2つの行。
   各ボタンがそれぞれの基準の最適点へジャンプし、同時に「ねむけパワー反映率を考慮」の
   チェックボックスもその基準に合わせる(js側)。 */
.m2s-trend-jump-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}
.m2s-trend-jump-label{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.m2s-trend-jump-btns{
  display:flex;
  gap:6px;
}
.m2s-trend-best-btn{
  flex:none;
  padding:3px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
  cursor:pointer;
}
.m2s-trend-best-btn:hover{ border-color:var(--navy); color:var(--navy); }
.m2s-trend-slider-head{
  margin-bottom:6px;
}
.m2s-trend-slider-label{
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
  text-align:center;
}
/* スライダーのつまみをミュウツーのアイコンにする(ネイティブrangeの見た目を消して
   トラック+つまみを描き直す)。Webkit/Geckoで別記法が必要なため2セット書く。 */
.m2s-trend-slider{
  width:100%;
  height:32px;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
}
.m2s-trend-slider::-webkit-slider-runnable-track{
  height:4px;
  background:var(--line);
  border-radius:2px;
}
.m2s-trend-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:30px;
  height:30px;
  margin-top:-13px;
  border-radius:50%;
  border:2px solid #D6473F;
  background:var(--paper) url('../images/150.webp') center/70% no-repeat;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.m2s-trend-slider::-moz-range-track{
  height:4px;
  background:var(--line);
  border-radius:2px;
}
.m2s-trend-slider::-moz-range-thumb{
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid #D6473F;
  background:var(--paper) url('../images/150.webp') center/70% no-repeat;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.m2s-trend-slider-bounds{
  display:flex;
  justify-content:space-between;
  margin-top:2px;
  color:var(--ink-soft);
  font-size:10px;
  font-weight:700;
}
.m2s-trend-slider-bounds i{ font-style:normal; }
.m2s-empty{
  margin:14px 0 4px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.6;
}
.m2s-meta{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.6;
}

/* 今まさにミュウツーを編成している場合の、現在状態からの最適交代を判定するカード。 */
.m2s-current-decision{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper);
}
.m2s-current-decision h3{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-lg);
}
.m2s-current-decision-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.m2s-current-decision-head > div:first-child{ min-width:0; }
.m2s-current-decision-head p{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.m2s-current-stock-options{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  text-align:right;
}
.m2s-current-controls{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:12px;
}
.m2s-current-field{
  display:grid;
  gap:4px;
  min-width:0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.m2s-current-clock-control{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(78px, 1fr) minmax(88px, 1fr) auto;
  align-items:end;
  gap:8px;
  min-width:0;
}
.m2s-current-now{
  align-self:end;
  margin:0;
  white-space:nowrap;
}
.m2s-current-field select,
.m2s-current-field > input,
.m2s-current-zone-input{
  box-sizing:border-box;
  width:100%;
  min-height:33px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper-dim);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
}
.m2s-current-field select,
.m2s-current-field > input{ padding:5px 7px; }
.m2s-current-zone-input{
  display:flex;
  align-items:center;
  padding:0 7px;
}
.m2s-current-zone-input input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
}
.m2s-current-zone-input b{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.m2s-current-zone-control{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:7px 10px;
  min-width:0;
  overflow-x:auto;
  padding:1px 0 3px;
  scrollbar-width:thin;
}
.m2s-current-zone-label{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.m2s-current-zone-adjuster{
  flex:none;
  display:flex;
  align-items:center;
  gap:4px;
}
.m2s-current-zone-adjuster .m2s-current-zone-input{ width:92px; }
.m2s-current-zone-adjuster button{
  min-width:28px;
  min-height:28px;
  margin:0;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
.m2s-current-zone-adjuster button:hover{
  border-color:var(--navy);
  color:var(--navy);
}
.m2s-current-zone-adjuster button:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.m2s-current-zone-quick{
  flex:none;
  display:flex;
  align-items:center;
}
.m2s-current-zone-quick .filter-chips{ flex-wrap:nowrap; gap:4px; }
.m2s-current-slider-field{
  grid-column:1 / -1;
  display:grid;
  gap:5px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.m2s-current-slider-field > span:first-child{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.m2s-current-slider-field output{
  color:var(--ink);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
}
.m2s-current-slider-field input[type="range"]{
  width:100%;
  min-height:28px;
  margin:0;
  accent-color:var(--navy);
}
.m2s-current-slider-field [data-m2s-current-zone-range]{ accent-color:#E4578B; }
.m2s-current-range-bounds{
  display:flex;
  justify-content:space-between;
  color:var(--ink-soft);
  font-size:10px;
  font-style:normal;
  font-weight:700;
}
.m2s-current-range-bounds i{ font-style:normal; }
.m2s-current-field select:focus-visible,
.m2s-current-field > input:focus-visible,
.m2s-current-zone-input:focus-within{
  outline:2px solid var(--focus-ring);
  outline-offset:1px;
}
.m2s-current-assumption{
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.55;
}
.m2s-current-progress{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.m2s-current-progress-title{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
}
.m2s-current-progress-detail{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-variant-numeric:tabular-nums;
}
.m2s-current-progress-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:6px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.m2s-current-progress-legend span{ display:inline-flex; align-items:center; gap:4px; }
.m2s-current-progress-legend i{ display:inline-block; width:12px; height:3px; }
.m2s-current-progress-expected-key{
  background:radial-gradient(circle at 1.5px 50%, #E4578B 0 1.5px, transparent 1.7px) repeat-x;
  background-size:6px 3px;
}
.m2s-current-progress-current-key{ border-radius:50%; background:var(--navy); }
.m2s-current-progress-chart{
  display:block;
  width:100%;
  min-width:0;
  margin-top:4px;
}
.m2s-current-progress-grid,
.m2s-current-progress-frame,
.m2s-current-progress-guide{
  fill:none;
  stroke:var(--line);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.m2s-current-progress-guide{
  stroke:var(--ink-soft);
  stroke-dasharray:3 3;
}
.m2s-current-progress-expected-line{
  fill:none;
  stroke:#E4578B;
  stroke-width:2.5;
  stroke-dasharray:1 5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.m2s-current-progress-expected-dot{
  fill:var(--paper);
  stroke:#E4578B;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.m2s-current-progress-current-dot{
  fill:var(--navy);
  stroke:var(--paper);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
.m2s-current-progress-current-dot.is-ahead{ fill:#D6473F; }
.m2s-current-progress-current-dot.is-behind{ fill:#3D72C9; }
.m2s-current-progress-text{
  fill:var(--ink-soft);
  font-size:11px;
}
.m2s-current-progress-axis-title{
  fill:var(--ink);
  font-size:11px;
  font-weight:700;
}
.m2s-current-output{
  margin-top:10px;
  padding:10px 11px;
  border-radius:8px;
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-xs);
  line-height:1.55;
}
.m2s-current-output p{ margin:2px 0; }
.m2s-current-output strong{
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.m2s-current-output .m2s-current-optimal-point,
.m2s-current-output .m2s-current-optimal-point strong{ color:#E4578B; }
.m2s-current-verdict{ margin-bottom:5px !important; }
.m2s-current-verdict strong{ font-size:var(--fs-sm); }
.m2s-current-verdict.is-keep strong{ color:#D6473F; }
.m2s-current-verdict.is-swap strong{ color:#3D72C9; }
.m2s-current-verdict.is-even strong{ color:var(--ink); }
.m2s-current-state,
.m2s-current-difference{ color:var(--ink-soft); }
.m2s-current-empty{ color:var(--ink-soft); }

@media (max-width:640px){
  .m2s-tool{ padding-right:12px; padding-left:12px; }
  .m2s-announcement-open{ width:36px; height:36px; }
  .m2s-matchup{ gap:8px; grid-template-columns:minmax(150px, 1fr) 38px minmax(150px, 1fr); }
  .m2s-versus{ width:36px; height:36px; border-width:1px; font-size:var(--fs-sm); }
  .m2s-matchup-banner-side{ gap:2px; padding-right:4px; padding-left:4px; }
  .m2s-matchup-banner-main{ gap:3px; }
  .m2s-matchup-banner-detail{ gap:0; }
  .m2s-result{ padding:12px; }
  .m2s-stock-option{ font-size:10px; }
  .m2s-current-decision{ padding:12px; }
  .m2s-current-stock-options{ gap:2px; }
  .m2s-current-controls{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  .m2s-current-clock-control{ gap:6px; }
}