/* ============================================================
   Limerick generator — loaded only on the limerick pages.
   Builds on styles.css tokens. One new colour: --pepper, for Rude.

   Signature: the rhyme column. Where the acrostic has its marigold
   spine down the left, the limerick carries its rhyme scheme down
   the right: A A B B A, with the rhyming words highlighted in the
   same colour and the short middle lines set in, as limericks
   traditionally are.
   ============================================================ */

:root{
  --pepper:   #D1344B;
  --pepper-d: #AE2539;
  --rhyme-a:  var(--marigold);
  --rhyme-b:  var(--violet);
}

/* ---------- composer ---------- */

.lim-composer{ position:relative; overflow:hidden; }
.lim-composer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--heat, var(--marigold));
  transition:background .25s ease;
}
.lim-composer[data-heat="clean"]  { --heat:var(--violet); }
.lim-composer[data-heat="cheeky"] { --heat:var(--marigold); }
.lim-composer[data-heat="rude"]   { --heat:var(--pepper); }

.lim-row{ display:grid; gap:22px; }
@media (min-width:760px){ .lim-row{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); } }

#limName{
  width:100%;
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  font-size:clamp(1.5rem,4vw,2rem); font-weight:400; color:var(--ink);
  background:transparent; border:0; border-bottom:2px solid var(--mist); border-radius:0;
  padding:4px 2px 10px; transition:border-color .18s ease;
}
#limAbout{
  width:100%; resize:vertical; min-height:56px;
  font-family:Newsreader, Georgia, serif; font-size:1.14rem; font-weight:400; line-height:1.4;
  color:var(--ink); background:transparent;
  border:0; border-bottom:2px solid var(--mist); border-radius:0;
  padding:8px 2px 10px; transition:border-color .18s ease;
}
#limName::placeholder, #limAbout::placeholder{ color:#C3C8DA; }
#limName:focus, #limAbout:focus{ outline:none; border-bottom-color:var(--heat, var(--violet)); }

/* ---------- heat dial ---------- */

.heat{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:var(--paper); border:1px solid var(--mist); border-radius:12px; padding:4px;
  max-width:460px;
}
.heat label{ position:relative; }
.heat input{ position:absolute; opacity:0; width:0; height:0; }
.heat span{
  display:block; text-align:center; cursor:pointer; user-select:none;
  font-size:14.5px; font-weight:600; color:var(--ink-60);
  padding:9px 6px; border-radius:9px;
  transition:background .2s ease, color .2s ease;
}
.heat span small{ display:block; font-size:11.5px; font-weight:500; opacity:.75; margin-top:1px; }
.heat span:hover{ color:var(--ink); }
.heat input:focus-visible + span{ outline:3px solid var(--violet); outline-offset:2px; }
.heat input[value="clean"]:checked  + span{ background:var(--violet); color:#fff; }
.heat input[value="cheeky"]:checked + span{ background:var(--marigold); color:var(--ink); }
.heat input[value="rude"]:checked   + span{ background:var(--pepper); color:#fff; }

.heat-says{ font-size:13.5px; color:var(--ink-60); margin:10px 0 0; max-width:60ch; min-height:1.4em; }

/* the one-time adults-only check for Rude */
.lim-gate{
  border:1px solid var(--pepper); background:#FFF6F7; border-radius:12px;
  padding:16px 18px; display:grid; gap:12px;
}
.lim-gate[hidden]{ display:none; }
.lim-gate p{ margin:0; font-size:14.5px; color:var(--ink); }
.lim-gate-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.lim-gate .yes{
  font:inherit; font-size:14px; font-weight:600; color:#fff; background:var(--pepper);
  border:0; border-radius:9px; padding:9px 16px; cursor:pointer;
}
.lim-gate .yes:hover{ background:var(--pepper-d); }

.lim-composer[data-heat="rude"] .go{ background:var(--pepper); }
.lim-composer[data-heat="rude"] .go:hover{ background:var(--pepper-d); }

/* ---------- the limerick ---------- */

.limerick{
  background:var(--card); border:1px solid var(--mist); border-radius:var(--r);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  padding:clamp(24px,5vw,44px) clamp(20px,5vw,48px) clamp(26px,5vw,44px) clamp(24px,5vw,52px);
  max-width:760px;
}
.limerick::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--heat, var(--marigold));
}
.limerick[data-heat="clean"]  { --heat:var(--violet); }
.limerick[data-heat="cheeky"] { --heat:var(--marigold); }
.limerick[data-heat="rude"]   { --heat:var(--pepper); }

.lim-title{
  font-family:Fraunces, Georgia, serif;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-weight:700; font-size:clamp(1.25rem,3vw,1.55rem); letter-spacing:-.012em; line-height:1.2;
  margin:0 0 clamp(16px,3vw,24px); padding-right:84px; color:var(--ink);
}
.lim-heat{
  position:absolute; top:clamp(22px,4.6vw,40px); right:clamp(18px,4.6vw,44px);
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px;
  color:var(--ink-60); border:1px solid var(--mist); background:#fff;
}
.limerick[data-heat="rude"] .lim-heat{ color:var(--pepper); border-color:#F2C3CB; }

.lim-line{
  display:grid; grid-template-columns:1fr 34px; align-items:baseline; column-gap:14px;
  font-family:Newsreader, Georgia, serif; font-weight:300;
  font-size:clamp(1.12rem,2.7vw,1.42rem); line-height:1.45; color:var(--ink);
}
.lim-line + .lim-line{ margin-top:clamp(6px,1.2vw,10px); }
.lim-line.is-short .lim-text{ padding-left:clamp(1.4em,5vw,2.4em); }

.rhyme{
  font-weight:400;
  background:linear-gradient(transparent 62%, var(--rc-soft) 62%);
  padding:0 .06em; border-radius:2px;
}
.lim-tag{
  font-family:Fraunces, Georgia, serif; font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-weight:700; font-size:clamp(1.4rem,3.4vw,1.9rem); line-height:.8; text-align:center;
  color:var(--rc);
}
.lim-line.is-a{ --rc:var(--rhyme-a); --rc-soft:rgba(232,163,23,.30); }
.lim-line.is-b{ --rc:var(--rhyme-b); --rc-soft:rgba(75,51,216,.18); }

.lim-line{ opacity:0; animation:rise .45s cubic-bezier(.2,.7,.3,1) forwards; }
@media (prefers-reduced-motion: reduce){ .lim-line{ opacity:1; animation:none; } }

.lim-skel span:nth-child(3), .lim-skel span:nth-child(4){ margin-left:12%; }

.lim-actions .ghost[hidden]{ display:none; }

/* ---------- static figures in the page copy ---------- */

.lim-figure{ margin:26px 0 30px; max-width:680px; }
.lim-figure figcaption{ font-size:13.5px; color:var(--ink-40); margin:12px 0 0; max-width:62ch; }
.lim-figure .limerick{ box-shadow:none; }
.lim-figure .lim-line{ opacity:1; animation:none; font-size:clamp(1.05rem,2.3vw,1.24rem); }

/* stress marks: a dot above each strong beat */
.beat{ position:relative; font-weight:500; }
.beat::before{
  content:""; position:absolute; left:50%; top:-.18em; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--heat, var(--marigold));
}

.lim-samples{ display:grid; gap:18px; margin:22px 0 8px; }
@media (min-width:900px){ .lim-samples{ grid-template-columns:1fr 1fr; } }
.lim-samples .lim-figure{ margin:0; }
.lim-samples .limerick{ padding:24px 22px 24px 28px; }
.lim-samples .lim-title{ font-size:1.12rem; padding-right:76px; margin-bottom:14px; }
.lim-samples .lim-heat{ top:22px; right:18px; }
.lim-samples .lim-line{ font-size:1.06rem; grid-template-columns:1fr 24px; column-gap:10px; }
.lim-samples .lim-tag{ font-size:1.25rem; }

.heat-table{ display:grid; gap:14px; margin:18px 0 6px; max-width:68ch; }
.heat-row{ display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:start;
  padding:14px 0; border-top:1px solid var(--mist); }
.heat-row:last-child{ border-bottom:1px solid var(--mist); }
.heat-name{ font-weight:600; font-size:14px; padding:4px 10px; border-radius:999px; text-align:center; justify-self:start; }
.heat-name.clean{ background:var(--violet); color:#fff; }
.heat-name.cheeky{ background:var(--marigold); color:var(--ink); }
.heat-name.rude{ background:var(--pepper); color:#fff; }
.heat-row p{ margin:0; }

/* ---------- small screens: keep each line on one line where possible ---------- */
@media (max-width:480px){
  .limerick{ padding:22px 14px 22px 20px; }
  .lim-line{ font-size:1rem; grid-template-columns:1fr 18px; column-gap:6px; letter-spacing:-.005em; }
  .lim-line.is-short .lim-text{ padding-left:1em; }
  .lim-tag{ font-size:1.1rem; }
  .lim-title{ font-size:1.1rem; padding-right:70px; }
  .lim-heat{ top:20px; right:12px; }
  .lim-samples .limerick{ padding:20px 14px 20px 20px; }
  .lim-samples .lim-line{ font-size:.98rem; grid-template-columns:1fr 18px; column-gap:6px; }
  .heat span{ font-size:14px; padding:8px 4px; }
}