/* Raadiyo 5 — app chrome.
 *
 * Deliberately small. The site already has around seventy sources of CSS
 * arguing with each other; this adds one more and it is not going to join in.
 * Every selector here starts with a class that exists nowhere else.
 */

.rkg-appbar{
	position:fixed; z-index:9990;
	left:12px; right:12px;
	bottom:calc(12px + env(safe-area-inset-bottom));
	display:flex; align-items:center; gap:14px;
	padding:14px 16px;
	background:#0E3A66; color:#fff;
	border-radius:16px;
	box-shadow:0 12px 34px rgba(6,20,38,.34), 0 2px 6px rgba(6,20,38,.22);
	font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	transform:translateY(calc(100% + 24px));
	opacity:0;
	transition:transform .26s cubic-bezier(.2,.7,.3,1), opacity .26s ease;
}
.rkg-appbar.is-up{ transform:translateY(0); opacity:1 }
@media (prefers-reduced-motion:reduce){
	.rkg-appbar{ transition:none }
}

.rkg-appbar__mark{
	flex:0 0 auto; width:40px; height:40px; border-radius:10px;
	background:#0E3A66 url(icon-192.png) center/cover no-repeat;
	box-shadow:inset 0 0 0 1px rgba(214,169,63,.35);
}

.rkg-appbar__txt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:2px }
.rkg-appbar__txt strong{ font-weight:600; font-size:14.5px; letter-spacing:-.005em; color:#fff }
.rkg-appbar__txt span{ color:#9DB6CE; font-size:12.5px; line-height:1.4 }

.rkg-appbar__act{ flex:0 0 auto; display:flex; align-items:center; gap:6px }

.rkg-appbar__go{
	appearance:none; border:0; cursor:pointer;
	background:#D6A93F; color:#0E3A66;
	font:600 13.5px/1 inherit; letter-spacing:.01em;
	padding:11px 18px; border-radius:999px;
}
.rkg-appbar__go:active{ transform:translateY(1px) }

.rkg-appbar__no{
	appearance:none; border:0; background:none; cursor:pointer;
	color:#9DB6CE; font:500 12.5px/1 inherit;
	padding:11px 6px;
}
.rkg-appbar__no:hover{ color:#fff }

.rkg-appbar__go:focus-visible,
.rkg-appbar__no:focus-visible{ outline:2px solid #D6A93F; outline-offset:2px }

/* On a narrow phone the sentence and the buttons stop fitting on one line
   long before the screen runs out, so the bar becomes two rows instead of
   squeezing the button into a stub. */
@media (max-width:430px){
	.rkg-appbar{ flex-wrap:wrap; row-gap:10px }
	.rkg-appbar__act{ width:100%; justify-content:flex-end }
}

/* ---- once it is installed ------------------------------------------- */

/* Standalone means there is no browser chrome between the page and the
   hardware, so the page itself has to keep clear of the gesture bar. */
html.rkg-app-installed body{
	padding-bottom:env(safe-area-inset-bottom);
}

/* ---- the way into Studio --------------------------------------------- */

/* Only ever printed for someone who can publish. It sits above the reading
   and below the install offer, and gets out of the way of the gesture bar. */
.rkg-write{
	position:fixed; z-index:9980;
	right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
	width:52px; height:52px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:#D6A93F; color:#0E3A66; text-decoration:none;
	font-size:22px; line-height:1;
	box-shadow:0 6px 18px rgba(6,20,38,.28);
}
.rkg-write:hover{ background:#e0b755; color:#0E3A66 }
.rkg-write:focus-visible{ outline:2px solid #0E3A66; outline-offset:3px }

/* When the install offer is up, the button steps aside rather than sitting
   on top of it. */
html.rkg-appbar-up .rkg-write{ bottom:calc(124px + env(safe-area-inset-bottom)) }