/* ==========================================================
   components/panel.css
   ----------------------------------------------------------
   HUD のパネル（D-49-11）。

   ・トップページのパネル（.hud-panel）と、各画面の区切り（.panel）の共通の見た目
   ・各画面では、<section class="panel">・<fieldset class="panel">・<form class="panel"> で区切る
     （public/css/blogos.css では何もしないため、blank の見た目は変わらない）
   ・区切りの見出し（.panel の最初の h2・legend）は、パネルの見出しの行にする。
     data-code（英字の札。例：EDITOR）があれば、見出しの前に出す
   ========================================================== */


/* ==========================================================
   HUD のパネル（トップページのパネルと、各画面の .panel で共通）
   ----------------------------------------------------------
   四隅を斜めに削った形（八角形）。背景は状態の色（--hud-accent）をうっすら含んだ色。
   ・形：パネル自体を clip-path で八角形に切る（--hud-cut：削る大きさ）
   ・枠の線：::after に、八角形の輪（外の八角形から内の八角形を抜いた形）を描く（--hud-border：線の色）
   ・左上と右下の角は、枠の線を状態の色で明るくする（HUD の角の印）
   ・パネルの中の「?」の説明（.tip-box）は body に出すため、切られない
   ========================================================== */

.hud-panel,
.panel {
    --hud-accent: var(--im-cyan);
    --hud-border: var(--im-line);
    --hud-cut: 12px;

    position: relative;
    padding: 12px 16px 14px;
    /* color-mix に対応していないブラウザでは、青の薄い色 */
    background: rgba(102, 217, 255, 0.05);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hud-accent) 11%, transparent) 0%,
            color-mix(in srgb, var(--hud-accent) 4%, transparent) 100%);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--hud-accent) 9%, transparent);
    color: var(--im-text);
    border: 1px solid transparent;
    border-radius: 0;
    clip-path: polygon(
        var(--hud-cut) 0, calc(100% - var(--hud-cut)) 0, 100% var(--hud-cut), 100% calc(100% - var(--hud-cut)),
        calc(100% - var(--hud-cut)) 100%, var(--hud-cut) 100%, 0 calc(100% - var(--hud-cut)), 0 var(--hud-cut));
}

/* 枠の線（八角形の輪）。左上と右下の角は、状態の色で明るくする */
.hud-panel::after,
.panel::after {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(var(--hud-accent), var(--hud-accent)) 0 0 / 44px 44px no-repeat,
        linear-gradient(var(--hud-accent), var(--hud-accent)) 100% 100% / 44px 44px no-repeat,
        var(--hud-border);
    clip-path: polygon(evenodd,
        var(--hud-cut) 0, calc(100% - var(--hud-cut)) 0, 100% var(--hud-cut), 100% calc(100% - var(--hud-cut)),
        calc(100% - var(--hud-cut)) 100%, var(--hud-cut) 100%, 0 calc(100% - var(--hud-cut)), 0 var(--hud-cut), var(--hud-cut) 0,
        calc(var(--hud-cut) + 0.5px) 1px, calc(100% - var(--hud-cut) - 0.5px) 1px, calc(100% - 1px) calc(var(--hud-cut) + 0.5px),
        calc(100% - 1px) calc(100% - var(--hud-cut) - 0.5px), calc(100% - var(--hud-cut) - 0.5px) calc(100% - 1px),
        calc(var(--hud-cut) + 0.5px) calc(100% - 1px), 1px calc(100% - var(--hud-cut) - 0.5px), 1px calc(var(--hud-cut) + 0.5px),
        calc(var(--hud-cut) + 0.5px) 1px);
    opacity: 0.95;
    pointer-events: none;
}

/* ::before は、英字の札（data-code）だけに使う */
.hud-panel::before,
.panel::before {
    content: none;
}

.hud-panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--im-line-faint);
}

/* 英字の札（SYNC など） */
.hud-panel-code {
    font-family: var(--im-font-logo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--hud-accent);
}

.hud-panel-label {
    font-family: var(--im-font-hud);
    font-weight: 600;
    color: var(--im-text);
}

/* パネルの中のリンクも、文字の基本の白。マウスを乗せると青白く光る */
.hud-panel a {
    color: var(--im-text);
    text-decoration-color: var(--im-line-strong);
}

.hud-panel a:hover,
.hud-panel a:focus-visible {
    color: var(--im-cyan-bright);
}



/* ==========================================================
   マウスを乗せたパネル（トップページのパネル .hud-panel だけ）
   ----------------------------------------------------------
   背景がうっすら光り（ボタンと同じ考え方）、枠を電気が流れる（アークリアクターからパネルへの線と同じ流れ方）。
   枠の線の SVG（.hud-panel-flow）は js/script.js（startPanelFlow）が置く。
   各画面のパネル（.panel）は、表を含む大きなパネルで Safari（iPad・Mac）の動きが重くなったため、背景の光も枠の電気も付けない
   （全画面・トップページの横の画面のパネルの中とも。D-73-04）
   ========================================================== */

.hud-panel {
    transition: background var(--im-ease), box-shadow var(--im-ease);
}

.hud-panel:hover,
.hud-panel:focus-within {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--hud-accent) 20%, transparent) 0%,
            color-mix(in srgb, var(--hud-accent) 8%, transparent) 100%);
    box-shadow: inset 0 0 34px color-mix(in srgb, var(--hud-accent) 22%, transparent);
}

.hud-panel-flow {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--im-ease);
}

/* アークリアクターの周りの電子の輪と同じく、長さの違う光の線（長い・短い・中くらい）と、細かい点を重ね、逆向きに流す */
.hud-panel-flow path {
    fill: none;
    stroke: var(--hud-accent);
    stroke-linejoin: round;
    animation-play-state: paused;
}

/* 模様の長さの合計（388）だけずらすと、切れ目なく流れ続ける */
.hud-panel-flow-line {
    stroke-width: 1.6;
    stroke-dasharray: 120 14 36 14 60 30 8 26 50 30;
    filter: drop-shadow(0 0 3px var(--hud-accent));
    animation: hudPanelFlowLine 6s linear infinite;
}

.hud-panel-flow-dots {
    stroke-width: 2.4;
    stroke-dasharray: 1 7;
    opacity: 0.45;
    animation: hudPanelFlowDots 4s linear infinite reverse;
}

@keyframes hudPanelFlowLine {

    to {
        stroke-dashoffset: -388;
    }

}

@keyframes hudPanelFlowDots {

    to {
        stroke-dashoffset: -64;
    }

}

.hud-panel:hover > .hud-panel-flow,
.hud-panel:focus-within > .hud-panel-flow {
    opacity: 1;
}

.hud-panel:hover > .hud-panel-flow path,
.hud-panel:focus-within > .hud-panel-flow path {
    animation-play-state: running;
}



/* ==========================================================
   各画面の区切り（.panel）
   ========================================================== */

.panel {
    display: block;
    min-width: 0;
    margin: 24px 0;
}

/* fieldset の標準の枠・余白を、パネルに合わせる（枠の線は ::after の八角形の輪） */
fieldset.panel {
    padding: 12px 16px 14px;
    border: 1px solid transparent;
}

/* 区切りの見出し（パネルの見出しの行） */
.panel > h2:first-child,
.panel > legend {
    margin: 0 0 12px;
    padding: 0 0 8px;
    font-size: 18px;
    border-left: 0;
    border-bottom: 1px solid var(--im-line-faint);
    text-shadow: none;
}

/* legend は枠の線の上に出るため、見出しの行にはせず、枠の中の先頭に置く */
fieldset.panel > legend {
    float: left;
    width: 100%;
}

fieldset.panel > legend + * {
    clear: both;
}

/* 英字の札（data-code） */
.panel [data-code]::before,
.panel[data-code]::before {
    content: attr(data-code);
}

.panel > h2[data-code]::before,
.panel > legend[data-code]::before {
    display: inline-block;
    margin-right: 12px;
    font-family: var(--im-font-logo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--hud-accent);
    vertical-align: 2px;
}

/* 見出しのない区切り（form.panel など）は、札をパネルの左上の中に出す（パネルを八角形に切るため、外には出せない） */
.panel[data-code] {
    padding-top: 26px;
}

.panel[data-code]::before {
    position: absolute;
    width: auto;
    height: auto;
    top: 5px;
    left: calc(var(--hud-cut) + 8px);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--im-font-logo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 16px;
    color: var(--hud-accent);
    opacity: 1;
}


/* ==========================================================
   狭い画面（T5）：パネルの内側の余白を小さくする
   ========================================================== */

@media (max-width: 640px) {

    .hud-panel,
    .panel,
    fieldset.panel {
        padding: 10px 12px 12px;
    }

}