/* Frontend Author Studio — namespaced frontend styles.
   Uses the swisswriters.ch editorial tokens; does not override unrelated
   theme elements. */
.fas-shell {
	--fas-ink: #101827;
	--fas-muted: #5f6b7a;
	--fas-paper: #f3f8fb;
	--fas-card: #ffffff;
	--fas-line: #d7e3ea;
	--fas-accent: #0097a7;
	--fas-accent-dark: #006b7c;
	--fas-deep: #0b1320;
	--fas-danger: #8c1c1c;
	--fas-danger-bg: #fdecec;
	--fas-success: #174f38;
	--fas-success-bg: #edf8f3;
	box-sizing: border-box;
	color: var(--fas-ink);
	font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	margin: 0 auto;
	max-width: 680px;
	padding: 28px 20px 64px;
}

.fas-shell *,
.fas-shell *::before,
.fas-shell *::after {
	box-sizing: border-box;
}

/* Forms */
.fas-form {
	background: var(--fas-card);
	border: 1px solid var(--fas-line);
	border-top: 3px solid var(--fas-accent);
	padding: 30px 28px 32px;
}

.fas-field {
	padding: 0 0 18px;
}

.fas-grid {
	display: grid;
	gap: 0 18px;
}

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

.fas-field label {
	color: var(--fas-ink);
	display: block;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
}

.fas-field input[type="text"],
.fas-field input[type="email"],
.fas-field input[type="password"],
.fas-field input[type="url"],
.fas-field input[type="number"],
.fas-field input[type="search"],
.fas-field textarea,
.fas-field select {
	background: #fff;
	border: 1px solid var(--fas-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--fas-ink);
	font-size: 16px;
	line-height: 1.4;
	padding: 13px 14px;
	width: 100%;
}

.fas-field input[type="text"],
.fas-field input[type="email"],
.fas-field input[type="password"],
.fas-field input[type="url"],
.fas-field input[type="number"],
.fas-field input[type="search"],
.fas-field select {
	min-height: 52px;
}

.fas-field textarea {
	min-height: 150px;
	resize: vertical;
}

.fas-field input:focus,
.fas-field textarea:focus,
.fas-field select:focus {
	border-color: var(--fas-accent);
	box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.16);
	outline: none;
}

.fas-field ::placeholder {
	color: #9aa7b4;
	opacity: 1;
}

.fas-hint {
	color: var(--fas-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 8px 0 0;
}

.fas-intro {
	color: var(--fas-muted);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 18px;
}

/* Buttons */
.fas-button {
	align-items: center;
	/* accent-dark, not accent: white on #0097a7 is 3.51:1 and fails WCAG AA at
	   button text sizes; #006b7c is 6.10:1. The lighter accent stays the brand
	   colour for rules, borders and decoration, where contrast does not apply. */
	background: var(--fas-accent-dark);
	border: 1px solid var(--fas-accent-dark);
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	min-height: 52px;
	padding: 14px 22px;
	text-align: center;
	width: 100%;
}

.fas-button:hover,
.fas-button:focus {
	background: var(--fas-deep);
	color: #fff;
}

.fas-button:focus-visible {
	outline: 3px solid #7dd3dc;
	outline-offset: 2px;
}

.fas-button--small {
	font-size: 14px;
	min-height: 44px;
	padding: 10px 18px;
	width: auto;
}

/* Variants carry the shell so they outrank a theme's own `button` rules:
   a single class loses to something like `.fas-shell button`. */
.fas-shell .fas-button--primary {
	background: var(--fas-accent-dark);
	border: 1px solid var(--fas-accent-dark);
	color: #fff;
}

.fas-shell .fas-button--primary:hover,
.fas-shell .fas-button--primary:focus {
	background: var(--fas-deep);
	border: 1px solid var(--fas-deep);
	color: #fff;
}

.fas-shell .fas-button--ghost {
	background: #fff;
	border: 1px solid var(--fas-line);
	color: var(--fas-accent-dark);
}

.fas-shell .fas-button--ghost:hover,
.fas-shell .fas-button--ghost:focus {
	background: #dff3f6;
	border: 1px solid var(--fas-accent);
	color: var(--fas-accent-dark);
}

/* Destructive actions keep the ghost footprint - no fill competing with the
   real action - but the red now shows at rest rather than only on hover.
   Muted grey was 3.87:1 (fails AA) and, next to a teal "Restore", left
   "Delete permanently" looking like the same kind of button. #8c1c1c is
   9.18:1 and reads as a warning before it is clicked, not after. */
.fas-shell .fas-button--danger {
	background: transparent;
	border: 1px solid var(--fas-line);
	color: var(--fas-danger);
}

.fas-shell .fas-button--danger:hover,
.fas-shell .fas-button--danger:focus {
	background: var(--fas-danger-bg);
	border: 1px solid var(--fas-danger);
	color: var(--fas-danger);
}

/* Notices */
.fas-notice {
	border: 1px solid;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 20px;
	padding: 14px 16px;
}

.fas-notice--error {
	background: var(--fas-danger-bg);
	border-color: #b96b60;
	color: var(--fas-danger);
}

.fas-notice--success {
	background: var(--fas-success-bg);
	border-color: #4e9778;
	color: var(--fas-success);
}

.fas-notice--info {
	background: var(--fas-paper);
	border-color: var(--fas-line);
	color: var(--fas-ink);
}

.fas-notice a,
.fas-alt a,
.fas-link {
	color: var(--fas-accent-dark);
	font-weight: 700;
	text-decoration: none;
}

.fas-notice a:hover,
.fas-alt a:hover,
.fas-link:hover {
	text-decoration: underline;
}

/* Rows, checks, alt links */
.fas-row {
	align-items: center;
	display: flex;
	gap: 12px;
	padding: 0 0 18px;
}

.fas-row--between {
	justify-content: space-between;
}

/* Carries the shell so it outranks `.fas-field label`, which would
   otherwise turn a checkbox row into an uppercase block label. */
.fas-shell .fas-check {
	align-items: flex-start;
	color: var(--fas-ink);
	cursor: pointer;
	display: flex;
	font-size: 15px;
	font-weight: 400;
	gap: 10px;
	letter-spacing: normal;
	line-height: 1.5;
	margin-bottom: 0;
	text-transform: none;
}

.fas-shell .fas-check--block {
	padding: 0 0 18px;
}

.fas-shell .fas-check input {
	accent-color: var(--fas-accent);
	flex: 0 0 auto;
	height: 18px;
	margin: 3px 0 0;
	width: 18px;
}

.fas-alt {
	color: var(--fas-muted);
	font-size: 14px;
	padding: 18px 0 0;
	text-align: center;
}

/* Tabs (account center) */
.fas-tabs {
	border-bottom: 2px solid var(--fas-ink);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
}

.fas-tab {
	border: 1px solid transparent;
	border-bottom: 0;
	color: var(--fas-ink);
	display: inline-block;
	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.04em;
	padding: 12px 14px 10px;
	text-decoration: none;
	text-transform: uppercase;
}

.fas-tab:hover {
	background: #dff3f6;
	color: var(--fas-accent-dark);
}

.fas-tab.is-active {
	background: var(--fas-ink);
	color: #fff;
}

/* Wide shell for account/studio layouts */
.fas-shell--wide {
	max-width: 960px;
}

/* Flush forms inside panels */
.fas-form--flush {
	border: 0;
	border-top: 0;
	padding: 0;
}

/* Author card */
.fas-author-head {
	align-items: center;
	display: flex;
	gap: 22px;
}

.fas-author-head .avatar {
	border-radius: 999px;
	flex: 0 0 auto;
}

.fas-author-head h2 {
	border: 0;
	font-size: 30px;
	margin: 0 0 8px;
	padding: 0;
}

/* Article list rows */
.fas-artrow {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.fas-artrow .fas-actions {
	align-items: flex-start;
	justify-content: flex-end;
}

.fas-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 16px;
}

/* 264px landed mid-row, so the last thing you saw was a line of checkboxes
   sliced through the middle - it looks broken rather than scrollable. Sized to
   whole rows instead, with the fade below as the cue that more follows. */
.fas-cat-list {
	border: 1px solid var(--fas-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-height: 232px;
	overflow-y: auto;
	padding: 14px;
	scrollbar-gutter: stable;
}

.fas-cat-list .fas-check {
	align-items: center;
	background: #fff;
	border: 2px solid var(--fas-line);
	margin: 0;
	min-height: 46px;
	padding: 0 16px;
}

.fas-cat-list .fas-check:has(input:checked) {
	background: #f1fafb;
	border-color: var(--fas-accent);
}

.fas-cat-list .fas-check input {
	margin: 0;
}

/* Write-first dashboard call to action */
.fas-write-cta {
	align-items: center;
	border-top-color: var(--fas-accent);
	display: flex;
	gap: 28px;
	justify-content: space-between;
}

.fas-write-cta .fas-write-cta-text h2 {
	border-bottom: 0;
	margin: 0;
	padding-bottom: 0;
}

.fas-write-cta-text .fas-intro {
	margin: 8px 0 0;
}

.fas-button--hero {
	flex-shrink: 0;
	font-size: 18px;
	gap: 10px;
	min-height: 64px;
	padding: 0 30px;
	white-space: nowrap;
	width: auto;
}

@media (max-width: 700px) {
	.fas-write-cta {
		flex-direction: column;
		align-items: stretch;
	}

	.fas-button--hero {
		width: 100%;
	}
}

/* Member-area bar: four equal sections, same order on every member page.
   Writing and the Editor Desk are actions on the studio hub, not sections, so
   the bar no longer carries a call-to-action item among its destinations. */
.fas-topnav {
	align-items: center;
	background: #fff;
	border: 1px solid var(--fas-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 20px;
	padding: 6px;
}

.fas-topnav-link {
	align-items: center;
	color: var(--fas-ink);
	display: inline-flex;
	font-size: 16px;
	font-weight: 600;
	gap: 6px;
	min-height: 46px;
	padding: 0 16px;
	text-decoration: none;
}

.fas-topnav-link:hover,
.fas-topnav-link.is-active {
	background: #eef6f9;
	color: var(--fas-accent-dark);
}

.fas-topnav-link.is-active {
	box-shadow: inset 0 -3px 0 var(--fas-accent);
	font-weight: 700;
}

.fas-topnav-link:focus-visible {
	outline: 3px solid var(--fas-accent-dark);
	outline-offset: -3px;
}

.fas-topnav-badge {
	background: var(--fas-danger);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	min-width: 20px;
	padding: 2px 6px;
	text-align: center;
}

@media (max-width: 700px) {
	.fas-topnav {
		gap: 2px;
	}

	.fas-topnav-link {
		font-size: 14px;
		padding: 0 10px;
	}
}

/* Studio hub section headings, and the one contextual link that sits beside
   a heading instead of becoming a second row of buttons. */
.fas-section-title {
	margin: 0;
}

.fas-section-head {
	margin: 0 0 12px;
}

.fas-section-link {
	color: var(--fas-accent-dark);
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.fas-section-link:focus-visible,
a.fas-card:focus-visible {
	outline: 3px solid var(--fas-accent-dark);
	outline-offset: 2px;
}

/* Editor intro (page header) */
.fas-editor-intro {
	margin: 0 0 20px;
}

.fas-back-link {
	align-items: center;
	color: var(--fas-accent-dark);
	display: inline-flex;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	min-height: 40px;
	text-decoration: none;
}

.fas-editor-intro h1 {
	font-size: 32px;
	font-weight: 900;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 6px 0 0;
}

.fas-editor-intro .fas-intro {
	margin: 8px 0 0;
	max-width: 720px;
}

/* Editor head */
.fas-editor-head .fas-pill {
	margin-bottom: 8px;
}

.fas-autosave-badge {
	color: var(--fas-muted);
	font-size: 14px;
	font-weight: 600;
}

.fas-autosave-badge.is-saved {
	color: var(--fas-success);
}

.fas-autosave-badge.is-saved::before {
	content: "✓ ";
}

.fas-autosave-badge.is-error {
	color: var(--fas-danger);
}

/* Word count + text size row under the content editor */
.fas-editor-footer-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-top: 8px;
}

.fas-textsize {
	align-items: center;
	display: flex;
	gap: 6px;
}

.fas-textsize-label {
	margin-right: 4px;
}

.fas-textsize-btn {
	background: #fff;
	border: 1px solid var(--fas-line);
	color: var(--fas-ink);
	cursor: pointer;
	font-weight: 800;
	min-height: 40px;
	min-width: 40px;
}

.fas-textsize-btn:nth-child(2) {
	font-size: 13px;
}

.fas-textsize-btn:nth-child(3) {
	font-size: 16px;
}

.fas-textsize-btn:nth-child(4) {
	font-size: 19px;
}

.fas-textsize-btn.is-active {
	background: var(--fas-accent);
	border-color: var(--fas-accent);
	color: #fff;
}

.fas-editor-area.fas-text-small {
	font-size: 15px;
}

.fas-editor-area.fas-text-normal {
	font-size: 17px;
}

.fas-editor-area.fas-text-large {
	font-size: 21px;
	line-height: 1.7;
}

/* Featured image dropzone */
.fas-dropzone {
	align-items: center;
	border: 2px dashed var(--fas-line);
	color: var(--fas-muted);
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	min-height: 160px;
	padding: 24px;
	text-align: center;
}

.fas-dropzone.is-dragover {
	background: #f1fafb;
	border-color: var(--fas-accent);
}

.fas-dropzone-text {
	font-size: 16px;
	font-weight: 600;
}

.fas-dropzone-btn {
	cursor: pointer;
	position: relative;
}

/* A photo has been chosen but not saved yet: show it as a pending state, not as
   an "upload" prompt, so the undo button next to it makes sense. */
.fas-dropzone.has-file {
	background: #f1fafb;
	border-color: var(--fas-accent);
	border-style: solid;
}

.fas-dropzone-clear {
	margin-top: 2px;
}

.fas-dropzone-filename {
	font-size: 14px;
	font-weight: 600;
}

/* The saved photo while "Remove image" is ticked: still visible (the author can
   still recognise it) but clearly on its way out. */
.fas-upload-box.is-removing {
	filter: grayscale(1);
	opacity: 0.45;
}

.fas-remove-note {
	color: var(--fas-danger);
	font-size: 15px;
	line-height: 1.5;
	margin: 8px 0 0;
}

/* The editor's JavaScript shows and hides controls with the `hidden` attribute.
   .fas-button sets display: inline-flex, which would otherwise win over the
   browser's own [hidden] rule and leave "Remove this photo" permanently on
   screen, so state-hiding is made explicit here. */
.fas-shell [hidden] {
	display: none !important;
}

.fas-dropzone-input {
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	width: 0.1px;
}

.fas-dropzone-filename {
	font-size: 14px;
}

/* Inline "Schedule for" date field next to the Publish button.
   The native datetime-local input exposes its calendar icon through the
   ::-webkit-calendar-picker-indicator pseudo-element, which does not render
   on iOS Safari — so the old "hide the text, keep only the indicator" hack
   left an empty box on a phone. A real SVG icon is shown instead, with the
   native input laid invisibly over it: a tap opens the platform's own picker
   (Chrome calendar, iOS wheels, Firefox dropdown), and the icon is identical
   everywhere. The button is borderless so the icon sits on the text line
   instead of floating above it inside a box twice the text height. */
.fas-shell .fas-check.fas-inline-date {
	align-items: center;
	gap: 6px;
}

.fas-inline-date .fas-hint {
	margin: 0;
	white-space: nowrap;
}

.fas-inline-date .fas-date-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	min-width: 32px;
	padding: 0 6px;
	border-radius: 10px;
	color: var(--fas-ink);
	cursor: pointer;
}

.fas-inline-date .fas-date-btn:hover,
.fas-inline-date .fas-date-btn:focus-within {
	background: rgba(16, 24, 39, 0.06);
}

.fas-inline-date .fas-date-icon {
	pointer-events: none;
}

.fas-inline-date .fas-date-btn input[type="datetime-local"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	opacity: 0;
	cursor: pointer;
}

/* Bottom action row: forward action + note inline, Trash pushed to its own end */
.fas-actions-note {
	margin: 0;
}

.fas-actions-trash {
	margin-left: auto;
}

/*
 * Save has to be reachable from wherever you stopped typing.
 *
 * The editor page runs to ~4,500px on a phone, and this bar used to sit at the
 * very bottom of it: after writing, you scrolled past the summary, tags, the
 * YouTube field, 26 category checkboxes and the image picker to reach "Save".
 * People who are not sure their work is safe scroll back up and check, or lose
 * it. Pinning the bar to the bottom of the viewport keeps Save one tap away the
 * whole time, and the backdrop blur keeps the text under it readable.
 *
 * position: sticky (not fixed) so it still sits in the normal flow at the end
 * of the form for anyone whose browser ignores it, and so it never covers the
 * footer.
 */
.fas-actions--sticky {
	background: rgba(255, 255, 255, 0.97);
	border-top: 2px solid var(--fas-accent-dark);
	bottom: 0;
	box-shadow: 0 -6px 18px rgba(11, 19, 32, 0.08);
	margin-left: -16px;
	margin-right: -16px;
	padding: 12px 16px;
	position: sticky;
	/*
	 * Above the rich-editor toolbar, which is sticky at top: 0 with z-index 30
	 * (site Code Snippet #90). At the top of the page the toolbar's own position
	 * lands inside this pinned bar, and the higher z-index made the toolbar paint
	 * over Save and Publish. This bar is the page's action chrome: it floats, and
	 * everything in the page passes underneath it.
	 */
	z-index: 40;
}

@supports (backdrop-filter: blur(6px)) {
	.fas-actions--sticky {
		backdrop-filter: blur(6px);
		background: rgba(255, 255, 255, 0.9);
	}
}

/* It holds two or three buttons and nothing else, so it stays one row and
   splits the width between them rather than stacking and eating the screen. */
@media (max-width: 700px) {
	.fas-actions--sticky {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.fas-actions--sticky .fas-button {
		flex: 1 1 0;
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* The occasional actions - schedule, preview, archive, restore, trash - and
   the note about what saving will do. Normal flow, above the pinned bar. */
.fas-actions--secondary {
	margin-bottom: 4px;
}

@media (prefers-reduced-motion: no-preference) {
	.fas-actions--sticky {
		transition: box-shadow 150ms ease;
	}
}

.fas-editor textarea#fas_content {
	display: none;
}

@media (max-width: 700px) {
	.fas-artrow {
		grid-template-columns: 1fr;
	}

	.fas-artrow .fas-actions {
		justify-content: flex-start;
	}
}

/* Honeypot */
.fas-hp {
	height: 1px;
	left: -10000px;
	overflow: hidden;
	position: fixed;
	top: auto;
	width: 1px;
}

/* Card list (used by studio/dashboard/my-articles) */
.fas-cards {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin: 0 0 26px;
}

/* The studio's four status cards are one set and are read across, so they get a
   fixed column count: auto-fit resolves to three columns at both 1440 and 768,
   which strands the fourth card alone on a second row. */
.fas-cards--four {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1000px) {
	.fas-cards--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.fas-cards--four {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fas-card {
	background: var(--fas-card);
	border: 1px solid var(--fas-line);
	padding: 18px;
}

.fas-card b {
	color: var(--fas-accent-dark);
	display: block;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: 0.12em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.fas-card strong {
	display: block;
	font-size: 26px;
	font-weight: 950;
	letter-spacing: -0.015em;
	line-height: 1;
	margin-bottom: 6px;
}

.fas-card span {
	color: var(--fas-muted);
	font-size: 14px;
	line-height: 1.45;
}

/* Count cards are links to the matching article list: keep them looking like
   cards, not like links, and give the hover a hint that they are clickable. */
a.fas-card {
	color: inherit;
	display: block;
	text-decoration: none;
}

a.fas-card:hover {
	border-color: var(--fas-accent);
}

.fas-panel {
	background: var(--fas-card);
	border: 1px solid var(--fas-line);
	border-top: 3px solid var(--fas-ink);
	padding: 24px 26px;
}

.fas-panel--done {
	border-top-color: var(--fas-success);
}

.fas-advanced {
	border-top: 1px solid var(--fas-line);
	margin-top: 18px;
	padding-top: 14px;
}

.fas-advanced summary {
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	color: var(--fas-accent-dark);
	list-style: none;
	padding: 6px 0;
}

.fas-advanced summary::-webkit-details-marker {
	display: none;
}

.fas-advanced summary::before {
	content: "▸ ";
}

.fas-advanced[open] summary::before {
	content: "▾ ";
}

.fas-advanced .fas-field:first-of-type {
	margin-top: 14px;
}

.fas-seo-preview {
	background: #f8f9fa;
	border: 1px solid var(--fas-line);
	display: block;
	margin-top: 16px;
	padding: 14px 16px;
}

.fas-seo-preview-title {
	color: #1a0dab;
	display: block;
	font-size: 18px;
	line-height: 1.3;
}

.fas-seo-preview-url {
	color: #006621;
	display: block;
	font-size: 13px;
}

.fas-seo-preview-desc {
	color: var(--fas-muted);
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

.fas-panel h2 {
	border-bottom: 1px solid var(--fas-line);
	color: var(--fas-ink);
	font-size: 20px;
	font-weight: 950;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 16px;
	padding-bottom: 10px;
}

.fas-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fas-list li {
	border-bottom: 1px solid var(--fas-line);
	padding: 13px 0;
}

.fas-list li:last-child {
	border-bottom: 0;
}

.fas-list a {
	color: var(--fas-ink);
	font-weight: 800;
	text-decoration: none;
}

.fas-list a:hover {
	color: var(--fas-accent);
}

.fas-muted {
	color: var(--fas-muted);
	font-size: 13px;
}

.fas-notification-list li {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.fas-notification.is-unread {
	border-left: 3px solid var(--fas-accent);
	padding-left: 12px;
}

.fas-notification p {
	margin: 4px 0;
}

.fas-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fas-actions .fas-button,
.fas-actions form .fas-button {
	width: auto;
}

.fas-actions form {
	display: inline-flex;
}

/* Status pills */
.fas-pill {
	background: #eef6f9;
	border-radius: 999px;
	color: var(--fas-accent-dark);
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	text-transform: uppercase;
}

.fas-pill--publish { background: #edf8f3; color: #174f38; }
.fas-pill--pending { background: #fff7e8; color: #7c4a03; }
.fas-pill--changes { background: #fff0f0; color: #8c1c1c; }
.fas-pill--rejected { background: #fdecec; color: #6d211b; }

/* Editor */
.fas-editor-toolbar {
	background: var(--fas-paper);
	border: 1px solid var(--fas-line);
	border-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px;
}

.fas-editor-toolbar button {
	background: #fff;
	border: 1px solid var(--fas-line);
	border-radius: 0;
	color: var(--fas-ink);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	min-height: 34px;
	padding: 8px 11px;
}

.fas-editor-toolbar button:hover {
	background: #dff3f6;
	border-color: var(--fas-accent);
	color: var(--fas-accent-dark);
}

.fas-editor-area {
	background: #fff;
	border: 1px solid var(--fas-line);
	color: var(--fas-ink);
	font-size: 17px;
	line-height: 1.65;
	min-height: 320px;
	outline: none;
	padding: 20px 22px;
}

.fas-editor-area:focus {
	border-color: var(--fas-accent);
	box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.16);
}

.fas-editor-area blockquote {
	border-left: 4px solid var(--fas-accent);
	margin: 0 0 1em;
	padding: 4px 0 4px 16px;
}

.fas-editor-area pre {
	background: var(--fas-paper);
	border: 1px solid var(--fas-line);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	overflow-x: auto;
	padding: 12px 14px;
}

.fas-editor-meta {
	align-items: center;
	color: var(--fas-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 12px;
	padding: 10px 2px 16px;
}

.fas-upload-box {
	align-items: center;
	background: var(--fas-paper);
	border: 2px dashed var(--fas-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	min-height: 130px;
	padding: 18px;
	text-align: center;
}

.fas-upload-box img {
	max-height: 180px;
	max-width: 100%;
}

/* Video / interview */
.fas-video-frame {
	aspect-ratio: 16 / 9;
	background: var(--fas-deep);
	margin: 0 0 12px;
	overflow: hidden;
	width: 100%;
}

.fas-video-frame iframe {
	border: 0;
	height: 100%;
	width: 100%;
}

.fas-transcript {
	background: #fff;
	border: 1px solid var(--fas-line);
	font-size: 15px;
	line-height: 1.6;
	max-height: 420px;
	overflow-y: auto;
	padding: 18px 20px;
}

.fas-transcript button {
	color: var(--fas-accent-dark);
	font-weight: 800;
	text-decoration: underline;
}

.fas-chip {
	align-items: center;
	background: #fff;
	border: 1px solid var(--fas-line);
	color: var(--fas-ink);
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	gap: 8px;
	padding: 8px 12px;
	text-decoration: none;
}

.fas-chip:hover {
	background: var(--fas-accent);
	border-color: var(--fas-accent);
	color: #fff;
}

/* Moderation admin */
.fas-admin .widefat td,
.fas-admin .widefat th {
	vertical-align: middle;
}

@media (max-width: 700px) {
	.fas-grid--2 {
		grid-template-columns: 1fr;
	}

	.fas-shell {
		padding: 20px 16px 48px;
	}

	.fas-form {
		padding: 24px 20px 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fas-shell *,
	.fas-shell *::before,
	.fas-shell *::after {
		transition: none !important;
	}
}

/* ==========================================================================
   Editor Desk (all of it scoped to .fas-desk)
   --------------------------------------------------------------------------
   The desk stacks two navigation rows - the section strip and the filter row -
   and both used to be .fas-tabs, so "which section am I in" and "which filter"
   were visually identical. The section strip keeps .fas-tabs; the filter row
   becomes light .fas-chips, so the heavy row picks the section and the light
   row filters inside it.

   Every class below is new and namespaced on purpose: .fas-tabs and .fas-artrow
   are shared with the account centre and My Articles, and must not move.
   ========================================================================== */

.fas-desk .fas-panel {
	padding: 22px 24px 26px;
}

/* --- page head: title plus the numbers a moderator wants at a glance --- */
.fas-desk-summary {
	color: var(--fas-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: -6px 0 18px;
}

.fas-desk-summary strong {
	color: var(--fas-ink);
	font-weight: 900;
}

/* The section strip keeps .fas-tabs; only its count badge is new. */
.fas-desk .fas-tab-count {
	background: var(--fas-paper);
	border-radius: 999px;
	color: var(--fas-muted);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0;
	margin-left: 6px;
	min-width: 22px;
	padding: 3px 7px;
	text-align: center;
}

.fas-desk .fas-tab.is-active .fas-tab-count {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

/* --- filter chips: the lighter second navigation row --- */
.fas-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.fas-chip {
	align-items: center;
	background: var(--fas-paper);
	border: 1px solid var(--fas-line);
	border-radius: 999px;
	color: var(--fas-ink);
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	gap: 8px;
	min-height: 38px;
	padding: 0 15px;
	text-decoration: none;
}

.fas-chip:hover {
	background: #dff3f6;
	border-color: var(--fas-accent);
	color: var(--fas-accent-dark);
}

.fas-chip.is-active {
	background: var(--fas-accent-dark);
	border-color: var(--fas-accent-dark);
	color: #fff;
}

.fas-chip-count {
	background: var(--fas-card);
	border: 1px solid var(--fas-line);
	border-radius: 999px;
	color: var(--fas-muted);
	font-size: 11px;
	font-weight: 950;
	line-height: 1;
	min-width: 24px;
	padding: 5px 7px;
	text-align: center;
}

.fas-chip.is-active .fas-chip-count {
	background: rgba(255, 255, 255, 0.16);
	border-color: transparent;
	color: #fff;
}

/* --- card list --- */
.fas-desklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fas-deskcard {
	background: var(--fas-card);
	border: 1px solid var(--fas-line);
	margin: 0 0 14px;
}

.fas-deskcard:last-child {
	margin-bottom: 0;
}

.fas-deskcard-head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: space-between;
	padding: 18px 20px 0;
}

.fas-deskcard-title {
	color: var(--fas-ink);
	font-size: 19px;
	font-weight: 950;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
	overflow-wrap: anywhere;
}

.fas-deskcard-meta {
	color: var(--fas-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 6px 14px;
	padding: 8px 20px 0;
}

.fas-deskcard-meta a {
	color: var(--fas-accent-dark);
	font-weight: 800;
	text-decoration: none;
}

.fas-deskcard-meta a:hover {
	text-decoration: underline;
}

/* The article's opening text, so a moderator can judge without leaving the desk. */
.fas-deskcard-excerpt {
	background: var(--fas-paper);
	border-left: 3px solid var(--fas-line);
	color: #363b46;
	font-size: 15px;
	line-height: 1.55;
	margin: 14px 20px 0;
	padding: 12px 15px;
}

.fas-deskcard-body {
	color: var(--fas-ink);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	padding: 14px 20px 0;
}

.fas-deskcard-notes {
	border-top: 1px solid var(--fas-line);
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 20px 2px;
}

.fas-deskcard-notes li + li {
	margin-top: 12px;
}

.fas-desknote {
	background: var(--fas-paper);
	border-left: 3px solid var(--fas-accent);
	padding: 10px 13px;
}

.fas-desknote p {
	margin: 4px 0 0;
}

/* --- decision bar: approve on the left, note + send-back on the right --- */
.fas-deskcard-decide {
	align-items: start;
	border-top: 1px solid var(--fas-line);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 16px;
	padding: 16px 20px 20px;
}

/* flex, not fixed grid columns: a "Changes requested" row has no Approve form,
   and a fixed first track would squeeze its note into the narrow column. */
.fas-deskcard-approve {
	flex: 0 0 auto;
	width: min(230px, 100%);
}

.fas-deskcard-sendback {
	flex: 1 1 320px;
	min-width: 0;
}

.fas-deskcard-approve .fas-button {
	width: 100%;
}

.fas-deskcard-approve .fas-hint {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 8px;
}

.fas-deskcard-sendback label {
	color: var(--fas-ink);
	display: block;
	font-size: 14px;
	font-weight: 850;
	margin-bottom: 7px;
}

.fas-deskcard-sendback textarea {
	min-height: 74px;
	width: 100%;
}

.fas-deskcard-sendback-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.fas-deskcard-sendback-actions .fas-button {
	width: auto;
}

/* --- plain action bar (comments, authors) --- */
.fas-deskcard-actions {
	align-items: center;
	border-top: 1px solid var(--fas-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
	padding: 14px 20px 18px;
}

.fas-deskcard-actions form {
	display: inline-flex;
}

.fas-deskcard-actions .fas-button {
	width: auto;
}

/* --- empty state --- */
.fas-desk-empty {
	background: var(--fas-paper);
	border: 1px dashed var(--fas-line);
	color: var(--fas-muted);
	padding: 34px 24px;
	text-align: center;
}

.fas-desk-empty strong {
	color: var(--fas-ink);
	display: block;
	font-size: 17px;
	font-weight: 900;
	margin-bottom: 6px;
}

.fas-desk-empty p {
	margin: 0;
}

/* --- audit pagination: deliberately unlike the chips above --- */
.fas-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 20px;
}

.fas-pager a,
.fas-pager span {
	color: var(--fas-accent-dark);
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}

.fas-pager a:hover {
	text-decoration: underline;
}

.fas-pager span {
	color: var(--fas-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 700px) {
	.fas-deskcard-decide {
		gap: 14px;
	}

	.fas-deskcard-approve {
		width: 100%;
	}

	.fas-desk .fas-panel {
		padding: 18px 16px 22px;
	}

	.fas-deskcard-head,
	.fas-deskcard-meta,
	.fas-deskcard-decide,
	.fas-deskcard-actions,
	.fas-deskcard-notes {
		padding-left: 16px;
		padding-right: 16px;
	}

	.fas-deskcard-excerpt {
		margin-left: 16px;
		margin-right: 16px;
	}
}