/* ==========================================================
   components/form.css
   ----------------------------------------------------------
   入力欄とボタン。
   ・入力欄：暗い下地に HUD の線。選ぶと光る。
   ・ボタン：スーツの赤と金。
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input:not([type]),
select,
textarea {
    padding: 5px 8px;
    font: inherit;
    color: var(--im-text);
    background: var(--im-bg-input);
    border: 1px solid var(--im-line);
    border-radius: 2px;
    transition: border-color var(--im-ease), box-shadow var(--im-ease);
}

textarea {
    line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--im-cyan);
    box-shadow: var(--im-glow);
}

input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--im-text-faint);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--im-cyan);
}

input[type="file"] {
    color: var(--im-text-muted);
}

fieldset {
    border: 1px solid var(--im-line);
    border-radius: 2px;
}

legend {
    padding: 0 6px;
    font-family: var(--im-font-hud);
    color: var(--im-cyan);
}


/* ==========================================================
   ボタン（スーツの赤と金）
   ----------------------------------------------------------
   ヘッダーのボタン（blog-switch-button）は header.css で HUD の札にする。
   ========================================================== */

button:not(.blog-switch-button),
input[type="submit"],
input[type="button"],
input[type="file"]::file-selector-button {
    padding: 5px 16px;
    font-family: var(--im-font-hud);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--im-gold-text);
    background: linear-gradient(180deg, var(--im-red-mid), var(--im-red-deep));
    border: 1px solid var(--im-gold-deep);
    border-radius: 2px;
    cursor: pointer;
    transition: box-shadow var(--im-ease), border-color var(--im-ease), filter var(--im-ease);
}

button:not(.blog-switch-button):hover,
button:not(.blog-switch-button):focus-visible,
input[type="submit"]:hover,
input[type="button"]:hover {
    outline: none;
    border-color: var(--im-gold);
    box-shadow: var(--im-glow-gold);
    filter: brightness(1.15);
}

button:not(.blog-switch-button):active,
input[type="submit"]:active {
    filter: brightness(0.9);
}

button:disabled,
input[type="submit"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}


/* ==========================================================
   ボタンの種類（D-49-11）
   ----------------------------------------------------------
   ・何も付けない：主な操作（スーツの赤と金）
   ・.btn-secondary：補助の操作（HUD の青白い線）
   ・.btn-danger：取り消せない・壊す操作（赤い線と赤い文字）
   ・a.button-link：主な操作へのリンクを、ボタンの形で出す
   public/css/blogos.css では何もしないため、blank の見た目は変わらない。
   ========================================================== */

button.btn-secondary {
    color: var(--im-cyan);
    background: rgba(102, 217, 255, 0.06);
    border-color: var(--im-line-strong);
}

button.btn-secondary:hover,
button.btn-secondary:focus-visible {
    color: var(--im-cyan-bright);
    border-color: var(--im-cyan);
    box-shadow: var(--im-glow);
    filter: none;
}

button.btn-danger {
    color: var(--im-red);
    background: transparent;
    border-color: rgba(255, 90, 82, 0.6);
}

button.btn-danger:hover,
button.btn-danger:focus-visible {
    color: #fff;
    background: rgba(255, 90, 82, 0.18);
    border-color: var(--im-red);
    box-shadow: 0 0 10px rgba(255, 90, 82, 0.4);
    filter: none;
}

a.button-link {
    display: inline-block;
    padding: 5px 16px;
    font-family: var(--im-font-hud);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--im-gold-text);
    background: linear-gradient(180deg, var(--im-red-mid), var(--im-red-deep));
    border: 1px solid var(--im-gold-deep);
    border-radius: 2px;
    text-decoration: none;
    transition: box-shadow var(--im-ease), border-color var(--im-ease), filter var(--im-ease);
}

a.button-link:hover,
a.button-link:focus-visible {
    color: var(--im-gold-text);
    border-color: var(--im-gold);
    box-shadow: var(--im-glow-gold);
    text-shadow: none;
    filter: brightness(1.15);
}


/* ==========================================================
   ボタンの形：パネルと同じく、四隅を斜めに削った形（八角形）
   ----------------------------------------------------------
   ・背景（::before）と枠の線（::after。八角形の輪）を、ボタンの後ろに描く。ボタン自体は切らないため、
     マウスを乗せたときの光（drop-shadow）も八角形に沿って出る
   ・色は変数で決める：--btn-fill（背景）・--btn-line（枠の線）・--btn-glow（光）。
     枠の線の太さは --btn-bw（主な操作の金の縁取りは 2px。補助・取り消せない操作は 1px）
   ・ヘッダーのアイコンのボタン（ログアウト・音声操作）と、ブログ切替のボタンは、今の形のまま
   ========================================================== */

button:not(.blog-switch-button):not(.logout-button):not(.voice-button),
a.button-link {
    --btn-fill: linear-gradient(180deg, var(--im-red-mid), var(--im-red-deep));
    --btn-line: var(--im-gold-deep);
    --btn-glow: rgba(242, 194, 91, 0.45);
    --btn-bw: 2px;
    --btn-cut: 7px;

    position: relative;
    isolation: isolate;
    background: none;
    border: var(--btn-bw) solid transparent;
    border-radius: 0;
    box-shadow: none;
}

button:not(.blog-switch-button):not(.logout-button):not(.voice-button)::before,
button:not(.blog-switch-button):not(.logout-button):not(.voice-button)::after,
a.button-link::before,
a.button-link::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--btn-bw));
    z-index: -1;
    pointer-events: none;
}

/* 背景 */
button:not(.blog-switch-button):not(.logout-button):not(.voice-button)::before,
a.button-link::before {
    background: var(--btn-fill);
    clip-path: polygon(
        var(--btn-cut) 0, calc(100% - var(--btn-cut)) 0, 100% var(--btn-cut), 100% calc(100% - var(--btn-cut)),
        calc(100% - var(--btn-cut)) 100%, var(--btn-cut) 100%, 0 calc(100% - var(--btn-cut)), 0 var(--btn-cut));
}

/* 枠の線（外の八角形から、線の太さだけ内側の八角形を抜いた輪） */
button:not(.blog-switch-button):not(.logout-button):not(.voice-button)::after,
a.button-link::after {
    background: var(--btn-line);
    transition: background var(--im-ease);
    clip-path: polygon(evenodd,
        var(--btn-cut) 0, calc(100% - var(--btn-cut)) 0, 100% var(--btn-cut), 100% calc(100% - var(--btn-cut)),
        calc(100% - var(--btn-cut)) 100%, var(--btn-cut) 100%, 0 calc(100% - var(--btn-cut)), 0 var(--btn-cut), var(--btn-cut) 0,
        calc(var(--btn-cut) + var(--btn-bw) * 0.41) var(--btn-bw), calc(100% - var(--btn-cut) - var(--btn-bw) * 0.41) var(--btn-bw),
        calc(100% - var(--btn-bw)) calc(var(--btn-cut) + var(--btn-bw) * 0.41), calc(100% - var(--btn-bw)) calc(100% - var(--btn-cut) - var(--btn-bw) * 0.41),
        calc(100% - var(--btn-cut) - var(--btn-bw) * 0.41) calc(100% - var(--btn-bw)), calc(var(--btn-cut) + var(--btn-bw) * 0.41) calc(100% - var(--btn-bw)),
        var(--btn-bw) calc(100% - var(--btn-cut) - var(--btn-bw) * 0.41), var(--btn-bw) calc(var(--btn-cut) + var(--btn-bw) * 0.41),
        calc(var(--btn-cut) + var(--btn-bw) * 0.41) var(--btn-bw));
}

/* マウスを乗せたとき：枠の線を明るくし、八角形に沿って光らせる */
button:not(.blog-switch-button):not(.logout-button):not(.voice-button):hover,
button:not(.blog-switch-button):not(.logout-button):not(.voice-button):focus-visible,
a.button-link:hover,
a.button-link:focus-visible {
    --btn-line: var(--im-gold);
    border-color: transparent;
    box-shadow: none;
    filter: brightness(1.15) drop-shadow(0 0 6px var(--btn-glow));
}

/* 補助の操作（HUD の青白い線） */
button.btn-secondary:not(.blog-switch-button):not(.logout-button):not(.voice-button) {
    --btn-fill: rgba(102, 217, 255, 0.06);
    --btn-line: var(--im-line-strong);
    --btn-glow: rgba(102, 217, 255, 0.45);
    --btn-bw: 1px;
}

button.btn-secondary:not(.blog-switch-button):not(.logout-button):not(.voice-button):hover,
button.btn-secondary:not(.blog-switch-button):not(.logout-button):not(.voice-button):focus-visible {
    --btn-line: var(--im-cyan);
    filter: drop-shadow(0 0 6px var(--btn-glow));
}

/* 取り消せない・壊す操作（赤い線と赤い文字） */
button.btn-danger:not(.blog-switch-button):not(.logout-button):not(.voice-button) {
    --btn-fill: transparent;
    --btn-line: rgba(255, 90, 82, 0.6);
    --btn-glow: rgba(255, 90, 82, 0.4);
    --btn-bw: 1px;
}

button.btn-danger:not(.blog-switch-button):not(.logout-button):not(.voice-button):hover,
button.btn-danger:not(.blog-switch-button):not(.logout-button):not(.voice-button):focus-visible {
    --btn-fill: rgba(255, 90, 82, 0.18);
    --btn-line: var(--im-red);
    filter: drop-shadow(0 0 6px var(--btn-glow));
}

/* 押せないボタンは、マウスを乗せても光らせない（種類ごとのマウスを乗せたときの指定より優先する） */
button:disabled:not(.blog-switch-button):not(.logout-button):not(.voice-button) {
    filter: none !important;
}


/* 定期実行のポップアップの「前回」が失敗のとき（D-63-06） */
.schedule-run-failed {
    color: var(--im-red);
}