/* 暑さ・体感温度 計算ツール専用スタイル。本文幅のまま縦に積む(2カラムにしない)。CSSの単位はすべてrem。 */
.pt-hi-panel {
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
    border: 0.0625rem solid #fecaca;
    border-radius: 0.8rem;
    padding: 1rem;
    margin: 1rem 0;
    scroll-margin-top: 6.5rem;
}

.pt-hi-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.5rem 0.6rem;
    margin: 0.8rem 0 0.7rem;
    align-items: end;  /* 見出し・ヒントの行数が欄ごとに違っても、入力欄の下端をそろえる */
}
.pt-hi-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; color: #7c2d12; font-weight: 700; }
.pt-hi-field__label { display: block; min-height: 2.4rem; }
.pt-hi-field small { display: block; font-weight: 400; font-size: 0.7rem; color: #92400e; line-height: 1.2; margin-top: 0.15rem; }
.pt-hi-input {
    width: 100%; box-sizing: border-box; padding: 0.5rem; border: 0.0625rem solid #fca5a5; border-radius: 0.4rem;
    font-size: 1rem; background: #fff;
}

.pt-hi-jma { background: #fff; border: 0.0625rem solid #fed7aa; border-radius: 0.6rem; margin: 0; overflow: hidden; }
.pt-hi-jma summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.8rem; font-weight: 700; font-size: 0.85rem; color: #9a3412; outline: none;
}
.pt-hi-jma summary::-webkit-details-marker { display: none; }
.pt-hi-jma summary::before { content: '▸'; color: #ea580c; transition: transform 0.15s; }
.pt-hi-jma[open] > summary::before { transform: rotate(90deg); }
.pt-hi-jma__body { padding: 0.6rem 0.9rem 0.8rem; border-top: 0.0625rem solid #ffedd5; }

/* 都道府県プルダウン。JSが、地図の中の空いている場所(和歌山県の下あたり)へ、位置とサイズを実測して重ねる。
   JSが動かない場合や、実測できない場合は、下の行にそのまま表示される(この場合の見た目)。 */
.pt-hi-mapwrap { position: relative; margin: 0 0 0.6rem; }
.pt-hi-select--onmap {
    display: block; width: min(100%, 16rem); margin: 0.5rem auto 0; box-sizing: border-box; padding: 0.4rem 0.5rem;
    border: 0.0625rem solid #fdba74; border-radius: 999rem;
    font-size: 0.82rem; font-weight: 700; color: #9a3412; background: #fff; text-align: center;
}
.pt-hi-select--onmap.is-floating {
    position: absolute; margin: 0; z-index: 2; border-radius: 0.5rem; text-align: left;
    box-shadow: 0 0.15rem 0.4rem rgba(154, 52, 18, 0.2);
}
.pt-hi-jma .pt-pref-map__link.is-selected .pt-pref-map__tile { fill: #ea580c; }
.pt-hi-jma .pt-pref-map__link.is-selected .pt-pref-map__text { fill: #fff; }

/* 日を選ぶ帯(今日・1週間先までのチップ + 過去の日付) */
.pt-hi-daybar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.pt-hi-chips--days { flex: 1 1 auto; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 0.2rem; }
.pt-hi-chips--days .pt-hi-chip { flex: none; }
.pt-hi-pastpick { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; color: #7c2d12; font-weight: 700; flex: none; }
.pt-hi-dateinput {
    box-sizing: border-box; padding: 0.35rem 0.5rem; border: 0.0625rem solid #cbd5e1; border-radius: 0.4rem;
    font-size: 0.85rem; background: #fff; color: #334155;
}
.pt-hi-select { box-sizing: border-box; padding: 0.5rem; border: 0.0625rem solid #cbd5e1; border-radius: 0.4rem; font-size: 0.95rem; background: #fff; }
.pt-hi-chips { display: flex; gap: 0.3rem; }
.pt-hi-chip { border: 0.0625rem solid #cbd5e1; background: #fff; border-radius: 999rem; padding: 0.35rem 0.8rem; font-size: 0.85rem; color: #334155; cursor: pointer; white-space: nowrap; }
.pt-hi-chip.is-active { background: #ea580c; border-color: #ea580c; color: #fff; font-weight: 700; }
.pt-hi-jma-msg:empty { display: none; }
.pt-hi-jma-msg.is-err { color: #b91c1c; }

.pt-hi-msg { color: #b91c1c; font-weight: 700; margin: 0.4rem 0; }
.pt-hi-msg[hidden] { display: none; }

.pt-hi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0.6rem 0; }
.pt-hi-card { background: #fff; border: 0.0625rem solid #e2e8f0; border-radius: 0.6rem; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pt-hi-card__label { font-size: 0.78rem; color: #64748b; }
.pt-hi-card__value { font-size: 1.4rem; line-height: 1.25; color: #0f172a; overflow-wrap: anywhere; }
.pt-hi-card__sub { font-size: 0.74rem; color: #64748b; overflow-wrap: anywhere; }
.pt-hi-card.is-focus { grid-column: 1 / -1; background: #ea580c; border-color: #ea580c; }
.pt-hi-card.is-focus .pt-hi-card__label, .pt-hi-card.is-focus .pt-hi-card__sub { color: #ffedd5; }
.pt-hi-card.is-focus .pt-hi-card__value { color: #fff; font-size: 2rem; }

.pt-hi-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pt-hi-scroll table { min-width: 26rem; }
.pt-hi-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }

/* 期間の折れ線グラフ */
.pt-hi-trend { margin: 1rem 0 0; }
.pt-hi-btn {
    display: block; width: 100%; box-sizing: border-box; border: 0.0625rem solid #ea580c; background: #fff;
    color: #ea580c; border-radius: 0.5rem; padding: 0.6rem; font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.pt-hi-btn:disabled { opacity: 0.6; cursor: default; }
.pt-hi-trend-msg { margin: 0.4rem 0; }
.pt-hi-chart { background: #fff; border: 0.0625rem solid #e2e8f0; border-radius: 0.6rem; padding: 0.7rem; margin: 0.7rem 0 0; position: relative; }
.pt-hi-chart__title { margin: 0 0 0.4rem; font-size: 0.88rem; font-weight: 700; color: #7c2d12; }
.pt-hi-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pt-hi-chart__grid { stroke: #eef2f6; stroke-width: 1; }
.pt-hi-chart__axis { font-size: 9px; fill: #94a3b8; }
.pt-hi-chart__today { stroke: #fdba74; stroke-width: 1.5; stroke-dasharray: 3 3; }
.pt-hi-chart__line { fill: none; stroke: #ea580c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pt-hi-chart__dot { fill: #ea580c; }
.pt-hi-chart__dot.is-forecast { fill: #fdba74; }
.pt-hi-chart__hit { fill: transparent; cursor: pointer; outline: none; }
.pt-hi-chart__hit:focus-visible { fill: rgba(234, 88, 12, 0.15); }
.pt-hi-chart__hoverdot { fill: #fff; stroke: #ea580c; stroke-width: 2; pointer-events: none; }
.pt-hi-chart__tooltip {
    position: absolute; top: 0.4rem; transform: translateX(-50%); background: #1f2937; color: #fff;
    font-size: 0.72rem; padding: 0.25rem 0.5rem; border-radius: 0.3rem; white-space: nowrap; pointer-events: none;
    max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.pt-hi-chart__table { margin: 0.5rem 0 0; }
.pt-hi-chart__table summary { cursor: pointer; font-size: 0.78rem; color: #64748b; }
.pt-hi-chart__table table { margin-top: 0.4rem; }