/* ============================================================
   WIND COMPONENT (windcomp.html) — Simulator とは独立した単体ページ
   ------------------------------------------------------------
   空港検索まわりの見た目は simulator.css の #ap_lookup 系と同じにしてある
   （意図的な重複 — このページは Simulator に依存させない方針のため、
   css/simulator.css は読み込まない）。
   ============================================================ */

.lead {
    max-width: 860px;
}

/* --- 入力表 -------------------------------------------------- */
#rwyTable,
#windTable {
    width: 100%;
    max-width: 860px;
}

table td {
    padding: 7px 8px;
    text-align: center;
}

table td input[type="number"],
table td input[type="text"] {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: right;
}

#slope_pct[readonly] {
    color: var(--amber);
    background: rgba(255, 176, 32, .06);
    border-color: rgba(255, 176, 32, .35);
    cursor: default;
}

/* --- 空港検索 -------------------------------------------------- */
#ap_lookup {
    max-width: 860px;
    margin: 0 0 22px;
    padding: 16px 18px;
    background: rgba(67, 210, 255, .04);
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r);
}

#ap_lookup .ap-lead {
    margin: 0 0 8px;
    font-size: .82rem;
    color: var(--muted);
}

#ap_lookup code {
    padding: 1px 5px;
    color: var(--cyan);
    background: rgba(67, 210, 255, .10);
    border-radius: 3px;
}

#ap_lookup .ap-note {
    margin: 0 0 14px;
    padding: 8px 10px;
    font-size: .74rem;
    line-height: 1.65;
    color: var(--faint);
    background: rgba(255, 176, 32, .05);
    border-left: 2px solid rgba(255, 176, 32, .5);
    border-radius: 0 var(--r) var(--r) 0;
}

#ap_lookup .ap-note strong {
    color: var(--amber);
}

#ap_lookup .ap-note a {
    color: var(--muted);
    border-bottom-color: rgba(130, 150, 171, .4);
}

.ap-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.ap-combo {
    position: relative;
    flex: 0 0 auto;
}

#ap_icao {
    width: 132px;
    text-align: left;
    letter-spacing: .22em;
    text-transform: uppercase;
}

#ap_rwy {
    min-width: 260px;
}

#ap_rwy:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#ap_list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    width: 340px;
    max-width: 78vw;
    max-height: 300px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .6);
}

#ap_list[hidden] {
    display: none;
}

#ap_list li {
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 3px;
    line-height: 1.45;
}

#ap_list li b {
    display: inline-block;
    min-width: 4.6em;
    color: var(--cyan);
    letter-spacing: .12em;
}

#ap_list li span {
    font-size: .82rem;
    color: var(--text);
}

#ap_list li i {
    display: block;
    margin-left: 4.6em;
    font-size: .72rem;
    font-style: normal;
    color: var(--faint);
}

#ap_list li:hover,
#ap_list li.on {
    background: rgba(18, 245, 140, .12);
}

#ap_list li:hover b,
#ap_list li.on b {
    color: var(--green);
}

.ap-status {
    margin: 10px 0 0;
    min-height: 1.4em;
    font-size: .78rem;
    color: var(--muted);
}

.ap-status.ok {
    color: var(--green);
}

.ap-status.warn {
    color: var(--amber);
}

.ap-status.ng {
    color: var(--red);
}

input.ap-filled {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(18, 245, 140, .22), var(--glow-green);
}

/* --- 風の成分（simulator.css の .wind-comp と同じ見た目） --------- */
.wind-comp {
    max-width: 860px;
    margin: 0 0 24px;
    padding: 14px 18px;
    text-align: left;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-left: 3px solid var(--cyan);
    border-radius: var(--r);
}

.wc-cap {
    margin: 0 0 10px;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cyan);
}

.wc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}

.wc-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.wc-label {
    font-size: .78rem;
    color: var(--muted);
}

.wc-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green);
    text-shadow: var(--glow-green);
}

.wc-unit {
    font-size: .78rem;
    color: var(--muted);
}

.wc-side {
    min-width: 1.1em;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--amber);
    text-shadow: 0 0 12px rgba(255, 176, 32, .45);
}

.wc-note {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--muted);
}

/* --- Wind Rose ---------------------------------------------------- */
#dial_wrap {
    max-width: 400px;
    margin: 0 0 24px;
    padding: 16px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--line);
    border-radius: var(--r);
}

#dial {
    max-width: 100%;
    height: auto;
    /* iPad でドラッグ中にページごとスクロールしないように */
    touch-action: none;
    cursor: grab;
}

#dial:active {
    cursor: grabbing;
}

@media (max-width:480px) {
    #ap_list {
        width: 300px;
    }

    #dial_wrap {
        padding: 10px;
    }
}

/* --- iPad 横画面：スクロール無しで収める --------------------------
   このページだけの特別対応（body.windcomp-page でスコープする）。
   2カラムにして、header/footer/余白をまとめて詰める。
   デバイス判定はできないので実際には「横長で背の低い画面」全般に
   掛かるが、単に密なレイアウトになるだけで害は無い。 */
@media (orientation: landscape) and (max-height: 1024px) and (min-width: 700px) {
    body.windcomp-page header .inner {
        min-height: 28px;
        padding: 2px 16px;
    }

    body.windcomp-page h1.logo {
        font-size: .8rem;
    }

    body.windcomp-page nav ul li a {
        padding: 5px 8px;
        font-size: .66rem;
    }

    body.windcomp-page .container {
        padding: 4px 16px 6px;
        min-height: 0;
    }

    body.windcomp-page .container h1 {
        margin: 0 0 5px;
        padding: 0 0 3px 10px;
        font-size: .95rem;
    }

    body.windcomp-page .lead {
        display: none;
    }

    body.windcomp-page h2 {
        margin: 0 0 3px;
        font-size: .78rem;
    }

    body.windcomp-page .wc-layout {
        display: grid;
        grid-template-columns: minmax(320px, 460px) 1fr;
        gap: 0 22px;
        align-items: start;
    }

    body.windcomp-page #ap_lookup {
        margin: 0 0 5px;
        padding: 4px 10px;
    }

    body.windcomp-page #ap_lookup .ap-lead,
    body.windcomp-page #ap_lookup .ap-note {
        display: none;
    }

    /* ICAO 欄を少し狭めて、その分を滑走路セレクトへ回す
       （フォントを大きくすると "RWY 16R  158°  4000m" のような長い選択肢が
       見切れていたため。セレクトは flex で残り幅いっぱいまで伸ばす）。 */
    body.windcomp-page #ap_icao {
        width: 96px;
    }

    body.windcomp-page #ap_rwy {
        flex: 1 1 220px;
        min-width: 0;
    }

    body.windcomp-page .ap-status {
        margin: 3px 0 0;
        min-height: 0;
        font-size: .66rem;
    }

    body.windcomp-page #rwyTable,
    body.windcomp-page #windTable {
        margin: 0 0 4px;
    }

    body.windcomp-page table td {
        padding: 2px 6px;
    }

    body.windcomp-page input[type="number"],
    body.windcomp-page input[type="text"],
    body.windcomp-page select {
        height: 36px;
        font-size: .92rem;
    }

    body.windcomp-page .wind-comp {
        margin: 0;
        padding: 5px 12px;
    }

    body.windcomp-page .wc-row {
        gap: 14px;
    }

    body.windcomp-page .wc-label,
    body.windcomp-page .wc-unit {
        font-size: .82rem;
    }

    body.windcomp-page .wc-value {
        font-size: 1.3rem;
    }

    body.windcomp-page .wc-note {
        display: none;
    }

    body.windcomp-page .wc-col-right p {
        display: none;
    }

    body.windcomp-page #dial_wrap {
        max-width: none;
        margin: 0;
        padding: 8px;
    }

    body.windcomp-page #dial {
        max-width: none;
        width: min(46vw, 62vh);
        height: min(46vw, 62vh);
    }

    body.windcomp-page footer {
        padding: 2px 12px;
        font-size: .56rem;
    }

    body.windcomp-page .more {
        margin-top: 4px;
        padding-top: 3px;
    }

    body.windcomp-page .more .open,
    body.windcomp-page .more .close {
        margin: 3px 0;
    }

    body.windcomp-page .more .open a,
    body.windcomp-page .more .close a {
        padding: 5px 12px;
        font-size: .68rem;
    }
}