@charset "utf-8";

/* =====================================================================
   classical-props.css — classical-props.html 専用の追加CSS（page-common.css の後に読み込む）
   3カラム版（<body class="layout-3col">）の縦並びレイアウト。

   見出し・表・ボックス類（.mdc-*-box）の見た目は page-common.css をそのまま使う。
   ここには、page-common.css に無い部品（ボタン・入力欄・確認表・スピナー）と、
   グラフ出力まわり（下半分。従来どおり）だけを書く。
   色は page-common.css の変数（--c-*）を使う。
   ===================================================================== */

/* スマホで横に揺れない／文字サイズの自動調整をオフ */
body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* button の設定。:where() で詳細度を 0 にして、本文内(#content)だけに限定する */
:where(#content) button {
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}


/* ---------- 入力欄 ---------- */

/* 入力エリア全体（[分母][分子] の入力欄 + ボタン2つ）。
   ・広いとき: 入力欄の右にボタンを縦に2つ並べる（ボタンの下端は入力欄の下端にそろえる）
   ・狭いとき: 入力欄を横いっぱいにして、ボタンはその下に横並び
   どちらになるかは、このエリア自身の幅で決まる（container query。画面幅やカラムの開閉に左右されない） */
.input-area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  container-type: inline-size;
}

/* 分母・分子のテキストエリアを横並びに。
   max-width が入力欄の最大幅（1つあたり 16rem = 256px まで）。縮めたいときはここを直す */
.input-fields {
  display: flex;
  gap: 1rem;
  flex: 1 1 22rem;
  min-width: 0;
  max-width: calc(2 * 16rem + 1rem);
}

.input-group {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.sample-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* 狭いとき（折り返してボタンが入力欄の下に来る幅）は、ボタンを横に並べる */
@container (max-width: 34rem) {
  .sample-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.input-group label {
  font-size: 0.85rem;
  /* font-weight: bold; */
  min-height: 1.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
  /* 項目名が2行に折り返しても、分母・分子の入力欄の上端と下端がそろうよう、短い方の項目名を縦に伸ばす */
  flex: 1 0 auto;
  color: var(--c-brand);
  background-color: var(--c-brand2-2);
  border: 1px solid var(--c-brand2-3);
  border-bottom: none;
}

textarea,
input {
  font-size: 0.85rem;
  padding: 0.75rem;
  border: 1px solid var(--c-brand2-3);
  box-sizing: border-box;
}

textarea:focus,
input:focus {
  outline: none;
  border-color: var(--c-brand-vivid);
  background-color: var(--c-brand2-1);
}

.input-group textarea {
  /* 最大5群ぶん（5行）が見える高さ */
  /* height: 6.75rem; */
  height: 4.75rem;
  width: 100%;
  flex: none;
}


/* ---------- 確認表と実行ボタン（広いときは横並び、狭いときは折り返して縦並び） ---------- */

.confirm-run {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

.confirm-table-wrap {
  flex: 2 1 22rem;
  min-width: 0;
}

.run-box {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* 確認表: 5行固定。page-common.css の表より詰める */
#confirmation-table {
  margin: 0;
  font-size: 0.85rem;
  line-height: normal;
}

#confirmation-table th,
#confirmation-table td {
  padding: 0.4rem 0.5rem;
  vertical-align: middle;
}

#confirmation-table th {
  text-align: center;
  font-weight: normal;
}

#confirmation-table {
  background-color: #fff;
  border: 1px solid var(--c-border);
}

#confirmation-table th,
#confirmation-table td {
  border: 1px solid var(--c-border);
}

#confirmation-table th {
  background-color: #f8f9fa;
  color: var(--c-text);
}

#confirmation-table tbody tr:hover {
  background-color: #f1f1f1;
}

#confirmation-table td {
  text-align: right;
}

/* 空欄の行も同じ高さになるよう、空のセルに見えない文字を入れる */
#confirmation-table td:empty::before {
  content: "\00a0";
}

/* 異常値のテキスト用クラス */
.invalid-value {
  color: #d9534f;
  font-weight: bold;
}

/* 異常値の行（セル）の背景を薄く赤くする */
#confirmation-table tr.invalid-cell td {
  background-color: #ffebee;
}

/* ボタン */
.btn-primary,
.btn-secondary {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--c-brand2-3);
  border-radius: 0.5rem;
}

.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: bold;
}

.btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 85%, white);
  border-color: color-mix(in srgb, var(--c-accent) 85%, white);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--c-bg);
  color: var(--c-brand-dark);
}

.btn-secondary:hover {
  background: var(--c-brand2-1);
}

/* サンプルデータ: 青の塗りボタン（clear all は .btn-secondary のまま） */
#sample-button {
  background: var(--c-brand-light);
  border-color: var(--c-brand-light);
  color: #fff;
}

#sample-button:hover {
  background: color-mix(in srgb, var(--c-brand-light) 85%, white);
  border-color: color-mix(in srgb, var(--c-brand-light) 85%, white);
}



.run-box .btn-primary {
  width: 100%;
}

.parameter-select {
  margin: 0.875rem 0;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.stepper-button {
  flex: none;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.25rem;
  font-size: 1.25rem;
  line-height: 1;
}

.stepper-value {
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 推定がうまくいかないとき用（実行ボタンの下） */
.run-box details {
  margin-top: 1rem;
}

summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--c-text-sub);
}

.setting-group {
  margin-top: 0.5rem;
}


/* ---------- 状態メッセージ（推定中 / 推定完了）と装飾ボックス ---------- */

.mdc-info-box,
.mdc-warn-box,
.mdc-alert-box {
  margin: 1.25rem 0;
}

/* ヘッダーの中にある note-box だけ上下のマージンをスッキリさせる */
#header .mdc-note-box {
  margin: 1.0em 0em;
  line-height: 1.4;
}

#header .mdc-note-box>p {
  margin-block: 0.8em;
}

#header .mdc-note-box>ul {
  margin-block: 0 0.6em;
}





/* 初期案内は背景なし */
.initial-message {
  background: none;
}

.running-message {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

#running-message-text {
  margin: 0;
  line-height: 1.4;
}

/* display:flex が hidden 属性より強いので、hidden のときは自分で消す */
.running-message[hidden] {
  display: none;
}

/* スピナー */
.spinner {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 0.1875rem solid #eadcae;
  border-top-color: #9a7200;
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
  display: inline-block;
}

@keyframes spinner-rotation {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}


/* ---------- 結果の表とグラフ ---------- */

/* 全群のCIグラフ・差のCIグラフ。matplotlibが出力するSVGは親の幅に合わせて拡縮する */
#omni-chart,
#pair-chart {
  width: 640px;
  max-width: 100%;
  margin: 0.5rem 0 1.25rem;
  padding: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}

#omni-chart svg,
#pair-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.pair-chart-tooltip {
  position: fixed;
  z-index: 1000;
  display: none;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: 0.35rem 0.55rem;
  border: 1px solid #999;
  border-radius: 4px;
  background: #fff;
  color: #333;
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  font-size: 0.85rem;
  line-height: 1.4;
  pointer-events: none;
}

.pair-chart-tooltip.visible {
  display: block;
}

/* 表は列数が多いので、狭い画面では横スクロールにする */
#omni-table,
#pair-p-table,
#pair-ci-table {
  max-width: 100%;
  overflow-x: auto;
}

.parameter-select select {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font: inherit;
}

/* 推定結果テーブルのスタイル */
.summary-table {
  width: auto;
  min-width: 400px;
  max-width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.85rem;
  line-height: normal;
  background-color: #fff;
  border: 1px solid #ddd;
}

.summary-table th,
.summary-table td {
  padding: 0.25rem;
  border: 1px solid #ddd;
  vertical-align: middle;
}

.summary-table td {
  text-align: right;
  white-space: nowrap;
}

.summary-table th {
  background-color: #f8f9fa;
  color: #333;
  text-align: center;
}

.summary-table tr:hover {
  background-color: #f1f1f1;
}