/* FeatureMap - Frontend Styles */

/* ------------------------------------------------------------------ */
/* Variables */
/* ------------------------------------------------------------------ */
.fm-app {
	--blue:       #0069ff;
	--blue-hover: #0057d6;
	--dark:       #121212;
	--card:       #ffffff;
	--bg:         #f2f2f2;
	--border:     #e4e4e4;
	--muted:      #888;
	--success:    #22c55e;
	--warning:    #f59e0b;
	--danger:     #ef4444;
	--radius-sm:  8px;
	--radius-md:  12px;
	--radius-lg:  16px;
	--shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.08);
	--shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
	--shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);
	--font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-family:  var(--font);
	color:        var(--dark);
	max-width:    780px;
	margin:       0 auto;
	padding:      0 16px 48px;
}

/* ------------------------------------------------------------------ */
/* Header */
/* ------------------------------------------------------------------ */
.fm-header {
	text-align: center;
	padding:    32px 0 24px;
}

.fm-title {
	font-size:   clamp(22px, 4vw, 30px);
	font-weight: 800;
	margin:      0 0 8px;
	color:       var(--dark);
	letter-spacing: -0.02em;
}

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

/* Per-board header alignment (title + subtitle). */
.fm-header-left   { text-align: left; }
.fm-header-center { text-align: center; }
.fm-header-right  { text-align: right; }

/* FeatureMap full-width page template: let embeds break the theme's content
   width cap (the theme constrains children with zero-specificity :where()). */
.fm-fullwidth .fm-app,
.page-template-full-width .fm-app { max-width: none; width: 100%; }
/* Wide variant: cap the board at 1200px, centered. */
.page-template-wide .fm-app { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* ------------------------------------------------------------------ */
/* Toolbar */
/* ------------------------------------------------------------------ */
.fm-toolbar {
	display:        flex;
	align-items:    center;
	gap:            10px;
	margin-bottom:  16px;
	flex-wrap:      wrap;
}

.fm-search-wrap {
	position:   relative;
	flex:       1;
	min-width:  200px;
}

.fm-search-input {
	width:         100%;
	height:        44px;
	padding:       0 76px 0 16px;
	border:        1.5px solid var(--border);
	border-radius: var(--radius-lg);
	font-size:     14px;
	font-family:   var(--font);
	background:    var(--card);
	color:         var(--dark);
	box-sizing:    border-box;
	outline:       none;
	transition:    border-color 0.15s;
}

.fm-search-input:focus {
	border-color: var(--blue);
}

.fm-search-btn,
.fm-search-clear {
	position:   absolute;
	top:        50%;
	transform:  translateY(-50%);
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    6px;
	color:      var(--muted);
	display:    flex;
	align-items: center;
	transition: color 0.15s;
}

.fm-search-btn  { right: 36px; }
.fm-search-clear { right: 8px; }

.fm-search-btn:hover,
.fm-search-clear:hover { color: var(--dark); }

/* Search suggestions */
.fm-suggestions {
	position:         absolute;
	top:              calc(100% + 4px);
	left:             0;
	right:            0;
	background:       var(--card);
	border:           1.5px solid var(--border);
	border-radius:    var(--radius-md);
	box-shadow:       var(--shadow-md);
	list-style:       none;
	margin:           0;
	padding:          4px;
	z-index:          200;
	max-height:       280px;
	overflow-y:       auto;
}

.fm-suggestion-item {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       10px 12px;
	border-radius: var(--radius-sm);
	cursor:        pointer;
	font-size:     14px;
	transition:    background 0.1s;
}

.fm-suggestion-item:hover {
	background: var(--bg);
}

.fm-suggestion-item .fm-sug-status {
	font-size:     11px;
	padding:       2px 8px;
	border-radius: 20px;
	font-weight:   600;
	color:         #fff;
	flex-shrink:   0;
}

.fm-suggestion-item .fm-sug-title {
	flex: 1;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.fm-toolbar-right {
	display:     flex;
	align-items: center;
	gap:         10px;
	flex-shrink: 0;
}

.fm-sort-select {
	height:        44px;
	padding:       0 14px;
	border:        1.5px solid var(--border);
	border-radius: var(--radius-lg);
	font-size:     14px;
	font-family:   var(--font);
	background:    var(--card);
	color:         var(--dark);
	cursor:        pointer;
	outline:       none;
	transition:    border-color 0.15s;
}

.fm-sort-select:focus { border-color: var(--blue); }

.fm-add-btn {
	display:       flex;
	align-items:   center;
	gap:           6px;
	height:        44px;
	padding:       0 20px;
	background:    var(--blue);
	color:         #fff;
	border:        none;
	border-radius: var(--radius-lg);
	font-size:     14px;
	font-weight:   600;
	font-family:   var(--font);
	cursor:        pointer;
	transition:    background 0.15s, transform 0.1s;
	white-space:   nowrap;
}

.fm-add-btn:hover    { background: var(--blue-hover); }
.fm-add-btn:active   { transform: scale(0.98); }

/* ------------------------------------------------------------------ */
/* Tabs */
/* ------------------------------------------------------------------ */
.fm-tabs-wrap {
	display:       flex;
	gap:           4px;
	background:    #e2e2e2;
	background:    color-mix(in srgb, var(--bg) 88%, #000); /* recessed track, dark-aware */
	border-radius: var(--radius-lg);
	padding:       5px;
	box-shadow:
		inset 0 1px 3px rgba(0, 0, 0, 0.12),
		0 4px 20px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.fm-tab {
	flex:          1;
	padding:       12px 8px;
	border:        none;
	border-radius: var(--radius-md);
	background:    transparent;
	font-size:     14px;
	font-weight:   600;
	font-family:   var(--font);
	color:         var(--muted);
	cursor:        pointer;
	transition:    background 0.18s, color 0.18s, box-shadow 0.18s;
	text-align:    center;
	line-height:   1.2;
}

.fm-tab:hover:not([aria-selected="true"]) {
	background: rgba(0, 0, 0, 0.06);
	background: color-mix(in srgb, var(--dark) 10%, transparent); /* subtle, works light + dark */
	color:      var(--dark);
}

.fm-tab[aria-selected="true"] {
	background:  var(--card);
	color:       var(--blue);
	box-shadow:  0 2px 8px rgba(0, 0, 0, 0.14);
}

/* ------------------------------------------------------------------ */
/* User quota bar */
/* ------------------------------------------------------------------ */
.fm-user-quota {
	font-size:     13px;
	color:         var(--muted);
	margin-bottom: 10px;
	padding:       8px 14px;
	background:    var(--bg);
	border-radius: var(--radius-sm);
	border-left:   3px solid var(--border);
}

.fm-user-quota.is-warning {
	color:         #92400e;
	background:    #fffbeb;
	border-color:  var(--warning);
}

.fm-user-quota.is-full {
	color:         #b91c1c;
	background:    #fef2f2;
	border-color:  var(--danger);
}

/* ------------------------------------------------------------------ */
/* Status bar */
/* ------------------------------------------------------------------ */
.fm-status-bar {
	padding:       12px 16px;
	border-radius: var(--radius-md);
	font-size:     14px;
	margin-bottom: 12px;
	font-weight:   500;
}

.fm-status-bar.is-error   { background: #fef2f2; color: #b91c1c; }
.fm-status-bar.is-success { background: #f0fdf4; color: #15803d; }
.fm-status-bar.is-info    { background: #eff6ff; color: #1d4ed8; }
.fm-status-bar.is-warning { background: #fffbeb; color: #92400e; }

/* ------------------------------------------------------------------ */
/* List */
/* ------------------------------------------------------------------ */
.fm-list { display: flex; flex-direction: column; gap: 8px; }

.fm-empty {
	text-align: center;
	padding:    48px 24px;
	color:      var(--muted);
}

.fm-empty-icon { font-size: 36px; margin-bottom: 12px; }
.fm-empty h3   { margin: 0 0 6px; font-size: 16px; color: var(--dark); }
.fm-empty p    { margin: 0; font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Request item */
/* ------------------------------------------------------------------ */
.fm-item {
	background:    var(--card);
	border:        var(--fm-bw, 1.5px) solid var(--border);
	border-radius: var(--radius-md);
	overflow:      hidden;
	transition:    box-shadow 0.15s;
}

.fm-item:hover {
	box-shadow: var(--shadow-sm);
}

/* Pinned requests: subtle accent edge plus a small badge before the title. */
.fm-item.is-pinned {
	border-color: var(--blue);
	box-shadow: inset 3px 0 0 var(--blue);
}
.fm-pin-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            3px;
	margin-right:   8px;
	padding:        1px 8px 1px 6px;
	border-radius:  999px;
	background:     var(--blue);
	color:          #fff;
	font-size:      10px;
	font-weight:    700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height:    1.6;
}
.fm-pin-badge svg { flex: none; }

/* Admin-only "Edit" link shown under an embed (board, kanban, roadmap, poll). */
.fm-admin-edit { margin-top: 12px; text-align: center; }
.fm-admin-edit-link {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 12px; border-radius: 999px;
	font-size: 12px; font-weight: 600; line-height: 1.4;
	color: #555; background: rgba(0,0,0,.04);
	border: 1px solid rgba(0,0,0,.12); text-decoration: none;
	transition: background .12s, color .12s, border-color .12s;
}
.fm-admin-edit-link:hover { background: rgba(0,0,0,.07); color: #111; border-color: rgba(0,0,0,.2); }
.fm-admin-edit-link svg { flex: none; }

.fm-item-head {
	display:     flex;
	align-items: center;
	gap:         12px;
	padding:     var(--fm-pad, 14px) var(--fm-pad, 16px);
	cursor:      pointer;
	user-select: none;
}

/* Vote button */
.fm-vote-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            8px;
	min-width:      56px;
	padding:        10px 12px;
	background:     var(--bg);
	border:         1.5px solid var(--border);
	border-radius:  var(--radius-sm);
	cursor:         pointer;
	font-family:    var(--font);
	transition:     background 0.15s, border-color 0.15s, color 0.15s;
	flex-shrink:    0;
}

.fm-vote-btn svg {
	display:    block;
	fill:       var(--muted);
	transition: fill 0.15s;
	flex-shrink: 0;
}

.fm-vote-btn:not(:disabled):hover svg,
.fm-vote-btn.is-voted svg {
	fill: var(--blue);
}

.fm-vote-btn .fm-vote-count {
	font-size:   14px;
	font-weight: 700;
	color:       var(--dark);
	line-height: 1;
}

.fm-vote-btn:not(:disabled):hover {
	background:   rgba(0, 105, 255, 0.10);
	background:   color-mix(in srgb, var(--blue) 10%, transparent);
	border-color: var(--blue);
}

.fm-vote-btn.is-voted {
	background:   rgba(0, 105, 255, 0.12);
	background:   color-mix(in srgb, var(--blue) 14%, transparent);
	border-color: var(--blue);
}

.fm-vote-btn.is-voted .fm-vote-count {
	color: var(--blue);
}

.fm-vote-btn:disabled {
	cursor:  default;
	opacity: 0.5;
}

/* Title and meta */
.fm-item-main {
	flex:       1;
	min-width:  0;
}

.fm-item-title {
	font-size:     15px;
	font-weight:   600;
	color:         var(--dark);
	margin:        0 0 4px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.fm-item-byline {
	font-size: 12px;
	color:     var(--muted);
}

/* Category tags + filter (pro) */
.fm-item-cats { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.fm-cat-tag {
	display:        inline-block;
	font-size:      10px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color:          var(--muted);
	background:     var(--bg);
	border:         1px solid var(--border);
	border-radius:  20px;
	padding:        1px 8px;
}
.fm-cat-select {
	height:        44px;
	padding:       0 12px;
	border:        1.5px solid var(--border);
	border-radius: var(--radius-lg);
	font-size:     14px;
	font-family:   var(--font);
	background:    var(--card);
	color:         var(--dark);
	cursor:        pointer;
	outline:       none;
}
.fm-cat-select:focus { border-color: var(--blue); }

.fm-item-byline strong {
	font-weight: 700;
	color:       var(--dark);
}

/* Pills and actions */
.fm-item-right {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-shrink: 0;
}

.fm-pill {
	display:       inline-flex;
	align-items:   center;
	padding:       3px 10px;
	border-radius: 20px;
	font-size:     11px;
	font-weight:   700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fm-pill-active   { background: #f59e0b; color: #fff; }
.fm-pill-complete { background: #22c55e; color: #fff; }
.fm-pill-pending  { background: #6366f1; color: #fff; }

.fm-item-actions {
	display:     flex;
	align-items: center;
	gap:         4px;
}

.fm-icon-btn {
	display:     flex;
	align-items: center;
	justify-content: center;
	width:       32px;
	height:      32px;
	border:      none;
	border-radius: var(--radius-sm);
	background:  transparent;
	cursor:      pointer;
	color:       var(--muted);
	transition:  background 0.15s, color 0.15s;
}

.fm-icon-btn:hover           { background: var(--bg); color: var(--dark); }
.fm-icon-btn.is-delete:hover { background: #fef2f2; color: var(--danger); }

/* Expand chevron */
.fm-chevron {
	width:       28px;
	height:      28px;
	display:     flex;
	align-items: center;
	justify-content: center;
	color:       var(--muted);
	flex-shrink: 0;
	transition:  transform 0.2s;
}

.fm-item.is-open .fm-chevron {
	transform: rotate(180deg);
}

/* Item body (accordion) */
.fm-item-body {
	display:       none;
	padding:       0 16px 16px;
	border-top:    1.5px solid var(--border);
}

.fm-item.is-open .fm-item-body {
	display: block;
}

.fm-item-desc {
	font-size:   14px;
	color:       var(--dark);
	margin:      12px 0 8px;
	line-height: 1.6;
}

.fm-item-link {
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	font-size:   13px;
	color:       var(--blue);
	text-decoration: none;
	margin-bottom: 10px;
}

.fm-item-link:hover { text-decoration: underline; }

.fm-item-footer {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	font-size:   12px;
	color:       var(--muted);
	margin-top:  10px;
	padding-top: 10px;
	border-top:  1px solid var(--border);
}

/* ------------------------------------------------------------------ */
/* Load more */
/* ------------------------------------------------------------------ */
.fm-load-more-wrap {
	text-align:  center;
	margin-top:  20px;
}

.fm-load-more-btn {
	height:        44px;
	padding:       0 32px;
	background:    var(--card);
	color:         var(--dark);
	border:        1.5px solid var(--border);
	border-radius: var(--radius-lg);
	font-size:     14px;
	font-weight:   600;
	font-family:   var(--font);
	cursor:        pointer;
	transition:    background 0.15s, border-color 0.15s;
}

.fm-load-more-btn:hover {
	background:   var(--bg);
	border-color: #ccc;
}

/* ------------------------------------------------------------------ */
/* Modal */
/* ------------------------------------------------------------------ */
.fm-modal[hidden] { display: none !important; }

.fm-modal {
	position:  fixed;
	inset:     0;
	z-index:   1000;
	display:   flex;
	align-items: center;
	justify-content: center;
	padding:   16px;
}

.fm-modal-backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(2px);
}

.fm-modal-inner {
	position:      relative;
	background:    var(--card);
	border-radius: var(--radius-lg);
	box-shadow:    var(--shadow-lg);
	padding:       32px;
	width:         100%;
	max-width:     520px;
	max-height:    90vh;
	overflow-y:    auto;
}

.fm-modal-close {
	position:      absolute;
	top:           14px;
	right:         14px;
	width:         32px;
	height:        32px;
	display:       flex;
	align-items:   center;
	justify-content: center;
	background:    var(--bg);
	border:        none;
	border-radius: var(--radius-sm);
	cursor:        pointer;
	color:         var(--muted);
	transition:    background 0.15s, color 0.15s;
}

.fm-modal-close:hover { background: var(--border); color: var(--dark); }

.fm-modal-title {
	font-size:   20px;
	font-weight: 700;
	margin:      0 0 8px;
	color:       var(--dark);
}

.fm-modal-desc {
	font-size:     14px;
	color:         var(--muted);
	margin:        0 0 20px;
	line-height:   1.5;
}

.fm-request-count {
	font-size:     13px;
	color:         var(--muted);
	margin:        0 0 16px;
	padding:       8px 12px;
	background:    var(--bg);
	border-radius: var(--radius-sm);
}

.fm-request-count.is-warning { color: #92400e; background: #fffbeb; }

.fm-contact-note {
	font-size:   12px;
	color:       var(--muted);
	margin:      6px 0 0;
	line-height: 1.4;
}

/* Official response (pro) - shown on board cards and roadmap cards */
.fm-official-reply {
	margin:        12px 0 4px;
	padding:       10px 12px;
	background:    #eff6ff;
	border-left:   3px solid var(--blue);
	border-radius: var(--radius-sm);
	font-size:     13px;
	color:         var(--dark);
	line-height:   1.5;
	white-space:   pre-wrap;
}

/* Follow toggle (pro) */
.fm-follow-btn {
	margin-top:    10px;
	height:        32px;
	padding:       0 14px;
	background:    var(--card);
	color:         var(--blue);
	border:        1.5px solid var(--blue);
	border-radius: var(--radius-sm);
	font-size:     12px;
	font-weight:   600;
	font-family:   var(--font);
	cursor:        pointer;
	transition:    background 0.15s, color 0.15s;
}
.fm-follow-btn:hover           { background: #eff6ff; }
.fm-follow-btn.is-following    { background: var(--blue); color: #fff; }

.fm-official-reply-label {
	display:        block;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:          var(--blue);
	margin-bottom:  4px;
}

/* Login gate */
.fm-login-btns {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
}

/* Similar requests warning */
.fm-similar-box {
	background:    #fffbeb;
	border:        1.5px solid #fcd34d;
	border-radius: var(--radius-sm);
	padding:       12px 14px;
	margin-bottom: 16px;
}

.fm-similar-title {
	font-size:   13px;
	font-weight: 600;
	color:       #92400e;
	margin:      0 0 6px;
}

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

.fm-similar-list li {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   13px;
	padding:     3px 0;
}

.fm-similar-list li button {
	background:    none;
	border:        none;
	color:         var(--blue);
	cursor:        pointer;
	font-size:     13px;
	font-family:   var(--font);
	padding:       0;
	text-align:    left;
	text-decoration: underline;
}

/* Form */
.fm-field {
	position:      relative;
	margin-bottom: 18px;
}

.fm-label {
	display:     block;
	font-size:   13px;
	font-weight: 600;
	color:       var(--dark);
	margin-bottom: 6px;
}

.fm-required { color: var(--danger); margin-left: 2px; }
.fm-optional { color: var(--muted); font-weight: 400; font-size: 12px; }

.fm-input {
	width:         100%;
	padding:       10px 14px;
	border:        1.5px solid var(--border);
	border-radius: var(--radius-md);
	font-size:     14px;
	font-family:   var(--font);
	color:         var(--dark);
	background:    var(--card);
	box-sizing:    border-box;
	outline:       none;
	transition:    border-color 0.15s;
}

.fm-input:focus { border-color: var(--blue); }

.fm-textarea { resize: vertical; min-height: 80px; }

.fm-char-count {
	position:  absolute;
	bottom:    -18px;
	right:     0;
	font-size: 11px;
	color:     var(--muted);
}

.fm-char-count.is-near  { color: var(--warning); }
.fm-char-count.is-limit { color: var(--danger); }

.fm-form-actions {
	display:         flex;
	justify-content: flex-end;
	gap:             10px;
	margin-top:      24px;
}

/* Buttons */
.fm-btn {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	height:        42px;
	padding:       0 22px;
	border-radius: var(--radius-md);
	font-size:     14px;
	font-weight:   600;
	font-family:   var(--font);
	cursor:        pointer;
	border:        none;
	text-decoration: none;
	transition:    background 0.15s, transform 0.1s;
}

.fm-btn:active { transform: scale(0.98); }

.fm-btn-primary,
.fm-btn-primary:link,
.fm-btn-primary:visited {
	background: var(--blue);
	color:      #fff;
}

.fm-btn-primary:hover,
.fm-btn-primary:focus { background: var(--blue-hover); color: #fff; }
.fm-btn-primary:disabled {
	background: #b3cff7;
	cursor:     not-allowed;
	transform:  none;
}

.fm-btn-secondary {
	background: var(--bg);
	color:      var(--dark);
	border:     1.5px solid var(--border);
}

.fm-btn-secondary:hover { background: var(--border); }

/* ------------------------------------------------------------------ */
/* Spinners */
/* ------------------------------------------------------------------ */
@keyframes fm-spin {
	to { transform: rotate(360deg); }
}

/* Inline spinner - inherits color from parent */
.fm-spinner {
	display:      inline-block;
	width:        16px;
	height:       16px;
	border:       2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation:    fm-spin 0.65s linear infinite;
	vertical-align: middle;
	flex-shrink:  0;
}

/* Large centered spinner for list area */
.fm-list-loading {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         56px 0;
	color:           var(--blue);
}

.fm-list-loading .fm-spinner {
	width:        36px;
	height:       36px;
	border-width: 3px;
}

/* Vote button: swap arrow for spinner */
.fm-vote-icon {
	position:  relative;
	display:   flex;
	align-items: center;
	justify-content: center;
	width:     15px;
	height:    18px;
}

.fm-vote-icon svg        { display: block; }
.fm-vote-icon .fm-spinner { display: none; }

.fm-vote-btn.is-loading .fm-vote-icon svg        { display: none; }
.fm-vote-btn.is-loading .fm-vote-icon .fm-spinner {
	display: inline-block;
	width:   18px;
	height:  18px;
	color:   var(--blue);
}

/* Load more button spinner */
.fm-load-more-btn {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
}

.fm-load-more-btn:disabled {
	opacity: 0.7;
	cursor:  default;
}

/* Submit button spinner */
.fm-btn.is-loading {
	gap:    8px;
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Responsive */
/* ------------------------------------------------------------------ */
@media (max-width: 580px) {
	.fm-toolbar    { gap: 8px; }
	.fm-toolbar-right { width: 100%; justify-content: space-between; }
	.fm-sort-select { flex: 1; }
	.fm-add-btn     { flex: 1; justify-content: center; }

	.fm-tab {
		font-size: 13px;
		padding:   10px 4px;
	}

	/* Stack the request row so the title keeps a full line and the status +
	   action buttons drop onto their own line below it (no more squeezed title). */
	.fm-item-head {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"vote main chevron"
			"vote right chevron";
		align-items: center;
		column-gap: 10px;
		row-gap: 6px;
		padding: 12px;
	}
	.fm-item-head .fm-vote-btn { grid-area: vote; }
	.fm-item-main              { grid-area: main; }
	.fm-item-right             { grid-area: right; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
	.fm-item-head .fm-chevron  { grid-area: chevron; }
	.fm-item-title  { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; line-height: 1.3; }
	.fm-item-byline { font-size: 11px; }
	.fm-pill, .fm-mod-status { font-size: 10px; }

	.fm-modal-inner { padding: 24px 20px; }

	.fm-form-actions { flex-direction: column-reverse; }
	.fm-btn          { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Single-request SEO page                                            */
/* ------------------------------------------------------------------ */
.fm-single { max-width: 760px; margin: 40px auto; padding: 0 20px; }
.fm-single-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
.fm-single-head { display: flex; gap: 16px; align-items: flex-start; }
.fm-single-main { flex: 1 1 auto; min-width: 0; }
.fm-single-title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; color: var(--dark); }
.fm-single-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-single-date { color: var(--muted); font-size: 13px; }
.fm-single-desc { margin-top: 16px; color: var(--dark); line-height: 1.6; }
/* Comment thread on the single page: reuses the board's .fm-item comment markup
   but without the card chrome (it sits inside the single card already). */
.fm-item.fm-single-comments { border: 0; background: transparent; box-shadow: none; overflow: visible; margin: 18px 0 0; border-radius: 0; }
.fm-item.fm-single-comments .fm-item-body { display: block; padding: 0; border-top: 0; }
.fm-item.fm-single-comments .fm-comments { margin-top: 0; }
.fm-single-back { margin-top: 22px; }
.fm-single-back a { color: var(--blue); text-decoration: none; }
.fm-item-permalink { display: inline-block; margin-top: 8px; color: var(--blue); text-decoration: none; font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Compact / list layout (shortcode layout="list")                    */
/* ------------------------------------------------------------------ */
.fm-layout-list .fm-list { gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.fm-layout-list .fm-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.fm-layout-list .fm-item:last-child { border-bottom: 0; }
.fm-layout-list .fm-item:hover { box-shadow: none; background: var(--bg); }
.fm-layout-list .fm-item-head { padding: 10px 14px; gap: 12px; }
.fm-layout-list .fm-vote-btn { transform: scale(.9); }
.fm-layout-list .fm-item-byline { display: none; }
.fm-layout-list .fm-item-title { font-size: 14px; }

/* Custom fields (pro) */
.fm-item-cf { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.fm-item-cf dt { color: var(--muted); font-size: 12px; font-weight: 600; margin: 0; }
.fm-item-cf dd { color: var(--dark); font-size: 13px; margin: 0; }

/* ------------------------------------------------------------------ */
/* Moderation: inline status picker (managers, pro)                   */
/* ------------------------------------------------------------------ */
.fm-mod-status {
	-webkit-appearance: none; appearance: none;
	border: 0; border-radius: 20px; color: #fff;
	font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1.4;
	padding: 3px 22px 3px 10px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 7px center; background-size: 9px;
	box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: filter .15s;
}
.fm-mod-status:hover { filter: brightness(1.07); }
.fm-mod-status:disabled { opacity: .6; cursor: default; }
.fm-mod-status option { color: #1e1e1e; background: #fff; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Public roadmap (curated milestone timeline)                        */
/* ------------------------------------------------------------------ */
.fm-timeline-wrap { max-width: 720px; margin: 0 auto; }
.fm-timeline-title { font-size: 22px; font-weight: 700; color: var(--dark); margin: 0 0 20px; }
.fm-timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.fm-timeline-item { position: relative; margin-bottom: 22px; }
.fm-timeline-item:last-child { margin-bottom: 0; }
/* The dot sits at each card's vertical center; the connecting line is drawn in
   two halves per item so it runs from the first dot's center to the last dot's
   center (nothing above the first dot or below the last). */
.fm-timeline-item::before,
.fm-timeline-item::after { content: ""; position: absolute; left: -17px; width: 2px; background: var(--border); border-radius: 2px; }
.fm-timeline-item::before { top: 0; height: 50%; }
.fm-timeline-item::after { top: 50%; bottom: -22px; }
.fm-timeline-item:first-child::before { display: none; }
.fm-timeline-item:last-child::after { display: none; }
.fm-timeline-marker { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--border); }
.fm-timeline-card { background: var(--card); border: var(--fm-bw, 1px) solid var(--border); border-radius: var(--radius-md); padding: var(--fm-pad, 14px) var(--fm-pad, 16px); box-shadow: var(--shadow-sm); }
.fm-timeline-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.fm-timeline-date { color: var(--muted); font-size: 12px; font-weight: 600; }
.fm-timeline-tag { color: #fff; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 10px; }
.fm-timeline-item-title { font-size: 16px; font-weight: 700; color: var(--dark); margin: 0 0 4px; }
.fm-timeline-desc { color: var(--dark); font-size: 14px; line-height: 1.6; }
.fm-timeline-empty { color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Accessibility + RTL                                                */
/* ------------------------------------------------------------------ */

/* Honor reduced-motion preferences: kill animations/transitions. */
@media (prefers-reduced-motion: reduce) {
	.fm-app *, .fm-app *::before, .fm-app *::after,
	.fm-widget *, .fm-poll *, .fm-kanban * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Visible keyboard focus on all interactive elements. */
.fm-app a:focus-visible,
.fm-app button:focus-visible,
.fm-app input:focus-visible,
.fm-app textarea:focus-visible,
.fm-app select:focus-visible,
.fm-widget button:focus-visible,
.fm-poll button:focus-visible,
.fm-mod-status:focus-visible {
	outline: 2px solid var(--blue, #0069ff);
	outline-offset: 2px;
	border-radius: 4px;
}

/* RTL: flip the board direction. Flex/grid rows mirror automatically. */
[dir="rtl"] .fm-app,
.rtl .fm-app,
[dir="rtl"] .fm-timeline-wrap,
.rtl .fm-timeline-wrap,
[dir="rtl"] .fm-widget-panel,
.rtl .fm-widget-panel {
	direction: rtl;
	text-align: right;
}
[dir="rtl"] .fm-timeline { padding: 0 26px 0 0; }
[dir="rtl"] .fm-timeline-item::before,
[dir="rtl"] .fm-timeline-item::after { left: auto; right: -17px; }
[dir="rtl"] .fm-timeline-marker { left: auto; right: -26px; }
[dir="rtl"] .fm-char-count { text-align: left; }
[dir="rtl"] .fm-mod-status { padding: 3px 10px 3px 22px; background-position: left 7px center; }