/* Kraski pust - reserved area: top bar of the tools, login pages, panel and users (pages/auth_layout.php) */

/* Top bar, shown on every tool */

.kpa-bar {
	position: sticky;
	top: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0;
	padding: 8px 18px;
	background: linear-gradient(160deg, #1a78a6, #0d4868);
	border-bottom: 4px solid #ffcd47;
	color: #ffffff;
	font: 14px/1.3 'Montserrat', Arial, sans-serif;
	text-align: left;
}

.kpa-brand { display: flex; align-items: center; gap: 10px; color: #ffffff; text-decoration: none; }
.kpa-brand img { width: auto; height: 40px; }
.kpa-brand span { font: 400 20px/1 'Paytone One', 'Montserrat', sans-serif; }

.kpa-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.kpa-nav a {
	padding: 7px 13px;
	border-radius: 999px;
	color: #e3f1f8;
	font-weight: 600;
	text-decoration: none;
}
.kpa-nav a:hover { background: rgba(255, 255, 255, .16); color: #ffffff; }
.kpa-nav a.is-current { background: #ffcd47; color: #3a2a00; }

.kpa-user { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; color: #d6ecf7; font-size: 13px; }
.kpa-user a { color: #ffffff; font-weight: 600; }
.kpa-flag { display: inline-flex; line-height: 0; }
.kpa-flag img { width: auto; height: 20px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.kpa-flag:hover img { box-shadow: 0 0 0 2px #ffcd47; }
.kpa-card { position: relative; }
.kpa-card > .kpa-flag { position: absolute; top: 12px; right: 12px; z-index: 1; }
.kpa-user .kpa-logout { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; text-decoration: none; }
.kpa-user .kpa-logout:hover { background: #ffffff; color: #0d4868; }

.kpa-foot {
	margin-top: 28px;
	padding: 14px 18px;
	background: #3d3d3d;
	color: #d0d0d0;
	font: 13px 'Montserrat', Arial, sans-serif;
	text-align: center;
}


/* Panel and users pages */

/* Elements switched off with the attribute "hidden" stay hidden whatever their layout */
body.kpa-page [hidden] { display: none !important; }

body.kpa-page { margin: 0; background: #eef5fa; color: #2f2f2f; font: 15px/1.6 'Montserrat', Arial, sans-serif; }

.kpa-main { width: min(1100px, 100% - 36px); margin: 0 auto; padding: 28px 0 10px; }
.kpa-main h1 { margin: 0 0 4px; color: #bd1e01; font: 400 clamp(26px, 4vw, 36px)/1.15 'Paytone One', sans-serif; }
.kpa-lead { margin: 0 0 22px; color: #555555; }

.kpa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

.kpa-tool {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	background: #ffffff;
	border: 1px solid #d5e4ee;
	border-top: 5px solid #196891;
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(17, 93, 132, .10);
	color: inherit;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
}
.kpa-tool:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17, 93, 132, .20); }
.kpa-tool.has-alert { border-top-color: #bd1e01; }
.kpa-tool-name { color: #196891; font: 400 24px/1.2 'Oswald', sans-serif; }
.kpa-tool-text { color: #454545; font-size: 14px; }
.kpa-tool-detail { margin-top: auto; padding-top: 8px; color: #6b6b6b; font-size: 13px; font-weight: 700; }
.kpa-tool.has-alert .kpa-tool-detail { color: #bd1e01; }

.kpa-table-wrap { overflow-x: auto; background: #ffffff; border: 1px solid #d5e4ee; border-radius: 14px; }
.kpa-table { width: 100%; border-collapse: collapse; }
.kpa-table th { padding: 10px 14px; background: #196891; color: #ffffff; font: 400 16px 'Oswald', sans-serif; letter-spacing: .03em; text-align: left; }
.kpa-table td { padding: 10px 14px; border-top: 1px solid #e3edf3; vertical-align: middle; }
.kpa-table tr.is-pending td { background: #fff6dc; }
.kpa-table select { padding: 6px 10px; border: 1px solid #b9cddb; border-radius: 8px; font: inherit; }
.kpa-person input { width: 120px; margin: 2px 0; padding: 6px 10px; border: 1px solid #b9cddb; border-radius: 8px; font: inherit; }
.kpa-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.kpa-tag { padding: 1px 8px; background: #eaf3f9; border-radius: 999px; color: #196891; font-size: 12px; font-weight: 700; }

.kpa-actions form { display: flex; gap: 6px; justify-content: flex-end; margin: 0; }
.kpa-actions button {
	padding: 7px 16px;
	background: #196891;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	font: 700 13px 'Montserrat', sans-serif;
	cursor: pointer;
}
.kpa-actions button:hover { background: #0d4868; }
.kpa-actions button.is-danger { background: #ffffff; border: 1px solid #bd1e01; color: #bd1e01; }
.kpa-actions button.is-danger:hover { background: #bd1e01; color: #ffffff; }


/* Data tools (pages/data_admin.php) and settings */

.kpa-sub { margin: 30px 0 12px; color: #196891; font: 400 24px/1.2 'Oswald', sans-serif; }
.kpa-back { margin: 0 0 6px; }
.kpa-back a { color: #196891; font-weight: 700; text-decoration: none; }
.kpa-back a:hover { text-decoration: underline; }

.kpa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 8px; }
.kpa-head h1 { margin: 0; }
.kpa-new { padding: 10px 22px; background: #bd1e01; border-radius: 999px; color: #ffffff; font-weight: 700; text-decoration: none; }
.kpa-new:hover { background: #8f1600; color: #ffffff; }

.kpa-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kpa-pages { justify-content: center; margin-top: 18px; }
.kpa-pages a { padding: 5px 13px; background: #ffffff; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.kpa-pages a:hover { border-color: #196891; }
.kpa-pages a.is-current { background: #196891; border-color: #196891; color: #ffffff; }

.kpa-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.kpa-search input[type="search"] { width: min(100%, 300px); padding: 9px 16px; border: 1px solid #b9cddb; border-radius: 999px; font: inherit; }
.kpa-search button { padding: 9px 20px; background: #196891; border: 0; border-radius: 999px; color: #ffffff; font: 700 14px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-search a { color: #196891; font-weight: 600; }
.kpa-search span { margin-left: auto; color: #6b6b6b; font-size: 13px; }

.kpa-list td { font-size: 14px; }
.kpa-list tr:target td { background: #fff6dc; }
.kpa-name { color: #196891; font-weight: 700; text-decoration: none; }
.kpa-name:hover { color: #bd1e01; text-decoration: underline; }
.kpa-thumb { width: 64px; padding-right: 0 !important; }
.kpa-thumb img { display: block; width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: #eef3f6; }
.kpa-none { padding: 26px !important; color: #6b6b6b; text-align: center; }

.kpa-publish { white-space: nowrap; }
.kpa-publish form { display: inline; margin: 0; }
.kpa-publish button { min-width: 38px; padding: 4px 10px; border-radius: 999px; font: 700 12px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-publish button.is-on { background: #2e8b57; border: 1px solid #2e8b57; color: #ffffff; }
.kpa-publish button.is-off { background: #ffffff; border: 1px dashed #9aa7b0; color: #8a959d; }

.kpa-actions form { align-items: center; }
.kpa-actions a { padding: 6px 12px; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kpa-actions a:hover { border-color: #196891; background: #eaf3f9; }

.kpa-edit { padding: 22px 24px 24px; background: #ffffff; border: 1px solid #d5e4ee; border-radius: 14px; }
.kpa-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.kpa-lang { margin: 10px 0 0; padding-bottom: 4px; border-bottom: 3px solid #ffcd47; color: #196891; font: 400 20px 'Oswald', sans-serif; }
.kpa-lang.is-si,
.kpa-field.is-si { grid-column: 1; }
.kpa-lang.is-it,
.kpa-field.is-it { grid-column: 2; }
.kpa-field.is-full { grid-column: 1 / -1; }
.kpa-fields:not(:has(.kpa-field.is-si)) .kpa-lang { display: none; }

.kpa-field label { display: block; margin-bottom: 4px; color: #196891; font-size: 13px; font-weight: 700; }
.kpa-field input[type="text"],
.kpa-field input[type="datetime-local"],
.kpa-field select,
.kpa-field textarea {
	width: 100%;
	padding: 9px 12px;
	box-sizing: border-box;
	border: 1px solid #b9cddb;
	border-radius: 9px;
	color: #2f2f2f;
	font: 15px/1.5 'Montserrat', Arial, sans-serif;
}
.kpa-field input.is-number { max-width: 160px; font-variant-numeric: tabular-nums; }
.kpa-field textarea { resize: vertical; }
.kpa-field input:focus,
.kpa-field select:focus,
.kpa-field textarea:focus { border-color: #196891; outline: 2px solid rgba(25, 104, 145, .25); }
.kpa-field small { display: block; margin-top: 4px; color: #6b6b6b; font-size: 12px; line-height: 1.4; }
.kpa-field fieldset { margin: 0; padding: 0; border: 0; }
.kpa-field legend { margin-bottom: 4px; padding: 0; color: #196891; font-size: 13px; font-weight: 700; }
.kpa-field fieldset .kpa-check { display: flex; margin: 6px 0 0; color: #2f2f2f; font-size: 14px; font-weight: 400; }

.kpa-switch { display: inline-flex !important; align-items: center; gap: 10px; margin: 6px 0 0 !important; color: #2f2f2f !important; font-size: 14px !important; cursor: pointer; }
.kpa-switch input { position: absolute; opacity: 0; }
.kpa-switch span { position: relative; flex: none; width: 42px; height: 24px; background: #c3ccd3; border-radius: 999px; transition: background-color .15s; }
.kpa-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #ffffff; border-radius: 50%; transition: transform .15s; }
.kpa-switch input:checked + span { background: #2e8b57; }
.kpa-switch input:checked + span::after { transform: translateX(18px); }
.kpa-switch input:focus-visible + span { outline: 2px solid #196891; outline-offset: 2px; }

/* Members of the committee (pages/comitato_admin.php): the photo in a circle, above the fields */
.kpa-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #e3edf3; }
.kpa-avatar { flex: none; width: 120px; height: 120px; box-sizing: border-box; border: 4px solid #ffcd47; border-radius: 50%; object-fit: cover; background: #eaf3f9; }
.kpa-avatar[hidden] { display: none; }
span.kpa-avatar { display: flex; align-items: center; justify-content: center; color: #196891; font: 400 40px 'Oswald', sans-serif; }
.kpa-photo label { display: block; margin-bottom: 6px; color: #196891; font-size: 13px; font-weight: 700; }
.kpa-photo .kpa-check { display: flex; margin: 10px 0 0; color: #2f2f2f; font-size: 14px; font-weight: 400; }
.kpa-thumb img.is-round { width: 44px; height: 44px; border-radius: 50%; }
.kpa-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.kpa-upload img { width: 96px; height: 64px; object-fit: cover; border: 1px solid #d5e4ee; border-radius: 8px; }
.kpa-upload label { margin: 0; color: #454545; font-weight: 400; }

.kpa-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e3edf3; }
.kpa-edit-actions button { padding: 11px 34px; background: #196891; border: 0; border-radius: 999px; color: #ffffff; font: 700 15px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-edit-actions button:hover { background: #0d4868; }
/* The links next to "Salva" (cancel, see the page) are buttons too, of the same size, with only the outline */
.kpa-edit-actions a { padding: 9px 26px; background: #ffffff; border: 2px solid #196891; border-radius: 999px; color: #196891; font: 700 15px 'Montserrat', sans-serif; text-decoration: none; }
.kpa-edit-actions a:hover { background: #eaf3f9; }

/* Entries to the parade (prijave_admin.php) */
.kpa-request { margin-bottom: 12px; background: #ffffff; border: 1px solid #d5e4ee; border-left: 5px solid #ffcd47; border-radius: 14px; }
.kpa-request.is-ok { border-left-color: #2e8b57; }
.kpa-request.is-no { border-left-color: #bd1e01; }
.kpa-request summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 18px; cursor: pointer; }
.kpa-request-kind { padding: 3px 10px; background: #eaf3f9; border-radius: 999px; color: #196891; font-size: 12px; font-weight: 700; }
.kpa-request summary strong { font-size: 16px; }
.kpa-request-title { flex: 1 1 200px; color: #555555; }
.kpa-request-state { padding: 4px 12px; background: #fff3cf; border-radius: 999px; color: #7a5a00; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.kpa-request.is-ok .kpa-request-state { background: #e3f4ea; color: #1f6b43; }
.kpa-request.is-no .kpa-request-state { background: #fdebe8; color: #a11a01; }
.kpa-request-body { padding: 4px 18px 18px; border-top: 1px solid #e3edf3; }
.kpa-request-change { float: right; margin: 10px 0 0; }
.kpa-request-change a { padding: 6px 14px; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font-size: 13px; font-weight: 700; text-decoration: none; }
.kpa-request-change a:hover { background: #eaf3f9; border-color: #196891; }
.kpa-request-edit { margin-top: 6px; }
.kpa-request-meta { margin: 10px 0 0; color: #6b6b6b; font-size: 13px; }
.kpa-request-body h3 { margin: 16px 0 6px; color: #196891; font: 400 18px 'Oswald', sans-serif; }
.kpa-request-body dl { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.kpa-request-body dt { color: #6b6b6b; font-weight: 400; }
.kpa-request-body dd { margin: 0; overflow-wrap: anywhere; }
.kpa-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e3edf3; }
.kpa-request-actions input[type="text"] { flex: 1 1 280px; padding: 9px 12px; border: 1px solid #b9cddb; border-radius: 10px; font: inherit; }
.kpa-request-actions button { padding: 9px 22px; background: #2e8b57; border: 0; border-radius: 999px; color: #ffffff; font: 700 14px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-request-actions button.is-danger { background: #ffffff; border: 1px solid #bd1e01; color: #bd1e01; }
@media (max-width: 600px) { .kpa-request-body dl { grid-template-columns: 1fr; } .kpa-request-body dt { margin-top: 6px; } }

.kpa-checks { margin: 0; padding: 0; overflow: hidden; background: #ffffff; border: 1px solid #d5e4ee; border-radius: 14px; list-style: none; }
.kpa-checks li { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 16px 10px 44px; position: relative; font-size: 14px; }
.kpa-checks li + li { border-top: 1px solid #e3edf3; }
.kpa-checks li::before { content: ""; position: absolute; left: 16px; top: 13px; width: 14px; height: 14px; border-radius: 50%; }
.kpa-checks li.is-on::before { background: #2e8b57; }
.kpa-checks li.is-off::before { border: 2px solid #b8c2c9; box-sizing: border-box; }
.kpa-checks strong { min-width: 170px; }
.kpa-checks li.is-off span { color: #8a6d1d; }
.kpa-checks li.is-on span { color: #2e8b57; }

@media (max-width: 720px) {
	.kpa-fields { grid-template-columns: 1fr; }
	.kpa-lang.is-it { display: none; }
	.kpa-lang.is-si,
	.kpa-field.is-si,
	.kpa-field.is-it { grid-column: 1; }
	.kpa-field.is-it label::after { content: " (italiano)"; font-weight: 400; }
	.kpa-field.is-si label::after { content: " (sloveno)"; font-weight: 400; }
}

/* News (pages/news_admin.php): list details and the text editor */

.kpa-date { white-space: nowrap; color: #555555; font-variant-numeric: tabular-nums; }
.kpa-excerpt { display: block; margin-top: 2px; color: #6b6b6b; font-size: 13px; }
.kpa-field input[type="date"] { max-width: 200px; padding: 9px 12px; box-sizing: border-box; border: 1px solid #b9cddb; border-radius: 9px; font: 15px 'Montserrat', Arial, sans-serif; }
.kpa-copy button { padding: 9px 18px; background: #ffffff; border: 2px solid #196891; border-radius: 999px; color: #196891; font: 700 14px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-copy button:hover { background: #eaf3f9; }
.kpa-copy button + button { margin-left: 6px; }
.kpa-copy button { margin-bottom: 6px; }
.kpa-copy button:disabled { opacity: .5; cursor: default; }

.kpa-editor { border: 1px solid #b9cddb; border-radius: 9px; overflow: hidden; background: #ffffff; }
.kpa-editor:focus-within { border-color: #196891; outline: 2px solid rgba(25, 104, 145, .25); }
.kpa-editor-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: #f3f8fb; border-bottom: 1px solid #d5e4ee; }
.kpa-editor-bar button { min-width: 34px; padding: 5px 10px; background: #ffffff; border: 1px solid #c9dbe6; border-radius: 7px; color: #2f2f2f; font: 14px 'Montserrat', Arial, sans-serif; cursor: pointer; }
.kpa-editor-bar button:hover { border-color: #196891; color: #196891; }
.kpa-editor-bar button.is-right { margin-left: auto; }
.kpa-editor-bar button.is-on { background: #196891; border-color: #196891; color: #ffffff; }
.kpa-editor-area { min-height: 200px; max-height: 480px; overflow: auto; padding: 12px 14px; color: #2f2f2f; font: 15px/1.6 'Montserrat', Arial, sans-serif; outline: none; }
.kpa-editor-area a { color: #196891; }
.kpa-editor.is-small .kpa-editor-area { min-height: 90px; max-height: 320px; }
.kpa-editor-bar select { padding: 4px 8px; border: 1px solid #c9dbe6; border-radius: 7px; background: #ffffff; font: 14px 'Montserrat', Arial, sans-serif; }
.kpa-editor-color { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 10px; background: #ffffff; border: 1px solid #c9dbe6; border-radius: 7px; color: #2f2f2f; font-size: 14px; font-weight: 700; cursor: pointer; }
.kpa-editor textarea { display: block; width: 100%; padding: 12px 14px; box-sizing: border-box; border: 0 !important; border-radius: 0 !important; outline: none !important; font: 13px/1.5 Consolas, monospace !important; }
.kpa-editor textarea[hidden] { display: none; }

/* Gallery upload (pages/thumbs_100.php) */

.kpa-step { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; color: #196891; font: 400 22px/1.2 'Oswald', sans-serif; }
.kpa-step:first-child { margin-top: 0; }
.kpa-step span { display: grid; place-items: center; width: 30px; height: 30px; background: #ffcd47; border-radius: 50%; color: #3a2a00; font: 700 15px 'Montserrat', sans-serif; }

.kpa-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpa-choice label { position: relative; cursor: pointer; }
.kpa-choice input { position: absolute; opacity: 0; }
.kpa-choice span { display: block; height: 100%; padding: 12px 16px; box-sizing: border-box; border: 2px solid #c9dbe6; border-radius: 12px; color: #555555; font-size: 13px; }
.kpa-choice strong { display: block; color: #196891; font-size: 15px; }
.kpa-choice input:checked + span { border-color: #196891; background: #eaf3f9; }
.kpa-choice input:focus-visible + span { outline: 2px solid #196891; outline-offset: 2px; }

.kpa-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 18px; border: 2px dashed #9dbbcd; border-radius: 14px; background: #f8fbfd; color: #555555; font-size: 14px; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.kpa-drop:hover,
.kpa-drop.is-over { border-color: #196891; background: #eaf3f9; }
.kpa-drop.has-files { border-style: solid; border-color: #2e8b57; background: #eef8f1; }
.kpa-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kpa-drop:focus-within { outline: 2px solid #196891; outline-offset: 2px; }
.kpa-drop strong { color: #196891; font: 400 22px 'Oswald', sans-serif; }
.kpa-drop em { color: #2e8b57; font-style: normal; font-weight: 700; }
.kpa-drop-note { display: block; margin-top: 6px; color: #6b6b6b; font-size: 12px; }

.kpa-progress { margin-top: 20px; }
.kpa-progress > div { height: 14px; overflow: hidden; background: #dfe9ef; border-radius: 999px; }
.kpa-progress span { display: block; width: 0; height: 100%; background: #196891; border-radius: 999px; transition: width .3s; }
.kpa-progress p { margin: 6px 0 0; color: #454545; font-size: 14px; }
.kpa-edit > .kpa-msg { margin: 20px 0 0; }
.kpa-msg a { color: inherit; font-weight: 700; }

.kpa-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 16px; }
.kpa-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Ranking and marks (pages/klassifica.php) */

.kpa-main.is-wide { width: min(1500px, 100% - 36px); }

.kpa-year-pick { display: flex; align-items: center; gap: 8px; margin: 0; color: #196891; font-weight: 700; }
.kpa-year-pick select { padding: 8px 12px; border: 1px solid #b9cddb; border-radius: 999px; font: 700 15px 'Montserrat', sans-serif; }

.kpa-publish-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 6px 0 22px; }
.kpa-publish-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; background: #ffffff; border: 1px solid #d5e4ee; border-left: 6px solid #b8c2c9; border-radius: 14px; }
.kpa-publish-box.is-on { border-left-color: #2e8b57; }
.kpa-publish-box.is-partial { border-left-color: #e0a100; }
.kpa-publish-box h2 { margin: 0; color: #196891; font: 400 22px 'Oswald', sans-serif; }
.kpa-publish-box p { margin: 2px 0 0; color: #555555; font-size: 13px; }
.kpa-publish-box .kpa-state { color: #6b6b6b; font-size: 14px; font-weight: 700; }
.kpa-publish-box.is-on .kpa-state { color: #2e8b57; }
.kpa-publish-box.is-partial .kpa-state { color: #96690a; }
.kpa-publish-box form { display: flex; align-items: center; gap: 10px; margin: 0; }
.kpa-publish-box button,
.kpa-savebar button { padding: 9px 22px; background: #196891; border: 2px solid #196891; border-radius: 999px; color: #ffffff; font: 700 14px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-publish-box button:hover,
.kpa-savebar button:hover { background: #0d4868; border-color: #0d4868; }
.kpa-publish-box button.is-plain,
.kpa-savebar button.is-plain { background: #ffffff; color: #196891; }
.kpa-publish-box button.is-plain:hover,
.kpa-savebar button.is-plain:hover { background: #eaf3f9; }
.kpa-publish-box a { color: #196891; font-size: 13px; font-weight: 700; }

.kpa-score-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.kpa-tabs { display: flex; gap: 6px; }
.kpa-tabs button { padding: 9px 20px; background: #ffffff; border: 2px solid #196891; border-radius: 999px; color: #196891; font: 700 15px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-tabs button[aria-selected="true"] { background: #196891; color: #ffffff; }
.kpa-tabs span { margin-left: 4px; opacity: .75; font-weight: 400; }
.kpa-sort { color: #555555; font-size: 13px; }
.kpa-sort button { padding: 5px 12px; background: #ffffff; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-sort button.is-on { background: #eaf3f9; border-color: #196891; }
.kpa-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0; color: #555555; font-size: 13px; }
.kpa-legend b { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #196891; border-radius: 5px; color: #ffffff; font-size: 12px; }

.kpa-scores { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.kpa-scores th { padding: 7px 4px; text-align: center; white-space: nowrap; }
.kpa-scores thead tr:last-child th { background: #2b7ba3; font: 700 12px 'Montserrat', sans-serif; }
.kpa-scores td { padding: 5px 3px; text-align: center; }
.kpa-scores .is-first { border-left: 2px solid #c9dbe6; padding-left: 7px; }
.kpa-scores thead .is-judge { border-left: 2px solid rgba(255, 255, 255, .35); }
.kpa-scores .is-start { width: 44px; }
.kpa-scores td.is-start { color: #6b6b6b; }
.kpa-scores td.is-name,
.kpa-scores th.is-name { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 280px; padding-left: 12px; text-align: left; }
.kpa-scores td.is-name { background: #ffffff; box-shadow: 4px 0 6px -4px rgba(13, 72, 104, .25); }
.kpa-scores td.is-name strong { display: block; font-size: 14px; }
.kpa-scores td.is-name span { display: block; overflow: hidden; color: #6b6b6b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.kpa-scores tbody tr:hover td { background: #f5fafc; }
.kpa-scores input[data-max] { width: 40px; padding: 7px 0; border: 1px solid #c9dbe6; border-radius: 7px; background: #ffffff; color: #2f2f2f; font: 15px 'Montserrat', sans-serif; text-align: center; }
.kpa-scores input[data-max]:focus { border-color: #196891; outline: 2px solid rgba(25, 104, 145, .3); background: #fffbe9; }
.kpa-scores input.is-wrong { border-color: #bd1e01; background: #fdecec; }
.kpa-scores .is-sub { min-width: 34px; padding-right: 7px; color: #196891; font-weight: 700; }
.kpa-scores td.is-sub { background: #f1f7fa; }
.kpa-scores .is-total { min-width: 58px; border-left: 2px solid #c9dbe6; font-weight: 700; }
.kpa-scores td[data-points] { color: #bd1e01; font: 400 20px 'Paytone One', sans-serif; }
.kpa-scores input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2e8b57; }
.kpa-place { display: inline-grid; place-items: center; min-width: 30px; height: 30px; background: #eaf3f9; border-radius: 50%; color: #196891; }
.kpa-place.is-1 { background: #ffcd47; color: #3a2a00; }
.kpa-place.is-2 { background: #cfd6dc; color: #3a2a00; }
.kpa-place.is-3 { background: #c98b55; color: #ffffff; }

.kpa-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; padding: 12px 16px; background: #ffffff; border: 1px solid #d5e4ee; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 18px rgba(13, 72, 104, .12); }
.kpa-savebar span { margin-right: auto; color: #6b6b6b; font-size: 14px; font-weight: 600; }
.kpa-savebar.is-dirty { border-color: #e0a100; background: #fff8e1; }
.kpa-savebar.is-dirty span { color: #96690a; }

/* Minutes of the meetings (pages/assemblee_admin.php) */

.kpa-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; }
.kpa-views a { padding: 7px 16px; background: #ffffff; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font-size: 14px; font-weight: 700; text-decoration: none; }
.kpa-views a:hover { border-color: #196891; }
.kpa-views a.is-current { background: #196891; border-color: #196891; color: #ffffff; }
.kpa-views a.is-right { margin-left: auto; background: none; border-color: transparent; font-size: 13px; text-decoration: underline; }

.kpa-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 4px 28px; }
.kpa-member { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid #e3edf3; }
.kpa-member span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #2f2f2f; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.kpa-member label { display: inline-block; margin: 0; cursor: pointer; }
.kpa-member input { position: absolute; opacity: 0; }
.kpa-member b { display: block; padding: 4px 12px; border: 1px solid #c9dbe6; border-radius: 999px; color: #6b6b6b; font-size: 12px; font-weight: 700; }
.kpa-member input:focus-visible + b { outline: 2px solid #196891; outline-offset: 2px; }
.kpa-member .is-p input:checked + b { background: #2e8b57; border-color: #2e8b57; color: #ffffff; }
.kpa-member .is-a input:checked + b { background: #bd1e01; border-color: #bd1e01; color: #ffffff; }
.kpa-member .is-none input:checked + b { background: #eef0f2; color: #5c666e; }

.kpa-todo-edit td { padding: 6px 8px; }
.kpa-todo-edit td:nth-child(1) { width: 22%; }
.kpa-todo-edit td:nth-child(3),
.kpa-todo-edit td:nth-child(4),
.kpa-todo-edit td:nth-child(5) { width: 1%; white-space: nowrap; }
.kpa-todo-edit input[type="text"] { min-width: 130px; }
.kpa-todo-edit input[type="date"] { max-width: 160px; }
.kpa-todo-edit button { padding: 5px 12px; background: #ffffff; border: 1px solid #bd1e01; border-radius: 999px; color: #bd1e01; font: 700 12px 'Montserrat', sans-serif; cursor: pointer; }

.kpa-minute h2 { margin: 22px 0 8px; color: #196891; font: 400 22px/1.2 'Oswald', sans-serif; }
.kpa-minute h2:first-child { margin-top: 0; }
.kpa-minute p { margin: 0 0 6px; }
.kpa-minute-text { overflow-wrap: anywhere; }
.kpa-draft-state { flex: 1 1 240px; color: #6b6b6b; font-size: 13px; text-align: right; }
.kpa-draft-state.is-off { color: #96690a; font-weight: 700; }
.kpa-msg button { margin-left: 6px; padding: 4px 14px; background: #ffffff; border: 1px solid currentColor; border-radius: 999px; color: inherit; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-rich p,
.kpa-rich div { margin: 0; }
.kpa-rich ul,
.kpa-rich ol { margin: 4px 0; padding-left: 26px; }
.kpa-field .kpa-editor-bar select { width: auto; padding: 4px 8px; border-radius: 7px; border-color: #c9dbe6; font: 14px 'Montserrat', Arial, sans-serif; }
.kpa-editor-bar svg { display: block; }
.kpa-editor-bar button { display: inline-flex; align-items: center; justify-content: center; }
.kpa-field .kpa-editor-color { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 6px 2px 10px; background: #ffffff; border: 1px solid #c9dbe6; border-radius: 7px; color: #2f2f2f; font-size: 14px; font-weight: 700; cursor: pointer; }
.kpa-editor-color input { width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.kpa-minute .kpa-tag { display: inline-block; margin: 0 2px 6px 0; padding: 3px 12px; font-size: 13px; }
.kpa-tag.is-grey { background: #eef0f2; color: #5c666e; }
.kpa-tag.is-green { background: #e3f4ea; color: #1f6b43; }
.kpa-tag.is-amber { background: #fff3cf; color: #7a5a00; }
.kpa-list tr.is-done td { color: #8a959d; }
.kpa-list tr.is-done td:nth-child(-n+2) { text-decoration: line-through; }
.kpa-date.is-late { color: #bd1e01; font-weight: 700; }
.kpa-request.is-old { border-left-color: #b8c2c9; }

@media print {
	.kpa-bar,
	.kpa-foot,
	.kpa-noprint { display: none !important; }
	body.kpa-page { background: #ffffff; }
	.kpa-edit,
	.kpa-table-wrap { border: 0; padding: 0; }
}

/* Messages (also used by the login pages) */

.kpa-msg { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; font-size: 14px; text-align: left; }
.kpa-msg.is-ok { background: #e6f4ea; border: 1px solid #9ccfab; color: #1d5b33; }
.kpa-msg.is-error { background: #fdecec; border: 1px solid #f0b2b2; color: #8b1e1e; }
.kpa-msg.is-warn { background: #fff6dc; border: 1px solid #e6c766; color: #6b4e00; }


/* Login, registration, password recovery */

body.kpa-login {
	display: grid;
	place-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 24px 16px;
	box-sizing: border-box;
	background: linear-gradient(180deg, #7fbfe3 0, #d3e9f5 50%, #f3dfb4 100%) fixed;
	color: #2f2f2f;
	font: 15px/1.6 'Montserrat', Arial, sans-serif;
}

.kpa-card {
	width: min(420px, 100%);
	padding: 0 28px 26px;
	box-sizing: border-box;
	overflow: hidden;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 16px 44px rgba(13, 72, 104, .28);
	text-align: center;
}

.kpa-card-logo { display: block; margin: 0 -28px 20px; padding: 18px 0 14px; background: linear-gradient(160deg, #1a78a6, #0d4868); border-bottom: 4px solid #ffcd47; }
.kpa-card-logo img { width: auto; height: 84px; }

.kpa-card h1 { margin: 0 0 18px; color: #bd1e01; font: 400 28px/1.15 'Paytone One', sans-serif; }
.kpa-note { margin: -8px 0 16px; color: #555555; font-size: 14px; }

.kpa-form { text-align: left; }
.kpa-form label { display: block; margin: 12px 0 5px; color: #196891; font-size: 13px; font-weight: 700; }
.kpa-form input[type="text"],
.kpa-form input[type="email"],
.kpa-form input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid #b9cddb;
	border-radius: 10px;
	font: 16px 'Montserrat', Arial, sans-serif;
}
.kpa-form .kpa-accept { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: #2f2f2f; font-weight: 400; line-height: 1.4; }
.kpa-form .kpa-accept input { flex: none; margin-top: 3px; }
.kpa-form .kpa-accept a { color: #196891; font-weight: 700; }
.kpa-form input:focus { border-color: #196891; outline: 2px solid rgba(25, 104, 145, .25); }
.kpa-form button {
	width: 100%;
	margin-top: 20px;
	padding: 12px;
	background: #196891;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	font: 700 16px 'Montserrat', sans-serif;
	cursor: pointer;
}
.kpa-form button:hover { background: #0d4868; }

.kpa-links { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; font-size: 14px; }
.kpa-links a { color: #196891; font-weight: 600; }

/* Small buttons with an icon in a list (auth_icon() in pages/auth_layout.php) */
.kpa-icons { display: flex; gap: 6px; margin-top: 6px; }
.kpa-icons form { margin: 0; }
.kpa-icons a,
.kpa-icons button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; box-sizing: border-box; background: #ffffff; border: 1px solid #b9cddb; border-radius: 50%; color: #196891; cursor: pointer; }
.kpa-icons a:hover,
.kpa-icons button:hover { background: #eaf3f9; border-color: #196891; }
.kpa-icons button.is-danger { border-color: #e2b4ab; color: #a11a01; }
.kpa-icons button.is-danger:hover { background: #fdebe8; border-color: #a11a01; }

/* Programme of an edition (pages/program_admin.php): days, and the entries of each day */
.kpa-prog-default { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; border: 0; }
.kpa-prog-day { margin: 22px 0 0; padding: 14px 18px 18px; background: #f6fafc; border: 1px solid #c9dbe6; border-left: 6px solid #196891; border-radius: 14px; }
.kpa-prog-day legend { padding: 2px 12px; background: #196891; border-radius: 999px; color: #ffffff; font: 400 16px 'Oswald', sans-serif; letter-spacing: .03em; }
.kpa-prog-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.kpa-prog-bar label { color: #196891; font-size: 13px; font-weight: 700; }
.kpa-prog-bar input[type="date"] { margin-left: 6px; padding: 8px 12px; border: 1px solid #b9cddb; border-radius: 9px; font: 15px 'Montserrat', Arial, sans-serif; }
.kpa-prog-bar strong { color: #196891; font: 400 18px 'Oswald', sans-serif; }
.kpa-prog-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kpa-prog-tools button { min-width: 36px; padding: 6px 12px; background: #ffffff; border: 1px solid #b9cddb; border-radius: 999px; color: #196891; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-prog-tools button:hover { background: #eaf3f9; }
.kpa-prog-tools button.is-danger { border-color: #e2b4ab; color: #a11a01; }
.kpa-prog-tools button.is-danger:hover { background: #fdebe8; }
.kpa-prog-item { margin-top: 12px; padding: 14px 16px 16px; background: #ffffff; border: 1px solid #d5e4ee; border-radius: 12px; }
.kpa-prog-item.is-main { border-color: #bd1e01; box-shadow: inset 4px 0 0 #bd1e01; }
.kpa-prog-item .kpa-fields { grid-template-columns: 170px 1fr; }
.kpa-prog-item .kpa-field.is-prog-time { grid-column: 1; }
.kpa-prog-item .kpa-field.is-prog-title { grid-column: 2; }
.kpa-prog-item .kpa-field.is-half { grid-column: auto; }
.kpa-prog-item .kpa-field.is-half:nth-last-child(2) { grid-column: 1 / -1; }
.kpa-prog-item .kpa-field.is-half:last-child { grid-column: 1 / -1; }
.kpa-prog-photo { display: block; flex: 1 1 100%; line-height: 0; }
.kpa-prog-photo[hidden] { display: none; }
.kpa-prog-item .kpa-upload .kpa-prog-photo img { width: auto; max-width: min(100%, 360px); height: auto; max-height: 220px; object-fit: contain; border-radius: 10px; }
.kpa-prog-old { margin-top: 22px; padding: 12px 16px; background: #fffaf0; border: 1px solid #ecd9a6; border-radius: 12px; }
.kpa-prog-old summary { color: #7a5a00; font-weight: 700; cursor: pointer; }
.kpa-prog-old textarea { width: 100%; padding: 10px 12px; box-sizing: border-box; border: 1px solid #b9cddb; border-radius: 9px; font: 13px/1.5 Consolas, monospace; }
.kpa-prog-inline { display: inline; margin: 0; }
.kpa-prog-inline button { padding: 0; background: none; border: 0; color: #a11a01; font: inherit; text-decoration: underline; cursor: pointer; }
.kpa-year-pick input.kpa-prog-year { width: 80px; padding: 8px 12px; border: 1px solid #b9cddb; border-radius: 999px; font: 700 15px 'Montserrat', sans-serif; text-align: center; }
.kpa-year-pick button.kpa-new { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
@media (max-width: 720px) {
	.kpa-prog-item .kpa-fields { grid-template-columns: 1fr; }
	.kpa-prog-item .kpa-field.is-prog-time,
	.kpa-prog-item .kpa-field.is-prog-title { grid-column: 1; }
}

/* Jury seen by the administrators (pages/giuria_admin.php) */
.kpa-jury-link { display: flex; align-items: center; gap: 8px; min-width: 300px; }
.kpa-jury-link input { flex: 1 1 200px; min-width: 0; padding: 6px 10px; border: 1px solid #b9cddb; border-radius: 8px; color: #555555; font: 13px Consolas, monospace; }
.kpa-jury-link button { padding: 6px 14px; background: #196891; border: 0; border-radius: 999px; color: #ffffff; font: 700 13px 'Montserrat', sans-serif; cursor: pointer; }
.kpa-jury-link a { color: #196891; font-size: 13px; font-weight: 700; }
.kpa-jury .kpa-person input { width: 180px; }
.kpa-jury-grid th:nth-child(n+3),
.kpa-jury-grid td:nth-child(n+3) { width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.kpa-jury-grid td.is-missing { color: #b8c2c9; }

/* Page of a judge, for the phone (pages/giuria.php) */
body.kpj { margin: 0; background: #eef4f8; color: #2f2f2f; font: 16px/1.4 'Montserrat', Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
.kpj-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: linear-gradient(160deg, #1a78a6, #0d4868); border-bottom: 4px solid #ffcd47; color: #ffffff; }
.kpj-top img { width: auto; height: 40px; }
.kpj-top div { flex: 1; min-width: 0; }
.kpj-top strong { display: block; font: 400 20px/1.1 'Paytone One', 'Montserrat', sans-serif; }
.kpj-top span { display: block; overflow: hidden; color: #d6ecf7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.kpj-main { width: min(640px, 100% - 24px); margin: 0 auto; padding: 14px 0 60px; }
.kpj-note { margin: 0 0 14px; padding: 14px 16px; background: #ffffff; border-left: 5px solid #196891; border-radius: 12px; }
.kpj-note.is-error { border-left-color: #bd1e01; }
.kpj-help { margin: 8px 2px 14px; color: #5c666e; font-size: 14px; }
.kpj-progress p { margin: 0 2px 6px; font-size: 15px; }
.kpj-progress strong { color: #196891; font-size: 22px; }
.kpj-progress [data-sync] { color: #a11a01; font-size: 13px; font-weight: 700; }
.kpj-progress i { display: block; height: 10px; overflow: hidden; background: #d5e4ee; border-radius: 999px; }
.kpj-progress b { display: block; width: 0; height: 100%; background: #2e8b57; border-radius: 999px; transition: width .3s; }

.kpj-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.kpj-tabs button { flex: 1; padding: 12px 8px; background: #ffffff; border: 2px solid #b9cddb; border-radius: 12px; color: #196891; font: 700 16px 'Montserrat', sans-serif; cursor: pointer; }
.kpj-tabs button[aria-selected="true"] { background: #196891; border-color: #196891; color: #ffffff; }
.kpj-tabs span { margin-left: 4px; font-weight: 400; opacity: .8; }

.kpj-card { margin-bottom: 10px; overflow: hidden; background: #ffffff; border: 1px solid #d5e4ee; border-left: 6px solid #ffcd47; border-radius: 14px; scroll-margin-top: 76px; }
.kpj-card.is-done { border-left-color: #2e8b57; }
.kpj-card.is-waiting { border-left-color: #bd1e01; }
.kpj-card.is-open { box-shadow: 0 6px 20px rgba(13, 72, 104, .18); }
.kpj-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kpj-number { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #0d4868; border-radius: 50%; color: #ffffff; font: 400 20px 'Oswald', sans-serif; }
.kpj-who { flex: 1; min-width: 0; }
.kpj-who strong { display: block; font-size: 17px; line-height: 1.2; }
.kpj-who em { display: block; color: #5c666e; font-size: 13px; font-style: normal; }
.kpj-state { flex: none; padding: 5px 12px; background: #fff3cf; border-radius: 999px; color: #7a5a00; font-size: 13px; font-weight: 700; white-space: nowrap; }
.kpj-card.is-done .kpj-state { background: #e3f4ea; color: #1f6b43; font-size: 15px; }
.kpj-card.is-waiting .kpj-state { background: #fdebe8; color: #a11a01; }

.kpj-body { padding: 2px 14px 14px; border-top: 1px solid #e3edf3; }
.kpj-part p { margin: 14px 0 8px; color: #196891; font-size: 15px; font-weight: 700; }
.kpj-part small { margin-left: 4px; color: #6b6b6b; font-weight: 400; }
.kpj-marks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kpj-marks button { height: 54px; background: #f3f8fb; border: 2px solid #b9cddb; border-radius: 12px; color: #0d4868; font: 400 24px 'Oswald', sans-serif; cursor: pointer; touch-action: manipulation; }
.kpj-marks button[aria-pressed="true"] { background: #ffcd47; border-color: #e0a100; color: #3a2a00; }
.kpj-marks button:disabled { cursor: default; opacity: .6; }
.kpj-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #e3edf3; }
.kpj-foot strong { color: #bd1e01; font: 400 26px 'Oswald', sans-serif; }
.kpj-foot button { padding: 12px 26px; background: #196891; border: 0; border-radius: 999px; color: #ffffff; font: 700 16px 'Montserrat', sans-serif; cursor: pointer; }

/* Photos of the home (pages/home_slides_admin.php): preview with the words as on the home (see .kp4-slide-caption
   in kp-v4.css), the photos of a gallery to choose from, the small photo in the list */
.kpa-slide-preview { position: relative; overflow: hidden; aspect-ratio: 12 / 5; background: #115d84; border-radius: 12px; }
.kpa-slide-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kpa-slide-preview img[hidden] { display: none; }
.kpa-slide-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #d6ecf7; font-weight: 700; }
.kpa-slide-empty[hidden] { display: none; }
.kpa-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: 14px; padding: 60px 26px 20px; background: linear-gradient(180deg, transparent, rgba(5, 30, 45, .55) 45%, rgba(5, 30, 45, .82)); color: #ffffff; }
.kpa-slide-medal { display: none; place-items: center; flex: none; width: 62px; height: 62px; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); color: #3a2a00; font: 400 32px/1 'Paytone One', sans-serif; transform: rotate(-8deg); }
.kpa-slide-medal.is-place-1,
.kpa-slide-medal.is-place-2,
.kpa-slide-medal.is-place-3 { display: grid; }
.kpa-slide-medal.is-place-1 { background: #ffcd47; }
.kpa-slide-medal.is-place-2 { background: #cfd6dc; }
.kpa-slide-medal.is-place-3 { background: #c98b55; color: #ffffff; }
.kpa-slide-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kpa-slide-place { color: #ffcd47; font: 700 12px 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.kpa-slide-name { font: 400 clamp(20px, 3vw, 32px)/1.05 'Paytone One', sans-serif; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.kpa-slide-title { font: italic 500 15px/1.3 'Montserrat', sans-serif; }

.kpa-slide-pick { margin: 16px 0 0; padding: 12px 14px 14px; background: #f6fafc; border: 1px solid #c9dbe6; border-radius: 12px; }
.kpa-slide-pick legend { padding: 2px 12px; background: #196891; border-radius: 999px; color: #ffffff; font: 400 15px 'Oswald', sans-serif; }
.kpa-slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 4px; }
.kpa-slide-grid label { position: relative; display: block; margin: 0; cursor: pointer; }
.kpa-slide-grid input { position: absolute; opacity: 0; }
.kpa-slide-grid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 3px solid transparent; border-radius: 8px; background: #e3edf3; }
.kpa-slide-grid label:hover img { border-color: #9dbbcd; }
.kpa-slide-grid input:checked + img { border-color: #bd1e01; }
.kpa-slide-grid input:focus-visible + img { outline: 2px solid #196891; outline-offset: 2px; }

.kpa-slide-thumb { width: 112px; padding-right: 0 !important; }
.kpa-slide-thumb img { display: block; width: 104px; height: 65px; object-fit: cover; border-radius: 8px; background: #eef3f6; }

/* Framing of a photo of the home: the whole photo, darkened outside the part shown on the home */
.kpa-crop { margin: 18px 0 0; padding: 14px 16px 16px; background: #f6fafc; border: 1px solid #c9dbe6; border-radius: 12px; }
.kpa-crop[hidden] { display: none; }
.kpa-crop-head { margin: 0 0 4px; color: #196891; font: 400 18px 'Oswald', sans-serif; }
.kpa-crop-help { margin: 0 0 12px; color: #555555; font-size: 13px; }
.kpa-crop-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 8px; line-height: 0; cursor: ns-resize; touch-action: none; user-select: none; }
.kpa-crop-stage img { display: block; max-width: 100%; max-height: 520px; }
.kpa-crop-window { position: absolute; box-sizing: border-box; border: 2px solid #ffffff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); pointer-events: none; }
.kpa-crop-normal { position: absolute; box-sizing: border-box; border: 2px dashed #ffcd47; pointer-events: none; }
.kpa-crop-stage.is-dragging .kpa-crop-window { border-color: #ffcd47; }
.kpa-crop-range { display: flex !important; align-items: center; gap: 10px; max-width: 520px; margin: 12px auto 0; color: #555555; font-size: 13px; }
.kpa-crop-range input { flex: 1; }