/* Slide-in mobile drawer — section 3 of the mobile build.
 *
 * Values from docs/aperture-preview/preview-mobile-app.html (`.drawer`,
 * `.panel`, `.dhead`, `.dsearch`, `.dtel`, `.dnav`, `.dsub`, `.dsoc`).
 *
 * The prototype's drawer is `position:absolute` inside a phone frame; here it
 * is `position:fixed` because the frame does not exist and the drawer must
 * cover the viewport, not the document.
 *
 * Breakpoint is 900px, matching the width at which .tsp-hd__toggle stops being
 * displayed — the drawer must exist wherever the hamburger does.
 */

.tsp-drawer{
	position:fixed;
	inset:0;
	z-index:1300; /* above the bottom tab bar (1200) */
	display:block;
}
.tsp-drawer[hidden]{display:none}

.tsp-drawer__backdrop{
	position:absolute;
	inset:0;
	background:rgba(10,11,15,.5);
	opacity:0;
	transition:opacity .22s ease;
}
.tsp-drawer.is-open .tsp-drawer__backdrop{opacity:1}

.tsp-drawer__panel{
	position:absolute;
	top:0;bottom:0;left:0;
	width:86%;
	max-width:360px;
	background:#fff;
	display:flex;
	flex-direction:column;
	box-shadow:8px 0 40px rgba(0,0,0,.3);
	transform:translateX(-100%);
	transition:transform .22s ease;
}
.tsp-drawer.is-open .tsp-drawer__panel{transform:translateX(0)}

/* A reader who has asked for less motion still needs the drawer — the panel
   appears without travelling. */
@media (prefers-reduced-motion:reduce){
	.tsp-drawer__panel,.tsp-drawer__backdrop{transition:none}
}

.tsp-drawer__head{
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;
	padding:16px 16px 12px;
	border-bottom:1px solid var(--tsp-hairline,#E8E5DE);
}
.tsp-drawer__brand{
	font-family:var(--tsp-font-ui,'Poppins',system-ui,sans-serif);
	font-weight:700;font-size:19px;line-height:1.15;color:var(--tsp-ink,#16181F);
	min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tsp-drawer__close{
	flex:0 0 auto;
	width:44px;height:44px;
	border:0;background:transparent;border-radius:12px;
	display:flex;align-items:center;justify-content:center;
	color:var(--tsp-ink,#16181F);cursor:pointer;padding:0;
}
.tsp-drawer__close svg{width:23px;height:23px}
.tsp-drawer__close:active{background:var(--tsp-wash,#F6F4EF)}

.tsp-drawer__body{
	flex:1 1 auto;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px));
}

.tsp-drawer__search{
	display:flex;align-items:center;gap:9px;
	background:var(--tsp-wash,#F6F4EF);
	border:1px solid var(--tsp-hairline,#E8E5DE);
	border-radius:12px;
	padding:0 13px;
	height:46px;
	margin-bottom:14px;
	color:var(--tsp-muted,#676E7B);
}
.tsp-drawer__search svg{width:18px;height:18px;flex:0 0 auto}
/* `.tsp-drawer` ancestor included on purpose: Blocksy's blanket
   `input:is([type="search"],…)` rule computes to (0,1,1) and is enqueued after
   this file, so a single class would lose the tie on source order — the same
   trap documented for the header's search field. */
.tsp-drawer .tsp-drawer__search input{
	flex:1 1 0%;min-width:0;
	height:auto;padding:0;margin:0;
	border:0;border-radius:0;
	background:transparent;box-shadow:none;
	-webkit-appearance:none;appearance:none;
	font-family:var(--tsp-font-ui,'Poppins',system-ui,sans-serif);
	/* 16px or iOS zooms the page when this takes focus. */
	font-size:16px;line-height:1.4;
	color:var(--tsp-ink,#16181F);
}
.tsp-drawer .tsp-drawer__search input:focus{outline:none;box-shadow:none;border:0;background:transparent}
.tsp-drawer__search:focus-within{border-color:var(--tsp-muted,#676E7B)}

.tsp-drawer__telugu{
	display:flex;align-items:center;justify-content:center;gap:8px;
	min-height:48px;
	background:var(--tsp-red,#C8102E);
	color:#fff;
	border-radius:12px;
	padding:12px 14px;
	font-family:'Noto Sans Telugu',var(--tsp-font-ui,'Poppins'),system-ui,sans-serif;
	font-weight:600;font-size:15px;line-height:1.35;
	text-align:center;text-decoration:none;
	margin-bottom:6px;
}
.tsp-drawer__telugu:hover,.tsp-drawer__telugu:focus-visible{background:#9C0F27;color:#fff}

.tsp-drawer__nav{display:block;margin-top:10px}
.tsp-drawer__link{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	/* 14px vertical on a 20px line clears the 44px touch floor. */
	padding:14px 4px;
	min-height:48px;
	border-top:1px solid var(--tsp-hairline,#E8E5DE);
	font-family:var(--tsp-font-ui,'Poppins',system-ui,sans-serif);
	font-size:15px;font-weight:600;line-height:1.25;
	color:var(--tsp-ink,#16181F);
	text-decoration:none;
}
.tsp-drawer__nav .tsp-drawer__link:first-child{border-top:0}
.tsp-drawer__linkin{display:flex;align-items:center;min-width:0}
.tsp-drawer__dot{
	display:inline-block;flex:0 0 auto;
	width:8px;height:8px;border-radius:50%;
	margin-right:11px;
}
.tsp-drawer__chev{color:var(--tsp-muted,#676E7B);font-size:20px;line-height:1;flex:0 0 auto}
.tsp-drawer__link.is-current{color:var(--tsp-red,#C8102E)}
.tsp-drawer__link:active{background:var(--tsp-wash,#F6F4EF)}

/* MORE labels the sections filed under it; it is not a destination, so the
   drawer renders it as a heading instead of a tappable row that goes nowhere.
   Set in the type scale of a label, not a link, so it never reads as one. */
.tsp-drawer__group{
	margin:16px 0 0;
	padding:14px 4px 4px;
	border-top:1px solid var(--tsp-hairline,#E8E5DE);
	font-family:var(--tsp-font-ui,'Poppins',system-ui,sans-serif);
	font-size:11.5px;font-weight:700;line-height:1.2;
	letter-spacing:.08em;text-transform:uppercase;
	color:var(--tsp-muted,#676E7B);
}
/* The heading already draws the dividing rule, so the first row under it must
   not draw a second one 4px below. */
.tsp-drawer__group + .tsp-drawer__link{border-top:0}
/* Indented just enough to read as "filed under", while the 48px touch target
   and the chevron stay exactly as they are on a top-level row. */
.tsp-drawer__link--child{padding-left:15px}
/* Only sections in the prototype's palette carry a dot, and inventing colours
   for the rest is not on the table — so the gutter is reserved for every row in
   the group and the dot is pulled into it. Without this, Business (which has a
   colour) sits 19px right of Technology and Lifestyle (which do not) and the
   group reads as three misaligned items rather than one list. */
.tsp-drawer__link--child .tsp-drawer__linkin{padding-left:19px}
.tsp-drawer__link--child .tsp-drawer__dot{margin-left:-19px}

.tsp-drawer__sub{
	display:flex;align-items:center;justify-content:center;
	min-height:48px;
	background:var(--tsp-ink,#16181F);
	color:#fff;
	text-align:center;border-radius:12px;
	padding:14px;
	font-family:var(--tsp-font-ui,'Poppins',system-ui,sans-serif);
	font-weight:700;font-size:15px;
	text-decoration:none;
	margin-top:16px;
}
.tsp-drawer__sub:hover,.tsp-drawer__sub:focus-visible{background:#000;color:#fff}

.tsp-drawer__social{margin-top:18px}
.tsp-drawer__social .tsp-hd__socials{display:flex;gap:10px;justify-content:center}
/* 44px targets here, unlike the utility bar where the 36px row had no room. */
.tsp-drawer__social .tsp-hd__social{
	width:44px;height:44px;
	display:flex;align-items:center;justify-content:center;
	border-radius:50%;
	color:var(--tsp-muted,#676E7B);
}
.tsp-drawer__social .tsp-hd__social svg{width:21px;height:21px}
.tsp-drawer__social .tsp-hd__social:active{background:var(--tsp-wash,#F6F4EF)}
/* A network with no URL configured renders as a placeholder span in the header;
   in the drawer it is simply not shown rather than drawn as a dead icon. */
.tsp-drawer__social .tsp-hd__social.is-placeholder{display:none}

.tsp-drawer__close:focus-visible,
.tsp-drawer__link:focus-visible,
.tsp-drawer__telugu:focus-visible,
.tsp-drawer__sub:focus-visible{
	outline:2px solid var(--tsp-ink,#16181f);
	outline-offset:-3px;
	border-radius:8px;
}

/* Scroll lock. `html body` beats Blocksy's blanket body reset without
   !important — the same tie this build already hit with the tab bar's
   padding-bottom. */
html body.tsp-drawer-open{overflow:hidden}

/* Above the hamburger's breakpoint the drawer must never appear, even if the
   open class is somehow left behind by a resize. */
@media (min-width:901px){
	.tsp-drawer{display:none}
	html body.tsp-drawer-open{overflow:visible}
}