/* The field that counts its letters: a minimal bio field on a white page. No box round the text: its underline is
   the room that is left, a hairline with a small tick at each end, and the count of characters left sits at its
   end in tabular figures that grow heavier as the limit comes near. The only colour is the accent of the letters
   past the limit, of the count below zero, and of the caret. */
:root {
  --page: #ffffff;          /* the page, and the veil over the letters past the limit */
  --ink: #141414;           /* the letters, the count and the line while you write */
  --muted: #8a8780;         /* the label at rest and the line under the field */
  --rest: #c9c6bf;          /* the room that is left, while the field is not in use */
  --track: #efeee9;         /* the whole measure under the line, the room already used */
  --accent: #e5401d;        /* the strike over the extra letters, the count below zero, the focus ring */
  --select: rgba(229, 64, 29, 0.16); /* the selection in the text */
  --save: #141414;          /* the button */
  --save-ink: #ffffff;      /* the button's word */
  --off: #ecebe7;           /* the button while the bio is too long */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* the field stands in the middle of the page; in a real profile form it sits in the column, under the name */
.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
}

.bio {
  position: relative;
  width: min(460px, 100%);
  margin: 0;
}

/* the script shows it once the typeface is there, so the lines are measured in the right face */
.bio.is-waiting {
  visibility: hidden;
}

/* ---------------------------------------------------------------- the label */
.bio__head {
  height: 22px;
  margin-bottom: 8px;
}

.bio__label {
  --wg: 520;
  --wd: 100;
  display: inline-block;
  font-size: 13px;
  line-height: 22px;
  font-variation-settings: 'wght' var(--wg), 'wdth' var(--wd);
  letter-spacing: 0.01em;
  color: var(--muted);
  transition: color 0.3s ease;
  cursor: default;
}

.bio.is-using .bio__label {
  color: var(--ink);
}

/* ---------------------------------------------------------------- the text */
.bio__box {
  position: relative;
  height: 120px;
  cursor: text;
}

/* the textarea and its twin share every measure: the twin is never seen, it only tells where each letter falls */
.bio__input,
.bio__mirror {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  line-height: 30px;
  letter-spacing: 0;
  font-kerning: normal;
  font-variant-ligatures: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 4;
  text-align: left;
}

.bio__mirror {
  visibility: hidden;
  pointer-events: none;
  min-height: 120px;
}

.bio__input {
  display: block;
  height: 100%;
  min-height: 120px;
  resize: none;
  overflow: hidden;
  outline: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.bio__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.bio__input::selection {
  background: var(--select);
}

/* the marks drawn over the letters past the limit: a veil, a hairline through them, and an upright mark where the
   limit falls in the text */
.bio__marks {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.bio__wash {
  fill: var(--page);
  stroke: none;
}

.bio__strike,
.bio__limit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: butt;
}

/* the caret of the library's preview, which writes without taking the focus */
.bio__caret {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: 24px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

.bio__caret.is-on {
  animation: blink 1.06s steps(1) infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- the room that is left */
.bio__gauge {
  position: relative;
  height: 34px;
  margin-top: 10px;
}

.bio__rule {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bio__line,
.bio__ticks,
.bio__run {
  fill: none;
  stroke: var(--rest);
  stroke-width: 1;
  stroke-linecap: butt;
}

/* the whole measure, faint: what the letters have used up */
.bio__track {
  fill: none;
  stroke: var(--track);
  stroke-width: 1;
}

/* the run of the save, heavier than the line */
.bio__run {
  stroke: var(--ink);
  stroke-width: 2;
}

/* the count: tabular figures, so the line's end does not wobble while the weight changes; the script keeps every
   figure the same width at every weight with the width axis */
.bio__count {
  position: absolute;
  right: 0;
  top: 0;
  height: 34px;
  margin: 0;
  pointer-events: none;
}

.bio__num {
  --wg: 220;
  --wd: 100;
  display: block;
  font-size: 22px;
  line-height: 34px;
  font-variation-settings: 'wght' var(--wg), 'wdth' var(--wd);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  will-change: transform;
}

/* ---------------------------------------------------------------- under the line */
.bio__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-top: 14px;
}

.bio__note {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  color: var(--muted);
}

.note__line {
  display: block;
}

.note__line.is-going {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.note__line.is-over,
.note__line.is-done {
  color: var(--ink);
}

/* Save pressed while the bio is too long */
.note__line.is-wrong {
  color: var(--accent);
}

.note__line b {
  font-weight: inherit;
  font-variation-settings: 'wght' 640, 'wdth' 100;
  color: var(--accent);
}

/* ---------------------------------------------------------------- the button: the elastic pill */
.save {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  height: 44px;
  margin: 0;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--save-ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;
}

.save__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--save);
  transition: inset 0.6s cubic-bezier(0.3, 1.7, 0.45, 1), transform 0.16s ease-out, background-color 0.3s ease;
}

/* the three words share one place, so the pill never changes width */
.save__labels {
  display: grid;
}

.save__label {
  grid-area: 1 / 1;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-variation-settings: 'wght' 560, 'wdth' var(--wd, 100);
  transition: --wd 0.6s cubic-bezier(0.3, 1.7, 0.45, 1);
  opacity: 0;
}

.save__label.is-on {
  opacity: 1;
}

@property --wd {
  syntax: '<number>';
  inherits: true;
  initial-value: 100;
}

@media (hover: hover) and (pointer: fine) {
  .save:not([aria-disabled='true']):hover .save__bg {
    inset: -2px -4px;
  }

  .save:not([aria-disabled='true']):hover .save__label {
    --wd: 116;
  }
}

.save:not([aria-disabled='true']):active .save__bg,
.save.is-pressed .save__bg {
  transform: scale(0.95);
}

.save:not([aria-disabled='true']):active .save__label,
.save.is-pressed .save__label {
  --wd: 110;
}

/* too long to save: the pill goes pale and only says no */
.save[aria-disabled='true'] {
  color: var(--muted);
  cursor: default;
}

.save[aria-disabled='true'] .save__bg {
  background: var(--off);
}

.save:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* for screen readers only */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 440px) {
  .bio__input,
  .bio__mirror {
    font-size: 18px;
    line-height: 27px;
  }

  .bio__box,
  .bio__input,
  .bio__mirror {
    min-height: 108px;
  }

  .bio__num {
    font-size: 20px;
  }

  .save {
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
  }
}