/* ==========================================================================
   Direct Skills UAE — content & form pages
   (apply, enquiry, contact, success stories, FAQs)
   Builds on tokens/base/layout/sections. Loaded via @push('styles').
   ========================================================================== */

/* ---- Shared page pieces -------------------------------------------------- */
/* The banner's own rules live in base.css (see partials/page-banner). */
.ve-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.ve-page-grid--wide-side { grid-template-columns: minmax(0, 1fr) 23rem; }
.ve-page-grid--form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
/* The aside follows the reader down the form, clear of the sticky header. */
.ve-sidebar { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--ve-header-height) + 1rem); align-self: start; }
.ve-side-card { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: 1.35rem; display: grid; gap: .9rem; box-shadow: var(--ve-shadow-xs); }
.ve-side-card--brand { background: var(--ve-surface-brand); border-color: var(--ve-purple-100); }
.ve-side-card__title { font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); }
.ve-side-card p { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-side-card ul { display: grid; gap: .5rem; }
.ve-side-card li a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text); padding: .45rem .1rem; border-bottom: 1px solid var(--ve-border-subtle); }
.ve-side-card li:last-child a { border-bottom: 0; }
.ve-side-card li a:hover { color: var(--ve-primary); }
.ve-side-card li a .ve-count { color: var(--ve-text-muted); font-weight: 500; font-size: var(--ve-text-xs); }
/* Numbered discs with a title and one line under it. The disc, the title and
   the line are three separate children of the <li>, so the columns are named:
   without the areas the text would fall into the 2.25rem disc column and break
   one word per line. */
.ve-steps { display: grid; gap: 1.1rem; counter-reset: step; }
.ve-steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-areas: "num title" "num text";
  column-gap: .85rem;
  row-gap: .2rem;
  align-items: start;
  counter-increment: step;
}
.ve-steps li::before {
  grid-area: num;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ve-primary-dark, #17113f), var(--ve-primary, #4c1d95));
  color: #fff;
  font-weight: 800;
  font-size: var(--ve-text-sm);
  box-shadow: 0 6px 14px rgb(76 29 149 / .22);
}
.ve-steps strong { grid-area: title; display: block; color: var(--ve-text-strong); font-size: var(--ve-text-sm); font-weight: 700; line-height: 1.35; }
.ve-steps span { grid-area: text; display: block; color: var(--ve-text-muted); font-size: var(--ve-text-xs); line-height: 1.6; text-wrap: pretty; }
.ve-contact-lines { display: grid; gap: .65rem; }
.ve-contact-lines a, .ve-contact-lines div { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--ve-text-sm); color: var(--ve-text); line-height: 1.5; }
.ve-contact-lines svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--ve-primary); margin-top: .1rem; }
.ve-contact-lines a:hover { color: var(--ve-primary); }
@media (max-width: 64rem) { .ve-page-grid, .ve-page-grid--wide-side, .ve-page-grid--form { grid-template-columns: 1fr; } .ve-sidebar { position: static; } }

/* ---- Forms ---------------------------------------------------------------- */
.ve-form-card { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--ve-shadow-sm); }
.ve-form-card__head { display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.ve-form-card__title { font-size: var(--ve-text-2xl); }
.ve-form-card__lede { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-form { display: grid; gap: 1.25rem; width: 100%; }
.ve-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.ve-form legend { font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); padding: 0; margin-bottom: .75rem; display: flex; align-items: center; gap: .6rem; }
.ve-form legend::after { content: ""; flex: 1; height: 1px; background: var(--ve-border-subtle); }
.ve-form-grid > .ve-field, .ve-form-grid > .ve-checkbox { min-width: 0; }
.ve-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 48rem) { .ve-form-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-form-grid--3 { grid-template-columns: 1fr; } }
.ve-input, .ve-select, .ve-textarea { width: 100%; }
.ve-input[aria-invalid="true"], .ve-select[aria-invalid="true"], .ve-textarea[aria-invalid="true"] { border-color: var(--ve-error); }
.ve-field__optional { color: var(--ve-text-muted); font-weight: 500; font-size: var(--ve-text-xs); margin-left: .3rem; }
.ve-form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ve-form__summary { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: var(--ve-radius-md); padding: .9rem 1.1rem; display: grid; gap: .5rem; }
.ve-form__summary-title { font-weight: 700; font-size: var(--ve-text-sm); }
.ve-form__summary ul { padding-left: 1.2rem; font-size: var(--ve-text-sm); display: grid; gap: .25rem; list-style: disc; }
.ve-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .5rem; }
.ve-form__actions-note { color: var(--ve-text-muted); font-size: var(--ve-text-xs); max-width: 28rem; }
.ve-form__consent { padding: .9rem 1rem; border-radius: var(--ve-radius-md); background: var(--ve-surface-alt); }
.ve-radios { display: flex; flex-wrap: wrap; gap: .6rem; }
.ve-radio { position: relative; }
.ve-radio input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ve-radio span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; border: 1.5px solid var(--ve-border); font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-text); background: #fff; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast), color var(--ve-dur-fast); }
.ve-radio span svg { width: 1rem; height: 1rem; }
.ve-radio input:checked + span { border-color: var(--ve-primary); background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-radio input:focus-visible + span { box-shadow: 0 0 0 4px var(--ve-purple-100); }
.ve-btn[disabled], .ve-btn.is-loading { opacity: .7; cursor: progress; transform: none !important; box-shadow: none !important; }
.ve-btn.is-loading::before { content: ""; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / .45); border-top-color: #fff; animation: ve-spin .7s linear infinite; }
.ve-btn--outline.is-loading::before { border-color: var(--ve-purple-100); border-top-color: var(--ve-primary); }
@keyframes ve-spin { to { transform: rotate(360deg); } }

/* File field: real input stays; the box is the label */
.ve-file { display: grid; gap: .5rem; }
.ve-file__drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1.5px dashed var(--ve-border); border-radius: var(--ve-radius-md); background: var(--ve-surface-alt); cursor: pointer; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast); }
.ve-file__drop:hover, .ve-file__drop.is-dragover { border-color: var(--ve-primary); background: var(--ve-purple-050); }
.ve-file__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ve-file__icon { width: 2.4rem; height: 2.4rem; border-radius: var(--ve-radius-md); background: #fff; display: grid; place-items: center; color: var(--ve-primary); border: 1px solid var(--ve-border-subtle); }
.ve-file__icon svg { width: 1.2rem; height: 1.2rem; }
.ve-file__text { display: grid; gap: .1rem; min-width: 0; }
.ve-file__text strong { font-size: var(--ve-text-sm); color: var(--ve-text-strong); }
.ve-file__text span { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
.ve-file__summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-radius: var(--ve-radius-md); background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; font-size: var(--ve-text-sm); }
.ve-file__summary.is-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ve-file__summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-file__clear { flex: none; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Success panel (in-place, replaces a form) */
.ve-done { display: grid; gap: .9rem; justify-items: start; padding: 1.5rem; border-radius: var(--ve-radius-lg); background: #ecfdf3; border: 1px solid #bbf7d0; color: #14532d; }
.ve-done__mark { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; }
.ve-done__mark svg { width: 1.3rem; height: 1.3rem; }
.ve-done__title { font-size: var(--ve-text-lg); font-weight: 700; }
.ve-done p { font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-done .ve-btn { margin-top: .25rem; }

/* Success page */
.ve-success { max-width: 46rem; margin-inline: auto; text-align: center; display: grid; gap: 1.25rem; justify-items: center; }
.ve-success__mark { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ve-pastel-mint); color: var(--ve-teal-500); display: grid; place-items: center; }
.ve-success__mark svg { width: 2.1rem; height: 2.1rem; }
.ve-success__ref { display: inline-flex; flex-direction: column; gap: .2rem; padding: .9rem 1.5rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-brand); border: 1px solid var(--ve-purple-100); }
.ve-success__ref small { color: var(--ve-text-muted); font-size: var(--ve-text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.ve-success__ref strong { font-size: var(--ve-text-2xl); color: var(--ve-primary-dark); letter-spacing: .04em; }
.ve-success__text { color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); max-width: 36rem; }
.ve-success__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.ve-success__next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; text-align: left; margin-top: 1rem; }
.ve-success__next .ve-card__body { padding: 1rem 1.1rem; }
@media (max-width: 40rem) { .ve-success__next { grid-template-columns: 1fr; } .ve-success__actions { flex-direction: column; align-items: stretch; width: 100%; } .ve-success__actions .ve-btn { width: 100%; } }

/* Enquiry block (course pages / contact) */
.ve-enquiry { display: grid; gap: 1.25rem; }
.ve-enquiry__subject { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: baseline; font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-enquiry__subject strong { color: var(--ve-text-strong); }
.ve-enquiry__alt { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--ve-text-sm); color: #15803d; }
.ve-enquiry__alt svg { width: 1.1rem; height: 1.1rem; }

/* ---- Contact page --------------------------------------------------------- */
.ve-contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ve-contact-card { display: grid; gap: .5rem; padding: 1.25rem; border-radius: var(--ve-radius-xl); border: 1px solid var(--ve-border-subtle); background: #fff; box-shadow: var(--ve-shadow-xs); transition: transform var(--ve-dur-base) var(--ve-ease), box-shadow var(--ve-dur-base); min-width: 0; }
.ve-contact-card:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); }
.ve-contact-card__icon { width: 2.6rem; height: 2.6rem; border-radius: var(--ve-radius-md); display: grid; place-items: center; background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-contact-card__icon svg { width: 1.25rem; height: 1.25rem; }
.ve-contact-card__label { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ve-text-muted); }
.ve-contact-card__value { font-weight: 700; color: var(--ve-text-strong); overflow-wrap: anywhere; }
.ve-contact-card__value:hover { color: var(--ve-primary); }
.ve-contact-card__note { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }
@media (max-width: 64rem) { .ve-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-contact-cards { grid-template-columns: 1fr; } }
.ve-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.ve-office { padding: 1.15rem 1.25rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-alt); display: grid; gap: .35rem; }
.ve-office__name { font-weight: 700; color: var(--ve-text-strong); }
.ve-office address { font-style: normal; color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: 1.6; }
.ve-map { border-radius: var(--ve-radius-xl); overflow: hidden; border: 1px solid var(--ve-border-subtle); box-shadow: var(--ve-shadow-sm); aspect-ratio: 16 / 7; background: var(--ve-ink-100); }
.ve-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 40rem) { .ve-map { aspect-ratio: 4 / 3; } }
.ve-socials { display: flex; flex-wrap: wrap; gap: .6rem; }
.ve-socials a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-sm); font-weight: 600; }
.ve-socials a svg { width: 1rem; height: 1rem; }
.ve-socials a:hover { border-color: var(--ve-primary); color: var(--ve-primary); }

/* ---- Filter chips ---------------------------------------------------------- */

.ve-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-text); background: #fff; transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast), color var(--ve-dur-fast); }
.ve-chip:hover { border-color: var(--ve-primary); color: var(--ve-primary); }
.ve-chip.is-active { background: var(--ve-primary); border-color: var(--ve-primary); color: #fff; }
.ve-chip__count { font-weight: 500; opacity: .75; }

/* The share row is always a separator between the page and "pass this on",
   so it carries its own rule and breathing room wherever it is used. Without
   this it sat flush against the last card and looked stuck to it. */
.ve-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--ve-border-subtle, #e8e5f2);
}
.ve-share__label { font-size: var(--ve-text-sm); font-weight: 700; color: var(--ve-text-strong); margin-right: .25rem; }
.ve-share a, .ve-share button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--ve-border); font-size: var(--ve-text-xs); font-weight: 700; background: #fff; color: var(--ve-text); }
.ve-share a svg, .ve-share button svg { width: .95rem; height: .95rem; }
.ve-share a:hover, .ve-share button:hover { border-color: var(--ve-primary); color: var(--ve-primary); }
.ve-inline-cta { border-radius: var(--ve-radius-xl); background: linear-gradient(120deg, var(--ve-indigo-900), var(--ve-purple-600)); color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ve-inline-cta h3 { color: #fff; font-size: var(--ve-text-xl); }
.ve-inline-cta p { color: var(--ve-text-inverse-muted); font-size: var(--ve-text-sm); margin-top: .35rem; }
.ve-inline-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 40rem) { .ve-inline-cta { grid-template-columns: 1fr; } .ve-inline-cta__actions { flex-direction: column; } .ve-inline-cta__actions .ve-btn { width: 100%; }  }

/* No picture on a record? The row simply closes the column up. */

.ve-fact { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--ve-radius-lg); background: var(--ve-surface-alt); }
.ve-fact small { font-size: var(--ve-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ve-text-muted); }
.ve-fact strong { color: var(--ve-text-strong); }

/* ---- Success stories ------------------------------------------------------ */
.ve-stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ve-story-card { display: grid; gap: .9rem; padding: 1.5rem; border-radius: var(--ve-radius-xl); border: 1px solid var(--ve-border-subtle); background: #fff; box-shadow: var(--ve-shadow-xs); position: relative; }
.ve-story-card--featured { grid-column: span 2; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
.ve-story-card__head { display: flex; align-items: center; gap: .9rem; }
.ve-story-card__photo { width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--ve-purple-050); display: grid; place-items: center; color: var(--ve-primary); font-weight: 800; font-size: var(--ve-text-lg); }
.ve-story-card__name { font-weight: 700; color: var(--ve-text-strong); }

/* The whole card opens the story. The anchor is on the name (so it is
   announced with a sensible label) and its ::after covers the card, which
   makes the picture and the quote clickable without nesting anchors — the
   "watch the story" and "view this course" links inside still work because
   they sit above it. */
.ve-story-card--linked { cursor: pointer; transition: transform var(--ve-dur-fast) var(--ve-ease), box-shadow var(--ve-dur-fast) var(--ve-ease), border-color var(--ve-dur-fast); }
.ve-story-card--linked:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-md); border-color: var(--ve-border); }
.ve-story-card__link { color: inherit; text-decoration: none; }
.ve-story-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ve-radius-xl); }
.ve-story-card--linked:hover .ve-story-card__link { color: var(--ve-primary); }
.ve-story-card--linked:focus-within { outline: 2px solid var(--ve-primary); outline-offset: 3px; }
.ve-story-card__link:focus-visible { outline: none; }
.ve-story-card .ve-btn, .ve-story-card__video, .ve-story-card iframe { position: relative; z-index: 1; }

/* The story dialog's own styles live in modals.css — the only stylesheet the
   homepage may safely load alongside its own. */
.ve-story-card__meta { color: var(--ve-text-muted); font-size: var(--ve-text-xs); }
.ve-story-card__quote { color: var(--ve-text); line-height: var(--ve-leading-relaxed); font-size: var(--ve-text-sm); }
.ve-story-card__quote::before { content: "“"; color: var(--ve-accent); font-size: 2rem; line-height: 0; margin-right: .1rem; vertical-align: -.35em; font-family: Georgia, serif; }
.ve-story-card__video { aspect-ratio: 16 / 9; border-radius: var(--ve-radius-lg); overflow: hidden; background: var(--ve-ink-900); }
.ve-story-card__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.ve-stars { display: inline-flex; gap: .15rem; color: var(--ve-accent); }
.ve-stars svg { width: .95rem; height: .95rem; fill: currentColor; stroke: currentColor; }
.ve-stars svg.is-empty { fill: none; color: var(--ve-ink-200); }
@media (max-width: 64rem) { .ve-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ve-story-card--featured { grid-column: span 2; } }
@media (max-width: 40rem) { .ve-stories-grid { grid-template-columns: 1fr; } .ve-story-card--featured { grid-column: auto; grid-template-columns: 1fr; } }
/* An odd last card in a multi-column grid spans the remainder — never an empty cell. */
@media (min-width: 64.0625rem) { .ve-stories-grid > .ve-story-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; } .ve-stories-grid > .ve-story-card:last-child:nth-child(3n + 2) { grid-column: span 2; } }
@media (min-width: 40.0625rem) and (max-width: 64rem) { .ve-stories-grid > .ve-story-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---- FAQs ----------------------------------------------------------------- */
.ve-faq-group + .ve-faq-group { margin-top: 2.5rem; }
.ve-faq-group__title { font-size: var(--ve-text-xl); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.ve-faq-group__title::after { content: ""; flex: 1; height: 1px; background: var(--ve-border-subtle); }
.ve-faq__a .ve-prose { font-size: var(--ve-text-sm); }
.ve-faq-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

/* ---- Small screens: buttons stacked full width in form actions ------------ */
@media (max-width: 40rem) {
  .ve-form__actions { flex-direction: column; align-items: stretch; }
  .ve-form__actions .ve-btn { width: 100%; }

  .ve-radios { flex-direction: column; }
  .ve-radio span { width: 100%; justify-content: center; }
}

/* Utility */
.ve-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ve-pagination svg { width: 1rem; height: 1rem; }

/* The thank-you as a page rather than a panel inside a form. */
.ve-done--page { justify-items: center; text-align: center; max-width: 44rem; margin-inline: auto; padding: clamp(1.75rem, 4vw, 2.75rem); }
.ve-done--page .ve-modal__reference { color: #14532d; letter-spacing: .08em; }
.ve-done__meta { font-size: var(--ve-text-sm); }
.ve-done__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; }
@media (max-width: 40rem) {
  .ve-done__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .ve-done__actions .ve-btn { width: 100%; }
}

/* The share row on a set of results sits under the list, separated from it,
   rather than looking like part of the last card. */
/* Nothing extra: the base rule above already spaces and rules it off. */

/* On a phone the buttons wrap into an even grid instead of a ragged line. */
@media (max-width: 30rem) {
  .ve-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .ve-share__label { grid-column: 1 / -1; margin-right: 0; }
  .ve-share a, .ve-share button { justify-content: center; }
}