/* =========================================================================
   CUSTOMER SATISFACTION SURVEY  —  /:user_id/:token/survey/:tax_year
   View: client/views/survey/survey.html
   Everything is scoped under #survey_wrapper so this file cannot leak into the
   dashboard. Tokens live on the wrapper (not :root) for the same reason.

   This page arrives by email and is opened on a phone as often as a desktop —
   keep every addition responsive.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

#survey_wrapper {
  --sv-blue: #00b4ff;
  --sv-blue-deep: #2b9cd3;
  --sv-green: #36bea6;
  --sv-gold: #f5a623;
  --sv-red: #e8533a;
  --sv-ink: #1f2a37;
  --sv-ink-2: #5b6b7f;
  --sv-ink-3: #8a99ad;
  --sv-line: #e7ecf3;
  --sv-surface: #ffffff;
  --sv-ground: #f4f7fb;

  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--sv-ground);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--sv-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- shared shell ------------------------------------------------ */
#survey_wrapper .sv-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 18px 56px;
}

#survey_wrapper .sv-center {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  gap: 14px;
}

#survey_wrapper .sv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* Mark + wordmark read as ONE lockup, so they sit on a tight gap with no
   divider between them. company.logo_url is the mark only (logo-01.svg); the
   name beside it is text, not logo-text-01.svg, so the tagline can stack under
   it and both scale with the type. */
#survey_wrapper .sv-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

#survey_wrapper .sv-logo {
  height: 62px;
  width: auto;
  max-width: 300px;
  flex: 0 0 auto;
}

#survey_wrapper .sv-wordmark {
  min-width: 0;
}

#survey_wrapper .sv-wordmark-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sv-ink);
}

#survey_wrapper .sv-wordmark-tag {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--sv-blue-deep);
}

#survey_wrapper .sv-header-year {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sv-ink-3);
  white-space: nowrap;
}

#survey_wrapper .sv-card {
  background: var(--sv-surface);
  border: 1px solid var(--sv-line);
  border-radius: 16px;
  padding: 30px 30px 26px;
  box-shadow: 0 10px 30px rgba(31, 42, 55, 0.06);
}

#survey_wrapper .sv-card--narrow {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

#survey_wrapper .sv-title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--sv-ink);
}

#survey_wrapper .sv-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sv-ink-2);
  margin: 0 0 12px;
}

/* Title block left, running-average badge pinned top-right. A flex row rather
   than an absolutely positioned badge, so a long greeting can never run
   underneath it. */
#survey_wrapper .sv-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

#survey_wrapper .sv-intro-text {
  min-width: 0;
}

#survey_wrapper .sv-intro .sv-body:last-child {
  margin-bottom: 0;
}

#survey_wrapper .sv-avg {
  flex: 0 0 auto;
  text-align: center;
  padding: 10px 14px;
  min-width: 88px;
  border-radius: 12px;
  background: var(--sv-ground);
  border: 1px solid var(--sv-line);
}

#survey_wrapper .sv-avg-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--sv-ink);
  font-variant-numeric: tabular-nums;
}

#survey_wrapper .sv-avg-value i {
  font-size: 17px;
  color: var(--sv-gold);
}

#survey_wrapper .sv-avg.is-empty .sv-avg-value {
  color: var(--sv-ink-3);
}

#survey_wrapper .sv-avg.is-empty .sv-avg-value i {
  color: #d6dee8;
}

#survey_wrapper .sv-avg-label {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sv-ink-3);
}

/* ---------- loading ----------------------------------------------------- */
#survey_wrapper .sv-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--sv-line);
  border-top-color: var(--sv-blue);
  animation: sv-spin 0.8s linear infinite;
}

@keyframes sv-spin {
  to { transform: rotate(360deg); }
}

#survey_wrapper .sv-loading-text {
  font-size: 14px;
  color: var(--sv-ink-3);
}

/* ---------- icon badges ------------------------------------------------- */
#survey_wrapper .sv-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 23px;
  color: #fff;
}

#survey_wrapper .sv-icon-badge--ok {
  background: linear-gradient(135deg, var(--sv-green), #2cdd9b);
  box-shadow: 0 6px 18px rgba(54, 190, 166, 0.35);
}

#survey_wrapper .sv-icon-badge--warn {
  background: linear-gradient(135deg, #f0876a, var(--sv-red));
  box-shadow: 0 6px 18px rgba(232, 83, 58, 0.3);
}

/* ---------- progress ---------------------------------------------------- */
#survey_wrapper .sv-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--sv-line);
  overflow: hidden;
}

#survey_wrapper .sv-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sv-blue-deep), var(--sv-blue));
  transition: width 0.3s ease-out;
}

#survey_wrapper .sv-progress-text {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-ink-3);
}

/* ---------- questions --------------------------------------------------- */
#survey_wrapper .sv-questions {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

#survey_wrapper .sv-question {
  padding: 20px 0;
  border-bottom: 1px solid var(--sv-line);
}

#survey_wrapper .sv-question:last-child {
  border-bottom: 0;
}

#survey_wrapper .sv-question-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

#survey_wrapper .sv-question-num {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--sv-ink-3);
  background: var(--sv-ground);
  border: 1px solid var(--sv-line);
  transition: all 0.2s ease-out;
}

#survey_wrapper .sv-question.is-answered .sv-question-num {
  color: #fff;
  background: linear-gradient(135deg, var(--sv-blue-deep), var(--sv-blue));
  border-color: transparent;
}

#survey_wrapper .sv-question-text {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sv-ink);
}

/* ---------- star rating (directive: <star-rating>) ---------------------- */
#survey_wrapper .star-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 37px;
}

#survey_wrapper .star-rating__anchor {
  font-size: 11px;
  font-weight: 600;
  color: var(--sv-ink-3);
  white-space: nowrap;
  flex: 0 1 auto;
}

#survey_wrapper .star-rating__stars {
  display: flex;
  gap: 4px;
  border-radius: 10px;
  padding: 2px 4px;
  outline: none;
}

/* Keyboard users get a visible ring; mouse users do not. */
#survey_wrapper .star-rating__stars:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.35);
}

/* ---- half-star mechanics ----------------------------------------------
   One star = an outline glyph (.sr-base) with a solid glyph (.sr-fill) laid
   exactly on top and clipped by width. 0% / 50% / 100% gives empty / half /
   full. Both glyphs are the same icon at the same size, so clipping the
   overlay at half the box width splits the star down its true centre.
   Used by BOTH the interactive control and the read-only recap. ---------- */
#survey_wrapper .sv-star {
  position: relative;
  display: inline-block;
  line-height: 1;
  color: #d6dee8;
}

#survey_wrapper .sv-star .sr-base {
  display: block;
}

#survey_wrapper .sv-star .sr-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--sv-gold);
  pointer-events: none;
}

/* Invisible half-width targets. These are what make .5 selectable, and they
   sit above the glyphs so the icons never swallow the click. */
#survey_wrapper .sr-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  cursor: pointer;
}

#survey_wrapper .sr-hit--left { left: 0; }
#survey_wrapper .sr-hit--right { right: 0; }

#survey_wrapper .star-rating__star {
  font-size: 27px;
  transition: transform 0.12s ease-out;
}

#survey_wrapper .star-rating__star:hover {
  transform: scale(1.08);
}

#survey_wrapper .star-rating__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sv-gold);
  min-width: 26px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

/* ---------- comments ---------------------------------------------------- */
#survey_wrapper .sv-comments {
  margin-top: 24px;
}

#survey_wrapper .sv-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sv-ink);
  margin-bottom: 8px;
}

#survey_wrapper .sv-optional {
  font-weight: 500;
  color: var(--sv-ink-3);
}

#survey_wrapper .sv-textarea {
  width: 100%;
  border: 1px solid var(--sv-line);
  border-radius: 11px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sv-ink);
  background: var(--sv-ground);
  resize: vertical;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

#survey_wrapper .sv-textarea:focus {
  outline: none;
  background: var(--sv-surface);
  border-color: var(--sv-blue);
  box-shadow: 0 0 0 3px rgba(0, 180, 255, 0.15);
}

#survey_wrapper .sv-textarea::placeholder {
  color: var(--sv-ink-3);
}

/* ---------- actions ----------------------------------------------------- */
#survey_wrapper .sv-actions {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--sv-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#survey_wrapper .sv-save-state {
  font-size: 12px;
  font-weight: 600;
  color: var(--sv-ink-3);
  min-height: 16px;
}

#survey_wrapper .sv-save-state .is-ok { color: var(--sv-green); }
#survey_wrapper .sv-save-state .is-err { color: var(--sv-red); }

#survey_wrapper .sv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  padding: 13px 30px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease-out, box-shadow 0.15s ease-out, opacity 0.15s ease-out;
}

#survey_wrapper .sv-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sv-blue-deep), var(--sv-blue));
  box-shadow: 0 6px 16px rgba(0, 180, 255, 0.3);
}

#survey_wrapper .sv-btn--primary:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0, 180, 255, 0.38);
  color: #fff;
}

#survey_wrapper .sv-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

#survey_wrapper .sv-btn--ghost {
  color: var(--sv-ink-2);
  background: var(--sv-ground);
  border: 1px solid var(--sv-line);
}

#survey_wrapper .sv-btn--ghost:hover {
  background: #eaf0f7;
  color: var(--sv-ink);
}

#survey_wrapper .sv-hint {
  font-size: 12.5px;
  color: var(--sv-ink-3);
}

/* ---------- thank-you recap --------------------------------------------- */
#survey_wrapper .sv-recap {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--sv-line);
  text-align: left;
}

#survey_wrapper .sv-recap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
}

#survey_wrapper .sv-recap-text {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--sv-ink-2);
}

#survey_wrapper .sv-recap-stars {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

#survey_wrapper .sv-recap-star {
  font-size: 15px;
}

#survey_wrapper .sv-recap-value {
  margin-left: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sv-gold);
  font-variant-numeric: tabular-nums;
}

/* Summary row closing the recap list. Shows the number only — no stars: an
   average like 4.3 would have to round down to the nearest half to draw, and a
   4.3 rendered as four stars looks like a rounding bug. */
#survey_wrapper .sv-recap-row--avg {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid var(--sv-line);
}

#survey_wrapper .sv-recap-row--avg .sv-recap-text {
  font-weight: 700;
  color: var(--sv-ink);
}

#survey_wrapper .sv-recap-avg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--sv-ink);
  font-variant-numeric: tabular-nums;
}

#survey_wrapper .sv-recap-avg i {
  font-size: 14px;
  color: var(--sv-gold);
}

#survey_wrapper .sv-recap-comments {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
  text-align: left;
}

#survey_wrapper .sv-quote + .sv-quote {
  margin-top: 8px;
}

#survey_wrapper .sv-quote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--sv-blue);
  border-radius: 0 9px 9px 0;
  background: var(--sv-ground);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sv-ink-2);
  white-space: pre-wrap;
}

#survey_wrapper .sv-done-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- footer ------------------------------------------------------ */
#survey_wrapper .sv-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--sv-ink-3);
}

#survey_wrapper .sv-footer a {
  color: var(--sv-ink-3);
  text-decoration: none;
}

#survey_wrapper .sv-footer a:hover {
  color: var(--sv-blue-deep);
}

#survey_wrapper .sv-footer-sep {
  margin: 0 5px;
}

/* =========================================================================
   POST-SUBMIT FOLLOW-UP MODAL
   NOT scoped under #survey_wrapper — and it must not be. SweetAlert2 appends
   its popup to <body>, outside the wrapper, so a scoped rule would never
   match. Names are prefixed sv-swal- to keep them out of everyone else's way.
   ========================================================================= */
.sv-swal {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Colour note: swal_theme.css drives dialogs from --sw-ink-2 (#5b6b7f) and
   --sw-ink-3 (#8a99ad). #8a99ad in particular is too light to read comfortably
   at these sizes, so every muted tone in THIS modal is shifted one step darker.
   Scoped to .sv-swal on purpose — the app's other dialogs keep the theme. */
.sv-swal .swal2-html-container {
  color: #2f3a49 !important;
}

.sv-swal .sv-swal-lead {
  font-size: 16px;
  line-height: 1.5;
  color: #2f3a49;
  margin: 0 0 16px;
}

.sv-swal .sv-swal-review {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #2b9cd3, #00b4ff);
  box-shadow: 0 6px 16px rgba(0, 180, 255, 0.3);
  transition: transform 0.12s ease-out, box-shadow 0.15s ease-out;
}

.sv-swal .sv-swal-review:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0, 180, 255, 0.38);
}

.sv-swal .sv-swal-note {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: #55647a;
}

/* Sits directly above "Your ratings are final...", with the textarea below
   both. Roomy above to separate it from the review button, tight below so the
   two lines read as one block. */
.sv-swal .sv-swal-ask {
  margin: 26px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #1f2a37;
}

.sv-swal .sv-swal-optional {
  font-weight: 500;
  color: #55647a;
}

.sv-swal .sv-swal-final {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  /* Last thing read before an irreversible click — should not look like fine
     print, so it sits well above the theme's muted tones. */
  color: #3d4a5c;
}

/* Theme places this at --sw-ink-3 (#8a99ad), which is near-invisible against
   the input background. Still lighter than typed text, just legible. */
.sv-swal .swal2-textarea::placeholder {
  color: #6f7e91 !important;
}

/* "Back" — the theme's cancel label is --sw-ink-2; lift it to match. */
.sv-swal .swal2-styled.swal2-cancel {
  color: #3d4a5c !important;
}

/* Never let the wide variant outgrow the viewport. swal_theme.css already
   handles <=480px; this covers the gap between that and 46em. max-width beats
   the inline width Swal writes from its `width` option, so no !important. */
.sv-swal--wide {
  max-width: calc(100vw - 32px);
}

/* Full-bleed textarea.
   The thing that makes this necessary: swal_theme.css sets
   `margin: 16px auto 6px !important` on .swal2-textarea. The Swal popup is a
   CSS grid, and a grid item with AUTO side margins does not stretch — the auto
   margins soak up the free space and the textarea collapses to its intrinsic
   <textarea cols> width (~20 characters). Zeroing the side margins is what
   actually fixes it; the explicit width and justify-self are belt and braces.
   swal_theme.css uses !important, so these must too — the two-class selector
   then wins on specificity (0,2,0 beats 0,1,0). */
.sv-swal .swal2-textarea {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 14px !important;
  margin-right: 0 !important;
  margin-bottom: 4px !important;
  margin-left: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  min-height: 104px;
}

/* Swal's own default indents the html block by 1.6em a side. Zero it so the
   prompt text, review button and textarea all line up on the same edges. */
.sv-swal .swal2-html-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.sv-swal--wide .swal2-textarea {
  min-height: 128px;
}

/* ---------- mobile ------------------------------------------------------ */
@media (max-width: 620px) {
  #survey_wrapper .sv-page { padding: 20px 13px 44px; }
  #survey_wrapper .sv-card { padding: 22px 18px 20px; border-radius: 14px; }
  #survey_wrapper .sv-title { font-size: 21px; }

  /* Still bigger than the original 38px/12px, but the full-size pair overflows
     a ~360px screen once the year text is uppercase with letter-spacing. */
  #survey_wrapper .sv-header { gap: 10px; }
  #survey_wrapper .sv-brand { gap: 9px; }
  #survey_wrapper .sv-logo { height: 46px; max-width: 210px; }
  #survey_wrapper .sv-wordmark-name { font-size: 18px; }
  #survey_wrapper .sv-wordmark-tag { margin-top: 2px; font-size: 11.5px; }
  #survey_wrapper .sv-header-year { font-size: 13px; letter-spacing: 0.05em; }

  /* The end anchors ("Very dissatisfied" / "Very satisfied") stop fitting
     beside the stars long before the stars themselves do, so they move below
     and split to the two edges. */
  #survey_wrapper .star-rating {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 0;
    gap: 4px;
  }
  #survey_wrapper .star-rating__stars {
    order: -1;
    width: 100%;
    justify-content: space-between;
    gap: 0;
    padding: 2px 0;
  }
  /* Bigger than the desktop 27px on purpose: a half-star hit zone is only half
     a star wide, so at 31px each target was ~15px across. 36px puts them at
     ~18px, which is the practical floor for a reliable thumb tap. */
  #survey_wrapper .star-rating__star { font-size: 36px; }
  #survey_wrapper .star-rating__star:hover { transform: none; }
  #survey_wrapper .star-rating__value { font-size: 14px; }

  #survey_wrapper .sv-btn { width: 100%; }
  #survey_wrapper .sv-recap-row { flex-direction: column; align-items: flex-start; gap: 5px; }

  /* Keep the average badge beside the title rather than stacking it — it is a
     running total and wants to stay visible while answering. */
  #survey_wrapper .sv-intro { gap: 12px; }
  #survey_wrapper .sv-avg { padding: 8px 11px; min-width: 74px; }
  #survey_wrapper .sv-avg-value { font-size: 19px; }
  #survey_wrapper .sv-avg-value i { font-size: 14px; }
}

/* Below ~430px the brand lockup and the year stop fitting on one line, so the
   year drops beneath it rather than squeezing the company name into a wrap. */
@media (max-width: 430px) {
  #survey_wrapper .sv-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  #survey_wrapper .sv-header-year {
    width: 100%;
  }
}