/*
 * 正式画面の見た目。色・角丸・余白はすべて :root のトークンで定義し、
 * ダークモードでは同じ名前の値だけを差し替える。
 * 画面は高さ100%に収め、表示部分の大きさは領域のサイズ（container query）に合わせる。
 * 文字や要素がはみ出さず、スクロールは記録の一覧の中だけで起きる。
 */
:root {
    --bg: #f3f5f2;
    --surface: #ffffff;
    --surface-muted: #e8ece9;
    --ink: #1c2420;
    --ink-muted: #56625b;
    --line: #d9e0db;
    --accent: #1d7a59;
    --accent-ink: #ffffff;
    --alert: #c2412d;
    --ok: #187a4f;
    --warn: #b7791f;
    --needle: #d9472b;
    --radius: 16px;
    --radius-small: 10px;
    --gap: 12px;
    --gutter: 16px;
    --control-height: 46px;
    --segment-off: color-mix(in srgb, #1c2420 9%, transparent);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f1412;
        --surface: #161e1b;
        --surface-muted: #1f2925;
        --ink: #e6eee9;
        --ink-muted: #94a39b;
        --line: #2a3530;
        --accent: #4cc39a;
        --accent-ink: #0f1412;
        --alert: #ff7a63;
        --ok: #4cc39a;
        --warn: #f0b429;
        --needle: #ff7a63;
        --segment-off: color-mix(in srgb, #e6eee9 16%, transparent);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0f1412;
    --surface: #161e1b;
    --surface-muted: #1f2925;
    --ink: #e6eee9;
    --ink-muted: #94a39b;
    --line: #2a3530;
    --accent: #4cc39a;
    --accent-ink: #0f1412;
    --alert: #ff7a63;
    --ok: #4cc39a;
    --warn: #f0b429;
    --needle: #ff7a63;
    --segment-off: color-mix(in srgb, #e6eee9 16%, transparent);
    color-scheme: dark;
}

/* 7セグメントの数字（DSEG7 Classic・SIL OFL 1.1。ライセンスは fonts/DSEG-OFL-LICENSE.txt） */
@font-face {
    font-family: "DSEG7 Classic";
    src: url("fonts/DSEG7Classic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
#app {
    height: 100%;
}

html,
body {
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
    margin: 0;
}

button {
    font: inherit;
    min-height: var(--control-height);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
}

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

button:disabled {
    opacity: 0.4;
    cursor: default;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- 全体の骨組み ---- */

.app-shell {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 8px var(--gutter);
}

.app-title {
    color: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* 表示名は、幅が広いときは正式名、狭いときは略称（MFD）を出す。 */
.app-title-short {
    display: none;
}

@media (max-width: 479px) {
    .app-title-full {
        display: none;
    }

    .app-title-short {
        display: inline;
    }
}

.app-nav {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: var(--surface-muted);
}

.app-nav a {
    padding: 6px 14px;
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 14px;
    text-decoration: none;
}

.app-nav a.active {
    background: var(--surface);
    color: var(--ink);
}

.app-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 var(--gutter) var(--gutter);
}

.status {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.actions .wide {
    grid-column: 1 / -1;
}

/* ---- 取得画面：表示部分（stage）と操作部分（panel） ---- */

/* 縦向き：表示の下に、モードの切り替えと操作を並べる */
.acquisition {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "readout"
        "stage"
        "controls"
        "modes";
    gap: var(--gap);
}

/* 速度以外の値（どのモードでも共通）。タイトルの下に、4列の表を2段で置く */
.readout-strip {
    grid-area: readout;
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.modes {
    grid-area: modes;
    min-width: 0;
}

.acquisition > .control-row {
    grid-area: controls;
}

.stage {
    grid-area: stage;
    min-width: 0;
    min-height: 0;
    container-type: size;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}


.mode-switch {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-muted);
}

.mode-switch button {
    min-height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 600;
}

.mode-switch button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* 横長の画面（PC・横向きのスマホ）は、表示部分を左、操作部分を右に置く */
/* 横向き：モードの切り替えを表示の上の横一列に、操作を右端の縦のレールに置く。
   レールはアイコンだけにし、文字は読み上げ用に残す（visually-hidden） */
@media (min-aspect-ratio: 1/1) {
    .acquisition {
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "readout controls"
            "stage controls"
            "modes controls";
    }

    .modes {
        justify-self: stretch;
        width: 100%;
    }

    .acquisition > .control-row {
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .control-row .control-actions {
        flex-direction: column;
        gap: 12px;
    }

    /* 横向きの操作の列では、GPS と点灯の表示を縦に積む（列の幅を広げない） */
    .control-row .status-group {
        flex-direction: column;
        align-items: stretch;
    }

    .keep-state {
        white-space: nowrap;
    }

    /* 横向きのレールの操作ボタンは、正方形のアイコンにする（メニューの項目は対象外） */

    .control-row .control-actions > button,
    .control-row .menu-anchor > button {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        padding: 0;
        justify-content: center;
    }

    .control-row .control-actions .icon {
        width: 24px;
        height: 24px;
    }

    .control-row .btn-label,
    .control-row .lamp-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* 電球のアイコンは横向きのレールだけに出す（縦向きは文字だけ） */
.bulb-icon {
    display: none;
}

@media (min-aspect-ratio: 1/1) {
    .bulb-icon {
        display: inline-block;
    }
}

/* 文字を隠した部品（画面の読み上げには残る） */
.btn-label,
.lamp-label {
    display: inline;
}

/* ---- デジタルメーター ---- */

.digital-meter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2cqh;
}

/* 単位は数字の下に置き、数字の幅を領域いっぱいに使えるようにする */
.digital-main {
    display: flex;
    flex-direction: column;
    /* 単位は数字の枠の右端に揃える（数字の幅は、ここでは枠の幅で決まる） */
    align-items: flex-end;
    gap: 0.2em;
    line-height: 1;
}

.digital-seg {
    font-size: min(38cqw, 54cqh);
}

.digital-unit {
    font-size: min(6cqw, 8cqh);
    color: var(--ink-muted);
}

/* GPSが途切れている間の表示（速度は未表示になる）。行の高さは変えない。 */
.digital-top {
    min-height: 1.4em;
    font-size: min(4.2cqw, 4.5cqh);
}

.gps-outage {
    color: var(--warn);
    font-weight: 600;
}

/* 時刻・トリップ・進行方向・傾斜。値の幅を固定し、値が変わっても並びが動かないようにする */
/* デジタルの下の2つの表（動き・時刻）は、どちらも4列にそろえる。見出しを上、値を下に置く */
.motion-readout,
.digital-info {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4em 0.5em;
    font-size: 15px;
    color: var(--ink-muted);
    text-align: center;
}

.motion-readout .cell,
.digital-info .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* 値と単位（G・°/s）は、1行に収める（折り返さない） */
.motion-readout .cell > span,
.digital-info .cell > span {
    white-space: nowrap;
}

.motion-readout small,
.digital-info small {
    font-size: 0.75em;
    line-height: 1.2;
}

.digital-info b {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    /* トリップ（5桁）・標高（4桁）が収まるように、値は折り返さない */
    white-space: nowrap;
}

.digital-updated {
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- アナログメーター ---- */

.analog-meter {
    position: relative;
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
}

.analog-meter svg {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--ink);
}

/* 数値と単位は縦に並べ、目盛りの数字（下端）と重ならないようにする */
.analog-value {
    position: absolute;
    left: 50%;
    top: 64%;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: 0.2em;
    line-height: 1;
    white-space: nowrap;
}

.analog-seg {
    font-size: min(12cqw, 12cqh);
}

.analog-unit {
    font-size: min(4.5cqw, 4.5cqh);
    color: var(--ink-muted);
}

/* 加速度・ジャイロの数値（デジタルの下、Gメーターの下） */
/* 値の桁数が変わっても、並びが動かないように、数値の枠の幅を固定して右寄せにする */
.motion-readout b {
    display: inline-block;
    min-width: 5ch;
    text-align: center;
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Gメーター：1Gの円、0.5Gの円、十字線。軌跡は薄く、現在地は墨色の点 */
.gmeter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2cqh;
}

.gmeter svg {
    display: block;
    width: min(100cqw, 72cqh);
    height: auto;
    aspect-ratio: 1;
    color: var(--ink);
}

.gmeter .grid {
    stroke: var(--line);
    stroke-width: 1;
}

/* 線は、画面で動いた実際の軌跡。計測値は半透明の点で重ねる */
.gmeter .g-trail {
    stroke-width: 2;
    opacity: 0.8;
}

.gmeter .g-raw {
    fill: currentColor;
    opacity: 0.3;
}

/* アイコンだけのボタン。他の操作ボタンと同じ高さ（40px）の正方形にし、アイコンは読める大きさにする */
.ghost.icon-button {
    width: 40px;
    min-width: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-button .icon {
    width: 26px;
    height: 26px;
}

/* 操作ボタンの「点灯」（押している間は、色で状態を示す） */
.control-actions button[aria-pressed="true"] {
    color: var(--accent-ink);
    border-color: var(--accent);
}

/* Gメーターの下：置き方の状態と「基準にする」 */
.gmeter-mount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em 1em;
    font-size: min(4.2cqw, 4.5cqh);
    color: var(--ink-muted);
}

/* 7セグメント：点灯（on）と消灯（off）。消灯は同じ字形を薄い色で重ねて表示する */
.seg {
    display: inline-grid;
    font-family: "DSEG7 Classic", ui-monospace, monospace;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.seg-off,
.seg-on {
    grid-area: 1 / 1;
}

.seg-off {
    color: var(--segment-off);
}

.seg-on {
    color: var(--ink);
}

/* ---- ポイント（軌跡） ---- */

/* 領域いっぱいに広げる（ホーム画面などで縦に余裕があるときも、上下に空きを作らない）。
   地図（SVG）は高さの残りを使い、中の軌跡は同じ縮尺で中央に描く */
.point-view {
    width: 100cqw;
    height: 100cqh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    justify-items: center;
}

.point-zoom {
    justify-self: center;
}

.point-view svg {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: var(--ink);
    overflow: hidden;
}

.point-view .caption,
.point-empty {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-muted);
    text-align: center;
}

.point-empty {
    max-width: 24em;
}

/* ---- 記録画面 ---- */

.records {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: var(--gap);
}

.records-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 一覧は枠も背景も持たず、項目の区切り線だけにする（件数が少なくても空きが目立たないように） */
/* 一覧は残りの高さ（1fr）の中に収め、件数が多いときは一覧の中だけでスクロールする */
.session-list {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.session-item {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-weight: 400;
    text-align: left;
}

.session-item:last-child {
    border-bottom: 0;
}

.session-item[aria-pressed="true"] .session-time {
    color: var(--accent);
}

.session-item .meta {
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.session-empty {
    padding: 16px 14px;
    font-size: 14px;
    color: var(--ink-muted);
}

.not-found {
    padding-top: 24px;
}

/* ---- エラー表示（index.html の blazor-error-ui） ---- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: #fff3cd;
    color: #664d03;
}

/* ---- 操作列：GPSのランプと開始／停止ボタン ---- */

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--control-height);
}

.control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle {
    min-width: 128px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
}

.toggle .icon {
    width: 18px;
    height: 18px;
}

.toggle.stop {
    background: var(--surface-muted);
}

/* ---- 色の役割（README の「色の使い方」を参照）
 * 緑（accent）: 主な操作・取得中 / 墨色（ink）: 数値と現在地 / 赤（needle）: 針 / 赤（alert）: 警告 / 黄（warn）: 準備中
 */

.needle {
    stroke: var(--needle);
}

/* 現在地は墨色の点（速度の色と区別するため、緑は使わない） */
.marker {
    fill: var(--ink);
    stroke: var(--surface);
    stroke-width: 2;
}

/* ---- ランプ（GPSの状態） ---- */

.lamp {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.lamp-label {
    white-space: nowrap;
}

.lamp-dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lamp-color, var(--ink-muted));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--lamp-color, var(--ink-muted)) 20%, transparent);
}

.lamp-active .lamp-dot,
.lamp-dot.active {
    --lamp-color: var(--ok);
    animation: breathe 2.4s ease-in-out infinite;
}

.lamp-ready .lamp-dot {
    --lamp-color: var(--warn);
}

.lamp-alert .lamp-dot {
    --lamp-color: var(--alert);
}

.lamp-unknown .lamp-dot {
    --lamp-color: var(--ink-muted);
}

@keyframes breathe {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lamp-dot {
        animation: none !important;
    }
}

/* ---- 表示モードのアイコン ---- */

.mode-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mode-switch .icon {
    width: 22px;
    height: 22px;
}

/* ---- 記録画面 ---- */

.records-head .status {
    font-variant-numeric: tabular-nums;
}

.ghost {
    min-height: 40px;
    padding: 0 14px;
    border-color: transparent;
    background: var(--surface-muted);
    color: var(--ink);
}

.session-item {
    min-height: 52px;
    padding: 12px 0;
}

.session-time {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.session-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.session-meta .lamp-dot {
    width: 8px;
    height: 8px;
    box-shadow: none;
}

.export {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
}

.segmented {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--surface-muted);
}

.segmented button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 14px;
}

.segmented button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* ---- データロガー（速度グラフと記録の表） ---- */

.logger {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    gap: 12px;
}

.logger-graph {
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 4px;
}

.logger-graph svg {
    width: 100%;
    height: 100%;
    min-height: 0;
    color: var(--ink);
    overflow: hidden;
}

.logger-graph .grid {
    stroke: var(--line);
    stroke-width: 1;
}

.logger-graph .gap {
    stroke: var(--ink-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.logger-graph .axis {
    fill: var(--ink-muted);
}

.logger-table-wrap {
    min-height: 0;
    overflow: auto;
    border-top: 1px solid var(--line);
}

.logger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.logger-table th,
.logger-table td {
    padding: 6px 4px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.logger-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--ink-muted);
    font-weight: 600;
}

.logger-table .num {
    text-align: right;
}

/* ---- 速度の色の目盛り（ポイント表示） ---- */

.speed-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.speed-legend .bar {
    width: 120px;
    height: 6px;
    border-radius: 3px;
    /* 色は PointView が速度から作る（style で指定する） */
}

/* ---- 記録画面の確認・全消去 ---- */

.confirm {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--alert);
    border-radius: var(--radius-small);
    background: var(--surface);
    font-size: 14px;
}

.confirm .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

button.alert {
    background: var(--alert);
    border-color: var(--alert);
    color: #ffffff;
}

.export {
    grid-template-columns: auto 1fr auto;
}

/* 点灯が設定どおりに点いていない（ブラウザが許可しなかった）ときは、枠の色で知らせる */
.control-actions button.warn {
    border-color: var(--warn);
}

/* ---- メニュー（「…」）と操作シート ---- */

.menu-anchor {
    position: relative;
    display: inline-flex;
}

.menu-anchor .icon {
    width: 22px;
    height: 22px;
}

.menu-button.warn,
.icon-button.warn {
    border-color: var(--warn);
}

.menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: transparent;
}

/* 記録を選んだときに、下から出る操作の一覧 */
.menu-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    max-width: 460px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 24px rgb(0 0 0 / 0.14);
}

.menu-title {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--ink-muted);
}

/* 項目は「名前（左）と状態（右）」の2列。補足は下の行に全幅で出す */
.menu-item {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-item:hover:not(:disabled),
.menu-item:focus-visible {
    background: var(--surface-muted);
}

.menu-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.menu-check {
    min-width: 1.2em;
    text-align: center;
    color: var(--accent-ink);
    font-weight: 700;
}

.menu-note {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--ink-muted);
}

/* スプラッシュ画面（index.html の #splash）。針が一度だけレブに当たって戻る。 */
.splash {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #0f1419;
    color: #e6edf3;
    transition: opacity 0.4s ease;
}

.splash.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.splash-gauge {
    width: min(56vw, 300px);
    height: auto;
}

.splash-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* 針は、SVG の中心（256, 280）を軸に回す。0 の位置は -135°、レブ（右下）は 135°。 */
#splash-needle {
    transform-box: view-box;
    transform-origin: 256px 280px;
    transform: rotate(-135deg);
    animation: mfd-sweep 2.4s 0.3s both;
}

@keyframes mfd-sweep {
    0% {
        transform: rotate(-135deg);
        animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
    }
    45% {
        /* レブに当たって止まる */
        transform: rotate(135deg);
        animation-timing-function: ease-out;
    }
    50% {
        /* 当たって跳ね返る */
        transform: rotate(126deg);
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    100% {
        transform: rotate(-135deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #splash-needle {
        animation: none;
    }
}

/* 点灯の状態：入・切・未反映（取得画面の操作の行に出す） */
.status-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.keep-state {
    font-size: 13px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.keep-state.on {
    color: var(--ok);
    font-weight: 700;
}

.keep-state.warn {
    color: var(--warn);
    font-weight: 700;
}

/* HUDモード：表示の内容（速度・メーター・値の帯）を左右に反転する。メニューと操作は反転しない。 */
.acquisition.hud .stage,
.acquisition.hud .readout-strip {
    transform: scaleX(-1);
}

/* テスト環境のビルドだけ、名前の横に小さく環境を出す（本番では出ない） */
.env-badge {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--warn);
    border-radius: 4px;
    color: var(--warn);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
}

/* 横向き：値の帯は1段（左に時刻など、右に動きの値）にして、中央の表示の高さを残す */
@media (min-aspect-ratio: 1/1) {
    .readout-strip {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
        padding: 6px 10px;
    }

    .motion-readout,
    .digital-info {
        font-size: 14px;
    }
}

/* 横向きで高さが小さい画面（スマホの横向き）は、モードの切り替えを左の縦のバーにする。
   下の段を空けて、中央の表示の高さを増やす。PC など高さに余裕がある画面は、下のバーのまま。 */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
    .acquisition {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "modes readout controls"
            "modes stage controls";
    }

    .modes {
        justify-self: stretch;
        width: auto;
        min-height: 0;
    }

    .mode-switch {
        width: 52px;
        height: 100%;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(5, minmax(0, 1fr));
        border-radius: 16px;
    }

    .mode-switch button {
        min-height: 0;
    }
}

/* ---- 横向きの最適化：中央の表示を、画面いっぱいに大きくする ---- */
@media (min-aspect-ratio: 1/1) {
    :root {
        --gutter: 10px;
        --gap: 8px;
    }

    .app-header {
        min-height: 40px;
        padding: 4px var(--gutter);
    }

    .app-title {
        font-size: 14px;
    }

    .app-main {
        padding: 0 var(--gutter) var(--gutter);
    }

    .stage {
        padding: 6px;
    }

    .readout-strip {
        gap: 4px;
        padding: 4px 8px;
    }

    .motion-readout,
    .digital-info {
        font-size: 13px;
    }

    .motion-readout small,
    .digital-info small {
        font-size: 0.8em;
    }

    /* デジタル：数字を、表示の幅と高さに合わせて大きくする */
    .digital-seg {
        font-size: min(54cqw, 80cqh);
    }

    /* Gメーター：円を大きくし、値と基準点は右の列に避ける */
    .gmeter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 200px;
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 12px;
        width: 100%;
        height: 100%;
    }

    .gmeter svg {
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: center;
        width: min(100cqw - 220px, 100cqh);
    }

    .gmeter-mount {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        align-items: flex-start;
        font-size: 13px;
    }

    /* データロガー：グラフを左、リストを右に分ける */
    .logger {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: minmax(0, 1fr);
    }

    /* ポイント：軌跡を左、切り替え・キャプション・凡例を右に分ける */
    .point-view {
        grid-template-columns: minmax(0, 1fr) 200px;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
    }

    .point-view svg {
        grid-column: 1;
        grid-row: 1 / span 4;
    }

    .point-zoom {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
    }

    .point-view .caption {
        grid-column: 2;
        grid-row: 3;
        text-align: left;
    }

    .point-view .speed-legend {
        grid-column: 2;
        grid-row: 4;
        justify-self: stretch;
    }
}

/* 広告（本番のみ）：画面の一番下。邪魔なときは隠せる（隠すと、ボタンだけ残る） */
.ad-dock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 var(--gutter) 4px;
}

.ad-toggle {
    align-self: flex-end;
    padding: 2px 8px;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: 11px;
    cursor: pointer;
}

.ad-unit {
    width: 320px;
    height: 50px;
    max-width: 100%;
}