/*====================================================================

 役割: アプリ上部ヘッダー（ブランドロゴ、タイトル、現在地表示、WBGT/アイス必要度パネル）のスタイル管理
 担当UI: トップバーヘッダー、ブランド表記、WBGTパネル
 関連HTML: <header class="topbar">, <div class="brand">, <div class="brandMark">, <div class="brandCopy">, <div class="productName">, <h1>, <div class="locationStatus">, <div class="searchSummary">

====================================================================*/

/*====================================================================

 Header

====================================================================*/

.topbar{

    position:absolute;

    top:10px;

    left:10px;

    right:10px;

    z-index:1000;

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:72px;

    padding:9px 12px;

    border:1px solid rgba(255,255,255,.88);

    border-radius:24px;

    background:

        rgba(255,253,248,.93);

    backdrop-filter:

        blur(18px);

    box-shadow:

        var(--shadow);

}



.brand{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}



.brandMark{

    position:relative;

    display:block;

    justify-content:center;

    align-items:center;

    flex:0 0 52px;

    width:52px;

    height:52px;

    border-radius:14px;

    overflow:hidden;

    background:#fff;

    box-shadow:

        0 8px 22px rgba(23,58,97,.12);

}

.brandMark img{

    position:absolute;

    top:-18%;

    left:-23%;

    width:146%;

    height:146%;

    max-width:none;

    object-fit:contain;

}



.brandCopy{

    display:flex;

    flex-direction:column;

    min-width:0;

}



.productName{

    font-size:9px;

    letter-spacing:.30em;

    color:var(--navy);

    font-weight:700;

}



.brandCopy h1{

    margin-top:0px;

    font-size:19px;

    font-weight:900;

    color:var(--navy);

    letter-spacing:.02em;

}



.locationStatus{

    margin-top:2px;

    font-size:11px;

    color:var(--sub);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}



/*====================================================================

 Search status

====================================================================*/

.searchSummary{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:3px;

}

.radiusBadge{

    display:flex;

    align-items:baseline;

    gap:5px;

    padding:7px 10px 6px;

    border-radius:14px;

    background:var(--cream);

    color:var(--navy);

}

.radiusBadge span{

    font-size:7px;

    font-weight:900;

    letter-spacing:.13em;

}

.radiusBadge select{

    min-width:55px;

    padding:0 2px;

    border:0;

    outline:0;

    background:transparent;

    color:var(--navy);

    font-family:inherit;

    font-size:15px;

    font-weight:900;

    line-height:1;

    cursor:pointer;

}

.radiusBadge:focus-within{

    outline:3px solid var(--navy);

    outline-offset:2px;

}

.dataFreshness{

    max-width:90px;

    overflow:hidden;

    color:var(--sub);

    font-size:9px;

    font-weight:700;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.dataFreshness[data-tone="loading"]{color:var(--primary-dark)}

.dataFreshness[data-tone="success"]{color:#278061}

.dataFreshness[data-tone="warning"]{color:#b3653e}