/* First read: the browser lane's immediate payoff. Premium card grammar shared
   with the hub (white cards, 0.5px --rule borders, gold accents, serif-italic
   headings). Copy is fixed; the only dynamic value is the reflected sentence,
   rendered by first-read.js. */

.fr { margin-top: 40px; }

.fr-label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.fr-label--example { color: var(--gold); }

.fr-frame {
  background: #fff;
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 26px 28px 24px;
}
.fr-frame-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-faint);
  letter-spacing: .005em;
  margin: 0 0 16px;
}

/* The reflected-back card: the sentence set apart as something the page holds
   up, not something it edits. */
.fr-reflect {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 20px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--gold);
}

.fr-beats, .fr-scope {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0 0 14px;
}
.fr-beats b { color: var(--ink); font-weight: 600; }
.fr-scope {
  color: var(--ink-faint);
  padding-top: 14px;
  border-top: 0.5px solid var(--rule);
}

.fr-cta {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
}
.fr-cta:hover { text-decoration: underline; }

/* Part 2: the handoff from the example to their own field. */
.fr-yours {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 0.5px solid var(--rule);
}
.fr-prompt {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 14px;
}
.fr-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .15s;
}
.fr-input:focus { outline: none; border-color: var(--steel); }
.fr-helper {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 10px 0 16px;
}
.fr-submit {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 0.5px solid var(--navy);
  border-radius: 6px;
  padding: 12px 20px;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.fr-submit:hover:not(:disabled) { transform: translateY(-1px); }
.fr-submit:disabled { opacity: .4; cursor: not-allowed; }

#fr-result-slot { margin-top: 26px; }

@media (max-width: 640px) {
  .fr-reflect { font-size: 18px; }
  .fr-frame { padding: 20px 20px 18px; }
  .fr-prompt { font-size: 17px; }
}