/* Investment Mistakes — public grid. Scoped under .imc-grid-wrap. Responsive: horizontal scroll down to 640px, stacked cards below it. */

.imc-grid-wrap {
	--imc-ink: #111827;
	--imc-muted: #6b7280;
	--imc-border: #e5e7eb;
	--imc-bg: #f9fafb;
	--imc-accent: #4f46e5;
	--imc-gain: #16a34a;
	--imc-gain-bg: #f0fdf4;
	--imc-loss: #dc2626;
	--imc-loss-bg: #fef2f2;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--imc-ink);
}

/* Visually hidden but available to screen readers — used for the row's real <a> fallback. */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.imc-grid-scroll {
	overflow-x: auto;
	border: 1px solid var(--imc-border);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.imc-grid-table {
	width: 100%;
	min-width: 920px; /* forces horizontal scroll rather than crushing 8 columns unreadably narrow */
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.88rem;
	background: #fff;
}

.imc-grid-table thead th:nth-child(1) { width: 9%; }  /* Type */
.imc-grid-table thead th:nth-child(2) { width: 8%; }  /* Ticker */
.imc-grid-table thead th:nth-child(3) { width: 7%; }  /* % */
.imc-grid-table thead th:nth-child(4) { width: 19%; } /* Attraction */
.imc-grid-table thead th:nth-child(5) { width: 19%; } /* Red Flags */
.imc-grid-table thead th:nth-child(6) { width: 10%; } /* Posted By */
.imc-grid-table thead th:nth-child(7) { width: 9%; }  /* Date */
.imc-grid-table thead th:nth-child(8) { width: 11%; } /* Votes */
.imc-grid-table thead th:nth-child(9) { width: 2.5rem; } /* trailing arrow */

.imc-grid-table thead th {
	text-align: left;
	padding: 0.85rem 0.9rem;
	background: var(--imc-bg);
	border-bottom: 1px solid var(--imc-border);
	white-space: nowrap;
}

.imc-sort-btn {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--imc-ink);
	cursor: pointer;
}

.imc-sortable.is-active .imc-sort-btn { color: var(--imc-accent); }
.imc-sortable.is-active.is-asc .imc-sort-btn::after { content: " \2191"; }
.imc-sortable.is-active.is-desc .imc-sort-btn::after { content: " \2193"; }

.imc-grid-table tbody td {
	padding: 0.8rem 0.9rem;
	border-bottom: 1px solid var(--imc-border);
	vertical-align: middle;
	overflow-wrap: break-word;
}
.imc-grid-table tbody tr:last-child td { border-bottom: none; }

.imc-grid-row { cursor: pointer; }
.imc-grid-row:hover,
.imc-grid-row:focus-within { background: #fafafa; }
.imc-grid-row:focus { outline: none; }
.imc-grid-row:focus-visible { outline: 2px solid var(--imc-accent); outline-offset: -2px; }

.imc-type-badge {
	display: inline-block;
	background: var(--imc-bg);
	border: 1px solid var(--imc-border);
	color: var(--imc-accent);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
}

.imc-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	color: var(--imc-muted);
	line-height: 1.4;
}

.imc-grid-table .imc-gain { color: var(--imc-gain); font-weight: 700; }
.imc-grid-table .imc-loss { color: var(--imc-loss); font-weight: 700; }
.imc-grid-table .imc-empty { text-align: center; color: var(--imc-muted); padding: 2rem 1rem; cursor: default; }

/* Vote widget — a single pill housing both arrows + the score, not three
   separate boxes. Shared base rules here; imc-single.css adds the larger
   single-entry-page sizing on top of the same classes.

   Sized in fixed px, not rem/em, and every UA button default (padding,
   font, line-height, min-width) is explicitly zeroed — relying on the
   browser's built-in <button> reset here is what produced the oversized,
   icon-less pill in earlier testing. */
.imc-vote-block {
	display: inline-flex;
	align-items: center;
	background: var(--imc-bg);
	border: 1px solid var(--imc-border);
	border-radius: 999px;
	padding: 2px;
	line-height: 1;
	box-sizing: border-box;
}
.imc-vote-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	border-radius: 999px;
	cursor: pointer;
	color: var(--imc-muted);
	font-size: 0;
	line-height: 1;
	transition: background 0.12s ease, color 0.12s ease;
}
.imc-vote-btn:hover { background: #fff; color: var(--imc-accent); }
.imc-vote-up.is-active { color: var(--imc-gain); }
.imc-vote-down.is-active { color: var(--imc-loss); }
.imc-vote-icon { display: block; flex-shrink: 0; }
.imc-vote-score {
	display: inline-block;
	min-width: 18px;
	padding: 0 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.imc-vote-block--compact .imc-vote-btn { width: 22px; height: 22px; }
.imc-vote-block--compact .imc-vote-score { min-width: 16px; font-size: 12px; }

.imc-col-action { text-align: right; white-space: nowrap; }
.imc-row-arrow { color: var(--imc-muted); font-size: 1.15rem; }
.imc-card-toggle { display: none; } /* only shown in the mobile card layout */

.imc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 1rem;
}
.imc-page-btn {
	min-width: 2.2rem;
	padding: 0.4rem 0.65rem;
	border: 1px solid var(--imc-border);
	background: #fff;
	border-radius: 6px;
	font-size: 0.85rem;
	cursor: pointer;
}
.imc-page-btn.is-active {
	background: var(--imc-accent);
	color: #fff;
	border-color: var(--imc-accent);
}

/* Compact 2-line card layout on narrow phones. Type/Ticker/%/Date share one
   line, Votes + the expand toggle share a second — a CSS Grid per row lets
   each field be placed exactly where it belongs regardless of source order,
   which plain flex-wrap can't do without fragile width guessing. Attraction/
   Red Flags/Posted By stay hidden (no grid row at all while display:none)
   until "Show more" is tapped. */
@media (max-width: 640px) {
	.imc-grid-scroll { overflow-x: visible; border: none; box-shadow: none; }

	.imc-grid-table { min-width: 0; table-layout: auto; }
	.imc-grid-table thead { display: none; }
	.imc-grid-table, .imc-grid-table tbody { display: block; width: 100%; }

	.imc-grid-table tr {
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		align-items: center;
		column-gap: 0.6rem;
		row-gap: 0.5rem;
		background: #fff;
		border: 1px solid var(--imc-border);
		border-radius: 10px;
		margin-bottom: 0.75rem;
		padding: 0.75rem 1rem;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}

	.imc-grid-table td { display: block; padding: 0; border: none; }

	/* Line 1: Type, Ticker, %, Date */
	.imc-grid-table td:nth-child(1) { grid-row: 1; grid-column: 1; }
	.imc-grid-table td:nth-child(2) { grid-row: 1; grid-column: 2; font-weight: 700; }
	.imc-grid-table td:nth-child(3) { grid-row: 1; grid-column: 3; font-weight: 700; }
	.imc-grid-table td:nth-child(7) { grid-row: 1; grid-column: 4; justify-self: end; color: var(--imc-muted); font-size: 0.8rem; white-space: nowrap; }

	/* Line 2: Votes + expand toggle, separated from line 1 by a rule */
	.imc-grid-table td:nth-child(8) {
		grid-row: 2; grid-column: 1 / 3;
		padding-top: 0.5rem;
		border-top: 1px dashed var(--imc-border);
	}
	.imc-grid-table td.imc-col-action {
		grid-row: 2; grid-column: 3 / 5;
		justify-self: end;
		padding-top: 0.5rem;
		border-top: 1px dashed var(--imc-border);
	}

	/* Secondary fields: no grid row at all until expanded */
	.imc-grid-table td.imc-secondary { display: none; }
	.imc-grid-row.is-expanded td.imc-secondary {
		display: block;
		grid-column: 1 / 5;
	}
	.imc-grid-table td:nth-child(4).imc-secondary { grid-row: 3; padding-top: 0.5rem; border-top: 1px dashed var(--imc-border); }
	.imc-grid-table td:nth-child(5).imc-secondary { grid-row: 4; }
	.imc-grid-table td:nth-child(6).imc-secondary { grid-row: 5; }
	.imc-grid-row.is-expanded td.imc-secondary::before {
		content: attr(data-label);
		display: block;
		font-weight: 600;
		color: var(--imc-muted);
		font-size: 0.75rem;
		margin-bottom: 0.2rem;
	}
	.imc-grid-table .imc-clamp-2 { color: var(--imc-ink); }

	.imc-col-action { text-align: right; }
	.imc-row-arrow { display: none; }
	.imc-card-toggle {
		display: inline-block;
		background: none;
		border: none;
		color: var(--imc-accent);
		font-weight: 600;
		font-size: 0.85rem;
		cursor: pointer;
		padding: 0;
	}

	.imc-grid-table tr td.imc-empty { grid-column: 1 / 5 !important; grid-row: 1; text-align: center; }
}