/* お知らせバー（統合インフォメーションバー）— Phase 1
   1行固定・source別配色・3Dキューブ回転・ダーク/ライト両対応。
   仕様: .claude/specs/oshirase-bar.md */

:root {
	--n2bar-h: 40px;
	--n2bar-fg: #fff;
	--n2bar-weather: rgba( 198, 40, 40, .98 );  /* 緊急・警報＝赤 */
	--n2bar-train:   rgba( 25, 118, 210, .98 ); /* 電車＝青 */
	--n2bar-gomi:    rgba( 46, 125, 50, .98 );  /* ゴミ＝緑 */
	--n2bar-info:    rgba( 55, 71, 79, .98 );   /* その他＝グレー */
}

/* CLS＆ロゴ被り対策の決定版: 通知がある時だけ本文を帯の高さぶん押し下げる。
   サーバ(PHP)が初回HTMLで body.n2bar-on を付けるので、後から動かない＝CLSゼロ。
   本文がもともと下がるのでロゴに被らない。通知が無いページは隙間も出ない。 */
body.n2bar-on { padding-top: var(--n2bar-h); }

/* バー本体: overlay。3Dキューブ回転のため perspective を持つ。背面色は現在 source。 */
.n2bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--n2bar-h);
	/* 移行期の重なり順: 旧警報バー(.n2alert-bar=99999)より下、旧ゴミ(.n2gomi-band=99980)より上。
	   警報＞電車の優先を保つ（警報が出てる間は旧警報バーが前面）。Phase 3/4 で旧帯撤去すれば不要。 */
	z-index: 99990;
	color: var(--n2bar-fg);
	background: var(--n2bar-info);
	box-shadow: 0 1px 6px rgba( 0, 0, 0, .18 );
	perspective: 700px;
	transform: translateY( -100% );
	transition: transform .25s ease, background-color .35s ease;
	will-change: transform;
}
.n2bar.is-visible { transform: translateY( 0 ); }

/* 管理バーぶんだけ下げる */
.n2bar.has-adminbar { top: 32px; }
@media screen and ( max-width: 782px ) {
	.n2bar.has-adminbar { top: 46px; }
}

.n2bar--weather { background: var(--n2bar-weather); }
.n2bar--train   { background: var(--n2bar-train); }
.n2bar--gomi    { background: var(--n2bar-gomi); }
.n2bar--info    { background: var(--n2bar-info); }

/* --- 3Dキューブ（四角柱）回転ステージ --- */
.n2bar-stage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: var(--n2bar-h);
	transform-style: preserve-3d;
	transition: transform .56s cubic-bezier( .2, .72, .24, 1 );
	transform: translateZ( calc( var(--n2bar-h) / -2 ) ) rotateX( 0deg );
}
.n2bar-stage.is-spin { transform: translateZ( calc( var(--n2bar-h) / -2 ) ) rotateX( 90deg ); }
.n2bar-stage.no-trans { transition: none; }

/* 各面（前面＝現在 / 背面＝次）。立方体の前面と下面に貼り付ける。 */
.n2bar-face {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--n2bar-h);
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 92px 0 12px; /* 右は controls ぶん空ける */
	margin: 0;
	border: 0;
	color: var(--n2bar-fg);
	background: var(--n2bar-info);
	font: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	backface-visibility: hidden;
}
.n2bar-face--front { transform: translateZ( calc( var(--n2bar-h) / 2 ) ); }
/* 背面は回転中だけ見える「次の面」。クリックは前面だけに効かせる。 */
.n2bar-face--back  { transform: rotateX( -90deg ) translateZ( calc( var(--n2bar-h) / 2 ) ); pointer-events: none; }

.n2bar-face.s-weather { background: var(--n2bar-weather); }
.n2bar-face.s-train   { background: var(--n2bar-train); }
.n2bar-face.s-gomi    { background: var(--n2bar-gomi); }
.n2bar-face.s-info    { background: var(--n2bar-info); }

.n2bar-icon { flex: 0 0 auto; font-size: 15px; }
.n2bar-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* --- 右側の操作系（回転しない・前面に固定） --- */
.n2bar-ctrls {
	position: absolute;
	right: 8px;
	top: 0;
	height: var(--n2bar-h);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 2;
}

.n2bar-dots { display: flex; align-items: center; }
/* 見た目は 6px のドットのまま、padding を透明にして当たり判定を広げる（キーボード/タップ対応）。
   background-clip:content-box でドット本体は 6px に保つ。 */
.n2bar-dot {
	width: 6px; height: 6px;
	padding: 6px;
	box-sizing: content-box;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .45 );
	background-clip: content-box;
	cursor: pointer;
}
.n2bar-dot.is-on { background: #fff; background-clip: content-box; }
.n2bar-dot:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* 緊急あり 固定インジケータ（回転で緊急が一時的に消えても「緊急あり」を常時示す） */
.n2bar-urgent {
	display: none;
	align-items: center;
	gap: 4px;
	font-weight: 700;
	font-size: 12px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba( 0, 0, 0, .25 );
	cursor: pointer;
}
.n2bar.has-urgent .n2bar-urgent { display: inline-flex; }
.n2bar-urgent::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #ff5252;
	box-shadow: 0 0 0 0 rgba( 255, 82, 82, .6 );
	animation: n2bar-pulse 1.6s infinite;
}
@keyframes n2bar-pulse {
	0%   { box-shadow: 0 0 0 0 rgba( 255, 82, 82, .6 ); }
	70%  { box-shadow: 0 0 0 6px rgba( 255, 82, 82, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 255, 82, 82, 0 ); }
}

/* 閉じる（緊急スライドでは隠す） */
.n2bar-close {
	width: 22px; height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, .2 );
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
.n2bar.is-urgent-slide .n2bar-close { display: none; }

@media screen and ( max-width: 600px ) {
	:root { --n2bar-h: 44px; }
	.n2bar-face { font-size: 13px; }
}

/* アニメ抑制設定を尊重（回転せず即切替） */
@media ( prefers-reduced-motion: reduce ) {
	.n2bar { transition: none; }
	.n2bar-stage { transition: none; }
	.n2bar-urgent::before { animation: none; }
}