/* 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; }

/* Release the THEME's fixed field height.
 *
 * Blocksy clamps form fields to height: 40px. With 13px of padding top and bottom plus the
 * borders, that leaves 11px for a 25.6px text line. <input> survives because browsers centre
 * input text regardless — which is why typed fields looked fine — but a select with
 * appearance:none lays its text below the padding, so the offered options were clipped to
 * invisibility on phones and cut in half on desktop. Found by a person with a phone, not by
 * any review: every static check read "height: 40px" and none of them asked whether 40
 * could contain 13 + 13 + 25.6. */
.evec-academy select,
.evec-academy input[type="text"],
.evec-academy input[type="email"],
.evec-academy input[type="password"] { height: auto; line-height: 1.4; }
.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: ""; }
}

/* ---- dashboard header actions ---------------------------------------------- */
.evec-top__actions { display: flex; gap: 18px; align-items: center; }
.evec-langlink { font-weight: 700; letter-spacing: .04em; }

/* ---- the shop: certificates ------------------------------------------------ */
.evec-certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
@media (max-width: 560px) { .evec-certs { grid-template-columns: 1fr; } }
.evec-cert { position: relative; border: 1.5px solid #E6E1D5; border-top: 4px solid var(--tint, #2F7A44);
  border-radius: 14px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column;
  gap: 8px; align-items: flex-start; }
.evec-cert b { font-size: 15.5px; line-height: 1.25; }
.evec-cert__cost { font-size: 22px; font-weight: 700; color: var(--tint, #2F7A44); letter-spacing: -.01em; }
.evec-cert--owned { background: #FBFAF7; border-style: solid; }
.evec-cert--owned::after { content: "\1F3C6"; position: absolute; top: 12px; right: 14px; font-size: 18px; }
.evec-cert__owned { font-size: 13px; font-weight: 700; color: #1F7A3D; }
.evec-cert--locked { opacity: .78; }
.evec-cert__need { font-size: 13px; color: #6A6456; }
.evec-bar--mini { display: block; width: 100%; height: 6px; background: #EFEBE1;
  border-radius: 999px; overflow: hidden; }
.evec-bar--mini i { display: block; height: 100%; background: var(--tint, #2F7A44); }

/* ---- support us: social actions -------------------------------------------- */
.evec-socials { display: flex; flex-direction: column; gap: 8px; }
.evec-soc { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; border: 1.5px solid #E6E1D5; border-radius: 12px; background: #fff;
  padding: 10px 14px; font-size: 14.5px; }
.evec-soc__what b { color: #2F7A44; margin-left: 4px; }
.evec-soc__do { display: flex; align-items: center; gap: 12px; }
.evec-btn--soc { background: #2257C0; }
.evec-soc__done { font-size: 13px; font-weight: 600; color: #1F7A3D; white-space: nowrap; }

/* ---- certificates on the printed record ------------------------------------ */
.evec-record__certhead { margin-top: 26px; }
.evec-record__certs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.evec-record__certs li { border-left: 4px solid #2F7A44; padding: 8px 14px; background: #FBFAF7;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.evec-soc__pending { font-size: 13px; font-weight: 600; color: #9A6B12; white-space: nowrap; }
.evec-btn--soc input[type=file] { display: none; }

/* ---- modern refresh (dashboard) -------------------------------------------
   A lighter, more contemporary skin over the base styles above: a soft shadow
   system, larger radii, smooth motion, and a single green accent. Scoped to the
   dashboard's own elements so the forms and the printed record are untouched.
   Source order gives these precedence; the mobile WPCode layer still wins inside
   its media queries. */

.evec-academy { color: #23221F; }

.evec-stats { gap: 14px; }
.evec-stat {
  background: linear-gradient(160deg, #FFFFFF 0%, #F6F4EE 100%);
  border: 1px solid #ECE7DB; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43,42,38,.04), 0 6px 18px rgba(43,42,38,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.evec-stat:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 14px 28px rgba(43,42,38,.08); }
.evec-stat b { color: #1F7A3D; letter-spacing: -.02em; }

.evec-bar { height: 10px; background: #ECE7DB; }
.evec-bar i, .evec-bar--mini i { background: linear-gradient(90deg, #2F9E55, #4FB56E); }
.evec-bar--mini { height: 7px; }

.evec-badge {
  background: linear-gradient(135deg, #2F9E55, #38B063); color: #fff;
  box-shadow: 0 4px 12px rgba(47,158,85,.28);
}

.evec-card, .evec-cert, .evec-soc {
  border: 1px solid #ECE7DB; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(43,42,38,.04), 0 6px 16px rgba(43,42,38,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.evec-cert { border-top-width: 4px; }
.evec-card:hover, .evec-cert:hover, .evec-soc:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 14px 28px rgba(43,42,38,.08); }
.evec-cert--owned { box-shadow: 0 1px 2px rgba(43,42,38,.04); }
.evec-cert--locked { box-shadow: none; }

.evec-btn { box-shadow: 0 8px 20px rgba(47,158,85,.24);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.evec-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(47,158,85,.30); }
.evec-btn--soc { box-shadow: 0 8px 20px rgba(34,87,192,.22); }
.evec-btn--soc:hover { box-shadow: 0 10px 24px rgba(34,87,192,.28); }
.evec-btn--sm { box-shadow: none; }
.evec-btn--sm:hover { box-shadow: 0 6px 16px rgba(43,42,38,.12); }
.evec-btn--quiet, .evec-btn--quiet:hover { box-shadow: none; transform: none; }

/* The paste-a-Drive-link field that replaces the claim button in place. */
.evec-soc__url {
  flex: 1 1 150px; min-width: 120px; margin-top: 0; padding: 9px 12px;
  font-size: 14px; font-family: inherit; color: #2B2A26;
  border: 1.5px solid #E6E1D5; border-radius: 10px; background: #fff;
}
.evec-soc__url:focus { outline: 2px solid var(--teal, #2F9E55); outline-offset: 1px; }

@media print { .evec-stat, .evec-card, .evec-cert, .evec-soc { box-shadow: none !important; } }

.evec-soc__group { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
.evec-soc__group:first-of-type { margin-top: 0; }
.evec-soc__group a { color: #2E6E4E; text-decoration: none; }
.evec-soc__group a:hover { text-decoration: underline; }

/* ---- contributions: role cards + role page -------------------------------- */
.evec-roles { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 8px; }
@media (min-width: 560px) { .evec-roles { grid-template-columns: repeat(3, 1fr); } }
.evec-role { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: #2B2A26;
  border: 1px solid #ECE7DB; border-radius: 16px; background: #fff; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(43,42,38,.04), 0 6px 16px rgba(43,42,38,.05);
  transition: transform .15s ease, box-shadow .15s ease; }
.evec-role:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 14px 28px rgba(43,42,38,.08); }
.evec-role b { font-size: 15.5px; line-height: 1.25; }
.evec-role span { font-size: 13px; color: #6A6456; line-height: 1.4; }
.evec-role__pay { display: inline-block; font-size: 13px; font-weight: 700; color: #1F7A3D;
  background: #EAF5EE; border-radius: 999px; padding: 5px 13px; margin-bottom: 10px; }
.evec-roleexplain { white-space: pre-line; font-size: 15px; line-height: 1.6; color: #3C382D; margin: 2px 0 14px; }
.evec-weekbrief { white-space: pre-line; background: #FBFAF7; border: 1.5px solid #E6E1D5; border-radius: 14px;
  padding: 16px 18px; font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.evec-inlink { color: #1F7A3D; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
  word-break: break-word; }

/* social-style link-preview card, shown under a weekly task that carries a link */
.evec-embed { display: flex; align-items: stretch; text-decoration: none; color: inherit; background: #fff;
  border: 1.5px solid #E6E1D5; border-radius: 14px; overflow: hidden; margin: 0 0 22px;
  transition: border-color .15s ease, box-shadow .15s ease; }
.evec-embed:hover { border-color: #CFC8B8; box-shadow: 0 6px 18px rgba(60, 56, 45, .10); }
.evec-embed__img { flex: 0 0 132px; align-self: stretch; min-height: 104px; background-color: #F0ECE2;
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.evec-embed__body { display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; min-width: 0; }
.evec-embed__host { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: #8A8474; }
.evec-embed__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #2C2A22;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evec-embed__desc { font-size: 13.5px; line-height: 1.45; color: #5A574E;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media ( max-width: 480px ) {
  .evec-embed { flex-direction: column; }
  .evec-embed__img { flex-basis: 150px; width: 100%; }
}
.evec-cform label span { display: block; }

/* ---- special-task thread ---------------------------------------------------- */
.evec-thread { border: 1px solid #ECE7DB; border-radius: 16px; background: #FBFAF7; padding: 2px 16px; margin-bottom: 16px; }
.evec-msg-row { padding: 12px 0; border-bottom: 1px solid #EFEBE1; }
.evec-msg-row:last-child { border-bottom: 0; }
.evec-msg-who { font-size: 12.5px; color: #6A6456; font-weight: 700; }
.evec-msg-row--staff .evec-msg-who { color: #2E6E4E; }
.evec-msg-body { font-size: 15px; line-height: 1.55; color: #3C382D; margin-top: 3px; white-space: pre-wrap; }
.evec-mform input[type=url] { margin-top: 10px; }
.evec-role--special { border-top: 3px solid #2257C0; }

/* ---------------------------------------------------------------- lessons
   The preparation track. Card-at-a-time on a phone; the list is a plain
   stack of rows because a grid of twelve tiles reads as homework. */
.evec-role--lessons{border-color:var(--evec-accent,#93d697)}
.evec-lessons{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
.evec-lesson{display:grid;grid-template-columns:2rem 1fr auto auto;align-items:center;
	gap:.6rem;padding:.7rem .8rem;border:1px solid var(--evec-line,#cfe0d2);
	border-radius:10px;text-decoration:none;color:inherit}
.evec-lesson:hover{background:var(--evec-tint,#f2f8f0)}
.evec-lesson__n{font-weight:600;opacity:.55;font-variant-numeric:tabular-nums}
.evec-lesson__t{font-weight:500}
.evec-lesson__go{font-size:.85rem;opacity:.75;white-space:nowrap}
.evec-cardwrap{margin:1rem 0}
.evec-card{border:1px solid var(--evec-line,#cfe0d2);border-radius:14px;
	padding:1.15rem 1.1rem;min-height:14rem;display:flex;flex-direction:column;
	justify-content:center;background:#fff}
.evec-card--hook .evec-card__body{font-size:1.15rem;line-height:1.4}
.evec-card--artefact{justify-content:flex-start}
.evec-card__body p{margin:0 0 .7rem}
.evec-card__body p:last-child{margin-bottom:0}
.evec-card__make{display:block;margin-top:.9rem}
.evec-card__make textarea{width:100%;border:1px solid var(--evec-line,#cfe0d2);
	border-radius:8px;padding:.55rem;font:inherit}
.evec-card__q{font-size:1.05rem;font-weight:500;margin:0 0 .9rem}
.evec-opts{display:flex;flex-direction:column;gap:.45rem}
.evec-opt{text-align:left;padding:.6rem .75rem;border:1px solid var(--evec-line,#cfe0d2);
	border-radius:8px;background:#fff;font:inherit;cursor:pointer}
.evec-opt:hover{background:var(--evec-tint,#f2f8f0)}
.evec-opt.is-picked{border-color:var(--evec-brand,#0f3d21);
	background:var(--evec-tint,#eef4e8);font-weight:500}
.evec-dots{display:flex;gap:.3rem;justify-content:center;margin:.8rem 0}
.evec-dot{width:1.1rem;height:3px;border-radius:2px;background:var(--evec-line,#cfe0d2)}
.evec-dot.is-on{background:var(--evec-brand,#0f3d21)}
.evec-cardnav{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.evec-progress{opacity:.7;font-size:.9rem}
@media (max-width:480px){
	.evec-lesson{grid-template-columns:1.6rem 1fr auto;row-gap:.2rem}
	.evec-lesson__go{grid-column:2/4;justify-self:start;font-size:.8rem}
}

/* ---- modules on the lessons screen -------------------------------------- */
/* The padlock styling deliberately stays quiet. A locked CHECK is a pacing
   signal, not a wall: the card behind it opens and reads normally, so a loud
   red lock would say something false about what the learner may do. */
.evec-modh { margin: 28px 0 2px; font-size: 20px; line-height: 1.25; }
.evec-modh:first-child { margin-top: 4px; }
.evec-modh__lvl { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--evec-muted, #6b7280); vertical-align: middle; margin-left: 6px; }
.evec-modh__sub { margin: 0 0 10px; color: var(--evec-muted, #6b7280); font-size: 14px; }
.evec-modh__lock,
.evec-modh__hint { margin: 0 0 10px; font-size: 13px; color: var(--evec-muted, #6b7280); }
.evec-modh__lock { color: #8a6d3b; }
.evec-lesson__lock { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
	letter-spacing: .02em; text-transform: uppercase; color: var(--evec-muted, #6b7280); }
.evec-lesson--locked { opacity: 1; }   /* readable, and looks readable */

/* ---- rank and module awards --------------------------------------------- */
.evec-rank { margin: 0 0 14px; font-size: 15px; }
.evec-modh__won,
.evec-modh__prize { margin: 0 0 10px; font-size: 13px; }
.evec-modh__won { color: #1e7b34; font-weight: 600; }
.evec-modh__prize { color: var(--evec-muted, #6b7280); }

/* ---- module cards, top of the dashboard --------------------------------- */
/* Vertical cards: art block on top, text under. One column on a phone so each
   card is a comfortable tap target, two then three as the screen allows. */
.evec-mc-h { margin: 26px 0 4px; font-size: 19px; }
.evec-mc-sub { margin: 0 0 12px; font-size: 13.5px; color: #6A6456; }
.evec-mcs { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 22px; }
@media (min-width: 560px) { .evec-mcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .evec-mcs { grid-template-columns: repeat(3, 1fr); } }

.evec-mc { display: flex; flex-direction: column; text-decoration: none; color: #2B2A26;
	background: #FBFAF7; border: 1.5px solid #E6E1D5; border-radius: 16px; overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease; }
.evec-mc:hover { transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 14px 28px rgba(43,42,38,.08); }

.evec-mc__art { position: relative; display: flex; align-items: center; justify-content: center;
	min-height: 104px; background: linear-gradient(140deg, #EAF4EC 0%, #DCEDE1 100%); color: #1F7A3D; }
.evec-mc__icon { width: 46px; height: 46px; }
.evec-mc__key { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; color: #1F7A3D; opacity: .75; }

.evec-mc__body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.evec-mc__body b { font-size: 15.5px; line-height: 1.25; }
.evec-mc__blurb { font-size: 13px; color: #6A6456; line-height: 1.4; }
.evec-mc__bar { display: block; height: 6px; border-radius: 999px; background: #E6E1D5;
	overflow: hidden; margin-top: 4px; }
.evec-mc__bar i { display: block; height: 100%; background: #1F7A3D; border-radius: 999px; }
.evec-mc__meta { font-size: 12px; color: #6A6456; }
.evec-mc__prize { font-size: 12.5px; font-weight: 600; color: #1F7A3D; }
.evec-mc__won { font-size: 12.5px; font-weight: 600; color: #1F7A3D; }
.evec-mc__need { font-size: 12.5px; color: #8a6d3b; }
.evec-mc--done .evec-mc__art { background: linear-gradient(140deg, #DCEDE1 0%, #C7E3CF 100%); }

/* Announced, not written. Muted and NOT a link — there is nothing to open, and a card that
   looks tappable but is not is exactly the problem the dead stat tiles used to cause. */
.evec-mc--soon { opacity: .78; }
.evec-mc--soon .evec-mc__art { background: #F2F0EA; color: #8B8574; }
.evec-mc__soon { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: #6A6456; background: #E6E1D5;
	padding: 3px 8px; border-radius: 999px; margin-top: 4px; }

/* The stat tiles are links now, so kill the underline they would inherit. */
.evec-stat { text-decoration: none; color: inherit; display: block; }

/* ---- this week, top of the dashboard ------------------------------------ */
/* One fixed hue per role, delivered as --c on the element from
   EVEC_Contrib::ROLES. The colour is decoration on top of the role name, never
   the only way to tell two cards apart. */
.evec-wk-h { margin: 22px 0 2px; font-size: 19px; }
.evec-wk-sub { margin: 0 0 12px; font-size: 13.5px; color: #6A6456; }
.evec-wks { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
@media (min-width: 620px) { .evec-wks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .evec-wks { grid-template-columns: repeat(3, 1fr); } }

.evec-wk { --c: #6A6456;
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #2B2A26;
  background: #FFFDF9; border: 1.5px solid #E6E1D5; border-left: 5px solid var(--c);
  border-radius: 14px; padding: 13px 15px;
  transition: transform .18s ease, box-shadow .18s ease; }
.evec-wk:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(43,42,38,.06), 0 14px 28px rgba(43,42,38,.08); }
.evec-wk b { font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.evec-wk__tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c); }
.evec-wk__go { font-size: 12.5px; font-weight: 600; color: var(--c); margin-top: 2px; }
.evec-wk__due { font-size: 12.5px; color: #6A6456; }

/* The one you already accepted. Filled rather than outlined, so it reads as the
   thing to finish before picking up anything new. */
.evec-wk--mine { --c: #1F7A3D; background: #F1F8F2; border-color: #CDE6D4; border-left-color: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .evec-wk, .evec-mc, .evec-stat { transition: none; }
  .evec-wk:hover, .evec-mc:hover { transform: none; }
}

/* Sent back for changes: the one thing on the page somebody is actively waiting for. */
.evec-wk--changes { --c: #B45309; background: #FDF6EC; border-color: #EBD9BC; }

/* ---- dashboard tabs ----------------------------------------------------- */
/* Scrolls sideways on a narrow phone rather than wrapping to two rows: a tab
   bar that changes height when you switch tabs shifts everything under it. */
.evec-tabs { display: flex; gap: 4px; margin: 18px 0 0; padding-bottom: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 1.5px solid #E6E1D5; }
.evec-tabs::-webkit-scrollbar { display: none; }

.evec-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  padding: 9px 12px; margin-bottom: -1.5px; font: inherit; font-size: 14.5px; font-weight: 600;
  color: #6A6456; white-space: nowrap; border-radius: 8px 8px 0 0; }
.evec-tab:hover { color: #2B2A26; background: #F4F2EC; }
.evec-tab.is-on { color: #1F7A3D; border-bottom-color: #1F7A3D; }
.evec-tab:focus-visible { outline: 2px solid #1F7A3D; outline-offset: -2px; }
.evec-tab__n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: #1F7A3D; color: #fff; font-size: 11px; font-weight: 700; }

.evec-panel { padding-top: 4px; }
.evec-panel[hidden] { display: none; }
.evec-panel > h2:first-child, .evec-panel > .evec-wk-h:first-child { margin-top: 18px; }

/* The stat tiles are <button> now (an anchor cannot reach a hidden panel). */
.evec-stat { font: inherit; text-align: center; cursor: pointer; width: 100%; }

/* ---- one card language, and a surface to sit on ------------------------- */
/* Two problems solved together.
   1. Cards were #FBFAF7 / #FFFDF9 — near-white creams. The plugin never sets a
      page background (it inherits from the theme), so on a cream page the cards
      were the same colour as what was behind them and simply disappeared. Cards
      are now pure white with a firmer border, which reads as a card on any
      background the theme might paint.
   2. Each tab gets its own tinted panel. That both tells the tabs apart at a
      glance and guarantees the white cards always have something to sit on,
      rather than depending on a theme colour this plugin does not control. */

.evec-mc,
.evec-card,
.evec-role,
.evec-stat { background: #FFFFFF; }

.evec-mc { border-color: #DCD6C6; box-shadow: 0 1px 2px rgba(43,42,38,.04); }
.evec-mc:hover { box-shadow: 0 2px 4px rgba(43,42,38,.07), 0 16px 30px rgba(43,42,38,.10); }

/* Weekly cards, now built like module cards: art block, then body. The role
   colour tints the art block instead of being a stripe down the side. */
.evec-mc--wk { --c: #6A6456; }
.evec-mc__art--wk { min-height: 76px; background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c); }
.evec-mc__art--wk .evec-mc__icon { width: 34px; height: 34px; }
.evec-mc__tag { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c); }
.evec-mc__go { font-size: 12.5px; font-weight: 600; color: var(--c); margin-top: 2px; }

/* color-mix is recent; this keeps older phones on a plain tint rather than a
   transparent block with an invisible icon. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .evec-mc__art--wk { background: #F4F2EC; }
}

/* ---- per-tab surfaces --------------------------------------------------- */
.evec-panel { padding: 16px 14px 20px; border-radius: 16px; margin-top: 12px;
  background: #E7E3D9; }
/* Deep enough that a white card reads as a separate surface — measured 1.30:1
   to 1.43:1 against #FFFFFF. The first attempt was 1.10:1, which is under the
   threshold where most people see an edge at all, and the cards looked like
   they were floating on nothing. */
.evec-panel[data-tab="do"]      { background: #D3E7DA; }
.evec-panel[data-tab="erasmus"] { background: #D0DEF3; }
.evec-panel[data-tab="venture"] { background: #F0DBBE; }
.evec-panel[data-tab="file"]    { background: #DED4EC; }
.evec-panel > h2:first-child,
.evec-panel > .evec-wk-h:first-child,
.evec-panel > .evec-rank:first-child { margin-top: 0; }

/* The active tab takes its panel's hue, so the bar and the surface read as one
   object rather than two unrelated bands of colour. */
.evec-tab[data-evec-tab="do"].is-on      { color: #1F7A3D; border-bottom-color: #1F7A3D; }
.evec-tab[data-evec-tab="erasmus"].is-on { color: #2257C0; border-bottom-color: #2257C0; }
.evec-tab[data-evec-tab="venture"].is-on { color: #B45309; border-bottom-color: #B45309; }
.evec-tab[data-evec-tab="file"].is-on    { color: #6D28D9; border-bottom-color: #6D28D9; }

/* An empty state inside a tinted panel needs to be lighter than the panel, not
   the cream it used to be, or it reads as a card with nothing in it. */
.evec-panel .evec-empty { background: rgba(255,255,255,.72); }

/* ---- every card the same size and shape --------------------------------- */
/* Three things were making cards different heights:
     - art blocks of two different heights (104px on modules, 76px on weekly),
     - text of any length pushing the body taller,
     - a progress bar that only module cards carry.
   Fixed in that order. The art block is one height everywhere, the two text
   runs are clamped to a set number of lines, and the footer is pushed to the
   bottom so the last line sits on the same baseline whether or not the card
   above it had a bar. A grid row already stretches its items to match; this
   makes rows match each other too. */

.evec-mcs > * { min-height: 268px; }

.evec-mc { height: 100%; }

.evec-mc__art,
.evec-mc__art--wk { min-height: 96px; height: 96px; flex: 0 0 96px; }
.evec-mc__icon,
.evec-mc__art--wk .evec-mc__icon { width: 40px; height: 40px; }

.evec-mc__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }

/* Two lines for a title, three for the description. Clamping rather than
   truncating with an ellipsis in JS keeps the full text available to a screen
   reader and to anyone who zooms. */
.evec-mc__body > b {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.evec-mc__blurb {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }

/* The last line of every card sits on the same baseline. */
.evec-mc__go,
.evec-mc__prize,
.evec-mc__won,
.evec-mc__need,
.evec-mc__soon { margin-top: auto; }

/* Reserve the progress bar's space on cards that have no bar, so a row of
   module cards and a row of weekly cards line up rather than differing by the
   height of one bar. */
.evec-mc__bar { flex: 0 0 auto; }
.evec-mc--wk .evec-mc__body::before {
  content: ""; display: block; height: 6px; margin-top: 4px; }

/* The old flat role card is gone — ways-to-help now uses the same card. Kept
   only so any stray markup does not fall back to an unstyled box. */
.evec-roles { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .evec-roles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .evec-roles { grid-template-columns: repeat(3, 1fr); } }

/* ---- contrast against the panel ----------------------------------------- */
/* Deepening the panels dropped the old muted grey #6A6456 to 4.13:1 on the
   lilac one — under AA. Inside a panel it darkens to #5A5447, which measures
   5.27:1 or better on all four. Outside a panel nothing changes. */
.evec-panel .evec-mc-sub,
.evec-panel .evec-wk-sub,
.evec-panel .evec-mc__blurb,
.evec-panel .evec-mc__meta,
.evec-panel .evec-empty { color: #5A5447; }

/* A defined edge, not a hairline that disappears against a tinted surface. */
.evec-panel .evec-mc { border-color: #C4BCA6;
  box-shadow: 0 1px 2px rgba(43,42,38,.06), 0 4px 10px rgba(43,42,38,.05); }
.evec-panel .evec-mc:hover { border-color: #ADA48C;
  box-shadow: 0 2px 4px rgba(43,42,38,.08), 0 18px 32px rgba(43,42,38,.12); }

/* The empty state is a card too, so it gets the same treatment rather than
   fading into the panel behind it. */
.evec-panel .evec-empty { background: #FFFFFF; border: 1.5px solid #C4BCA6; }

/* Headings sit on the tint, so they take the full-strength ink. */
.evec-panel h2, .evec-panel .evec-wk-h, .evec-panel .evec-mc-h { color: #2B2A26; }

/* ---- the answers, kept for revision ------------------------------------- */
.evec-lessonrow { display: flex; flex-direction: column; }
.evec-lesson__ans { align-self: flex-start; margin: 2px 0 0 2.4rem; padding: 2px 0;
  font-size: 12.5px; font-weight: 600; color: #1F7A3D; text-decoration: none; }
.evec-lesson__ans:hover { text-decoration: underline; }

.evec-card--rev { text-align: left; }
.evec-rev { list-style: none; margin: 14px 0 0; padding: 0; }
.evec-rev__q { margin: 0 0 18px; }
.evec-rev__t { margin: 0 0 8px; font-weight: 600; line-height: 1.35; }
.evec-rev__n { color: #6A6456; font-variant-numeric: tabular-nums; }
.evec-rev__os { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 5px; }
.evec-rev__o { position: relative; padding: 8px 12px 8px 32px; border-radius: 10px;
  background: #F6F5F1; border: 1.5px solid #E6E1D5; font-size: 14.5px; line-height: 1.35; }
/* The correct one is marked with a tick as well as a colour, so it is still the
   correct one for a reader who cannot tell green from grey. */
.evec-rev__o.is-right { background: #EAF5EC; border-color: #9FCBAB; font-weight: 600; }
.evec-rev__tick { position: absolute; left: 11px; top: 8px; color: #1F7A3D; font-weight: 700; }
.evec-rev__why { margin: 8px 0 0; padding: 9px 12px; border-radius: 10px;
  background: #FFF6E5; color: #7A4E00; font-size: 13.5px; line-height: 1.45; }

/* ---- what this course is, above the cards ------------------------------- */
.evec-intro { background: #FFFFFF; border: 1.5px solid #C4BCA6; border-radius: 14px;
  padding: 14px 16px; margin: 0 0 16px; }
.evec-intro__h { margin: 0 0 6px; font-size: 17px; line-height: 1.25; }
.evec-intro__b { margin: 0; font-size: 14.5px; line-height: 1.5; color: #4A4539; }

/* ---- tabs: a control, not a row of words -------------------------------- */
/* First attempt was borderless buttons in muted grey with a 3px underline on
   the active one. On a dashboard that already has headings and cards, that
   reads as a line of plain text — people did not see a control there at all.
   A filled track with a raised active pill is unambiguous at a glance, which
   is the entire job of a tab bar. */
.evec-tabs { background: #E7E3D9; border: 0; border-radius: 14px;
  padding: 4px; gap: 2px; margin: 18px 0 0; }
.evec-tab { border-radius: 10px; border-bottom: 0; margin-bottom: 0;
  padding: 10px 14px; color: #4A4539; font-weight: 600; }
.evec-tab:hover { background: rgba(255,255,255,.55); color: #2B2A26; }
.evec-tab.is-on { background: #FFFFFF; border-bottom: 0;
  box-shadow: 0 1px 2px rgba(43,42,38,.10), 0 3px 8px rgba(43,42,38,.08); }
.evec-tab:focus-visible { outline: 2px solid #1F7A3D; outline-offset: 1px; }

/* The active pill keeps its panel's hue, so the control and the surface below
   it are visibly one object. */
.evec-tab[data-evec-tab="do"].is-on      { color: #1A6B35; border-bottom-color: transparent; }
.evec-tab[data-evec-tab="erasmus"].is-on { color: #1D4EAF; border-bottom-color: transparent; }
.evec-tab[data-evec-tab="venture"].is-on { color: #9C4708; border-bottom-color: transparent; }
.evec-tab[data-evec-tab="file"].is-on    { color: #5C21C4; border-bottom-color: transparent; }

/* NOT currentColor. `background: currentColor` resolves to the element's OWN
   computed color, which the very next declaration set to white — so the badge
   rendered as a white circle with a white number in it. The count means "you
   have something waiting", so it stays one deliberate colour on every tab,
   active or not, rather than borrowing whatever the tab happens to be. */
.evec-tab__n { background: #1F7A3D; color: #FFFFFF; }

/* A card carrying this week's task, among the role cards that do not. */
.evec-mc--now { border-color: var(--c); }

/* The drachmas tile is a plain route to the Social media tab; the cue that
   there is something to claim lives on that tab. */
.evec-stat { position: relative; }

/* The fifth tab. Warm pink-orange so it reads as the social one at a glance,
   and distinct from the amber Entrepreneur panel next to it. */
.evec-panel[data-tab="social"] { background: #F1D1D1; }
.evec-tab[data-evec-tab="social"].is-on { color: #A8324B; border-bottom-color: transparent; }

/* ---- the Social media tab asks for attention ---------------------------- */
/* It blinks on arrival and then stops. Five cycles of one second is right at
   the WCAG 2.2.2 limit, which allows blinking that starts automatically only
   if it stops within five seconds or can be paused — and it fires on every
   page load, so a volunteer sees it every visit, which is when it matters.
   What it leaves behind is a solid badge with the amount on it, so the message
   survives after the motion ends rather than depending on it.

   It stops the moment the tab is opened: an element still flashing at somebody
   who is already looking at it is just noise. */
.evec-tab--pulse:not(.is-on) {
  animation: evecTabPulse 1s ease-in-out 5;
}
.evec-tab--pulse .evec-tab__n { background: #A8324B; }

@keyframes evecTabPulse {
  0%, 100% { background: transparent;
             box-shadow: 0 0 0 0 rgba(168,50,75,0); }
  50%      { background: #FFFFFF;
             box-shadow: 0 0 0 3px rgba(168,50,75,.38); }
}

/* No motion at all for anyone who has asked for none. The badge does the work. */
@media (prefers-reduced-motion: reduce) {
  .evec-tab--pulse:not(.is-on) { animation: none; background: #FFFFFF; }
}

/* Leaving is a right, not a call to action. Small, grey, well down the last
   tab — findable by anyone looking for it, and no longer sitting under every
   screen where it read as a second Sign out. */
.evec-panel .evec-leave { margin-top: 34px; padding-top: 14px;
  border-top: 1px solid rgba(43,42,38,.12); }
.evec-panel .evec-leave > summary { font-size: 12.5px; color: #6A6456;
  cursor: pointer; list-style: revert; }
.evec-panel .evec-leave > summary:hover { color: #2B2A26; }

/* ---- claiming a social action ------------------------------------------- */
/* The expanded form takes the whole row: a numbered list, a real <label>, then
   the field. A placeholder is not a label — it disappears exactly when the
   person is typing and needs it, and a screen reader never announces it as
   one. */
.evec-soc__claim { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px;
  background: #FFFFFF; border: 1.5px solid #C4BCA6; border-radius: 12px;
  padding: 12px 14px; margin-top: 6px; }
.evec-soc__steps { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5;
  color: #4A4539; }
.evec-soc__steps li { margin-bottom: 2px; }
.evec-soc__lab { font-size: 13px; font-weight: 600; color: #2B2A26; }
.evec-soc__row { display: flex; gap: 8px; flex-wrap: wrap; }
.evec-soc__row .evec-soc__url { flex: 1 1 220px; min-width: 0; }
.evec-soc__note { margin: 0; font-size: 12px; color: #5A5447; line-height: 1.45; }

/* The row that holds it has to allow the form to wrap onto its own line. */
.evec-soc { flex-wrap: wrap; }

/* ---- the volunteer's own drachma ledger --------------------------------- */
.evec-leds { display: flex; flex-direction: column; gap: 6px; }
.evec-led { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  background: #FFFFFF; border: 1.5px solid #C4BCA6; border-radius: 10px; padding: 9px 12px; }
.evec-led__what { font-size: 14px; }
.evec-led__ref { color: #5A5447; }
.evec-led__at { display: block; font-size: 12px; color: #5A5447; }
.evec-led__d { font-weight: 700; font-size: 14.5px; color: #1F7A3D; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.evec-led__d.is-out { color: #A32222; }

/* ---- "a newer version is ready" ----------------------------------------- */
/* Sits above the safe-area inset so it clears the home indicator on an iPhone
   in standalone mode, where there is no browser chrome to sit under. */
.evec-upd { position: fixed; left: 12px; right: 12px; z-index: 9999;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  background: #2B2A26; color: #FFFFFF; border-radius: 12px; padding: 11px 12px 11px 15px;
  box-shadow: 0 6px 24px rgba(43,42,38,.28); font-size: 14px; line-height: 1.35; }
.evec-upd > span { flex: 1 1 auto; }
.evec-upd__go { flex: 0 0 auto; font: inherit; font-weight: 700; cursor: pointer;
  background: #4ADE80; color: #14371F; border: 0; border-radius: 9px; padding: 8px 14px; }
.evec-upd__x { flex: 0 0 auto; font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: #B9B4A8; padding: 4px 6px; }
.evec-upd__x:hover { color: #FFFFFF; }

/* ---- phone notifications opt-in ----------------------------------------- */
.evec-push { background: #FFFFFF; border: 1.5px solid #C4BCA6; border-radius: 12px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.evec-push__lead { margin: 0; font-size: 14px; line-height: 1.5; color: #4A4539; }
.evec-push__note { margin: 0; font-size: 13px; line-height: 1.5; color: #8a6d3b;
  background: #FFF6E5; border-radius: 9px; padding: 9px 11px; }
.evec-push .evec-msg { margin: 0; font-size: 13px; }

/* ---- "put it on your phone" --------------------------------------------- */
.evec-inst { display: flex; align-items: center; gap: 10px; margin: 14px 0 0;
  background: #EAF4EC; border: 1.5px solid #9FCBAB; border-radius: 12px;
  padding: 11px 12px 11px 14px; font-size: 14px; line-height: 1.4; }
.evec-inst[hidden] { display: none; }
.evec-inst__txt { flex: 1 1 auto; }
.evec-inst__how { color: #3F6B4C; }
.evec-inst__go { flex: 0 0 auto; font: inherit; font-weight: 700; cursor: pointer;
  background: #1F7A3D; color: #fff; border: 0; border-radius: 9px; padding: 9px 15px; }