/* 見た目の決まりは docs/design.md（ShiUI を基にした「紙・墨・朱」）。色は下の 6 つだけを使う
   （例外は机に置くキングスライムのぬいぐるみの色だけ。docs/design.md の 1.3）。
   名前の決まり（id・class・状態・CSS 変数）は docs/design.md の 7 章。見た目は class で当て、id では当てない */
:root {
  --paper: #e5e3dc;
  --paper-dark: #d9d6cc;
  --ink: #2a2926;
  --ink-light: #4a4843;
  --vermilion: #e14d2a;
  --vermilion-dark: #b93a1e;
  --slime-light: #8fd4f5;
  --slime: #4fb2e6;
  --slime-dark: #2a7fbf;
  --slime-white: #fbfaf6;
  --slime-red: #d2384a;
  --gold-light: #f6d55c;
  --gold: #deae22;
  --gold-dark: #9c7412;
  --line: 1.5px;
  --font-mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDMincho", "Noto Serif JP", serif;
  --font-gothic: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, Menlo, "Noto Sans Mono", monospace;
  --grain-size: 6px;
  color-scheme: light;
}

/* 紙の点の模様はページの地にだけ入れる。板（.panel）の中は無地の紙 */
body {
  margin: 0;
  padding: 24px;
  font-family: var(--font-gothic);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--paper-dark) 1.2px, transparent 1.6px);
  background-size: var(--grain-size) var(--grain-size);
}

code {
  font-family: var(--font-mono);
}

/* 題字（マストヘッド）: 明朝の大きな題・右の日の丸・下の墨の帯 */
.masthead {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 6px solid var(--ink);
}

.masthead-title {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: var(--line) solid var(--ink);
}

h1 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 32px;
  letter-spacing: 0.2em;
}

.masthead-hinomaru {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vermilion);
}

/* 見出しの帯: 墨の帯に紙色の明朝、先頭に朱の小さな日の丸 */
h2 {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 12px;
  padding: 6px 16px;
  font-family: var(--font-mincho);
  font-size: 18px;
  letter-spacing: 0.15em;
  color: var(--paper);
  background: var(--ink);
}

h2::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--vermilion);
}

.hint {
  margin: 0 0 12px;
  color: var(--ink-light);
}

/* 読み込むサイトを選ぶ欄: 番号付きのチェックボックスの札を横に並べる */
.site-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  counter-reset: site-picker;
}

.site-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  font-weight: bold;
  counter-increment: site-picker;
}

.site-picker::before {
  content: counter(site-picker, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-light);
}

/* オススメ機種（#93）: 欄の先頭に置き、朱の太い枠で囲んで、番号の代わりに「推」の印（濃い朱の丸い
   ハンコ）を付ける。番号を数えないので、12 サイトの番号は 01〜12 のまま */
.site-recommend {
  border: calc(var(--line) * 2) solid var(--vermilion);
  counter-increment: none;
}

.site-recommend::before {
  content: "推";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: var(--line) solid var(--vermilion-dark);
  border-radius: 50%;
  font-family: var(--font-mincho);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--vermilion-dark);
  transform: rotate(-8deg);
}

/* 板（パネル）: 各欄を墨の枠で囲んだ無地の紙にする。見出しの帯は板の上端に付ける */
.panel {
  margin: 0 0 24px;
  padding: 0 16px 16px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

.panel > h2 {
  margin: 0 -16px 12px;
}

/* ボタン・入力欄: 墨の枠・紙の地・角丸なし */
button,
input,
select {
  font: inherit;
  color: var(--ink);
  border-radius: 0;
}

button {
  padding: 4px 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

button:disabled {
  border-color: var(--ink-light);
  color: var(--ink-light);
  cursor: default;
}

input[type="search"],
input[type="number"],
select {
  padding: 3px 6px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

input[type="checkbox"] {
  accent-color: var(--ink);
}

:focus-visible {
  outline: var(--line) solid var(--vermilion);
  outline-offset: 2px;
}

/* 知らせ（エラー・警告）: 濃い朱の枠と先頭の朱の丸。文字は墨の太字（濃い朱の文字は小さいと読みにくい）。
   ページの上の知らせ（.message）と、机に置く欄の知らせに使う */
.alert.is-error,
.alert.is-warning {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: var(--line) solid var(--vermilion-dark);
  background: var(--paper);
  font-weight: bold;
}

.alert.is-error::before,
.alert.is-warning::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: var(--vermilion);
}

/* display の指定がブラウザ既定の [hidden] を上書きするので、隠す知らせは明示する */
.alert[hidden] {
  display: none;
}

.message {
  margin: 0 0 24px;
}

.message:empty {
  display: none;
}

/* 表: 内側の区切りは線を引かず、紙と濃い紙の縞で分ける */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
}

thead th {
  background: var(--paper-dark);
  border-bottom: var(--line) solid var(--ink);
  font-family: var(--font-mincho);
}

tbody tr:nth-child(even) {
  background: var(--paper-dark);
}

td.number,
.framed-table td {
  font-family: var(--font-mono);
}

/* 枠で囲んだ件数の表（読み込んだファイル・スコアが付かない名前・机の寸法） */
.framed-table {
  border: var(--line) solid var(--ink);
}

.framed-table td {
  text-align: right;
}

.framed-table tfoot th,
.framed-table tfoot td {
  border-top: var(--line) solid var(--ink);
  font-weight: bold;
}

.score-coverage {
  margin: 4px 0;
}

.score-coverage summary {
  cursor: pointer;
}

.score-coverage table {
  margin: 4px 0 8px;
}

.score-coverage td:first-child {
  text-align: left;
}

/* 印（ハンコ）: 件数を濃い朱の枠で囲んだ大きな太字の数字にする（大きな文字なのでコントラストの基準を満たす） */
.stamp {
  display: inline-block;
  margin: 0;
  padding: 2px 10px;
  border: var(--line) solid var(--vermilion-dark);
  color: var(--vermilion-dark);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: bold;
  transform: rotate(-2deg);
}

.stamp:empty {
  display: none;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.filter-search {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: bold;
}

.filter-search input {
  width: 22em;
}

.filter-range,
.filter-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}

.filter-range fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  margin: 0;
  border: var(--line) solid var(--ink);
}

.filter-range legend {
  padding: 0 4px;
  font-weight: bold;
}

.filter-range input[type="number"] {
  width: 7em;
}

.filter-multi details {
  min-width: 14em;
  border: var(--line) solid var(--ink);
  padding: 4px 8px;
}

.filter-multi summary {
  cursor: pointer;
  font-weight: bold;
}

.filter-options {
  max-height: 14em;
  overflow: auto;
  margin-top: 4px;
}

.filter-options label {
  display: block;
  white-space: nowrap;
}

/* display の指定がブラウザ既定の [hidden] を上書きするので、絞り込みで隠す候補は明示する */
.filter-options label[hidden] {
  display: none;
}

.total-bar,
.total-weights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.total-bar {
  margin-bottom: 8px;
  font-weight: bold;
}

.total-weights label {
  font-weight: normal;
}

.total-weights input {
  width: 5em;
  font-family: var(--font-mono);
}

.compare-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 12px;
}

/* 比較の表は高さを制限しない（.table-wrap の max-height より優先させるため 2 つのクラスで指定する） */
.table-wrap.compare-wrap {
  max-height: none;
}

.compare-table th,
.compare-table td {
  white-space: nowrap;
}

.compare-table tbody th {
  background: var(--paper-dark);
  border-right: var(--line) solid var(--ink);
}

.compare-table td.number {
  text-align: right;
}

/* 最も良い値: 濃い朱で塗り、紙色の 19px の太字にする（WCAG の大きな文字にしてコントラストの基準 3:1 を満たす。docs/design.md 6 章） */
.compare-table td.is-best {
  background: var(--vermilion-dark);
  color: var(--paper);
  font-size: 19px;
  font-weight: bold;
}

/* 見出しの機種名: 26em を超える名前は折り返し、3 行を超える分は「…」で省く（80 文字ほどで 2〜3 行。docs/design.md 4 章）。
   短い名前は 1 行のまま、名前の幅で表示する */
.compare-name {
  display: -webkit-box;
  max-width: 26em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 「外す」は機種名と重ならないよう、機種名の下の行に置く */
.compare-remove {
  display: block;
  margin-top: 4px;
  padding: 0 6px;
  font-family: var(--font-gothic);
  font-weight: normal;
}

.product-table .compare-col,
.product-table .desk-col {
  padding: 4px 8px;
  text-align: center;
}

input[type="radio"] {
  accent-color: var(--ink);
}

/* 机に置く: 図は欄の幅いっぱい。ドラッグで視点とパソコンを動かすので、ページのスクロールに使わせない */
.desk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

/* パソコンの向き: 絞り込みの範囲の枠（.filter-range fieldset）と同じ見た目 */
.desk-orientation {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  margin: 0 0 12px;
  border: var(--line) solid var(--ink);
}

.desk-orientation legend {
  padding: 0 4px;
  font-weight: bold;
}

.desk-canvas {
  display: block;
  width: 100%;
  height: 420px;
  margin: 0 0 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  cursor: grab;
  touch-action: none;
}

.desk-canvas:active {
  cursor: grabbing;
}

/* 仮の値: 文字は墨の太字にして、朱で印を付ける（濃い朱の文字は小さいと読みにくい） */
.desk-provisional {
  padding-left: 8px;
  border-left: 4px solid var(--vermilion-dark);
  font-weight: bold;
}

.desk-legend .is-provisional {
  font-weight: bold;
  text-decoration: underline var(--vermilion) var(--line);
  text-underline-offset: 3px;
}

.desk-legend {
  margin-top: 12px;
}

.desk-legend summary {
  cursor: pointer;
  font-weight: bold;
}

.desk-legend td {
  text-align: left;
}

.product-column-picker {
  margin: 0 0 12px;
}

.product-column-picker summary {
  cursor: pointer;
  font-weight: bold;
}

.product-column-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 0;
}

.table-wrap {
  max-height: 75vh;
  overflow: auto;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

.product-table th,
.product-table td {
  white-space: nowrap;
}

/* 一覧のページ送り */
.product-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}

/* display の指定がブラウザ既定の [hidden] を上書きするので、1 ページに収まるときに隠すことを明示する */
.product-pager[hidden] {
  display: none;
}

.product-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;
}

.product-sort-button {
  width: 100%;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.product-sort-button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.product-sort-button::after {
  content: " ↕";
  color: var(--ink-light);
}

th[aria-sort="ascending"] .product-sort-button::after {
  content: " ▲";
  color: var(--vermilion);
}

th[aria-sort="descending"] .product-sort-button::after {
  content: " ▼";
  color: var(--vermilion);
}

.product-table tbody tr:hover {
  outline: var(--line) solid var(--ink);
  outline-offset: calc(-1 * var(--line));
}

.product-table td.number {
  text-align: right;
}

/* 値なし（[未記載]・スコアなし）: 薄墨の斜体 */
.missing {
  color: var(--ink-light);
  font-family: var(--font-gothic);
  font-style: italic;
}

a {
  color: var(--ink);
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: var(--line);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--vermilion-dark);
}

.chart-panel > h3 {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: var(--line) solid var(--ink);
  font-family: var(--font-mincho);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.chart-panel {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: var(--line) solid var(--ink);
  background: var(--paper);
}

.chart-axis-select {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: bold;
}

.chart {
  overflow-x: auto;
}

.chart svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: var(--font-mono);
  font-size: 11px;
}

.chart svg text {
  fill: var(--ink);
}

.chart-axis-line {
  stroke: var(--ink);
  stroke-width: var(--line);
}

.chart-grid-line {
  stroke: var(--paper-dark);
  stroke-width: var(--line);
}

.chart svg .chart-axis-label {
  fill: var(--ink-light);
}

/* 点は紙色の地に墨の輪。選んだ機種は朱で塗る */
.chart-point {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: var(--line);
  cursor: pointer;
}

.chart-point:hover,
.chart-point:focus {
  fill: var(--ink);
  outline: none;
}

.chart-point.is-picked {
  fill: var(--vermilion);
  stroke: var(--vermilion-dark);
}

.chart-box {
  fill: var(--paper-dark);
  stroke: var(--ink);
  stroke-width: var(--line);
}

.chart-whisker {
  stroke: var(--ink);
  stroke-width: var(--line);
}

.chart-median {
  stroke: var(--vermilion);
  stroke-width: 3px;
}

.chart-bar {
  fill: var(--ink);
}

.chart-note {
  margin: 4px 0 0;
  color: var(--ink-light);
}

.chart-detail {
  margin-top: 8px;
  padding: 8px 12px;
  border: var(--line) solid var(--vermilion);
  background: var(--paper);
}

.chart-detail p {
  margin: 0 0 4px;
}

.product-table tbody tr.is-picked {
  outline: var(--line) solid var(--vermilion);
  outline-offset: calc(-1 * var(--line));
}