/* ===== 今日の相性ランキング compat/today.html(2026-09-18)=====
   器は cpair.css(パンくず・h1・.block・.qa・.note)を流用し、ここには一覧の行だけを書く。
   幅は style="--w:NN%" で渡す(CLAUDE.md: 見た目の指定は CSS 側に置く)。 */
.h1date{font-size:.55em;font-weight:400;color:var(--ink-dim);font-variant-numeric:tabular-nums}

.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cr{display:grid;grid-template-columns:2.2em 1fr 120px 2.6em 8em;grid-template-areas:"pos pair bar score level" "pos why why why why";
  align-items:center;column-gap:12px;row-gap:2px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.cpos{grid-area:pos;font-family:Archivo,sans-serif;font-size:18px;font-weight:700;color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums}
.cpair{grid-area:pair;font-size:15.5px;font-weight:700;color:var(--ink);text-decoration:none}
.cpair:hover{color:var(--primary)}
.cpair span{color:var(--primary);font-size:.9em;letter-spacing:.06em;margin-right:4px}
.cbar{grid-area:bar;display:block;height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.cbar span{display:block;height:100%;width:var(--w);border-radius:6px;background:var(--primary)}
.cscore{grid-area:score;font-family:Archivo,sans-serif;font-size:17px;text-align:right;font-variant-numeric:tabular-nums}
.clevel{grid-area:level;font-size:13px;color:var(--ink-dim)}
.cwhy{grid-area:why;font-size:13px;line-height:1.7;color:var(--ink-dim)}
.clist.top .cr:first-child{border-left:4px solid var(--primary)}
.clist.top .cr:first-child .cpos{color:var(--primary)}
.clist.all .cr{padding:8px 14px}
.clist.all .cwhy{display:none}

.bestlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bestlist li{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;font-size:14.5px}
.bestlist .bs{font-weight:700;flex:1}
.bestlist a{color:var(--primary);font-weight:700;text-decoration:none}
.bestlist .bsc{font-family:Archivo,sans-serif;font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .cr{grid-template-columns:2em 1fr 2.6em;grid-template-areas:"pos pair score" "pos bar bar" "pos level level" "pos why why"}
  .bestlist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){.bestlist{grid-template-columns:1fr}}