/* ============================================================================
   Go Big Resumes — Free Resume Review
   Brand colours read from the live gobigresumes.com. Do not guess new ones.
   ========================================================================= */

:root {
  --teal:      #004E50;   /* primary: buttons, headings, progress */
  --teal-mid:  #337173;   /* video ground, secondary text */
  --teal-dark: #00393B;   /* pressed states */
  --mint:      #8CD3BB;   /* accent: progress fill, ticks, focus */
  --paper:     #EEF1F2;   /* page background */
  --field:     #FFFFFF;   /* inputs and cards */
  --slate:     #566E7C;   /* muted text */
  --ink:       #0B1F20;   /* body text */
  --line:      #D3DEDE;

  --display: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
  --body: Arial, Helvetica, sans-serif;

  --gutter: 18px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Screen-reader only, and the bot trap. */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- shell -- */

.app {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 1120px;
  margin: 0 auto;
  background: var(--paper);
}

.progress {
  height: 6px;
  background: rgba(0, 78, 80, 0.14);
  flex: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--teal-dark);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.chrome {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px var(--gutter) 6px;
}
.brand img { display: block; height: 42px; width: auto; }
.stepno {
  font-size: 13.5px;
  font-weight: bold;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 8px var(--gutter) 18px;
  min-height: 0;
}

.foot {
  flex: none;
  text-align: center;
  font-size: 10.5px;
  color: var(--slate);
  padding: 12px var(--gutter) 16px;
  line-height: 1.5;
}
.foot a { color: var(--slate); }

/* ---------------------------------------------------------------- video -- */

/* The stage matches the shape of Danyal's footage. The clips are 1280x720
   landscape, so the box is 16/9 and the video fits inside it without being
   cropped. If the clips are ever re-recorded upright, change the ratio here
   and in the wider-screen block below — nothing else needs touching. */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 40vh;
  margin: 0 auto 4px;
  background: var(--teal-mid);
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* never crop his face */
  background: var(--teal-mid);
}

/* Buffering. Sits over the poster frame, which stays visible underneath. */
.buffering {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 32, 33, 0.32);
  pointer-events: none;
}
.buffering[hidden] { display: none; }
.buffering i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .buffering i { animation-duration: 2.4s; }
}

/* ------------------------------------------------------- video controls -- */

.ctrl {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 12px 10px;
  /* A scrim, so white controls stay readable whatever is behind them. */
  background: linear-gradient(to top, rgba(0, 32, 33, 0.72), rgba(0, 32, 33, 0));
}

.cbtn {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background 0.15s ease;
}
.cbtn:hover { background: rgba(255, 255, 255, 0.3); }
.cbtn:active { background: rgba(255, 255, 255, 0.4); }
.cbtn svg { width: 19px; height: 19px; fill: currentColor; grid-area: 1 / 1; }

/* One button, three icons — show the one matching the state. The button
   carries the state as a data attribute so no icon needs its own class. */
.cbtn .i-play, .cbtn .i-pause, .cbtn .i-replay,
.cbtn .i-on, .cbtn .i-off { display: none; }
#playBtn[data-state="playing"] .i-pause,
#playBtn[data-state="paused"]  .i-play,
#playBtn[data-state="ended"]   .i-replay,
#muteBtn[data-state="on"]      .i-on,
#muteBtn[data-state="off"]     .i-off { display: block; }

/* Draws attention to the one control that matters when sound is off, without
   a second floating prompt competing with it. */
#muteBtn[data-state="off"] {
  background: var(--mint);
  color: #04342C;
}
#muteBtn[data-state="off"]:hover { background: #a5dfcb; }

.ctime {
  flex: none;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #fff;
  opacity: .9;
}

.cline {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.cline i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .cline i { transition: width 0.2s linear; }
}

.live {
  position: absolute;
  top: 10px; left: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.9;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 30, 31, 0.5);
}
.live i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  animation: blip 2s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.live[hidden] { display: none; }

/* Subtitles, shown only while muted. */
.cap {
  position: absolute;
  /* Clear of the control bar, which owns the bottom of the frame. */
  left: 0; right: 0; bottom: 52px;
  padding: 22px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 32, 33, 0.82));
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.cap[hidden] { display: none; }

/* "Tap anywhere for sound" */
/* Moved to the top of the frame. The bottom now belongs to the controls, and
   a prompt sitting on top of the sound button it refers to reads as clutter. */
.cue {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 32, 33, 0.78);
  color: #fff;
  border: 0;
  border-radius: 20px;
  padding: 8px 14px;
  font-family: var(--body);
  font-size: 12.5px;
  cursor: pointer;
  animation: rise 0.5s ease both, nudge 2.4s ease-in-out 1s 2;
}
.cue[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); }
                  to   { opacity: 1; transform: translate(-50%, 0); } }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); }
                   50%      { transform: translate(-50%, -4px); } }

/* Autoplay refused entirely. */
.blocked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 45, 46, 0.55);
  border: 0;
  width: 100%;
  cursor: pointer;
  font-family: var(--body);
  padding: 0 24px;
}
.blocked[hidden] { display: none; }
.blocked b {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blocked span {
  color: #fff;
  font-size: 12.5px;
  text-align: center;
  line-height: 1.45;
  max-width: 22ch;
}

/* ------------------------------------------------------------- question -- */

.step { animation: enter 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); }
                   to   { opacity: 1; transform: none; } }

h1.q {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.2;
  color: var(--teal);
  margin: 16px 0 4px;
  text-wrap: balance;
}
h1.q:focus { outline: none; }

.hint {
  color: var(--slate);
  font-size: 13.5px;
  margin: 0 0 14px;
}
.spacer { height: 8px; }

.sub-q {
  font-family: var(--display);
  font-size: 16px;
  color: var(--teal);
  margin: 20px 0 8px;
  line-height: 1.25;
}

/* The running character count, under the left edge of its box. Quiet until
   the last 50 characters, then it earns attention. Tabular figures so the
   number does not jitter sideways as it counts. */
.count {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--slate);
  opacity: .62;
  margin: 6px 0 0;
  text-align: left;
  transition: color .15s ease, opacity .15s ease;
}
.count.near { color: #A8642B; opacity: 1; }
.count.full { color: #A33A2A; opacity: 1; font-weight: 700; }

/* ---------------------------------------------------------------- input -- */

.field {
  width: 100%;
  background: var(--field);
  border: 1.5px solid transparent;
  border-radius: 9px;
  padding: 14px 15px;
  font-family: var(--body);
  font-size: 16px;               /* 16px stops iOS zooming on focus */
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 40, 42, 0.07);
}
.field::placeholder { color: #9BAAAC; }
.field:focus { border-color: var(--teal-mid); outline: none; }
/* Over the character limit. The Next button is disabled at the same moment,
   so the border explains why. */
.field.over { border-color: #A33A2A; background: #FDF3F1; }
.field.over:focus { border-color: #A33A2A; }
textarea.field { min-height: 104px; resize: vertical; line-height: 1.5; }

.choices { display: flex; flex-direction: column; gap: 9px; }
.choice {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--field);
  border: 1.5px solid transparent;
  border-radius: 9px;
  padding: 15px;
  font-family: var(--body);
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 40, 42, 0.07);
  transition: border-color 0.15s, transform 0.12s;
}
.choice:hover { border-color: var(--mint); }
.choice i {
  width: 19px; height: 19px;
  border-radius: 50%;
  border: 1.5px solid #B7C6C7;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choice[aria-checked="true"] { border-color: var(--teal); transform: scale(0.985); }
.choice[aria-checked="true"] i { border-color: var(--teal); background: var(--teal); }
.choice[aria-checked="true"] i::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}

.drop {
  width: 100%;
  background: var(--field);
  border: 1.5px dashed #B7C6C7;
  border-radius: 11px;
  padding: 26px 16px;
  text-align: center;
  cursor: pointer;
  font-family: var(--body);
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.5;
}
.drop:hover { border-color: var(--teal-mid); }
.drop strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  color: var(--teal);
  margin-bottom: 3px;
}

.picked {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--field);
  border: 1.5px solid var(--mint);
  border-radius: 9px;
  padding: 13px 15px;
}
.picked i {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mint);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picked .nm {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picked .sz { font-size: 11.5px; color: var(--slate); }
.picked .swap {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--teal-mid);
  font-family: var(--body);
  font-size: 13px;
  cursor: pointer;
  padding: 6px;
  flex: none;
}

.err {
  color: #8C2F2F;
  font-size: 13px;
  margin: 9px 0 0;
  min-height: 1px;
}

/* ------------------------------------------------------------------ nav -- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.back {
  background: none;
  border: 0;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--teal-mid);
  cursor: pointer;
  padding: 12px 2px;
}
.back[hidden] { display: none; }

.btn {
  font-family: var(--body);
  font-weight: bold;
  font-size: 16px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 26px;
  padding: 15px 32px;
  cursor: pointer;
  /* The calendar button on the thank-you page is an <a>, and without this it
     picks up the browser's default underline while every other button here
     has none. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 3px 10px rgba(0, 78, 80, 0.28);
  transition: transform 0.12s, background 0.15s;
  min-height: 50px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { background: var(--teal-dark); transform: none; }
.btn[disabled] { opacity: 0.42; box-shadow: none; cursor: default; transform: none; }

.btn.ghost {
  background: transparent;
  color: var(--teal-mid);
  box-shadow: none;
  border: 1.5px solid var(--line);
  font-weight: normal;
}
.btn.ghost:hover { border-color: var(--teal-mid); background: transparent; }
.btn.ghost:active { background: transparent; }

.btn.wide { width: 100%; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tapnote { font-size: 12px; color: var(--slate); }

/* ---------------------------------------------------------------- start -- */

.hero { text-align: center; }

.banner {
  background: var(--teal);
  border-radius: 13px;
  padding: 42px 24px;
  margin: 4px 0 24px;
  position: relative;
  overflow: hidden;
}
.banner::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--mint);
  opacity: 0.16;
}
.banner > * { position: relative; }
.banner img { height: 48px; width: auto; margin: 0 auto 18px; display: block; }
.banner .kicker {
  font-family: var(--display);
  color: #fff;
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 8px;
  text-transform: uppercase;
  text-wrap: balance;
}
.banner .headline {
  color: var(--mint);
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

.hero .blurb {
  color: #33484A;
  font-size: 14.5px;
  margin: 0 0 22px;
  line-height: 1.6;
}
.hero .footnote { color: var(--slate); font-size: 12px; margin: 12px 0 0; }

/* ----------------------------------------------------------- thank you --- */

.thanks .heading {
  font-family: var(--display);
  font-size: 24px;
  color: var(--teal);
  margin: 16px 0 8px;
  line-height: 1.2;
  text-wrap: balance;
}
.thanks .body { color: #33484A; font-size: 14.5px; margin: 0 0 22px; }
/* Both ways out of this page carry the same weight, so they get the same
   button and the same width. Sized to their text they came out as two
   mismatched boxes with one of them wrapping. */
.thanks .btn.wide { width: 100%; }

/* "Or", with a rule running out to each side. The rules are drawn by the
   pseudo-elements so the word always sits centred whatever its length. */
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
}
.or::before, .or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.or span {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.social {
  display: flex;
  gap: 10px;
  margin: 22px 0 0;
}
.social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--teal-mid);
  display: grid;
  place-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.social a:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.social svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------- wider --- */

@media (min-width: 900px) {
  :root { --gutter: 40px; }

  /* The shell has to grow with the video column, or the answer column is what
     gives way — which is how "What is your name?" ended up wrapping after two
     words on a 27-inch monitor. */
  .app { max-width: 1240px; }

  main {
    display: grid;
    /* Video takes what is left; the answer column keeps a floor it cannot be
       squeezed below. The old order had this the other way round. */
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 48px;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 30px;
  }
  main.single { grid-template-columns: minmax(0, 1fr); justify-items: center; }

  .stage {
    max-height: 64vh;
    margin: 0;
  }

  .col { width: 100%; max-width: 580px; }
  main.single .col { max-width: 560px; }

  .brand img { height: 62px; }
  .stepno { font-size: 16px; }

  h1.q { font-size: 27px; margin-top: 0; }
  .sub-q { font-size: 19px; }
  .hint { font-size: 14.5px; }
  textarea.field { min-height: 118px; }
  /* This used to shrink the banner logo below its own mobile size, which is
     why it looked smallest on the biggest screens. */
  .banner .kicker { font-size: 36px; }
  .banner img { height: 58px; }
  .banner { padding: 52px 30px; }
  .hero .blurb { font-size: 16px; }
  .btn.wide { width: auto; }
  .thanks .heading { font-size: 30px; }
}

/* ------------------------------------------------------------ a11y ------- */

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ----------------------------------------------------------- big screens -- */
/* The 900px breakpoint covers everything from a small laptop to a 27-inch
   monitor, where the same sizes read as timid. This is the desktop step. */
@media (min-width: 1280px) {
  .brand img { height: 72px; }
  .stepno { font-size: 17px; }
  .chrome { padding-top: 20px; padding-bottom: 10px; }

  .app { max-width: 1440px; }
  main { grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); gap: 56px; }
  .stage { max-height: 70vh; }

  h1.q { font-size: 31px; }
  .sub-q { font-size: 20px; }
  .hint { font-size: 15.5px; }
  .field { font-size: 17px; }
  .thanks .heading { font-size: 34px; }
  .thanks .body { font-size: 16px; }

  .banner { padding: 62px 36px; }
  .banner img { height: 68px; }
  .banner .kicker { font-size: 42px; }
  .banner .headline { font-size: 17px; }
  .hero .blurb { font-size: 17px; }
  .social a { width: 42px; height: 42px; }
  .social svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  .field, .choice { border-color: var(--slate); }
}