@charset "utf-8";
/*
 * css/app.css — styles for the elements the refactor introduced.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * css/style.css is the owner's 2014 stylesheet. It is byte-identical to the
 * copy running on brillant-mill.eu and it is shared with ~86 legacy pages that
 * are NOT part of the refactor. Editing it to style new markup would put the
 * refactor's concerns into a file the legacy site depends on, and every future
 * diff against production would show noise. So: nothing here is a change to
 * style.css. This file is loaded AFTER it, from app/views/layout.php, and only
 * by the refactored pages. Legacy pages never see it.
 *
 * WHAT WENT WRONG (this is the bug being fixed)
 * ---------------------------------------------
 * layout.php emits <div id="languages"> (8 locale links) and <div id="messages">
 * (flash messages). style.css has NO rule for #languages, .lang, .lang-active,
 * #messages or .flash. So the 8 links fell back to the global
 *
 *     a { color:rgb(79,203,255); font-size:21px; }        (style.css:377)
 *
 * and rendered as one run-on line of 21px links, left-aligned at x=0 across the
 * full body width, jammed against the bottom of a fixed-height panel
 * (#contagree { height:300px }). The active locale is an unlinked <span>, so it
 * did not even get the link colour — it came out as small black serif text on
 * the dark blue field, effectively invisible. That is "the whole page is a mess".
 *
 * PALETTE — every value below is taken from style.css. No new colours.
 *   rgb(35,82,130)    the dark field behind everything (.indexdiam)
 *   #c5e8f7           the panel's mid gradient stop
 *   rgb(164,197,227)  the panel border
 *   rgb(29,68,108)    panel text / headings
 *   rgb(79,203,255)   links
 *   rgb(255,99,79)    coral, the primary button (.subat/.downl)
 *   rgb(35,90,114)    the secondary button
 *   rgb(0,219,166)    the success accent (.downprav), on text rgb(5,54,105)
 *   'Dosis'           headings, labels and buttons
 * Radii follow the site's own split: 3px for controls, 8px for panels.
 */

/* =====================================================================
 * 1. THE LANGUAGE SWITCHER
 * =====================================================================
 *
 * TEXT, NOT FLAGS — the decision, and why.
 *
 * style.css already has a language chooser design: .roundlang a.engl/.sk/.hu/
 * .pl/.ru/.ger, 90px round flag buttons, used by milllang.html. It was not
 * reused here, for three reasons:
 *
 *   1. The assets do not exist. img/ has engfl, gerfl, hufl, plfl, rufl, skfl
 *      (and czfl, which is not even one of our locales). There is NO Ukrainian
 *      flag and NO Chinese flag, and image assets cannot be authored from here.
 *      The app has eight locales. Flags for six of them and text for the other
 *      two is precisely the half-finished look this task is meant to remove.
 *   2. Size. Eight 90px circles is a ~720px-wide block. milllang.html is a
 *      dedicated full-page chooser and can afford that. This switcher is on
 *      EVERY page, under a 530px panel. It has to be quiet.
 *   3. A flag is a country, not a language. (The owner's own chooser shows the
 *      strain: lang/en.php notes it mixes country names with language names.)
 *
 * So: text pills, using the endonyms already in the catalogs. They are also
 * self-describing, which is the point of a switcher — a visitor who landed on
 * the wrong locale can read "Українська" without decoding a flag.
 */

#languages {
	/* Match the panel: same 530px measure, same centring, so the switcher
	   reads as belonging to the panel above it rather than to the page. */
	width: 530px;
	max-width: 100%;
	margin: 26px auto 0 auto;
	padding: 0 15px;
	box-sizing: border-box;

	/* Wrapping is the whole point: eight endonyms do not fit on one 530px
	   line, and must not try to. Two calm centred rows. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

/* The pills. `a.lang` and `span.lang` are styled together so the active one
   keeps the exact same box as its siblings and the row does not jitter. */
#languages .lang {
	display: inline-block;
	padding: 5px 12px;
	font-family: 'Dosis', sans-serif;

	/* Beats a{font-size:21px} — the rule that caused the pile-up. 15px is the
	   quiet end of the site's scale (label text is 17px, buttons 17px). */
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;           /* never break "Українська" mid-word */
	text-align: center;

	border: 1px solid rgba(164, 197, 227, 0.4);
	border-radius: 3px;            /* the site's control radius */
	background-color: rgba(255, 255, 255, 0.07);
	color: rgb(79, 203, 255);      /* the site's link colour */
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* style.css has `a { text-decoration:none !important }`, so the underline is
   already suppressed for the links; this keeps the <span> identical to them. */

#languages a.lang:hover,
#languages a.lang:focus {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: rgb(164, 197, 227);
	color: #ffffff;
}

/*
 * The active locale. It is an unlinked <span>, and it has to read as "you are
 * here" without being mistaken for a disabled control.
 *
 * It is filled with the panel's own mid gradient stop and the panel's own text
 * colour, so it looks like a chip cut out of the panel above it — the inverse
 * of its siblings, which are transparent on the dark field. Coral was rejected:
 * on this site coral means "primary action" (.subat/.downl), and the current
 * language is not an action.
 */
#languages .lang-active {
	background-color: #c5e8f7;
	border-color: rgb(164, 197, 227);
	color: rgb(29, 68, 108);
	font-weight: 600;
	cursor: default;
}

/* =====================================================================
 * 2. FLASH MESSAGES
 * =====================================================================
 *
 * These replaced <script>alert()</script>, so they have to carry the weight an
 * alert box used to: seen before the form, unambiguously a notification.
 *
 * Emitted as <p>, which style.css styles `p { margin-bottom:15px; color:black }`
 * — black on coral is the kind of thing that has to be overridden explicitly.
 *
 * NOTE: flash() in app/bootstrap.php clamps $type to 'error' or 'success' and
 * silently rewrites anything else to 'error', so .flash-error and .flash-success
 * are the only classes the app can actually emit today. .flash-info is defined
 * below anyway: it costs three lines, and it means that whoever adds an
 * informational message gets a styled message instead of an unstyled one.
 */

/* 530px and no side padding, so the alert's edges line up exactly with the
   panel's rather than sitting a few pixels inside them. The narrow-screen
   gutter is added in the media query at the bottom instead. */
#messages {
	width: 530px;                  /* the panel measure again */
	max-width: 100%;
	margin: 20px auto 0 auto;
	box-sizing: border-box;
}

.flash {
	margin: 0 0 10px 0;            /* beats p{margin-bottom:15px} */
	padding: 12px 16px;
	font-family: 'Dosis', sans-serif;
	font-size: 16px;
	line-height: 21px;
	text-align: center;
	border-radius: 3px;
	border: 1px solid transparent;

	/* The panel's shadow, not the buttons' heavier one: a message is a surface,
	   not a control. */
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Coral — the site's alarm colour, already the primary button. */
.flash-error {
	background-color: rgb(255, 99, 79);
	border-color: rgb(255, 99, 79);
	color: #ffffff;
}

/* The .downprav accent, with .downprav's own text colour. */
.flash-success {
	background-color: rgb(0, 219, 166);
	border-color: rgb(0, 219, 166);
	color: rgb(5, 54, 105);
}

/* Neutral: the panel's tones. Not currently reachable — see the note above. */
.flash-info {
	background-color: #c5e8f7;
	border-color: rgb(164, 197, 227);
	color: rgb(29, 68, 108);
}

/* =====================================================================
 * 3. THE EULA LINE ON THE DOWNLOAD PAGE
 * =====================================================================
 *
 * Not a new element, but part of the same mess, and fixed here rather than in
 * style.css so that the ~86 legacy pages are untouched.
 *
 * The reset at the top of style.css sets `font: inherit` on <label>. The EULA
 * sentence is bare text inside <label> with no <span> around it (login.php's
 * labels have one, this one does not), so it inherits from <body> and renders
 * in the browser's default SERIF — next to a 21px cyan link and a 17px Dosis
 * button. Loading Dosis alone does not fix it; nothing declares a font here.
 *
 * The values below are copied from `#contt label span` (style.css:248) so the
 * line matches the labels on the login and registration forms exactly.
 */

#contagree label {
	font-family: 'Dosis', sans-serif;
	font-size: 17px;
	line-height: 22px;
	color: rgb(29, 68, 108);
}

/*
 * The confirmation page's message.
 *
 * #contt has `padding:50px 0` — no horizontal padding — and style.css styles a
 * bare <p> as `margin-bottom:15px; color:black`. confirm.php is the only page
 * that puts a <p> directly in #contt (login.php's panel is all form), so its
 * message rendered flush against the panel's left edge, in black, under a
 * centred heading. It read as unstyled text that had escaped the box.
 *
 * 30px matches the horizontal padding style.css gives #contagree's label; the
 * colour and size are the panel's own, and centring follows the h2 above it.
 * Scoped to `#contt p`, which no other view emits.
 */
#contt p {
	padding: 0 30px;
	font-size: 17px;
	line-height: 24px;
	text-align: center;
	color: rgb(29, 68, 108);
}

/*
 * Links sitting ON the light panel.
 *
 * JUDGMENT CALL — the owner should look at this one.
 * The global rule is `a { color:rgb(79,203,255); font-size:21px }`, which is
 * tuned for the dark field. On the panel's #c5e8f7 it lands at roughly 1.9:1
 * contrast — and at 21px it towers over the 17px sentence it sits inside, which
 * is most of why the EULA line looks broken. Live has the same problem.
 *
 * rgb(35,90,114) is the site's own secondary-button colour, so this stays
 * inside the existing palette, and it reaches ~5.6:1 on the panel. The
 * underline is restored (style.css kills it globally with !important) so the
 * link is identifiable as a link now that it is no longer the biggest text in
 * the sentence.
 */
#contagree label a,
#contt p a {
	font-size: 17px;
	color: rgb(35, 90, 114);
	text-decoration: underline !important;
}

#contagree label a:hover,
#contt p a:hover {
	color: rgb(29, 68, 108);
}

/* =====================================================================
 * 4. FOCUS STATES
 * =====================================================================
 *
 * style.css defines no :focus state at all — keyboard users get whatever the
 * browser does, which on the coral buttons is close to nothing.
 *
 * :focus-visible, not :focus, so the ring appears for keyboard navigation and
 * does not fire on every mouse click. Coral is the site's accent and reads on
 * both the dark field and the light panel; the active pill is itself coral-free
 * for exactly this reason. The offset keeps the ring off the glyphs.
 */
#languages .lang:focus-visible,
#contagree label a:focus-visible,
#contt p a:focus-visible,
.submit:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="checkbox"]:focus-visible {
	outline: 2px solid rgb(255, 99, 79);
	outline-offset: 2px;
}

/* The text fields are white on a light panel; a coral ring alone is thin, so
   the field is lifted as well. Colour is not the only signal. */
input[type="text"]:focus-visible,
input[type="password"]:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 99, 79, 0.25),
	            2px 2px 6px 0 rgba(105, 105, 105, 1);
}

/* =====================================================================
 * 5. SITE NAVIGATION  (app/views/layout.php #top .top-home + #sitenav)
 * =====================================================================
 *
 * The owner's problem was "we can't go back only with browser. Or at least to
 * go home." There was NO in-page navigation. Two affordances answer it, both in
 * the shared shell so they are on every page:
 *
 *   a) the #top logo is now a link home, and
 *   b) #sitenav is a small text bar: Home + the account links for the session.
 *
 * TEXT PILLS, NOT A HAMBURGER — the same reasoning as the language switcher
 * above. There are only ever three links; a menu that must be opened would hide
 * three items behind a tap and pull in JS for nothing. A quiet centred row that
 * wraps on a phone is simpler, needs no script, and keeps Home always visible.
 * The pills reuse the switcher's own vocabulary so the header reads as one unit;
 * the palette is style.css's, no new colours.
 */

/* The logo band becomes the primary "home" target (logo-as-home is universal).
   position:relative only establishes the containing block for the overlay link
   — it does not move #top (no offsets), so the 2014 layout is unchanged. */
#top {
	position: relative;
}

/* An empty link laid over the whole logo band. It carries an aria-label for
   assistive tech; font-size:0 hides the (absent) text without affecting the
   background logo style.css paints. inset:0 covers the padded band so the whole
   logo is clickable, not just the 100px content box below its 60px padding. */
#top .top-home {
	position: absolute;
	inset: 0;
	display: block;
	font-size: 0;
	text-decoration: none;
	border-radius: 3px;
}

#top .top-home:focus-visible {
	outline: 2px solid rgb(255, 99, 79);
	outline-offset: -2px;      /* inset, so the ring stays within the band */
}

/* The nav bar. Wider measure than the 530px panel because it is a row of links,
   not a column of controls; still centred on the same axis as everything else. */
#sitenav {
	width: 100%;
	max-width: 700px;
	margin: 14px auto 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

#sitenav ul {
	list-style: none;
	margin: 0;
	padding: 0;

	/* Wrapping is deliberate, exactly as in #languages: on a phone the three
	   links drop to a second centred row rather than overflowing. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
}

#sitenav li {
	margin: 0;
	padding: 0;
}

/* Pills, one notch more present than the language pills (17px, the site's label
   and button size) because this is the primary navigation, not the switcher. */
#sitenav .navlink {
	display: inline-block;
	padding: 7px 16px;
	font-family: 'Dosis', sans-serif;
	font-size: 17px;
	line-height: 20px;
	white-space: nowrap;
	text-align: center;

	border: 1px solid rgba(164, 197, 227, 0.4);
	border-radius: 3px;            /* the site's control radius */
	background-color: rgba(255, 255, 255, 0.07);
	color: rgb(79, 203, 255);      /* the site's link colour */
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#sitenav .navlink:hover,
#sitenav .navlink:focus {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: rgb(164, 197, 227);
	color: #ffffff;
}

/* "You are here" — the same cut-from-the-panel chip the active language pill
   uses, so the two rows share one visual language. Coral is reserved for
   actions on this site, and the current page is not an action. */
#sitenav .navlink[aria-current="page"] {
	background-color: #c5e8f7;
	border-color: rgb(164, 197, 227);
	color: rgb(29, 68, 108);
	font-weight: 600;
}

#sitenav .navlink:focus-visible {
	outline: 2px solid rgb(255, 99, 79);
	outline-offset: 2px;
}

/* =====================================================================
 * 6. NARROW SCREENS
 * =====================================================================
 *
 * downloads.php and confirm.php had no viewport tag; they have one now (it is
 * what makes the fonts and the layout behave on a phone). That is an
 * improvement, but it has a consequence worth being honest about: a real
 * viewport means a 360px-wide phone now renders CSS pixels 1:1 instead of
 * zooming out to fit, and the 2014 layout is built from fixed widths — a 530px
 * panel holding 402px buttons with 116px side margins. Without the block below,
 * adding the viewport would trade a blurry-but-whole page for a page you have
 * to scroll sideways.
 *
 * So this is scoped to <600px and does nothing whatsoever above it. Desktop
 * rendering is byte-for-byte what it was. It relaxes fixed widths and fixed
 * heights to fluid ones; it does not restructure the panels, move anything, or
 * change the visual identity. Only the refactored pages load this file, so the
 * legacy pages keep the behaviour they have today.
 */
@media screen and (max-width: 600px) {

	#contt,
	#contagree,
	#contreg {
		width: auto;
		max-width: 100%;
		height: auto;              /* #contagree:300px / #contreg:810px are fixed */
		margin: 20px 12px 0 12px;
		padding: 30px 0;
		box-sizing: border-box;
	}

	/*
	 * 402px wide with 116px side margins does not fit a phone.
	 *
	 * width is calc(), NOT auto. `display:block; width:auto` looks like the
	 * obvious spelling and is wrong here: these are <input type="submit">, and
	 * a form control with width:auto sizes to its own text rather than filling
	 * its container — which left the four download buttons shrink-wrapped to
	 * four different widths, ragged against the left edge. calc(100% - 32px)
	 * against the 16px margins below fills the panel and keeps them uniform,
	 * which is what they are on desktop.
	 */
	.subat,
	.subatreg,
	.subatregreg,
	.downl,
	.downprav {
		display: block;
		width: calc(100% - 32px);
		max-width: calc(100% - 32px);
		margin-left: 16px;
		margin-right: 16px;
		box-sizing: border-box;
	}

	.subatregreg {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.downprav {
		margin-bottom: 40px;
	}

	/* The labels float right with an 82px right padding, which strands them
	   off-centre once the panel is narrow. */
	#contt label,
	#contagree label,
	#contreg label {
		float: none;
		padding-right: 0;
		padding-left: 0;
	}

	#contagree label {
		padding: 0 16px 30px 16px;
	}

	#contt label,
	#contreg label {
		display: block;
		text-align: center;
	}

	/*
	 * Stack the caption above its field, always.
	 *
	 * Without this the label span and the input stay inline and wrap only when
	 * they happen not to fit, so "Login:" sat above its box while "Name:" sat
	 * beside it — the same form rendered two different ways down its own length,
	 * purely on the accident of caption width. Making the span a block is the
	 * cheapest way to get one consistent shape on a phone.
	 */
	#contt label span,
	#contreg label span {
		display: block;
		text-align: center;
		padding-right: 0;
		line-height: 24px;
	}

	input.reginput,
	.textinput {
		width: 80%;
		max-width: 290px;
		margin-top: 6px;
		box-sizing: border-box;
	}

	/* The 500px #top logo band overflows too. */
	#contt,
	#top,
	#footer {
		width: auto;
		max-width: 100%;
	}

	#languages {
		gap: 6px;
	}

	#languages .lang {
		font-size: 14px;
		padding: 5px 10px;
	}

	/* The nav pills tighten the same way the language pills do, so three links
	   plus a wrap sit comfortably on a 360px phone. */
	#sitenav {
		padding: 0 12px;
	}

	#sitenav .navlink {
		font-size: 15px;
		padding: 6px 12px;
	}

	/* The gutter the desktop rule deliberately does without, so the alert does
	   not run edge to edge against the screen. Matches the panel's margin. */
	#messages {
		padding: 0 12px;
	}
}