/* Swap these tokens for the theme's real values. Everything else derives from them. */
.ty-make{
  --ink:#232b22; --muted:#5f685d; --paper:#f6f7f3; --rule:#cfd4c8;
  --aegean:#1f4e6b; --gate:#9a6a12;
  --ph1:#1f4e6b; --ph2:#5b7a3a; --ph3:#8a5a2b; --ph4:#6b4a63;
  font-family:inherit; color:var(--ink); background:var(--paper);
  max-width:60rem; margin:0 auto; padding:1.25rem; line-height:1.4;
}
.ty-make h2{font-size:1.6rem; margin:0 0 .25rem; font-weight:700}
.ty-make .sub{color:var(--muted); margin:0 0 1rem}
.ty-make .glance{display:flex; flex-wrap:wrap; gap:.5rem 2rem; padding:.75rem 0; margin:0 0 1rem;
  border-block:2px solid var(--ink)}
.ty-make .glance div{min-width:6rem}
.ty-make .glance dt{font-size:.8rem; color:var(--muted)}
.ty-make .glance dd{margin:0; font-size:1.15rem; font-weight:700}

/* Ingredients: same rules and weights as the table, no new visual devices */
.ty-make .mise{margin:0 0 1rem}
.ty-make .mise h3{font-size:1rem; margin:0 0 .4rem}
.ty-make .mise dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:0 2rem;
  margin:0; border-top:1px solid var(--rule)}
.ty-make .mise dl div{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0;
  border-bottom:1px solid var(--rule)}
.ty-make .mise dt{font-weight:600}
.ty-make .mise dt span{display:block; font-weight:400; font-size:.8rem; color:var(--muted)}
.ty-make .mise dd{margin:0; font-weight:700; white-space:nowrap}

.ty-make table{width:100%; border-collapse:collapse}
.ty-make thead th{text-align:left; font-size:.85rem; font-weight:600; color:var(--muted);
  padding:.4rem .6rem; border-bottom:2px solid var(--ink)}
.ty-make tbody th[scope=rowgroup]{text-align:left; font-size:1rem; padding:1.1rem .6rem .3rem;
  color:var(--phase); border-bottom:1px solid var(--phase)}
.ty-make tbody td, .ty-make tbody th[scope=row]{padding:.65rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top}
.ty-make tbody th[scope=row]{text-align:left; font-size:1.1rem; border-left:6px solid var(--phase); white-space:nowrap}
.ty-make .p1{--phase:var(--ph1)} .ty-make .p2{--phase:var(--ph2)}
.ty-make .p3{--phase:var(--ph3)} .ty-make .p4{--phase:var(--ph4)}

.ty-make .big{font-size:1.25rem; font-weight:700; display:block}
.ty-make .or{font-size:.85rem; color:var(--muted)}
.ty-make .do{font-size:1.05rem; font-weight:600}
.ty-make .n b{font-weight:600; margin-right:.25rem}
.ty-make .n span{display:inline-block; margin:0 .9rem .1rem 0}
.ty-make .tag{font-size:.8rem; font-weight:400; color:var(--muted); display:block}

/* pH that triggers the next step (act at) vs pH that is only checked */
.ty-make .gate{color:var(--gate)}
.ty-make .gate .big{border-bottom:3px solid var(--gate); display:inline-block}
/* optional stages */
.ty-make tr.opt th[scope=row]{border-left-style:dashed}
.ty-make tr.opt{background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(0,0,0,.025) 10px 20px)}

@media (max-width:42rem){
  .ty-make thead{position:absolute; left:-9999px}
  .ty-make table, .ty-make tbody, .ty-make tr, .ty-make td, .ty-make th{display:block}
  .ty-make tbody tr{border-left:6px solid var(--phase); margin:0 0 .6rem; background:#fff}
  .ty-make tbody th[scope=row]{border-left:0; padding-bottom:0; white-space:normal}
  .ty-make tbody td{display:flex; gap:.75rem; border:0; padding:.2rem .6rem}
  .ty-make tbody td::before{content:attr(data-label); flex:0 0 4.5rem; font-size:.8rem; color:var(--muted); padding-top:.2rem}
  .ty-make tbody th[scope=rowgroup]{display:block}
}