/**
 * Ideas and Working Notes presentation.
 *
 * Written in the established Work-family visual language so the site reads as
 * one design: the same JetBrains Mono kickers and status pills, the same
 * yellow-soft eyebrow, the same warm rules, the same 680px shell, the same
 * centred page intro. It adds only what Ideas needs and Work does not have -
 * editorial rows without imagery, a maturity legend, and an honest pending
 * state.
 *
 * Loaded after indranil-work.css, which supplies the shell, sitebar, footer,
 * kickers, status pills, buttons, and link styles this file builds on.
 * Colour comes from indranil-tokens.css.
 */

/* ---------------------------------------------------------------
   Editorial rows - the ledger
   --------------------------------------------------------------- */

.ind-idea-ledger {
	border-top: 1px solid var(--ind-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ind-idea-row {
	border-bottom: 1px solid var(--ind-line);
	padding: 26px 0;
}

.ind-idea-row__line {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-bottom: 12px;
}

.ind-idea-row__date {
	color: var(--ind-ink-soft);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-left: auto;
	text-transform: uppercase;
}

.ind-idea-row h3 {
	font-size: 23px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.28;
	margin: 0 0 10px;
}

.ind-idea-row h3 a {
	color: var(--ind-ink) !important;
	text-decoration: none;
}

.ind-idea-row h3 a:hover,
.ind-idea-row h3 a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--ind-copper);
	text-underline-offset: 5px;
}

.ind-idea-row p {
	color: var(--ind-ink-soft);
	margin: 0 0 14px;
	max-width: 60ch;
}

/*
 * An open question is signalled in copper, not yellow. Yellow stays reserved
 * for current and active states, per brand.md section 5.
 */
.ind-status--question {
	border-color: color-mix(in srgb, var(--ind-copper) 40%, var(--ind-line));
	color: var(--ind-copper);
}

/* ---------------------------------------------------------------
   Maturity legend
   --------------------------------------------------------------- */

/*
 * The parent Intro theme gives tables full gridlines. This family uses warm
 * horizontal rules only, like every other section, so borders are reset here
 * and reapplied on the bottom edge alone.
 */
.ind-legend,
.ind-legend th,
.ind-legend td,
.ind-legend tr,
.ind-legend thead,
.ind-legend tbody {
	border: 0;
}

.ind-legend {
	border-collapse: collapse;
	font-size: 15px;
	margin-top: 4px;
	width: 100%;
}

.ind-legend th {
	border-bottom: 1px solid var(--ind-line);
	color: var(--ind-ink-soft);
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 0 14px 10px 0;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

.ind-legend td {
	border-bottom: 1px solid var(--ind-line);
	line-height: 1.55;
	padding: 13px 14px 13px 0;
	vertical-align: top;
}

.ind-legend td:first-child {
	font-weight: 600;
	white-space: nowrap;
}

.ind-legend td:last-child,
.ind-legend th:last-child {
	padding-right: 0;
	text-align: right;
	width: 4.5em;
	white-space: nowrap;
}

.ind-legend tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 620px) {
	.ind-legend,
	.ind-legend tbody,
	.ind-legend tr,
	.ind-legend td {
		display: block;
		width: 100%;
	}

	.ind-legend thead {
		display: none;
	}

	.ind-legend tr {
		border-bottom: 1px solid var(--ind-line);
		padding: 14px 0;
	}

	.ind-legend td {
		border-bottom: 0;
		padding: 0 0 6px;
		text-align: left !important;
		white-space: normal !important;
		width: auto;
	}

	.ind-legend td:last-child::before {
		content: "In this list: ";
		font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
		font-size: 10.5px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ind-ink-soft);
	}
}

/* ---------------------------------------------------------------
   Idea detail
   --------------------------------------------------------------- */

.ind-idea-block {
	margin-bottom: 34px;
}

.ind-idea-block > p {
	margin: 10px 0 0;
}

.ind-idea-block h2 {
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 6px 0 0;
}

/**
 * Pending state.
 *
 * Used where Neel has not written or approved the content yet. It has to read
 * as a deliberate, honest gap - never be filled with generated prose, and never
 * look like a rendering error.
 */
.ind-pending {
	background: var(--ind-surface-quiet);
	border-left: 2px solid var(--ind-copper);
	border-radius: 0 var(--ind-radius) var(--ind-radius) 0;
	color: var(--ind-ink-soft);
	line-height: 1.6;
	margin: 10px 0 0;
	padding: 15px 18px;
}