/**
 * Studio (editor) chrome styles.
 *
 * The Studio is a `client:only` React island, so Astro's component-scoped styles
 * never reach its DOM — these rules must be global. Shared by the real editor
 * page (`src/pages/editor.astro`).
 *
 * The signed-in bars (mode / publish) and the editor surface share one centred
 * content column so they line up with each other.
 */

:root {
	/* Content column shared by the studio bars and the editor surface. */
	--studio-measure: 60rem;
	--studio-gutter: 1.25rem;
}

.studio__loading {
	max-width: var(--studio-measure);
	margin: 0 auto;
	padding: 2rem var(--studio-gutter);
	color: var(--muted);
}

/* Login (signed out). The `.login__*` form rules are shared with the dashboard
   and live in `login.css` (imported by editor.astro alongside this file). */
.studio__login {
	max-width: 30rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}
.studio__error {
	color: var(--ember);
	font-size: 0.9rem;
}
/* Same alignment when the error sits on its own above the editor column (the
   signed-in `?edit=` load-failure notice) rather than inside the login card. */
.studio__error--banner {
	max-width: var(--studio-measure);
	margin: 0.5rem auto 0;
	padding: 0 var(--studio-gutter);
}

/* Publish panel */
.publish {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--studio-measure);
	margin: 0 auto;
	padding: 0.75rem var(--studio-gutter);
}
.publish__target {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: var(--muted);
}
.publish__target--fixed strong {
	color: var(--ink);
}
.publish__select {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--paper-raised);
	font: inherit;
	font-size: 0.9rem;
}
.publish__button {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 8px;
	background: var(--sun);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.publish__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.publish__cancel {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--line-strong);
	background: var(--paper-raised);
	border-radius: 8px;
	font: inherit;
	cursor: pointer;
}
.publish__confirm {
	flex: 1 1 100%;
	background: var(--sun-tint);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	padding: 0.85rem 1rem;
}
.publish__warning {
	margin: 0 0 0.75rem;
}
.publish__actions {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.publish__status,
.publish__error {
	flex: 1 1 100%;
	font-size: 0.9rem;
}
.publish__error {
	color: var(--ember);
}
.publish__count {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
}
.publish__count--over {
	/* Fixed red, NOT a theme token: --ember is recolored per publication
	   (themes.ts), which could leave this over-limit warning unreadable. */
	color: #b00020;
	font-weight: 600;
}

/* Mode bar */
.studio__mode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--studio-measure);
	margin: 0 auto;
	padding: 0.5rem var(--studio-gutter);
	font-size: 0.85rem;
	color: var(--muted);
}
.studio__mode button {
	border: 1px solid var(--line-strong);
	background: var(--paper-raised);
	border-radius: 6px;
	padding: 0.25rem 0.7rem;
	font: inherit;
	cursor: pointer;
}

/* Borderless article title, sitting above the framed editor canvas — echoes the
   block-editor post title (large display heading, no box). A `<textarea>` (not a
   single-line input) so long titles wrap and the field auto-grows to fit instead
   of clipping on one line — it stays single-line semantically (Enter is blocked
   in the markup). Auto-grows via JS, like the lede; resize/overflow off. */
.studio__title {
	display: block;
	max-width: var(--studio-measure);
	margin: 1.25rem auto 0;
	padding: 0 var(--studio-gutter);
	width: 100%;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.15;
	resize: none;
	overflow: hidden;
	overflow-wrap: break-word;
}
.studio__title::placeholder {
	color: var(--muted);
	opacity: 0.6;
}
.studio__title:focus {
	outline: none;
}
/* Italic lede under the title — echoes the title (display face, borderless) but quieter:
   smaller, muted, italic. Auto-grows via JS (resize/overflow off). */
.studio__lede {
	display: block;
	max-width: var(--studio-measure);
	margin: 0.5rem auto 0;
	padding: 0 var(--studio-gutter);
	width: 100%;
	box-sizing: border-box;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-style: italic;
	line-height: 1.4;
	resize: none;
	overflow: hidden;
}
.studio__lede::placeholder {
	color: var(--muted);
	opacity: 0.6;
}
.studio__lede:focus {
	outline: none;
}
.studio__lede-hint {
	max-width: var(--studio-measure);
	margin: 0.25rem auto 0;
	padding: 0 var(--studio-gutter);
	font-size: 0.8rem;
	color: var(--muted);
}
/* Tighten the gap between the lede (or its hint) and the editor surface below. */
.studio__lede + .skypress-editor,
.studio__lede-hint + .skypress-editor {
	margin-top: 0.75rem;
}

/* Editor surface. We compose @wordpress/block-editor directly (Decision 0021),
   so these rules target our own chrome (`.skypress-editor__*`) plus the standard
   `.block-editor-*`/`.components-*` classes — not isolated-block-editor's old
   `.iso-*` DOM. The bundled block CSS hard-codes light surfaces and near-black
   ink that ignore `prefers-color-scheme`; we frame the editor as a contained
   writing panel and drive every colour from the design tokens so it follows
   light/dark like the rest of the app. */
.skypress-editor {
	max-width: var(--studio-measure);
	margin: 1.5rem auto 3rem;
	background-color: var(--paper-raised);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	color: var(--ink);
	box-shadow: var(--shadow);
}
/* Toolbar (our chrome): the block inserter on the left; undo/redo and the
   block-settings cog pushed to the right by the spacer. Block-editor SVG icons
   use `fill: currentColor`, so tinting the buttons to the ink token themes them
   too — including the cog and inserter, which sit outside the floating toolbar. */
.skypress-editor__toolbar {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--line);
}
.skypress-editor__toolbar-spacer {
	flex: 1 1 auto;
}
.skypress-editor__toolbar .components-button {
	color: var(--ink);
}
/* The writing canvas. `min-height` keeps the panel tall enough to invite writing
   even when empty; the gutter matches the title/lede column above. */
.skypress-editor__body {
	min-height: 60vh;
	padding: 1rem var(--studio-gutter) 2rem;
}

/* The floating block toolbar (shown on selection) and toolbar popovers (link
   editing, the "more" format menu) portal into the `Popover.Slot` inside
   `.skypress-editor`. Both re-skin from the tokens here — without this the
   toolbar reads as a light slab in dark mode. */
.skypress-editor .components-accessible-toolbar,
.skypress-editor .components-toolbar,
.skypress-editor .components-toolbar-group {
	background-color: var(--paper-raised);
	border-color: var(--line-strong);
	color: var(--ink);
}
.skypress-editor .components-toolbar-group {
	border-right-color: var(--line);
}
.skypress-editor .components-accessible-toolbar .components-button {
	color: var(--ink);
}
/* Block-settings inspector, opened as a popover by the cog. The bare
   `BlockInspector` has no width of its own, so give it the standard editor
   sidebar width. The class is unique to this editor, so the rule is unscoped. */
.skypress-editor__inspector .components-popover__content {
	width: 280px;
	max-width: calc( 100vw - 2rem );
}

.skypress-editor__status {
	margin: 0.75rem 0 0;
	color: var(--muted);
	font-size: 0.85rem;
}

/* Shown by EditorErrorBoundary if the editor throws at render — replaces the
   editor entirely, so it's framed as a standalone notice in the content column. */
.skypress-editor__error {
	max-width: var(--studio-measure);
	margin: 1.5rem auto 3rem;
	padding: 1rem var(--studio-gutter);
	color: var(--ink);
}
/* Idle (no save feedback yet): collapse the live region out of view without
   leaving an empty gap. We can't use `display: none` here — that removes the
   element from the accessibility tree, and an `aria-live` region must stay
   rendered before its content changes for the first update to be announced.
   Clip it to zero size instead so it remains in the tree but takes no space. */
.skypress-editor__status:empty {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cover image picker — a labeled strip below the editor, in the shared content
   column. Distinct from the editor canvas; the chosen image is the article's
   explicit cover (else the first body image is used). */
.studio__cover {
	max-width: var(--studio-measure);
	margin: 0 auto 3rem;
	padding: 0 var(--studio-gutter);
}
.studio__cover-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ink);
}
.studio__cover-empty {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: flex-start;
}
.studio__cover-hint {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
}
.studio__cover-preview {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-items: flex-start;
}
.studio__cover-image {
	max-width: 100%;
	max-height: 18rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
}
.studio__cover-actions {
	display: flex;
	gap: 0.6rem;
}
.studio__cover-error {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	color: var(--ember);
}

/* Publish success pill — sunrise callback, rises into view (Studio-owned).
   Deliberately uses a fixed warm palette, NOT the --sun* or --ink tokens: those
   flip with the colour scheme, and no single text colour stays legible over a
   gradient whose --sun-tint end goes near-black in dark mode. A constant light
   sunrise gradient + dark ink keeps the look and clears WCAG AA in both schemes
   (≈7.5:1 over the gold end, ≈12:1 over the peach). */
.studio__published {
	width: fit-content;
	max-width: var(--studio-measure);
	margin: 0.35rem auto 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: linear-gradient(100deg, #fde4c4, #f4a72c);
	color: #3a2200;
	font-size: 0.9rem;
	font-weight: 600;
	box-shadow: 0 1px 8px rgba(232, 146, 12, 0.3);
	animation: studio-published-rise 400ms ease-out;
}

.studio__published-link {
	color: #3a2200;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

@keyframes studio-published-rise {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.studio__published {
		animation: none;
	}
}

/* @-mention autocomplete row (portaled into the editor's completer popover). */
.skypress-mention-option {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.skypress-mention-option__avatar {
	border-radius: 50%;
}
.skypress-mention-option__handle {
	color: var(--muted);
}

/* Rendered mention link in the article — inherits link styling; hook for theming. */
.skypress-mention {
	text-decoration: underline;
}
