:root{
	--bg: #ffffff;
	--panel: #f6f7f9;
	--border: #d7dbe0;
	--tile-border: #000000;
	--tile-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.06);
	--text: #111827;
	--subtext: #6b7280;
	--main-bg: #8e8e8e;

	--strip: #111111;          /* category strip */
	--strip-text: #ffffff;
	--strip-btn: #2a2a2a;
	--strip-btn-hover: #3a3a3a;

	--radius: 16px;
}

body{
	background: var(--bg);
	color: var(--text);
}

/* App frame */
.aac-app{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Sentence bar */
.sentence-bar{
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

.sentence-chip{
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .7rem;
	margin: .35rem .35rem 0 0;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: #ffffff;
	cursor: pointer;
	user-select: none;
}
.sentence-chip small{ color: var(--subtext); }

.sentence-action-btn{
	min-width: 46px;
	min-height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
}

/* Category strip */
.category-strip{
	background: var(--strip);
	color: var(--strip-text);
}

.strip-btn{
	background: var(--strip-btn);
	border: 1px solid rgba(255,255,255,.16);
	color: var(--strip-text);
	border-radius: 12px;
	padding: .55rem .75rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.strip-btn:hover{
	background: var(--strip-btn-hover);
}

.category-title{
	font-weight: 800;
	letter-spacing: .2px;
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Main */
.aac-main{
	flex: 1;
	padding: 12px;
	background-color: var(--main-bg) ;
}

/* Tile grid */
.tile-grid{
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 576px){
	.tile-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px){
	.tile-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1200px){
	.tile-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.aac-tile{
	background: #ffffff;
	border: 2px solid var(--tile-border);
	border-radius: var(--radius);
	box-shadow: var(--tile-shadow);
	padding: 10px;
	min-height: 128px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: center;
	user-select: none;
	transition: transform .06s ease, box-shadow .15s ease;
}

.aac-tile:active{
	transform: scale(.985);
}

/* Proloquo-ish: strong icon area, label at bottom */
.tile-icon{
	height: 70px;
	width: 70px;
	margin: 6px auto 8px;
	display: grid;
	place-items: center;
	font-size: 30px;
	background: #ffffff;
}

.tile-label{
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.1;
	margin-top: 2px;
}

.tile-sub{
	color: var(--subtext);
	font-size: .82rem;
	margin-top: 4px;
}

/* Touch-friendly */
button, .aac-tile, .strip-btn { touch-action: manipulation; }

/* Optional: tighter feel on tablets */
@media (min-width: 768px){
	.aac-main{ padding: 14px; }
	.aac-tile{ min-height: 138px; }
}


/* 1) Normalize buttons on iOS Safari */
.aac-tile{
	-webkit-appearance: none;
	appearance: none;
	border-radius: var(--radius);
}

/* 2) Make the tile center content as a single block */
.aac-tile{
	justify-content: center;   /* instead of space-between */
	align-items: center;
	gap: 10px;
}

/* 3) Ensure the inner block is centered too */
.aac-tile > div{
	width: 100%;
	text-align: center;
}

/* 4) iOS Safari can inherit weird line-height/baseline */
.tile-icon,
.tile-label,
.tile-sub{
	line-height: 1.1;
}

/* 5) Prevent emoji / inline glyph baseline weirdness */
.tile-icon{
	display: flex;
	align-items: center;
	justify-content: center;
}



.admin-gate.hidden {
	display: none;
}

.admin-gate {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.admin-gate-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
}

.admin-gate-panel {
	position: relative;
	background: #ffffff;
	max-width: 420px;
	margin: 20vh auto;
	padding: 20px;
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(0,0,0,.3);
}

.admin-gate-panel h3 {
	margin-top: 0;
}

.admin-gate-actions {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}

/* Folder tile wrapper */
.aac-tile.is-folder{
	position: relative;
	background: transparent;
	border: none;
	box-shadow: none;
	padding-top: 18px; /* space for tab */
}

/* Folder BODY */
.aac-tile.is-folder::after{
	content: "";
	position: absolute;

	inset: 15px 0 0 0;
	background: #ffffff;

	border: 2px solid var(--tile-border);
	border-radius: var(--radius);
	border-top-left-radius: 0;

	box-shadow: var(--tile-shadow);
	z-index: 0;
}

/* Folder TAB */
.aac-tile.is-folder::before{
	content: "";
	position: absolute;

	/* Slight overlap into the body prevents seams */
	top: 0;
	left: 0;

	width: 38%;
	max-width: 92px;
	height: 17px;

	background: #ffffff;
	border: 2px solid var(--tile-border);
	border-bottom: none;

	border-top-left-radius: 12px;
	border-top-right-radius: 10px;

	z-index: 2; /* above body */
}

/* Seam bridge: hides the body’s top border where the tab sits */
.aac-tile.is-folder .folder-bridge{
	position: absolute;
	top: 15px;          /* matches body inset top */
	left: 2px;          /* matches border thickness */
	width: calc(38% - 2px);
	max-width: 90px;
	height: 2px;        /* matches border thickness */
	background: #ffffff;
	z-index: 3;
	pointer-events: none;
	border-right: 2px solid var(--tile-border);
}

/* Ensure contents render above pseudo-elements */
.aac-tile.is-folder > *{
	position: relative;
	z-index: 5;
}

/* Sentence chips: match tile layout (icon above, text below) */
.sentence-chip{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;

	padding: .45rem .55rem;
	min-width: 64px;

	border-radius: 14px;
	border: 1px solid var(--border);
	background: #ffffff;

	user-select: none;
	cursor: pointer;
}

.sentence-icon{
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sentence-icon img{
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.sentence-icon.is-emoji{
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 1.7rem;
	line-height: 1;
}

.sentence-word{
	font-weight: 800;
	font-size: .95rem;
	line-height: 1.05;
}

.aac-main{
	position: relative;   /* needed so status can stick to bottom within main */
	padding-bottom: 52px; /* reserve space so it never overlaps tiles */
}

.aac-status{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;

	display: flex;
	justify-content: center;
	pointer-events: none; /* clicks pass through */
}

#aacStatusPill, /* (not required, but kept for compatibility if you used it) */
#aacStatus,
#statusText{
	/* nothing here; actual pill styling is below */
}

.aac-status > #statusText{
	pointer-events: none;
	display: inline-block;

	max-width: min(900px, calc(100vw - 24px));
	padding: 8px 14px;

	background: rgba(255,255,255,.85);
	border: 1px solid rgba(0,0,0,.20);
	border-radius: 999px;

	font-weight: 800;
	font-size: .95rem;
	text-align: center;

	box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

.tile-icon{
	height: 70px;
	width: 70px;
	margin: 6px auto 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
}

.tile-icon img{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain; /* default = symbols */
}

.aac-tile.is-emoji .tile-icon{
	width: 88px;
	height: 82px;
	margin-top: 2px;
	margin-bottom: 4px;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: clamp(3.4rem, 12vw, 4.35rem);
	line-height: .9;
}

/* Photo mode: fit the whole image without cropping */
.aac-tile.is-photo .tile-icon img{
	object-fit: contain;
	border-radius: 12px; /* optional, looks nicer for photos */
}

/* Optional: give photo tiles a subtle frame */
.aac-tile.is-photo .tile-icon{
	background: #f3f4f6;
	border-radius: 12px;
	overflow: hidden;
}

#tileGrid.no-subtitles .tile-sub {
	display: none;
}