/* =====================================================================
 * おみそと晩酌 ── PWA の見た目
 * ---------------------------------------------------------------------
 *   1章 変数の橋渡し（色はここでトークンから受け取るだけ。値は書かない）
 *   2章 「ホーム画面に追加」の札
 *   3章 「新しい内容が届いています」の帯
 *   4章 アプリとして開いているときの調整
 *
 * きまり: このファイルに「#」から始まる色の値は書かない。
 *         色は assets/css/omiso-tokens.css の var(--omiso-*) が唯一の出どころ。
 * ===================================================================*/

/* ------------------------------------------------------------------
 * 1章 変数の橋渡し
 *   トークン名が --omiso-paper 系でも --omiso-paper-rgb 系でも拾えるように
 *   var() を二段にしてある。
 * ----------------------------------------------------------------*/
:root {
	--pw-paper:  var(--omiso-paper,  rgb(var(--omiso-paper-rgb)));
	--pw-card:   var(--omiso-card,   var(--omiso-paper, rgb(var(--omiso-paper-rgb))));
	--pw-ink:    var(--omiso-ink,    rgb(var(--omiso-ink-rgb)));
	--pw-vert:   var(--omiso-vert,   rgb(var(--omiso-vert-rgb)));
	--pw-laiton: var(--omiso-laiton, rgb(var(--omiso-laiton-rgb)));
	--pw-rose:   var(--omiso-rose,   rgb(var(--omiso-rose-rgb)));

	--pw-faint:  rgba(var(--omiso-ink-rgb), .66);
	--pw-rule:   rgba(var(--omiso-laiton-rgb), .45);
	--pw-shadow: rgba(var(--omiso-ink-rgb), .16);

	--pw-serif:  'Cormorant Garamond', 'Zen Old Mincho', serif;
	--pw-mincho: 'Zen Old Mincho', serif;
	--pw-gothic: 'Zen Kaku Gothic New', sans-serif;

	/* 右下の入口札（LA FICHE）にぶつからないための逃げ幅 */
	--pw-entry-gap: 76px;
}

/* ------------------------------------------------------------------
 * 2章 「ホーム画面に追加」の札
 *   台帳からはみ出した見出し紙と同じ文法。紙・真鍮の細い罫・かすかな影。
 * ----------------------------------------------------------------*/
.omiso-pwa-invite {
	position: fixed;
	z-index: 9998;
	left: 14px;
	right: calc(var(--pw-entry-gap) + 6px);
	bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	max-width: 340px;
	padding: 16px 18px 15px;
	background: var(--pw-card);
	border: 1px solid var(--pw-rule);
	border-radius: 2px;
	box-shadow: 0 10px 26px -14px var(--pw-shadow);
	color: var(--pw-ink);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}

.omiso-pwa-invite.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* 上辺の細い真鍮の線 */
.omiso-pwa-invite::before {
	content: '';
	position: absolute;
	inset: 4px 4px auto 4px;
	height: 1px;
	background: var(--pw-rule);
}

.omiso-pwa-invite__eyebrow {
	margin: 0 0 6px;
	font-family: var(--pw-serif);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pw-laiton);
}

.omiso-pwa-invite__title {
	margin: 0 0 6px;
	font-family: var(--pw-mincho);
	font-size: 1.02rem;
	line-height: 1.5;
	word-break: auto-phrase;
}

.omiso-pwa-invite__text {
	margin: 0;
	font-family: var(--pw-gothic);
	font-size: .82rem;
	line-height: 1.75;
	color: var(--pw-faint);
	word-break: auto-phrase;
}

.omiso-pwa-invite__actions {
	margin-top: 12px;
}

.omiso-pwa-invite__go {
	display: inline-block;
	padding: 9px 20px;
	font-family: var(--pw-gothic);
	font-size: .84rem;
	letter-spacing: .06em;
	color: var(--pw-paper);
	background: var(--pw-vert);
	border: 1px solid var(--pw-vert);
	border-radius: 2px;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
}

.omiso-pwa-invite__go:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -8px var(--pw-shadow);
}

.omiso-pwa-invite__steps {
	margin: 12px 0 0;
	padding-left: 1.2em;
	font-family: var(--pw-gothic);
	font-size: .8rem;
	line-height: 1.9;
	color: var(--pw-faint);
}

.omiso-pwa-invite__ios {
	display: inline-block;
	margin: 0 .2em;
	padding: 0 .45em;
	border: 1px solid var(--pw-rule);
	border-radius: 2px;
	font-size: .92em;
}

.omiso-pwa-invite__close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 26px;
	height: 26px;
	line-height: 1;
	font-size: 1.1rem;
	color: var(--pw-faint);
	background: none;
	border: 0;
	cursor: pointer;
}

.omiso-pwa-invite__close:hover {
	color: var(--pw-ink);
}

/* ------------------------------------------------------------------
 * 3章 更新の帯（上から差し込まれる紙片）
 * ----------------------------------------------------------------*/
.omiso-pwa-toast {
	position: fixed;
	z-index: 9999;
	top: calc(10px + env(safe-area-inset-top, 0px));
	left: 50%;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(520px, calc(100% - 28px));
	padding: 10px 12px 10px 16px;
	background: var(--pw-card);
	border: 1px solid var(--pw-rule);
	border-radius: 2px;
	box-shadow: 0 10px 24px -14px var(--pw-shadow);
	font-family: var(--pw-gothic);
	font-size: .84rem;
	color: var(--pw-ink);
	opacity: 0;
	transform: translate(-50%, -16px);
	transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .3, 1);
}

.omiso-pwa-toast.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

.omiso-pwa-toast__text {
	flex: 1 1 auto;
	word-break: auto-phrase;
}

.omiso-pwa-toast__go {
	flex: 0 0 auto;
	padding: 6px 14px;
	font-family: var(--pw-gothic);
	font-size: .8rem;
	color: var(--pw-paper);
	background: var(--pw-vert);
	border: 1px solid var(--pw-vert);
	border-radius: 2px;
	cursor: pointer;
}

.omiso-pwa-toast__close {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--pw-faint);
	background: none;
	border: 0;
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * 4章 アプリとして開いているとき
 * ----------------------------------------------------------------*/
.omiso-standalone body {
	/* iPhone の下のバーぶんだけ足場を作る */
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* アプリのときだけ隠したいもの（必要になったらこのクラスを付ける） */
.omiso-standalone .omiso-hide-in-app {
	display: none !important;
}

/* ブラウザで見ているときだけ出したいもの */
.omiso-only-in-app {
	display: none;
}

.omiso-standalone .omiso-only-in-app {
	display: revert;
}

/* ------------------------------------------------------------------
 * 動きを控える設定のとき
 * ----------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {

	.omiso-pwa-invite,
	.omiso-pwa-toast {
		transition: opacity .01s linear;
		transform: none;
	}

	.omiso-pwa-toast.is-open {
		transform: translate(-50%, 0);
	}
}

/* ------------------------------------------------------------------
 * せまい画面
 * ----------------------------------------------------------------*/
@media (max-width: 480px) {

	.omiso-pwa-invite {
		right: calc(var(--pw-entry-gap) - 10px);
		padding: 14px 16px 13px;
	}

	.omiso-pwa-toast {
		gap: 8px;
		padding: 9px 10px 9px 13px;
		font-size: .8rem;
	}
}