/* The Coop. The panels size to their content except on TV-sized screens, where
   cloud-web.css fills the screen (a fixed 48vh clipped the stacked panels to
   78px each at mid widths). */
.chickens-screen .chicken-layout{height:auto}
.chicken-breeds{font-style:italic;color:#52684f}
/* With no eggs logged yet, a quiet line replaces the large number and empty chart. */
.chickens-screen.eggs-empty #eggs-today{font-size:clamp(20px,4vh,30px)}
.chickens-screen.eggs-empty .egg-chart,.chickens-screen.eggs-empty .egg-key{display:none}
@media(min-width:701px){
 .chickens-screen .chicken-layout .journal-small{font-size:clamp(10px,1.7vh,13px)}
 .chickens-screen #chicken-flock h2{font-size:clamp(17px,3vh,24px)}
}
/* On the TV the batch fills the rest of Our Flock; a long note scrolls (chickens.js)
   and fades at the lower edge while it does. */
@media(min-width:901px) and (min-height:501px){
 .chickens-screen .chicken-layout>.journal-panel:first-child{display:flex;flex-direction:column}
 .chickens-screen #chicken-flock{flex:1 1 auto;min-height:0;overflow:hidden}
 .chickens-screen #chicken-flock.flock-rolls{-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}
}
.flock-roll.rolling{animation:flock-roll var(--roll-time) ease-in-out var(--roll-wait) both;will-change:transform}
@keyframes flock-roll{from{transform:translateY(0)}to{transform:translateY(var(--roll))}}
@media(prefers-reduced-motion:reduce){.flock-roll.rolling{animation:none}}
/* Our Flock card: a highlight band, short facts as bullets, and a tip. */
.flock-highlight{display:inline-block;background:#52684f;color:#f6efe2;padding:.3em .75em;margin:.5em 0 .2em;font-size:clamp(12px,2.1vh,16px);letter-spacing:.02em}
.flock-facts{list-style:none;padding:0;margin:.5em 0}
.flock-facts li{position:relative;padding-left:1.1em;margin:.35em 0;font-size:clamp(12px,2.1vh,16px);line-height:1.35;color:#3f4a3c}
.flock-facts li:before{content:'';position:absolute;left:0;top:.5em;width:.45em;height:.45em;border-radius:50%;background:#c491a3}
.flock-tip{border-left:3px solid #dcc593;background:#f3e7d3;padding:.5em .8em;margin-top:.7em}
.flock-tip strong{display:block;font-size:clamp(9px,1.5vh,12px);letter-spacing:.16em;color:#8a6a3a}
.flock-tip p{margin:.2em 0 0;font-size:clamp(12px,2vh,15px);line-height:1.4}
/* Phones: one panel per row, so the flock card has room for its bullets and tip. */
@media(max-width:700px){.chickens-screen .chicken-layout>.journal-panel{grid-column:1/-1}}