/**
 * CounterWords — responsive rules.
 *
 * ============================================================================
 * TWO DIRECTIONS, ON PURPOSE
 * ============================================================================
 *
 * The TOOL (editor.css) is written mobile-first, so its rules here use
 * min-width and add capability as the screen grows.
 *
 * The BLOG layout (main.css) is written desktop-first, so its rules here use
 * max-width and collapse as the screen shrinks.
 *
 * Each component is consistent within itself. Sections below are labelled so
 * it stays obvious which direction applies.
 *
 * Tool breakpoints (min-width):
 *   560   full tab labels, 3-column stat grid
 *   768   tablet: full toolbar, no More sheet, centered dialogs
 *   1024  desktop: two-column workspace, sticky analysis, no live bar
 *
 * Blog breakpoints (max-width): 1024, 900, 768, 600, 480
 * ============================================================================
 */

/* ==========================================================================
 * TOOL — mobile-first (min-width)
 * ========================================================================== */

/* -------------------------------------------------------------------------
 * 560px — small tablets and large phones in landscape
 * ---------------------------------------------------------------------- */
@media (min-width: 560px) {
	/* Enough width for the real tab names. */
	.cw-tab-text { display: inline; }
	.cw-tab-text-short { display: none; }

	.cw-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.cw-panel { padding: 20px; }

	.cw-primary-value { font-size: 2.4rem; }

	/* Room to put the label beside the bar again. */
	.cw-bar-row {
		grid-template-columns: minmax(110px, 150px) 1fr 40px;
		grid-template-areas: "label track value";
		gap: 10px;
	}

	.cw-livebar-value { font-size: 1.2rem; }
	.cw-livebar-label { font-size: 0.72rem; }
}

/* -------------------------------------------------------------------------
 * 768px — tablet
 *
 * There is now width for all eight toolbar actions side by side, so the More
 * sheet is retired and buttons return to the familiar icon-beside-label form.
 * The layout is still a single column, so the live bar stays.
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
	.cw-toolbar {
		flex-wrap: wrap;
		gap: 4px;
		padding: 10px;
	}

	.cw-tool-btn {
		flex: 0 0 auto;
		flex-direction: row;
		gap: 6px;
		min-height: var(--cw-tap);
		padding: 8px 12px;
		font-size: 0.85rem;
	}

	/* Secondary actions come back inline; the More trigger is not needed. */
	.cw-tool-btn--secondary { display: inline-flex; }
	.cw-tool-btn--more { display: none; }

	/* Settings sits apart from the content actions. */
	.cw-tool-btn--settings { margin-left: auto; }

	.cw-editor,
	.cw-highlight-backdrop {
		padding: 20px;
		font-size: 1.05rem;
	}
	.cw-editor { min-height: clamp(320px, 45vh, 460px); }

	.cw-privacy-notice,
	.cw-status { padding-inline: 20px; }

	.cw-workspace { gap: 20px; }

	.cw-rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cw-subtabs .cw-subtab { flex: 0 0 auto; }

	/*
	 * Dialogs become centered modals. A bottom sheet on a large screen wastes
	 * the width and puts the close button far from the pointer.
	 */
	.cw-sheet {
		align-items: center;
		padding: 24px;
	}
	.cw-sheet-panel {
		width: auto;
		max-width: 480px;
		max-height: 85vh;
		border-radius: var(--cw-radius);
		padding-bottom: 0;
		animation: cw-fade-in 0.18s ease;
	}
	.cw-sheet-grabber { display: none; }

	.cw-livebar { padding: 8px 12px; }
	.cw-livebar-value { font-size: 1.3rem; }
}

/* -------------------------------------------------------------------------
 * 1024px - desktop
 *
 * WHY THESE THREE, AND WHY NO SIDE-BY-SIDE
 *
 * The earlier set (Studio / Split / Compact) all put the analysis in a column
 * beside the editor. Every one of them behaved badly in practice, so they have
 * been removed rather than patched again.
 *
 * All three replacements are built on the one arrangement that proved solid:
 * a full-width editor with the analysis underneath. They differ in how the
 * analysis below is organised, not in whether the editor is squeezed.
 *
 *   Focus     - analysis stacked in one column. Calmest, best for long text.
 *   Dashboard - metrics spread across the full width as a band of tiles, then
 *               the tabbed analysis. Most numbers visible at a glance.
 *   Two column- metrics on the left, tabbed analysis on the right, both below
 *               the editor. Uses the width without narrowing the editor.
 *
 * Because the analysis now always sits below the editor, the live count bar is
 * kept on desktop and pinned under the header, so the running totals stay
 * visible while typing. That was the only real advantage the side-by-side
 * layouts had, and this delivers it without touching the editor's width.
 * ---------------------------------------------------------------------- */
@media (min-width: 1024px) {

	/* Shared foundation: one column, three stacked regions. */
	.cw-workspace {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}
	.cw-editor-col { grid-column: 1; grid-row: 1; min-width: 0; }
	.cw-stats-col  { grid-column: 1; grid-row: 2; min-width: 0; }
	.cw-analysis   { grid-column: 1; grid-row: 3; min-width: 0; }

	/* Each region owns its stacking context, so none can paint over another. */
	.cw-editor-col,
	.cw-stats-col,
	.cw-analysis {
		position: relative;
		z-index: 0;
	}

	.cw-editor { min-height: var(--cw-desktop-editor-height, 460px); }

	/*
	 * The live count bar stays on desktop now. With the analysis below the
	 * editor, this is what keeps the totals on screen while writing.
	 */
	.cw-livebar {
		display: flex;
		padding: 10px 16px;
	}
	.cw-livebar-value { font-size: 1.45rem; }
	.cw-livebar-label { font-size: 0.78rem; }
	.cw-stats-sticky .cw-livebar { position: sticky; top: var(--cw-sticky-top); }
	body:not(.cw-stats-sticky) .cw-livebar { position: static; }

	/* Wide panels can afford real columns for the rules and bar charts. */
	.cw-rules-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cw-bar-row { grid-template-columns: minmax(150px, 220px) 1fr 56px; }

	/*
	 * Tabs have the full page width here, so they never need to wrap or
	 * scroll. Sized to content and left aligned.
	 */
	.cw-tabs {
		flex-wrap: wrap;
		overflow-x: hidden;
		background: none;
	}
	.cw-tab { flex: 0 1 auto; justify-content: center; }

	/* --------------------------------------------------------------- *
	 * FOCUS - analysis stacked in a single column.
	 * --------------------------------------------------------------- */
	.cw-layout-focus .cw-metrics .cw-stat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* --------------------------------------------------------------- *
	 * DASHBOARD - every headline number visible at once.
	 *
	 * The primary card and the stat tiles sit on one row across the full
	 * width, so nothing is behind a tab and nothing needs scrolling to reach.
	 * --------------------------------------------------------------- */
	.cw-layout-dashboard .cw-stats-col {
		display: grid;
		grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr);
		gap: 16px;
		align-items: start;
	}
	.cw-layout-dashboard .cw-primary-stat {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 4px;
		min-height: 100%;
	}
	.cw-layout-dashboard .cw-primary-value { font-size: 3rem; }
	.cw-layout-dashboard .cw-metrics {
		padding: 18px;
	}
	.cw-layout-dashboard .cw-metrics .cw-stat-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	/* Averages and Longest read better side by side at this width. */
	.cw-layout-dashboard .cw-metrics .cw-stat-list {
		columns: 2;
		column-gap: 28px;
	}
	.cw-layout-dashboard .cw-metrics .cw-stat-list li {
		break-inside: avoid;
	}
	.cw-layout-dashboard .cw-metrics .cw-stat-list--stacked { columns: 3; }

	/* --------------------------------------------------------------- *
	 * TWO COLUMN - metrics left, tabbed analysis right, both under the editor.
	 *
	 * Uses the horizontal space that Focus leaves empty, without ever making
	 * the editor narrower.
	 * --------------------------------------------------------------- */
	.cw-layout-twocol .cw-workspace {
		grid-template-columns: minmax(300px, 1fr) minmax(0, 1.35fr);
	}
	.cw-layout-twocol .cw-editor-col { grid-column: 1 / -1; grid-row: 1; }
	.cw-layout-twocol .cw-stats-col  { grid-column: 1; grid-row: 2; }
	.cw-layout-twocol .cw-analysis   { grid-column: 2; grid-row: 2; }

	.cw-layout-twocol .cw-metrics .cw-stat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cw-layout-twocol .cw-rules-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cw-layout-twocol .cw-bar-row {
		grid-template-columns: minmax(120px, 170px) 1fr 48px;
	}

	.cw-app.cw-fullscreen .cw-workspace {
		max-width: 1400px;
		margin: 0 auto;
	}
	.cw-app.cw-fullscreen .cw-editor { min-height: calc(100dvh - 220px); }
	.cw-app.cw-fullscreen .cw-stats-col {
		position: static;
		max-height: calc(100dvh - 32px);
	}
}

/* -------------------------------------------------------------------------
 * Short viewports (phone landscape, split screen)
 *
 * Height is the scarce axis here, not width. Give the editor less of it so
 * the live bar and at least part of the panel remain reachable.
 * ---------------------------------------------------------------------- */
@media (max-height: 520px) and (min-width: 480px) {
	.cw-editor { min-height: 160px; }
	.cw-app.cw-fullscreen .cw-editor { min-height: 40dvh; }
	.cw-sheet-panel { max-height: 92dvh; }
}

/* ==========================================================================
 * BLOG — desktop-first (max-width)
 * ========================================================================== */

/* Large tablets / small desktops */
@media (max-width: 1024px) {
	.sidebar.is-sticky .sidebar-inner { position: static; }
}

/* Stack the blog layout */
@media (max-width: 900px) {
	.site-main { grid-template-columns: 1fr; }
	.sidebar-left .content-area { order: 0; }
	.cw-card-grid { grid-template-columns: repeat(2, 1fr); }
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-widgets { grid-template-columns: repeat(2, 1fr); }
	.post-card { grid-template-columns: 220px 1fr; }
}

/* -------------------------------------------------------------------------
 * Tablet and mobile header
 *
 * Everything except the logo and the toggle folds into one panel: the menu,
 * the account links, search and dark mode. Previously only the menu collapsed,
 * so on a phone the account button and the two icon buttons spilled across the
 * header next to the toggle.
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.header-inner {
		flex-wrap: wrap;
		gap: 12px;
		position: relative;
	}
	.site-branding { margin-right: auto; min-width: 0; }

	.menu-toggle { display: inline-flex; }

	/* The panel itself: one dropdown holding every header control. */
	.header-collapse {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cw-color-card);
		border-top: 1px solid var(--cw-color-border);
		border-bottom: 1px solid var(--cw-color-border);
		box-shadow: var(--cw-shadow-lg);
		padding: 10px;
		max-height: calc(100vh - var(--cw-header-height) - 20px);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 550;
	}
	.header-collapse.is-open { display: flex; }

	.main-navigation { margin-left: 0; width: 100%; }
	.main-navigation .menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Menu rows are a primary target; give them a full 48px. */
	.main-navigation .menu a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 14px;
		border-radius: var(--cw-radius-sm);
	}

	.main-navigation .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding-left: 16px; display: none;
		min-width: 0; width: 100%;
	}
	.main-navigation .submenu-open > .sub-menu { display: block; }
	.main-navigation .menu-item-has-children { position: relative; }

	.submenu-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		width: var(--cw-tap); height: var(--cw-tap);
		position: absolute; right: 4px; top: 2px;
		background: none; border: 0; cursor: pointer;
		color: var(--cw-color-secondary);
	}
	.submenu-toggle span {
		width: 8px; height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	/* Actions stack under the menu, separated by a rule. */
	.header-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		margin-top: 10px;
		padding-top: 12px;
		border-top: 1px solid var(--cw-color-border);
	}
	.header-account {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
	}
	.header-account-link {
		justify-content: center;
		min-height: 48px;
	}
	.header-account-link--ghost { border-color: var(--cw-color-border); }

	/* Inside the mobile panel the extension link is a full-width row like the
	   rest, and it leads, because it is the only one that is an offer. */
	.header-ext-link {
		order: -1;
		justify-content: center;
		min-height: 48px;
		border-color: var(--cw-color-border);
	}

	/* Icon buttons become labelled rows; an icon alone in a menu is a puzzle. */
	.header-icons {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}
	.header-search-toggle,
	.theme-toggle {
		width: 100%;
		justify-content: flex-start;
		gap: 12px;
		min-height: 48px;
		padding: 12px 14px;
	}
	.header-icon-label {
		display: inline;
		font-size: 0.95rem;
		font-weight: 500;
	}

	.post-card { grid-template-columns: 1fr; }
	.post-card .post-thumbnail img { aspect-ratio: 16/9; }
	.post-navigation { grid-template-columns: 1fr; }
	.post-navigation .nav-next { text-align: left; }

	.footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	.cw-container { padding-inline: 16px; }
	.cw-card-grid { grid-template-columns: 1fr; }
	.related-grid { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; }
	.cw-feature-grid { grid-template-columns: 1fr; }
	.author-box { flex-direction: column; text-align: center; align-items: center; }

	/*
	 * Mobile sticky ad.
	 *
	 * The body reserves matching space, otherwise the bar permanently covers
	 * the last ~60px of every page. Safe-area inset keeps it clear of the
	 * home indicator.
	 */
	.cw-ad-sticky-mobile {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 900;
		margin: 0;
		padding: 6px 8px;
		padding-bottom: calc(6px + var(--cw-safe-bottom));
		background: var(--cw-color-card);
		border-top: 1px solid var(--cw-color-border);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
	}
	.cw-ad-sticky-mobile .cw-ad-label { display: none; }
	body:has(.cw-ad-sticky-mobile) {
		padding-bottom: calc(64px + var(--cw-safe-bottom));
	}
}

@media (max-width: 480px) {
	.single-post, .single-page { padding: 18px; }
	.author-header-inner { flex-direction: column; text-align: center; }
	.cw-tool-header { text-align: left; }
}