/* Lock and Lay — the Incubator's "Ready to cut" list (#1100; the markup is client/js/incready.js).
   The way into the cutting screen, in the cutting screen's look (hatch.css): an orange strip that says what is waiting
   and holds the one gold slab for all of it, then a row a clutch: a cream-rimmed tub of vermiculite with the clutch's
   eggs in it (good ones cream with a slit, slugs dull and smaller), both parents on a line each, and on the right the
   count, a gold Cut and the day it was laid. The panel stays the game's own warm grey on either theme; what you can
   press (Cut, Cut all) is a raised slab, what you only read is flat or sunk (a locked Cut all sits sunk in the strip).
   Loaded after style.css; the Incubator's other rules (.incy-*, .incx-*) are still there. The bedding is --verm, set
   once on the panel's body (incready.js setBedding), not per card. Each section is a container: under 540px of list
   (the panel dragged narrow, or a phone) a row folds to tub | parents over count and Cut, and names take two lines. */
.incx-sec { container: incr / inline-size; }

/* ---- the strip: Ready to cut, what is waiting, Cut all ---- */
.incr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 10px 12px 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #5fbb77, #3f9257); box-shadow: 0 4px 0 #24603a, inset 0 2px 0 rgba(255, 255, 255, .3); color: #fff; } /* green, as the Incubator's Cut all always was */
.incr-ht { display: flex; flex-direction: column; gap: 3px; margin-right: auto; min-width: 0; }
.incr-sec .incr-head h3, body.mobile #view .incr-sec .incr-head h3 { margin: 0; font: 400 19px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.incr-ht span { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.incr-ht i { font-style: normal; font-weight: 800; }
/* the Project chips and "5 ready for <project>" sit between the strip and the rows */
.incr-sec .incy-projs { margin: 0 0 10px; }
.incr-sec .incy-pcount { margin: -4px 0 8px; }

/* ---- the gold slabs: Cut all in the strip, Cut on a row. (button.x, and :hover named too, so the game's own button
   hover, which paints any button ink on paper, never reaches them.) ---- */
:root .incr-sec :is(button.incr-all, button.incr-cut), :root .incr-sec :is(button.incr-all, button.incr-cut):hover { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 0; margin: 0; border: 0; border-radius: 11px;
  background: linear-gradient(180deg, #ffe46a, #ffbd1c); color: #3d2600; font: 400 15px/1.05 var(--gmf); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 0 #a86400, inset 0 2px 0 rgba(255, 255, 255, .55); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
:root .incr-sec :is(button.incr-all, button.incr-cut):hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
:root .incr-sec :is(button.incr-all, button.incr-cut):active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #a86400, inset 0 2px 0 rgba(255, 255, 255, .55); }
:root .incr-sec :is(button.incr-all, button.incr-cut):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.incr-sec :is(.incr-all, .incr-cut) svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
:root .incr-sec button.incr-all { max-width: 100%; min-height: 40px; padding: 5px 18px 5px 15px; font-size: 16px; }
:root .incr-sec button.incr-cut { height: 38px; padding: 0 20px 0 16px; }
/* on the green strip, Cut all is a cream slab with green words: still plainly the button. The row's Cut stays gold */
:root .incr-sec button.incr-all:not(.incr-locked), :root .incr-sec button.incr-all:not(.incr-locked):hover { background: linear-gradient(180deg, #fffdf4, #f1e6c9); color: #1f5a33; box-shadow: 0 4px 0 #24603a, inset 0 2px 0 #fff; text-shadow: none; }
:root .incr-sec button.incr-all:not(.incr-locked):active { box-shadow: 0 1px 0 #24603a, inset 0 2px 0 #fff; }
/* Cut all's words: the count, and under it what a Project chip narrowed it to */
.incr-all-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.incr-all-t b { font-weight: 400; }
.incr-all-t small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 600 11.5px/1.1 var(--sans); letter-spacing: 0; text-transform: none; opacity: .86; }
/* below level 25: it can't be pressed, so it sits sunk in the strip, with its lock and the level. (Its own class: the
   game's button.locked is the supporter lock, with a gold dot.) */
:root .incr-sec button.incr-all.incr-locked, :root .incr-sec button.incr-all.incr-locked:hover { background: rgba(8, 44, 20, .34); color: #fff; opacity: 1; box-shadow: inset 0 3px 5px rgba(6, 30, 14, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .22); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); cursor: not-allowed; filter: none; transform: none; }
.incr-all.incr-locked .incr-all-t, .incr-all.incr-locked svg { opacity: .8; }

/* ---- the tub: a cream rim, vermiculite lit from above (the cutting screen's nest, small) ---- */
.incr-tub, .incy-card .incy-tray { box-sizing: border-box; border: 3px solid #f1e2bf; border-radius: 14px; background-color: #9a7645;
  background-image: radial-gradient(ellipse 100% 65% at 50% 0, rgba(255, 238, 196, .32), transparent 75%), linear-gradient(180deg, rgba(60, 28, 6, 0) 60%, rgba(60, 28, 6, .3)), var(--verm, none); background-size: 100% 100%, 100% 100%, 180px 180px;
  box-shadow: inset 0 4px 9px rgba(50, 24, 4, .55), 0 0 0 1.5px #2c2118, 0 3px 0 1.5px #15100b; }
.incr-tub { display: grid; place-items: center; align-self: stretch; min-height: 74px; padding: 8px 8px 10px; }
.incr-eggs { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 5px 4px; }
.incr-eggs i { position: relative; overflow: hidden; width: 18px; height: 24px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: radial-gradient(circle at 38% 30%, #fffaf0, #eadcb8 60%, #cdbb91); box-shadow: 0 3px 3px rgba(30, 14, 2, .6); }
.incr-eggs i:not(.slug)::after { content: ''; position: absolute; left: 3px; right: 3px; top: 38%; height: 4px; background: linear-gradient(135deg, transparent 45%, #6b5a3c 45% 55%, transparent 55%) 0 0 / 4px 4px repeat-x; } /* pipping: a slit */
.incr-eggs i.slug { background: radial-gradient(circle at 40% 30%, #cdbf9c, #93825f); opacity: .75; transform: scale(.82); }

/* ---- a row ---- */
.incr { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 9px; padding: 10px 14px 12px 10px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-2); box-shadow: 0 3px 0 rgba(0, 0, 0, .28); }
.incr.maternal { box-shadow: inset 3px 0 0 #a2465e, 0 3px 0 rgba(0, 0, 0, .28); } /* the mother sat on these */
/* the parents: a picture, the whole short morph (two lines at most; the full label is the tooltip), the hets small under it */
.incr-mid { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.incr-par { display: flex; align-items: center; gap: 9px; min-width: 0; }
.incr-pic { flex: none; display: grid; place-items: center; width: 54px; height: 32px; border-radius: 7px; overflow: hidden; background: #14110d; box-shadow: 0 0 0 1px var(--rule); color: #8d8578; }
.incr-pic canvas { display: block; width: 100%; height: 100%; }
.incr-noimg .sx { width: 17px; height: 17px; }
.incr-pt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.incr-pt b { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.incr-pt b .sx { flex: none; width: 13px; height: 13px; margin-top: 1.5px; vertical-align: 0; }
.incr-pt b span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.incr-pt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ink-3); }
/* its project chip, and whether the mother sat on them */
.incr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.incr-tags .pj-fit { margin: 0; }
.incr-mom { font-style: normal; font-size: 11.5px; font-weight: 600; color: #a2465e; white-space: nowrap; }
:root[data-theme="dark"] .incr-mom { color: #d0869a; }
/* the count, Cut, laid */
.incr-act { display: grid; justify-items: end; gap: 6px; }
.incr-count { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.incr-count b { margin-right: 3px; font: 400 19px/1 var(--gmf); color: var(--ink); }
.incr-count small { margin-left: 6px; font-size: 11px; color: var(--ink-3); }
.incr-laid { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ---- a narrow list: the tub beside the parents, the count and Cut under them ---- */
@container incr (max-width: 540px) {
  .incr { grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "tub mid" "act act"; gap: 10px 12px; padding: 10px 12px 11px 10px; }
  .incr-tub { grid-area: tub; padding: 7px 6px 9px; }
  .incr-eggs { gap: 4px 3px; } .incr-eggs i { width: 16px; height: 21px; }
  .incr-mid { grid-area: mid; gap: 7px; }
  .incr-act { grid-area: act; display: flex; align-items: center; gap: 4px 12px; padding-top: 9px; border-top: 1px solid var(--rule); }
  .incr-laid { order: 2; margin-right: auto; } .incr-act .incr-cut { order: 3; }
  .incr-head { padding: 10px 12px 13px 14px; }
  :root .incr-sec button.incr-all { flex: 1 1 100%; justify-content: center; }
}
/* a phone's width: a smaller tub and picture, a name may take three lines, and the day sits under the count so the
   three never fight for one line (a 320px phone) */
@container incr (max-width: 400px) {
  .incr { grid-template-columns: 88px minmax(0, 1fr); gap: 9px 10px; }
  .incr-tub { padding: 6px 5px 8px; } .incr-eggs i { width: 15px; height: 20px; }
  .incr-par { gap: 8px; } .incr-pic { width: 46px; height: 27px; }
  .incr-pt b span { -webkit-line-clamp: 3; }
  .incr-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "count cut" "laid cut"; justify-items: start; gap: 2px 10px; }
  .incr-count { grid-area: count; } .incr-laid { grid-area: laid; margin: 0; } .incr-act .incr-cut { grid-area: cut; }
}
/* the phone: buttons a thumb can hit */
body.mobile .incr-sec button.incr-cut { height: 44px; padding: 0 22px 0 18px; font-size: 16px; }
body.mobile .incr-sec button.incr-all { min-height: 46px; font-size: 17px; }
body.mobile .incr-sec .inc-projs-m { margin: 0 0 10px; } body.mobile .incr-sec > .meta { margin: -4px 0 8px; }
@media (prefers-reduced-motion: reduce) { :root .incr-sec :is(button.incr-all, button.incr-cut) { transition: none; } }

/* ---- one family: the clutches still cooking sit in the same tub, and every clutch card in the panel has one shape.
   Nothing else about Incubating or Hatched changes. (In a window under 900px style.css stacks a cooking card's parents;
   its tub stays beside them here, as a ready row's does, instead of spreading across the card.) ---- */
.incy-card, .incx-card.incy-hatched { border-radius: 14px; background: var(--paper-2); box-shadow: 0 3px 0 rgba(0, 0, 0, .28); }
.incy-card { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 12px 14px 13px 10px; }
.incy-card.maternal { border-left: 1px solid var(--rule); box-shadow: inset 3px 0 0 #a2465e, 0 3px 0 rgba(0, 0, 0, .28); } /* the same mark as a ready row's, and the tub keeps its place */
.incy-card .incy-tray { align-self: stretch; grid-template-columns: repeat(4, 18px); gap: 5px 4px; min-height: 74px; padding: 8px 8px 10px; }
.incy-card .incy-tray i { width: 18px; height: 24px; box-shadow: 0 3px 3px rgba(30, 14, 2, .6); }
.incy-card .incy-tray i.slug { background: radial-gradient(circle at 40% 30%, #cdbf9c, #93825f); opacity: .75; transform: scale(.82); }
/* a narrow list: the smaller tub, and the parents one over the other with room for their names (side by side they were
   cut to a letter each) */
@container incr (max-width: 540px) {
  .incy-card { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px 12px 10px; }
  .incy-card .incy-tray { align-self: start; grid-template-columns: repeat(4, 16px); gap: 4px 3px; padding: 7px 6px 9px; }
  .incy-card .incy-tray i { width: 16px; height: 21px; }
  .incy-pars { grid-template-columns: minmax(0, 1fr); gap: 7px; } .incy-x { display: none; }
  .incy-par b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; }
}

/* ---- the list of incubators folds (#1131): one sunk line saying how many incubators and slots are in use; a tap opens it ---- */
.incy-fold { margin: 0 0 12px; border-radius: 12px; background: #14110d; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5); }
.incy-fold > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; border-radius: 12px; }
.incy-fold > summary::-webkit-details-marker { display: none; }
.incy-fold-t { font: 400 15px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #f3ece0; }
.incy-fold-n { font: 600 12.5px/1 var(--sans); color: #b9ae98; }
.incy-fold-car { margin-left: auto; width: 0; height: 0; border: 6px solid transparent; border-top-color: #b9ae98; border-bottom-width: 0; transition: transform .15s; }
.incy-fold[open] .incy-fold-car { transform: rotate(180deg); }
body:not(.mobile) .incy-fold > summary:hover .incy-fold-t { color: #fff; }
.incy-fold > .incy-shelf { margin: 0 6px 6px; }
:root:not([data-theme="dark"]) .incy-fold { background: #2a2620; }
/* Resume sorting (#1419): the babies a cut left undecided, one tap back into its screen */
.incr-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--rule-2); border-left: 3px solid var(--amber, #d99a2b); border-radius: 10px; background: var(--paper-2); }
.incr-resume-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.incr-resume-t span { font-size: 12.5px; color: var(--ink-2); }