/**
 * AWWO® CMS - System pages (installer, errors)
 * Every colour comes from the AWWO® palette below; nothing else is a
 * literal colour except the two functional exceptions.
 *
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD™.
 * @license LicenseRef-Proprietary
 */

/* Open Sans, self-hosted and complete (SIL Open Font License,
   fonts/awwo-cms-open-sans-license.txt): upright and italic, every weight
   from 300 to 800 in each file (a variable font), split by script (Latin,
   Latin Extended, Cyrillic, Greek, Hebrew, Vietnamese, maths, symbols);
   browsers download a file only when the page uses its letters. It is
   every site's own font and fallback, always there. Font files are never
   changed in place: a new version gets a new name. */

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-greek-ext.woff2") format("woff2");
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-hebrew.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-math.woff2") format("woff2");
	unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-symbols.woff2") format("woff2");
	unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-cyrillic-ext.woff2") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-greek-ext.woff2") format("woff2");
	unicode-range: U+1F00-1FFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-hebrew.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-math.woff2") format("woff2");
	unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-symbols.woff2") format("woff2");
	unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-vietnamese.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/awwo-cms-open-sans-normal-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* The world map behind it: the dark canvas colour on the light canvas. */
	--awwo-cms-map: color-mix(in oklab, var(--awwo-cms-navy) 55%, black);
	--awwo-cms-map-opacity: 0.2;
	/* Field borders on the glass card: the palette's grey, so they still
	   show on white glass (the usual border colour in dark mode). */
	--awwo-cms-glass-field-border: var(--awwo-cms-grey);
	/* AWWO® palette */
	--awwo-cms-navy: #2c3d50;
	--awwo-cms-green: #0f9d58;
	--awwo-cms-grey: #c8c7cd;
	--awwo-cms-grey-dark: #93919c;
	--awwo-cms-grey-light: #e0dfe5;
	--awwo-cms-white: #ffffff;

	/* Functional exceptions: no palette colour can signal a problem. */
	--awwo-cms-amber: #b06f00;
	--awwo-cms-red: #cf222e;

	/* Light theme roles */
	--awwo-cms-bg: color-mix(in oklab, var(--awwo-cms-grey-light) 45%, var(--awwo-cms-white));
	--awwo-cms-surface: var(--awwo-cms-white);
	--awwo-cms-text: var(--awwo-cms-navy);
	--awwo-cms-muted: color-mix(in oklab, var(--awwo-cms-navy) 70%, var(--awwo-cms-grey-dark));
	--awwo-cms-border: var(--awwo-cms-grey-light);
	--awwo-cms-control: color-mix(in oklab, var(--awwo-cms-grey-light) 40%, var(--awwo-cms-white));
	--awwo-cms-logo-pad: var(--awwo-cms-white);
	--awwo-cms-ok: var(--awwo-cms-green);
	--awwo-cms-brand: var(--awwo-cms-green);
	--awwo-cms-warn: var(--awwo-cms-amber);
	--awwo-cms-fail: var(--awwo-cms-red);
	--awwo-cms-tooltip-bg: var(--awwo-cms-green);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
	--awwo-cms-notice-ok-bg: transparent;
	--awwo-cms-notice-ok-border: var(--awwo-cms-ok);
	--awwo-cms-notice-ok-text: var(--awwo-cms-ok);

	--awwo-cms-radius: 12px;
	/* Button motion: quick start, long soft settle. */
	--awwo-cms-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--awwo-cms-lift-duration: 0.6s;
	--awwo-cms-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	color-scheme: light;
}

/* Dark theme: when chosen, or when the system is dark and nothing was chosen. */
:root[data-theme="dark"] {
	--awwo-cms-bg: color-mix(in oklab, var(--awwo-cms-navy) 55%, black);
	--awwo-cms-surface: color-mix(in oklab, var(--awwo-cms-navy) 80%, black);
	/* The world map behind it: its own light grey on the dark canvas. */
	--awwo-cms-map: var(--awwo-cms-grey-light);
	--awwo-cms-map-opacity: 0.1;
	--awwo-cms-glass-field-border: var(--awwo-cms-border);
	--awwo-cms-text: var(--awwo-cms-grey-light);
	--awwo-cms-muted: var(--awwo-cms-grey);
	--awwo-cms-border: color-mix(in oklab, var(--awwo-cms-navy) 75%, var(--awwo-cms-grey-dark));
	--awwo-cms-control: var(--awwo-cms-navy);
	--awwo-cms-logo-pad: var(--awwo-cms-white);
	--awwo-cms-ok: color-mix(in oklab, var(--awwo-cms-green) 75%, var(--awwo-cms-white));
	--awwo-cms-brand: color-mix(in oklab, var(--awwo-cms-green) 75%, var(--awwo-cms-white));
	--awwo-cms-warn: color-mix(in oklab, var(--awwo-cms-amber) 70%, var(--awwo-cms-white));
	--awwo-cms-fail: color-mix(in oklab, var(--awwo-cms-red) 70%, var(--awwo-cms-white));
	--awwo-cms-tooltip-bg: var(--awwo-cms-green);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
	--awwo-cms-notice-ok-bg: transparent;
	--awwo-cms-notice-ok-border: var(--awwo-cms-ok);
	--awwo-cms-notice-ok-text: var(--awwo-cms-ok);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--awwo-cms-bg: color-mix(in oklab, var(--awwo-cms-navy) 55%, black);
		--awwo-cms-surface: color-mix(in oklab, var(--awwo-cms-navy) 80%, black);
		/* The world map behind it: its own light grey on the dark canvas. */
		--awwo-cms-map: var(--awwo-cms-grey-light);
		--awwo-cms-map-opacity: 0.1;
		--awwo-cms-glass-field-border: var(--awwo-cms-border);
		--awwo-cms-text: var(--awwo-cms-grey-light);
		--awwo-cms-muted: var(--awwo-cms-grey);
		--awwo-cms-border: color-mix(in oklab, var(--awwo-cms-navy) 75%, var(--awwo-cms-grey-dark));
		--awwo-cms-control: var(--awwo-cms-navy);
	--awwo-cms-logo-pad: var(--awwo-cms-white);
		--awwo-cms-ok: color-mix(in oklab, var(--awwo-cms-green) 75%, var(--awwo-cms-white));
	--awwo-cms-brand: color-mix(in oklab, var(--awwo-cms-green) 75%, var(--awwo-cms-white));
		--awwo-cms-warn: color-mix(in oklab, var(--awwo-cms-amber) 70%, var(--awwo-cms-white));
		--awwo-cms-fail: color-mix(in oklab, var(--awwo-cms-red) 70%, var(--awwo-cms-white));
		--awwo-cms-tooltip-bg: var(--awwo-cms-green);
		--awwo-cms-tooltip-text: var(--awwo-cms-white);
		--awwo-cms-notice-ok-bg: transparent;
		--awwo-cms-notice-ok-border: var(--awwo-cms-ok);
		--awwo-cms-notice-ok-text: var(--awwo-cms-ok);

		color-scheme: dark;
	}
}

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

/* "hidden" always wins, even over layout rules such as display: flex. */
[hidden] {
	display: none !important;
}

body.awwo-cms-system {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: var(--awwo-cms-bg);
	color: var(--awwo-cms-text);
	font: 15px/1.6 var(--awwo-cms-font);
	/* House rule: wrapped text fills each line, and its last line is never
	   left with just a word or two (pretty, not balanced lines, which
	   shorten every line). Inherited by every element. */
	text-wrap: pretty;
}

/* Headings: lines of similar length (a two-line heading split evenly). */
h1,
h2,
h3 {
	text-wrap: balance;
}

/* House rule: text is never underlined (links keep their colour). */
a,
a:hover,
a:focus-visible {
	text-decoration: none;
}

/* What people type wraps naturally (filling each line), never balanced. */
input,
textarea,
select {
	text-wrap: wrap;
}

/* Every page with this shell (Connect, Create Account, Reset Password,
   the installer, error pages): the AWWO world map on top of the background
   colour (dark canvas colour in light mode, its own light grey in dark
   mode), centred both ways, at 0.2 opacity in light mode and 0.1 in dark;
   everything else above it; the
   card's background see-through (40%) in both modes. */
body.awwo-cms-system::before {
	content: "";
	position: fixed;
	inset: 24px;
	z-index: 0;
	/* The map's shape, in the theme's map colour (--awwo-cms-map). */
	background: var(--awwo-cms-map);
	-webkit-mask: url("../img/awwo-world-map.svg?v=3239939160") center / contain no-repeat;
	mask: url("../img/awwo-world-map.svg?v=3239939160") center / contain no-repeat;
	opacity: var(--awwo-cms-map-opacity);
	pointer-events: none;
}

body.awwo-cms-system > * {
	position: relative;
	z-index: 1;
}

/* The card as liquid glass: frosted (the canvas behind it blurred and a
   little more saturated), a rim catching the light at the top left, a
   bright line inside the top edge and a darker one at the bottom for
   thickness, a soft shadow lifting it, a faint sheen across its top, and
   a lens: a copy of the map 10% larger, lined up with the canvas map
   (awwo-cms-glass.js), so what shows through looks magnified.
   The map's address carries its content fingerprint (?v=, the same as
   asset() makes): browsers keep it for years, so a changed map needs a new
   one here (php -r 'echo substr(hash_file("xxh3", "public/assets/img/awwo-world-map.svg"), 0, 10);'). */
body.awwo-cms-system .awwo-cms-card {
	--awwo-cms-glass-rim: color-mix(in srgb, var(--awwo-cms-white) 55%, transparent);
	--awwo-cms-glass-shade: color-mix(in srgb, var(--awwo-cms-navy) 18%, transparent);
	isolation: isolate;
	background: color-mix(in srgb, var(--awwo-cms-surface) 40%, transparent);
	border-color: color-mix(in srgb, var(--awwo-cms-border) 70%, transparent);
	box-shadow:
		inset 0 1px 0 var(--awwo-cms-glass-rim),
		inset 0 -1px 0 var(--awwo-cms-glass-shade),
		0 24px 60px -12px rgb(0 0 0 / 0.35);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
}

/* The fields on the glass: about 60% see-through, each with a faint
   bright line inside its top edge, like small glass panels set into the
   card (no blur of their own: the card's frost is enough). Only the
   background colour changes, so drop-downs keep their arrow; text,
   placeholders and the focus outline stay solid. */
body.awwo-cms-system .awwo-cms-card .awwo-cms-input,
body.awwo-cms-system .awwo-cms-card .awwo-cms-input-wrap {
	background-color: color-mix(in srgb, var(--awwo-cms-control) 60%, transparent);
	/* The resting border only: hover, focus and errors keep their own colours. */
	--awwo-cms-field-border: var(--awwo-cms-glass-field-border);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--awwo-cms-white) 18%, transparent);
}

/* The buttons on the glass, at rest: a faint tinted panel with the same
   top line, so they read as glass too (not holes in it). Hovered, and the
   current page's switch button, they fill solid as everywhere else. */
body.awwo-cms-system .awwo-cms-card .awwo-cms-button:not(:hover):not(:focus-visible):not([aria-current="page"]) {
	background-color: color-mix(in srgb, var(--awwo-cms-control) 35%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--awwo-cms-white) 18%, transparent);
}

/* A masked field is one panel: the input inside it stays clear. */
body.awwo-cms-system .awwo-cms-card .awwo-cms-input-wrap .awwo-cms-input {
	background-color: transparent;
	box-shadow: none;
}

/* The Security Check's numbers: the same glass panels as its answer box. */
body.awwo-cms-system .awwo-cms-card .awwo-cms-captcha-term {
	background-color: color-mix(in srgb, var(--awwo-cms-control) 60%, transparent);
	border-color: var(--awwo-cms-glass-field-border);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--awwo-cms-white) 18%, transparent);
}

/* The rim: a 1px edge bright at the top left, fading round the card. */
body.awwo-cms-system .awwo-cms-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--awwo-cms-glass-rim), transparent 35%, transparent 65%, color-mix(in srgb, var(--awwo-cms-white) 18%, transparent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* The sheen: a faint light across the top of the glass. */
body.awwo-cms-system .awwo-cms-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(160deg, color-mix(in srgb, var(--awwo-cms-white) 9%, transparent), transparent 45%);
	pointer-events: none;
}

/* The lens: the map again, 10% larger, inside the card (placed by
   awwo-cms-glass.js; hidden until then). */
.awwo-cms-glass-lens {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--awwo-cms-map);
	-webkit-mask: url("../img/awwo-world-map.svg?v=3239939160") no-repeat;
	mask: url("../img/awwo-world-map.svg?v=3239939160") no-repeat;
	-webkit-mask-size: var(--awwo-cms-lens-size, 0 0);
	mask-size: var(--awwo-cms-lens-size, 0 0);
	-webkit-mask-position: var(--awwo-cms-lens-at, 0 0);
	mask-position: var(--awwo-cms-lens-at, 0 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s var(--awwo-cms-ease-out);
}

.awwo-cms-glass-lens[data-awwo-cms-placed] {
	opacity: var(--awwo-cms-map-opacity);
}

.awwo-cms-card {
	width: 100%;
	max-width: 640px;
	padding: 32px;
	background: var(--awwo-cms-surface);
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
}

/* Header: logo, product name, theme switch */

.awwo-cms-header {
	position: relative;
	display: flex;
	justify-content: center;
	margin-bottom: 32px;
}

/* Pinned to the corner so the logo stays centred. Higher specificity than
   the tooltip rule, which also sets position. */
.awwo-cms-header .awwo-cms-theme-toggle {
	position: absolute;
	top: 0;
	right: 0;
}

/* The logo sits on its round white pad with the green ring; both are part
   of the logo itself (the ring is 7.6% of the diameter, as in the film).
   The logo keeps its registered colours in both themes. */
.awwo-cms-logo-pad {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	border-radius: 50%;
	background: var(--awwo-cms-logo-pad);
}

.awwo-cms-logo {
	display: block;
	width: 100%;
	height: 100%;
}

.awwo-cms-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-text);
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.awwo-cms-theme-toggle:hover,
.awwo-cms-theme-toggle:focus-visible {
	color: var(--awwo-cms-ok);
	border-color: currentColor;
}

.awwo-cms-theme-toggle:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

.awwo-cms-icon {
	width: 18px;
	height: 18px;
}

/* Create Account's icon (front-end switch, Captcha Protection, Users)
   draws a little small in its box: a fifth larger, same space. */
.awwo-cms-icon:has(use[href*="/awwo-cms-circle-user-plus.svg"]) {
	scale: 1.2;
}

/* Light shows the moon (switch to dark); dark shows the sun. */
.awwo-cms-icon-sun { display: none; }
:root[data-theme="dark"] .awwo-cms-icon-sun { display: block; }
:root[data-theme="dark"] .awwo-cms-icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .awwo-cms-icon-sun { display: block; }
	:root:not([data-theme]) .awwo-cms-icon-moon { display: none; }
}

/* Tooltips: CSS only, text from data-awwo-cms-tooltip */

[data-awwo-cms-tooltip] {
	position: relative;
}

[data-awwo-cms-tooltip]::after {
	content: attr(data-awwo-cms-tooltip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	padding: 4px 10px;
	border-radius: 6px;
	background: var(--awwo-cms-tooltip-bg);
	color: var(--awwo-cms-tooltip-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	/* Inside a button it keeps its own lettering, not the button's capitals. */
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 10;
}

[data-awwo-cms-tooltip]:hover::after,
[data-awwo-cms-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}

/* Tooltips that open above the control, centred on it (e.g. Show/Hide
   at the end of a field). */
[data-awwo-cms-tooltip-above]::after {
	top: auto;
	right: auto;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translate(-50%, 4px);
}

[data-awwo-cms-tooltip-above]:hover::after,
[data-awwo-cms-tooltip-above]:focus-visible::after {
	transform: translate(-50%, 0);
}

/* A tooltip shown without hover, for a while (Look Up's "Found in ANAF"). */
[data-awwo-cms-tooltip-shown]::after {
	opacity: 1;
	transform: translateY(0);
}

/* Look Up's: above it, its right edge on the button's (inside the box). */
[data-awwo-cms-company-lookup][data-awwo-cms-tooltip]::after {
	top: auto;
	bottom: calc(100% + 8px);
	transform: translateY(4px);
}

[data-awwo-cms-company-lookup][data-awwo-cms-tooltip-shown]::after {
	transform: translateY(0);
}

/* The brand name is always bold and green; its ® follows the same colour. */
.awwo-cms-name,
.awwo-cms-name + .awwo-cms-reg {
	color: var(--awwo-cms-brand);
}

.awwo-cms-name {
	font-weight: 700;
}

/* Registered-trademark sign: small and raised, without changing line height. */
.awwo-cms-reg {
	font-size: 0.6em;
	line-height: 0;
	vertical-align: 0.75em;
	margin-left: 0.05em;
}

/* Content */

/* Page titles: title case, kept smaller than the logo lettering so the
   logo stays the strongest element. */
.awwo-cms-card h1 {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
	text-align: center;
	text-transform: capitalize;
}

/* A greeting carries a person's name exactly as they typed it
   ("van der Berg"), so no automatic capitalisation. */
.awwo-cms-card h1.awwo-cms-greeting {
	text-transform: none;
}

.awwo-cms-lead {
	margin: 0 0 24px;
	color: var(--awwo-cms-muted);
	text-align: center;
}

/* "Step N of the installation." always has a line of its own. */
.awwo-cms-lead-step {
	display: block;
}

.awwo-cms-checks {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-top: 1px solid var(--awwo-cms-border);
}

.awwo-cms-check {
	display: flex;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--awwo-cms-border);
}

.awwo-cms-check-status {
	flex: 0 0 104px;
	font-weight: 700;
	font-size: 13px;
}

.awwo-cms-check-ok .awwo-cms-check-status { color: var(--awwo-cms-ok); }
.awwo-cms-check-warn .awwo-cms-check-status { color: var(--awwo-cms-warn); }
.awwo-cms-check-fail .awwo-cms-check-status { color: var(--awwo-cms-fail); }

.awwo-cms-check-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow-wrap: anywhere;
}

.awwo-cms-check-text span {
	color: var(--awwo-cms-muted);
	font-size: 14px;
}

.awwo-cms-notice {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid currentColor;
	border-radius: 8px;
	font-weight: 700;
	text-align: center;
}

.awwo-cms-notice-ok {
	background: var(--awwo-cms-notice-ok-bg);
	border-color: var(--awwo-cms-notice-ok-border);
	color: var(--awwo-cms-notice-ok-text);
}
.awwo-cms-notice-warn { color: var(--awwo-cms-warn); }
.awwo-cms-notice-fail { color: var(--awwo-cms-fail); }

.awwo-cms-ref {
	margin: 0;
	text-align: center;
}

.awwo-cms-ref-spaced {
	margin-top: 12px;
}

.awwo-cms-ref code {
	font-size: 14px;
}

/* Forms */

.awwo-cms-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}

/* Short forms (sign-in) stay narrow and centred in the card. */
.awwo-cms-form-narrow {
	max-width: 400px;
	margin-right: auto;
	margin-left: auto;
}

/* A card around a narrow form (Connect, Create Account, Reset Password)
   is as wide as the form plus its padding, so the space around the form
   is the same on all four sides. */
.awwo-cms-card:has(.awwo-cms-form-narrow) {
	max-width: calc(400px + 2 * 32px + 2px);
}

/* Groups fields inside a longer form ("Site", "Owner Account"). Starts
   where the labels start. */
.awwo-cms-form-section {
	margin: 8px 0 0;
	padding: 0 0 8px 13px;
	border-bottom: 1px solid var(--awwo-cms-border);
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Server and port share a row; the other fields come in pairs. */
.awwo-cms-fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.awwo-cms-fields .awwo-cms-field { grid-column: span 2; }
.awwo-cms-fields .awwo-cms-field-host { grid-column: span 3; }
.awwo-cms-fields .awwo-cms-field-port { grid-column: span 1; }
.awwo-cms-fields .awwo-cms-field-wide { grid-column: span 4; }

/* A pair with a phone (Main and Backup, Email Address and Phone, Region
   and Phone): side by side only where the box leaves the phone room for
   its code and a whole number (+40 0722 123 456), else each its own row. */
.awwo-cms-fields:has(> .awwo-cms-field-pair) {
	container-type: inline-size;
}

.awwo-cms-fields .awwo-cms-field-pair { grid-column: span 4; }

@container (min-width: 500px) {
	.awwo-cms-fields .awwo-cms-field-pair { grid-column: span 2; }
}

.awwo-cms-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Labels start where the text inside the input starts: the input's
   border (1px) plus its left padding (12px). */
.awwo-cms-field label {
	padding-left: 13px;
}

/* A character counter at the label row's end, level with the input's
   text inset; red while the text is outside its range. */
.awwo-cms-counter {
	margin-left: auto;
	padding-right: 13px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.awwo-cms-counter.is-out {
	color: var(--awwo-cms-fail);
}

.awwo-cms-counter.is-in {
	color: var(--awwo-cms-ok);
}

/* "Table Prefix (Regenerate)": the action sits right after the label. */
.awwo-cms-label-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding-left: 13px;
}

.awwo-cms-field .awwo-cms-label-row label,
.awwo-cms-field .awwo-cms-label-row .awwo-cms-field-label {
	padding-left: 0;
}

.awwo-cms-label-action {
	padding: 0;
	border: 0;
	background: none;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}



/* Switched off (Look Up before a country is chosen): greyed out as its
   field; not while it works (its tooltip says so). */
.awwo-cms-label-action:disabled:not([data-awwo-cms-tooltip-shown]) {
	opacity: 0.55;
	cursor: not-allowed;
}

.awwo-cms-label-action:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Masked fields: the field and a square Show/Hide box at its end form one
   control, with one shared border. The input inside keeps its own padding,
   so its text still lines up with the label. */
.awwo-cms-input-wrap {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--awwo-cms-field-border, var(--awwo-cms-border));
	border-radius: 8px;
	background: var(--awwo-cms-control);
	transition: border-color 0.2s;
}

.awwo-cms-input-wrap:hover {
	border-color: var(--awwo-cms-grey-dark);
}

.awwo-cms-input-wrap:focus-within {
	border-color: var(--awwo-cms-ok);
	outline: 2px solid color-mix(in oklab, var(--awwo-cms-ok) 35%, transparent);
}

.awwo-cms-input-wrap:has([aria-invalid="true"]) {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-input-wrap .awwo-cms-input,
.awwo-cms-input-wrap .awwo-cms-input:hover,
.awwo-cms-input-wrap .awwo-cms-input:focus {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	/* Its colour only: a drop-down keeps its arrow. */
	background-color: transparent;
}

/* A perfect square: as wide as the field is tall (text line 24px +
   2 x 10px padding = 44px). Set explicitly; the field's height is not a
   size the box can take its width from. */
.awwo-cms-input-wrap .awwo-cms-reveal {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--awwo-cms-border);
	border-radius: 0 7px 7px 0;
	background: none;
	color: var(--awwo-cms-muted);
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}

.awwo-cms-input-wrap .awwo-cms-reveal[hidden] {
	display: none;
}

.awwo-cms-input-wrap .awwo-cms-reveal:hover,
.awwo-cms-input-wrap .awwo-cms-reveal:focus-visible {
	color: var(--awwo-cms-ok);
	background: color-mix(in oklab, var(--awwo-cms-ok) 8%, transparent);
}

.awwo-cms-input-wrap .awwo-cms-reveal:focus-visible {
	outline: 0;
}

/* A field with an icon (Social Profiles): a square at its start, part of
   the field, the same size as the Show/Hide box. */
.awwo-cms-input-wrap .awwo-cms-input-icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	border-right: 1px solid var(--awwo-cms-border);
	border-radius: 7px 0 0 7px;
	color: var(--awwo-cms-muted);
}

.awwo-cms-input-wrap:focus-within .awwo-cms-input-icon {
	color: var(--awwo-cms-ok);
}

/* Social Profiles buttons (backend top bar, Connect / Create Account /
   Reset Password): round, as the theme switch. */
.awwo-cms-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.awwo-cms-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-text);
	transition:
		background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

/* House style: lifts 6px and fills green, the icon white. */
.awwo-cms-social a:hover,
.awwo-cms-social a:focus-visible {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
	transform: translateY(-6px);
}

.awwo-cms-social a:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

.awwo-cms-social .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

/* Their tooltips below (the top bar) are centred on the button too. */
.awwo-cms-social [data-awwo-cms-tooltip]:not([data-awwo-cms-tooltip-above])::after {
	right: auto;
	left: 50%;
	transform: translate(-50%, -4px);
}

.awwo-cms-social [data-awwo-cms-tooltip]:not([data-awwo-cms-tooltip-above]):hover::after,
.awwo-cms-social [data-awwo-cms-tooltip]:not([data-awwo-cms-tooltip-above]):focus-visible::after {
	transform: translate(-50%, 0);
}

/* At the bottom of the front-end card, centred. */
.awwo-cms-card > .awwo-cms-social {
	justify-content: center;
	margin-top: 24px;
}

/* Secret fields (database credentials) are text fields masked here, so
   browsers never see a password field and never offer to save them. */
.awwo-cms-input[data-awwo-cms-secret]:not([data-awwo-cms-revealed]) {
	-webkit-text-security: disc;
	text-security: disc;
}

.awwo-cms-reveal .awwo-cms-icon-eye-slash,
.awwo-cms-reveal[aria-pressed="true"] .awwo-cms-icon-eye {
	display: none;
}

.awwo-cms-reveal[aria-pressed="true"] .awwo-cms-icon-eye-slash {
	display: block;
}

.awwo-cms-field label {
	font-size: 13px;
	font-weight: 700;
}

/* A field's label that is not a <label> (e.g. the Security Check above
   Cloudflare Turnstile, the Logo box): the same look. */
.awwo-cms-field-label {
	padding-left: 13px;
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-input {
	width: 100%;
	padding: 10px 12px;
	/* --awwo-cms-field-border: a page's own resting border (the glass card's). */
	border: 1px solid var(--awwo-cms-field-border, var(--awwo-cms-border));
	border-radius: 8px;
	background: var(--awwo-cms-control);
	color: var(--awwo-cms-text);
	font: inherit;
	transition: border-color 0.2s;
}

/* Drop-downs: no native padding or arrow, so their text starts exactly
   where an input's text (and the label) starts. Arrow: the chevron-down
   icon, in the palette's dark grey, which reads on both themes. */
select.awwo-cms-input,
.awwo-cms-search-input {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2393919c' d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 12px;
	cursor: pointer;
}

.awwo-cms-input::placeholder {
	color: var(--awwo-cms-muted);
	opacity: 0.6;
}

.awwo-cms-input:hover {
	border-color: var(--awwo-cms-grey-dark);
}

.awwo-cms-input:focus {
	border-color: var(--awwo-cms-ok);
	outline: 2px solid color-mix(in oklab, var(--awwo-cms-ok) 35%, transparent);
	outline-offset: 0;
}

/* Read-only values (e.g. a username once chosen): plain, not editable-looking. */
.awwo-cms-input[readonly] {
	border-style: dashed;
	color: var(--awwo-cms-muted);
	cursor: default;
}

.awwo-cms-input[readonly]:focus {
	border-color: var(--awwo-cms-border);
	outline: 0;
}

.awwo-cms-input[aria-invalid="true"],
.awwo-cms-search:has(select[aria-invalid="true"]) .awwo-cms-search-input {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-input-key {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.awwo-cms-control {
	position: relative;
}

/* Field errors are tooltips: a red bubble above the field's right end,
   shown while the field is focused or hovered (the field itself turns red
   either way). Same look in both themes. */
.awwo-cms-field-error {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	z-index: 11;
	max-width: 100%;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s;
}

.awwo-cms-field-error::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 16px;
	border: 6px solid transparent;
	border-top-color: var(--awwo-cms-red);
}

.awwo-cms-control:focus-within .awwo-cms-field-error,
.awwo-cms-control:hover .awwo-cms-field-error {
	opacity: 1;
	transform: translateY(0);
}

/* While a field shows its error, the Show/Hide hint stays out of the way. */
.awwo-cms-control:has(.awwo-cms-field-error) .awwo-cms-reveal::after {
	display: none;
}

.awwo-cms-actions {
	display: flex;
	justify-content: center;
	margin: 24px 0 0;
}

/* In a form, the button sits the same 16px from the field above it as
   the fields from each other. */
.awwo-cms-form .awwo-cms-actions {
	margin-top: 0;
}

/* Captcha Protection, Math Captcha: the sum in one row of boxes as tall
   as the inputs (46px): its terms, the blank to fill in, and the signs
   between them. */
.awwo-cms-captcha-math {
	display: flex;
	align-items: center;
	gap: 10px;
}

.awwo-cms-captcha-term,
.awwo-cms-captcha-math .awwo-cms-captcha-input {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 46px;
	padding: 6px 8px;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	text-align: center;
	overflow-wrap: anywhere;
}

.awwo-cms-captcha-term {
	background: transparent;
	color: var(--awwo-cms-text);
	font-weight: 700;
	line-height: 1.2;
	user-select: none;
}

/* Its time left after the label, like (Generate) after Password. */
.awwo-cms-captcha-timer {
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Expired: the whole question fades (its boxes and signs) until (Reload). */
.awwo-cms-captcha-math {
	transition: opacity var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-captcha[data-awwo-cms-expired] .awwo-cms-captcha-math {
	opacity: 0.4;
	pointer-events: none;
}

/* A long number in words ("twenty-eight") stays on one line, a little smaller. */
.awwo-cms-captcha-term-long {
	font-size: 12px;
	white-space: nowrap;
}

.awwo-cms-captcha-sign {
	flex: none;
	color: var(--awwo-cms-muted);
	font-size: 18px;
	font-weight: 700;
}

/* Cloudflare Turnstile, framed like our fields: its frame (Cloudflare's,
   inside an iframe we cannot style) is nudged 1px out on every side and
   clipped by our own rounded border, so it reads as one of our fields;
   65px tall, as the widget is. */
.awwo-cms-captcha .cf-turnstile {
	box-sizing: border-box;
	height: 65px;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
}

/* Its wrapper (the iframe itself is out of reach, in a closed shadow root). */
.awwo-cms-captcha .cf-turnstile > div {
	width: calc(100% + 2px);
	margin: -1px;
}

/* On the glass card: the glass card's field border. */
body.awwo-cms-system .awwo-cms-card .cf-turnstile {
	border-color: var(--awwo-cms-glass-field-border);
}

/* Resend Code: under the form's own button, the same 16px apart. */
.awwo-cms-form-resend {
	margin-top: 16px;
}

.awwo-cms-form-resend .awwo-cms-actions {
	margin-top: 0;
}

.awwo-cms-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 10px 24px;
	/* House style: outline at rest, filled green on hover. */
	border: 1px solid var(--awwo-cms-ok);
	border-radius: 8px;
	background: transparent;
	color: var(--awwo-cms-ok);
	font: inherit;
	font-weight: 700;
	/* House style: button text is always uppercase. */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		border-color var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out),
		transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
	/* Crisp text while moving. */
	backface-visibility: hidden;
}

/* A box's button saying it worked ("Updated"): filled, for 5 seconds. */
.awwo-cms-button[data-awwo-cms-done] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* House style: every button lifts and fills when hovered; a disabled one
   (e.g. Resend Code while it counts down) stays as it is. */
.awwo-cms-button:hover:not(:disabled),
.awwo-cms-button:focus-visible {
	transform: translateY(-6px);
}

.awwo-cms-button:hover:not(:disabled),
.awwo-cms-button:focus-visible {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-button:active {
	transform: translateY(-2px);
	transition-duration: 0.1s;
}

/* A result message with its next action on the same row, both the same
   height (e.g. "This server meets all requirements." + Continue). */
.awwo-cms-result-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.awwo-cms-result-row .awwo-cms-notice {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

.awwo-cms-result-row .awwo-cms-button {
	min-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

.awwo-cms-button:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 2px;
}

.awwo-cms-footer {
	margin-top: 16px;
	font-size: 13px;
	color: var(--awwo-cms-muted);
}

@media (max-width: 480px) {
	.awwo-cms-card {
		padding: 24px 16px;
	}

	/* Around a narrow form: the same on all four sides here too. */
	.awwo-cms-card:has(.awwo-cms-form-narrow) {
		padding: 24px;
	}

	.awwo-cms-check {
		flex-direction: column;
		gap: 2px;
	}

	.awwo-cms-check-status {
		flex: none;
	}

	.awwo-cms-fields {
		grid-template-columns: minmax(0, 1fr);
	}

	.awwo-cms-result-row {
		flex-direction: column;
	}

	.awwo-cms-fields .awwo-cms-field,
	.awwo-cms-fields .awwo-cms-field-host,
	.awwo-cms-fields .awwo-cms-field-port,
	.awwo-cms-fields .awwo-cms-field-wide {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* Search and select (awwo-cms-search-select.js): a text box over a hidden
   drop-down, with its list right under it. */
.awwo-cms-search {
	position: relative;
	min-width: 0;
}

.awwo-cms-search-input {
	width: 100%;
	cursor: text;
}

.awwo-cms-search-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 280px;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-surface);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
	list-style: none;
}

.awwo-cms-search-list [role="option"] {
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.awwo-cms-search-list [role="option"]:hover {
	background: var(--awwo-cms-control);
}

.awwo-cms-search-list [role="option"].awwo-cms-search-chosen {
	color: var(--awwo-cms-ok);
	font-weight: 700;
}

.awwo-cms-search-list [role="option"][aria-selected="true"] {
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* A multiple's chosen items under its box, as chips (its name, Remove ×),
   8px apart; 8px under the box. */
.awwo-cms-search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.awwo-cms-search-chips[hidden] {
	display: none;
}

.awwo-cms-search-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 4px 4px 4px 12px;
	border: 1px solid var(--awwo-cms-green);
	border-radius: 8px;
	color: var(--awwo-cms-ok);
	font-size: 13px;
	font-weight: 700;
}

.awwo-cms-search-chips li > span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.awwo-cms-search-chip-remove {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--awwo-cms-red);
	color: var(--awwo-cms-white);
	cursor: pointer;
}

.awwo-cms-search-chip-remove[data-awwo-cms-tooltip] {
	--awwo-cms-tooltip-bg: var(--awwo-cms-red);
	--awwo-cms-tooltip-text: var(--awwo-cms-white);
}

.awwo-cms-search-chip-remove .awwo-cms-icon {
	width: 12px;
	height: 12px;
}

.awwo-cms-search-group,
.awwo-cms-search-none {
	padding: 10px 12px 4px;
	color: var(--awwo-cms-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

/* Out of sight but still usable (e.g. a file field inside its button). */
.awwo-cms-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The brand name in the copyright, when it links to the brand. */
.awwo-cms-name-link {
	display: inline-block;
	text-decoration: none;
	transition: transform var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

/* It lifts a little on hover, like the other links and buttons. */
.awwo-cms-name-link:hover,
.awwo-cms-name-link:focus-visible {
	transform: translateY(-2px);
}

/* The page logo, when it links to the brand. */
.awwo-cms-header-link {
	display: block;
	border-radius: 50%;
}

/* Connect, Register, Reset Password: square icon buttons under the
   greeting; the current page stays filled. */
.awwo-cms-auth-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 16px;
}

.awwo-cms-auth-switch-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	min-width: 0;
	height: 46px;
	padding: 0;
}

.awwo-cms-auth-switch-item .awwo-cms-icon {
	width: 18px;
	height: 18px;
}

.awwo-cms-auth-switch-item[aria-current="page"],
.awwo-cms-auth-switch-item[aria-pressed="true"] {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

/* The current page's button stays lifted, as if hovered, and does not
   react to the pointer (it is not a link). */
.awwo-cms-auth-switch-item[aria-current="page"] {
	transform: translateY(-6px);
	cursor: default;
	pointer-events: none;
}

/* A switched-on toggle (Captcha Protection, Display On) stays lifted too,
   still clickable to switch it off. */
.awwo-cms-auth-switch-item[aria-pressed="true"] {
	transform: translateY(-6px);
}

/* A "|" between the buttons, in the canvas's border colour. */
.awwo-cms-auth-switch-sep {
	/* The "|": a solid line in the canvas's own border colour (a text
	   character that thin barely shows). */
	flex: none;
	width: 2px;
	height: 24px;
	border-radius: 1px;
	background: var(--awwo-cms-border);
	font-size: 0;
	user-select: none;
}

/* Disabled controls (shared by every page). */
.awwo-cms-fieldset:disabled,
.awwo-cms-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.awwo-cms-button:disabled {
	transform: none;
}

/* Password checklist: each line turns green when met. */
.awwo-cms-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
	margin: 0;
	padding: 0 0 0 13px;
	list-style: none;
	color: var(--awwo-cms-muted);
	font-size: 13px;
}

.awwo-cms-checklist li::before {
	content: "○";
	display: inline-block;
	width: 18px;
}

.awwo-cms-checklist li[data-met] {
	color: var(--awwo-cms-ok);
}

.awwo-cms-checklist li[data-met]::before {
	content: "●";
}

/* Connect, Register, Reset Password: the button as wide as the fields;
   two buttons (Cancel, Finish Reset) share the row in equal halves. */
.awwo-cms-form-narrow .awwo-cms-actions {
	gap: 16px;
}

.awwo-cms-form-narrow .awwo-cms-actions .awwo-cms-button {
	flex: 1 1 0;
	width: 100%;
}

/* Players (awwo-cms-player.js), the same in the backend and on the site:
   one rounded frame; the control bar holds square house buttons, a seek
   bar played in the brand's gradient, and the time. */
.awwo-cms-player {
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--awwo-cms-border);
	border-radius: var(--awwo-cms-radius);
	background: var(--awwo-cms-control);
}

.awwo-cms-player audio {
	display: none;
}

.awwo-cms-player-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 16px 8px 8px;
}

.awwo-cms-player-button {
	flex: none;
	width: 46px;
	min-width: 0;
	height: 46px;
	padding: 0;
}

.awwo-cms-player-button .awwo-cms-icon {
	width: 16px;
	height: 16px;
}

/* Fullscreen: two icons in the same place; on hover the second (arrows to
   all four corners) fades in as the first fades out, at the lift's pace. */
.awwo-cms-player-full {
	display: grid;
	place-items: center;
}

.awwo-cms-player-full .awwo-cms-icon {
	grid-area: 1 / 1;
	transition: opacity var(--awwo-cms-lift-duration) var(--awwo-cms-ease-out);
}

.awwo-cms-player-full .awwo-cms-icon + .awwo-cms-icon,
.awwo-cms-player-full:hover .awwo-cms-icon:first-child,
.awwo-cms-player-full:focus-visible .awwo-cms-icon:first-child {
	opacity: 0;
}

.awwo-cms-player-full:hover .awwo-cms-icon + .awwo-cms-icon,
.awwo-cms-player-full:focus-visible .awwo-cms-icon + .awwo-cms-icon {
	opacity: 1;
}

/* Volume: + above, - below, together as tall as the other buttons. */
.awwo-cms-player-volume {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2px;
}

.awwo-cms-player-volume .awwo-cms-player-button {
	height: 22px;
	border-radius: 6px;
}

.awwo-cms-player-volume .awwo-cms-player-button .awwo-cms-icon {
	width: 11px;
	height: 11px;
}

/* Small moves for these small buttons: + goes up, - goes down. */
.awwo-cms-player-volume .awwo-cms-player-louder:hover:not(:disabled),
.awwo-cms-player-volume .awwo-cms-player-louder:focus-visible {
	transform: translateY(-2px);
}

.awwo-cms-player-volume .awwo-cms-player-quieter:hover:not(:disabled),
.awwo-cms-player-volume .awwo-cms-player-quieter:focus-visible {
	transform: translateY(2px);
}

/* Playing: its play button stays filled. */
.awwo-cms-player[data-playing] .awwo-cms-player-toggle {
	border-color: var(--awwo-cms-green);
	background: var(--awwo-cms-green);
	color: var(--awwo-cms-white);
}

.awwo-cms-player-seek {
	--awwo-cms-played: 0%;
	flex: 1;
	min-width: 0;
	height: 16px;
	margin: 0;
	border-radius: 6px;
	/* Played: the primary colour, full; after the handle: the brand gradient. */
	background: linear-gradient(90deg, var(--awwo-cms-green) var(--awwo-cms-played), var(--awwo-cms-navy));
	cursor: pointer;
	appearance: none;
}

.awwo-cms-player-seek::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	border: 2px solid var(--awwo-cms-white);
	border-radius: 6px;
	background: var(--awwo-cms-green);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
	appearance: none;
}

.awwo-cms-player-seek::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var(--awwo-cms-white);
	border-radius: 6px;
	background: var(--awwo-cms-green);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
}

.awwo-cms-player-seek:focus-visible {
	outline: 2px solid var(--awwo-cms-ok);
	outline-offset: 4px;
}

.awwo-cms-player-time {
	flex: none;
	color: var(--awwo-cms-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* Video: the picture above its bar, in the same frame. */
.awwo-cms-video video {
	display: block;
	width: 100%;
	max-height: 360px;
	background: #000;
	cursor: pointer;
}

.awwo-cms-video:fullscreen {
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 0;
}

.awwo-cms-video:fullscreen video {
	flex: 1;
	max-height: none;
}

/* The picture, and over it, on its right and centred, the volume's level
   while volume up / down is pressed (a moment, then it fades): a dark
   track filled from the bottom in the primary colour; only to see. */
.awwo-cms-player-screen {
	position: relative;
}

.awwo-cms-video:fullscreen .awwo-cms-player-screen {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.awwo-cms-player-meter {
	--awwo-cms-volume: 100%;
	position: absolute;
	top: 50%;
	right: 16px;
	width: 8px;
	height: min(120px, 50%);
	overflow: hidden;
	border-radius: 4px;
	background: rgb(0 0 0 / 0.45);
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.2s;
	pointer-events: none;
}

.awwo-cms-player-meter[data-shown] {
	opacity: 1;
}

.awwo-cms-player-meter > span {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: var(--awwo-cms-volume);
	background: var(--awwo-cms-green);
	transition: height 0.15s;
}

/* A ® (e.g. AWWO®) in a plain field's placeholder or value, drawn over the
   field with the ® small and raised: the placeholder while it is empty,
   the value while it is not edited (then the field's own text shows). */
.awwo-cms-reg-view > span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 0 13px;
	white-space: nowrap;
	pointer-events: none;
}

.awwo-cms-reg-view > .awwo-cms-placeholder {
	color: var(--awwo-cms-muted);
	opacity: 0.6;
}

.awwo-cms-input:not(:placeholder-shown) + .awwo-cms-reg-view > .awwo-cms-placeholder,
.awwo-cms-input:placeholder-shown + .awwo-cms-reg-view > .awwo-cms-reg-text,
.awwo-cms-input:focus + .awwo-cms-reg-view > .awwo-cms-reg-text,
.awwo-cms-input:not([data-awwo-cms-reg-value]) + .awwo-cms-reg-view > .awwo-cms-reg-text {
	display: none;
}

/* The value drawn over it: its own text out of sight until it is edited. */
.awwo-cms-input[data-awwo-cms-reg-value]:not(:focus):not(:placeholder-shown) {
	color: transparent;
}

/* A field that cannot be changed (e.g. a CMS file's title): greyed out. */
.awwo-cms-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Switching pages from a menu (the backend's, the Account page's): only the
   current item's background moves, sliding under the labels to the item
   chosen and stopping there (awwo-cms-menu-glide.js); the label left fades
   back to the others' colour, the one chosen to white as it arrives. */
[data-awwo-cms-menu-glide] {
	position: relative;
}

.awwo-cms-menu-glide {
	z-index: 0;
	pointer-events: none;
	/* Over the menus' own (colour) transitions; its height follows on the
	   way, so it arrives as tall as the item chosen (a sub-page is smaller). */
	transition:
		transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
		height 0.5s cubic-bezier(0.65, 0, 0.35, 1) !important;
}

[data-awwo-cms-gliding] a:not(.awwo-cms-menu-glide) {
	position: relative;
	z-index: 1;
	transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-awwo-cms-gliding] a[aria-current="page"]:not(.awwo-cms-menu-glide) {
	border-color: transparent !important;
	border-image: none !important;
	background: none !important;
	color: var(--awwo-cms-muted) !important;
}

[data-awwo-cms-gliding] a[aria-current="page"]:not(.awwo-cms-menu-glide)::before,
[data-awwo-cms-gliding] a[aria-current="page"]:not(.awwo-cms-menu-glide)::after {
	content: none !important;
}

[data-awwo-cms-gliding] .awwo-cms-menu-glide-target {
	background: none !important;
	color: var(--awwo-cms-white) !important;
}

/* Joined fields: phone (country + number) and birthdate (day, month,
   year) are one box with one shared border and dividers between parts.
   Here (not the backend's stylesheet), so the site's forms have them too. */
.awwo-cms-phone,
.awwo-cms-birthdate {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--awwo-cms-border);
	border-radius: 8px;
	background: var(--awwo-cms-control);
	transition: border-color 0.2s;
}

.awwo-cms-phone:hover,
.awwo-cms-birthdate:hover {
	border-color: var(--awwo-cms-grey-dark);
}

.awwo-cms-phone:focus-within,
.awwo-cms-birthdate:focus-within {
	border-color: var(--awwo-cms-ok);
	outline: 2px solid color-mix(in oklab, var(--awwo-cms-ok) 35%, transparent);
}

.awwo-cms-phone:has([aria-invalid="true"]),
.awwo-cms-birthdate:has([aria-invalid="true"]) {
	border-color: var(--awwo-cms-fail);
}

.awwo-cms-phone .awwo-cms-input,
.awwo-cms-phone .awwo-cms-input:hover,
.awwo-cms-phone .awwo-cms-input:focus,
.awwo-cms-birthdate .awwo-cms-input,
.awwo-cms-birthdate .awwo-cms-input:hover,
.awwo-cms-birthdate .awwo-cms-input:focus {
	border: 0;
	outline: 0;
	background-color: transparent;
}

.awwo-cms-phone {
	position: relative;
}

/* Without scripts, the plain drop-down (its names) takes half. */
.awwo-cms-phone select.awwo-cms-input {
	box-sizing: border-box;
	flex: 0 0 50%;
	width: 50%;
	min-width: 0;
	border-radius: 7px 0 0 7px;
}

/* With them, a narrow code ("RO", "Code"); its list opens the whole box wide. */
.awwo-cms-phone .awwo-cms-search {
	position: static;
	box-sizing: border-box;
	flex: 0 0 92px;
	width: 92px;
	min-width: 0;
	border-radius: 7px 0 0 7px;
}

/* The divider stays in every state (hovered, open, focused). */
.awwo-cms-phone select.awwo-cms-input,
.awwo-cms-phone select.awwo-cms-input:hover,
.awwo-cms-phone select.awwo-cms-input:focus,
.awwo-cms-phone .awwo-cms-search-input,
.awwo-cms-phone .awwo-cms-search-input:hover,
.awwo-cms-phone .awwo-cms-search-input:focus {
	border-right: 1px solid var(--awwo-cms-border);
}

.awwo-cms-phone > input.awwo-cms-input {
	box-sizing: border-box;
	flex: 1 1 50%;
	width: 50%;
	min-width: 0;
}

/* Birthdate: day, month, year side by side. */
.awwo-cms-birthdate {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Dividers between day, month and year, in every state. */
.awwo-cms-birthdate .awwo-cms-input:not(:last-child),
.awwo-cms-birthdate .awwo-cms-input:not(:last-child):hover,
.awwo-cms-birthdate .awwo-cms-input:not(:last-child):focus {
	border-right: 1px solid var(--awwo-cms-border);
}

.awwo-cms-birthdate .awwo-cms-input {
	padding-right: 4px;
	padding-left: 4px;
	text-align: center;
}

/* Day and month drop-downs: room for the arrow. */
.awwo-cms-birthdate select.awwo-cms-input {
	padding-right: 26px;
	padding-left: 12px;
	background-position: right 10px center;
	text-align: left;
}