/* =========================================================================
   Article page — single post only.

   Why a separate file and not main.css: every rule here applies to one
   template. main.css ships on every request, so parking single-post polish
   in it taxes the homepage, the category fronts and the search page for
   nothing. functions.php enqueues this only on is_singular( 'post' ).

   It loads AFTER main.css, so it inherits every token and only overrides
   what the article page specifically needs. No token is redefined here —
   the palette lives in main.css :root and stays the single source.
   ========================================================================= */

/* ---- reading controls: collapsed disclosure ------------------------------
   Measured before, at 1366x768: between the end of the headline (y=486) and
   the first word of the story (y=655) there were 169px, of which 117px —
   69% — was chrome: a 55px byline plus a 62px full-width pill bar carrying
   five buttons. A settings widget was outweighing the article.

   The bar is now one button inside the byline row, which already existed
   and already had the height, so the control costs no vertical band at all.
   The panel is absolutely positioned so opening it does not reflow the text
   underneath.

   ABSOLUTE, not a flex child, and that part was measured too: in normal
   flow the 44px control pushed the byline past its 880px and it wrapped to
   a second line — 55px became 108px, so deleting a 62px bar only returned
   29px. Out of the flow it consumes no row width, the byline stays on one
   line, and the whole 62px comes back. The byline reserves the space with
   padding instead, so a long byline can never run underneath it.        */

.tw-reading {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	display: inline-flex;
}

.tw-reading__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The full 44px WCAG target size. This was going to be 36 to stay quiet
	   in a 55px row, but once the control left the flex flow it costs no
	   row height at all, so there is nothing to buy by going under target.
	   min-* as well as the sizes, because main.css sets a button minimum
	   with a higher-specificity selector and won the first attempt. */
	inline-size: 44px;
	block-size: 44px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: var(--tw-hairline);
	border-radius: 50%;
	background: var(--tw-card);
	color: var(--tw-body);
	font-family: var(--tw-urdu);
	/* A single centred glyph with no line beneath it to collide with, so
	   the 2.5em Nastaliq leading rule does not apply here — the circle is
	   sized, not the line box. Anywhere with two lines of Urdu still needs
	   the full 2.5. */
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.tw-reading__toggle-mark {
	/* The glyph sits high in its em box; nudge it onto the optical centre
	   of the circle rather than the metric one. */
	transform: translateY(-.06em);
}

.tw-reading__toggle:hover,
.tw-reading__toggle:focus-visible {
	background: var(--tw-green-pale);
	border-color: var(--tw-green);
}

.tw-reading__toggle[aria-expanded="true"] {
	background: var(--tw-green);
	border-color: var(--tw-green);
	color: var(--tw-on-green);
}

/* The panel opens INTO the article, not out of it.

   The control sits at the byline inline-END, which in RTL is the LEFT edge
   of the article card. Anchoring the panel with inset-inline-start pinned
   its right edge to the control and grew it leftward: measured at x=25,
   hanging 116px off the card and floating on the page background. Pinning
   inset-inline-end instead grows it rightward, across the article it
   belongs to. No breakpoint needed — the control is at the same end of the
   row at every width, so this is correct everywhere. */
.tw-reading__panel {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 20;
	display: grid;
	gap: 6px 10px;
	grid-template-columns: auto auto;
	align-items: center;
	inline-size: max-content;
	max-inline-size: calc(100vw - 32px);
	padding: 12px 14px;
	border: var(--tw-hairline);
	border-radius: var(--tw-radius);
	background: var(--tw-card);
	box-shadow: 0 8px 24px rgba(16, 23, 28, .14);
}

.tw-reading__panel[hidden] { display: none; }

.tw-reading__label {
	color: var(--tw-muted);
	font-family: var(--tw-urdu);
	font-size: 14px;
	/* Nastaliq needs its own 2.5em line box. These are single lines, but
	   under-leading still clips the ascenders inside a padded panel. */
	line-height: 2.5;
	white-space: nowrap;
}

.tw-reading__group {
	display: flex;
	gap: 6px;
}

/* ---- the byline row ------------------------------------------------------ */

.tw-article__byline {
	position: relative;       /* anchor for the reading control */
	padding-inline-end: 56px; /* 44 control + 12 clear, so text cannot run under it */
	row-gap: 6px;
}

/* ---- share row -----------------------------------------------------------
   Sat directly under the body with no separation, so it read as a final
   paragraph rather than as a set of controls. A rule and a little air say
   "the article ended here" without needing a heading. */
.tw-article__share {
	margin-block-start: 28px;
	padding-block-start: 18px;
	border-block-start: var(--tw-hairline);
}

/* ---- dark and sepia reading modes ---------------------------------------
   The three modes repaint .tw-article via [data-tw-mode]. The disclosure
   lives inside it, so it has to follow, or the control stays white-on-white
   in dark mode — the same class of bug an earlier audit found on the front
   end, where 11 controls measured 1.08:1 because a token meant as a GROUND
   was reused as ink. These read the mode tokens rather than hard-coding, so
   a change to a mode palette reaches them. */

[data-tw-mode="dark"] .tw-reading__toggle,
[data-tw-mode="dark"] .tw-reading__panel,
[data-tw-mode="sepia"] .tw-reading__toggle,
[data-tw-mode="sepia"] .tw-reading__panel {
	background: var(--tw-card);
	color: var(--tw-body);
	border-color: var(--tw-rule);
}

[data-tw-mode="dark"] .tw-reading__panel {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* No narrow-screen override for the panel anchor: inset-inline-end opens it
   inward at every width, which is why the breakpoint that used to be here
   was removed rather than adjusted. */