@charset "UTF-8";
/* =====================================================================
   実測（/research/）の図とトレース再生
   ---------------------------------------------------------------------
   寸法は JS が器の幅から決めるので、ここは色と太さだけ。
   テーマ本体は research.css（トークンもあちら）。

   ★ 塗りは «必ずクラスで» 当てる。JS 側に fill 属性を書き戻さないこと。
     以前はドット密度のパターンを fill="url(#…)" で当てていたので
     «CSS が勝つ» ことが事故だったが、いまは CSS が勝つのが仕様そのもの。

   別刷りの語彙に合わせて、ドット密度をやめてインクの濃淡 5 段にしてある。
   朱（--red）は 1 枚の図に 1 箇所だけ。朱は量を表さない。朱を外しても
   図は読める。朱が言うのは「ここを見ろ」だけ。
   ===================================================================== */

/* ★ «.research svg» と広く書かないこと。.research は <body> に付いているので、
     共通ヘッダーのナビアイコンまで width:100% を食らって巨大化する
     （実際そうなった）。図を入れる器の中だけに絞る。
     凡例の見本は .legend svg が自前で寸法を持っている */
.research .plot > svg,
.research .trace-scroll > svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ------------------------------------------------------------------ 塗り

   量の順に濃くする。lv-1 が最濃、lv-5 が最淡。
   «何番目か» ではなく «どれだけか» に対応させてあるので、
   並べ替えても意味が壊れない */
.research .p-fill.lv-1 { fill: var(--fig-1); }
.research .p-fill.lv-2 { fill: var(--fig-2); }
.research .p-fill.lv-3 { fill: var(--fig-3); }
.research .p-fill.lv-4 { fill: var(--fig-4); }
.research .p-fill.lv-5 { fill: var(--fig-5); }
.research .p-fill.is-empty { fill: var(--fig-0); }
.research .p-fill.is-key   { fill: var(--red); }     /* 1 枚に 1 箇所 */

/* ------------------------------------------------------------------ 罫と目盛

   点線をやめて実線。破線が残るのはトレースの «詰めた区間» だけで、
   そこは「実際の時間ではない」ことを形で言う必要がある */
.research .p-grid {
    stroke: var(--rule-hair);
    stroke-width: .5;
}
.research .p-axis {
    stroke: var(--rule-mid);
    stroke-width: .75;
}

.research .p-ytick,
.research .p-xtick {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-faint);
}
.research .p-axis-name {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--ink-sub);
}
.research .p-axis-cap {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-faint);
    letter-spacing: .06em;
}

/* ------------------------------------------------------------------ 図版要約

   このページで «測って出てきたこと» を、読み始める前に視覚で出す 1 枚。
   数字を本文より 2 段階大きくして、ページの入口にする */
.research .p-plate-num {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -.02em;
    fill: var(--ink);
    font-variant-numeric: tabular-nums;
}
.research .p-plate-num.is-key { fill: var(--red); }
.research .p-plate-cap {
    font-family: var(--font-serif);
    font-size: 12.5px;
    fill: var(--ink-sub);
}

/* ------------------------------------------------------------------ 帯 */

.research .p-bar-name {
    font-family: var(--font-serif);
    font-size: 12px;
    fill: var(--ink-text);
}
.research .p-bar-val {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--ink-sub);
    font-variant-numeric: tabular-nums;
}
.research .p-bar-val.is-peak { fill: var(--red-deep); font-weight: 500; }
.research .p-bar-sub {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-faint);
}

/* ------------------------------------------------------------------ 方眼（遷移行列）

   升の継ぎ目を縫うだけの細い実線。枠にはしない */
.research .p-cell {
    stroke: var(--rule-hair);
    stroke-width: .75;
}
/* 濃い升の上の数字。地を敷かずに紙色の文字で抜く
   （lv-3 以降は黒でも紙でも 4.5:1 に届かないので、そこには数字を置かない） */
.research .p-cell-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    fill: var(--paper);
    font-variant-numeric: tabular-nums;
}

/* 濃淡の見本。密度のときは「密ほど多い」の一言で足りたが、
   5 段のグレーは見本が無いと読めない */
.research .p-key-cell { stroke: var(--rule-hair); stroke-width: .5; }
.research .p-key-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-faint);
}

/* ------------------------------------------------------------------ 基準線 */

.research .p-rule {
    stroke: var(--fig-2);
    stroke-width: .75;
}
.research .p-rule.is-key { stroke: var(--red); stroke-width: 1.1; }
.research .p-rule-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-sub);
}
.research .p-rule-label.is-key { fill: var(--red-deep); }

/* ------------------------------------------------------------------ 折れ線（開発の実測） */

.research .p-line {
    fill: none;
    stroke: var(--fig-2);
    stroke-width: 1.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.research .p-dot { fill: var(--fig-1); }
.research .p-dot.is-zero { fill: var(--fig-4); }
.research .p-bracket {
    fill: none;
    stroke: var(--red);
    stroke-width: 1;
}
.research .p-bracket-label {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--red-deep);
}

/* ------------------------------------------------------------------ 凡例 */

.legend {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-sub);
}
.legend li { display: flex; align-items: center; gap: .45rem; }
.legend svg { width: 16px; height: 10px; flex: none; }

/* ------------------------------------------------------------------ 2 つ並べる */

.pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
}
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }

/* =====================================================================
   トレース再生
   ===================================================================== */

/* ★ min-width: 0 を落とさないこと。中の SVG が 720px の最小幅を持つので、
     入れ子のどこかが縮めない状態になるとページ全体が横にはみ出す */
.trace { width: 100%; min-width: 0; }

.trace-ctrl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.1rem;
    margin-bottom: .9rem;
}
/* <button> は UA 既定で枠と角丸を持つ。別刷りに枠は無いので明示的に戻し、
   押せることの手がかりは下の 1 辺だけにする */
.trace-ctrl button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 2px 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-sub);
    cursor: pointer;
    line-height: 1.5;
    border-bottom: 1px solid var(--rule-hair);
}
.trace-ctrl button:hover { color: var(--ink); border-bottom-color: var(--ink); }
.trace-ctrl button[aria-pressed="true"] {
    color: var(--red-deep);
    font-weight: 500;
    border-bottom-color: var(--red);
}
.trace-ctrl button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* 速度の 4 つは 1 組として近づけ、他の操作とは離す */
.trace-ctrl .t-speed { display: inline-flex; gap: .6rem; }
.trace-ctrl .t-play { min-width: 4.5em; text-align: left; }

/* 読み上げ環境ではここだけが出力になるので、必ず文字で出す */
.trace-status {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-sub);
    margin: .6rem 0 0;
    min-height: 1.6em;
    font-variant-numeric: tabular-nums;
}

.trace-scroll {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.trace-scroll > svg { min-width: 720px; }

.research .t-lane { fill: var(--fig-5); }
.research .t-lane-name,
.research .t-tick {
    font-family: var(--font-mono);
    font-size: 9px;
    fill: var(--ink-faint);
}
.research .t-lane-name.is-main { fill: var(--ink-sub); }

/* イベント 1 つ。塗りは .p-fill.lv-* が当たる（3 段に畳んである） */
.research .t-ev { stroke: var(--rule-hair); stroke-width: .5; }
.research .t-ev.is-dim { opacity: .3; }
.research .t-ev.is-on  { fill: var(--red); stroke: var(--red-deep); stroke-width: 1; }
/* 失敗は朱にしない（朱は «いま» を指すのに使っている）。矩形の上辺に刻みを 1 本 */
.research .t-err-tick { stroke: var(--ink); stroke-width: 1; }

.research .t-spawn {
    fill: none;
    stroke: var(--rule-mid);
    stroke-width: 1;
}
.research .t-arc {
    fill: none;
    stroke: var(--rule-mid);
    stroke-width: 1;
}
.research .t-arc.is-on { stroke: var(--red); stroke-width: 1.4; }

.research .t-mark { stroke: var(--ink-faint); stroke-width: 1; }
.research .t-mark.is-gate { stroke: var(--ink); stroke-width: 1.6; }
.research .t-mark-label {
    font-family: var(--font-mono);
    font-size: 8.5px;
    fill: var(--ink-faint);
}

.research .t-head { stroke: var(--red); stroke-width: 1.2; }

/* 詰めた区間。ここだけ破線を残す（実際の時間ではないことを形で言う） */
.research .t-squeeze {
    stroke: var(--rule-mid);
    stroke-width: 1;
    stroke-dasharray: 1 4;
    stroke-linecap: round;
}