/* ==========================================================
   components/header.css
   ----------------------------------------------------------
   共通のヘッダー（layouts/header）を、画面上部の HUD のバーにする。
   ブログ切替のポップアップも、ここで管理する。
   ========================================================== */

/* ヘッダーとメニューバー（D-56）を、スクロールしても上に残す。
   2つを1つの帯に見せるよう、背景はまとめて付ける（間に線・色の境目を出さない）。
   背景は HUD のパネルと同じ、青をうっすら含んだ透ける色（components/panel.css）。 */
.site-top {
    position: sticky;
    top: 0;
    z-index: 100;
    /* 帯の下の光（メニューバーに付けると、上のヘッダーとの間にも光がにじむため、帯全体に付ける） */
    box-shadow: 0 2px 18px rgba(102, 217, 255, 0.12);
}

/* 帯の背景。スクロールして下を通る本文で文字が読みにくくならないよう、透けた所をぼかす。
   帯そのもの（.site-top）にぼかしを付けると、中のメニューの項目のぼかしが効かなくなるため、裏の層に付ける */
.site-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(102, 217, 255, 0.11), rgba(102, 217, 255, 0.04));
    box-shadow: inset 0 0 22px rgba(102, 217, 255, 0.09);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ヘッダーとメニューバーの間には線を引かない（上の帯の下の線・光は、メニューバーの下に引く。components/menu.css） */
.site-header {
    position: relative;
    padding: 10px 32px;
}

.site-header-left {
    gap: 16px;
}

/* BlogOS の文字。ヘッダーの高さを変えずに、行の高さいっぱいまで大きくする。
   行の高さは、これまでの文字（20px × 行間 1.7 ＝ 34px）とブログ名のボタン（約34px）で決まっているため、34px に固定する */
.site-title {
    font-family: var(--im-font-logo);
    font-size: 30px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--im-cyan-bright);
    text-shadow: var(--im-glow-text);
}

/* 狭い画面：ブログ名のボタンの場所を残すため、大きくしすぎない */
@media (max-width: 640px) {

    .site-title {
        font-size: 22px;
        letter-spacing: 0.1em;
    }

}

.site-title:hover {
    color: #fff;
}

/* 「WELCOME TO」：右端の今の日時の札（SYSTEM TIME）と同じ大きさ・書体 */
.site-welcome {
    gap: 10px;
}

.site-welcome-label {
    font-family: var(--im-font-logo);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--im-cyan);
}

/* ブログ名のボタン（HUD の札） */
.blog-switch-button {
    padding: 4px 14px;
    font-family: var(--im-font-hud);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--im-cyan);
    background: rgba(102, 217, 255, 0.06);
    border: 1px solid var(--im-line-strong);
    border-radius: 2px;
    text-decoration: none;
    transition: background var(--im-ease), box-shadow var(--im-ease), color var(--im-ease);
}

.blog-switch-button:hover,
.blog-switch-button:focus-visible {
    color: var(--im-cyan-bright);
    background: rgba(102, 217, 255, 0.14);
    box-shadow: var(--im-glow);
    text-shadow: none;
}

/* パネルと同じく、四隅を斜めに削った形にし、マウスを乗せると枠を電気が流れる。
   形は clip-path、枠の線は ::after の八角形の輪、流れる電気は js/script.js（startHoverFlow）が置く SVG（.hover-flow） */
.blog-switch-button {
    --hover-cut: 6px;

    position: relative;
    border-color: transparent;
    border-radius: 0;
    box-shadow: inset 0 0 10px rgba(102, 217, 255, 0.08);
    clip-path: polygon(
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut));
}

.blog-switch-button::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--hover-line, var(--im-line-strong));
    transition: background var(--im-ease);
    clip-path: polygon(evenodd,
        var(--hover-cut) 0, calc(100% - var(--hover-cut)) 0, 100% var(--hover-cut), 100% calc(100% - var(--hover-cut)),
        calc(100% - var(--hover-cut)) 100%, var(--hover-cut) 100%, 0 calc(100% - var(--hover-cut)), 0 var(--hover-cut), var(--hover-cut) 0,
        calc(var(--hover-cut) + 0.5px) 1px, calc(100% - var(--hover-cut) - 0.5px) 1px, calc(100% - 1px) calc(var(--hover-cut) + 0.5px),
        calc(100% - 1px) calc(100% - var(--hover-cut) - 0.5px), calc(100% - var(--hover-cut) - 0.5px) calc(100% - 1px),
        calc(var(--hover-cut) + 0.5px) calc(100% - 1px), 1px calc(100% - var(--hover-cut) - 0.5px), 1px calc(var(--hover-cut) + 0.5px),
        calc(var(--hover-cut) + 0.5px) 1px);
    pointer-events: none;
}

/* マウスを乗せたとき：形で切るため外側の光は出せない。内側を光らせる */
.blog-switch-button:hover,
.blog-switch-button:focus-visible {
    box-shadow: inset 0 0 14px rgba(102, 217, 255, 0.3);
}

/* 枠を流れる電気（パネルと同じ形。マウスを乗せたときだけ） */
.hover-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--im-ease);
}

.hover-flow path {
    fill: none;
    stroke: var(--hover-accent, var(--im-cyan));
    stroke-linejoin: round;
    animation-play-state: paused;
}

.hover-flow-line {
    stroke-width: 1.6;
    stroke-dasharray: 60 10 18 10 30 16 6 14 26 18;
    filter: drop-shadow(0 0 2px var(--hover-accent, var(--im-cyan)));
    animation: hoverFlowLine 3.5s linear infinite;
}

.hover-flow-dots {
    stroke-width: 2;
    stroke-dasharray: 1 5;
    opacity: 0.45;
    animation: hoverFlowDots 3s linear infinite reverse;
}

.blog-switch-button:hover > .hover-flow,
.blog-switch-button:focus-visible > .hover-flow {
    opacity: 1;
}

.blog-switch-button:hover > .hover-flow path,
.blog-switch-button:focus-visible > .hover-flow path {
    animation-play-state: running;
}

/* 模様の長さの合計（208・48）だけずらすと、切れ目なく流れ続ける */
@keyframes hoverFlowLine {

    to {
        stroke-dashoffset: -208;
    }

}

@keyframes hoverFlowDots {

    to {
        stroke-dashoffset: -48;
    }

}

@media (max-width: 768px) {

    .site-header {
        padding: 8px 16px;
    }

}


/* ==========================================================
   右端の今の日時（SYSTEM TIME）
   ----------------------------------------------------------
   上の帯を2列にし、左にヘッダーとメニューバー（2行）、右にその2行にまたがって今の日時を置く（ヘッダーを高くしないため）。
   今の日時は3行（札・日付と曜日・時刻）。左を細い線で区切る。時刻は js/script.js（startClock）が1秒ごとに進める。
   ========================================================== */

.site-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* 帯の下の線は、メニューバーの下（components/menu.css）ではなく帯全体に引き、今の日時の下まで続ける。
       光の線（.site-menu::after）は、この線の上に重なる */
    border-bottom: 1px solid var(--im-line-strong);
}

.site-top > .site-header {
    grid-column: 1;
    grid-row: 1;
    /* 右端のログアウトのボタンと、今の日時の枠の間を詰める（狭い画面では今の日時を出さないため、元の余白に戻す） */
    padding-right: 10px;
}

.site-top > .site-menu {
    grid-column: 1;
    grid-row: 2;
    border-bottom: 0;
}

/* パネルと同じく、四隅を斜めに削った枠で囲む（components/panel.css と同じ作り：形は clip-path、枠の線は ::after の八角形の輪）。
   幅は固定する（時刻の数字で幅が変わり、帯が動いて見えないように） */
.site-clock {
    --clock-cut: 8px;

    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    width: 152px;
    margin: 6px 20px 6px 6px;
    padding: 6px 12px;
    background: linear-gradient(180deg, rgba(102, 217, 255, 0.11), rgba(102, 217, 255, 0.04));
    box-shadow: inset 0 0 16px rgba(102, 217, 255, 0.1);
    line-height: 1.15;
    white-space: nowrap;
    clip-path: polygon(
        var(--clock-cut) 0, calc(100% - var(--clock-cut)) 0, 100% var(--clock-cut), 100% calc(100% - var(--clock-cut)),
        calc(100% - var(--clock-cut)) 100%, var(--clock-cut) 100%, 0 calc(100% - var(--clock-cut)), 0 var(--clock-cut));
}

/* 枠の線（左上と右下の角は明るくする。パネルと同じ） */
.site-clock::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--im-cyan), var(--im-cyan)) 0 0 / 28px 28px no-repeat,
        linear-gradient(var(--im-cyan), var(--im-cyan)) 100% 100% / 28px 28px no-repeat,
        var(--im-line-strong);
    clip-path: polygon(evenodd,
        var(--clock-cut) 0, calc(100% - var(--clock-cut)) 0, 100% var(--clock-cut), 100% calc(100% - var(--clock-cut)),
        calc(100% - var(--clock-cut)) 100%, var(--clock-cut) 100%, 0 calc(100% - var(--clock-cut)), 0 var(--clock-cut), var(--clock-cut) 0,
        calc(var(--clock-cut) + 0.5px) 1px, calc(100% - var(--clock-cut) - 0.5px) 1px, calc(100% - 1px) calc(var(--clock-cut) + 0.5px),
        calc(100% - 1px) calc(100% - var(--clock-cut) - 0.5px), calc(100% - var(--clock-cut) - 0.5px) calc(100% - 1px),
        calc(var(--clock-cut) + 0.5px) calc(100% - 1px), 1px calc(100% - var(--clock-cut) - 0.5px), 1px calc(var(--clock-cut) + 0.5px),
        calc(var(--clock-cut) + 0.5px) 1px);
    pointer-events: none;
}

/* 時刻の数字は1文字ずつ同じ幅の枠に入れる（js/script.js。字体の数字の幅が違っても、文字が揺れないように） */
.site-clock-time .clock-char {
    display: inline-block;
    width: 0.78em;
    text-align: center;
}

.site-clock-time .clock-sep {
    width: 0.42em;
}

.site-clock-label {
    font-family: var(--im-font-logo);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--im-cyan);
}

.site-clock-date {
    font-family: var(--im-font-hud);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--im-text-dim, var(--im-text));
}

.site-clock-time {
    font-family: var(--im-font-logo);
    font-size: 22px;
    font-weight: 700;
    /* 1文字ずつ同じ幅の枠に入れるため、字間は付けない */
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--im-cyan-bright);
    text-shadow: var(--im-glow-text);
}

/* 狭い画面では出さない（ブログ名のボタンの場所を残す） */
@media (max-width: 640px) {

    .site-clock {
        display: none;
    }

    .site-top > .site-header {
        padding-right: 16px;
    }

}


/* ==========================================================
   ブログ切替のポップアップ
   ========================================================== */

/* ブログ切替・テーマ切替のポップアップ：パネル・メニューと同じ、青をうっすら含んだ透ける色で、後ろはすりガラスのようにぼかす。
   後ろの暗さは控えめにし、ぼかした画面がうっすら見えるようにする */
.blog-switch-modal {
    background: rgba(0, 4, 10, 0.72);
}

/* 形はパネルと同じく四隅を斜めに削った形（--modal-cut）。すりガラスは残す。
   枠の線と、枠を流れる電気は、js/script.js（startModalFlow）がポップアップの上に重ねる SVG（.modal-flow）で描く
   （ポップアップは中身が縦に動くため、ポップアップの中ではなく、後ろの暗い面に置いて位置を合わせる） */
.blog-switch-dialog {
    --modal-cut: 16px;

    background: linear-gradient(180deg, rgba(102, 217, 255, 0.11), rgba(102, 217, 255, 0.04));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: inset 0 0 28px rgba(102, 217, 255, 0.12);
    clip-path: polygon(
        var(--modal-cut) 0, calc(100% - var(--modal-cut)) 0, 100% var(--modal-cut), 100% calc(100% - var(--modal-cut)),
        calc(100% - var(--modal-cut)) 100%, var(--modal-cut) 100%, 0 calc(100% - var(--modal-cut)), 0 var(--modal-cut));
}

.modal-flow {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(102, 217, 255, 0.25));
}

.modal-flow path {
    fill: none;
    stroke: var(--im-cyan);
    stroke-linejoin: round;
}

/* 枠の線 */
.modal-flow-outline {
    stroke-width: 1;
    opacity: 0.55;
}

/* 枠を流れる電気（パネルと同じ：長さの違う光の線と、逆向きに流れる細かい点） */
.modal-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(--im-cyan));
    animation: modalFlowLine 6s linear infinite;
}

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

@keyframes modalFlowLine {

    to {
        stroke-dashoffset: -388;
    }

}

@keyframes modalFlowDots {

    to {
        stroke-dashoffset: -64;
    }

}

.blog-switch-dialog h2 {
    margin-top: 0;
}

.blog-switch-option {
    border-color: var(--im-line);
    border-radius: 2px;
    transition: background var(--im-ease), border-color var(--im-ease);
}

/* 選んでいるテーマの欄（中のアニメーションの設定のチェックでは光らせない） */
.blog-switch-option:hover,
.blog-switch-option:has(input:checked):not(.theme-option),
.theme-option:has(input[name="theme"]:checked) {
    background: rgba(102, 217, 255, 0.08);
    border-color: var(--im-line-strong);
}


/* ==========================================================
   狭い画面：ブログ名が長くても、ヘッダーからはみ出さない
   ========================================================== */

.site-header {
    gap: 12px;
}

.blog-switch-button {
    min-width: 0;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   ログアウトのアイコン（D-54）
   ----------------------------------------------------------
   ブログ名と同じ HUD の札。マウスを乗せると、ログアウト（終わる操作）として赤く光る。
   ボタン全般の見た目（form.css のスーツの赤と金）より優先する。
   ========================================================== */

.site-header-right {
    gap: 10px;
}

.site-header button.logout-button {
    padding: 5px 9px;
    color: var(--im-cyan);
    background: rgba(102, 217, 255, 0.06);
    border: 1px solid var(--im-line-strong);
    border-radius: 2px;
    box-shadow: none;
    filter: none;
}

.site-header button.logout-button:hover,
.site-header button.logout-button:focus-visible {
    color: #fff;
    background: rgba(255, 90, 82, 0.2);
    border-color: var(--im-red);
    box-shadow: 0 0 10px rgba(255, 90, 82, 0.45);
    filter: none;
}


/* ==========================================================
   アニメーションの設定（画面のテーマのポップアップの中。themes/ironman/components/animation-settings。D-73-02）
   ========================================================== */

/* 並び方は public/css/blogos.css。ここでは色だけ ironman に合わせる */
.animation-settings,
.animation-settings fieldset {
    border-color: var(--im-line-faint);
}

.animation-settings legend {
    padding: 0 6px;
}

.animation-settings-when label:has(input:disabled) {
    opacity: 0.5;
}


/* ==========================================================
   未確認のお知らせのポップアップ（notices/popup。D-74）
   ========================================================== */

.notice-popup-list {
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.notice-popup-list li {
    margin: 0 0 6px;
}