/*
 * Nástěnka nápadů (/ideas/) – samostatný stylesheet, načítá se jen na téhle stránce
 * (viz gustavtraining_ideas_assets() v inc/ideas-page.php).
 *
 * Záměrně mimo Tailwind: nepotřebuje rebuild main.css a nemá problém s kaskádními
 * vrstvami – tenhle soubor je bez @layer, takže přebíjí utility z main.css i base
 * styly nadpisů bez !important.
 *
 * Barvy odpovídají tokenům z src/app.css (ink, nav-bg, volt, pink, header-500,
 * body-500). Mobil první: šířka od 320 px, tlačítka a pole min. 44 px, písmo
 * polí 16 px (iOS jinak při zaostření přiblíží stránku).
 *
 * Režimy:
 *  - na webu (s menu a patičkou) je stránka vždy tmavá jako zbytek webu,
 *  - z aplikace (body.gt-ideas-embedded, bez menu) se řídí prefers-color-scheme.
 */

body.gt-ideas-page {
	--gi-bg: #1e1f1f;
	--gi-surface: #2e353a;
	--gi-surface-hi: #3a444b;
	--gi-text: #cad6df;
	--gi-strong: #eef8ff;
	--gi-muted: #9fb0bc;
	--gi-link: #ffffff;
	--gi-line: rgb(255 255 255 / 0.12);
	--gi-line-strong: rgb(255 255 255 / 0.28);
	--gi-accent: #cbff73;
	--gi-on-accent: #1e1f1f;
	--gi-eyebrow: #ff5a95;
	--gi-focus: #cbff73;
	--gi-danger: #ff8fb0;
	--gi-b-open-bg: rgb(255 255 255 / 0.1);
	--gi-b-open-fg: #cad6df;
	--gi-b-plan-bg: rgb(130 175 255 / 0.2);
	--gi-b-plan-fg: #b9d2ff;
	--gi-b-prog-bg: rgb(255 90 149 / 0.22);
	--gi-b-prog-fg: #ffa3c3;
	--gi-b-done-bg: #cbff73;
	--gi-b-done-fg: #1e1f1f;
	--gi-b-no-bg: rgb(255 255 255 / 0.06);
	--gi-b-no-fg: #9fb0bc;
	color-scheme: dark;
}

@media (prefers-color-scheme: light) {
	body.gt-ideas-embedded {
		--gi-bg: #f3f5f6;
		--gi-surface: #ffffff;
		--gi-surface-hi: #e8edef;
		--gi-text: #3b464e;
		--gi-strong: #12171a;
		--gi-muted: #5a6872;
		--gi-link: #12171a;
		--gi-line: rgb(0 0 0 / 0.12);
		--gi-line-strong: rgb(0 0 0 / 0.3);
		--gi-accent: #1e1f1f;
		--gi-on-accent: #cbff73;
		--gi-eyebrow: #cf2565;
		--gi-focus: #12171a;
		--gi-danger: #b3123f;
		--gi-b-open-bg: rgb(0 0 0 / 0.07);
		--gi-b-open-fg: #3b464e;
		--gi-b-plan-bg: rgb(31 79 163 / 0.12);
		--gi-b-plan-fg: #1b4390;
		--gi-b-prog-bg: rgb(207 37 101 / 0.12);
		--gi-b-prog-fg: #a3144a;
		--gi-b-done-bg: #1e1f1f;
		--gi-b-done-fg: #cbff73;
		--gi-b-no-bg: rgb(0 0 0 / 0.05);
		--gi-b-no-fg: #5a6872;
		color-scheme: light;
		background-color: var(--gi-bg);
		color: var(--gi-text);
	}
}

/* Z aplikace: bez menu a patičky zbývá víc místa a obsah může jít blíž k okrajům. */
body.gt-ideas-embedded main.site-main {
	max-width: 44rem;
	padding: 1.25rem 1rem 2.5rem;
}

html.gi-lock {
	overflow: hidden;
}

/* ---------------------------------------------------------------- základ */

/* Šířku na webu určuje <main> stejně jako u ostatních stránek (960 px s okraji 24 px);
   v aplikaci ji omezuje pravidlo pro body.gt-ideas-embedded výše. */
.gi {
	color: var(--gi-text);
	font-family: "Martian Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.55;
}

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

.gi [hidden] {
	display: none !important;
}

/* :where() má nulovou specificitu – jinak by tohle pravidlo přebilo font a barvu
   tlačítek (.gi-cta, .gi-vote, …), která mají jen jednu třídu. */
.gi :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

.gi button {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gi :focus-visible {
	outline: 2px solid var(--gi-focus);
	outline-offset: 2px;
}

.gi-ico {
	flex: none;
}

/* ------------------------------------------------------------- hlavička */

.gi-head {
	margin-bottom: 1.5rem;
}

.gi-eyebrow {
	margin: 0;
	font: 900 0.875rem/1 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	text-transform: uppercase;
	color: var(--gi-eyebrow);
}

.gi-h1 {
	margin: 0.5rem 0 0;
	font: 500 clamp(1.625rem, 6.5vw, 2.625rem) / 1.2 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	color: var(--gi-strong);
	overflow-wrap: anywhere;
}

/* Běžný text (úvod, popisy nápadů, poděkování) a odkazy mají stejnou typografii
   jako odstavce a odkazy v obsahu ostatních stránek (.entry-content v src/app.css). */
.gi-intro {
	max-width: 36rem;
	margin: 1rem 0 1.5rem;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 2;
}

.gi-noscript {
	margin: 0 0 1rem;
	padding: 1rem;
	border: 1px solid var(--gi-line);
	border-radius: 1rem;
	background: var(--gi-surface);
}

/* --------------------------------------------------------------- tlačítka */

.gi-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0.75rem 1.5rem;
	border: 2px solid var(--gi-accent);
	border-radius: 999px;
	background: var(--gi-accent);
	color: var(--gi-on-accent);
	font: 900 0.875rem/1.1 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	text-transform: uppercase;
	transition: opacity 0.15s, transform 0.1s;
}

.gi-cta:active {
	transform: scale(0.98);
}

.gi-cta[disabled] {
	opacity: 0.6;
	cursor: default;
}

.gi-cta--block {
	width: 100%;
}

.gi-head .gi-cta {
	width: 100%;
}

@media (min-width: 40rem) {
	.gi-head .gi-cta {
		width: auto;
	}
}

.gi-link {
	display: block;
	min-height: 2.75rem;
	margin: 0.5rem auto 0;
	padding: 0 1rem;
	border: 0;
	background: none;
	color: var(--gi-muted);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- ovládání */

/* Postupné objevení (.gt-rise / .gt-stagger z main.css): ovládání a stav
   naskočí až po hlavičce. Obnova seznamu na pozadí (.is-quiet) karty
   znovu neanimuje – jen načtení stránky a přepnutí záložky či řazení. */
.gi-controls.gt-rise,
.gi-state.gt-rise {
	animation-delay: 240ms;
}

.gi-list.is-quiet > * {
	animation: none;
}

/* Záložky vlevo, řazení vpravo; na úzkém displeji řazení spadne pod záložky. */
.gi-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 1.5rem;
}

/* Záložky se na úzkém displeji zalamují do více řad. */
.gi-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gi-tab {
	position: relative;
	height: 2.375rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--gi-line-strong);
	border-radius: 1.375rem;
	background: transparent;
	color: var(--gi-text);
	font-size: 0.875rem;
	line-height: 1.25rem;
	white-space: nowrap;
	transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

/* Tlačítko je 38 px vysoké, ale ťuknout jde na 44 px (řádky záložek jsou 8 px od sebe). */
.gi-tab::after {
	content: "";
	position: absolute;
	inset: -0.1875rem 0;
}

/* Aktivní záložka má 3px rámeček: 1px okraj + 2px vnitřní stín, ať se nemění rozměr. */
.gi-tab[aria-pressed="true"] {
	border-color: var(--gi-accent);
	box-shadow: inset 0 0 0 2px var(--gi-accent);
	color: var(--gi-accent);
}

.gi-sort {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.gi-sort label {
	color: var(--gi-muted);
	font-size: 0.875rem;
}

/* Rozbalovátka: šipka z dvou přechodů, ať dědí barvu textu. */
.gi select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
	background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
	background-repeat: no-repeat;
}

/*
 * Řazení má vypadat jako ve Figmě (162 × 38 px, písmo 14 px). iOS ale při zaostření
 * přiblíží stránku, když má pole písmo pod 16 px, proto má select písmo 16 px a na
 * 14 px (16 × --k) se zmenší přes transform. Všechny jeho rozměry jsou kvůli tomu
 * vydělené --k; rámeček .gi-sort__box drží výslednou velikost.
 */
.gi-sort__box {
	position: relative;
	flex: none;
	width: 10.125rem;
	height: 2.375rem;
}

.gi-sort select {
	--k: 0.875;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% / var(--k));
	height: calc(100% / var(--k));
	padding: 0 calc(2.5rem / var(--k)) 0 calc(1rem / var(--k));
	border: calc(1px / var(--k)) solid var(--gi-line-strong);
	border-radius: calc(1.375rem / var(--k));
	background-color: var(--gi-surface);
	background-position: calc(100% - 1.25rem / var(--k)) 50%, calc(100% - 0.9rem / var(--k)) 50%;
	background-size: calc(0.4rem / var(--k)) calc(0.4rem / var(--k)), calc(0.4rem / var(--k)) calc(0.4rem / var(--k));
	color: var(--gi-text);
	font-size: 1rem;
	transform: scale(var(--k));
	transform-origin: 0 0;
}

/* ------------------------------------------------------------------ seznam */

.gi-state {
	margin: 0 0 1rem;
	color: var(--gi-muted);
}

/* Prázdná záložka: čárkovaný rámeček s hláškou uprostřed. */
.gi-state--empty {
	margin: 0;
	padding: 2.9375rem 1.25rem;
	border: 1px dashed var(--gi-line-strong);
	border-radius: 1.25rem;
	color: var(--gi-text);
	text-align: center;
}

.gi-state:empty {
	display: none;
}

.gi-state .gi-link {
	display: inline;
	min-height: 0;
	margin: 0;
	padding: 0;
	color: var(--gi-link);
}

.gi-list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gi-card {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--gi-line);
	border-radius: 1.25rem;
	background: var(--gi-surface);
}

.gi-card__body {
	flex: 1;
	min-width: 0;
}

.gi-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-bottom: 0.375rem;
}

.gi-badge {
	padding: 0.0625rem 0.625rem;
	border-radius: 999px;
	background: var(--gi-b-open-bg);
	color: var(--gi-b-open-fg);
	font-size: 0.75rem;
	line-height: 1.6;
}

.gi-badge--planned {
	background: var(--gi-b-plan-bg);
	color: var(--gi-b-plan-fg);
}

.gi-badge--in_progress {
	background: var(--gi-b-prog-bg);
	color: var(--gi-b-prog-fg);
}

.gi-badge--done {
	background: var(--gi-b-done-bg);
	color: var(--gi-b-done-fg);
}

.gi-badge--declined {
	background: var(--gi-b-no-bg);
	color: var(--gi-b-no-fg);
}

.gi-tag {
	color: var(--gi-muted);
	font-size: 0.75rem;
}

.gi-card__title {
	margin: 0;
	font: 500 0.9375rem/1.4 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	color: var(--gi-strong);
	overflow-wrap: anywhere;
}

.gi-card__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin: 0.375rem 0 0;
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 2;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.gi-card.is-open .gi-card__desc {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

.gi-more {
	/* Plocha pro ťuknutí 44 px; záporný okraj vyrovná přidané místo, ať se karta nenafoukne. */
	min-height: 2.75rem;
	margin: -0.375rem 0 -0.75rem;
	padding: 0.5rem 0.5rem 0.5rem 0;
	border: 0;
	background: none;
	color: var(--gi-muted);
	font-size: 0.875rem;
	text-decoration: underline;
}

/* Odkaz na článek v dev diary; plocha pro ťuknutí 44 px, záporný okraj drží kartu štíhlou. */
.gi-card__article {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	margin: -0.25rem 0 -0.75rem;
	color: var(--gi-link);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gi-card__article:hover {
	color: var(--gi-accent);
}

/* Tlačítko hlasování: šipka nad počtem, celé ťukací (56 × 68 px). */
.gi-vote {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 3.25rem;
	min-height: 4rem;
	padding: 0.5rem 0;
	border: 1.5px solid var(--gi-line-strong);
	border-radius: 1rem;
	background: transparent;
	color: var(--gi-strong);
	transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.gi-vote:active {
	transform: scale(0.94);
}

.gi-vote__n {
	font: 500 1rem/1 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	font-variant-numeric: tabular-nums;
}

.gi-vote[aria-pressed="true"] {
	border-color: var(--gi-accent);
	background: var(--gi-accent);
	color: var(--gi-on-accent);
}

/* Hotové nápady: počet vidět, hlasovat už nejde. */
.gi-vote[aria-disabled="true"] {
	opacity: 0.55;
	cursor: default;
}

.gi-vote[aria-busy="true"] {
	pointer-events: none;
}

.gi-skel {
	min-height: 6rem;
	animation: gi-pulse 1.2s ease-in-out infinite;
}

@keyframes gi-pulse {
	50% {
		opacity: 0.5;
	}
}

/* ------------------------------------------------------------ formulář (sheet) */

.gi-sheet {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--gi-bg);
	color: var(--gi-text);
}

.gi-sheet::backdrop {
	background: rgb(0 0 0 / 0.65);
}

.gi-sheet__inner {
	height: 100%;
	padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 40rem) {
	.gi-sheet {
		inset: 0;
		width: min(32rem, calc(100% - 2rem));
		height: auto;
		max-height: calc(100dvh - 2rem);
		margin: auto;
		border: 1px solid var(--gi-line);
		border-radius: 1.5rem;
	}

	.gi-sheet__inner {
		height: auto;
		max-height: calc(100dvh - 2rem);
		padding: 1.5rem;
	}
}

.gi-sheet__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.gi-sheet__title {
	margin: 0;
	font: 500 1.25rem/1.3 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	color: var(--gi-strong);
}

.gi-x {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--gi-line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--gi-strong);
}

.gi-field {
	margin-bottom: 1rem;
}

.gi-field label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--gi-strong);
	font-size: 0.875rem;
}

.gi-field input,
.gi-field textarea,
.gi-field select {
	display: block;
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--gi-line-strong);
	border-radius: 0.875rem;
	background-color: var(--gi-surface);
	color: var(--gi-strong);
	font-size: 1rem;
	line-height: 1.4;
}

.gi-field select {
	padding-right: 2.5rem; /* místo pro šipku, viz .gi select */
}

.gi-field textarea {
	min-height: 7rem;
	resize: vertical;
}

.gi-field input::placeholder,
.gi-field textarea::placeholder {
	color: var(--gi-muted);
	opacity: 1;
}

.gi-field [aria-invalid="true"] {
	border-color: var(--gi-danger);
}

.gi-field__foot {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 1.25rem;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.gi-err,
.gi-form-err {
	color: var(--gi-danger);
}

.gi-form-err {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
}

.gi-form-err:empty {
	display: none;
}

.gi-count {
	margin-left: auto;
	color: var(--gi-muted);
	font-variant-numeric: tabular-nums;
}

.gi-help {
	margin: 0.375rem 0 0;
	color: var(--gi-muted);
	font-size: 0.8125rem;
}

.gi-help a {
	color: var(--gi-link);
	text-decoration: underline;
}

.gi-extra {
	margin: 0 0 1rem;
	color: var(--gi-muted);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

/* Past na roboty: mimo obrazovku, ne display:none (některé boty skryté pole přeskočí). */
.gi-hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Podobné nápady pod názvem. */
.gi-similar {
	margin: -0.25rem 0 1rem;
	padding: 0.875rem;
	border: 1px solid var(--gi-accent);
	border-radius: 1rem;
	background: var(--gi-surface);
}

.gi-similar__h {
	margin: 0 0 0.625rem;
	font: 500 0.875rem/1.3 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	color: var(--gi-strong);
}

.gi-similar__list {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gi-similar__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.gi-similar__item .gi-vote {
	width: 3rem;
	min-height: 3.25rem;
}

.gi-similar__t {
	flex: 1;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.gi-similar__t .gi-badge {
	display: inline-block;
	margin-top: 0.25rem;
}

/* Poděkování po odeslání. */
.gi-done {
	padding: 1.5rem 0 0.5rem;
	text-align: center;
}

.gi-done__h {
	margin: 0 0 0.75rem;
	font: 500 1.5rem/1.2 "Martian Grotesk Wide", "Martian Grotesk", sans-serif;
	color: var(--gi-strong);
}

.gi-done p {
	margin: 0 0 1.5rem;
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 2;
}

/* ------------------------------------------------------------- hláška (toast) */

.gi-toast {
	position: fixed;
	left: 50%;
	bottom: calc(1.25rem + env(safe-area-inset-bottom));
	z-index: 50;
	max-width: calc(100% - 2rem);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--gi-strong);
	color: var(--gi-bg);
	font-size: 0.875rem;
	line-height: 1.4;
	text-align: center;
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
	transform: translateX(-50%);
}

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