/* Qivant Free Check: dark brand theme, 360 px first. Teal appears only in the logo file. */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url('../fonts/Archivo-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); }

:root {
  --ground: #071411;
  --ink-light: #EAF6F3;
  --ink-dim: #A9C4BE;
  --ink-faint: #5E7A73; /* decorative rules only; too faint for text on Ground */
  /* Tamil letters are not in the Plex or Archivo subsets: they come from the phone's own Tamil font (Noto Sans Tamil
     on Android, Tamil Sangam MN on iPhone, Nirmala UI on Windows). No Tamil web font is loaded (12 October 2026). */
  --tamil: 'Noto Sans Tamil', 'Tamil Sangam MN', 'Nirmala UI', 'Latha';
  --sans: 'IBM Plex Sans', var(--tamil), 'Segoe UI', Arial, sans-serif;
  --display: 'Archivo', var(--tamil), Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-light);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17 px at the default size; rem units follow the phone's text setting */
  line-height: 1.5;
}

.top, .screen {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink-faint);
}

.logo { display: block; flex: none; height: 2.5rem; width: auto; } /* 40 px (01 Nov 2026); flex: none keeps the proportions fixed */

.label, .progress {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem; /* no text below 16 px */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
  text-wrap: balance; /* avoid a stray last word on a second line */
}

.screen { padding-top: 0.75rem; padding-bottom: 2rem; }

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  overflow-wrap: normal; /* lines break only between whole words (12 Oct 2026); see .breakable */
  word-break: normal;
}
h1:focus { outline: none; }

p { margin: 0 0 0.75rem; }
.dim { color: var(--ink-dim); }
.notice { border-left: 3px solid var(--ink-dim); padding-left: 0.75rem; }

.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin: 0.75rem 0; padding: 0; list-style: none; } /* minmax: one long word never widens the column */

button, input, select, textarea {
  font: inherit; /* form controls do not inherit the page font by default */
  color: inherit;
}
button {
  cursor: pointer;
}

.btn {
  display: block;
  width: 100%;
  min-height: 3rem; /* 48 px; grows with large text */
  padding: 0.5rem 1rem;
  text-align: left;
  font-weight: 600;
  background: transparent;
  border: 2px solid var(--ink-dim);
  border-radius: 0.5rem;
  overflow-wrap: normal;
  word-break: normal;
}
.btn[aria-pressed='true'] {
  background: var(--ink-light);
  border-color: var(--ink-light);
  color: var(--ground);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Action buttons (Start, Continue, Resume): pill shape with an arrow, so they never look like a chosen option. */
.btn.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  text-align: center;
  border-radius: 999px;
  background: var(--ink-light);
  border-color: var(--ink-light);
  color: var(--ground);
}
.btn.primary::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* Tick boxes (P5): an empty box, or a box with a check mark when ticked. */
.tick { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.tick::before {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-radius: 0.25rem;
}
.tick[aria-pressed='true']::after {
  content: '';
  position: absolute;
  left: calc(2px + 1rem + 0.45rem);
  top: 50%;
  width: 0.4rem;
  height: 0.75rem;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-62%) rotate(45deg);
}

.link {
  background: none;
  border: none;
  padding: 0.75rem 0;
  min-height: 3rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:focus-visible { outline: 3px solid var(--ink-light); outline-offset: 3px; }

/* English | தமிழ் switch in the header. Shown only once Tamil is approved, or in the review preview. */
.lang-slot { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.lang { display: flex; align-items: center; gap: 0.5rem; }
.lang .sep { color: var(--ink-dim); }
.lang-btn { padding: 0.5rem 0.25rem; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; }
.lang-btn[aria-pressed='true'] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.lang-error { flex-basis: 100%; text-align: right; }
.top.has-lang .progress { flex-basis: 100%; order: 3; } /* with the switch, the progress line gets its own row */
.lang-slot[hidden] { display: none; }

/* Tamil: letter spacing breaks joined Tamil letters, and the vowel signs need taller lines. */
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3, :lang(ta) .label, :lang(ta) .progress, :lang(ta) legend { letter-spacing: normal; }
:lang(ta) body { line-height: 1.6; }
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3 { line-height: 1.4; }
/* Tamil questions hold very long words (e.g. "நகலெடுக்கப்படுவதில்லையா?"): on narrow screens the heading follows the
   screen width so such a word fits whole on one line; it never goes below 1.1rem, so large text still grows. */
:lang(ta) h1 { font-size: clamp(1.0625rem, 4.8vw, 1.5rem); } /* 17.3 px at 360 px wide, 24 px from 500 px */
/* Words never break in the middle, in any language. The one fallback: an email address or web address (wrapped in
   .breakable by view.js) may break anywhere, so a long one cannot push the page sideways. */
.breakable { overflow-wrap: anywhere; }
/* Last resort, Tamil only (Darshini, 12 Oct 2026): a single word wider than the whole line (only seen with very large
   text on a narrow phone) may break so nothing goes off screen. break-word never breaks a word that fits on a line. */
:lang(ta) body, :lang(ta) h1, :lang(ta) .btn { overflow-wrap: break-word; }
/* The same last resort for text inside flex boxes (the pill button, tick options, the two boxes): "anywhere" breaks
   lines exactly like break-word (only a word wider than its whole line), but also lets the box shrink to the screen. */
:lang(ta) .btn.primary, :lang(ta) .tick, :lang(ta) .check span { overflow-wrap: anywhere; }
.footer-link a { max-width: 100%; }
.choices-box { min-width: 0; } /* a fieldset is as wide as its longest word by default */
/* Tamil band names are long: 2 x 2 boxes, on narrow and wide screens alike; one per row only when the text is so
   large that two whole words no longer fit side by side. English keeps its layout. */
:lang(ta) .bar { grid-template-columns: repeat(auto-fit, minmax(max(45%, 8.5em), 1fr)); }
:lang(ta) .seg { text-align: center; padding: 0.25rem 0.375rem; font-size: 1rem; } /* "அமைந்துள்ளது" fits a half-width box */

/* Result screen */
h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h2.band { font-size: 1.5rem; margin-top: 0.75rem; }
.screen > .label { margin-bottom: 0.25rem; }

/* Band bar: the four band names. The person's band is a solid fill, the others outlined.
   At phone width the names are stacked (four names do not fit side by side at 16 px); wider screens show one row. */
.bar { list-style: none; display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 0.25rem; margin: 0.5rem 0 0; padding: 0; } /* 1fr rows: every box as tall as the tallest */
.seg { display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.25rem 0.75rem; border: 2px solid var(--ink-dim); border-radius: 0.25rem; color: var(--ink-dim); } /* name centred both ways (12 Oct 2026) */
.seg.current { background: var(--ink-light); border-color: var(--ink-light); color: var(--ground); font-weight: 600; }
/* Four in a row; with very large text, two per row so a whole word still fits (same layout as before at normal size). */
@media (min-width: 40rem) { .bar { grid-template-columns: repeat(auto-fit, minmax(max(22%, 7.25em), 1fr)); } .seg { text-align: center; } }

.countdown { font-weight: 600; }
.block { margin: 1.5rem 0; }
.gaps { list-style: none; margin: 0; padding: 0; counter-reset: gap; }
.gap { padding: 1rem 0; border-top: 1px solid var(--ink-faint); }
.gap h3::before { counter-increment: gap; content: counter(gap) '. '; }
.gap .label { margin: 0.5rem 0 0.125rem; }
.gap .label:first-child { margin-top: 0; }
.gap p:last-child { margin-bottom: 0; }
.plain { margin: 0; padding-left: 1.25rem; }
/* Bullet points under a question (for example Q5, Q8, Q10). */
.bullets { margin: 0 0 0.75rem; padding-left: 1.25rem; }

/* Contact screen: the notice, the form, and the two separate boxes. */
.notice-box { border-top: 1px solid var(--ink-faint); border-bottom: 1px solid var(--ink-faint); padding: 0.75rem 0; margin: 0.5rem 0 1rem; }
.notice-box h2 { font-size: 1.125rem; }
.notice-part h3 { margin: 0.75rem 0 0.25rem; }
.notice-part p { margin: 0 0 0.5rem; }
.notice-part .plain { margin: 0 0 0.5rem; }

.field { margin: 0 0 0.75rem; }
.field label { display: block; font-weight: 600; margin: 0 0 0.25rem; }
.hint { color: var(--ink-dim); margin: 0 0 0.25rem; }
input[type='text'], input[type='tel'], input[type='email'], select {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  font: inherit; /* 17 px: no zoom-in on phones, and it follows the phone's text size */
  color: var(--ink-light);
  background: transparent;
  border: 2px solid var(--ink-dim);
  border-radius: 0.5rem;
}
input[readonly] { opacity: 0.7; }
/* A field with a problem: dashed border AND a text message under it, so colour is never the only signal. */
[aria-invalid='true'] { border-style: dashed; border-color: var(--ink-light); }
.error { margin: 0.25rem 0 0.5rem; font-weight: 600; }
.error::before { content: '! '; }
.select { position: relative; }
.select select { appearance: none; padding-right: 2.5rem; }
.select::after {
  content: '';
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
select option { background: var(--ground); color: var(--ink-light); }

.choices-box { border: 0; padding: 0; margin: 1rem 0 0.75rem; }
.choices-box legend { font-family: var(--display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; padding: 0; margin: 0 0 0.25rem; }
.check { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.25rem 0; cursor: pointer; }
.check.consent { align-items: flex-start; } /* the consent text runs to several lines: keep the box by its first line */
/* 01 Nov 2026: ".field label" (display: block) outranked .check, so the consent box touched its text and sat above it.
   Keep it a flex row with the gap, and centre the box on the first line of text. */
.field label.check { display: flex; }
.check.consent input { margin-top: calc((1lh - 1.5rem) / 2); }
/* The line under the consent box: the statement, then the contact on its own line (01 Nov 2026). */
.privacy-line > span { display: block; } /* only the two lines: the address inside stays inline */
.privacy-line .breakable { white-space: nowrap; overflow-wrap: normal; } /* the address is short: keep it whole */
.notice-details { margin: 0.5rem 0 1rem; }
.check input {
  appearance: none;
  flex: none;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  border: 2px solid var(--ink-light);
  border-radius: 0.25rem;
}
.check input:checked { background: var(--ink-light); }
.check input:checked::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.1rem;
  width: 0.4rem;
  height: 0.8rem;
  border-right: 3px solid var(--ground);
  border-bottom: 3px solid var(--ground);
  transform: rotate(45deg);
}
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0.5rem 0; }
.sent h2:focus { outline: none; }

details { margin: 0 0 0.5rem; }
summary {
  cursor: pointer;
  list-style: none; /* we draw our own arrow */
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
summary::-webkit-details-marker { display: none; }
/* Arrow drawn with borders (no font glyph needed): points right when closed, turns down when open. */
summary::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
details[open] > summary::before { transform: rotate(45deg); }
details p { margin: 0.25rem 0 0; }
/* Start screen info sections: a plain bold heading that opens on tap. */
details.info { border-bottom: 1px solid var(--ink-faint); margin: 0; padding: 0.25rem 0 0.5rem; }
details.info > summary { font-weight: 600; text-decoration: none; }
details.info > summary > span { min-width: 0; } /* long Tamil words may wrap inside the flex row */
.about { margin-top: 1.25rem; }
.about ul { margin: 0.5rem 0; padding-left: 1.25rem; }

.nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; }

.load-error { margin-top: 2rem; }

/* Desktop, over 1024 px wide (12 Oct 2026): a wider column, slightly larger text, and no line of reading text longer
   than about 75 characters. Phones and tablets are not affected by anything in this block. */
@media (min-width: 64.0625rem) {
  .top, .screen { max-width: 50rem; }
  .screen { container-type: inline-size; } /* lets the band boxes below ask how wide the column is */
  body { font-size: 1.125rem; }
  h1, :lang(ta) h1 { font-size: 1.75rem; }
  /* Question screens: the question reads as a question, not a title (Darshini, 12 Oct 2026): the size of the result
     page's section headings, in IBM Plex Sans SemiBold. "Partly means", the answers and "Why we ask" are unchanged. */
  h1.question, :lang(ta) h1.question { font-family: var(--sans); font-weight: 600; font-size: 1.375rem; line-height: 1.35; letter-spacing: normal; }
  h2 { font-size: 1.375rem; }
  h2.band { font-size: 1.625rem; }
  h3 { font-size: 1.125rem; }
  .screen p, .screen li:not(.seg), .screen h1, .screen h2, .screen h3, .screen label, .screen legend { max-width: 75ch; }
  /* Tamil band boxes: all four in one row when the column is wide enough for every name to sit on at most two lines
     with whole words (37em at this text size); with larger text they stay 2 x 2. */
  @container (min-width: 37em) {
    :lang(ta) .bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Plain links (the privacy page link and its way back): underlined, 48 px tall to tap. */
a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.footer-link { margin: 1rem 0 0; }
.footer-link a { display: inline-block; min-height: 3rem; padding: 0.75rem 0; }

/* Review mode banner: a thin strip on every screen (internal preview only), English line then Tamil line. */
.review-banner span { display: block; }
.review-banner span[lang='ta'] { font-family: var(--sans); }
.review-banner {
  margin: 0;
  padding: 0.375rem 1rem;
  text-align: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  background: var(--ink-light);
  color: var(--ground);
}

/* Visible to screen readers only. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Export block on the result page */
.btn.center { text-align: center; }

/* A4 print layout (Ctrl+P): the result only, white, compact, one page. Teal stays only in the logo. */
@media print {
  @page { size: A4; margin: 12mm; }
  :root { --ink-light: #0B1613; --ink-dim: #5E7A73; --ground: #FFFFFF; }
  html, body { background: #FFFFFF; color: #0B1613; font-size: 9pt; line-height: 1.3; }
  .top { border-bottom: 1px solid #D9E0DE; padding: 0 0 2mm; }
  .logo { content: url('../img/qivant-lockup-on-light.svg'); height: 9mm; }
  .progress, .choices, .nav, .export, .sent, .link, .footer-link, #load-error, .lang-slot, .lang-error { display: none !important; }
  .screen, .top { max-width: none; padding-left: 0; padding-right: 0; }
  .screen { padding-top: 2mm; padding-bottom: 0; }
  h1 { font-size: 11pt; margin: 0 0 1mm; }
  h2, h2.band { font-size: 11pt; margin: 2mm 0 1mm; }
  h3 { font-size: 9.5pt; margin: 0 0 0.5mm; }
  p { margin: 0 0 1mm; }
  .label, .progress { font-size: 7.5pt; }
  .block { margin: 2mm 0; }
  .bar { grid-template-columns: repeat(4, 1fr); }
  .seg { padding: 1mm; text-align: center; border-width: 1px; }
  .seg.current { background: #0B1613; color: #FFFFFF; }
  .gaps { display: grid; gap: 0; }
  .gap { padding: 1.5mm 0; break-inside: avoid; }
  .gap .label { margin: 0.5mm 0 0; }
  .notice { border-left-width: 2px; }
  .dim { color: #5E7A73; }
}