/* EVEC Volunteers Academy — front end styles.
   Inherits the site's fonts. Colours fall back to the .ev- kit variables where they exist,
   so the dashboard matches evec.org.gr without hardcoding the palette twice. */

.evec-academy { max-width: 680px; font-family: inherit; color: #2B2A26; }
.evec-academy h1 { font-size: 27px; line-height: 1.2; margin: 0 0 6px; }
.evec-academy h2 { font-size: 19px; line-height: 1.25; margin: 30px 0 12px; }
.evec-academy h3 { font-size: 16.5px; line-height: 1.3; margin: 0 0 6px; }

.evec-lede { font-size: 16px; line-height: 1.65; color: #5A574E; margin: 0 0 22px; }
.evec-meta { font-size: 13.5px; color: #5A574E; margin: 0 0 12px; }
.evec-empty { font-size: 14.5px; color: #6A6456; background: #FBFAF7;
  border: 1.5px dashed #E6E1D5; border-radius: 12px; padding: 18px; margin: 0; }

.evec-notice { font-size: 14.5px; line-height: 1.6; color: #8A5300; background: #FFF6E5;
  border-left: 3px solid #E0A300; padding: 12px 14px; border-radius: 6px; margin: 0 0 22px; }

.evec-form label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 16px; }
.evec-form input[type=email], .evec-form input[type=text] {
  width: 100%; margin-top: 6px; padding: 13px; font-size: 16px; font-family: inherit;
  border: 1.5px solid #E6E1D5; border-radius: 12px; background: #fff; color: #2B2A26; }
.evec-form input:focus { outline: 2px solid var(--teal, #2F9E55); outline-offset: 1px; }

.evec-btn { border: 0; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600;
  background: var(--teal, #2F9E55); color: #fff; padding: 14px 26px; border-radius: 12px;
  width: 100%; display: inline-block; text-align: center; text-decoration: none; }
.evec-btn:hover { filter: brightness(0.95); }
.evec-btn[disabled] { opacity: .6; cursor: default; }
.evec-btn--sm { width: auto; font-size: 14.5px; padding: 9px 18px; }
@media (min-width: 620px) { .evec-btn { width: auto; } }

.evec-link { border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; color: #2257C0; text-decoration: underline; padding: 0; }

.evec-msg { font-size: 13.5px; color: #5A574E; margin-top: 12px; min-height: 1.2em; line-height: 1.5; }
.evec-msg.evec-bad { color: #A32222; }
.evec-msg.evec-good { color: #1F7A3D; }

.evec-loading { font-size: 14.5px; color: #6A6456; padding: 30px 0; text-align: center; }

.evec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; }
.evec-badge { display: inline-block; font-size: 13px; font-weight: 600; background: #EAF5EE;
  color: #1F7A3D; border-radius: 999px; padding: 5px 12px; }

.evec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.evec-stat { background: #FBFAF7; border: 1.5px solid #E6E1D5; border-radius: 14px;
  padding: 16px 12px; text-align: center; }
.evec-stat b { display: block; font-size: 25px; line-height: 1.1; }
.evec-stat span { font-size: 12.5px; color: #6A6456; }

.evec-bar { height: 8px; background: #EFEBE1; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.evec-bar i { display: block; height: 100%; background: var(--teal, #2F9E55); }

.evec-card { background: #fff; border: 1.5px solid #E6E1D5; border-radius: 14px;
  padding: 18px 20px; margin-bottom: 12px; }

.evec-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid #EFEBE1; font-size: 14.5px; }
.evec-done { color: #1F7A3D; font-weight: 600; white-space: nowrap; }

/* ---- registration form ---------------------------------------------------- */
.evec-g2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 520px) { .evec-g2 { grid-template-columns: 1fr 1fr; } }

.evec-academy select { width: 100%; margin-top: 6px; padding: 13px; font-size: 16px;
  font-family: inherit; border: 1.5px solid #E6E1D5; border-radius: 12px; background: #fff;
  color: #2B2A26; color-scheme: light; }
.evec-academy select:focus { outline: 2px solid var(--teal, #2F9E55); outline-offset: 1px; }

/* The OPTIONS, explicitly — not just the closed box.
 *
 * Found on a real phone, not in review. The select is white with dark text, but nothing
 * styled the <option> elements, so they inherited the dark text colour into a popup whose
 * background the BROWSER paints. Samsung Internet and Android Chrome in dark mode paint that
 * popup dark: dark text on a dark list, every offered choice invisible, while the typed
 * fields (explicit colours) worked — which is precisely how it was reported. color-scheme on
 * the select asks the browser for the light popup; these colours are the guarantee if it
 * does not listen. */
.evec-academy option { background: #fff; color: #2B2A26; }
.evec-academy optgroup { background: #fff; color: #6A6456; }
.evec-academy fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.evec-academy legend { font-weight: 600; font-size: 14.5px; margin-bottom: 8px; padding: 0; }

.evec-hint { display: block; margin-top: 5px; font-size: 13px; color: #5A574E;
  font-weight: 400; line-height: 1.45; }
.evec-minor { font-size: 13.5px; color: #5A574E; margin: -6px 0 18px; }
.evec-minor a { color: #2257C0; font-weight: 600; }

.evec-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.evec-chips label { display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-weight: 400; font-size: 14px; border: 1.5px solid #E6E1D5; border-radius: 999px;
  padding: 8px 14px; background: #fff; cursor: pointer; }
.evec-chips input { accent-color: var(--teal, #2F9E55); }

.evec-consent { border: 1.5px solid #E6E1D5; border-radius: 14px; padding: 16px;
  margin: 6px 0 20px; background: #FBFAF7; }
.evec-req { display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  font-size: 14px; line-height: 1.5; margin: 0; }
.evec-req input { margin-top: 3px; accent-color: var(--teal, #2F9E55); }
.evec-optlead { font-size: 13.5px; color: #5A574E; margin: 16px 0 8px; }

/* NOT .evec-done — that already means the green "approved" span in the dashboard
   history, and it carries white-space:nowrap, which would render this whole paragraph
   on a single line. */
.evec-thanks h3 { font-size: 21px; margin: 0 0 8px; }

/* ---- auth ----------------------------------------------------------------- */
.evec-academy input[type=password] { width: 100%; margin-top: 6px; padding: 13px;
  font-size: 16px; font-family: inherit; border: 1.5px solid #E6E1D5; border-radius: 12px;
  background: #fff; color: #2B2A26; }
.evec-academy input[type=password]:focus { outline: 2px solid var(--teal, #2F9E55);
  outline-offset: 1px; }

.evec-notice--good { color: #1F5E33; background: #EAF5EE; border-left-color: #2F9E55; }

.evec-forgot { margin-top: 22px; border-top: 1px solid #EFEBE1; padding-top: 16px; }
.evec-forgot summary { cursor: pointer; font-size: 14.5px; color: #2257C0; font-weight: 600;
  list-style: revert; }
.evec-forgot summary::marker { color: #B9B3A5; }
.evec-forgot form { margin-top: 14px; }

/* ---- one task ------------------------------------------------------------- */
.evec-academy textarea { width: 100%; margin-top: 6px; padding: 13px; font-size: 16px;
  font-family: inherit; line-height: 1.6; border: 1.5px solid #E6E1D5; border-radius: 12px;
  background: #fff; color: #2B2A26; resize: vertical; min-height: 220px; }
.evec-academy textarea:focus { outline: 2px solid var(--teal, #2F9E55); outline-offset: 1px; }
.evec-academy input[type=url] { width: 100%; margin-top: 6px; padding: 13px; font-size: 16px;
  font-family: inherit; border: 1.5px solid #E6E1D5; border-radius: 12px; background: #fff; }

.evec-brief { background: #FBFAF7; border: 1.5px solid #E6E1D5; border-radius: 14px;
  padding: 18px 20px; margin-bottom: 22px; font-size: 15.5px; line-height: 1.7; }
.evec-brief ul, .evec-brief ol { margin: 10px 0 10px 20px; }
.evec-brief li { margin-bottom: 6px; }

.evec-prev { border: 1.5px solid #E6E1D5; border-radius: 12px; padding: 12px 16px;
  margin-bottom: 10px; background: #fff; }
.evec-prev summary { cursor: pointer; font-size: 14px; color: #5A574E; }
.evec-prev-body { margin-top: 12px; font-size: 15px; line-height: 1.65;
  border-top: 1px solid #EFEBE1; padding-top: 12px; }

/* ---- leaving --------------------------------------------------------------- */
.evec-leave { margin-top: 40px; border-top: 1px solid #EFEBE1; padding-top: 18px; }
.evec-leave summary { cursor: pointer; font-size: 14px; color: #6A6456; }
.evec-leave form { margin-top: 14px; max-width: 380px; }
.evec-btn--quiet { background: #fff; color: #A32222; border: 1.5px solid #E3C4C4; }
.evec-btn--quiet:hover { background: #FDF5F5; filter: none; }

/* A task sent back for changes: visible at a glance, still reachable. */
.evec-card--changes { border-color: #E8C68A; background: #FFFCF5; }
.evec-changes { color: #9A6B12; font-weight: 600; }
.evec-done--no { color: #8A8474; }

/* What a reviewer wrote. Quoted, so it reads as somebody speaking. */
.evec-note {
	margin: 10px 0 0; padding: 10px 14px;
	border-left: 3px solid #E8C68A; background: #FFFCF5;
	font-size: 14.5px; color: #4A4639; white-space: pre-wrap;
}

/* ---- help footer ----------------------------------------------------------- */
.evec-help { margin: 32px auto 0; max-width: 680px; padding: 16px 0 0;
  border-top: 1px solid #EFEBE1; font-size: 14px; color: #6A6456; }
.evec-help p { margin: 0 0 6px; }
.evec-help a { color: #2E6E4E; }

/* ---- participation record -------------------------------------------------- */
.evec-record { max-width: 720px; margin: 0 auto; }
.evec-record__head { border-bottom: 2px solid #2E6E4E; padding-bottom: 14px; margin-bottom: 20px; }
.evec-record__org { font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: #2E6E4E; margin: 0 0 6px; font-weight: 600; }
.evec-record__head h1 { margin: 0 0 6px; font-size: 26px; }
.evec-record__who { margin: 0; color: #4A4638; }
.evec-record__summary { font-size: 17px; margin: 0 0 24px; }
.evec-record__list { list-style: none; padding: 0; margin: 0; counter-reset: rec; }
.evec-record__list li { border-top: 1px solid #EFEBE1; padding: 16px 0; }
.evec-record__list h2 { font-size: 17px; margin: 0 0 4px; }
.evec-record__note { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid #E6E1D5;
  background: #FBFAF7; font-size: 15px; color: #3C382D; }
.evec-record__foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid #EFEBE1;
  font-size: 13px; color: #6A6456; }
.evec-record__print { margin-top: 18px; }

@media print {
  .evec-record__print, .evec-help, header.evec-top, .evec-btn { display: none !important; }
  .evec-record { max-width: none; }
  .evec-record__list li { break-inside: avoid; }
  a[href]::after { content: ""; }
}