/* The garden's sheds: the pages behind the pea plant (the plots, the way out, the seed packet, the family tree, the
   papers). Plain shapes, the garden's own colours (garden.css is loaded first), phone first. One colour scheme. */
.shed { max-width: 760px; margin: 0 auto; padding: 84px 18px 140px; }
.shed .top h1 { font-size: 40px; }
.shed .line { max-width: 34em; margin-left: auto; margin-right: auto; }
.back { display: inline-block; margin: 0 0 18px; color: var(--moss); text-decoration: none; border-bottom: 1px dotted var(--moss); }
.back:hover, .back:focus-visible { color: var(--fox); border-color: var(--fox); outline: none; }
.quiet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.draft { margin: 0 0 14px; padding: 6px 10px; border: 2px dashed var(--gold); border-radius: 4px; font: italic 15px/1.4 Lora, Georgia, serif; color: var(--moss); background: var(--paper); }
.sheet { margin: 18px 0 0; padding: 22px 22px 16px; border: 2px solid var(--moss); border-radius: 8px; background: var(--paper); }
.sheet h2 { margin: 18px 0 6px; font-size: 26px; color: var(--fox); }
.sheet h2:first-child { margin-top: 0; }
.sheet h3 { margin: 18px 0 4px; font-size: 20px; }
.sheet p { margin: 8px 0; }
.sheet ul, .sheet ol { margin: 8px 0; padding-left: 22px; }
.sheet li { margin: 6px 0; }
.sheet table { width: 100%; margin: 10px 0; border-collapse: collapse; font-size: 16px; }
.sheet th, .sheet td { padding: 6px 8px; border: 1px solid var(--iron); vertical-align: top; text-align: left; }
.sheet th { background: var(--cream); }
.wayon { display: inline-block; margin-top: 16px; padding: 6px 14px; border: 2px solid var(--moss); border-radius: 20px; color: var(--moss); text-decoration: none; background: var(--cream); }
.wayon:hover, .wayon:focus-visible { background: var(--sage); color: #fffdf4; outline: none; }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: grow .45s ease-out; transform-origin: 50% 0; } @keyframes grow { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } } }

/* THE PLOTS: a row of beds, each with a little sign on a post */
.beds-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0 0; padding: 0; list-style: none; }
.plotbed { position: relative; width: 136px; padding: 46px 0 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.plotbed .soilbed { height: 44px; border-radius: 6px 6px 40% 40% / 6px 6px 60% 60%; background: #8a6a4a; border: 3px solid #5c4330; box-shadow: inset 0 6px 0 #6e5339; position: relative; overflow: hidden; }
.plotbed .soilbed i { position: absolute; bottom: 8px; width: 10px; height: 16px; border-radius: 50% 50% 0 0; background: var(--sage); border: 2px solid var(--moss); }
.plotbed .soilbed i:nth-child(1) { left: 22%; } .plotbed .soilbed i:nth-child(2) { left: 46%; height: 22px; } .plotbed .soilbed i:nth-child(3) { left: 70%; height: 12px; }
.plotbed .sign { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 120px; padding: 6px 6px 5px; border: 2.5px solid var(--plum); border-radius: 4px; background: var(--paper); font: bold 14px/1.15 'Crimson Pro', Georgia, serif; color: var(--plum); box-shadow: 3px 3px 0 #2c123033; }
.plotbed .sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 7px; height: 16px; margin-left: -3px; background: var(--plum); }
.plotbed:hover .sign, .plotbed:focus-visible .sign { background: var(--gold); color: #fffdf4; border-color: #7a5c1f; }
.plotbed:focus-visible { outline: none; }
.plotbed.open .sign { background: var(--fox); color: #fffdf4; border-color: #7a1f4d; }
.plotbed.open .soilbed i { background: var(--fox); border-color: #7a1f4d; }

/* THE WAY OUT: a gate, two piles, a scale */
.yard2 { display: block; width: min(100%, 460px); margin: 20px auto 0; }
.gatewing { transform-origin: 20px 60px; transition: transform .7s ease; }
.gatewing.open { transform: perspective(300px) rotateY(-70deg); }
.pan { transition: transform .6s ease; }
.pile { transition: transform .4s ease; transform-origin: 50% 100%; }
.dials { display: grid; gap: 14px; margin: 18px 0 0; }
.dial { display: grid; gap: 4px; padding: 12px 14px; border: 2px solid var(--moss); border-radius: 8px; background: var(--paper); }
.dial label { font: bold 17px/1.3 'Crimson Pro', Georgia, serif; }
.dial output { font: italic 16px/1.3 Lora, Georgia, serif; color: var(--fox); }
.dial input[type=range] { width: 100%; accent-color: var(--fox); height: 28px; }
.dial select { font: inherit; padding: 6px; border: 2px solid var(--moss); border-radius: 6px; background: var(--cream); color: var(--plum); }
.try { display: block; margin: 18px auto 0; padding: 10px 22px; border: 3px solid var(--moss); border-radius: 30px; background: var(--sage); color: #fffdf4; font: bold 18px/1.2 'Crimson Pro', Georgia, serif; cursor: pointer; box-shadow: 0 4px 0 var(--moss); }
.try:hover, .try:focus-visible { background: var(--fox); border-color: #7a1f4d; box-shadow: 0 4px 0 #7a1f4d; outline: none; }
.verdict { margin: 18px 0 0; padding: 16px 18px; border: 2px solid var(--gold); border-radius: 8px; background: var(--paper); font-size: 19px; }
.verdict b { color: var(--fox); }
.rule { margin: 22px 0 0; font-size: 16px; }
.rule ol { padding-left: 22px; }
.rule li { margin: 6px 0; }
.note { font: italic 14px/1.4 Lora, Georgia, serif; color: var(--moss); text-align: center; margin: 12px 0 0; }

/* THE SEED PACKET */
.packet { position: relative; width: min(100%, 300px); margin: 20px auto 0; padding: 18px 16px 14px; border: 3px solid var(--moss); border-radius: 8px 8px 14px 14px; background: var(--paper); text-align: center; box-shadow: 4px 5px 0 #2c123022; }
.packet::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 0; border-top: 2px dashed var(--iron); }
.packet h2 { margin: 6px 0 0; font-size: 22px; color: var(--fox); }
.packet .sprout { display: block; width: 100%; height: 150px; }
.packet .sprout path { transition: d .5s ease, stroke-width .5s ease; }
.tally { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tally li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 2px solid var(--moss); border-radius: 8px; background: var(--paper); }
.tally li b { color: var(--fox); white-space: nowrap; }
.tally li.sum { border-color: var(--gold); border-width: 3px; font-size: 19px; }

/* THE FAMILY TREE */
.treeyard { display: block; width: min(100%, 460px); margin: 10px auto 0; overflow: visible; }
.treeyard a { cursor: pointer; }
.treeyard a:hover rect, .treeyard a:focus-visible rect, .treeyard a:hover ellipse, .treeyard a:focus-visible ellipse { stroke: var(--fox); stroke-width: 3; }
.treeyard a:focus-visible { outline: none; }
.treeyard text { font: 13px/1 'Crimson Pro', Georgia, serif; fill: var(--plum); }
.treeyard .leaf text { font-weight: bold; }
.treeyard .root text { font-style: italic; fill: var(--paper); }
.treeyard .yours text { font-style: italic; fill: var(--moss); }

/* THE PAPERS */
.paper { margin: 18px 0; padding: 26px 26px 20px; border: 1px solid var(--iron); background: #fff; box-shadow: 4px 5px 0 #2c123018; }
.paper h2 { margin: 0 0 6px; font-size: 26px; color: var(--plum); }
.paper h3 { margin: 16px 0 4px; font-size: 19px; }
.paper p { margin: 8px 0; }
.paper blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--gold); font: italic 18px/1.5 Lora, Georgia, serif; }
.paper .small { font-size: 14px; color: var(--moss); }
.printme { display: inline-block; margin: 0 0 0 12px; padding: 4px 12px; border: 2px solid var(--moss); border-radius: 20px; background: var(--cream); color: var(--moss); font: inherit; cursor: pointer; }
.printme:hover, .printme:focus-visible { background: var(--sage); color: #fffdf4; outline: none; }
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .shed { padding: 0; max-width: none; }
  .back, .printme, .note, #paintline, #proto-tag, #proto-say, #proto-card, [id^=coinpurse], [class^=cp-] { display: none !important; }
  .paper { break-inside: avoid; margin: 0 0 18pt; padding: 0 0 14pt; border: 0; border-bottom: 1px solid #999; box-shadow: none; }
  .paper h2 { color: #000; }
}

/* FORMS in the sheds (the gate, the beds): plain fields on paper */
.q { display: block; margin: 22px 0 6px; font: 600 19px 'Crimson Pro', Georgia, serif; color: var(--plum); }
.why { margin: 0 0 8px; font: italic 15px Lora, Georgia, serif; color: #5c4330; }
.why.fit { margin: 0 0 14px; padding: 8px 12px; border-left: 4px solid var(--gold); background: var(--paper); }
.shed textarea, .shed input[type=text], .shed input[type=url], .shed input[type=email] { width: 100%; padding: 10px; border: 2px solid #5c4330; border-radius: 6px; background: var(--paper); color: var(--plum); font: 17px 'Crimson Pro', Georgia, serif; }
.shed textarea { min-height: 96px; resize: vertical; }
.tick { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 16px; }
.two { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; } @media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.knock { margin-top: 22px; padding: 12px 22px; border: 3px solid var(--gold); border-radius: 8px; background: var(--plum); color: #f2e2c4; font: 20px Rye, Georgia, serif; cursor: pointer; }
.knock:disabled { opacity: .6; cursor: wait; }
.no { color: #8a1f3a; }
.ok { color: var(--moss); font: italic 16px Lora, Georgia, serif; }
/* THE BEDS: a member's page, and the row of beds */
.bed .pic img { display: block; max-width: 100%; height: auto; border: 3px solid var(--moss); border-radius: 8px; margin: 12px 0; }
.bed .own { margin: 12px 0; font: italic 17px Lora, Georgia, serif; }
.bed .words p { margin: 10px 0; } .bed .words h2 { font-size: 24px; margin: 18px 0 4px; } .bed .words h3 { font-size: 20px; margin: 16px 0 4px; }
.bed .from { font: italic 14px Lora, Georgia, serif; color: #5c4330; margin-top: 18px; }
.bedlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.bedlist a { display: block; padding: 10px 14px; border: 2px solid var(--moss); border-radius: 8px; background: var(--paper); color: var(--plum); text-decoration: none; }
.bedlist a b { display: block; } .bedlist a span { font: italic 15px Lora, Georgia, serif; color: #5c4330; }
.bedlist a span.where { display: block; font: 13px Georgia, serif; color: var(--moss); margin-top: 2px; }
/* THE WAYS IN: one door per situation */
.ways { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ways details { border: 2px solid var(--moss); border-radius: 8px; background: var(--paper); }
.ways summary { padding: 12px 14px; cursor: pointer; font: 600 19px 'Crimson Pro', Georgia, serif; color: var(--plum); list-style: none; }
.ways summary::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--moss); } .ways details[open] summary::before { content: "\25BE"; }
.ways .in { padding: 0 14px 14px; font-size: 16px; } .ways .in h3 { margin: 10px 0 2px; font-size: 17px; color: var(--fox); } .ways .in p { margin: 4px 0 8px; }