/**
 * Strefa Patrona - mobile-first portal styles.
 *
 * Every selector is scoped under .kna-portal. That is not just hygiene: the
 * active theme's stylesheet is enqueued after this one and carries rules like
 * `button:not(.button-void)` (specificity 0,1,1) which would otherwise win over
 * a bare `.kna-secure-player__play` (0,1,0) and reshape the controls. The extra class
 * puts these rules at 0,2,0 and settles it regardless of load order.
 */

.kna-portal {
	--kna-ink: #1d3557;
	--kna-ink-soft: #5b6b82;
	--kna-accent: #e63946;
	--kna-accent-ink: #fff;
	--kna-surface: #fff;
	--kna-surface-alt: #f4f6fa;
	--kna-border: #dde3ec;
	--kna-radius: 14px;
	--kna-gap: 1rem;

	box-sizing: border-box;
	padding: 1.25rem 0 3rem;
	color: var(--kna-ink);
}

.kna-portal *,
.kna-portal *::before,
.kna-portal *::after {
	box-sizing: inherit;
}

.kna-portal__inner {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1rem;
}

.kna-portal__header {
	margin-bottom: 1.5rem;
}

.kna-portal__title {
	margin: 0 0 0.25rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

.kna-portal__greeting {
	margin: 0;
	color: var(--kna-ink-soft);
}

/* ---------------------------------------------------------------- cards -- */

.kna-portal .kna-card {
	background: var(--kna-surface);
	border: 1px solid var(--kna-border);
	border-radius: var(--kna-radius);
	padding: 1.1rem;
	margin-bottom: var(--kna-gap);
}

.kna-portal .kna-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.kna-portal .kna-card__actions {
	margin: 1rem 0 0;
}

.kna-portal .kna-card__meta {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: var(--kna-ink-soft);
}

.kna-portal .kna-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--kna-ink-soft);
}

/* -------------------------------------------------------------- buttons -- */

.kna-portal .kna-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px minimum: anything smaller is a miss on a phone. */
	min-height: 44px;
	padding: 0.6rem 1.2rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--kna-accent);
	color: var(--kna-accent-ink);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.kna-portal .kna-button:hover,
.kna-portal .kna-button:focus {
	color: var(--kna-accent-ink);
	filter: brightness(0.94);
}

.kna-portal .kna-button--ghost {
	background: transparent;
	border-color: var(--kna-border);
	color: var(--kna-ink);
}

.kna-portal .kna-button--ghost:hover,
.kna-portal .kna-button--ghost:focus {
	color: var(--kna-ink);
	background: var(--kna-surface-alt);
	filter: none;
}

.kna-portal .kna-button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.kna-portal .kna-button.has-error {
	border-color: var(--kna-accent);
	color: var(--kna-accent);
}

/* -------------------------------------------------------------- paywall -- */

.kna-portal .kna-paywall {
	background: var(--kna-surface-alt);
	border: 1px dashed var(--kna-border);
	border-radius: var(--kna-radius);
	padding: 1.1rem;
	text-align: center;
}

.kna-portal .kna-paywall__heading {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.kna-portal .kna-paywall__body {
	margin: 0 0 1rem;
	color: var(--kna-ink-soft);
	font-size: 0.95rem;
}

.kna-portal .kna-paywall__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.6rem;
	border-radius: 999px;
	background: var(--kna-accent);
	color: var(--kna-accent-ink);
	font-weight: 700;
	text-decoration: none;
}

.kna-portal .kna-paywall__cta:hover,
.kna-portal .kna-paywall__cta:focus {
	color: var(--kna-accent-ink);
	filter: brightness(0.94);
}

/* -------------------------------------------------------------- lessons -- */

.kna-portal .kna-lesson__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(var(--kna-radius) - 4px);
	margin-bottom: 0.75rem;
}

.kna-portal .kna-lesson__excerpt {
	margin: 0 0 0.75rem;
	color: var(--kna-ink-soft);
	font-size: 0.95rem;
}

.kna-portal .kna-lesson__content {
	margin: 0.75rem 0;
	font-size: 0.98rem;
}

.kna-portal .kna-lesson__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.kna-portal .kna-lesson__locked {
	margin-top: 0.9rem;
}

/* --------------------------------------------------------------- player -- */

.kna-portal .kna-secure-player {
	background: var(--kna-surface-alt);
	border-radius: calc(var(--kna-radius) - 4px);
	padding: 0.9rem;
	margin: 0.75rem 0;
}

.kna-portal .kna-secure-player__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

/*
 * Dead-centre by flex, not by luck. A button's default text centring only
 * centres a line box; an inline SVG child would still sit on the baseline with
 * the font's descender space under it, which is what tipped the old skip
 * glyphs off centre. Zero padding plus `line-height: 1` removes both nudges,
 * so the same rule centres a glyph, a label and an icon alike.
 */
.kna-portal .kna-secure-player__controls button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid var(--kna-border);
	border-radius: 999px;
	background: var(--kna-surface);
	color: var(--kna-ink);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

/*
 * Icons carry no size of their own here: the viewBox is 24 and the box is 16,
 * stated explicitly so a 38px mobile button and a 44px desktop one draw the
 * same mark. `currentColor` is why hover, focus and the locked greyscale all
 * reach the stroke without a second rule per state.
 */
.kna-portal .kna-secure-player__controls button .kna-secure-player__icon {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

.kna-portal .kna-secure-player__play {
	/* Flex centring rather than margin nudging. The play triangle is drawn with
	   borders, so its optical centre sits left of its box centre; the small
	   translate below compensates for that instead of the old hand-tuned
	   margin, which shifted with any change of font or padding. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-width: 56px;
	height: 56px;
	padding: 0;
	background: var(--kna-accent) !important;
	border-color: var(--kna-accent) !important;
	border-radius: 50%;
}

.kna-portal .kna-secure-player__icon-play {
	display: block;
	width: 0;
	height: 0;
	margin: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid var(--kna-accent-ink);
	/* Optical, not geometric: a triangle centred by its bounding box reads as
	   sitting too far left. */
	transform: translateX(3px);
}

.kna-portal .kna-secure-player.is-playing .kna-secure-player__icon-play {
	width: 16px;
	height: 20px;
	margin: 0;
	/* The pause bars are symmetric, so the optical nudge must be undone. */
	transform: none;
	border: 0;
	/* Two bars, drawn with a gradient so no extra element is needed. */
	background: linear-gradient(
		to right,
		var(--kna-accent-ink) 0 5px,
		transparent 5px 11px,
		var(--kna-accent-ink) 11px 16px
	);
}

.kna-portal .kna-secure-player.is-loading .kna-secure-player__play {
	opacity: 0.6;
	pointer-events: none;
}

.kna-portal .kna-secure-player__timeline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--kna-ink-soft);
}

.kna-portal .kna-secure-player__seek {
	flex: 1 1 auto;
	min-width: 0;
	/* A 44px-tall hit area around a thin visual track. */
	height: 44px;
	background: transparent;
	accent-color: var(--kna-accent);
}

.kna-portal .kna-secure-player__status {
	margin: 0.5rem 0 0;
	min-height: 1.2em;
	font-size: 0.85rem;
	color: var(--kna-ink-soft);
	text-align: center;
}

/* -------------------------------------------------------------- install -- */

.kna-portal .kna-install-slot:empty {
	display: none;
}

.kna-portal .kna-install-slot {
	margin-bottom: var(--kna-gap);
}

.kna-portal .kna-install__button {
	width: 100%;
	min-height: 48px;
	border: 1px solid var(--kna-border);
	border-radius: var(--kna-radius);
	background: var(--kna-surface);
	color: var(--kna-ink);
	font-weight: 600;
	cursor: pointer;
}

.kna-portal .kna-install__ios {
	background: var(--kna-surface);
	border: 1px solid var(--kna-border);
	border-radius: var(--kna-radius);
	padding: 1rem;
}

.kna-portal .kna-install__ios-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.kna-portal .kna-install__ios-steps {
	margin: 0 0 0.75rem;
	padding-left: 1.2rem;
	font-size: 0.92rem;
	color: var(--kna-ink-soft);
}

.kna-portal .kna-install__ios-steps li {
	margin-bottom: 0.25rem;
}

.kna-portal .kna-install__ios-close {
	min-height: 40px;
	padding: 0 1rem;
	border: 1px solid var(--kna-border);
	border-radius: 999px;
	background: transparent;
	color: var(--kna-ink);
	cursor: pointer;
}

/* ----------------------------------------------------------- pagination -- */

.kna-portal .kna-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.kna-portal .kna-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--kna-border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--kna-ink);
}

.kna-portal .kna-pagination .page-numbers.current {
	background: var(--kna-ink);
	border-color: var(--kna-ink);
	color: #fff;
}

/* ------------------------------------------------------------- tablet+ -- */

@media (min-width: 48em) {

	.kna-portal {
		padding-top: 2rem;
	}

	.kna-portal__title {
		font-size: 2rem;
	}

	.kna-portal .kna-card {
		padding: 1.5rem;
	}

	.kna-portal .kna-lesson__thumb {
		float: left;
		width: 180px;
		margin: 0 1rem 0.5rem 0;
	}

	.kna-portal .kna-lesson__header::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* ------------------------------------------------------- accessibility -- */

@media (prefers-reduced-motion: reduce) {

	.kna-portal * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

.kna-portal :focus-visible {
	outline: 3px solid var(--kna-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------- login form -- */

.kna-portal .kna-login-form {
	margin: 1rem 0 0;
}

.kna-portal .kna-login-form__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.kna-portal .kna-login-form__input {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	margin-bottom: 0.9rem;
	border: 1px solid var(--kna-border);
	border-radius: 10px;
	background: var(--kna-surface);
	color: var(--kna-ink);
	font-size: 1rem;
}

/*
 * The honeypot. Kept out of the accessibility tree and off screen rather than
 * display:none - some bots skip hidden inputs, and a screen reader would
 * otherwise announce a field nobody should fill in.
 */
.kna-portal .kna-login-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kna-portal .kna-notice {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	font-size: 0.95rem;
}

.kna-portal .kna-notice--ok {
	background: #edf7ee;
	border: 1px solid #bcdfc0;
	color: #1e4620;
}

.kna-portal .kna-notice--warn {
	background: #fdf3e7;
	border: 1px solid #f0d3aa;
	color: #6b4a12;
}



.kna-portal .kna-lesson__hint {
	margin: 0.9rem 0 0;
	padding: 0.6rem 0.85rem;
	border-radius: 10px;
	background: var(--kna-surface-alt);
	color: var(--kna-ink-soft);
	font-size: 0.9rem;
	text-align: center;
}

/* --------------------------------------------------------------- focus -- */

/*
 * A single, strong focus ring for everything interactive in the portal.
 * The theme's own buttons carry no visible focus style, so keyboard users had
 * nothing to follow once they entered the dashboard.
 */
.kna-portal a:focus-visible,
.kna-portal button:focus-visible,
.kna-portal input:focus-visible,
.kna-portal textarea:focus-visible,
.kna-portal [tabindex]:focus-visible {
	outline: 3px solid var(--kna-ink);
	outline-offset: 3px;
	border-radius: 6px;
}

/* On the accent-coloured play button a dark ring would disappear into the
   button itself, so it gets a light ring plus a dark halo for contrast on
   either background. */
.kna-portal .kna-secure-player__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
	box-shadow: 0 0 0 3px var(--kna-ink);
}

/* ------------------------------------------------- lesson deep linking -- */

.kna-portal .kna-lessons__filter {
	margin: 0 0 1rem;
	font-size: 0.92rem;
}

.kna-portal .kna-lesson.is-focused {
	border-color: var(--kna-accent);
	box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.18);
}

.kna-portal .kna-lesson.is-focused:focus {
	outline: none;
}

.kna-portal .kna-lesson__podcast {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

.kna-portal .kna-lesson__podcast a {
	color: var(--kna-ink-soft);
}

.kna-portal .kna-lesson__podcast a:hover,
.kna-portal .kna-lesson__podcast a:focus {
	color: var(--kna-ink);
}

/* ------------------------------------------------------ mobile spacing -- */

@media (max-width: 30em) {

	.kna-portal__inner {
		padding: 0 0.85rem;
	}

	.kna-portal .kna-card {
		padding: 1rem 0.9rem;
	}

	/* Wrapping to two rows beats shrinking below the 44px touch minimum. */
	.kna-portal .kna-secure-player__controls {
		gap: 0.5rem;
	}

	.kna-portal .kna-lesson__actions .kna-button {
		flex: 1 1 100%;
	}
}

/* ------------------------------------------------------- focused review -- */

/*
 * The way back out of /konto/?powtorki=1, which renders the drill and nothing
 * else. Quiet on purpose: it is an exit, not an action competing with the
 * grade buttons.
 */
.kna-portal .kna-account__back {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.kna-portal .kna-account__back a {
	color: var(--kna-ink-soft);
	text-decoration: none;
}

.kna-portal .kna-account__back a:hover,
.kna-portal .kna-account__back a:focus {
	color: var(--kna-ink);
	text-decoration: underline;
}

/* ------------------------------------------------------------- gutters -- */

/*
 * Keep the dashboard off the edge of a phone.
 *
 * .kna-account__inner deliberately zeroes the portal's own padding, because on
 * /konto the theme's account block supplies the width and the gutters. That
 * holds on a desktop and does not on a phone, where the cards - the flashcard
 * deck included - sat flush against both edges of the display with nothing
 * between the text and the bezel.
 *
 * Scoped to the width where it is actually wrong, so the desktop layout that
 * zeroing exists for is untouched.
 */
@media (max-width: 48.75em) {

	.kna-portal .kna-account__inner {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*
 * The focused review screen has no theme container at ANY width - it replaces
 * the account block rather than sitting inside it - so it supplies its own
 * gutters and reading width unconditionally.
 */
.kna-portal.kna-account--focus .kna-account__inner {
	max-width: 720px;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

/*
 * Where the trainer comes to rest when it is scrolled to.
 *
 * The site header is position: fixed and 80px tall, and scrollIntoView() knows
 * nothing about it - without a margin the top of the card lands underneath the
 * header. 100px is that 80 plus a little air, so the question and the reveal
 * button are both clear of it on arrival.
 */
.kna-srs-root {
	scroll-margin-top: 100px;
}