/* saera.ai — /lab/（AIモデル比較実験室）専用。DESIGN-SPEC §5.3
   色・書体・余白は site.css のトークンだけで書く（生の色や書体名を直接書かない）。
   旧 /assets/lab.css は参照を外しただけ（ファイルは残す）。 */

/* ---------- page head ---------- */
.lab-head .page-head__visual{--crop-w:300px}

/* ---------- 遊び方・参加モデル（節の見出しは .sec-head。参加モデルは遊び方の中の小見出し h3） ---------- */
.lab-intro{padding-bottom:0}
.lab-models{margin-top:var(--s-7);display:grid;gap:var(--s-3)}
.lab-models__h{font-size:var(--t-l)}
/* ラウンドごとのチップ（新しいラウンドが先）。ラウンド名は小さく、チップの上に */
.lab-models__list{display:grid;gap:var(--s-3)}
.lab-models__round{display:grid;gap:var(--s-2)}
.lab-models__round-h{font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--lav-ink)}

/* ---------- ラウンド（タブ） ---------- */
.section.lab-rounds{padding-top:var(--s-9);padding-bottom:0}
.lab-rounds .sec-head{margin-bottom:var(--s-5)}
.lab-tabs [role="tab"]{font-size:var(--t-m)}
.round{padding-top:var(--s-5)}
/* ラウンド名（タブがあるときは sr-only。site.js が無くてタブをやめたときだけ見える） */
.round__h{margin-bottom:var(--s-2);font-size:var(--t-l)}
.round:focus-visible{outline-offset:6px}
.round__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);font-size:var(--t-s);color:var(--ink-2)}
.round__meta time{color:var(--lav-ink)}
.round__meta>*+*::before{content:"";display:inline-block;width:4px;height:4px;margin-right:var(--s-4);background:var(--rule);vertical-align:.2em}
.round__intro{margin-top:var(--s-3);color:var(--ink-2)}
.odai-list{margin-top:var(--s-6)}

/* ---------- お題（排他の details） ---------- */
.odai>summary{align-items:flex-start;padding-block:var(--s-4)}
.odai>summary::after{margin-top:.55em}
.odai__head{display:grid;gap:var(--s-1);min-width:0;flex:1}
.odai__line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3)}
.odai__no{flex:none;font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.06em;color:var(--pink-ink)}
.odai__no .num{margin-left:.15em;font-size:1.25em}
.odai__title{font-size:var(--t-l);line-height:var(--lh-head);font-feature-settings:"palt";letter-spacing:.04em;word-break:auto-phrase;text-wrap:balance}
.odai__peek{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500;font-size:var(--t-s);color:var(--ink-2)}
.odai>summary:hover .odai__peek{color:var(--ink-2)}
.odai[open]>summary .odai__peek{display:none}
.odai__body{padding-bottom:var(--s-7)}
.odai__body>*+*{margin-top:var(--s-5)}

.odai__prompt{padding:var(--s-4) var(--s-5);border-radius:var(--r-m);background:var(--grad-soft)}
.odai__label{font:700 var(--t-xs)/1.4 var(--f-jp);letter-spacing:.08em;color:var(--pink-ink)}
.odai__prompt-text{margin-top:var(--s-1);white-space:pre-wrap}

/* ---------- 回答カード（A〜F） ---------- */
.answers{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.answer{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);box-shadow:var(--sh-1)}
/* 本文は全行を左端から（記号は下の操作の行） */
.answer__text{flex:1;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t-s);line-height:1.8}
.answer__raw{min-width:0}
.answer__raw>summary{cursor:pointer;inline-size:fit-content;font-size:var(--t-s);font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.answer__raw>summary:hover{color:var(--ink)}
.answer__raw[open]>summary{margin-bottom:var(--s-2)}
.answer__raw-text{font-size:.85rem;color:var(--ink-2);max-block-size:28em;overflow:auto;padding:var(--s-3);background:var(--mist);border-radius:8px}
.answer__text--code{margin:0;min-width:0;max-block-size:28em;overflow:auto;white-space:pre;overflow-wrap:normal;font-family:var(--f-mono);font-size:.8rem;line-height:1.6;padding:var(--s-3);background:var(--mist);border-radius:8px;color:var(--ink)}
/* 操作の行: 記号 36px ＋ プルダウン（答え合わせの後は同じ位置に正誤） */
.answer__row{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:var(--s-3)}
.answer__letter{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-s);
  background:var(--mist);color:var(--lav-ink);font-size:var(--t-l);line-height:1}
.answer.is-picked{border-color:var(--lav)}
.answer.is-picked .answer__letter{background:var(--lav-ink);color:var(--paper)}

/* プルダウン（44px。矢印はピクセルの「∨」を clip-path で） */
.answer__pick{position:relative;color:var(--ink)}
.answer__pick::after{content:"";position:absolute;right:16px;top:50%;width:10px;height:6px;margin-top:-3px;background:currentColor;pointer-events:none;
  clip-path:polygon(0 0,20% 0,20% 33%,40% 33%,40% 67%,60% 67%,60% 33%,80% 33%,80% 0,100% 0,100% 33%,80% 33%,80% 67%,60% 67%,60% 100%,40% 100%,40% 67%,20% 67%,20% 33%,0 33%)}
.answer__select{appearance:none;-webkit-appearance:none;display:block;width:100%;min-height:44px;margin:0;
  padding:.5em 2.6em .5em 1em;border:1.5px solid var(--rule);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font:700 var(--t-s)/1.3 var(--f-jp);cursor:pointer}
.answer__select:hover{border-color:var(--lav)}
.answer.is-picked .answer__select{border-color:var(--lav-ink)}
.answer__select:disabled{cursor:default;opacity:1;background:var(--mist);border-color:transparent;color:var(--ink-2)}

/* 答え合わせの後（プルダウンの位置に出す。正誤は --ok / --ng の面と文字） */
.answer__verdict{min-height:44px;margin:0;padding:var(--s-2) var(--s-3);display:flex;flex-wrap:wrap;align-items:center;column-gap:.4em;
  border-radius:var(--r-s);background:var(--mist);font-size:var(--t-s);line-height:1.5}
.answer__verdict .chip{margin-right:.2em;background:var(--paper)}
.answer__verdict strong{font-weight:700}
.answer__mine{flex-basis:100%;font-size:var(--t-xs);color:var(--ink-2)}
.answer.is-ok{border-color:var(--ok)}
.answer.is-ok .answer__verdict{background:var(--ok-bg);color:var(--ok)}
.answer.is-ng{border-color:var(--ng)}
.answer.is-ng .answer__verdict{background:var(--ng-bg);color:var(--ng)}
.answer.is-ok .answer__letter{background:var(--ok-bg);color:var(--ok)}
.answer.is-ng .answer__letter{background:var(--ng-bg);color:var(--ng)}
.answer.is-none .answer__letter{background:var(--mist);color:var(--ink-2)}

/* ---------- 答え合わせボタンと結果 ---------- */
.odai__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5)}
.odai__progress{font-size:var(--t-s);color:var(--ink-2)}
.odai__progress .num{color:var(--lav-ink)}
.odai__result{display:grid;gap:var(--s-4);padding-top:var(--s-5);border-top:1.5px solid var(--ink)}
.odai__result:focus{outline:none}
.odai__result:focus-visible{outline:3px solid var(--lav-ink);outline-offset:6px}
.odai__score{font-size:var(--t-xl);font-weight:700;line-height:var(--lh-head);font-feature-settings:"palt"}
.odai__score .num{margin-right:.3em;font-size:1.3em;color:var(--lav-ink)}
.odai__comment{white-space:pre-wrap;text-wrap:pretty}
/* 総評のふきだしの折り返し・しっぽは site.css の .bubble--plain / .voice .bubble--plain（共通部品）にある */

/* ---------- 裏側メーター（round.tech があるラウンドだけ。折りたたみ） ---------- */
.tech{margin-top:var(--s-6)}
.tech__sum{font-weight:700;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.tech__body{padding-bottom:var(--s-6)}
.tech__body>*+*{margin-top:var(--s-4)}
.tech__title{font-size:var(--t-l)}
.tech__intro{color:var(--ink-2)}
/* 表は自分のラッパーの中だけで横スクロール（ページ全体は横に動かさない） */
.tech__scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--rule);border-radius:var(--r-m);background:var(--paper)}
.tech__scroll:focus-visible{outline:3px solid var(--lav-ink);outline-offset:2px}
.tech__table{width:100%;min-width:30em;border-collapse:collapse;font-size:var(--t-s);line-height:1.5}
.tech__table th,.tech__table td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--rule);vertical-align:baseline}
.tech__table tbody tr:last-child>*{border-bottom:0}
.tech__table thead th{background:var(--mist);color:var(--ink);font-weight:700;text-align:left;white-space:nowrap}
.tech__table thead th.tech__th-num{text-align:right}
.tech__table tbody th{text-align:left;font-weight:700;color:var(--ink);white-space:nowrap;background:var(--paper)}
.tech__unit{margin-left:.15em;font-weight:500;font-size:var(--t-xs);color:var(--ink-2)}
.tech__num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.tech__txt{text-align:left;color:var(--ink)}
/* 先頭列（モデル名）は横スクロール中も見えるように */
.tech__table th:first-child{position:sticky;left:0;z-index:1}
.tech__table thead th:first-child{background:var(--mist)}
.tech__table tbody th:first-child{box-shadow:1px 0 0 var(--rule)}

@media (max-width:760px){
  .lab-models{margin-top:var(--s-6)}
  .section.lab-rounds{padding-top:var(--s-8)}
  /* 「お題N」は題の長さに関係なく、いつも題の上の行 */
  .odai__line{flex-direction:column;align-items:flex-start}
  .odai__title{font-size:var(--t-m)}
  .odai__prompt{padding:var(--s-4)}
  .answers{gap:var(--s-3)}
  .answer{gap:var(--s-2);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4)}
  .answer__text{line-height:1.7}
  .odai__actions .btn{width:100%}
  .odai__score{font-size:var(--t-l)}
}

/* 動きは reduced-motion:no-preference の中だけ */
@media (prefers-reduced-motion:no-preference){
  .answer{transition:border-color var(--dur-1) var(--ease-out)}
  .answer__letter{transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
}