/*
 * TBook app-mode skin — only applied inside the installed app
 * (body.tbook-standalone). Article cards, a bottom nav, and bottom sheets.
 *
 * @since 4.9.0
 */

/* ---- Base ---- */
body.tbook-standalone {
	background: #eef0f3;
	-webkit-tap-highlight-color: transparent;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.tbook-standalone.tbook-has-appnav {
	padding-bottom: calc( 74px + env( safe-area-inset-bottom, 0px ) );
}

/* The production (Elementor) theme applies an identity transform to its flex
   containers. A transformed ancestor becomes the containing block for
   position:fixed descendants, which pushed the in-place Filters sheet thousands
   of pixels down the page. Neutralise those transforms inside the app only. */
body.tbook-standalone .elementor-element,
body.tbook-standalone .e-con,
body.tbook-standalone .e-con-inner { transform: none !important; }

/* ---- Hide the site header and the post "..." (permalink) menu in the app ---- */
body.tbook-standalone header.site_header,
body.tbook-standalone #header,
body.tbook-standalone .ct-header,
body.tbook-standalone .site-header,
body.tbook-standalone #masthead,
body.tbook-standalone > header { display: none !important; }
body.tbook-standalone .gb-metabox-handle,
body.tbook-standalone .gb-metabox { display: none !important; }

/* ---- Entries as cards ---- */
body.tbook-standalone .gwolle-gb .gwolle-gb-entries-list {
	display: block;
	padding: 0 12px;
}
body.tbook-standalone .gwolle-gb .gwolle-gb-entries-list .gb-entry,
body.tbook-standalone .gwolle-gb .gwolle-gb-read.gwolle-gb-single-entry .gb-entry {
	position: relative;
	background: #fff;
	border: 0 !important;
	border-radius: 20px !important;
	box-shadow: 0 2px 5px rgba(16,24,40,.08), 0 14px 34px rgba(16,24,40,.14);
	padding: 22px 16px 16px !important;
	overflow: visible !important;
	margin: 0 0 18px !important;
	overflow: hidden;
}
/* Optional decorative background image (from Settings > Android). Tiled at its
   natural size so a small texture repeats instead of being blown up. */
body.tbook-standalone .gb-entry::before {
	content: "";
	position: absolute; inset: 0; z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	background-image: var(--tb-app-card-bg, none);
	background-repeat: repeat;
	background-size: auto;
	background-position: top left;
	opacity: var(--tb-app-card-op, 1);
	pointer-events: none;
}
body.tbook-standalone .gb-entry > * { position: relative; z-index: 1; }
body.tbook-standalone .gb-entry .gb-entry-content { border-radius: 14px; overflow: hidden; }
body.tbook-standalone .gb-entry .gb-author-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; padding-left: 4px; }
body.tbook-standalone .gb-entry .gb-author-info .tbook-ring,
body.tbook-standalone .gb-entry .tbook-ring { overflow: visible !important; }
body.tbook-standalone .gb-entry .tbook-ring__inner { overflow: visible; }
body.tbook-standalone .gb-entry .gb-author-info img,
body.tbook-standalone .gb-entry .tbook-avatar { width: 42px; height: 42px; border-radius: 50%; }
body.tbook-standalone .tbook-type-chip {
	display: inline-flex; align-items: center; gap: 4px;
	margin-left: auto; padding: 4px 10px; border-radius: 999px;
	background: #eef2ff; color: #4338ca; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
/* Full-bleed media inside cards. */
body.tbook-standalone .gb-entry .gb-entry-content .video-js,
body.tbook-standalone .gb-entry .gb-entry-content .tbook-audio-playlist,
body.tbook-standalone .gb-entry .gb-entry-content .tbook-video-playlist,
body.tbook-standalone .gb-entry .gb-entry-content .tbook-gallery { margin-left: -14px; margin-right: -14px; border-radius: 0; }

/* Playlists (and their fluid player) must not overflow the card on the right.
   The -14px full-bleed stretched them past the content box on narrow screens. */
body.tbook-standalone .gb-entry .gb-entry-content .tbook-video-playlist,
body.tbook-standalone .gb-entry .gb-entry-content .tbook-audio-playlist {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
body.tbook-standalone .gb-entry .gb-entry-content .tbook-video-playlist .video-js,
body.tbook-standalone .gb-entry .gb-entry-content .tbook-audio-playlist .video-js {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* ---- Bottom navigation ---- */
.tbook-appnav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
	display: flex; align-items: stretch; gap: 8px;
	padding: 8px 10px calc( 8px + env( safe-area-inset-bottom, 0px ) );
	background: var( --tb-appnav-bg, rgba(255,255,255,.94) );
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border-top: 1px solid rgba(16,24,40,.08);
}
.tbook-appnav-item {
	position: relative;
	flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 4px; padding: 9px 6px 8px;
	border: 1px solid rgba(16,24,40,.12); border-radius: 14px;
	background: rgba(255,255,255,.35);
	color: var( --tb-appnav-text, #667085 ); font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tbook-appnav-ico { display: flex; width: 22px; height: 22px; color: inherit; }
.tbook-appnav-ico svg { width: 22px; height: 22px; display: block; }
.tbook-appnav-item:active { transform: translateY(1px); }
.tbook-appnav-item.is-on {
	color: var( --tb-appnav-active, #16a34a );
	border-color: var( --tb-appnav-active, #16a34a );
	background: rgba(16,24,40,.05);
	background: color-mix( in srgb, var( --tb-appnav-active, #16a34a ) 12%, transparent );
}
.tbook-appnav-item.is-notif::after {
	content: ""; position: absolute; top: 7px; right: 12px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var( --tb-appnav-active, #16a34a );
	box-shadow: 0 0 0 2px var( --tb-appnav-bg, #ffffff );
}

/* ---- Bottom sheets ---- */
.tbook-sheet-backdrop {
	position: fixed; inset: 0; z-index: 9998;
	background: rgba(16,24,40,.42);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}
.tbook-sheet-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.tbook-sheet {
	position: fixed !important; left: 0; right: 0; bottom: calc( 74px + env( safe-area-inset-bottom, 0px ) ); top: auto !important;
	z-index: 9999; max-height: 78vh;
	background: #fff;
	border-radius: 20px;
	margin: 0 8px;
	box-shadow: 0 -12px 40px rgba(16,24,40,.22);
	transform: translateY(140%);
	transition: transform .28s cubic-bezier(.22,1,.36,1);
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
}
.tbook-sheet.is-open { transform: translateY(0); pointer-events: auto; visibility: visible; }
.tbook-sheet-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px 12px; font-size: 16px; font-weight: 800;
	border-bottom: 1px solid #f2f4f7;
}
.tbook-sheet-close {
	width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: #f2f4f7; color: #344054; font-size: 20px; line-height: 1; cursor: pointer;
}
body.tbook-sheet-open { overflow: hidden; }

/* Contributors list */
.tbook-contrib-list { display: flex; flex-direction: column; padding: 8px; max-height: 62vh; overflow-y: auto; }
.tbook-contrib {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 8px;
	padding: 10px 14px;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	background: #f8f9fb;
	text-align: left; cursor: pointer; font-size: 15px; color: #101828;
}
.tbook-contrib:active { background: #eef0f3; }
.tbook-contrib-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #eef0f3; }
.tbook-contrib-av img { width: 100%; height: 100%; object-fit: cover; }
.tbook-contrib-name { flex: 1 1 auto; font-weight: 600; color: #101828; }

/* Notification preferences */
.tbook-prefs { display: flex; flex-direction: column; padding: 8px; }
.tbook-pref {
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 8px; padding: 14px 16px;
	border: 1px solid #e4e7ec; border-radius: 14px; background: #f8f9fb;
	cursor: pointer; font-size: 15px; font-weight: 600; color: #101828; text-align: left;
}
.tbook-pref:active { background: #eef0f3; }
.tbook-pref-tick { width: 20px; font-size: 15px; color: var( --tb-appnav-active, #16a34a ); opacity: 0; }
.tbook-pref.is-active {
	border-color: var( --tb-appnav-active, #16a34a );
	background: var( --tb-appnav-active, #16a34a );
	color: #ffffff;
}
.tbook-pref.is-active:active { background: var( --tb-appnav-active, #16a34a ); }
.tbook-pref.is-active .tbook-pref-tick { opacity: 1; color: #ffffff; }
.tbook-pref-note {
	margin: 4px 8px 8px; padding: 10px 12px; border-radius: 12px;
	background: #f2f4f7; color: #475467;
	font-size: 13px; line-height: 1.4; display: flex; align-items: center; gap: 10px;
}
.tbook-pref-note.is-ok { background: #f0fdf4; color: #166534; }
.tbook-note-tick { font-weight: 800; font-size: 15px; flex: 0 0 auto; }

/* App update prompt */
.tbook-update-body { padding: 16px 18px 20px; }
.tbook-update-text { margin: 0 0 10px; color: #101828; font-size: 15px; line-height: 1.5; }
.tbook-update-ver {
	display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px;
	background: #eef2ff; color: #4338ca; font-size: 12px; font-weight: 700;
}
.tbook-update-notes {
	margin: 0 0 16px; color: #475467; font-size: 14px; line-height: 1.5;
	white-space: pre-line; max-height: 40vh; overflow-y: auto;
}
.tbook-update-actions { display: flex; gap: 10px; }
.tbook-update-now {
	flex: 1 1 auto; padding: 13px 16px; border: 0; border-radius: 12px;
	background: var( --tb-appnav-active, #16a34a ); color: #fff;
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.tbook-update-later {
	flex: 0 0 auto; padding: 13px 18px; border: 1px solid #e4e7ec; border-radius: 12px;
	background: #f8f9fb; color: #344054; font-size: 15px; font-weight: 600; cursor: pointer;
}

/* In app mode the filter toggle is hidden; its menu is a sheet. */
body.tbook-standalone .tbook-filters-toggle { display: none !important; }
/* Infinite scroll replaces the numbered pagination in the app. */
body.tbook-standalone .page-navigation,
body.tbook-standalone .gwolle-gb-pagination { display: none !important; }
body.tbook-standalone .tbook-filters-menu { overflow-y: auto; }
body.tbook-standalone .tbook-filters-menu-inner { padding: 16px; }

@media ( prefers-reduced-motion: reduce ) {
	.tbook-sheet, .tbook-sheet-backdrop { transition: none; }
}

/* ---- Carousel (filters slider) as a full-page viewer in the app ---- */
body.tbook-standalone .tbook-slider-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	background: #0b0b0d !important;
}
body.tbook-standalone .tbook-slider-modal-card {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #0b0b0d !important;
	display: block !important;
	overflow: hidden !important;
}
body.tbook-standalone .tbook-slider-modal-header {
	position: absolute !important;
	top: 0; right: 0;
	z-index: 4;
	padding: calc( 10px + env( safe-area-inset-top, 0px ) ) 14px 10px;
	background: none !important;
	border: 0 !important;
}
body.tbook-standalone .tbook-slider-modal-header h3 { display: none !important; }
body.tbook-standalone .tbook-slider-modal-close {
	color: #fff !important;
	background: rgba(255,255,255,.14) !important;
	width: 40px; height: 40px;
	border-radius: 50%;
}
body.tbook-standalone .tbook-slider-modal-body {
	height: 100% !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	padding: calc( 44px + env( safe-area-inset-top, 0px ) ) 0 0 !important;
}
/* Pin the prev / next controls to the top so they are always reachable. */
body.tbook-standalone .tbook-entries-slider-controls {
	position: fixed !important;
	top: 0; left: 0;
	z-index: 4;
	height: calc( 60px + env( safe-area-inset-top, 0px ) );
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: env( safe-area-inset-top, 0px ) 14px 0;
	background: linear-gradient( 180deg, rgba(0,0,0,.6), rgba(0,0,0,0) );
	width: auto;
}
body.tbook-standalone .tbook-entries-slider-prev,
body.tbook-standalone .tbook-entries-slider-next {
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	color: #fff;
	font-size: 26px; line-height: 1;
	cursor: pointer;
}
body.tbook-standalone .tbook-entries-slider-counter { color: #fff; font-weight: 700; }
body.tbook-standalone .tbook-entries-slider-track { column-gap: 16px; }
body.tbook-standalone .tbook-entries-slider-track > .gb-entry {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 6px 5vw 28px !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	scroll-snap-align: center;
}
body.tbook-standalone .tbook-entries-slider-track > .gb-entry > article {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
	overflow: hidden;
}
/* Keep the carousel background image off — it fights the dark viewer. */
body.tbook-standalone .tbook-slider-modal .gb-entry::before { display: none !important; }
body.tbook-standalone .tbook-slider-modal-open { overflow: hidden; }

/* Carousel card: 90% of the screen width, with room above the avatar. */
body.tbook-standalone .tbook-slider-modal .tbook-entries-slider-track > .gb-entry {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 18px 0 26px !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}
body.tbook-standalone .tbook-slider-modal .tbook-entries-slider-track > .gb-entry > article {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
	overflow: hidden;
	display: block !important;
	width: 90% !important;
	max-width: 90% !important;
	margin: 0 auto !important;
	padding: 26px 16px 18px !important;
}
body.tbook-standalone .tbook-slider-modal .gb-entry .gb-author-info { padding-top: 0 !important; }

/* Full-width slider shell so the card's 90% is against the real screen. */
body.tbook-standalone .tbook-slider-modal-card,
body.tbook-standalone .tbook-slider-modal-body,
body.tbook-standalone .tbook-entries-slider,
body.tbook-standalone .tbook-entries-slider-track {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* PhotoSwipe caption: dedicated app wrapper. It sits above the bottom nav /
   Android system bar and always carries a dark backing so the text is readable
   even if the site's caption settings stylesheet is not applied. */
body.tbook-standalone .tbook-pswp-caption {
	bottom: calc( 74px + env( safe-area-inset-bottom, 0px ) );
	color: var( --tb-caption-color, #fff ) !important;
	font-size: var( --tb-caption-size, 16px );
	font-family: var( --tb-caption-font, inherit );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .55 );
}
body.tbook-standalone .tbook-pswp-caption.is-visible {
	background: var( --tb-caption-bg, rgba( 0, 0, 0, .72 ) ) !important;
}

/* App: never show scrollbars. */
body.tbook-standalone,
body.tbook-standalone * { scrollbar-width: none; -ms-overflow-style: none; }
body.tbook-standalone ::-webkit-scrollbar,
body.tbook-standalone::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* Notifications sheet: optional name field. */
body.tbook-standalone .tbook-name-field { padding: 12px 16px 2px; }
body.tbook-standalone .tbook-name-label { display: block; font-size: 12px; font-weight: 600; color: #667085; margin-bottom: 6px; }
body.tbook-standalone .tbook-name-input {
	width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #d0d5dd;
	border-radius: 12px; font-size: 15px; background: #fff; color: #101828; -webkit-appearance: none;
}
body.tbook-standalone .tbook-name-input:focus { outline: none; border-color: #12121a; box-shadow: 0 0 0 3px rgba(18,18,26,.08); }
body.tbook-standalone .tbook-name-disclaimer { margin-top: 6px; font-size: 11.5px; color: #98a2b3; line-height: 1.4; }

/* Highlights: "new highlight" bubble on the nav button + contributor rows. */
.tbook-appnav-item.is-new::after {
	content: ""; position: absolute; top: 7px; right: 12px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var( --tb-appnav-active, #16a34a );
	box-shadow: 0 0 0 2px var( --tb-appnav-bg, #ffffff );
}
.tbook-contrib { position: relative; }
.tbook-contrib-dot {
	position: absolute; top: 8px; right: 10px;
	width: 9px; height: 9px; border-radius: 50%;
	background: var( --tb-appnav-active, #16a34a );
	box-shadow: 0 0 0 2px #f8f9fb;
}