/* ==========================================================================
   Optopro Learning — pääsy- ja palautenäkymien tyylit
   --------------------------------------------------------------------------
   Nämä sivut eivät riipu teemasta: pääsynhallinnan on toimittava vaikka
   teema vaihtuisi tai rikkoutuisi.

   HUOM. Julkisen Optopro.fi:n visuaalinen konsepti (petroli + messinki +
   Landolt-C) EI ole Product Ownerin hyväksymä. Tässä käytetään neutraalia
   väliaikaispalettia, joka vaihdetaan muuttamalla vain alla olevia
   muuttujia.
   ========================================================================== */

:root {
	--ola-ink: #1a1d21;
	--ola-muted: #4e555c;
	--ola-line: #dde1e4;
	--ola-surface: #ffffff;
	--ola-surface-2: #f5f6f7;
	--ola-accent: #2c5468;
	--ola-accent-dark: #1d3a48;
	--ola-accent-soft: #e9eff2;
	--ola-alert: #8a2d20;
	--ola-alert-soft: #fbeeec;
	--ola-radius: 4px;
	--ola-radius-lg: 8px;
}

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

.ola-body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.62;
	color: var(--ola-ink);
	background: var(--ola-surface-2);
	overflow-x: hidden;
}

.ola-skip {
	position: absolute;
	left: 1rem;
	top: -100%;
	z-index: 100;
	padding: .75rem 1.25rem;
	background: var(--ola-ink);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	border-radius: var(--ola-radius);
}
.ola-skip:focus { top: 1rem; }

:focus-visible {
	outline: 3px solid var(--ola-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Ylätunniste ---------- */
.ola-head {
	background: var(--ola-surface);
	border-bottom: 1px solid var(--ola-line);
	padding: 1rem;
}
.ola-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: var(--ola-ink);
	max-width: 72rem;
	margin: 0 auto;
}
/* OPTOPRO-TUNNUS — Concept 01, Refined C / Landolt C (PO-päätös 8.8.2026).
   Tila: APPROVED FOR REVIEW-ENVIRONMENT INTEGRATION. Ei tuotantolukittu.

   Ennen tässä oli reunuksilla piirretty C, jonka aukko osui 0°:een (itään),
   koska se syntyi säännöstä `border-right-color: transparent`. Valittu tunnus
   ei ole se: aukon keskilinja on 45° myötäpäivään ylhäältä. Orientaatiota ei
   voi CSS-reunuksilla ilmaista, joten merkki tulee nyt hyväksyttynä SVG:nä.

   optopro-symbol.svg on tavutarkka kopio lähteestä
   08_Brand_Logo_Concepts/concept-01-symbol.svg. Sitä ei piirretä uudelleen.

   TÄMÄ YKSI SÄÄNTÖ PALVELEE VIITTÄ NÄKYMÄÄ: /login/, /activate/,
   /forgot-password/, /logout/ ja /tietosuoja/ — kaikki renderöityvät
   Auth\render_page():n kautta. Älä monista sääntöä näkymäkohtaisesti.

   Mitat 26x26 ovat ennallaan, jotta ylätunnisteen asettelu ei siirry. */
.ola-brand__mark {
	width: 26px;
	height: 26px;
	display: inline-block;
	background: url("optopro-symbol.svg") center / contain no-repeat;
}
.ola-brand__name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.ola-brand__name span { font-weight: 500; color: var(--ola-muted); }

/* ---------- Sisältö ---------- */
.ola-main {
	max-width: 46rem;
	margin: 2.5rem auto;
	padding: 0 1rem;
}

.ola-card {
	background: var(--ola-surface);
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius-lg);
	padding: 2rem;
}
.ola-card--wide { max-width: none; }

.ola-main:has(.ola-card--wide) { max-width: 62rem; }

.ola-card h1 { margin-top: 0; font-size: 1.6rem; line-height: 1.25; }
.ola-card h2 { font-size: 1.2rem; margin-top: 2rem; }
.ola-muted { color: var(--ola-muted); font-size: .94rem; }
.ola-foot { margin-top: 1.75rem; font-size: .94rem; }

a { color: var(--ola-accent); }
a:hover { color: var(--ola-accent-dark); }

/* ---------- Ilmoitukset ---------- */
.ola-notice {
	padding: .9rem 1.1rem;
	background: var(--ola-accent-soft);
	border-left: 3px solid var(--ola-accent);
	border-radius: 0 var(--ola-radius) var(--ola-radius) 0;
	margin: 1.25rem 0;
	font-size: .96rem;
}
.ola-notice--error {
	background: var(--ola-alert-soft);
	border-left-color: var(--ola-alert);
	color: var(--ola-alert);
	font-weight: 600;
}
.ola-notice--warn {
	background: #fdf6e6;
	border-left-color: #8a6516;
}

/* ---------- Lomake ---------- */
.ola-form { margin-top: 1.5rem; }
.ola-field { display: grid; gap: .4rem; margin: 0 0 1.25rem; }
.ola-field label { font-weight: 600; font-size: .95rem; }
.ola-field input[type="text"],
.ola-field input[type="email"],
.ola-field input[type="password"],
.ola-field select,
.ola-field textarea {
	font: inherit;
	color: inherit;
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid #b9c0c6;
	border-radius: var(--ola-radius);
	background: #fff;
}
.ola-field textarea { resize: vertical; }
.ola-req { color: var(--ola-alert); }

.ola-btn {
	display: inline-block;
	padding: .8rem 1.5rem;
	background: var(--ola-accent);
	color: #fff;
	border: 1px solid var(--ola-accent);
	border-radius: var(--ola-radius);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ola-btn:hover { background: var(--ola-accent-dark); color: #fff; }
.ola-btn--ghost { background: transparent; color: var(--ola-accent); }
.ola-btn--ghost:hover { background: var(--ola-accent-soft); color: var(--ola-accent-dark); }

/* ---------- Kysymykset ---------- */
.ola-q, .ola-finding {
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius-lg);
	padding: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
	background: var(--ola-surface);
}
.ola-q legend, .ola-finding legend {
	font-weight: 700;
	padding: 0 .4rem;
}
.ola-q__text { margin: .25rem 0 1rem; }

.ola-options { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.ola-option {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .5rem .7rem;
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius);
	cursor: pointer;
	font-size: .96rem;
}
.ola-option:hover { background: var(--ola-surface-2); }
.ola-option input { margin-top: .3rem; }

.ola-grid2 { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .ola-grid2 { grid-template-columns: 1fr 1fr; } }

.ola-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ---------- Moduulikortti ---------- */
.ola-module {
	border: 1px solid var(--ola-line);
	border-radius: var(--ola-radius-lg);
	padding: 1.5rem;
	margin: 1.5rem 0;
	background: var(--ola-surface-2);
}
.ola-module h2 { margin-top: 0; }

/* ---------- Alatunniste ---------- */
.ola-footer {
	max-width: 72rem;
	margin: 2rem auto;
	padding: 0 1rem;
	color: var(--ola-muted);
	font-size: .88rem;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}