/* the make page — the workshop. it wears retro.css like every little page on the square,
   but a workshop gets more room and harder edges. the one thing it keeps dark is the two
   "what this looks like on your house" previews: a block, and your sketch running. those
   stay in the house's own green, because that is the truth of them, not chrome. */

.wrap { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1.1rem, 5vw, 2rem) 2rem; }

/* headings: override retro's single h1 rule and add the workshop's h2/h3 hierarchy */
.rw .wrap h1 { font-family: var(--rw-serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.2rem); margin: .2rem 0 .3rem; letter-spacing: -.01em; }
.wrap h2 { font-family: var(--rw-serif); font-weight: 500; font-size: 1.55rem; margin: 0 0 .3rem; }
.wrap h3 { font-family: var(--rw-serif); font-weight: 500; font-size: 1.1rem; margin: 1.4rem 0 .3rem; }
.n { font-family: var(--rw-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rw-ink-soft); }

/* boxes: the sign, the two roads, each step — dashed paper */
.sign, .road, section.step, .bref { border: 1px dashed var(--rw-hair); border-radius: 10px; background: var(--rw-paper-2); }
html[data-rw="dark"] .sign, html[data-rw="dark"] .road, html[data-rw="dark"] section.step { background: rgba(238,230,212,.03); }
.sign { padding: 1.8rem 1.6rem; margin-bottom: 1.6rem; text-align: center; }
.sign .tag, .rw .tag { font-family: var(--rw-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--rw-ink-soft); }
.two { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-bottom: 2.2rem; }
.road { padding: 1.2rem 1.3rem; }
.road h2 { color: var(--rw-wash-2); }
html[data-rw="dark"] .road h2 { color: var(--rw-wash); }
section.step { padding: 1.4rem 1.4rem 1.5rem; margin-bottom: 1.2rem; }
/* left-align the prose inside boxes (retro centers bare <p>) */
.rw .wrap p { max-width: none; margin: .55rem 0; }
.sign p { margin-left: auto; margin-right: auto; max-width: 40em; }
.road p, section.step > p { color: var(--rw-ink-soft); font-size: .97rem; }
.dim { color: var(--rw-ink-soft); }

pre { background: rgba(51,41,31,.06); border: 1px dashed var(--rw-hair); border-radius: 5px; padding: .6rem .75rem;
  overflow-x: auto; font-size: .8rem; margin: .5rem 0; font-family: var(--rw-mono); line-height: 1.55; color: var(--rw-ink); }
html[data-rw="dark"] pre { background: rgba(238,230,212,.06); }
code { font-family: var(--rw-mono); font-size: .86em; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .6rem 0; }
th { text-align: left; font-family: var(--rw-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rw-ink-soft); font-weight: 400; padding-bottom: .35rem; }
td { padding: .38rem .6rem .38rem 0; border-top: 1px dashed var(--rw-hair); vertical-align: top; }
td:first-child { white-space: nowrap; color: var(--rw-wash-2); font-family: var(--rw-mono); font-size: .84rem; }
html[data-rw="dark"] td:first-child { color: var(--rw-wash); }

/* ---- the live half: a scrap of the canal house, so a block looks here like it looks
        there. deliberately the house's dark green, not the workshop's paper. ---- */
.demo { background: #1d2b23; border-radius: 6px; padding: 1.1rem 1.2rem; margin: .7rem 0;
  box-shadow: inset 0 0 0 1px rgba(232,226,208,.12); color: #E8E2D0; }
.demo .blk { margin: 0 0 1rem; } .demo .blk:last-child { margin-bottom: 0; }
.demo .note { font-family: 'Caveat', cursive; font-size: 1.35rem; line-height: 1.35; color: #E8E2D0; }
.demo .post h4 { margin: 0; font-weight: 400; font-size: 1.15rem; color: #E8E2D0; }
.demo .post .when { font-family: Archivo, sans-serif; font-size: .68rem; color: #9aa88f; letter-spacing: .08em; }
.demo .post p, .demo .ask .said { color: #cfd6c4; }
.demo .marq { overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(232,226,208,.2);
  border-bottom: 1px solid rgba(232,226,208,.2); padding: .3rem 0; font-family: Archivo, sans-serif;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa88f; }
.demo .marq span { display: inline-block; padding-left: 100%; animation: mq 16s linear infinite; }
@keyframes mq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .demo .marq span { animation: none; padding-left: 0; } }
.demo .sticker img, .demo .sticker svg { display: block; width: 6rem; height: auto; }
.demo .ask-q { font-family: 'Caveat', cursive; font-size: 1.3rem; margin: 0 0 .4rem; color: #E8E2D0; }
.demo .divider { height: 1px; background: rgba(232,226,208,.25); }

/* the editable sketch: type javascript, watch it run, in a box it cannot get out of.
   the editor is paper; the running result is the house's green. */
.lab { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 46rem) { .lab { grid-template-columns: 1fr; } }
.lab textarea { width: 100%; min-height: 15rem; font-family: var(--rw-mono); font-size: .78rem;
  line-height: 1.5; background: var(--rw-paper-2); color: var(--rw-ink); border: 1px dashed var(--rw-hair);
  border-radius: 6px; padding: .6rem .7rem; resize: vertical; }
html[data-rw="dark"] .lab textarea { background: rgba(238,230,212,.05); }
.lab iframe { width: 100%; height: 15rem; border: 0; border-radius: 6px; background: #1d2b23; }
.lab .row { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
button.go { font-family: var(--rw-mono); font-size: .8rem; padding: .5em 1.1em; border: 1.5px solid var(--rw-wash);
  border-radius: 8px; background: var(--rw-wash); color: var(--rw-paper-2); cursor: pointer; transition: background .15s, box-shadow .12s; }
button.go:hover { background: var(--rw-wash-2); box-shadow: 3px 3px 0 var(--rw-ink); }
button.go.ghost { background: none; color: var(--rw-ink); border: 1.5px solid var(--rw-ink); }
button.go.ghost:hover { background: var(--rw-ink); color: var(--rw-paper-2); box-shadow: 3px 3px 0 var(--rw-wash); }
.said { font-family: var(--rw-mono); font-size: .76rem; color: var(--rw-ink-soft); }
.safe { border-left: 2px solid var(--rw-wash); padding-left: .8rem; color: var(--rw-ink-soft); font-size: .95rem; }
footer { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px dashed var(--rw-hair);
  font-family: var(--rw-mono); font-size: 11px; letter-spacing: .03em; color: var(--rw-ink-soft); }

/* the generated block reference */
.bref { margin: 0 0 1rem; padding: 1rem 1.1rem; }
.bref h3 { font-family: var(--rw-mono); font-size: .95rem; margin: 0 0 .1rem; color: var(--rw-wash-2); }
html[data-rw="dark"] .bref h3 { color: var(--rw-wash); }
.bref p { margin: 0 0 .35rem; }
.bref table { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 0; }
.bref td:first-child { white-space: nowrap; }