/* Say It Other Ways.
 *
 * Same paper, type and palette as the Lab index in css/core/lab/index.css,
 * repeated here rather than shared because that file only loads on the index.
 * If these values ever move to a common file, this block goes with them.
 *
 * The page is a worksheet: a sentence at the top, five moves under it, and
 * the results read together at the bottom. Nothing floats, nothing reveals
 * itself on a timer. Reading your own sentences side by side is the exercise,
 * so the layout gets out of the way of that.
 */
.say {
  --lab-paper:  #F7F6F3;
  --lab-dot:    #ccc8c0;
  --lab-forest: #2C4132;
  --lab-rust:   #B85C3D;
  --lab-mute:   #6B6864;
  --lab-rule:   #d5d0c5;
  --lab-serif:  "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", "Georgia", serif;

  background-color: var(--lab-paper);
  background-image: radial-gradient(circle, var(--lab-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--lab-forest);
  min-height: 100vh;
  padding: 44px 32px 80px;
}
.say-inner { max-width: 720px; margin: 0 auto; }

.lab-crumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-bottom: 18px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lab-crumb { color: var(--lab-mute); text-decoration: none; }
.lab-crumb:hover { color: var(--lab-forest); text-decoration: underline; }
.lab-crumb-sep { color: var(--lab-rule); }
.lab-crumb-here { color: var(--lab-forest); }

.say-head { margin-bottom: 20px; }
.say-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--lab-rust); margin-bottom: 10px;
}
.say-title {
  font-family: var(--lab-serif);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 14px;
  text-wrap: balance;
}
.say-lede {
  font-size: 1rem; line-height: 1.65; color: var(--lab-mute);
  max-width: 62ch; margin: 0;
}

/* First thing on the page, not a footnote. The exercise asks for a sentence
   somebody would not usually show anyone. */
.say-private {
  margin: 0 0 34px;
  padding: 10px 14px;
  border-left: 3px solid var(--lab-rust);
  background: rgba(184, 92, 61, 0.06);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--lab-forest);
}

.say-step { margin-bottom: 40px; position: relative; }
.say-step-num {
  font-family: var(--lab-serif);
  font-size: 0.9rem; font-weight: 700;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lab-forest); color: var(--lab-paper);
  margin-bottom: 10px;
}
.say-step-title { font-family: var(--lab-serif); font-size: 1.3rem; margin: 0 0 6px; }
.say-step-hint { font-size: 0.88rem; color: var(--lab-mute); margin: 0 0 14px; line-height: 1.55; }

.say-input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--lab-forest);
  background: #fff;
  border: 1px solid var(--lab-rule);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
}
.say-input:focus-visible { outline: 2px solid var(--lab-forest); outline-offset: 1px; }

.say-moves { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.say-move {
  background: #fff;
  border: 1px solid var(--lab-rule);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.say-move-name { font-family: var(--lab-serif); font-size: 1.1rem; margin: 0 0 4px; }
.say-move-when { font-size: 0.84rem; color: var(--lab-mute); margin: 0 0 14px; line-height: 1.55; }

/* The worked pair. Both lines sit in the same block so they read as one
   thing with two halves, which is what the move is. */
.say-move-eg {
  background: var(--lab-paper);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.say-eg-line {
  display: flex; gap: 10px; align-items: baseline;
  margin: 0; font-size: 0.92rem; line-height: 1.55;
}
.say-eg-line + .say-eg-line { margin-top: 8px; }
.say-eg-tag {
  flex: 0 0 68px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lab-mute);
}
.say-eg-after { font-weight: 600; }
.say-eg-after .say-eg-tag { color: var(--lab-rust); }

/* What is different about the two sentences. Not what it does to anybody. */
.say-move-note {
  font-size: 0.84rem; font-style: italic; color: var(--lab-mute);
  margin: 0 0 14px; line-height: 1.55;
}
.say-move-label {
  display: block;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lab-mute); margin-bottom: 6px;
}

.say-btn {
  background: var(--lab-forest); color: var(--lab-paper);
  border: 0; border-radius: 20px;
  padding: 10px 22px;
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
}
.say-btn:hover { background: #22331f; }

.say-out { margin-top: 20px; }
.say-out-empty, .say-out-foot {
  font-size: 0.86rem; color: var(--lab-mute); line-height: 1.55; margin: 0;
}
.say-out-foot { margin-top: 14px; font-style: italic; }
.say-out-row {
  background: #fff;
  border: 1px solid var(--lab-rule);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
/* The one they started with, marked so the others read as answers to it. */
.say-out-row.is-original {
  background: var(--lab-paper);
  border-style: dashed;
}
.say-out-tag {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lab-mute); margin-bottom: 5px;
}
.say-out-text { margin: 0; font-size: 1rem; line-height: 1.55; }

.say-back { margin-top: 36px; font-size: 0.88rem; }
.say-back a { color: var(--lab-mute); }
.say-back a:hover { color: var(--lab-forest); }

@media (max-width: 600px) {
  .say { padding: 28px 18px 60px; }
  .say-move { padding: 16px; }
  .say-eg-line { flex-direction: column; gap: 2px; }
  .say-eg-tag { flex: none; }
}