/**
 * PC'L FC Board.
 *
 * Colours come from FluentCommunity's own custom properties, so the board
 * follows the portal's light/dark switch instead of holding its own idea of
 * the palette. The names are hyphenated (--fcom-primary-bg), not underscored:
 * an underscored guess silently falls through to the fallback, which on
 * 18.09.2026 left white columns with white text on a dark portal.
 *
 * Two surfaces, on purpose: the column sits on the quieter one, the cards on
 * the brighter one, so a card reads as a thing lying in a column in both
 * themes.
 */

.pcl-board {
	--pcl-board-gap: 12px;
	--pcl-board-radius: 10px;
	--pcl-board-column-bg: var(--fcom-light-bg, #f3f4f6);
	--pcl-board-card-bg: var(--fcom-primary-bg, #fff);
	--pcl-board-text: var(--fcom-primary-text, #111827);
	--pcl-board-muted: var(--fcom-secondary-text, #6b7280);
	--pcl-board-border: var(--fcom-primary-border, #e5e7eb);
	--pcl-board-accent: var(--fcom-text-link, #2563eb);

	margin: 0 0 24px;
	color: var(--pcl-board-text);
}

/* One line above the columns: the milestone strip takes what room there is,
   the gear keeps to the right. Either may be missing. */
.pcl-board__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 12px;
	margin-bottom: 8px;
}

/* The settings control sits above the columns and to the right, out of the
   way of the board itself - it is used once in a while, not while working. */
.pcl-board__settings {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: auto;
}

/* Muted grey on a light page made the gear all but invisible - dimming the
   text colour keeps it quiet while leaving it findable. */
.pcl-board__settings-summary {
	list-style: none;
	cursor: pointer;
	color: var(--pcl-board-text);
	opacity: 0.55;
	font-size: 17px;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 6px;
	transition: opacity 120ms ease;
}

/* Safari draws its own marker through list-style: none. */
.pcl-board__settings-summary::-webkit-details-marker {
	display: none;
}

.pcl-board__settings-summary:hover,
.pcl-board__settings-summary:focus-visible,
.pcl-board__settings[open] .pcl-board__settings-summary {
	background: var(--pcl-board-column-bg);
	opacity: 1;
}

.pcl-board__settings-panel {
	min-width: 240px;
	margin-top: 6px;
	padding: 12px;
	background: var(--pcl-board-card-bg);
	border: 1px solid var(--pcl-board-border);
	border-radius: var(--pcl-board-radius);
}

.pcl-board__settings-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pcl-board-text);
}

.pcl-board__settings-hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pcl-board-muted);
}

/* The radios are Element Plus' own, drawn by FC's stylesheet. Only the
   layout is ours: one per line instead of Element Plus' row with 32px
   between. */
.pcl-board .pcl-board__settings-option {
	display: flex;
	height: auto;
	margin-right: 0;
	padding: 4px 0;
}

.pcl-board__settings-status {
	margin: 6px 0 0;
	min-height: 1em;
	font-size: 12px;
	color: var(--pcl-board-muted);
}

.pcl-board__settings-panel {
	max-width: min(340px, calc(100vw - 32px));
}

/* ── The gear next to the page heading ──────────────────────────────────── */

/* FluentCommunity's heading is a block holding the <h1>. With the gear in it,
   it becomes a row: the title takes the room, the gear keeps to the right.
   The class is set by the script, only on a page that carries a board and
   only when the heading is shown. */
.fcom_space_page_header.pcl-board-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pcl-board-header .fcom_space_page_title {
	flex: 1 1 auto;
	min-width: 0;
}

/* The box the gear travels in. It carries the board's class for the colours
   and the scoped rules, and none of the board's own spacing. */
.pcl-board.pcl-board-outpost {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.pcl-board-outpost .pcl-board__settings {
	margin-left: 0;
}

/* Up here the panel opens over the page rather than pushing the board down:
   it hangs from the gear, flush with the right edge. */
.pcl-board-outpost .pcl-board__settings-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	width: max-content;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.pcl-board__settings-section + .pcl-board__settings-section {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--pcl-board-border);
}

/* ── Tag colours in the settings ────────────────────────────────────────── */

.pcl-board__swatch-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pcl-board__swatch-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.pcl-board__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* No control in FC or Element Plus picks one of eight fixed colours, so the
   swatches are plain buttons in the tag palette. The ring for the chosen one
   is drawn in the text colour, which stands off the panel in both themes. */
.pcl-board__swatch {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pcl-board-tag);
	cursor: pointer;
}

.pcl-board__swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--pcl-board-card-bg), 0 0 0 4px var(--pcl-board-text);
}

.pcl-board__swatch:focus-visible {
	outline: 2px solid var(--pcl-board-accent);
	outline-offset: 3px;
}

.pcl-board .pcl-board__swatch-auto {
	margin-left: 4px;
}

/* ── Milestones ─────────────────────────────────────────────────────────── */

/* All milestones share one card: the first row always, the others folded
   out underneath it, with a rule between rows (PC'L, 09.10.2026). */
.pcl-board__milestones {
	display: flex;
	flex-direction: column;
	flex: 1 1 360px;
	min-width: 0;
	padding: 0 6px;
	background: var(--pcl-board-column-bg);
	border: 1px solid var(--pcl-board-border);
	border-radius: var(--pcl-board-radius);
}

.pcl-board__milestone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	min-width: 0;
	padding: 5px 0 5px 6px;
}

.pcl-board__milestone + .pcl-board__milestone {
	border-top: 1px solid var(--pcl-board-border);
}

/* The folded out rows step in by the width of the arrow, so they read as
   belonging to the first one. */
.pcl-board__milestones.has-more .pcl-board__milestone:not(.pcl-board__milestone--main) {
	padding-left: 42px;
}

.pcl-board__milestone--none {
	padding-top: 3px;
	padding-bottom: 3px;
}

/* The highlighted milestone carries a bar in the link colour on its left -
   the row has no border of its own any more to colour. */
.pcl-board__milestone.is-focus {
	box-shadow: inset 3px 0 0 var(--pcl-board-accent);
}

.pcl-board__milestone.is-closed {
	opacity: 0.7;
}

/* The arrow: Element Plus' small round icon button, turned a quarter when
   the others are folded out. The span needs .pcl-board in front - see the
   note on `.el-button > span` in .claude/rules/oberflaeche.md. */
.pcl-board .pcl-board__milestone-expand > span {
	font-size: 16px;
	line-height: 1;
	transition: transform 120ms ease;
}

.pcl-board .pcl-board__milestones.is-expanded .pcl-board__milestone-expand > span {
	transform: rotate(90deg);
}

.pcl-board .pcl-board__milestone-expand {
	margin-left: -4px;
}

/* The arrow and the name, kept on one line: the group does not wrap, the
   name inside it does when it has to. */
.pcl-board__milestone-lead {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.pcl-board .pcl-board__milestone-lead > .el-button {
	flex: 0 0 auto;
}

/* The name and the day are one button - the click that brings the cards of
   this milestone forward. It wears no button look of its own: the row is
   the thing, the pointer says it can be pressed. */
.pcl-board__milestone-toggle {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.pcl-board__milestone-toggle:focus-visible {
	outline: 2px solid var(--pcl-board-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.pcl-board__milestone-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pcl-board-muted);
}

.pcl-board__milestone-title {
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.pcl-board__milestone-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pcl-board__milestone-when,
.pcl-board__milestone-count {
	font-size: 12px;
	color: var(--pcl-board-muted);
	white-space: nowrap;
}

.pcl-board__due--inline {
	margin-top: 0;
}

/* Element Plus' bar, up to three inner bars side by side. The layout, the colours
   and the dividing lines are ours.
 *
 * The colours are not Element Plus' success and warning any more: measured
 * on 10.10.2026, #67c23a and #e6a23c stand 1.03:1 apart in brightness - they
 * differ in hue alone, which Saskia read as "could be clearer" and which for
 * a red-green weak eye is no difference at all. Element Plus' darker steps do
 * not help, because "dark-2" turns lighter in the dark theme. So green is the
 * 700 step the tags already use, dark in both themes and 2.3:1 from the
 * yellow, and a gap that lets the card show through parts the stretches. */
.pcl-board {
	--pcl-board-progress-done: #15803d;
	--pcl-board-progress-doing: var(--el-color-warning, #e6a23c);
}

/* The padding makes the bar a target worth aiming at: pointing at a colour
   brings its cards forward. */
.pcl-board__progress {
	flex: 1 1 120px;
	min-width: 100px;
	max-width: 320px;
	padding: 6px 0;
}

.pcl-board .pcl-board__progress .el-progress-bar__outer {
	height: 10px;
	/* The stretch under the pointer grows past the track, so the track must
	   not clip. The round caps it used to cut are on the stretches now. */
	overflow: visible;
	/* And it shows nothing itself: the grey rest is a stretch of its own, and
	   through the gaps between stretches the card must show, not the track. */
	background-color: transparent;
}

/* The stretches stand side by side, square where they meet. The script ends
   each one two pixels early; that gap is the dividing line, and since it
   belongs to no stretch it stays clean whichever one grows. The first and
   the last carry the round caps. */
.pcl-board .pcl-board__progress .el-progress-bar__inner {
	border-radius: 0;
	transition: transform 120ms ease;
}

.pcl-board .pcl-board__progress .el-progress-bar__inner.is-first {
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}

.pcl-board .pcl-board__progress .el-progress-bar__inner.is-last {
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}

.pcl-board .pcl-board__progress-doing {
	background-color: var(--pcl-board-progress-doing);
}

.pcl-board .pcl-board__progress-done {
	background-color: var(--pcl-board-progress-done);
}

/* The rest is a grey of the board's own: the card's colour moved a step
   towards the text colour, which darkens it on a light page and lightens it
   on a dark one - the same rule the done column uses.
 *
 * Until 0.14.14 it wore Element Plus' track grey (--el-border-color-lighter).
 * That stood 1.1:1 from the milestone card in both themes, and on the light
 * one it was even brighter than the card, so "not started" read as nothing
 * rather than as a stretch (PC'L, 10.10.2026). At 82 % the grey is 1.4:1 from
 * the card on light and 1.7:1 on dark. Not further: on the light theme it
 * moves towards the yellow in brightness, 1.22:1 at this step. */
.pcl-board .pcl-board__progress-open {
	background-color: color-mix(in srgb, var(--pcl-board-column-bg) 82%, var(--pcl-board-text));
}

/* The stretch under the pointer stands a little taller; the others stay as
   they are (PC'L, 10.10.2026 - fading them read as "switched off"). The
   padding of the bar leaves the room. */
.pcl-board .pcl-board__progress[data-segment="done"] .pcl-board__progress-done,
.pcl-board .pcl-board__progress[data-segment="doing"] .pcl-board__progress-doing,
.pcl-board .pcl-board__progress[data-segment="open"] .pcl-board__progress-open,
.pcl-board .pcl-board__progress[data-pinned="done"] .pcl-board__progress-done,
.pcl-board .pcl-board__progress[data-pinned="doing"] .pcl-board__progress-doing,
.pcl-board .pcl-board__progress[data-pinned="open"] .pcl-board__progress-open {
	transform: scaleY(1.6);
}

/* A click pins the colour, so the bar says it can be pressed - where it has
   cards at all. The pinned stretch stays tall through the rule above. */
.pcl-board__progress.is-clickable {
	cursor: pointer;
}

.pcl-board__milestone-actions {
	display: flex;
	gap: 2px;
	margin-left: auto;
}

.pcl-board__milestones-group {
	margin: 0;
	padding: 8px 0 2px 42px;
	border-top: 1px solid var(--pcl-board-border);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pcl-board-muted);
}

/* The flag on a card that belongs to an open milestone. */
.pcl-board__milestone-mark {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	margin-top: 6px;
	font-size: 12px;
	color: var(--pcl-board-muted);
}

.pcl-board__milestone-mark-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* A clicked milestone brings its cards forward and lets the rest recede. */
.pcl-board__card {
	transition: opacity 120ms ease;
}

.pcl-board--focus .pcl-board__card:not(.is-in-focus) {
	opacity: 0.35;
}

.pcl-board--focus .pcl-board__card.is-in-focus {
	box-shadow: 0 0 0 2px var(--pcl-board-accent);
}

/* The archive is shut most of the time; its head speaks for the cards in
   it - lit when one of them is highlighted, faded when none is. */
.pcl-board__archive {
	transition: opacity 120ms ease;
}

.pcl-board--focus .pcl-board__archive:not(.is-in-focus) {
	opacity: 0.35;
}

/* Faded once is enough: the archive already is, its cards keep theirs. */
.pcl-board--focus .pcl-board__archive:not(.is-in-focus) .pcl-board__card {
	opacity: 1;
}

.pcl-board--focus .pcl-board__archive.is-in-focus {
	box-shadow: 0 0 0 2px var(--pcl-board-accent);
}

/* Everything around the board keeps the page's own alignment.
 *
 * FluentCommunity caps three things at the reading measure and centres them:
 * the heading, the admin bar (the rule above "Seite bearbeiten") and the
 * comment thread. On a full width board that left them 148px to the right of
 * the first column, measured 18.09.2026. The class comes from the script, so
 * only a page that really carries a full width board is touched. */
.fcom_space_page_wrap.pcl-board-page .fcom_space_page_header,
.fcom_space_page_wrap.pcl-board-page .fcom_space_page_admin_bar,
.fcom_space_page_wrap.pcl-board-page .fcom_space_page_comments {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.pcl-board__columns {
	display: flex;
	gap: var(--pcl-board-gap);
	align-items: flex-start;
	overflow-x: auto;
	padding-bottom: 8px;
}

/* Grow into the space there is, scroll when there is not: a board of three
   columns should fill the page instead of hugging the left edge, and a board
   of twelve must still be reachable.
 *
 * The basis is 200px rather than a comfortable 280px because a space page's
 * content area is about 720px wide even on a large screen - "Full Width" in
 * FluentCommunity means the width of the content area, not of the window
 * (measured 18.09.2026 at a 1440px viewport). At 280px the third column was
 * already behind a scrollbar on a desktop, which is the wrong default for the
 * three column board everybody starts with. */
.pcl-board__column {
	flex: 1 1 200px;
	min-width: 200px;
	max-width: 360px;
	background: var(--pcl-board-column-bg);
	border: 1px solid var(--pcl-board-border);
	border-radius: var(--pcl-board-radius);
	padding: 12px;
}

.pcl-board__column-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.pcl-board__column-title {
	margin: 0;
	color: var(--pcl-board-text);
	font-size: 15px;
	font-weight: 600;
}

.pcl-board__column-actions,
.pcl-board__card-actions {
	display: flex;
	gap: 4px;
	opacity: 0;
	transition: opacity 120ms ease;
}

.pcl-board__column:hover .pcl-board__column-actions,
.pcl-board__card:hover .pcl-board__card-actions,
.pcl-board__column-actions:focus-within,
.pcl-board__card-actions:focus-within {
	opacity: 1;
}

/* The buttons are FC's (el-button with fcom_primary_button and friends, see
   BUTTON_CLASSES in the script). Element Plus puts 12px between two buttons
   that follow each other; every row of them here spaces itself with its own
   gap, and both together doubled the distance. (0,3,0) against Element
   Plus' (0,2,0). */
.pcl-board .el-button + .el-button {
	margin-left: 0;
}

.pcl-board__cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 40px;
	border-radius: 8px;
	transition: background-color 120ms ease;
}

.pcl-board__cards.is-drop-target {
	outline: 2px dashed var(--pcl-board-accent);
	outline-offset: 2px;
}

.pcl-board__card {
	position: relative;
	background: var(--pcl-board-card-bg);
	border: 1px solid var(--pcl-board-border);
	border-radius: 8px;
	padding: 10px 10px 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pcl-board:not(.pcl-board--readonly) .pcl-board__card {
	cursor: grab;
}

.pcl-board__card.is-dragging {
	opacity: 0.45;
}

/* Tags sit above the title, where a colour can be scanned without reading.
 *
 * The eight colours are fixed here and picked by the script from the tag's
 * own name, so the same word is the same colour everywhere without anybody
 * keeping a list. All eight are the 700 step of their hue: dark enough for
 * white text at 4.5:1, and dark enough to stay legible on the portal's dark
 * theme, which rules out one palette per theme. */
.pcl-board__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 6px;
}

.pcl-board__tag {
	max-width: 100%;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--pcl-board-tag);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Eight steps once around the colour wheel, no two neighbours from the same
   family: indigo sat next to blue and read as the same colour whenever two
   tags met, so it gave way to amber.
 *
 * A custom property rather than a background: the same class colours the
 * card's tag and the Element Plus tag in the dialog, which takes its colour
 * through its own variables. */
.pcl-board__tag--0 { --pcl-board-tag: #b91c1c; }
.pcl-board__tag--1 { --pcl-board-tag: #c2410c; }
.pcl-board__tag--2 { --pcl-board-tag: #a16207; }
.pcl-board__tag--3 { --pcl-board-tag: #15803d; }
.pcl-board__tag--4 { --pcl-board-tag: #0f766e; }
.pcl-board__tag--5 { --pcl-board-tag: #1d4ed8; }
.pcl-board__tag--6 { --pcl-board-tag: #7e22ce; }
.pcl-board__tag--7 { --pcl-board-tag: #be185d; }

/* No room reserved for the buttons: they are invisible until the card is
   hovered, and a permanent 44px gutter broke titles like "Kanban im
   Maschinenraum" over two lines while the card stood half empty. The buttons
   sit on top instead and carry the card's own background, so the moment they
   appear they cover the text rather than reflow it. */
.pcl-board__card-title {
	margin: 0;
	color: var(--pcl-board-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.pcl-board__card-text {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--pcl-board-muted);
	white-space: pre-wrap;
}

/* An address can be one long word: it breaks anywhere rather than pushing
   the card wider than its column. Colour and underline stay FluentCommunity's. */
.pcl-board__card-link {
	overflow-wrap: anywhere;
}

.pcl-board__card-actions {
	position: absolute;
	top: 4px;
	right: 4px;
	background: var(--pcl-board-card-bg);
	border-radius: 6px;
	padding: 2px;
	box-shadow: 0 0 6px 6px var(--pcl-board-card-bg);
}

/* The files on a card: a plain list of links, small enough to stay out of the
   way of the text above them. */
.pcl-board__files {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pcl-board__file-link {
	font-size: 12px;
	line-height: 1.45;
	color: var(--pcl-board-accent);
	word-break: break-word;
}

/* While a file is being dragged over a card, the card - not the column - says
   it will take it. The column keeps its own marker for cards being moved. */
.pcl-board__card.is-file-target {
	outline: 2px dashed var(--pcl-board-accent);
	outline-offset: 2px;
}

.pcl-board__card.is-uploading {
	opacity: 0.6;
}

/* The file section of the card dialog. */
.pcl-board-files__list {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pcl-board-files__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pcl-board-files__empty {
	color: var(--pcl-board-muted);
	font-size: 13px;
}

.pcl-board-files__zone {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--pcl-board-border);
	border-radius: var(--pcl-board-radius);
}

.pcl-board-files__zone.is-file-target {
	border-color: var(--pcl-board-accent);
	border-style: solid;
}

.pcl-board-files__hint {
	color: var(--pcl-board-muted);
	font-size: 13px;
}

/* The picker itself never shows: the button in front of it does the asking,
   and a native file input cannot be styled to match FC's buttons. */
.pcl-board-files__picker {
	display: none;
}

.pcl-board-files__note {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--pcl-board-muted);
}

/* A card somebody else is holding. Dashed rather than greyed out: it stays
   readable, it just cannot be touched - and the line under it says by whom, so
   the look is the second signal and never the only one. */
.pcl-board__card--locked {
	border-style: dashed;
	cursor: default;
}

.pcl-board__lock {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	font-style: italic;
	color: var(--pcl-board-muted);
}

/* Several people fit on one card, so the chips wrap onto a second row rather
   than pushing the card wider than its column. The spacing to the text above
   sits on the group, not on each chip. */
.pcl-board__assignees {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 8px;
}

.pcl-board__assignee {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 12px;
	color: var(--pcl-board-muted);
}

/* The long selector is not decoration. A full width board is an .alignfull
   child of the page content, and FluentCommunity blows up every image inside
   one:
     .fcom_space_page_wrap .fcom_space_page_content > .alignfull img
         { width: 100%; height: auto }
   That is 0-3-1 and beat a plain class, so the 20px portrait rendered at 269px
   (measured 18.09.2026). This selector is 0-4-1 and wins on its own terms,
   without !important. */
.pcl-board .pcl-board__card .pcl-board__assignee img.pcl-board__assignee-avatar,
.pcl-board__assignee-avatar,
.pcl-board__assignee-initials {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	object-fit: cover;
}

.pcl-board__assignee-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pcl-board-column-bg);
	color: var(--pcl-board-text);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Capped, not just clipped: without a maximum one long name would take the
   whole row and push the next chip to a line of its own. */
.pcl-board__assignee-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The two step buttons belong to the stacked layout and are switched on in
   the media query at the end of this file - side by side, a card is dragged. */
.pcl-board__steps {
	display: none;
}

/* FC's secondary button; ours is only how it shares the row. At the end of
   the board the button is disabled rather than removed, so the pair keeps its
   shape from the first column to the last. */
.pcl-board .pcl-board__step {
	gap: 6px;
	min-width: 0;
	max-width: calc(50% - 4px);
}

.pcl-board__step-arrow {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1;
}

/* Block, not Element Plus' inline-flex for spans in a button
   (`.el-button > span`, 0-1-1): an ellipsis only works on a block. */
.pcl-board .pcl-board__step-label {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The error is Element Plus' alert and the empty board FC's own "no items"
   box; ours is only where they sit. */
.pcl-board .pcl-board__error {
	margin: 0 0 10px;
}

.pcl-board .pcl-board__notice {
	flex: 1 1 100%;
	margin: 0;
}

.pcl-board__empty,
.pcl-board__loading {
	margin: 0;
	padding: 8px 2px;
	color: var(--pcl-board-muted);
	font-size: 13px;
}

/* Adding a card opens the whole dialog, so this is a button and not a text
   field: a card gets its description and the people responsible right away
   instead of a bare title now and a second visit later. FC's text button,
   stretched over the column and set flush left like the cards above it. */
.pcl-board .pcl-board__adder-card {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	margin-top: 10px;
}

.pcl-board__adder {
	display: flex;
	align-items: stretch;
	gap: 6px;
	margin-top: 10px;
}

.pcl-board__adder--column {
	flex: 0 0 200px;
	margin-top: 0;
	align-self: flex-start;
}

/* The one thing added to FC's text field: a focus ring. Element Plus draws
   focus from `.is-focus` (the script sets it), but FC's own
   `.el-input .el-input__wrapper` has the same specificity, loads later and
   keeps its hairline - measured on dev, 25.09.2026, focus changed nothing.
   FC's textarea does show focus, as a 1px ring in the button colour, so the
   text fields take that one and every field in the dialog answers alike. */
.pcl-board .el-input__wrapper.is-focus,
.pcl-board-dialog .el-input__wrapper.is-focus {
	box-shadow: 0 0 0 1px var(--fcom-primary-button, #2b2e33) inset;
}

.pcl-board__adder .el-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* FC's text field stands taller than Element Plus' 32px button beside it;
   the button follows the field instead of its own fixed height. */
.pcl-board .pcl-board__adder-button {
	flex: 0 0 auto;
	height: auto;
}

/* On a phone the columns stack: a horizontal scroller with drag and drop
   inside it fights the browser's own scrolling. */
@media (max-width: 640px) {
	.pcl-board__columns {
		flex-direction: column;
		overflow-x: visible;
	}

	.pcl-board__column,
	.pcl-board__adder--column {
		flex: 1 1 auto;
		width: 100%;
	}

	/* Stacked, the next column is a screenful away, so a card is moved with
	   the two buttons instead of dragged. */
	.pcl-board__steps {
		display: flex;
		justify-content: space-between;
		gap: 8px;
		margin-top: 10px;
	}

	/* A touch screen has no hover, so everything that waits for one would
	   never show up - the pencil and the cross included. */
	.pcl-board__card-actions,
	.pcl-board__column-actions {
		opacity: 1;
	}

	/* And once they are permanently there, whatever sits at the top of the
	   card needs the gutter after all - the tags when there are any, the
	   title otherwise. The reason it was dropped was a 200px column, where
	   44px broke a title over two lines while the card stood half empty; a
	   stacked card runs the whole width of the phone, where the same 44px
	   cost a tenth of the line. Since 0.9.0 the two buttons are Element
	   Plus' 24px circles and the pair measures 56px, so the gutter is 60px. */
	.pcl-board__card-title,
	.pcl-board__tags {
		padding-right: 60px;
	}

	/* Two gutters would push the title a second time - the tags already hold
	   the corner free. */
	.pcl-board__tags + .pcl-board__card-title {
		padding-right: 0;
	}
}

/* ── Dialog ─────────────────────────────────────────────────────────────── */

/* The native <dialog> is only the frame: it covers the viewport and is
 * otherwise invisible, so what shows is FluentCommunity's own el-dialog inside
 * it (`fcom_common_dialog`, see openDialog()). Its backdrop takes Element
 * Plus' overlay colour, the one behind FC's own dialogs. A click on the frame
 * is a click beside the window, which is how the script tells it apart. */
.pcl-board-dialog {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow: auto;
}

.pcl-board-dialog::backdrop {
	background: var(--el-overlay-color-lighter, rgba(0, 0, 0, 0.5));
}

/* Element Plus sizes a dialog through this variable - the `width` FC passes to
   its own. */
.pcl-board-dialog .el-dialog {
	--el-dialog-width: min(460px, calc(100vw - 32px));
}

.pcl-board-dialog__text {
	margin: 0 0 16px;
}

/* The tags a card already carries, above the line that adds to them:
   Element Plus' closable tags, in the colour the word has on the card. */
.pcl-board-dialog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.pcl-board-dialog__tags:empty {
	display: none;
}

.pcl-board-dialog__tag-field {
	width: 100%;
}

.pcl-board-dialog .el-tag {
	--el-tag-bg-color: var(--pcl-board-tag);
	--el-tag-border-color: var(--pcl-board-tag);
	--el-tag-text-color: #fff;
	--el-tag-hover-color: rgba(255, 255, 255, 0.25);
	max-width: 100%;
}

.pcl-board-dialog .el-tag__content {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The cross is a real button, for the keyboard, so the browser's button look
   comes off. Element Plus draws it at 14px; the invisible ring around it
   makes it a 24px target, which a thumb can hit. */
.pcl-board-dialog .el-tag__close {
	position: relative;
	padding: 0;
	border: 0;
	background: transparent;
}

.pcl-board-dialog .el-tag__close::before {
	content: "";
	position: absolute;
	inset: -5px;
}

/* The people picker. Its own scroller, because a forum with sixty members
   would otherwise push the buttons off the bottom of the screen. */
.pcl-board-dialog__checklist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	max-height: 40vh;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--fcom-primary-border, #e5e7eb);
	border-radius: 8px;
}

/* Element Plus' checkbox, laid out as a full row instead of its inline
   32px-high chip with a margin to the next one. */
.pcl-board-dialog__checklist .pcl-board-dialog__person {
	display: flex;
	height: auto;
	margin-right: 0;
	padding: 5px 6px;
	border-radius: 6px;
}

.pcl-board-dialog__checklist .pcl-board-dialog__person:hover {
	background: var(--fcom-light-bg, #f3f4f6);
}

/* The cards of a milestone: the same rows, and a card title may run over
   two lines - Element Plus keeps its checkbox on one. */
.pcl-board-dialog__checklist .pcl-board-dialog__card {
	display: flex;
	align-items: flex-start;
	height: auto;
	margin-right: 0;
	padding: 4px 6px;
	border-radius: 6px;
	white-space: normal;
}

.pcl-board-dialog__checklist .pcl-board-dialog__card:hover {
	background: var(--fcom-light-bg, #f3f4f6);
}

.pcl-board-dialog__card .el-checkbox__input {
	margin-top: 2px;
}

.pcl-board-dialog__card .el-checkbox__label {
	min-width: 0;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.pcl-board-dialog__group {
	margin: 8px 6px 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fcom-secondary-text, #6b7280);
}

.pcl-board-dialog__group:first-child {
	margin-top: 2px;
}

/* Radios one per line, as in the settings panel. */
.pcl-board-dialog__radios {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.pcl-board-dialog__radios .pcl-board-dialog__radio {
	display: flex;
	align-items: flex-start;
	height: auto;
	margin-right: 0;
	padding: 4px 0;
	white-space: normal;
}

.pcl-board-dialog__radio .el-radio__input {
	margin-top: 2px;
}

.pcl-board-dialog__radio .el-radio__label {
	line-height: 1.4;
}

.pcl-board-dialog__person .el-checkbox__label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.pcl-board-dialog__person-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcl-board-dialog__person-avatar,
.pcl-board-dialog__person-initials {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	object-fit: cover;
}

.pcl-board-dialog__person-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fcom-light-bg, #f3f4f6);
	color: var(--fcom-primary-text, #111827);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* ── Due date ───────────────────────────────────────────────────────────── */

.pcl-board__due {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	padding: 2px 7px 2px 5px;
	border-radius: 999px;
	border: 1px solid var(--pcl-board-border);
	font-size: 12px;
	line-height: 1.5;
	color: var(--pcl-board-muted);
}

.pcl-board__due-icon {
	font-size: 11px;
	line-height: 1;
}

/* Overdue and today carry a word as well as a colour - the chip reads
   "Gestern" or "Heute", so the colour is the second signal, never the only
   one. Both tones are the 700 step of their hue, like the tags: dark enough
   for white text and dark enough for the dark portal theme. */
.pcl-board__due--over {
	background: #b42318;
	border-color: transparent;
	color: #fff;
}

.pcl-board__due--today {
	background: #b54708;
	border-color: transparent;
	color: #fff;
}

.pcl-board__due--soon {
	color: var(--pcl-board-text);
	border-color: var(--pcl-board-text);
}

/* ── The done column and its archive ────────────────────────────────────── */

/* A shade apart from the working columns, so the eye skips it when looking
   for what is left to do.
 *
 * Mixed towards the text colour, not towards the card surface: on the dark
 * theme FluentCommunity's column and card colours are #2B303B and #2B2E33,
 * near enough that a mix of the two came out invisible (measured 22.09.2026).
 * The text colour is the one thing guaranteed to sit far from the background
 * in either theme, so the same rule darkens the column on a light page and
 * lightens it on a dark one. */
.pcl-board__column--done {
	/* As a property as well, so the buttons that lie over the column head
	   can wear the colour of the column they lie on. */
	--pcl-board-surface: color-mix(in srgb, var(--pcl-board-column-bg) 90%, var(--pcl-board-text));

	background: var(--pcl-board-surface);
}

/* ── The column head's buttons lie over it ──────────────────────────────── */

/* Where there is a pointer, the arrows, the plus, the pencil and the cross
   take no room in the head: they appear over its right end on hover, on the
   column's own colour, the way a card's buttons do.
 *
 * In the row they reserved their width even while invisible. With four of
 * them a 200px column left 56px for its name, with the plus (0.14.11) 28px -
 * measured on 10.10.2026, "Vorbereitet" then broke in the middle of the word
 * and stood five lines tall. Now the name has the whole head.
 *
 * Only above the width where the board stacks: below it there is no hover,
 * the buttons are always there, and a stacked column is as wide as the
 * screen. */
@media (min-width: 641px) {
	.pcl-board__column-head {
		position: relative;
	}

	.pcl-board__column-steps,
	.pcl-board__column-actions {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 0;
		background: var(--pcl-board-surface, var(--pcl-board-column-bg));
		box-shadow: 0 0 6px 6px var(--pcl-board-surface, var(--pcl-board-column-bg));
	}

	.pcl-board__column-actions {
		right: 0;
	}

	/* Left of the three action buttons: 3 x 24px, two gaps of 4px, and 8px
	   between the two groups - close enough for their shadows to meet, so the
	   name does not show through between them. */
	.pcl-board__column-steps {
		right: 88px;
	}
}

.pcl-board__stack {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 200px;
	min-width: 200px;
	max-width: 360px;
}

/* From three columns on, the row fills the board: the cap of 360px is lifted.
 *
 * The cap is there so that a board of one or two columns does not stretch its
 * cards across half the screen, and for those it stays. With three or more it
 * only left a strip of air at the right - 36px at four columns on a 1512px
 * board (PC'L, 10.10.2026). It went unnoticed while the "Spalte hinzufügen"
 * field stood in that strip, which is gone since 0.14.11.
 *
 * Counted with :has() on the row's children; a browser without it keeps the
 * cap, which is the state before. */
.pcl-board__columns:has(> :nth-child(3)) > .pcl-board__column,
.pcl-board__columns:has(> :nth-child(3)) > .pcl-board__stack {
	max-width: none;
}

/* Inside the stack the column no longer sizes itself - the stack does. */
.pcl-board__stack > .pcl-board__column {
	flex: 0 0 auto;
	min-width: 0;
	max-width: none;
	width: 100%;
}

.pcl-board__archive {
	/* One step further than the done column, same direction: finished is
	   quieter than working, archived is quieter still. */
	background: color-mix(in srgb, var(--pcl-board-column-bg) 84%, var(--pcl-board-text));
	border: 1px solid var(--pcl-board-border);
	border-radius: var(--pcl-board-radius);
	padding: 8px 12px;
}

.pcl-board__archive-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--pcl-board-muted);
}

.pcl-board__archive-summary::-webkit-details-marker {
	display: none;
}

/* The triangle is drawn here rather than left to the browser, because
   list-style: none takes the native one away in every engine. */
.pcl-board__archive-title::before {
	content: "\25B8";
	display: inline-block;
	width: 1em;
	transition: transform 120ms ease;
}

.pcl-board__archive[open] .pcl-board__archive-title::before {
	transform: rotate(90deg);
}

.pcl-board__archive-count {
	flex: 0 0 auto;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--pcl-board-column-bg);
	font-size: 12px;
}

.pcl-board__archive .pcl-board__cards {
	margin-top: 8px;
}

/* ── Compact cards ──────────────────────────────────────────────────────── */

/* Kein Einzug mehr links: das Dreieck, das dort stand, ist am 22.09.2026
   gefallen - auf einer zugeklappten Spalte ist jede Zeile eine, an der jemand
   vorbeiscrollt. Die Karte selbst ist der Schalter. */
.pcl-board__card--compact {
	padding: 4px 8px;
}

/* Offen braucht die Karte wieder Luft, sonst klebt der Text am Rand. */
.pcl-board__card--compact.is-open {
	padding: 6px 10px 8px;
}

/* Smaller and unbolded: a finished card is a line to scan past, not a heading
   to read. The weight of the working columns would keep pulling the eye to the
   column that needs it least. */
.pcl-board__card--compact .pcl-board__card-title {
	font-size: 13px;
	font-weight: 400;
}

/* Everything but the title waits for the click. display: none and not a
   height animation: the body holds avatars and tags of unknown height, and a
   collapse that guesses wrong looks broken. */
.pcl-board__card--compact:not(.is-open) .pcl-board__card-text,
.pcl-board__card--compact:not(.is-open) .pcl-board__assignees,
.pcl-board__card--compact:not(.is-open) .pcl-board__tags,
.pcl-board__card--compact:not(.is-open) .pcl-board__due,
.pcl-board__card--compact:not(.is-open) .pcl-board__steps {
	display: none;
}

/* ── Moving a column ────────────────────────────────────────────────────── */

.pcl-board__column-steps {
	display: flex;
	gap: 2px;
	margin-left: auto;
	opacity: 0;
	transition: opacity 120ms ease;
}

.pcl-board__column:hover .pcl-board__column-steps,
.pcl-board__column-steps:focus-within {
	opacity: 1;
}

/* The arrows point the way the columns actually lie: sideways in the row,
   up and down once they stack. With `.pcl-board` in front: Element Plus
   shows every span in a button (`.el-button > span`, 0-1-1), which put both
   pairs on screen at once. */
.pcl-board .pcl-board__column-step-stacked {
	display: none;
}

@media (max-width: 640px) {
	.pcl-board__stack,
	.pcl-board__stack > .pcl-board__column {
		flex: 1 1 auto;
		width: 100%;
		max-width: none;
	}

	.pcl-board .pcl-board__column-step-row {
		display: none;
	}

	.pcl-board .pcl-board__column-step-stacked {
		display: inline-flex;
	}

	/* Nothing to hover on a touch screen - the controls stay out. */
	.pcl-board__column-steps {
		opacity: 1;
	}
}

/* ── Long card text ─────────────────────────────────────────────────────── */

/* Three lines, then the browser's own ellipsis. The class comes from the
   script, which measures the full height first - so a card that never needed
   shortening also never gets the pointer cursor or the click. */
.pcl-board__card--long:not(.is-open) .pcl-board__card-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.pcl-board__card--long,
.pcl-board__card--compact {
	cursor: pointer;
}

/* Dragging wins over the pointer where a card can be moved: the grab hand
   says what the card does when you press and hold, which is the gesture that
   moves work across the board. */
.pcl-board:not(.pcl-board--readonly) .pcl-board__card--long,
.pcl-board:not(.pcl-board--readonly) .pcl-board__card--compact {
	cursor: grab;
}

/* A hint that there is more, for the cards that are cut off. Not a button:
   the whole card already is one, and a second control for the same thing is
   one control too many. */
.pcl-board__card--long:not(.is-open) .pcl-board__card-text::after {
	content: "";
}

.pcl-board__card--long:not(.is-open)::after {
	content: "\2026";
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1;
	color: var(--pcl-board-muted);
}

/* The card is the control now, so it is a tab stop and needs to show it. */
.pcl-board__card:focus-visible {
	outline: 2px solid var(--pcl-board-accent);
	outline-offset: 2px;
}