/* The ingredient board with the bowls (components/prep_board.html), on the recipe page's Bowls sheet; from the
   phone and large-screen prototypes (RECIPE_VISUALIZATIONS.md 9.15).
   Colours, fonts and sizes from tokens.css. */
.rv2.ready { max-width: 1180px; }

.ready .meter { height: 6px; border-radius: var(--radius-pill); background: var(--color-line); overflow: hidden; margin: var(--space-3) 0 var(--space-1); }
.ready .meter span { display: block; height: 100%; width: 0; background: var(--color-prep); transition: width .25s; }
.ready section { margin-top: var(--space-6); }


/* A bowl: tap once when it is filled */
.ready button { font: inherit; color: inherit; cursor: pointer; }
.ready button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bowl { display: block; text-align: left; padding: var(--space-3) var(--space-4) var(--space-2); background: var(--color-paper);
        border: 1px solid var(--color-line); border-left: 5px solid var(--color-prep); border-radius: var(--radius); }
.bowl.ph-cook { border-left-color: var(--color-cook); }
.bowl.ph-serve { border-left-color: var(--color-serve); }
.bowl-h { display: flex; align-items: center; gap: var(--space-2); }
.bowl-h b { flex: 1; font-size: 17px; }
.bno { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--color-prep-soft); color: var(--color-prep-ink); font: 600 14px/1 var(--font-sans); }
.ph-cook .bno { background: var(--color-cook-soft); color: var(--color-cook-ink); }
.ph-serve .bno { background: var(--color-serve-soft); color: var(--color-serve-ink); }
.bowl summary { list-style: none; cursor: pointer; display: grid; gap: var(--space-1); }
.bowl summary::-webkit-details-marker { display: none; }
.bowl summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.bcheck { flex: none; width: var(--tap); height: var(--tap); margin: -8px 0 -8px -8px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.bowl .more-ic { color: var(--color-muted); transition: transform .15s; }
.bowl[open] .more-ic { transform: rotate(180deg); }
.bowl-more { display: grid; gap: 4px; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-line); font-size: 14px; }
.bowl-more p, .bowl-more ul { margin: 0; }
.bowl-more ul { padding-left: var(--space-4); color: var(--color-muted); }
.bowl-more .eyebrow { margin-right: 4px; }
.bowl .tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1); }
.bowl.is-ready { background: var(--color-soft); }
.bowl.is-ready .bno { background: var(--color-prep); color: var(--color-paper); }
.bowl .tiles { position: relative; }
.bowl.is-ready .tiles::after { content: ""; position: absolute; inset: -4px; background: var(--color-soft); opacity: .55; }

/* A tile: symbol, amount and name */
.tile { display: grid; justify-items: center; align-content: start; gap: 2px; width: 84px; text-align: center; }
.tile .sym { position: relative; overflow: visible; }
.tile .mark { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-prep-soft); border: 1px solid var(--color-paper); color: var(--color-prep-ink); display: grid; place-items: center; }
.tile .mark svg { width: 13px; height: 13px; }
.tile .ta { font: 500 12px/1.2 var(--font-mono); white-space: nowrap; }
.tile .tn { font-size: 13px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.tile .tn em { display: block; font-style: normal; font-size: 12px; color: var(--color-muted); }

.fetchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2); }
.ftile { width: auto; padding: var(--space-1) 4px var(--space-2); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
/* Take out, in kitchen groups; the staples are one row of names */
.ftile[aria-pressed="true"], .btile[aria-pressed="true"], .eq[aria-pressed="true"], .task[aria-pressed="true"] { opacity: .45; }
.ftile[aria-pressed="true"] .tn { text-decoration: line-through; }

.task { display: grid; gap: 2px; width: 100%; text-align: left; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius); }
.task span { color: var(--color-muted); font-size: 14px; }
.eqtiles { display: flex; flex-wrap: wrap; gap: 6px; }
.eq { min-height: 36px; padding: 0 var(--space-3); background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-pill); font-size: 14px; }
.eq[aria-pressed="true"] { text-decoration: line-through; }
/* With a symbol (data/constraints/equipment.json "image"): a tile like the ingredients */
.eq.has-img { display: inline-grid; justify-items: center; gap: 2px; width: 92px; min-height: 0; padding: var(--space-1) 4px var(--space-2);
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.2; text-align: center; }
.eq.special { border-style: dashed; }

.later { margin-top: var(--space-6); border: 1px dashed var(--color-line); border-radius: var(--radius); padding: var(--space-2) var(--space-4); }
.later summary { cursor: pointer; font-weight: 600; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
.later summary small { font-weight: 400; color: var(--color-muted); font-size: 13px; }
.later .board, .later .fetchgrid { margin: var(--space-2) 0 var(--space-3); }

.ready-go { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-8); }
.ready-go .go { display: inline-flex; align-items: center; text-decoration: none; }
.ready-go .reset { min-height: var(--tap); padding: 0 var(--space-4); background: none; border: 0; color: var(--color-muted); text-decoration: underline; }

/* Equipment below the ingredients, full width (it may move to the top later) */
.ready .equipment { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

/* How many, on the image (3× for three cloves); the state of each ingredient as a label under it */
.sym .cnt { position: absolute; left: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--color-ink);
  color: var(--color-paper); font: 600 11px/20px var(--font-mono); font-style: normal; text-align: center; }
.tile .tn em { display: inline-block; margin-top: 2px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-prep-soft); color: var(--color-prep-ink); font-size: 11px; }

/* The ingredient board: bowls, take out and what you probably have side by side, the same tiles in each */
.rv2.ready { max-width: 1180px; }
.board { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.bcard { padding: var(--space-3) var(--space-4) var(--space-3); border-radius: var(--radius); border: 1px solid var(--color-line); background: var(--color-paper); display: grid; gap: var(--space-2); }
.bcard-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2); }
.bcard-h b { font-size: 17px; }
.bcard .tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bcard.takeout { border-style: dashed; border-width: 1.5px; }
.bcard.takeout .ftile { border: 0; background: none; padding: 0; width: 84px; }
.ftile .tstep { font: 500 11px var(--font-mono); color: var(--color-muted); }
.bcard.basics { background: var(--color-soft); border-color: transparent; }
.bcard.basics .btile { width: 64px; border: 0; background: none; padding: 0; font-size: 12px; color: var(--color-muted); }
.bcard.basics .btile .sym img { filter: grayscale(.35); opacity: .85; }
.btile[aria-pressed="true"] .tn { text-decoration: line-through; }
.bcard .ta { white-space: normal; overflow-wrap: anywhere; }