/* ============================================================
   TEXT MAKER REVIEWS (#reviews). Scoped to body.tm-page, prefix tmr-.
   Hairline style (the characteristics strip): open bands with a rule on top
   and bottom and one ice light on the top rule, columns split by inset 1px
   hairlines, light gradient numerals, tracked uppercase labels, transparent
   hairline inputs, outline stars. No cards, no glass, no pills except the
   white send button.
   Section: .tm-reviews-sec [data-reviews-api] [data-reviews-product]
   Band 1:  .tmr-summary (.tmr-score, .tmr-dist, .tmr-feature > .tmr-slide)
   Band 2:  .tmr-compose (.tmr-write-col > .tmr-form | .tmr-thanks, .tmr-founder)
   Nothing animates by itself: slide changes and the star pop run on a click
   and are skipped under reduced motion and Pause motion.
   ============================================================ */
.tm-page .tmr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tm-page .tm-reviews-sec button { font-family: inherit; }

/* ---------- shared pieces: band, columns, label, note, numerals, text link ---------- */
.tm-page .tmr-band {
  position: relative;
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tm-page .tmr-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.75) 22%, rgba(205, 216, 255, 0.2) 60%, transparent);
  pointer-events: none;
}
.tm-page .tmr-col { position: relative; min-width: 0; padding: 30px 26px 28px; }
.tm-page .tmr-col:first-child { padding-left: 0; }
.tm-page .tmr-col:last-child { padding-right: 0; }
.tm-page .tmr-col + .tmr-col::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--line);
}
.tm-page .tmr-tlabel {
  display: block;
  margin: 0;
  padding: 0;
  font: 600 12.5px/1.4 "Inter", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-eyebrow);
}
.tm-page .tmr-note { margin: 8px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--tm-soft); }
.tm-page .tmr-avg,
.tm-page .tmr-bar-n,
.tm-page .tmr-pos,
.tm-page .tmr-chars-n {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #dfe6ff 55%, #9fb2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* secondary actions: the .tm-hl-link recipe (tm-core.css) */
.tm-page .tmr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font: 600 15px/1.4 "Inter", sans-serif;
  color: var(--tm-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(205, 216, 255, 0.4);
  cursor: pointer;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.tm-page .tmr-link:hover { color: #fff; text-decoration-color: var(--tm-ice); }
.tm-page .tmr-link:focus-visible { outline: 1px solid var(--tm-ice); outline-offset: 3px; }

/* ---------- band 1: the rating ---------- */
.tm-page .tmr-summary {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 2.15fr);
  margin-bottom: clamp(64px, 8vw, 104px);
}
.tm-page .tmr-avg { display: block; margin: 0; font-size: clamp(56px, 6.2vw, 84px); line-height: 0.95; padding-right: 0.04em; width: max-content; }

/* the star line: thin outline stars with an exact partial gradient fill on top */
.tm-page .tmr-starline {
  --tmr-s: 20px;
  --tmr-g: 5px;
  position: relative;
  display: block;
  width: max-content;
  margin-top: 16px;
  line-height: 0;
  white-space: nowrap;
}
.tm-page .tmr-starline svg { width: var(--tmr-s); height: var(--tmr-s); margin-right: var(--tmr-g); vertical-align: top; overflow: visible; }
.tm-page .tmr-starline svg:last-child { margin-right: 0; }
.tm-page .tmr-starline-base svg { fill: none; stroke: rgba(205, 216, 255, 0.5); stroke-width: 1.2; stroke-linejoin: round; }
.tm-page .tmr-starline-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  max-width: 100%;
  width: calc(var(--tmr-whole, 0) * (var(--tmr-s) + var(--tmr-g)) + var(--tmr-frac, 0) * var(--tmr-s));
}
.tm-page .tmr-starline-fill svg { fill: url(#tmr-grad); stroke: url(#tmr-grad); stroke-width: 1.2; stroke-linejoin: round; }
.tm-page .tmr-score .tmr-tlabel { margin-top: 16px; }
.tm-page .tmr-score .tmr-link { margin-top: 22px; }

.tm-page .tmr-bars {
  list-style: none;
  display: grid;
  gap: 15px;
  margin: 20px 0 0;
  padding: 0;
}
.tm-page .tmr-bars li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 14px;
  line-height: 1;
}
.tm-page .tmr-bar-k { font: 500 13px/1 "Inter", sans-serif; color: var(--tm-soft); font-variant-numeric: tabular-nums; }
.tm-page .tmr-bar { position: relative; display: block; height: 1px; background: var(--line); }
.tm-page .tmr-bar i {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(205, 216, 255, 0.86);
  transform-origin: left center;
  transform: scaleX(var(--tmr-p, 0));
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.tm-page .tmr-bar-n { font-size: 16px; line-height: 1; text-align: right; }

/* the review reader: one review at a time, the visitor turns the page */
.tm-page .tmr-feature { display: flex; flex-direction: column; padding-left: 34px; }
.tm-page .tmr-slides { display: grid; flex: 1 1 auto; touch-action: pan-y; }
.tm-page .tmr-slide { grid-area: 1 / 1; margin: 0; min-width: 0; visibility: hidden; opacity: 0; }
.tm-page .tmr-slide.is-on, .tm-page .tmr-slide.is-leaving { visibility: visible; opacity: 1; }
.tm-page .tmr-slide-stars { display: flex; gap: 5px; line-height: 0; }
.tm-page .tmr-slide-stars svg { width: 15px; height: 15px; overflow: visible; fill: none; stroke: rgba(205, 216, 255, 0.5); stroke-width: 1.4; stroke-linejoin: round; }
.tm-page .tmr-slide-stars svg.on { fill: url(#tmr-grad); stroke: url(#tmr-grad); }
.tm-page .tmr-slide-text { margin: 18px 0 0; }
.tm-page .tmr-slide-text p {
  margin: 0;
  max-width: 40ch;
  font-size: 23px;
  line-height: 1.48;
  letter-spacing: -0.012em;
  color: var(--tm-bright);
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.tm-page .tmr-slide[data-len="m"] .tmr-slide-text p { max-width: 48ch; font-size: 19px; line-height: 1.55; }
.tm-page .tmr-slide[data-len="l"] .tmr-slide-text p { max-width: 62ch; font-size: 16px; line-height: 1.62; color: var(--tm-lede); }
.tm-page .tmr-by { margin: 22px 0 0; }
/* an approved reviewer photo: a small round portrait beside the name */
.tm-page .tmr-by.has-av { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.tm-page .tmr-by-av { grid-column: 1; grid-row: 1 / span 2; display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--tm-rule); background: rgba(205, 216, 255, 0.06); }
.tm-page .tmr-by.has-av > span { grid-column: 2; }
.tm-page .tmr-by.has-av .tmr-tlabel { margin-top: 2px; }
.tm-page .tmr-by-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tm-bright); overflow-wrap: anywhere; }
.tm-page .tmr-by .tmr-tlabel { margin-top: 6px; overflow-wrap: anywhere; }
.tm-page .tmr-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: -2px 0 22px; }
.tm-page .tmr-nav[hidden] + .tmr-slides { margin-top: 0; }
.tm-page .tmr-pos { margin-right: auto; font-size: 15px; line-height: 1; letter-spacing: 0.02em; }

/* ---------- band 2: the form beside Adam's note ---------- */
.tm-page .tmr-compose { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.tm-page .tmr-write-col { padding-top: 36px; padding-bottom: 38px; padding-right: 44px; }
.tm-page .tmr-form-h {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 26px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--tm-bright);
}

.tm-page .tmr-rate { min-width: 0; margin: 30px 0 0; padding: 0; border: 0; }
.tm-page .tmr-rate > .tmr-tlabel { margin-bottom: 8px; }
.tm-page .tmr-rate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.tm-page .tmr-picker { position: relative; display: flex; margin-left: -9px; }
.tm-page .tmr-star-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.tm-page .tmr-star {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tm-page .tmr-star svg {
  width: 34px;
  height: 34px;
  overflow: visible;
  fill: none;
  stroke: rgba(205, 216, 255, 0.55);
  stroke-width: 0.85;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.15s ease;
}
.tm-page .tmr-star:hover svg { stroke: rgba(205, 216, 255, 0.95); transform: scale(1.06); }
.tm-page .tmr-star.is-lit svg { fill: url(#tmr-grad); stroke: url(#tmr-grad); }
.tm-page .tmr-picker.is-preview .tmr-star.is-lit svg { opacity: 0.78; }
.tm-page .tmr-star-in:focus-visible + .tmr-star { outline: 1px solid var(--tm-ice); outline-offset: -3px; }
.tm-page .tmr-word { margin: 0; min-width: 12ch; }
.tm-page .tmr-word { font: 600 12.5px/1.4 "Inter", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tm-soft); }
.tm-page .tmr-word.is-set { color: var(--tm-bright); }

.tm-page .tmr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.tm-page .tmr-field { min-width: 0; margin-top: 26px; }
.tm-page .tmr-field > .tmr-tlabel { margin-bottom: 10px; }
.tm-page .tmr-opt { margin-left: 8px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tm-soft); }
.tm-page .tmr-control { position: relative; display: block; }
/* the light bar under the field that has focus */
.tm-page .tmr-control::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205, 216, 255, 0.95) 22%, rgba(205, 216, 255, 0.3) 60%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.tm-page .tmr-control:focus-within::after { opacity: 1; }
.tm-page .tmr-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--tm-bright);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color 0.15s ease;
}
.tm-page .tmr-input::placeholder { color: rgba(185, 196, 238, 0.45); }
.tm-page .tmr-input:hover { border-color: rgba(143, 208, 255, 0.3); }
.tm-page .tmr-input:focus,
.tm-page .tmr-input:focus-visible { outline: none; border-color: var(--tm-ice); }
.tm-page .tmr-input[aria-invalid="true"] { border-color: rgba(255, 179, 193, 0.7); }
.tm-page .tmr-textarea { min-height: 140px; resize: vertical; }
.tm-page .tmr-under { display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; margin-top: 8px; }
.tm-page .tmr-under .tmr-err { margin: 0 auto 0 0; }
.tm-page .tmr-chars { flex: none; margin: 0; font-size: 13px; line-height: 1.4; color: var(--tm-soft); }
.tm-page .tmr-chars-n { font-size: 15px; letter-spacing: 0; }
.tm-page .tmr-chars.is-over .tmr-chars-n { background: none; color: #ffc2cd; }
.tm-page .tmr-err { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #ffc2cd; }

.tm-page .tmr-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* the optional photo field */
.tm-page .tmr-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tm-page .tmr-photo-prev img { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--tm-rule); }
.tm-page .tmr-photo-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.tm-page .tmr-photo-pick { cursor: pointer; }
.tm-page .tmr-photo-in:focus-visible + .tmr-photo-pick { outline: 1px solid var(--tm-ice); outline-offset: 3px; }
.tm-page .tmr-photo-note { max-width: 56ch; }
.tm-page .tmr-photo .tmr-err { margin-top: 8px; }

.tm-page .tmr-consent { max-width: 56ch; margin: 24px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--tm-soft); }
.tm-page .tmr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
/* Send review: a text button on a hairline underline with an arrow (the white
   pill stays reserved for the purchase buttons) */
.tm-page .tmr-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 2px 8px;
  border: 0;
  border-bottom: 1px solid rgba(205, 216, 255, 0.4);
  border-radius: 0;
  background: none;
  font: 600 16px/1.3 "Inter", sans-serif;
  color: var(--tm-bright);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tm-page .tmr-submit:hover { color: #fff; border-bottom-color: var(--tm-ice); }
.tm-page .tmr-submit-arrow { display: inline-block; transition: translate 0.15s ease; }
.tm-page .tmr-submit:hover .tmr-submit-arrow { translate: 3px 0; }
.tm-page .tmr-submit:focus-visible { outline: 1px solid var(--tm-ice); outline-offset: 3px; }
.tm-page .tmr-submit:disabled { cursor: default; color: var(--tm-soft); border-bottom-color: var(--line); }
.tm-page .tmr-submit[aria-busy="true"] { opacity: 0.85; }
.tm-page .tmr-submit[aria-busy="true"] .tmr-submit-arrow { display: none; }
@media (prefers-reduced-motion: reduce) { .tm-page .tmr-submit-arrow { transition: none; } }
.tm-page .tmr-spin {
  display: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(205, 216, 255, 0.22);
  border-top-color: var(--tm-ice);
  animation: tmrSpin 0.8s linear infinite;
}
.tm-page .tmr-submit[aria-busy="true"] .tmr-spin { display: inline-block; }
@keyframes tmrSpin { to { transform: rotate(360deg); } }
.tm-page .tmr-status { flex: 1 1 240px; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tm-lede); }
.tm-page .tmr-status:empty { display: none; }
.tm-page .tmr-status.is-error { color: #ffd0d8; }
.tm-page .tmr-status a {
  color: var(--tm-bright);
  text-decoration: underline;
  text-decoration-color: rgba(205, 216, 255, 0.45);
  text-underline-offset: 3px;
}

/* the thank you that replaces the form after a send */
.tm-page .tmr-thanks { padding: 6px 0 10px; }
.tm-page .tmr-thanks:focus { outline: none; }
.tm-page .tmr-thanks-stars { display: flex; gap: 6px; margin: 0 0 20px; line-height: 0; }
.tm-page .tmr-thanks-stars svg { width: 24px; height: 24px; overflow: visible; fill: none; stroke: rgba(205, 216, 255, 0.5); stroke-width: 1.1; stroke-linejoin: round; }
.tm-page .tmr-thanks-stars svg.on { fill: url(#tmr-grad); stroke: url(#tmr-grad); }
.tm-page .tmr-thanks .tmr-note { font-size: 15px; }

/* Adam's note: calm and secondary, the narrow column */
.tm-page .tmr-founder { margin: 0; padding: 36px 0 30px 32px; }
.tm-page .tmr-founder-img {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line);
}
.tm-page .tmr-founder-q { margin: 16px 0 0; }
.tm-page .tmr-founder-q p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tm-body); }
.tm-page .tmr-founder-sig {
  margin-top: 14px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--tm-lede);
}

/* ---------- still states ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm-page .tmr-bar i, .tm-page .tmr-star svg, .tm-page .tmr-control::after { transition: none; }
  .tm-page .tmr-star:hover svg { transform: none; }
}
html[data-motion="off"] .tm-page .tmr-bar i,
html[data-motion="off"] .tm-page .tmr-star svg { transition: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .tm-page .tmr-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr); }
  .tm-page .tmr-compose { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
  .tm-page .tmr-write-col { padding-right: 32px; }
  .tm-page .tmr-feature { padding-left: 26px; }
}
@media (max-width: 820px) {
  /* rating: score and bars side by side, the reader under them */
  .tm-page .tmr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-page .tmr-feature { grid-column: 1 / -1; padding-left: 0; border-top: 1px solid var(--tm-rule); }
  .tm-page .tmr-feature::after { display: none; }
  /* on a phone the reader takes the height of the review shown (the controls
     sit above it, so they never move); the leaving review just goes */
  .tm-page .tmr-slide { grid-area: auto; }
  .tm-page .tmr-slide:not(.is-on) { display: none; }
  .tm-page .tmr-slide-text p { font-size: 20px; }
  .tm-page .tmr-slide[data-len="m"] .tmr-slide-text p { font-size: 18px; }
  .tm-page .tmr-slide[data-len="l"] .tmr-slide-text p { font-size: 16px; }
  /* compose: the form, then Adam's note under a thin rule */
  .tm-page .tmr-compose { grid-template-columns: minmax(0, 1fr); }
  .tm-page .tmr-write-col { padding-right: 0; }
  .tm-page .tmr-founder { padding-left: 0; border-top: 1px solid var(--tm-rule); }
  .tm-page .tmr-founder::after { display: none; }
  .tm-page .tmr-input { font-size: 16px; }
}
@media (max-width: 560px) {
  .tm-page .tmr-summary { grid-template-columns: minmax(0, 1fr); }
  .tm-page .tmr-dist { padding-left: 0; padding-right: 0; border-top: 1px solid var(--tm-rule); }
  .tm-page .tmr-dist::after { display: none; }
  .tm-page .tmr-score { padding-right: 0; }
  .tm-page .tmr-grid2 { grid-template-columns: minmax(0, 1fr); }
  .tm-page .tmr-form-h { font-size: 23px; }
  .tm-page .tmr-star { width: 48px; height: 48px; }
  .tm-page .tmr-star svg { width: 32px; height: 32px; }
}