/* ============================================================
   Manage — the site console, as a tab inside the app

   An admin manages the site from within it, in Elearnity's own
   look, with the other tabs still in place. These styles follow
   the app's own conventions rather than invent any: the primary
   button is the app's purple send-button, links are teal and
   headings pink as in the Asides stream, and an informational
   note is teal (never pink, which the app keeps for headings and
   would read here as an alarm).
   ============================================================ */

.manage-root {
	font-family: var(--font-body);
	color: var(--body-color);
	/* The tab panel already pads and the Asides stream fills its width,
	   so this does neither -- it sits flush with the tab beside it. */
}

.manage-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.8em;
	flex-wrap: wrap;
}
.manage-h {
	font-family: var(--aside-font);
	font-size: 1.6em;
	color: var(--aside-heading-color);
	margin: 0.1em 0 0.3em;
}

/* An informational aside, in the note colour the login uses -- teal, so it
   reads as guidance and not as the alarm loud pink would be. */
.manage-note {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--col-teal);
	margin: 0.4em 0 1.2em;
}
.manage-msg {
	font-family: var(--font-body);
	font-size: 0.9em;
	color: var(--col-teal);
	display: block;
	margin-top: 0.6em;
}
/* A test result reads its outcome by colour: the model answered, or it did not. */
.manage-msg-ok  { color: var(--col-teal); }
.manage-msg-err { color: #b23b34; }

/* The autosave line where the Save button used to be. Quiet by default -- it reports, it does
   not ask -- a little louder while a save is in flight, and red only when something needs the
   author's eye. `tabular-nums` keeps the count from nudging the line as the number changes. */
.manage-autosave {
	font-family: var(--font-ui);
	font-size: 0.82em;
	letter-spacing: 0.02em;
	color: var(--col-purple);
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	transition: opacity var(--tr-fast), color var(--tr-fast);
}
.manage-autosave.is-working { opacity: 0.85; }
.manage-autosave.is-error {
	color: #b23b34;
	opacity: 1;
	font-weight: 600;
}

/* Primary action: the app's own send-button -- purple, light text.
   Sized and aligned so that an <a> carrying this class renders identically to a <button>: a link
   is inline and underlined by default, which would otherwise stand a link-button at a different
   height from the buttons beside it in the same bar. */
.manage-btn {
	font-family: var(--font-ui);
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	text-decoration: none;
	padding: 9px 22px;
	/* Transparent rather than none: the ghost, quiet and danger variants all add a 1px
	   border, and a base of `none` leaves the primary button 2px shorter than every
	   variant beside it in the same bar -- a row of buttons that steps up and down. */
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	background: var(--col-purple);
	color: var(--col-pink-bg);
	transition: opacity var(--tr-fast);
}
.manage-btn:hover { opacity: 0.85; text-decoration: none; }
.manage-btn-quiet {
	background: transparent;
	color: var(--col-purple);
	border: 1px solid var(--col-pink-light);
}
.manage-btn-danger {
	background: transparent;
	color: #b23b34;
	border: 1px solid var(--col-pink-light);
}

/* The post list. */
.manage-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-body);
	font-size: 0.96em;
	margin: 0.2em 0 1.6em;
}
.manage-table th {
	text-align: left;
	font-family: var(--font-ui);
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--col-purple);
	opacity: 0.5;
	border-bottom: 1px solid var(--aside-rule-color);
	padding: 0.5em 0.7em;
}
.manage-table td {
	border-bottom: 1px solid var(--aside-rule-color);
	padding: 0.7em 0.7em;
	vertical-align: top;
}
/* The post's own title, pink as in the Asides stream; Preview, teal, secondary. */
.manage-table .mEdit {
	color: var(--aside-heading-color);
	text-decoration: none;
	font-weight: 600;
}
.manage-table .mEdit:hover { text-decoration: underline; }
.manage-table .mPrev {
	color: var(--aside-link-color);
	text-decoration: none;
	font-size: 0.92em;
}
.manage-table .mPrev:hover { text-decoration: underline; }
.manage-slug {
	font-family: var(--font-mono);
	font-size: 0.8em;
	color: var(--col-purple);
	opacity: 0.5;
}

.manage-tag {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 0.68em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15em 0.5em;
	border-radius: 4px;
	border: 1px solid var(--col-pink-light);
	color: var(--col-purple);
	opacity: 0.7;
}
.manage-tag-live { border-color: var(--col-teal); color: var(--col-teal); opacity: 1; }
.manage-tag-err  { border-color: #b23b34; color: #b23b34; opacity: 1; }

/* The editor. */
.manage-form label {
	display: block;
	font-family: var(--font-ui);
	font-size: 0.74em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--col-purple);
	opacity: 0.65;
	margin: 0 0 0.8em;
}
.manage-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
.manage-row > label { flex: 1 1 8rem; margin-bottom: 0; }

/* The composer's categories are the reader's facet chips, styled in `asides.css` and shared so
   the two cannot drift. Only the slot they sit in belongs here. */
.manage-cats { margin: 0 0 1rem; }
.manage-cats .aside-facet { margin: 0; }
.manage-form input[type=text],
.manage-form select,
.manage-form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	margin-top: 0.35em;
	background: var(--input-bg);
	color: var(--input-color);
	border: 1px solid var(--col-pink-light);
	border-radius: var(--radius-md, 8px);
	padding: 0.55em 0.7em;
}
.manage-form input[type=text]:focus,
.manage-form select:focus,
.manage-form textarea:focus {
	outline: none;
	border-color: var(--col-pink);
}
.manage-form textarea {
	min-height: var(--textarea-min-h, 20rem);
	font-family: var(--font-mono);
	font-size: 0.92em;
	line-height: 1.6;
	/* Fixed size: the box fills its column, so no drag handle. */
	resize: none;
}
.manage-actions {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 1.2em;
}

/* The preview reuses the reader's own prose styling (.aside), inside a frame. */
.manage-preview {
	border: 1px solid var(--aside-rule-color);
	border-radius: var(--radius-md, 8px);
	padding: 1.2rem 1.4rem;
	margin-top: 0.6em;
}

/* The editor and its live preview. Stacked by default -- on a phone the preview drops
   below the text box. On a wide screen the two sit side by side, each its own column of
   label-above-box, so TEXT sits over the text box and PREVIEW over the preview, the two
   box tops aligned. The label carries the whole gap above each box (its 0.35em bottom
   margin), and the box adds none, so the gap under TEXT and under PREVIEW is the same. */
.manage-col-lbl {
	font-family: var(--font-ui);
	font-size: 0.74em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--col-purple);
	opacity: 0.65;
	margin: 0.9em 0 0.35em;
}
.manage-edit-src textarea {
	width: 100%;
	box-sizing: border-box;
	/* The label's bottom margin is the only gap; the textarea adds none, so its top lines
	   up with the preview box beside it. */
	margin-top: 0;
}
/* The preview's own framed box, at every width -- below the text box on a phone, in the
   second column on a wide screen. */
.manage-live-inner {
	box-sizing: border-box;
	overflow: auto;
	border: 1px solid var(--aside-rule-color);
	border-radius: var(--radius-md, 8px);
	padding: 1rem 1.3rem;
	background: var(--col-pink-bg);
}
@media (min-width: 900px) {
	.manage-edit-cols {
		display: flex;
		gap: 1.2rem;
		align-items: stretch;
	}
	.manage-edit-src,
	.manage-live {
		display: flex;
		flex-direction: column;
		flex: 1 1 50%;
		min-width: 0;
	}
	/* A clear gap below the fields row above. Both labels take the same top margin, and
	   both columns start at the same y, so TEXT and PREVIEW stay level with each other. */
	.manage-edit-src .manage-col-lbl,
	.manage-live .manage-col-lbl { margin-top: 1.2em; }
	.manage-edit-src textarea { flex: 1; }
	.manage-live-inner { flex: 1; }
}

/* In the preview only, a box or span that names a class the site has not yet
   styled is shown as the region it is -- a faint tint and a thin edge, and the
   same in every browser (a dashed outline renders dotted in some) -- so an author
   sees their ::: took effect before the CSS that gives it a look. A preview
   affordance, not the reader's page, where an unstyled class is correctly
   invisible. */
/* :where() gives these zero specificity, so a class the site HAS styled -- a real
   .warning, .note -- fully overrides the marker and shows its own look, while a
   class the site has not styled still gets this faint hint that it rendered. */
:where(.manage-live-inner div[class]) {
	border: 1px solid var(--aside-rule-color);
	background: rgba(0, 124, 119, 0.06);
	border-radius: 5px;
	padding: 0.3em 0.7em;
	margin: 0.6em 0;
}
:where(.manage-live-inner span[class]) {
	background: rgba(0, 124, 119, 0.10);
	border-radius: 3px;
	padding: 0 0.15em;
}

/* The close cross, top-right of the editor, in place of a Cancel button. The same
   cross.svg the rest of the app closes with, at the same size and opacity, so it is
   the one close the whole site uses rather than a second one that only looks like it. */
.manage-close {
	cursor: pointer;
	width: var(--close-size);
	height: var(--close-size);
	opacity: var(--close-opacity);
}
.manage-close:hover { opacity: var(--close-opacity-hover); }

/* The destination picker: a checkbox per remote the site can post to, sat between
   the editor and the actions. Uses the same pink-light borders and purple text as
   the rest of the form, so it reads as one surface rather than a bolt-on. */
.manage-dest {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.9em;
	margin: 0.9em 0 0.2em;
	padding-top: 0.8em;
	border-top: 1px solid var(--col-pink-light);
}
.manage-dest-lbl {
	font-weight: 600;
	color: var(--col-purple);
}
.manage-dest-opt {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	color: var(--col-purple);
	cursor: pointer;
}
.manage-dest-opt input { margin: 0; }
.manage-dest-hint {
	flex-basis: 100%;
	margin: 0.1em 0 0;
}

/* The destination settings form: one card per remote, public fields and a write-only
   secret. The ghost button (top-bar "Destinations") is quieter than the pink primary,
   since setting up remotes is a side errand next to writing. */
.manage-bar-btns {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
}
.manage-btn-ghost {
	background: transparent;
	color: var(--col-purple);
	border: 1px solid var(--col-pink-light);
}
.manage-btn-ghost:hover { border-color: var(--col-pink); }
.manage-cred {
	margin: 1em 0;
	padding: 1em 1.1em;
	border: 1px solid var(--col-pink-light);
	border-radius: 8px;
}
.manage-cred-h {
	margin: 0 0 0.6em;
	color: var(--col-purple);
	font-size: 1.05em;
}
.manage-cred label {
	display: block;
	margin-bottom: 0.6em;
	color: var(--col-purple);
}
.manage-cred input {
	display: block;
	width: 100%;
	margin-top: 0.2em;
	padding: 0.5em 0.6em;
	border: 1px solid var(--col-pink-light);
	border-radius: 5px;
	font: inherit;
}
.manage-cred input:focus { outline: none; border-color: var(--col-pink); }

/* ── The AI settings screen ──────────────────────────────────────────────────
   Its own panel like Destinations, with a provider, a write-only key and the
   two prompts. Every control is a full-width block on its own line -- the
   password key among them, which `.manage-form input[type=text]` does not reach,
   so it would otherwise sit inline and cramped against its label. These rules
   follow `.manage-form` in the file and win on equal specificity. */
.manage-ai input,
.manage-ai select,
.manage-ai textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	margin-top: 0.35em;
	background: var(--input-bg);
	color: var(--input-color);
	border: 1px solid var(--col-pink-light);
	border-radius: var(--radius-md, 8px);
	padding: 0.55em 0.7em;
}
.manage-ai input:focus,
.manage-ai select:focus,
.manage-ai textarea:focus {
	outline: none;
	border-color: var(--col-pink);
}
.manage-ai textarea {
	min-height: 4.5rem;
	font-family: var(--font-body);
	font-size: 0.95em;
	line-height: 1.5;
	resize: vertical;
}
.manage-ai .manage-hint { margin-top: -0.4em; }

/* ── Reports and subscribers ─────────────────────────────────────────────────
   The figures the reports draw, and the row actions the subscriber list needs.
   Elearnity's own tokens throughout: these are the app's screens, not the
   server console's, and they should read as the rest of the tab does. */

.manage-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8em;
	margin: 0.4em 0 1.4em;
}
.manage-stat {
	flex: 1 1 9em;
	padding: 0.9em 1em;
	border: 1px solid var(--col-pink-light);
	border-radius: 8px;
}
.manage-stat-n {
	font-family: var(--font-ui);
	font-size: 1.6em;
	line-height: 1.1;
	color: var(--col-purple);
}
.manage-stat-k {
	font-family: var(--font-ui);
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-top: 0.35em;
	color: var(--col-teal);
}
.manage-stat-note {
	font-size: 0.82em;
	margin-top: 0.2em;
	opacity: 0.75;
	color: var(--col-purple);
}

/* The per-row verbs. Kept to the row's right, and quiet: they act on one
   address, and should not compete with the page's own actions. */
.manage-row-acts {
	white-space: nowrap;
	text-align: right;
	font-size: 0.88em;
}
.manage-row-acts a {
	color: var(--col-purple);
	opacity: 0.75;
	margin-left: 0.7em;
}
.manage-row-acts a:hover { opacity: 1; }

/* ── Comments in the tab ─────────────────────────────────────────────────────
   The moderation queue, in the app's own idiom rather than the server console's.
   A comment is shown rendered, framed, with its verbs beneath, because a
   decision about what to publish is made looking at what would be published. */

/* How many are waiting, on the button that opens them. */
.manage-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	margin-left: 0.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--col-pink);
	color: var(--col-pink-bg);
	font-family: var(--font-ui);
	font-size: 0.72em;
	font-weight: 600;
}

.manage-comment-by {
	font-size: 0.92em;
	margin-bottom: 0.3em;
	color: var(--col-purple);
}
.manage-comment-why {
	font-size: 0.85em;
	margin: 0.1em 0 0.5em;
}
/* The comment's own prose, set apart from the site's chrome so it is obvious
   which words are the commenter's. */
.manage-comment-body {
	margin: 0.5em 0 0.8em;
	padding: 0.7em 0.9em;
	border-radius: 6px;
	background: var(--col-pink-bg);
	border: 1px solid var(--col-pink-light);
	color: var(--col-purple);
}
.manage-comment-body p:first-child { margin-top: 0; }
.manage-comment-body p:last-child { margin-bottom: 0; }

.comment-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-ui);
	font-size: 0.74em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--col-purple);
	opacity: 0.65;
	margin-bottom: 0.8em;
}
.comment-filter select {
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	padding: 0.35em 0.5em;
	border: 1px solid var(--col-pink-light);
	border-radius: 5px;
	background: var(--input-bg);
	color: var(--input-color);
}

/* The site's comments switch, above the queue. */
.manage-switch {
	display: flex;
	align-items: center;
	gap: 0.8em;
	flex-wrap: wrap;
	margin: 0.4em 0 1.2em;
	padding: 0.8em 1em;
	border: 1px solid var(--col-pink-light);
	border-radius: 8px;
	color: var(--col-purple);
}
.manage-switch-note { margin: 0; }

/* An author's own page: the face, the name and the description readers meet.
   The picture is chosen through a hidden file input, so the control is a button
   in the app's own idiom rather than the browser's grey default. */
.manage-avatar-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.2em;
}
.manage-avatar-pic,
.manage-avatar-initial {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ui);
	font-size: 1.8rem;
	font-weight: 600;
	color: #fff;
	background: var(--col-teal, #2f8f83);
}
.manage-avatar-pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
}
.manage-hint {
	font-family: var(--font-ui);
	font-size: 0.78em;
	color: var(--col-purple);
	opacity: 0.65;
	margin: 0 0 1em;
}
/* The description is prose, so it takes the reading font and a few lines --
   not the tall monospace box the post editor wants. */
/* Beaten otherwise by `.manage-form textarea`, which dresses the post editor. */
.manage-form textarea.manage-bio {
	min-height: 6.5rem;
	font-family: var(--font-body, inherit);
	font-size: 0.95rem;
	line-height: 1.5;
	resize: vertical;
}

/* --- The Fix suggestion (AI copy-edit, propose then accept) --- */
/* The Fix button sits with the Text label above the editor, quiet. */
.manage-pane-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
}
.manage-fix-btn { flex: 0 0 auto; }
.manage-inline { display: inline; }
/* The suggestion panel: the model's proposed text shown as a line diff against the author's own,
   so a copy-edit is a change to see rather than a wall to re-read. */
.manage-fix-panel {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid var(--col-pink);
	border-radius: 10px;
	background: var(--col-pink-light);
}
.manage-fix-head { margin-bottom: 0.6rem; color: var(--col-purple); }
.manage-fix-diff {
	font-family: var(--font-mono, monospace);
	font-size: 0.9rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 24rem;
	overflow-y: auto;
	color: var(--col-purple);
}
.manage-fix-diff div { white-space: pre-wrap; }
.manage-fix-diff ins {
	background: rgba(0, 124, 119, 0.18);
	text-decoration: none;
	display: block;
}
.manage-fix-diff del {
	background: rgba(178, 59, 52, 0.16);
	text-decoration: line-through;
	display: block;
	opacity: 0.85;
}
.manage-fix-plain { white-space: pre-wrap; margin: 0; }
/* The label wrapper shouts uppercase; the button beside it should read as a word. */
.manage-fix-btn { text-transform: none; letter-spacing: 0; opacity: 1; font-size: 0.8rem; padding: 4px 12px; }