/* Villanelle Composer — only what's unique to it. Tokens, body, top-bar,
   header, kicker and note live in /lib/composer-base.css. */

.villa-root {
  min-height: calc(100vh - 48px);
  padding: 0 24px 120px;
}

.villa-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 56px 0 40px;
}

/* Write / Read switch + progress readout, tucked under the note */
.villa-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 18px;
}

.villa-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.villa-switch button {
  background: transparent;
  border: 0;
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 2px;
}
.villa-switch button.is-on {
  background: var(--ink);
  color: var(--bg-card-hit);
}

.villa-progress {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.villa-progress.is-done { color: var(--ok); }

/* Work area — poem on the left, rhyme ledger riding alongside on wide
   screens. The metrics live here as variables so the title, the poem text
   and the read view all share one left edge: flipping Write / Read never
   shifts the poem sideways. */
.villa-work {
  --villa-fs: 1.2rem;
  --villa-lh: calc(var(--villa-fs) * 1.35);
  --villa-pad: 16px;
  --villa-gutter: 52px;
  --villa-gap: 12px;
  --villa-text-x: calc(var(--villa-pad) + var(--villa-gutter) + var(--villa-gap) + 1px);
  --villa-mono-nudge: 5px; /* drops the mono machinery onto the serif baseline */
}

@media (min-width: 901px) {
  .villa-work {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    column-gap: 32px;
    align-items: start;
  }
  .villa-title { grid-column: 1; grid-row: 1; }
  .villa-poem { grid-column: 1; grid-row: 2; }
  .villa-read { grid-column: 1; grid-row: 1 / span 2; }
  .villa-actions { grid-column: 1; grid-row: 3; }
  .villa-ledger {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: sticky;
    top: 72px;
  }
}

/* Title — optional, local only */
.villa-title {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 2px 0 6px var(--villa-text-x);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  outline: none;
}
.villa-title:hover { border-bottom-color: var(--line); }
.villa-title:focus { border-bottom-color: var(--ink-mute); }
.villa-title::placeholder { color: var(--ink-faint); font-style: italic; font-weight: 400; }

/* Stanzas — one card each, so the five tercets and the quatrain read as
   shapes before a word is written */
.villa-poem {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.villa-stanza {
  list-style: none;
  margin: 0;
  padding: 8px var(--villa-pad);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: background 160ms ease;
}
.villa-stanza:focus-within { background: var(--bg-card-hit); }

.villa-line {
  display: grid;
  grid-template-columns: var(--villa-gutter) minmax(0, 1fr) auto 26px;
  column-gap: var(--villa-gap);
  align-items: start;
  padding: 5px 0;
}

/* Gutter — line number + scheme tag */
.villa-gutter {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  gap: 8px;
  padding-top: var(--villa-mono-nudge);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  line-height: var(--villa-lh);
  color: var(--ink-mute);
}
.villa-lineno {
  width: 2ch;
  text-align: right;
  color: var(--ink-faint);
}
.villa-tag { transition: color 160ms ease; }
.villa-line--refrain .villa-tag { font-weight: 700; color: var(--ink-soft); }
.villa-line--live .villa-tag { color: var(--ink); }

/* Poem text — an input where the poet writes, plain text where a refrain
   is only passing through. Same metrics, so vary / relink never jolts. */
.villa-input,
.villa-echo {
  grid-column: 2;
  grid-row: 1;
  display: block;
  width: 100%;
  padding: 2px 0 4px;
  font-family: var(--font-serif);
  font-size: var(--villa-fs);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.villa-input {
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  scroll-margin-top: 96px;
  scroll-margin-bottom: 48px;
}
.villa-input:focus { border-bottom-color: var(--ink-mute); }
.villa-input::placeholder { color: var(--ink-faint); font-style: italic; }

.villa-echo {
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  cursor: default;
  transition: color 160ms ease;
}
/* While its refrain is being written, every return of it comes up to full ink. */
.villa-line--live .villa-echo { color: var(--ink); }
.villa-echo-empty { color: var(--ink-faint); font-style: italic; }

/* Tools — start-here hint, vary / varied / relink, the inline confirm */
.villa-tools {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: var(--villa-mono-nudge);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 1px;
  line-height: var(--villa-lh);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-mute);
}
.villa-tools:empty { display: none; }
.villa-varied { color: var(--ink-faint); }

.villa-link {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
  line-height: inherit;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
}
.villa-link:hover { color: var(--ink); }
.villa-link:focus-visible { outline: 1px solid var(--ink-mute); outline-offset: 3px; }
.villa-tools .villa-link { font-size: inherit; }

/* Link-buttons on a line stay out of the way until the line is hovered or
   focused. Touch has no hover, so there they're simply always on. */
@media (hover: hover) and (min-width: 641px) {
  .villa-tool { opacity: 0; transition: opacity 140ms ease; }
  .villa-line:hover .villa-tool,
  .villa-line:focus-within .villa-tool,
  .villa-tool:focus-visible { opacity: 1; }
}

.villa-confirm {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
}
.villa-confirm .villa-link { font-size: inherit; color: var(--ink-soft); }
.villa-confirm .villa-link:hover { color: var(--ink); }
.villa-confirm .villa-confirm-yes,
.villa-confirm .villa-confirm-yes:hover { color: var(--off); }

/* Syllable count — readout only. Dotted when a word in the line is a guess. */
.villa-count {
  grid-column: 4;
  grid-row: 1;
  padding-top: var(--villa-mono-nudge);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: var(--villa-lh);
  text-align: right;
  color: var(--ink-mute);
}
.villa-line--echo .villa-count { color: var(--ink-faint); }
.villa-count-n--guess {
  border-bottom: 1px dotted var(--ink-mute);
  cursor: help;
}

/* Where the two refrains finally sit together */
.villa-couplet {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 2px;
  padding-left: calc(var(--villa-gutter) + var(--villa-gap));
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.villa-couplet::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Rhyme ledger — mono labels, serif words. A ledger, not a judge. */
.villa-ledger {
  padding: 14px 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.villa-ledger-head {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.villa-ledger-row + .villa-ledger-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.villa-ledger-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--ink-mute);
}
.villa-ledger-sound {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.villa-ledger-words {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
}
.villa-ledger-word {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.villa-ledger-word:hover,
.villa-ledger-word:focus-visible {
  border-bottom-color: var(--ink-mute);
  outline: none;
}
.villa-ledger-item { white-space: nowrap; } /* a dot never starts a row */
.villa-ledger-word--varied { color: var(--ink-mute); }
/* Refrain marker — a raised mono digit on the two refrain end-words */
.villa-ledger-mark {
  position: relative;
  top: -0.5em;
  margin-left: 2px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--ink-mute);
}
.villa-ledger-dot { margin: 0 6px; color: var(--ink-faint); }
.villa-ledger-none { color: var(--ink-faint); }
.villa-ledger-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Read view — the draft and nothing else */
.villa-read {
  padding: 4px 0 12px var(--villa-text-x);
  font-family: var(--font-serif);
  font-size: var(--villa-fs);
  line-height: 1.5;
  color: var(--ink);
}
.villa-read-title {
  margin-bottom: 22px;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.villa-read-stanza + .villa-read-stanza { margin-top: 1.3em; }
.villa-read-line {
  min-height: 1.5em;
  padding-left: 1.5em;
  text-indent: -1.5em; /* wrapped lines hang, as in print */
  white-space: pre-wrap;
  word-break: break-word;
}
.villa-read-empty {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Action row + archive — the haiku family, under this toy's prefix */
.villa-actions {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.villa-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.villa-buttons .villa-confirm { padding: 0 4px; }

.villa-btn {
  background: transparent;
  border: 1px solid var(--ink-faint);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.villa-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
  border-color: var(--ink-mute);
}
.villa-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.villa-btn--primary {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.villa-btn--primary:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg-card-hit);
  border-color: var(--ink);
}
.villa-btn--primary.is-glow {
  border-color: color-mix(in srgb, var(--ok) 70%, transparent);
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, transparent);
}
.villa-btn--primary.is-glow:hover:not(:disabled) {
  background: var(--ok);
  color: var(--bg-card-hit);
  border-color: var(--ok);
}

.villa-archive {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.villa-archive-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.villa-archive-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.villa-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.villa-archive-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.villa-archive-item--done {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: var(--bg-card-hit);
}
.villa-archive-text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink);
}
.villa-archive-title { font-weight: 600; }
.villa-archive-line { white-space: pre-wrap; word-break: break-word; }
.villa-archive-title + .villa-archive-line { color: var(--ink-soft); }
.villa-archive-empty { color: var(--ink-faint); }
.villa-archive-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
}
.villa-archive-counts {
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-mute);
}
.villa-archive-item--done .villa-archive-counts { color: var(--ok); }
.villa-archive-buttons { display: flex; gap: 10px; }

/* ── Narrow: ledger drops below the poem ─────────────────────────── */
@media (max-width: 900px) {
  .villa-ledger { margin-top: 20px; }
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .villa-root { padding: 0 14px 80px; }
  .villa-page { padding: 32px 0 24px; }
  .compose-head h1 { font-size: 1.7rem; }
  .section-note { font-size: 0.9rem; }

  .villa-work {
    --villa-fs: 1.08rem; /* stays above 16px so iOS doesn't zoom on focus */
    --villa-pad: 12px;
    --villa-gutter: 22px;
    --villa-gap: 10px;
    --villa-mono-nudge: 4px;
  }

  .villa-title { font-size: 1.3rem; margin-bottom: 12px; }
  .villa-poem { gap: 12px; }
  .villa-stanza { padding-top: 6px; padding-bottom: 6px; }

  /* Gutter keeps the scheme tag only; tools drop under the line so the
     poem text gets the full measure. */
  .villa-line { grid-template-columns: var(--villa-gutter) minmax(0, 1fr) 20px; }
  .villa-lineno { display: none; }
  .villa-gutter { font-size: 0.66rem; letter-spacing: 0; }
  .villa-count { grid-column: 3; font-size: 0.66rem; }
  .villa-tools {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
    line-height: 1.9;
  }

  .villa-read-title { font-size: 1.3rem; margin-bottom: 18px; }

  .villa-actions { flex-wrap: wrap; gap: 8px; }
  .villa-buttons { width: 100%; }
  .villa-btn { padding: 6px 10px; font-size: 0.68rem; }

  .villa-archive { margin-top: 40px; }
  .villa-archive-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }
  .villa-archive-text { font-size: 1rem; }
  .villa-archive-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}